@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  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 { AlignedPlacement } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\ntype DisposeDropdown = () => void;\nconst dropdownDisposer = new Map<string, DisposeDropdown>();\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\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;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Close behavior\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = '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   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\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\n  private toggleBind: any;\n  private openBind: any;\n\n  private localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n\n    if (dropdownDisposer.has(this.localUId)) {\n      console.warn('Dropdown with duplicated id detected');\n    }\n\n    dropdownDisposer.set(this.localUId, this.close.bind(this));\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          this.triggerElement.addEventListener('click', this.openBind);\n        } else {\n          this.triggerElement.addEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\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\n    if (newShow) {\n      dropdownDisposer.forEach((dispose, id) => {\n        if (id !== this.localUId && !this.isAnchorSubmenu()) {\n          dispose();\n        }\n      });\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: Event) {\n    const target = event.target as HTMLElement;\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!this.dropdownRef.contains(target)) {\n          this.close(event);\n        }\n        break;\n      case 'inside':\n        if (this.dropdownRef.contains(target) && this.hostElement !== target) {\n          this.close(event);\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) {\n          this.close(event);\n        }\n        break;\n      default:\n        this.close(event);\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  keydown(event: KeyboardEvent) {\n    if (this.show === true && event.code === 'Escape') {\n      this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = !this.show;\n    this.showChanged.emit(this.show);\n  }\n\n  private open(event?: Event) {\n    event?.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event?.stopPropagation();\n    }\n\n    this.show = true;\n    this.showChanged.emit(true);\n  }\n\n  private close(event?: Event) {\n    if (event?.defaultPrevented) {\n      const target = event.target as HTMLElement;\n      if (\n        target.contains(this.anchorElement) ||\n        target.contains(this.triggerElement) ||\n        target.shadowRoot.contains(this.anchorElement) ||\n        target.shadowRoot.contains(this.triggerElement)\n      )\n        return;\n    }\n\n    this.show = false;\n    this.showChanged.emit(false);\n  }\n\n  private async applyDropdownPosition() {\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  async componentDidLoad() {\n    if (this.trigger) {\n      this.changedTrigger(this.trigger, null);\n    }\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    if (\n      this.isAnchorSubmenu() &&\n      this.anchorElement?.tagName === 'IX-DROPDOWN-ITEM'\n    ) {\n      (this.anchorElement as HTMLIxDropdownItemElement).isSubMenu = true;\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (dropdownDisposer.has(this.localUId)) {\n      dropdownDisposer.delete(this.localUId);\n    }\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        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      >\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":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  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 { AlignedPlacement } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\ntype DisposeDropdown = () => void;\nconst dropdownDisposer = new Map<string, DisposeDropdown>();\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\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;\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   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = '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   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\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\n  private toggleBind: any;\n  private openBind: any;\n\n  private localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n\n    if (dropdownDisposer.has(this.localUId)) {\n      console.warn('Dropdown with duplicated id detected');\n    }\n\n    dropdownDisposer.set(this.localUId, this.close.bind(this));\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 addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        this.triggerElement.addEventListener('click', this.openBind);\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\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\n    if (newShow) {\n      dropdownDisposer.forEach((dispose, id) => {\n        if (id !== this.localUId && !this.isAnchorSubmenu()) {\n          dispose();\n        }\n      });\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: PointerEvent) {\n    const target = event.target as HTMLElement;\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    const clickInsideDropdown = this.isClickInsideDropdown(event);\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!clickInsideDropdown || this.anchor === target) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (clickInsideDropdown && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  keydown(event: KeyboardEvent) {\n    if (this.show === true && event.code === 'Escape') {\n      this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(this.show);\n\n    if (!defaultPrevented) {\n      this.show = !this.show;\n    }\n  }\n\n  private open(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(true);\n\n    if (!defaultPrevented) {\n      this.show = true;\n    }\n  }\n\n  private close() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n\n    if (!defaultPrevented) {\n      this.show = false;\n    }\n  }\n\n  private async applyDropdownPosition() {\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\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  async componentDidLoad() {\n    this.changedTrigger(this.trigger, null);\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    if (\n      this.isAnchorSubmenu() &&\n      this.anchorElement?.tagName === 'IX-DROPDOWN-ITEM'\n    ) {\n      (this.anchorElement as HTMLIxDropdownItemElement).isSubMenu = true;\n    }\n  }\n\n  private isClickInsideDropdown(event: PointerEvent) {\n    const rect = this.dropdownRef.getBoundingClientRect();\n    return (\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (dropdownDisposer.has(this.localUId)) {\n      dropdownDisposer.delete(this.localUId);\n    }\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        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      >\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"]}

package/dist/collection/components/dropdown/test/dropdown.ct.js

@@ -0,0 +1,79 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+  <ix-split-button label="Test 1">
+    <ix-dropdown-item>Test 1</ix-dropdown-item>
+  </ix-split-button>
+
+  <ix-split-button label="Test 2">
+    <ix-dropdown-item>Test 1</ix-dropdown-item>
+  </ix-split-button>
+
+  <ix-group header="Title" sub-header="Subtitle">
+    <ix-dropdown slot="dropdown">
+      <ix-dropdown-item label="Item 1" icon="pin" />
+      <ix-dropdown-item label="Item 2" icon="star" />
+      <ix-dropdown-item label="Item 3" icon="heart" />
+      <ix-dropdown-item label="Item 4" icon="cogwheel" />
+    </ix-dropdown>
+  </ix-group>
+
+  <ix-group header="Title" sub-header="Subtitle">
+    <ix-dropdown slot="dropdown">
+      <ix-dropdown-item label="Item 1" icon="pin" />
+      <ix-dropdown-item label="Item 2" icon="star" />
+      <ix-dropdown-item label="Item 3" icon="heart" />
+      <ix-dropdown-item label="Item 4" icon="cogwheel" />
+    </ix-dropdown>
+  </ix-group>
+  `);
+  const sb1 = page.locator('ix-split-button').nth(0);
+  const sb2 = page.locator('ix-split-button').nth(1);
+  const g1 = page.locator('ix-group').nth(0);
+  const g2 = page.locator('ix-group').nth(1);
+  const sb1Dropdown = sb1.locator('ix-dropdown');
+  const sb2Dropdown = sb2.locator('ix-dropdown');
+  const g1Dropdown = g1.locator('ix-dropdown');
+  const g2Dropdown = g2.locator('ix-dropdown');
+  await sb1
+    .getByRole('button')
+    .filter({ hasText: 'context-menu' })
+    .first()
+    .click();
+  await expectToBeVisible([sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown], 0);
+  await sb2
+    .getByRole('button')
+    .filter({ hasText: 'context-menu' })
+    .first()
+    .click();
+  await expectToBeVisible([sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown], 1);
+  await g2.getByRole('button').filter({ hasText: 'context-menu' }).click();
+  await expectToBeVisible([sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown], 3);
+});
+function expectToBeVisible(elements, index) {
+  return Promise.all(elements.map(async (element, i) => {
+    let ef = expect(element);
+    if (i !== index) {
+      ef = ef.not;
+    }
+    await ef.toBeVisible();
+  }));
+}
+//# sourceMappingURL=dropdown.ct.js.map

package/dist/collection/components/dropdown/test/dropdown.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.ct.js","sourceRoot":"","sources":["../../../../src/components/dropdown/test/dropdown.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAW,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BX,CAAC,CAAC;EAEH,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EACnD,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAEnD,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAC3C,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAE3C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAC/C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAC/C,MAAM,UAAU,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAC7C,MAAM,UAAU,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;EAE7C,MAAM,GAAG;KACN,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;KACnC,KAAK,EAAE;KACP,KAAK,EAAE,CAAC;EAEX,MAAM,iBAAiB,CACrB,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,EAClD,CAAC,CACF,CAAC;EAEF,MAAM,GAAG;KACN,SAAS,CAAC,QAAQ,CAAC;KACnB,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC;KACnC,KAAK,EAAE;KACP,KAAK,EAAE,CAAC;EAEX,MAAM,iBAAiB,CACrB,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,EAClD,CAAC,CACF,CAAC;EAEF,MAAM,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;EAEzE,MAAM,iBAAiB,CACrB,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,CAAC,EAClD,CAAC,CACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,iBAAiB,CAAC,QAAmB,EAAE,KAAa;EAC3D,OAAO,OAAO,CAAC,GAAG,CAChB,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE;IAChC,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACzB,IAAI,CAAC,KAAK,KAAK,EAAE;MACf,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC;KACb;IACD,MAAM,EAAE,CAAC,WAAW,EAAE,CAAC;EACzB,CAAC,CAAC,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect, Locator } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n  <ix-split-button label=\"Test 1\">\n    <ix-dropdown-item>Test 1</ix-dropdown-item>\n  </ix-split-button>\n\n  <ix-split-button label=\"Test 2\">\n    <ix-dropdown-item>Test 1</ix-dropdown-item>\n  </ix-split-button>\n\n  <ix-group header=\"Title\" sub-header=\"Subtitle\">\n    <ix-dropdown slot=\"dropdown\">\n      <ix-dropdown-item label=\"Item 1\" icon=\"pin\" />\n      <ix-dropdown-item label=\"Item 2\" icon=\"star\" />\n      <ix-dropdown-item label=\"Item 3\" icon=\"heart\" />\n      <ix-dropdown-item label=\"Item 4\" icon=\"cogwheel\" />\n    </ix-dropdown>\n  </ix-group>\n\n  <ix-group header=\"Title\" sub-header=\"Subtitle\">\n    <ix-dropdown slot=\"dropdown\">\n      <ix-dropdown-item label=\"Item 1\" icon=\"pin\" />\n      <ix-dropdown-item label=\"Item 2\" icon=\"star\" />\n      <ix-dropdown-item label=\"Item 3\" icon=\"heart\" />\n      <ix-dropdown-item label=\"Item 4\" icon=\"cogwheel\" />\n    </ix-dropdown>\n  </ix-group>\n  `);\n\n  const sb1 = page.locator('ix-split-button').nth(0);\n  const sb2 = page.locator('ix-split-button').nth(1);\n\n  const g1 = page.locator('ix-group').nth(0);\n  const g2 = page.locator('ix-group').nth(1);\n\n  const sb1Dropdown = sb1.locator('ix-dropdown');\n  const sb2Dropdown = sb2.locator('ix-dropdown');\n  const g1Dropdown = g1.locator('ix-dropdown');\n  const g2Dropdown = g2.locator('ix-dropdown');\n\n  await sb1\n    .getByRole('button')\n    .filter({ hasText: 'context-menu' })\n    .first()\n    .click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    0\n  );\n\n  await sb2\n    .getByRole('button')\n    .filter({ hasText: 'context-menu' })\n    .first()\n    .click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    1\n  );\n\n  await g2.getByRole('button').filter({ hasText: 'context-menu' }).click();\n\n  await expectToBeVisible(\n    [sb1Dropdown, sb2Dropdown, g1Dropdown, g2Dropdown],\n    3\n  );\n});\n\nfunction expectToBeVisible(elements: Locator[], index: number) {\n  return Promise.all(\n    elements.map(async (element, i) => {\n      let ef = expect(element);\n      if (i !== index) {\n        ef = ef.not;\n      }\n      await ef.toBeVisible();\n    })\n  );\n}\n"]}

package/dist/collection/components/dropdown-button/dropdown-button.css

@@ -18,6 +18,14 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -27,6 +35,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: inline-block;
   position: relative;
   height: 2rem;
@@ -37,6 +49,30 @@
 :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 .hide {
   display: none;
 }
@@ -52,6 +88,13 @@
 }
 :host .dropdown-button .button-label {
   margin-right: auto;
+  min-width: 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:host .dropdown-button .dropdown-icon {
+  margin-right: 0.25rem;
 }
 :host .triangle {
   position: absolute;
@@ -95,10 +138,9 @@
 :host .triangle.secondary.disabled {
   color: var(--theme-btn-secondary--color--disabled);
 }
-:host .dropdown {
-  width: auto !important;
-  inset: auto !important;
-  transform: unset !important;
+:host .content {
+  display: flex;
+  align-items: center;
 }
 
 :host(.disabled) {

package/dist/collection/components/dropdown-button/dropdown-button.js

@@ -15,10 +15,10 @@ export class DropdownButton {
     this.variant = 'primary';
     this.outline = false;
     this.ghost = false;
-    this.active = false;
     this.disabled = false;
     this.label = undefined;
     this.icon = undefined;
+    this.placement = undefined;
     this.dropdownAnchor = undefined;
   }
   getTriangle() {
@@ -37,7 +37,7 @@ export class DropdownButton {
         disabled: this.disabled,
       } }, h("div", { class: "dropdown-button", ref: (ref) => {
         this.dropdownAnchor = ref;
-      } }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: "chevron-down-small", size: "24" }))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, positioningStrategy: 'fixed' }, h("slot", null))));
+      } }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement }, h("slot", null))));
   }
   static get is() { return "ix-dropdown-button"; }
   static get encapsulation() { return "shadow"; }
@@ -112,27 +112,6 @@ export class DropdownButton {
         "reflect": false,
         "defaultValue": "false"
       },
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Will be removed in 3.0.0"
-            }],
-          "text": "Active button (has no effect)"
-        },
-        "attribute": "active",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -184,6 +163,31 @@ export class DropdownButton {
         },
         "attribute": "icon",
         "reflect": false
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AlignedPlacement",
+          "resolved": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "AlignedPlacement": {
+              "location": "import",
+              "path": "../dropdown/placement"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Placement of the dropdown"
+        },
+        "attribute": "placement",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/dropdown-button/dropdown-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-button.js","sourceRoot":"","sources":["../../../src/components/dropdown-button/dropdown-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAKzE;;GAEG;AAMH,MAAM,OAAO,cAAc;;mBAMgB,SAAS;mBAKhC,KAAK;iBAKP,KAAK;kBAMJ,KAAK;oBAKH,KAAK;;;;;EAchB,WAAW;IACjB,OAAO,CACL,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,CACR,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,WACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;UACX,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;QAC5B,CAAC,IAEA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QAEvB,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,GACnD;QACX,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO;QAC9C,eAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,IAAI,GAAW,CAC7C,CACb,CAAC,CAAC,CAAC,CACF;QACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP;QACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG;MAEN,mBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,mBAAmB,EAAE,OAAO;QAE5B,eAAa,CACD,CACT,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Active button (has no effect)\n   * @deprecated Will be removed in 3.0.0\n   */\n  @Prop() active = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  @State() dropdownAnchor!: HTMLElement;\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n            >\n              <ix-icon\n                name={this.icon}\n                size=\"24\"\n                class={{ hide: this.icon === '' || this.icon === undefined }}\n              ></ix-icon>\n              <div class={'button-label'}>{this.label}</div>\n              <ix-icon name=\"chevron-down-small\" size=\"24\"></ix-icon>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor}\n          positioningStrategy={'fixed'}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown-button.js","sourceRoot":"","sources":["../../../src/components/dropdown-button/dropdown-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMzE;;GAEG;AAMH,MAAM,OAAO,cAAc;;mBAMgB,SAAS;mBAKhC,KAAK;iBAKP,KAAK;oBAKF,KAAK;;;;;;EAqBhB,WAAW;IACjB,OAAO,CACL,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,CACR,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,WACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;UACX,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;QAC5B,CAAC,IAEA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,OAAO;QAEjB,WAAK,KAAK,EAAE,SAAS;UAClB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,eAAe,GACb,CACZ,CAAC,CAAC,CAAC,IAAI;UACR,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO;UAC9C,eAAS,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAC,IAAI,GAAW,CACrD,CACI,CACb,CAAC,CAAC,CAAC,CACF;QACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP;QACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG;MAEN,mBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,SAAS,EAAE,IAAI,CAAC,SAAS;QAEzB,eAAa,CACD,CACT,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Placement of the dropdown\n   *\n   * @since 2.0.0\n   */\n  @Prop() placement: AlignedPlacement;\n\n  @State() dropdownAnchor!: HTMLElement;\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n              alignment=\"start\"\n            >\n              <div class={'content'}>\n                {this.icon ? (\n                  <ix-icon\n                    name={this.icon}\n                    size=\"24\"\n                    class={'dropdown-icon'}\n                  ></ix-icon>\n                ) : null}\n                <div class={'button-label'}>{this.label}</div>\n                <ix-icon name={'chevron-down-small'} size=\"24\"></ix-icon>\n              </div>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor}\n          placement={this.placement}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown-header/dropdown-header.css

@@ -14,7 +14,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   align-items: center;
   position: relative;
@@ -29,4 +41,28 @@
 :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;
 }

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

@@ -22,8 +22,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
   --ix-dropdown-item-checked-color: var(--theme-color-primary);
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   flex-direction: row;
   position: relative;
@@ -37,6 +49,30 @@
 :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 .dropdown-item {
   all: unset;
   display: flex;

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

@@ -6,7 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { chevronRightSmall } from '@siemens/ix-icons/icons';
 import { h, Host, } from '@stencil/core';
 export class DropdownItem {
   constructor() {
@@ -38,7 +37,7 @@ export class DropdownItem {
       }, role: "listitem" }, h("button", { type: "button", tabIndex: 0, class: {
         'dropdown-item': true,
         'no-checked-field': this.suppressChecked,
-      }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { class: "dropdown-item-text" }, this.label, h("slot", null)), this.isSubMenu ? (h("ix-icon", { name: chevronRightSmall, class: 'submenu-icon' })) : null)));
+      }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { class: "dropdown-item-text" }, this.label, h("slot", null)), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
   }
   static get is() { return "ix-dropdown-item"; }
   static get encapsulation() { return "shadow"; }
@@ -194,8 +193,11 @@ export class DropdownItem {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Click on item"
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "HTMLIxDropdownItemElement",

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,YAAY;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;qBAKH,KAAK;2BAKC,KAAK;;EAO/B;;KAEG;EAEH,KAAK,CAAC,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAEO,UAAU;IAChB,OAAO,CACL,IAAI,CAAC,KAAK,KAAK,SAAS;MACxB,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,EAAE;MACjC,IAAI,CAAC,IAAI,KAAK,SAAS,CACxB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE;QAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,SAAS;OACxB,EACD,IAAI,EAAC,UAAU;MAEf,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;UACL,eAAe,EAAE,IAAI;UACrB,kBAAkB,EAAE,IAAI,CAAC,eAAe;SACzC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;QAElC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACvB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,eACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,IAAI,GACA,CACZ,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAChE,CAAC,CAAC,CAAC,IAAI;QACR,WAAK,KAAK,EAAC,oBAAoB;UAC5B,IAAI,CAAC,KAAK;UACX,eAAa,CACT;QACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,eAAS,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,GAAY,CACpE,CAAC,CAAC,CAAC,IAAI,CACD,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { chevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /**\n   * @internal\n   */\n  @Prop() isSubMenu = false;\n\n  /**\n   * @internal\n   */\n  @Prop() suppressChecked = false;\n\n  /**\n   * Click on item\n   */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  private isIconOnly() {\n    return (\n      this.label === undefined &&\n      this.hostElement.innerText === '' &&\n      this.icon !== undefined\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          hover: this.hover,\n          'icon-only': this.isIconOnly(),\n          disabled: this.disabled,\n          submenu: this.isSubMenu,\n        }}\n        role=\"listitem\"\n      >\n        <button\n          type=\"button\"\n          tabIndex={0}\n          class={{\n            'dropdown-item': true,\n            'no-checked-field': this.suppressChecked,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {!this.suppressChecked ? (\n            <div class=\"dropdown-item-checked\">\n              {this.checked ? (\n                <ix-icon\n                  class=\"checkmark\"\n                  name=\"single-check\"\n                  size=\"16\"\n                ></ix-icon>\n              ) : null}\n            </div>\n          ) : null}\n          {this.icon ? (\n            <ix-icon class=\"dropdown-item-icon\" name={this.icon}></ix-icon>\n          ) : null}\n          <div class=\"dropdown-item-text\">\n            {this.label}\n            <slot></slot>\n          </div>\n          {this.isSubMenu ? (\n            <ix-icon name={chevronRightSmall} class={'submenu-icon'}></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,YAAY;;;;iBAgBP,KAAK;oBAKF,KAAK;mBAKN,KAAK;qBAGH,KAAK;2BAGC,KAAK;;EAK/B;;KAEG;EAEH,KAAK,CAAC,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAEO,UAAU;IAChB,OAAO,CACL,IAAI,CAAC,KAAK,KAAK,SAAS;MACxB,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,EAAE;MACjC,IAAI,CAAC,IAAI,KAAK,SAAS,CACxB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE;QAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,SAAS;OACxB,EACD,IAAI,EAAC,UAAU;MAEf,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;UACL,eAAe,EAAE,IAAI;UACrB,kBAAkB,EAAE,IAAI,CAAC,eAAe;SACzC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;QAElC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACvB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,eACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,cAAc,EACpB,IAAI,EAAC,IAAI,GACA,CACZ,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,eAAS,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CAChE,CAAC,CAAC,CAAC,IAAI;QACR,WAAK,KAAK,EAAC,oBAAoB;UAC5B,IAAI,CAAC,KAAK;UACX,eAAa,CACT;QACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,eACE,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE,cAAc,GACZ,CACZ,CAAC,CAAC,CAAC,IAAI,CACD,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true,\n})\nexport class DropdownItem {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /** @internal */\n  @Prop() isSubMenu = false;\n\n  /** @internal */\n  @Prop() suppressChecked = false;\n\n  /** @internal */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  private isIconOnly() {\n    return (\n      this.label === undefined &&\n      this.hostElement.innerText === '' &&\n      this.icon !== undefined\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          hover: this.hover,\n          'icon-only': this.isIconOnly(),\n          disabled: this.disabled,\n          submenu: this.isSubMenu,\n        }}\n        role=\"listitem\"\n      >\n        <button\n          type=\"button\"\n          tabIndex={0}\n          class={{\n            'dropdown-item': true,\n            'no-checked-field': this.suppressChecked,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {!this.suppressChecked ? (\n            <div class=\"dropdown-item-checked\">\n              {this.checked ? (\n                <ix-icon\n                  class=\"checkmark\"\n                  name={'single-check'}\n                  size=\"16\"\n                ></ix-icon>\n              ) : null}\n            </div>\n          ) : null}\n          {this.icon ? (\n            <ix-icon class=\"dropdown-item-icon\" name={this.icon}></ix-icon>\n          ) : null}\n          <div class=\"dropdown-item-text\">\n            {this.label}\n            <slot></slot>\n          </div>\n          {this.isSubMenu ? (\n            <ix-icon\n              name={'chevron-right-small'}\n              class={'submenu-icon'}\n            ></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/empty-state/empty-state.css

@@ -18,11 +18,49 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
 :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);
 }