@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533

package/dist/cjs/ix-dropdown.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-dropdown.entry.cjs.js","mappings":"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","names":["ArrowFocusController","flip","inline","shift","offset","autoUpdate","computePosition","h","Host"],"sources":["src/components/dropdown/dropdown-controller.ts","src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.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\nimport { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n  closeBehavior: CloseBehavior;\n  discoverAllSubmenus: boolean;\n\n  getAssignedSubmenuIds(): string[];\n  getId(): string;\n\n  discoverSubmenu(): void;\n\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n  item: unknown\n): item is DropdownItemWrapper {\n  return (\n    item &&\n    (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n    typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n  );\n}\n\nexport interface DropdownItemWrapper {\n  getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n  private dropdowns: Map<string, DropdownInterface> = new Map<\n    string,\n    DropdownInterface\n  >();\n  private submenuIds: SubmenuIds = {};\n\n  private isWindowListenerActive = false;\n\n  connected(dropdown: DropdownInterface) {\n    if (!this.isWindowListenerActive) {\n      this.addOverlayListeners();\n    }\n    this.dropdowns.set(dropdown.getId(), dropdown);\n\n    if (dropdown.discoverAllSubmenus) {\n      this.discoverSubmenus();\n    }\n  }\n\n  disconnected(dropdown: DropdownInterface) {\n    this.dropdowns.delete(dropdown.getId());\n  }\n\n  discoverSubmenus() {\n    this.dropdowns.forEach((dropdown) => {\n      dropdown.discoverSubmenu();\n    });\n  }\n\n  present(dropdown: DropdownInterface) {\n    if (!dropdown.isPresent() && dropdown.willPresent()) {\n      this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n      dropdown.present();\n    }\n  }\n\n  dismissChildren(uid: string) {\n    const childIds = this.submenuIds[uid] || [];\n    for (const id of childIds) {\n      this.dismiss(this.dropdowns.get(id));\n    }\n  }\n\n  dismiss(dropdown: DropdownInterface) {\n    if (dropdown.isPresent() && dropdown.willDismiss()) {\n      this.dismissChildren(dropdown.getId());\n      dropdown.dismiss();\n      delete this.submenuIds[dropdown.getId()];\n    }\n  }\n\n  dismissAll(\n    ignoreBehaviorForIds: string[] = [],\n    ignoreRelatedDropdowns = false\n  ) {\n    this.dropdowns.forEach((dropdown) => {\n      const preventClosing =\n        dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;\n\n      const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());\n      const path = this.buildComposedPath(dropdown.getId(), new Set<string>());\n\n      if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {\n        let skipRelatedDropdown = false;\n\n        ignoreBehaviorForIds.forEach((id) => {\n          if (path.has(id)) {\n            skipRelatedDropdown = true;\n            return;\n          }\n        });\n\n        if (!skipRelatedDropdown) {\n          return;\n        }\n      }\n\n      if (!shouldIgnore && preventClosing) {\n        return;\n      }\n\n      this.dismiss(dropdown);\n    });\n  }\n\n  dismissOthers(uid: string) {\n    let path = this.buildComposedPath(uid, new Set<string>());\n\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        dropdown.closeBehavior !== 'inside' &&\n        dropdown.closeBehavior !== false &&\n        !path.has(dropdown.getId())\n      ) {\n        this.dismiss(dropdown);\n      }\n    });\n  }\n\n  pathIncludesTrigger(eventTargets: EventTarget[]) {\n    for (let eventTarget of eventTargets) {\n      if (eventTarget instanceof HTMLElement) {\n        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {\n          return eventTarget;\n        }\n      }\n    }\n\n    return;\n  }\n\n  private pathIncludesDropdown(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n    );\n  }\n\n  private buildComposedPath(id: string, path: Set<string>): Set<string> {\n    if (this.submenuIds[id]) {\n      path.add(id);\n    }\n\n    for (const ruleKey of Object.keys(this.submenuIds)) {\n      if (this.submenuIds[ruleKey].includes(id)) {\n        this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n      }\n    }\n\n    return path;\n  }\n\n  private addOverlayListeners() {\n    this.isWindowListenerActive = true;\n\n    window.addEventListener('click', (event: PointerEvent) => {\n      const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n      const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n      if (!hasTrigger && !hasDropdown) {\n        this.dismissAll();\n      }\n    });\n\n    window.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.dismissAll([...this.dropdowns.keys()]);\n      }\n    });\n  }\n}\n\nexport const addDisposableEventListener = (\n  element: Element | Window | Document,\n  eventType: string,\n  callback: EventListenerOrEventListenerObject\n) => {\n  element.addEventListener(eventType, callback);\n\n  return () => {\n    element.removeEventListener(eventType, callback);\n  };\n};\n\nexport const addDisposableEventListenerAsArray = (\n  listener: {\n    element: Element | Window | Document;\n    eventType: string;\n    callback: EventListenerOrEventListenerObject;\n  }[]\n) => {\n  const disposables = listener.map(({ callback, element, eventType }) =>\n    addDisposableEventListener(element, eventType, callback)\n  );\n\n  return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  background-color: var(--theme-color-2);\n  border-radius: var(--theme-default-border-radius);\n  @include ix-component;\n  min-width: 0px;\n  z-index: var(--theme-z-index-dropdown);\n  box-shadow: var(--theme-shadow-4);\n\n  padding: 0.25rem 0px;\n\n  .dropdown-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    color: var(--theme-menu-header--color);\n    padding: 0 $default-space;\n  }\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n\n:host(:not(.show)) {\n  display: none;\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  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport { ArrowFocusController } from '../utils/focus';\nimport {\n  addDisposableEventListener,\n  CloseBehavior,\n  dropdownController,\n  DropdownInterface,\n  hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement | Promise<HTMLElement>;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * @internal\n   * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n   * This property indicates the need for that to the controller.\n   */\n  @Prop() discoverAllSubmenus = false;\n\n  /** @internal */\n  @Prop() ignoreRelatedSubmenu = false;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n  private localUId = `dropdown-${sequenceId++}`;\n  private assignedSubmenu: string[] = [];\n\n  private arrowFocusController: ArrowFocusController;\n  private focusDropdownItemBind = this.focusDropdownItem.bind(this);\n\n  private itemObserver = new MutationObserver(() => {\n    this.arrowFocusController.items = this.dropdownItems;\n  });\n\n  connectedCallback(): void {\n    dropdownController.connected(this);\n\n    if (this.trigger != undefined) {\n      this.registerListener(this.trigger);\n    }\n  }\n\n  @Listen('ix-assign-sub-menu')\n  cacheSubmenuId(event: CustomEvent<string>) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n\n    const { detail } = event;\n\n    if (this.assignedSubmenu.indexOf(detail) === -1) {\n      this.assignedSubmenu.push(detail);\n    }\n  }\n\n  disconnectedCallback() {\n    dropdownController.dismiss(this);\n    dropdownController.disconnected(this);\n\n    if (this.disposeClickListener) {\n      this.disposeClickListener();\n    }\n\n    if (this.disposeKeyListener) {\n      this.disposeKeyListener();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  getAssignedSubmenuIds() {\n    return this.assignedSubmenu;\n  }\n\n  isPresent() {\n    return this.show;\n  }\n\n  present() {\n    this.show = true;\n  }\n\n  dismiss() {\n    this.show = false;\n  }\n\n  getId() {\n    return this.localUId;\n  }\n\n  willDismiss() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n    return !defaultPrevented;\n  }\n\n  willPresent() {\n    const { defaultPrevented } = this.showChanged.emit(true);\n    return !defaultPrevented;\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private disposeClickListener?: () => void;\n  private disposeKeyListener?: () => void;\n\n  private addEventListenersFor() {\n    this.disposeClickListener?.();\n    this.disposeKeyListener?.();\n\n    const toggleController = () => {\n      if (!this.isPresent()) {\n        dropdownController.present(this);\n      } else {\n        dropdownController.dismiss(this);\n      }\n\n      dropdownController.dismissOthers(this.getId());\n    };\n\n    this.disposeClickListener = addDisposableEventListener(\n      this.triggerElement,\n      'click',\n      (event: PointerEvent) => {\n        if (!event.defaultPrevented) {\n          toggleController();\n        }\n      }\n    );\n\n    this.triggerElement?.setAttribute(\n      'data-ix-dropdown-trigger',\n      this.localUId\n    );\n  }\n\n  /** @internal */\n  @Method()\n  async discoverSubmenu() {\n    this.triggerElement?.dispatchEvent(\n      new CustomEvent('ix-assign-sub-menu', {\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n        detail: this.localUId,\n      })\n    );\n  }\n\n  private registerKeyListener() {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    this.disposeKeyListener = addDisposableEventListener(\n      this.triggerElement,\n      'keydown',\n      (event: KeyboardEvent) => {\n        if (event.key !== 'ArrowDown') {\n          return;\n        }\n\n        if (document.activeElement !== this.triggerElement) {\n          return;\n        }\n\n        dropdownController.present(this);\n\n        setTimeout(() => {\n          this.focusDropdownItem(0);\n        });\n      }\n    );\n  }\n\n  private async registerListener(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      this.addEventListenersFor();\n      this.discoverSubmenu();\n    }\n  }\n\n  private async resolveElement(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ) {\n    const el = await this.findElement(element);\n\n    return this.checkForSubmenuAnchor(el);\n  }\n\n  private async checkForSubmenuAnchor(element: Element) {\n    if (!element) {\n      return null;\n    }\n\n    if (hasDropdownItemWrapperImplemented(element)) {\n      const dropdownItem = await element.getDropdownItemElement();\n      dropdownItem.isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    if (element.tagName === 'IX-DROPDOWN-ITEM') {\n      (element as HTMLIxDropdownItemElement).isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    return element;\n  }\n\n  private findElement(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ): Promise<Element> {\n    if (element instanceof Promise) {\n      return element;\n    }\n\n    if (typeof element === 'object') {\n      return Promise.resolve(element);\n    }\n\n    if (typeof element != 'string') {\n      return;\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n\n      this.arrowFocusController = new ArrowFocusController(\n        this.dropdownItems,\n        this.dropdownRef,\n        this.focusDropdownItemBind\n      );\n\n      this.itemObserver.observe(this.dropdownRef, {\n        childList: true,\n        subtree: true,\n      });\n\n      this.registerKeyListener();\n    } else {\n      this.arrowFocusController.disconnect();\n      this.itemObserver.disconnect();\n      this.disposeKeyListener?.();\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>) {\n    this.registerListener(newTriggerValue);\n  }\n\n  private isAnchorSubmenu(): boolean {\n    if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n      // Is no official dropdown-item, but check if any dropdown-item\n      // is placed somewhere up the DOM\n      return !!this.anchorElement?.closest('ix-dropdown-item');\n    }\n\n    return true;\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.show) {\n      return;\n    }\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private focusDropdownItem(index: number) {\n    requestAnimationFrame(() => {\n      this.dropdownItems[index]?.shadowRoot.querySelector('button').focus();\n    });\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n  }\n\n  private isTriggerElement(element: HTMLElement) {\n    const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n    return trigger;\n  }\n\n  private onDropdownClick(event: PointerEvent) {\n    const target = dropdownController.pathIncludesTrigger(event.composedPath());\n    if (target) {\n      event.preventDefault();\n\n      if (this.isTriggerElement(target)) {\n        return;\n      }\n    }\n\n    if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {\n      dropdownController.dismissAll([this.getId()], this.ignoreRelatedSubmenu);\n      return;\n    }\n\n    dropdownController.dismissOthers(this.getId());\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        data-ix-dropdown={this.localUId}\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n        onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-dropdown.entry.cjs.js","mappings":"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","names":["ArrowFocusController","flip","inline","shift","offset","autoUpdate","computePosition","h","Host"],"sources":["src/components/dropdown/dropdown-controller.ts","src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.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\nimport { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n  closeBehavior: CloseBehavior;\n  discoverAllSubmenus: boolean;\n\n  getAssignedSubmenuIds(): string[];\n  getId(): string;\n\n  discoverSubmenu(): void;\n\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n  item: unknown\n): item is DropdownItemWrapper {\n  return (\n    item &&\n    (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n    typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n  );\n}\n\nexport interface DropdownItemWrapper {\n  getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n  private dropdowns: Map<string, DropdownInterface> = new Map<\n    string,\n    DropdownInterface\n  >();\n  private submenuIds: SubmenuIds = {};\n\n  private isWindowListenerActive = false;\n\n  connected(dropdown: DropdownInterface) {\n    if (!this.isWindowListenerActive) {\n      this.addOverlayListeners();\n    }\n    this.dropdowns.set(dropdown.getId(), dropdown);\n\n    if (dropdown.discoverAllSubmenus) {\n      this.discoverSubmenus();\n    }\n  }\n\n  disconnected(dropdown: DropdownInterface) {\n    this.dropdowns.delete(dropdown.getId());\n  }\n\n  discoverSubmenus() {\n    this.dropdowns.forEach((dropdown) => {\n      dropdown.discoverSubmenu();\n    });\n  }\n\n  present(dropdown: DropdownInterface) {\n    if (!dropdown.isPresent() && dropdown.willPresent()) {\n      this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n      dropdown.present();\n    }\n  }\n\n  dismissChildren(uid: string) {\n    const childIds = this.submenuIds[uid] || [];\n    for (const id of childIds) {\n      this.dismiss(this.dropdowns.get(id));\n    }\n  }\n\n  dismiss(dropdown: DropdownInterface) {\n    if (dropdown.isPresent() && dropdown.willDismiss()) {\n      this.dismissChildren(dropdown.getId());\n      dropdown.dismiss();\n      delete this.submenuIds[dropdown.getId()];\n    }\n  }\n\n  dismissAll(\n    ignoreBehaviorForIds: string[] = [],\n    ignoreRelatedDropdowns = false\n  ) {\n    this.dropdowns.forEach((dropdown) => {\n      const preventClosing =\n        dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;\n\n      const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());\n      const path = this.buildComposedPath(dropdown.getId(), new Set<string>());\n\n      if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {\n        let skipRelatedDropdown = false;\n\n        ignoreBehaviorForIds.forEach((id) => {\n          if (path.has(id)) {\n            skipRelatedDropdown = true;\n            return;\n          }\n        });\n\n        if (!skipRelatedDropdown) {\n          return;\n        }\n      }\n\n      if (!shouldIgnore && preventClosing) {\n        return;\n      }\n\n      this.dismiss(dropdown);\n    });\n  }\n\n  dismissOthers(uid: string) {\n    let path = this.buildComposedPath(uid, new Set<string>());\n    path.add(uid);\n\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        dropdown.closeBehavior !== 'inside' &&\n        dropdown.closeBehavior !== false &&\n        !path.has(dropdown.getId())\n      ) {\n        this.dismiss(dropdown);\n      }\n    });\n  }\n\n  pathIncludesTrigger(eventTargets: EventTarget[]) {\n    for (let eventTarget of eventTargets) {\n      if (eventTarget instanceof HTMLElement) {\n        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {\n          return eventTarget;\n        }\n      }\n    }\n\n    return;\n  }\n\n  private pathIncludesDropdown(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n    );\n  }\n\n  private buildComposedPath(id: string, path: Set<string>): Set<string> {\n    if (this.submenuIds[id]) {\n      path.add(id);\n    }\n\n    for (const ruleKey of Object.keys(this.submenuIds)) {\n      if (this.submenuIds[ruleKey].includes(id)) {\n        this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n      }\n    }\n\n    return path;\n  }\n\n  private addOverlayListeners() {\n    this.isWindowListenerActive = true;\n\n    window.addEventListener('click', (event: PointerEvent) => {\n      const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n      const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n      if (!hasTrigger && !hasDropdown) {\n        this.dismissAll();\n      }\n    });\n\n    window.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.dismissAll([...this.dropdowns.keys()]);\n      }\n    });\n  }\n}\n\nexport const addDisposableEventListener = (\n  element: Element | Window | Document,\n  eventType: string,\n  callback: EventListenerOrEventListenerObject\n) => {\n  element.addEventListener(eventType, callback);\n\n  return () => {\n    element.removeEventListener(eventType, callback);\n  };\n};\n\nexport const addDisposableEventListenerAsArray = (\n  listener: {\n    element: Element | Window | Document;\n    eventType: string;\n    callback: EventListenerOrEventListenerObject;\n  }[]\n) => {\n  const disposables = listener.map(({ callback, element, eventType }) =>\n    addDisposableEventListener(element, eventType, callback)\n  );\n\n  return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  background-color: var(--theme-color-2);\n  border-radius: var(--theme-default-border-radius);\n  @include ix-component;\n  min-width: 0px;\n  z-index: var(--theme-z-index-dropdown);\n  box-shadow: var(--theme-shadow-4);\n\n  padding: 0.25rem 0px;\n\n  .dropdown-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    color: var(--theme-menu-header--color);\n    padding: 0 $default-space;\n  }\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n\n:host(:not(.show)) {\n  display: none;\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  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport { ArrowFocusController } from '../utils/focus';\nimport {\n  addDisposableEventListener,\n  CloseBehavior,\n  dropdownController,\n  DropdownInterface,\n  hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement | Promise<HTMLElement>;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * @internal\n   * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n   * This property indicates the need for that to the controller.\n   */\n  @Prop() discoverAllSubmenus = false;\n\n  /** @internal */\n  @Prop() ignoreRelatedSubmenu = false;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n  private localUId = `dropdown-${sequenceId++}`;\n  private assignedSubmenu: string[] = [];\n\n  private arrowFocusController: ArrowFocusController;\n  private focusDropdownItemBind = this.focusDropdownItem.bind(this);\n\n  private itemObserver = new MutationObserver(() => {\n    this.arrowFocusController.items = this.dropdownItems;\n  });\n\n  connectedCallback(): void {\n    dropdownController.connected(this);\n\n    if (this.trigger != undefined) {\n      this.registerListener(this.trigger);\n    }\n  }\n\n  @Listen('ix-assign-sub-menu')\n  cacheSubmenuId(event: CustomEvent<string>) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n\n    const { detail } = event;\n\n    if (this.assignedSubmenu.indexOf(detail) === -1) {\n      this.assignedSubmenu.push(detail);\n    }\n  }\n\n  disconnectedCallback() {\n    dropdownController.dismiss(this);\n    dropdownController.disconnected(this);\n\n    if (this.disposeClickListener) {\n      this.disposeClickListener();\n    }\n\n    if (this.disposeKeyListener) {\n      this.disposeKeyListener();\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  getAssignedSubmenuIds() {\n    return this.assignedSubmenu;\n  }\n\n  isPresent() {\n    return this.show;\n  }\n\n  present() {\n    this.show = true;\n  }\n\n  dismiss() {\n    this.show = false;\n  }\n\n  getId() {\n    return this.localUId;\n  }\n\n  willDismiss() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n    return !defaultPrevented;\n  }\n\n  willPresent() {\n    const { defaultPrevented } = this.showChanged.emit(true);\n    return !defaultPrevented;\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private disposeClickListener?: () => void;\n  private disposeKeyListener?: () => void;\n\n  private addEventListenersFor() {\n    this.disposeClickListener?.();\n    this.disposeKeyListener?.();\n\n    const toggleController = () => {\n      if (!this.isPresent()) {\n        dropdownController.present(this);\n      } else {\n        dropdownController.dismiss(this);\n      }\n\n      dropdownController.dismissOthers(this.getId());\n    };\n\n    this.disposeClickListener = addDisposableEventListener(\n      this.triggerElement,\n      'click',\n      (event: PointerEvent) => {\n        if (!event.defaultPrevented) {\n          toggleController();\n        }\n      }\n    );\n\n    this.triggerElement?.setAttribute(\n      'data-ix-dropdown-trigger',\n      this.localUId\n    );\n  }\n\n  /** @internal */\n  @Method()\n  async discoverSubmenu() {\n    this.triggerElement?.dispatchEvent(\n      new CustomEvent('ix-assign-sub-menu', {\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n        detail: this.localUId,\n      })\n    );\n  }\n\n  private registerKeyListener() {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    this.disposeKeyListener = addDisposableEventListener(\n      this.triggerElement,\n      'keydown',\n      (event: KeyboardEvent) => {\n        if (event.key !== 'ArrowDown') {\n          return;\n        }\n\n        if (document.activeElement !== this.triggerElement) {\n          return;\n        }\n\n        dropdownController.present(this);\n\n        setTimeout(() => {\n          this.focusDropdownItem(0);\n        });\n      }\n    );\n  }\n\n  private async registerListener(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      this.addEventListenersFor();\n      this.discoverSubmenu();\n    }\n  }\n\n  private async resolveElement(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ) {\n    const el = await this.findElement(element);\n\n    return this.checkForSubmenuAnchor(el);\n  }\n\n  private async checkForSubmenuAnchor(element: Element) {\n    if (!element) {\n      return null;\n    }\n\n    if (hasDropdownItemWrapperImplemented(element)) {\n      const dropdownItem = await element.getDropdownItemElement();\n      dropdownItem.isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    if (element.tagName === 'IX-DROPDOWN-ITEM') {\n      (element as HTMLIxDropdownItemElement).isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    return element;\n  }\n\n  private findElement(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ): Promise<Element> {\n    if (element instanceof Promise) {\n      return element;\n    }\n\n    if (typeof element === 'object') {\n      return Promise.resolve(element);\n    }\n\n    if (typeof element != 'string') {\n      return;\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n\n      this.arrowFocusController = new ArrowFocusController(\n        this.dropdownItems,\n        this.dropdownRef,\n        this.focusDropdownItemBind\n      );\n\n      this.itemObserver.observe(this.dropdownRef, {\n        childList: true,\n        subtree: true,\n      });\n\n      this.registerKeyListener();\n    } else {\n      this.arrowFocusController?.disconnect();\n      this.itemObserver.disconnect();\n      this.disposeKeyListener?.();\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>) {\n    this.registerListener(newTriggerValue);\n  }\n\n  private isAnchorSubmenu(): boolean {\n    if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n      // Is no official dropdown-item, but check if any dropdown-item\n      // is placed somewhere up the DOM\n      return !!this.anchorElement?.closest('ix-dropdown-item');\n    }\n\n    return true;\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.show) {\n      return;\n    }\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  private focusDropdownItem(index: number) {\n    requestAnimationFrame(() => {\n      this.dropdownItems[index]?.shadowRoot.querySelector('button').focus();\n    });\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n  }\n\n  private isTriggerElement(element: HTMLElement) {\n    const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n    return trigger;\n  }\n\n  private onDropdownClick(event: PointerEvent) {\n    const target = dropdownController.pathIncludesTrigger(event.composedPath());\n    if (target) {\n      if (target !== this.triggerElement) {\n        event.preventDefault();\n      }\n\n      if (this.isTriggerElement(target)) {\n        if (this.closeBehavior === 'outside') {\n          event.preventDefault();\n        }\n        return;\n      }\n    }\n\n    if (\n      !event.defaultPrevented &&\n      (this.closeBehavior === 'inside' || this.closeBehavior === 'both')\n    ) {\n      dropdownController.dismissAll([this.getId()], this.ignoreRelatedSubmenu);\n      return;\n    }\n\n    dropdownController.dismissOthers(this.getId());\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        data-ix-dropdown={this.localUId}\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n        onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n          {this.show && <slot></slot>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-empty-state.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
 
-const emptyStateCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--large) .label__subHeader,:host(.emptyState.emptyState--large) ix-typography{text-align:center}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}";
+const emptyStateCss = ":host{}: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 .label__subHeader{color:var(--theme-color-soft-text)}:host(.emptyState.emptyState--large){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--large) .emptyState__icon{width:3.5rem;height:3.5rem;display:flex;justify-content:center;align-items:center}:host(.emptyState.emptyState--large) .emptyState__icon ix-icon{transform:scale(1.75)}:host(.emptyState.emptyState--large) .emptyState__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}:host(.emptyState.emptyState--large) .emptyState__content .content__label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.5rem}:host(.emptyState.emptyState--large) .label__subHeader,:host(.emptyState.emptyState--large) ix-typography{text-align:center}:host(.emptyState.emptyState--compact){display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compact) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compact) .emptyState__content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}:host(.emptyState.emptyState--compactBreak){display:flex;flex-direction:row;align-items:flex-start;gap:1rem}:host(.emptyState.emptyState--compactBreak) .emptyState__icon{display:flex;flex-direction:row;align-items:center;height:2.5rem}:host(.emptyState.emptyState--compactBreak) .emptyState__content{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem}";
 const IxEmptyStateStyle0 = emptyStateCss;
 
 const EmptyState = class {
@@ -18,7 +18,7 @@ const EmptyState = class {
         this.action = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'd4948b49bb9fab021917a1e59191f8d12d26d336', class: `emptyState emptyState--${this.layout}` }, this.icon && (index.h("div", { class: "emptyState__icon" }, index.h("ix-icon", { name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), index.h("div", { key: 'f7e619a388d459d74efe6927ee2efd044346b1da', class: "emptyState__content" }, index.h("div", { key: '676824c13fcdff2a071b9dacf98e2536a373ae5c', class: "content__label" }, index.h("ix-typography", { key: '53a08238276da07a1bf4c10ad8cd76952124af7c', variant: this.layout === 'large' ? 'display-large' : 'default' }, this.header), this.subHeader && (index.h("div", { class: "label__subHeader" }, this.subHeader))), this.action && (index.h("div", { class: "content__action" }, index.h("ix-button", { onClick: () => this.actionClick.emit() }, this.action))))));
+        return (index.h(index.Host, { key: '6a35699c05f5c71ac06952275054124e827f11d1', class: `emptyState emptyState--${this.layout}` }, this.icon && (index.h("div", { key: 'd5461a77a1e97b201bc93735b9984071f5bbb8eb', class: "emptyState__icon" }, index.h("ix-icon", { key: '540eb6f4f0413685dc4b5dec247e79b1ab7c984f', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), index.h("div", { key: '30d14aa2ca5f1b6597ee1e7aefa930f6592f1b7b', class: "emptyState__content" }, index.h("div", { key: 'c3f75186476392f25251701003bba78d23f7a2bb', class: "content__label" }, index.h("ix-typography", { key: '357899084359203cc8b06f508658462ed04f9241', variant: this.layout === 'large' ? 'display-large' : 'default' }, this.header), this.subHeader && (index.h("div", { key: 'a0ce178dc2ab263ec5e1a6627aeb740fce0539fd', class: "label__subHeader" }, this.subHeader))), this.action && (index.h("div", { key: 'ce163e65fb307b5c5b32fd63e1750caa7456ff41', class: "content__action" }, index.h("ix-button", { key: '3e32f02186912b49a2b7e9e314531e2a26b79a3b', onClick: () => this.actionClick.emit() }, this.action))))));
     }
 };
 EmptyState.style = IxEmptyStateStyle0;

package/dist/cjs/ix-empty-state.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-empty-state.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,6pEAA6pE,CAAC;AACprE,2BAAe,aAAa;;MCoBf,UAAU;;;;sBAIc,OAAO;;;;;;IA2B1C,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE,IACjD,IAAI,CAAC,IAAI,KACRD,iBAAK,KAAK,EAAC,kBAAkB,IAE3BA,qBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP,EAEDA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,4EACE,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,eAAe,GAAG,SAAS,IAE7D,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACbA,iBAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACVA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,uBAAW,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .label__subHeader {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.emptyState.emptyState--large) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    width: 3.5rem;\n    height: 3.5rem;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    ix-icon {\n      transform: scale(1.75);\n    }\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: $large-space;\n\n    .content__label {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      gap: $small-space;\n    }\n  }\n\n  .label__subHeader,\n  ix-typography {\n    text-align: center;\n  }\n}\n\n:host(.emptyState.emptyState--compact) {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    gap: $default-space;\n  }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: $small-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' | 'compact' | 'compactBreak';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-empty-state',\n  styleUrl: 'empty-state.scss',\n  shadow: true,\n})\nexport class EmptyState {\n  /**\n   * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n   */\n  @Prop() layout: EmptyStateLayout = 'large';\n\n  /**\n   * Optional empty state icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Empty state header\n   */\n  @Prop() header!: string;\n\n  /**\n   * Optional empty state sub header\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Optional empty state action\n   */\n  @Prop() action: string;\n\n  /**\n   * Empty state action click event\n   */\n  @Event() actionClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host class={`emptyState emptyState--${this.layout}`}>\n        {this.icon && (\n          <div class=\"emptyState__icon\">\n            {/* TODO: replace size for large layout with '56' if available */}\n            <ix-icon\n              name={this.icon}\n              size={this.layout === 'large' ? '32' : '32'}\n              color=\"color-soft-text\"\n            />\n          </div>\n        )}\n\n        <div class=\"emptyState__content\">\n          <div class=\"content__label\">\n            <ix-typography\n              variant={this.layout === 'large' ? 'display-large' : 'default'}\n            >\n              {this.header}\n            </ix-typography>\n\n            {this.subHeader && (\n              <div class=\"label__subHeader\">{this.subHeader}</div>\n            )}\n          </div>\n\n          {this.action && (\n            <div class=\"content__action\">\n              <ix-button onClick={() => this.actionClick.emit()}>\n                {this.action}\n              </ix-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-empty-state.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,yzEAAyzE,CAAC;AACh1E,2BAAe,aAAa;;MCoBf,UAAU;;;;sBAIc,OAAO;;;;;;IA2B1C,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE,IACjD,IAAI,CAAC,IAAI,KACRD,kEAAK,KAAK,EAAC,kBAAkB,IAE3BA,sEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP,EAEDA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,4EACE,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,eAAe,GAAG,SAAS,IAE7D,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACbA,kEAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACVA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,wEAAW,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .label__subHeader {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.emptyState.emptyState--large) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    width: 3.5rem;\n    height: 3.5rem;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    ix-icon {\n      transform: scale(1.75);\n    }\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: $large-space;\n\n    .content__label {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      gap: $small-space;\n    }\n  }\n\n  .label__subHeader,\n  ix-typography {\n    text-align: center;\n  }\n}\n\n:host(.emptyState.emptyState--compact) {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    gap: $default-space;\n  }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: $default-space;\n\n  .emptyState__icon {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: $large-control-height;\n  }\n\n  .emptyState__content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: $small-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' | 'compact' | 'compactBreak';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-empty-state',\n  styleUrl: 'empty-state.scss',\n  shadow: true,\n})\nexport class EmptyState {\n  /**\n   * Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n   */\n  @Prop() layout: EmptyStateLayout = 'large';\n\n  /**\n   * Optional empty state icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Empty state header\n   */\n  @Prop() header!: string;\n\n  /**\n   * Optional empty state sub header\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Optional empty state action\n   */\n  @Prop() action: string;\n\n  /**\n   * Empty state action click event\n   */\n  @Event() actionClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host class={`emptyState emptyState--${this.layout}`}>\n        {this.icon && (\n          <div class=\"emptyState__icon\">\n            {/* TODO: replace size for large layout with '56' if available */}\n            <ix-icon\n              name={this.icon}\n              size={this.layout === 'large' ? '32' : '32'}\n              color=\"color-soft-text\"\n            />\n          </div>\n        )}\n\n        <div class=\"emptyState__content\">\n          <div class=\"content__label\">\n            <ix-typography\n              variant={this.layout === 'large' ? 'display-large' : 'default'}\n            >\n              {this.header}\n            </ix-typography>\n\n            {this.subHeader && (\n              <div class=\"label__subHeader\">{this.subHeader}</div>\n            )}\n          </div>\n\n          {this.action && (\n            <div class=\"content__action\">\n              <ix-button onClick={() => this.actionClick.emit()}>\n                {this.action}\n              </ix-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-event-list-item.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
 const a11y = require('./a11y-d3ce56d1.js');
 
-const eventListItemCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .event-list-item{display:flex;align-items:center;position:relative;height:var(--event-list-item-height, 2.5rem);max-height:var(--event-list-item-height, 2.5rem);border-radius:var(--event-list-item-border-radius, 0.25rem);background-color:var(--theme-event-item--background);overflow:hidden;transition:var(--theme-default-time);cursor:pointer;margin-bottom:var(--event-list-item-margin-bottom, 0.5rem)}:host .event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:var(--event-list-item-border-radius, 0.25rem)}:host .event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}:host .event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--event-list-item-border-radius, 0.25rem);border-left:none;padding-left:1rem}:host .event-list-item .event-content{display:flex;align-items:center;width:100%;height:var(--event-list-item-height, 100%);max-height:var(--event-list-item-height, 100%);white-space:var(--event-list-item-content-white-space, inherit);overflow:hidden;padding-inline-end:0.5rem}:host .event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected):not(.disabled):not(:disabled).active{background-color:var(--theme-event-item--background--active)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).active{border-color:var(--theme-event-item--border--active)}:host .event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}:host .event-list-item[disabled],:host .event-list-item.disabled{pointer-events:none}:host .event-list-item[disabled] .event-list-item-container,:host .event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}:host(.disabled){pointer-events:none}";
+const eventListItemCss = ":host{}: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 .event-list-item{display:flex;align-items:center;position:relative;height:var(--event-list-item-height, 2.5rem);max-height:var(--event-list-item-height, 2.5rem);border-radius:var(--event-list-item-border-radius, 0.25rem);background-color:var(--theme-event-item--background);overflow:hidden;transition:var(--theme-default-time);cursor:pointer;margin-bottom:var(--event-list-item-margin-bottom, 0.5rem)}:host .event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:var(--event-list-item-border-radius, 0.25rem)}:host .event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}:host .event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--event-list-item-border-radius, 0.25rem);border-left:none;padding-left:1rem}:host .event-list-item .event-content{display:flex;align-items:center;width:100%;height:var(--event-list-item-height, 100%);max-height:var(--event-list-item-height, 100%);white-space:var(--event-list-item-content-white-space, inherit);overflow:hidden;padding-inline-end:0.5rem}:host .event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected):not(.disabled):not(:disabled).active{background-color:var(--theme-event-item--background--active)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).active{border-color:var(--theme-event-item--border--active)}:host .event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}:host .event-list-item[disabled],:host .event-list-item.disabled{pointer-events:none}:host .event-list-item[disabled] .event-list-item-container,:host .event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}:host(.disabled){pointer-events:none}";
 const IxEventListItemStyle0 = eventListItemCss;
 
 const EventListItem = class {
@@ -31,16 +31,16 @@ const EventListItem = class {
                 ? `var(${this.color})`
                 : `var(--theme-${this.color})`;
         }
-        return (index.h(index.Host, { key: '886fd04038ed9b7ae7e9137b2e939ce5a391889b', class: {
+        return (index.h(index.Host, { key: 'f4867d7f68254b7f4929ce6746172eb03aa5caea', class: {
                 disabled: this.disabled,
-            } }, index.h("li", { key: 'abcf0a5109a0a267482a21cf5daf0aa1190b14df', "aria-disabled": a11y.a11yBoolean(this.disabled), class: {
+            } }, index.h("li", { key: '325588cc80c9b8988b37aaeb72a8d9c7affc088e', "aria-disabled": a11y.a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, index.h("div", { key: '80965a6f06a8e06e7fd4eb3c7e18a42cfb1fe68d', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
+            } }, index.h("div", { key: '24ef52d3c26ccb528934fa0366c9ebdce05ca38d', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
                 'background-color': ((_d = this.itemColor) !== null && _d !== void 0 ? _d : this.color) ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), index.h("div", { key: '1848fb6081def3209f3089713c1fee3e5f10379f', class: "event-list-item-container" }, index.h("div", { key: '93938c03d5576c5ecc35006b1620ff5170e37fb7', class: "event-content" }, index.h("slot", { key: 'e35b7858bf2766e1e546e850b037bf98880083fc' })), this.chevron && (index.h("ix-icon", { name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
+            } }), index.h("div", { key: '74fac568b74471bcd6051f25d13bbac6d3aaadb4', class: "event-list-item-container" }, index.h("div", { key: '47d69475c3d448ca417b1892b30f22e7de77b19f', class: "event-content" }, index.h("slot", { key: 'c87d4fc509bdbc2041122e274caa2860a2530843' })), this.chevron && (index.h("ix-icon", { key: '8626b6e5ff1f23163d4a75d5c3a114adc3942c2c', name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
     }
 };
 EventListItem.style = IxEventListItemStyle0;

package/dist/cjs/ix-event-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-event-list-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,uyHAAuyH,CAAC;AACj0H,8BAAe,gBAAgB;;MCwBlB,aAAa;;;;;;;;;;IA2CxB,eAAe;QACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB;IAED,MAAM;;QACJ,IAAI,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,UAAU,CAAC,SAAS,CAAC;cAC7C,OAAO,IAAI,CAAC,SAAS,GAAG;cACxB,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC;QAErC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;kBACrC,OAAO,IAAI,CAAC,KAAK,GAAG;kBACpB,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;SAClC;QAED,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDD,kFACiBE,gBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDF,kEACE,KAAK,EAAE,aACL,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC,GAAG,iBAAiB,GAAG,EACxD,EAAE,EACF,KAAK,EAAE;gBACL,kBAAkB,EAChB,CAAA,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,IAAG,KAAK,GAAG,SAAS;gBAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,EAAE;aACtC,GACI,EAEPA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,kEAAK,KAAK,EAAC,eAAe,IACxBA,oEAAa,CACT,EACL,IAAI,CAAC,OAAO,KACXA,qBACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACH,CACA,EACP;KACH;;;;;;","names":["h","Host","a11yBoolean"],"sources":["src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","src/components/event-list-item/event-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n@import 'common-variables';\n\n$default-event-list-item-height: 2.5rem;\n\n:host {\n  @include ix-component;\n\n  .event-list-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: var(--event-list-item-height, $default-event-list-item-height);\n    max-height: var(--event-list-item-height, $default-event-list-item-height);\n    border-radius: var(--event-list-item-border-radius, $default-border-radius);\n    background-color: var(--theme-event-item--background);\n    overflow: hidden;\n    transition: var(--theme-default-time);\n    cursor: pointer;\n    margin-bottom: var(--event-list-item-margin-bottom, $small-space);\n\n    .indicator {\n      height: 100%;\n      width: $small-space;\n      max-width: $small-space;\n      min-width: $small-space;\n      border-top-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n    }\n\n    .indicator-empty {\n      border: var(--theme-weak-bdr-1);\n      border-right: none;\n    }\n\n    .event-list-item-container {\n      @include ellipsis;\n\n      display: flex;\n      flex-grow: 1;\n      width: calc(100% - (#{$default-space} + #{$small-space}));\n      height: 100%;\n      border: 0.062rem solid;\n      border-color: var(--theme-event-item--border);\n      border-top-left-radius: 0;\n      border-top-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-left: none;\n      padding-left: $default-space;\n    }\n\n    .event-content {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: var(--event-list-item-height, 100%);\n      max-height: var(--event-list-item-height, 100%);\n      white-space: var(--event-list-item-content-white-space, inherit);\n      overflow: hidden;\n      padding-inline-end: $small-space;\n    }\n\n    .chevron-icon {\n      margin-left: auto;\n      margin-right: $small-space;\n      opacity: 0.6;\n      align-self: center;\n    }\n\n    &:not(.selected) {\n      @include hover {\n        background-color: var(--theme-event-item--background--hover);\n      }\n\n      @include active {\n        background-color: var(--theme-event-item--background--active);\n      }\n\n      .event-list-item-container {\n        @include hover {\n          border-color: var(--theme-event-item--border--hover);\n        }\n\n        @include active {\n          border-color: var(--theme-event-item--border--active);\n        }\n      }\n    }\n\n    &.selected .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n\n    &[disabled],\n    &.disabled {\n      pointer-events: none;\n\n      .event-list-item-container {\n        background-color: var(--theme-event-item--background--disabled);\n        border-color: var(--theme-event-item--border--disabled);\n      }\n    }\n  }\n}\n\n@include host-disabled;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   *\n   * @deprecated since 2.1.0 use `item-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() itemColor: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    if (this.color) {\n      color = this.color?.startsWith('--theme')\n        ? `var(${this.color})`\n        : `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <li\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${\n              !(this.itemColor ?? this.color) ? 'indicator-empty' : ''\n            }`}\n            style={{\n              'background-color':\n                this.itemColor ?? this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name={'chevron-right'}\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-event-list-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,m8HAAm8H,CAAC;AAC79H,8BAAe,gBAAgB;;MCwBlB,aAAa;;;;;;;;;;IA2CxB,eAAe;QACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB;IAED,MAAM;;QACJ,IAAI,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,UAAU,CAAC,SAAS,CAAC;cAC7C,OAAO,IAAI,CAAC,SAAS,GAAG;cACxB,eAAe,IAAI,CAAC,SAAS,GAAG,CAAC;QAErC,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,SAAS,CAAC;kBACrC,OAAO,IAAI,CAAC,KAAK,GAAG;kBACpB,eAAe,IAAI,CAAC,KAAK,GAAG,CAAC;SAClC;QAED,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDD,kFACiBE,gBAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEDF,kEACE,KAAK,EAAE,aACL,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC,GAAG,iBAAiB,GAAG,EACxD,EAAE,EACF,KAAK,EAAE;gBACL,kBAAkB,EAChB,CAAA,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,IAAG,KAAK,GAAG,SAAS;gBAClD,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,EAAE;aACtC,GACI,EAEPA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,kEAAK,KAAK,EAAC,eAAe,IACxBA,oEAAa,CACT,EACL,IAAI,CAAC,OAAO,KACXA,sEACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,cAAc,GACX,CACZ,CACG,CACH,CACA,EACP;KACH;;;;;;","names":["h","Host","a11yBoolean"],"sources":["src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","src/components/event-list-item/event-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n@import 'common-variables';\n\n$default-event-list-item-height: 2.5rem;\n\n:host {\n  @include ix-component;\n\n  .event-list-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: var(--event-list-item-height, $default-event-list-item-height);\n    max-height: var(--event-list-item-height, $default-event-list-item-height);\n    border-radius: var(--event-list-item-border-radius, $default-border-radius);\n    background-color: var(--theme-event-item--background);\n    overflow: hidden;\n    transition: var(--theme-default-time);\n    cursor: pointer;\n    margin-bottom: var(--event-list-item-margin-bottom, $small-space);\n\n    .indicator {\n      height: 100%;\n      width: $small-space;\n      max-width: $small-space;\n      min-width: $small-space;\n      border-top-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n    }\n\n    .indicator-empty {\n      border: var(--theme-weak-bdr-1);\n      border-right: none;\n    }\n\n    .event-list-item-container {\n      @include ellipsis;\n\n      display: flex;\n      flex-grow: 1;\n      width: calc(100% - (#{$default-space} + #{$small-space}));\n      height: 100%;\n      border: 0.062rem solid;\n      border-color: var(--theme-event-item--border);\n      border-top-left-radius: 0;\n      border-top-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-left: none;\n      padding-left: $default-space;\n    }\n\n    .event-content {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: var(--event-list-item-height, 100%);\n      max-height: var(--event-list-item-height, 100%);\n      white-space: var(--event-list-item-content-white-space, inherit);\n      overflow: hidden;\n      padding-inline-end: $small-space;\n    }\n\n    .chevron-icon {\n      margin-left: auto;\n      margin-right: $small-space;\n      opacity: 0.6;\n      align-self: center;\n    }\n\n    &:not(.selected) {\n      @include hover {\n        background-color: var(--theme-event-item--background--hover);\n      }\n\n      @include active {\n        background-color: var(--theme-event-item--background--active);\n      }\n\n      .event-list-item-container {\n        @include hover {\n          border-color: var(--theme-event-item--border--hover);\n        }\n\n        @include active {\n          border-color: var(--theme-event-item--border--active);\n        }\n      }\n    }\n\n    &.selected .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n\n    &[disabled],\n    &.disabled {\n      pointer-events: none;\n\n      .event-list-item-container {\n        background-color: var(--theme-event-item--background--disabled);\n        border-color: var(--theme-event-item--border--disabled);\n      }\n    }\n  }\n}\n\n@include host-disabled;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   *\n   * @deprecated since 2.1.0 use `item-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() itemColor: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    if (this.color) {\n      color = this.color?.startsWith('--theme')\n        ? `var(${this.color})`\n        : `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <li\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${\n              !(this.itemColor ?? this.color) ? 'indicator-empty' : ''\n            }`}\n            style={{\n              'background-color':\n                this.itemColor ?? this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name={'chevron-right'}\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-event-list.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
 const mutationObserver = require('./mutation-observer-babb20a5.js');
 const rwd_util = require('./rwd.util-ee53cbd1.js');
 const anime_es = require('./anime.es-e2814360.js');
 
-const eventListCss = ":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ul{list-style:none;padding:0;margin-top:0;margin-bottom:0}:host(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}";
+const eventListCss = ":host{display:block;position:relative}: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 ul{list-style:none;padding:0;margin-top:0;margin-bottom:0}:host(.item-size-l){--event-list-item-height:6.5rem;--event-list-item-content-white-space:normal}:host(.compact){--event-list-item-border-radius:0;--event-list-item-margin-bottom:0}";
 const IxEventListStyle0 = eventListCss;
 
 const EventList = class {
@@ -106,11 +106,11 @@ const EventList = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'd24b72d6682a8bbd5c115814d9e6894f97f5517b', class: {
+        return (index.h(index.Host, { key: '5d7a0f6f6d24eb87a5ea1a777d4deb578d4d4d53', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, index.h("ul", { key: '1a1e8b938a2182c6578b7a60fab2cd2f63d54180' }, index.h("slot", { key: 'c9a9f3c9e06c039c9afa1e954d1bf77c1cda5122' }))));
+            } }, index.h("ul", { key: 'ed377a8c738270044e9a903360105a9ce3a30fa2' }, index.h("slot", { key: 'cd3f02ca5eb2ce9b6086b249678839cba7b9f7b0' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-event-list.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-event-list.entry.cjs.js","mappings":"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","names":["createMutationObserver","convertToRemString","anime","h","Host"],"sources":["src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","src/components/event-list/event-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\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n\n  ul {\n    list-style: none;\n    padding: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\n:host(.item-size-l) {\n  --event-list-item-height: 6.5rem;\n  --event-list-item-content-white-space: normal;\n}\n\n:host(.compact) {\n  --event-list-item-border-radius: 0;\n  --event-list-item-margin-bottom: 0;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  shadow: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() hostElement!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron: boolean;\n\n  @Watch('chevron')\n  watchChevron(chevron: boolean | undefined) {\n    this.handleChevron(chevron);\n  }\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (!Number.isNaN(Number(this.itemHeight))) {\n      const height = convertToRemString(this.itemHeight as number);\n      this.hostElement\n        .querySelectorAll('ix-event-list-item')\n        .forEach((item) => {\n          this.setCustomHeight(item as HTMLElement, height);\n        });\n    }\n\n    this.handleChevron(this.chevron);\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.handleChevron(this.chevron);\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this.animated) {\n        resolve();\n      }\n\n      const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];\n\n      const listElement = this.hostElement.shadowRoot.querySelector('ul');\n\n      anime({\n        targets: listElement,\n        opacity: keyframes,\n        duration: EventList.fadeOutDuration,\n        complete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      anime({\n        targets: e,\n        offset: offset,\n        duration: EventList.fadeInDuration + delay,\n        opacity: [0, 1],\n        easing: 'easeInOutSine',\n        delay: delay,\n        autoplay: true,\n      });\n    });\n  }\n\n  private handleChevron(chevron: boolean | undefined): void {\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n    listItems.forEach((e) => {\n      if (chevron) {\n        e.setAttribute('chevron', 'true');\n      } else if (chevron !== undefined) {\n        e.removeAttribute('chevron');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-event-list.entry.cjs.js","mappings":"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","names":["createMutationObserver","convertToRemString","anime","h","Host"],"sources":["src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=shadow","src/components/event-list/event-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\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n\n  ul {\n    list-style: none;\n    padding: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n}\n\n:host(.item-size-l) {\n  --event-list-item-height: 6.5rem;\n  --event-list-item-content-white-space: normal;\n}\n\n:host(.compact) {\n  --event-list-item-border-radius: 0;\n  --event-list-item-margin-bottom: 0;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  shadow: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() hostElement!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron: boolean;\n\n  @Watch('chevron')\n  watchChevron(chevron: boolean | undefined) {\n    this.handleChevron(chevron);\n  }\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (!Number.isNaN(Number(this.itemHeight))) {\n      const height = convertToRemString(this.itemHeight as number);\n      this.hostElement\n        .querySelectorAll('ix-event-list-item')\n        .forEach((item) => {\n          this.setCustomHeight(item as HTMLElement, height);\n        });\n    }\n\n    this.handleChevron(this.chevron);\n\n    this.mutationObserver.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.handleChevron(this.chevron);\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.setProperty('--event-list-item-height', height);\n  }\n\n  private triggerFadeOut(): Promise<void> {\n    return new Promise((resolve) => {\n      if (!this.animated) {\n        resolve();\n      }\n\n      const keyframes = [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }];\n\n      const listElement = this.hostElement.shadowRoot.querySelector('ul');\n\n      anime({\n        targets: listElement,\n        opacity: keyframes,\n        duration: EventList.fadeOutDuration,\n        complete: () => {\n          resolve();\n        },\n      });\n    });\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      anime({\n        targets: e,\n        offset: offset,\n        duration: EventList.fadeInDuration + delay,\n        opacity: [0, 1],\n        easing: 'easeInOutSine',\n        delay: delay,\n        autoplay: true,\n      });\n    });\n  }\n\n  private handleChevron(chevron: boolean | undefined): void {\n    const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n    listItems.forEach((e) => {\n      if (chevron) {\n        e.setAttribute('chevron', 'true');\n      } else if (chevron !== undefined) {\n        e.removeAttribute('chevron');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-expanding-search.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
 
-const expandingSearchCss = ".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}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;position:relative;}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-container{transition:all var(--theme-medium-time) ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all var(--theme-default-time) ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}";
+const expandingSearchCss = ".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}:host{display:inline-flex;width:auto;height:2rem;align-items:center;justify-content:space-between;position:relative;}: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 .input-container{transition:all var(--theme-medium-time) ease-in-out}:host input{box-shadow:var(--theme-input--box-shadow);cursor:auto !important;width:100%}:host .expanded{width:11.5625rem}:host .expanded.fullWidth{width:100%}:host .collapsed{width:1.5rem;border:none}:host .btn-search-icon{align-self:center;margin:auto;position:relative}:host .btn-search{display:flex;max-width:2rem;max-height:2rem;border-radius:var(--theme-input--border-radius);transition:all var(--theme-default-time) ease-in-out;z-index:1;align-items:center;position:relative;border:none}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):hover{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled){cursor:pointer}:host .btn-search:not(.disabled):not(:disabled):active,:host .btn-search:not(.disabled):not(:disabled).active{border-color:transparent}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:none}:host .btn-search:not(.disabled):not(:disabled):focus-visible{outline:var(--focus--border-color);outline-width:1px;outline-style:solid}:host .btn-search.btn-search--expanded{margin-left:0.25rem;pointer-events:none}:host .btn-search:active{width:2rem;height:2rem;border-radius:var(--theme-input--border-radius);border:var(--theme-std-bdr-1) !important}:host .input-container{display:flex;position:absolute;align-items:center;flex-wrap:nowrap}:host .btn-clear{position:absolute;border-radius:var(--theme-input--border-radius);right:0px;margin-right:0.25rem}:host .input{padding-left:2rem !important;padding-right:2.5rem !important}:host .opacity-before{opacity:0}:host .opacity-after{opacity:1}:host(.right-position){width:11.5625rem !important}:host(.right-position.fullWidth){width:100% !important}:host(.right-position.fullWidth) .fullWidth{width:100% !important}";
 const IxExpandingSearchStyle0 = expandingSearchCss;
 
 const ExpandingSearch = class {
@@ -54,20 +54,20 @@ const ExpandingSearch = class {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (index.h(index.Host, { key: 'bcb1ca47c9ad17a20fd6f2fd02a8eef8739f9de2', class: {
+        return (index.h(index.Host, { key: 'ce6a0b2941966880a2a47a20ddf39820d8110836', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, index.h("ix-icon-button", { key: '14f9d42caca8c525b2d866fedde1a27e564793b3', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, index.h("ix-icon-button", { key: 'e773bc67a18476c86d530e14a0b062f1b10caae7', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            } }), index.h("div", { key: 'a1b5b7ed57ea1f3ccd1d728b86bbb686204dc4c3', class: {
+            } }), index.h("div", { key: 'ab6b7f77f88713c1b0230a83a3c2eb50df35f340', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, index.h("input", { key: 'b8d99d4076dfa798c23558ec366e02320b139c2b', class: {
+            }, "data-testid": "input-wrapper" }, index.h("input", { key: 'fb3f5e5c926a5eed3d2a0bac878ef806684f9d8d', class: {
                 'form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/dist/cjs/ix-expanding-search.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-expanding-search.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=shadow","src/components/expanding-search/expanding-search.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 'common-variables';\n@import 'legacy/components/forms';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  width: auto;\n  height: $x-large-space;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n\n  .input-container {\n    transition: all var(--theme-medium-time) ease-in-out;\n  }\n\n  input {\n    box-shadow: var(--theme-input--box-shadow);\n    cursor: auto !important;\n    width: 100%;\n  }\n\n  .expanded {\n    width: $container-width;\n\n    &.fullWidth {\n      width: 100%;\n    }\n  }\n\n  .collapsed {\n    width: $large-space;\n    border: none;\n  }\n\n  /*collapsed view*/\n  .btn-search-icon {\n    align-self: center;\n    margin: auto;\n    position: relative;\n  }\n\n  .btn-search {\n    display: flex;\n    max-width: $x-large-space;\n    max-height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 1;\n    align-items: center;\n    position: relative;\n    border: none;\n\n    @include hover {\n      border-color: transparent;\n    }\n\n    @include active {\n      border-color: transparent;\n    }\n\n    @include focus {\n      outline: none;\n    }\n\n    @include focus-visible {\n      outline: var(--focus--border-color);\n      outline-width: 1px;\n      outline-style: solid;\n    }\n  }\n\n  .btn-search.btn-search--expanded {\n    margin-left: 0.25rem;\n    pointer-events: none;\n  }\n\n  .btn-search:active {\n    width: $x-large-space;\n    height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    border: var(--theme-std-bdr-1) !important;\n  }\n\n  /*expanded view*/\n  .input-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .btn-clear {\n    position: absolute;\n    border-radius: var(--theme-input--border-radius);\n    right: 0px;\n    margin-right: 0.25rem;\n  }\n\n  .input {\n    padding-left: $x-large-space !important;\n    padding-right: 2.5rem !important;\n  }\n\n  .opacity-before {\n    opacity: 0;\n  }\n\n  .opacity-after {\n    opacity: 1;\n  }\n}\n\n:host(.right-position) {\n  width: $container-width !important;\n}\n\n:host(.right-position.fullWidth) {\n  width: 100% !important;\n\n  .fullWidth {\n    width: 100% !important;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon}\n          ghost\n          variant=\"primary\"\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon={'clear'}\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-expanding-search.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=shadow","src/components/expanding-search/expanding-search.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 'common-variables';\n@import 'legacy/components/forms';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  width: auto;\n  height: $x-large-space;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n\n  .input-container {\n    transition: all var(--theme-medium-time) ease-in-out;\n  }\n\n  input {\n    box-shadow: var(--theme-input--box-shadow);\n    cursor: auto !important;\n    width: 100%;\n  }\n\n  .expanded {\n    width: $container-width;\n\n    &.fullWidth {\n      width: 100%;\n    }\n  }\n\n  .collapsed {\n    width: $large-space;\n    border: none;\n  }\n\n  /*collapsed view*/\n  .btn-search-icon {\n    align-self: center;\n    margin: auto;\n    position: relative;\n  }\n\n  .btn-search {\n    display: flex;\n    max-width: $x-large-space;\n    max-height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 1;\n    align-items: center;\n    position: relative;\n    border: none;\n\n    @include hover {\n      border-color: transparent;\n    }\n\n    @include active {\n      border-color: transparent;\n    }\n\n    @include focus {\n      outline: none;\n    }\n\n    @include focus-visible {\n      outline: var(--focus--border-color);\n      outline-width: 1px;\n      outline-style: solid;\n    }\n  }\n\n  .btn-search.btn-search--expanded {\n    margin-left: 0.25rem;\n    pointer-events: none;\n  }\n\n  .btn-search:active {\n    width: $x-large-space;\n    height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    border: var(--theme-std-bdr-1) !important;\n  }\n\n  /*expanded view*/\n  .input-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .btn-clear {\n    position: absolute;\n    border-radius: var(--theme-input--border-radius);\n    right: 0px;\n    margin-right: 0.25rem;\n  }\n\n  .input {\n    padding-left: $x-large-space !important;\n    padding-right: 2.5rem !important;\n  }\n\n  .opacity-before {\n    opacity: 0;\n  }\n\n  .opacity-after {\n    opacity: 1;\n  }\n}\n\n:host(.right-position) {\n  width: $container-width !important;\n}\n\n:host(.right-position.fullWidth) {\n  width: 100% !important;\n\n  .fullWidth {\n    width: 100% !important;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon}\n          ghost\n          variant=\"primary\"\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon={'clear'}\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-filter-chip_2.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-529f21c1.js');
 
-const filterChipCss = ":host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}";
+const filterChipCss = ":host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}: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 .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}";
 const IxFilterChipStyle0 = filterChipCss;
 
 const FilterChip = class {
@@ -20,7 +20,7 @@ const FilterChip = class {
         this.closeClick.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'ab9555b6ab060074b79e61b6262821ce545e9e62', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, index.h("div", { key: '889e241f3ea192f23452f499934c4d0e7aee2cde', class: "slot-container" }, index.h("slot", { key: 'd48aea2e83bf484d77d13240dec464bac3a483fa' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
+        return (index.h(index.Host, { key: '215ed3c9b71df4ba795032725d76950f10a33184', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, index.h("div", { key: '68f822ed7365a1b9375721e5fc9a9ce91bd79313', class: "slot-container" }, index.h("slot", { key: '8c334798a0c6c274d68564ba12b01d59054c338c' })), !this.disabled && !this.readonly ? (index.h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
     }
     get el() { return index.getElement(this); }
 };
@@ -83,7 +83,7 @@ const SelectItem = class {
         }));
     }
     render() {
-        return (index.h(index.Host, { key: '89b4b9f70f1157e728d82d981566d3528c96c2da' }, index.h("ix-dropdown-item", { key: '3d480e6d1d0a0969f50bf6925101819c8cae9a67', class: {
+        return (index.h(index.Host, { key: '73a6d9e2c4df3541658f2bdce0a4ec42aea2c5e1' }, index.h("ix-dropdown-item", { key: 'c8d0563af535129de120a4899d683038f02dad57', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }