@siemens/ix 4.1.0 → 4.3.0

package/dist/collection/components/application-header/application-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"application-header.js","sourceRoot":"","sources":["../../../src/components/application-header/application-header.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 */\nimport { iconApps, iconMoreMenu } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint, getCurrentBreakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @slot default - Place items on the right side of the header. If the screen size is small, the items will be shown inside a dropdown.\n * @slot secondary - Place additional items inside the header. They will appear after logo and name. If the screen size is small, the items will be shown inside a dropdown.\n * @slot overflow - Use this slot to display additional items that do not fit in the default or secondary slot.\n * @slot logo - Place a company logo inside the header. Alternatively the companyLogo property can be set.\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Define a suffix which will be displayed next to the application name\n   *\n   * @since 4.0.0\n   */\n  @Prop() nameSuffix?: string;\n\n  /**\n   * Company logo will be show on the left side of the application name.\n   * It will be hidden on smaller screens.\n   *\n   * @since 4.0.0\n   */\n  @Prop() companyLogo?: string;\n\n  /**\n   * Alt text for the company logo\n   *\n   * @since 4.0.0\n   */\n  @Prop() companyLogoAlt?: string;\n\n  /**\n   * The app icon will be shown as the first element inside the header.\n   * It will be hidden on smaller screens.\n   *\n   * @since 4.0.0\n   */\n  @Prop() appIcon?: string;\n\n  /**\n   * Alt text for the app icon\n   *\n   * @since 4.0.0\n   */\n  @Prop() appIconAlt?: string;\n\n  /**\n   * Render subtle outline around app icon to ensure proper contrast.\n   *\n   * @since 4.0.0\n   */\n  @Prop() appIconOutline = false;\n\n  /**\n   * Hides the bottom border of the header\n   *\n   * @since 4.0.0\n   */\n  @Prop() hideBottomBorder = false;\n\n  /**\n   * Controls the visibility of the menu toggle button based on the context of the application header.\n   *\n   * When the application header is utilized outside the application frame, the menu toggle button is displayed.\n   * Conversely, if the header is within the application frame, this property is ineffective.\n   */\n  @Prop({ mutable: true }) showMenu?: boolean = false;\n\n  /**\n   * ARIA label for the menu expand icon button\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelMenuExpandIconButton?: string;\n\n  /**\n   * ARIA label for the app switch icon button\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelAppSwitchIconButton?: string;\n\n  /**\n   * ARIA label for the more menu icon button\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelMoreMenuIconButton?: string;\n\n  /**\n   * Event emitted when the menu toggle button is clicked\n   */\n  @Event() menuToggle!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the app switch button is clicked\n   *\n   * @since 3.0.0\n   */\n  @Event() openAppSwitch!: EventEmitter<void>;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedLogo = false;\n  @State() hasOverflowContextMenu = false;\n  @State() hasSecondarySlotElements = false;\n  @State() hasDefaultSlotElements = false;\n  @State() hasOverflowSlotElements = false;\n  @State() applicationLayoutContext?: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot!.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    this.breakpoint = getCurrentBreakpoint();\n\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateHasSlotAssignedElementsStates();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('applicationLayoutContext')\n  watchApplicationLayoutContext() {\n    if (this.applicationLayoutContext) {\n      this.showMenu = false;\n    }\n  }\n  @Watch('suppressResponsive')\n  watchSuppressResponsive() {\n    this.breakpoint = 'md';\n  }\n\n  private checkLogoSlot() {\n    const slotElement = this.hostElement.shadowRoot!.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n\n    const isSiemensLogoDefined =\n      window.customElements.get('ix-siemens-logo') !== undefined;\n\n    if (isSiemensLogoDefined) {\n      return hasSlottedElements(slotElement);\n    }\n\n    let assignedElements = slotElement?.assignedElements({ flatten: true });\n\n    assignedElements = assignedElements?.filter(\n      (element) => element.tagName !== 'IX-SIEMENS-LOGO'\n    );\n\n    return assignedElements?.length !== 0;\n  }\n\n  private attachSiemensLogoIfLoaded() {\n    if (this.companyLogo) {\n      return;\n    }\n\n    if (!this.checkLogoSlot()) {\n      const logoElement = document.createElement('ix-siemens-logo');\n      logoElement.slot = 'logo';\n      this.hostElement.appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    if (this.applicationLayoutContext) {\n      menuController.toggle();\n    } else {\n      this.menuExpanded = !this.menuExpanded;\n    }\n\n    this.menuToggle.emit(this.menuExpanded);\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot!.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (\n      !this.callbackUpdateAppSwitchModal ||\n      !this.applicationLayoutContext?.appSwitchConfig\n    ) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    const { defaultPrevented } = this.openAppSwitch.emit();\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    if (!this.applicationLayoutContext?.appSwitchConfig) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateHasSlotAssignedElementsStates() {\n    const defaultSlot = this.hostElement.shadowRoot!.querySelector(\n      '.content slot:not([name])'\n    );\n\n    const secondarySlot = this.hostElement.shadowRoot!.querySelector(\n      '.content slot[name=\"secondary\"]'\n    );\n\n    const overflowSlot = this.hostElement.shadowRoot!.querySelector(\n      '.content slot[name=\"overflow\"]'\n    );\n\n    this.hasDefaultSlotElements = hasSlottedElements(defaultSlot);\n    this.hasSecondarySlotElements = hasSlottedElements(secondarySlot);\n    this.hasOverflowSlotElements = hasSlottedElements(overflowSlot);\n\n    this.hasOverflowContextMenu =\n      this.hasDefaultSlotElements || this.hasSecondarySlotElements;\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n    const showMenuByApplicationFrame =\n      this.breakpoint === 'sm' &&\n      this.suppressResponsive === false &&\n      hasApplicationContextAvailable;\n\n    const showApplicationSwitch =\n      this.applicationLayoutContext?.appSwitchConfig &&\n      this.breakpoint !== 'sm' &&\n      this.suppressResponsive === false;\n\n    const showCompanyLogoByProperty =\n      this.breakpoint !== 'sm' && !!this.companyLogo;\n\n    return (\n      <Host\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n          'hide-bottom-border': this.hideBottomBorder,\n        }}\n        slot=\"application-header\"\n      >\n        <div class=\"left-side\">\n          {this.appIcon && this.breakpoint !== 'sm' && (\n            <div\n              class={{\n                'app-icon': true,\n                'app-icon-outline': this.appIconOutline,\n              }}\n            >\n              <img src={this.appIcon} alt={this.appIconAlt} />\n            </div>\n          )}\n          {(this.showMenu || showMenuByApplicationFrame) && (\n            <ix-menu-expand-icon\n              onClick={() => this.onMenuClick()}\n              expanded={this.menuExpanded}\n              ixAriaLabel={this.ariaLabelMenuExpandIconButton}\n            ></ix-menu-expand-icon>\n          )}\n          {showApplicationSwitch && (\n            <ix-icon-button\n              onClick={() => this.showAppSwitch()}\n              icon={iconApps}\n              variant=\"subtle-tertiary\"\n              class={{\n                'app-switch': true,\n                'without-app-icon': !this.appIcon,\n              }}\n              aria-label={this.ariaLabelAppSwitchIconButton}\n            ></ix-icon-button>\n          )}\n          {showCompanyLogoByProperty && (\n            <div class=\"logo\">\n              <img src={this.companyLogo} alt={this.companyLogoAlt} />\n            </div>\n          )}\n          <div\n            class={{\n              logo: true,\n              'hide-logo': !this.hasSlottedLogo,\n            }}\n          >\n            <slot\n              name=\"logo\"\n              onSlotchange={() => (this.hasSlottedLogo = this.checkLogoSlot())}\n            ></slot>\n          </div>\n          <div class=\"name\">\n            <ix-typography format=\"body-lg\" class=\"application-name\">\n              {this.name}\n            </ix-typography>\n            {this.nameSuffix && this.breakpoint !== 'sm' && (\n              <ix-typography format=\"body-xs\" class=\"application-name-suffix\">\n                {this.nameSuffix}\n              </ix-typography>\n            )}\n          </div>\n        </div>\n        <div class={{ 'right-side': true, sm: this.breakpoint === 'sm' }}>\n          {this.breakpoint !== 'sm' && (\n            <div class=\"secondary\">\n              <slot name=\"secondary\"></slot>\n            </div>\n          )}\n          <div class=\"content\">\n            {this.breakpoint !== 'sm' && <slot></slot>}\n            <ix-icon-button\n              class={{\n                'context-menu': true,\n                'context-menu-visible':\n                  this.hasOverflowContextMenu || this.hasOverflowSlotElements,\n              }}\n              data-context-menu\n              data-testid=\"show-more\"\n              icon={iconMoreMenu}\n              variant=\"subtle-tertiary\"\n              aria-label={this.ariaLabelMoreMenuIconButton}\n              aria-hidden={a11yBoolean(\n                !(this.hasOverflowContextMenu || this.hasOverflowSlotElements)\n              )}\n            ></ix-icon-button>\n            <ix-dropdown\n              data-overflow-dropdown\n              class=\"dropdown\"\n              discoverAllSubmenus\n              trigger={this.resolveContextMenuButton()}\n              aria-hidden={a11yBoolean(\n                !(this.hasOverflowContextMenu || this.hasOverflowSlotElements)\n              )}\n            >\n              <div\n                class=\"dropdown-content\"\n                onClick={(e) => this.onContentBgClick(e)}\n              >\n                {this.breakpoint === 'sm' && (\n                  <div\n                    class={{\n                      'slot-content': true,\n                      'slot-content-active': this.hasSecondarySlotElements,\n                    }}\n                  >\n                    <slot\n                      name=\"secondary\"\n                      onSlotchange={() =>\n                        this.updateHasSlotAssignedElementsStates()\n                      }\n                    ></slot>\n                  </div>\n                )}\n                {this.breakpoint === 'sm' && (\n                  <div\n                    class={{\n                      'slot-content': true,\n                      'slot-content-active': this.hasDefaultSlotElements,\n                    }}\n                  >\n                    <slot\n                      onSlotchange={() =>\n                        this.updateHasSlotAssignedElementsStates()\n                      }\n                    ></slot>\n                  </div>\n                )}\n                <div\n                  class={{\n                    'slot-content': true,\n                    'slot-content-active': this.hasOverflowSlotElements,\n                  }}\n                >\n                  <slot\n                    name=\"overflow\"\n                    onSlotchange={() =>\n                      this.updateHasSlotAssignedElementsStates()\n                    }\n                  ></slot>\n                </div>\n              </div>\n            </ix-dropdown>\n            <slot name=\"ix-application-header-avatar\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"application-header.js","sourceRoot":"","sources":["../../../src/components/application-header/application-header.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 */\nimport { iconApps, iconMoreMenu } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n  ApplicationLayoutContext,\n  AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint, getCurrentBreakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot default - Place items on the right side of the header. If the screen size is small, the items will be shown inside a dropdown.\n * @slot secondary - Place additional items inside the header. They will appear after logo and name. If the screen size is small, the items will be shown inside a dropdown.\n * @slot overflow - Use this slot to display additional items that do not fit in the default or secondary slot.\n * @slot logo - Place a company logo inside the header. Alternatively the companyLogo property can be set.\n */\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Define a suffix which will be displayed next to the application name\n   *\n   * @since 4.0.0\n   */\n  @Prop() nameSuffix?: string;\n\n  /**\n   * Company logo will be show on the left side of the application name.\n   * It will be hidden on smaller screens.\n   *\n   * @since 4.0.0\n   */\n  @Prop() companyLogo?: string;\n\n  /**\n   * Alt text for the company logo\n   *\n   * @since 4.0.0\n   */\n  @Prop() companyLogoAlt?: string;\n\n  /**\n   * The app icon will be shown as the first element inside the header.\n   * It will be hidden on smaller screens.\n   *\n   * @since 4.0.0\n   */\n  @Prop() appIcon?: string;\n\n  /**\n   * Alt text for the app icon\n   *\n   * @since 4.0.0\n   */\n  @Prop() appIconAlt?: string;\n\n  /**\n   * Render subtle outline around app icon to ensure proper contrast.\n   *\n   * @since 4.0.0\n   */\n  @Prop() appIconOutline = false;\n\n  /**\n   * Hides the bottom border of the header\n   *\n   * @since 4.0.0\n   */\n  @Prop() hideBottomBorder = false;\n\n  /**\n   * Controls the visibility of the menu toggle button based on the context of the application header.\n   *\n   * When the application header is utilized outside the application frame, the menu toggle button is displayed.\n   * Conversely, if the header is within the application frame, this property is ineffective.\n   */\n  @Prop({ mutable: true }) showMenu?: boolean = false;\n\n  /**\n   * ARIA label for the menu expand icon button\n   *\n   * @since 3.2.0\n   * @deprecated This prop is no longer used as the menu expand button is hidden from screen readers. Will be removed in 5.0.0\n   */\n  @Prop() ariaLabelMenuExpandIconButton?: string;\n\n  /**\n   * ARIA label for the app switch icon button\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelAppSwitchIconButton?: string;\n\n  /**\n   * ARIA label for the more menu icon button\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelMoreMenuIconButton?: string;\n\n  /**\n   * Enable Popover API rendering for dropdown.\n   *\n   * @default false\n   * @since 4.3.0\n   */\n  @Prop() enableTopLayer: boolean = false;\n\n  /**\n   * Event emitted when the menu toggle button is clicked\n   */\n  @Event() menuToggle!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the app switch button is clicked\n   *\n   * @since 3.0.0\n   */\n  @Event() openAppSwitch!: EventEmitter<void>;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n  @State() suppressResponsive = false;\n\n  @State() hasSlottedLogo = false;\n  @State() hasOverflowContextMenu = false;\n  @State() hasSecondarySlotElements = false;\n  @State() hasDefaultSlotElements = false;\n  @State() hasOverflowSlotElements = false;\n  @State() applicationLayoutContext?: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n  private callbackUpdateAppSwitchModal?: (\n    config: AppSwitchConfiguration\n  ) => void;\n\n  get contentBackground() {\n    return this.hostElement.shadowRoot!.querySelector('.dropdown-content');\n  }\n\n  componentWillLoad() {\n    this.breakpoint = getCurrentBreakpoint();\n\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        this.breakpoint = applicationLayoutService.breakpoint;\n        this.applicationLayoutContext = ctx;\n\n        this.tryUpdateAppSwitch();\n      },\n      true\n    );\n\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      if (this.suppressResponsive) {\n        return;\n      }\n\n      this.breakpoint = mode;\n    });\n\n    this.updateHasSlotAssignedElementsStates();\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  @Watch('applicationLayoutContext')\n  watchApplicationLayoutContext() {\n    if (this.applicationLayoutContext) {\n      this.showMenu = false;\n    }\n  }\n  @Watch('suppressResponsive')\n  watchSuppressResponsive() {\n    this.breakpoint = 'md';\n  }\n\n  private checkLogoSlot() {\n    const slotElement = this.hostElement.shadowRoot!.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n\n    const isSiemensLogoDefined =\n      window.customElements.get('ix-siemens-logo') !== undefined;\n\n    if (isSiemensLogoDefined) {\n      return hasSlottedElements(slotElement);\n    }\n\n    let assignedElements = slotElement?.assignedElements({ flatten: true });\n\n    assignedElements = assignedElements?.filter(\n      (element) => element.tagName !== 'IX-SIEMENS-LOGO'\n    );\n\n    return assignedElements?.length !== 0;\n  }\n\n  private attachSiemensLogoIfLoaded() {\n    if (this.companyLogo) {\n      return;\n    }\n\n    if (!this.checkLogoSlot()) {\n      const logoElement = document.createElement('ix-siemens-logo');\n      logoElement.slot = 'logo';\n      this.hostElement.appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    if (this.applicationLayoutContext) {\n      menuController.toggle();\n    } else {\n      this.menuExpanded = !this.menuExpanded;\n    }\n\n    this.menuToggle.emit(this.menuExpanded);\n  }\n\n  private resolveContextMenuButton() {\n    return new Promise<HTMLElement>((resolve) =>\n      readTask(() =>\n        resolve(\n          this.hostElement.shadowRoot!.querySelector(\n            '[data-context-menu]'\n          ) as HTMLElement\n        )\n      )\n    );\n  }\n\n  private tryUpdateAppSwitch() {\n    if (\n      !this.callbackUpdateAppSwitchModal ||\n      !this.applicationLayoutContext?.appSwitchConfig\n    ) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private async showAppSwitch() {\n    const { defaultPrevented } = this.openAppSwitch.emit();\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    if (!this.applicationLayoutContext?.appSwitchConfig) {\n      return;\n    }\n\n    this.callbackUpdateAppSwitchModal = await showAppSwitch(\n      this.applicationLayoutContext?.appSwitchConfig\n    );\n  }\n\n  private updateHasSlotAssignedElementsStates() {\n    const defaultSlot = this.hostElement.shadowRoot!.querySelector(\n      '.content slot:not([name])'\n    );\n\n    const secondarySlot = this.hostElement.shadowRoot!.querySelector(\n      '.content slot[name=\"secondary\"]'\n    );\n\n    const overflowSlot = this.hostElement.shadowRoot!.querySelector(\n      '.content slot[name=\"overflow\"]'\n    );\n\n    this.hasDefaultSlotElements = hasSlottedElements(defaultSlot);\n    this.hasSecondarySlotElements = hasSlottedElements(secondarySlot);\n    this.hasOverflowSlotElements = hasSlottedElements(overflowSlot);\n\n    this.hasOverflowContextMenu =\n      this.hasDefaultSlotElements || this.hasSecondarySlotElements;\n  }\n\n  private onContentBgClick(e: MouseEvent) {\n    if (e.target === this.contentBackground) {\n      e.preventDefault();\n    }\n  }\n\n  render() {\n    const hasApplicationContextAvailable = !!this.applicationLayoutContext;\n\n    const showMenuByApplicationFrame =\n      this.breakpoint === 'sm' &&\n      this.suppressResponsive === false &&\n      hasApplicationContextAvailable;\n\n    const showApplicationSwitch =\n      this.applicationLayoutContext?.appSwitchConfig &&\n      this.breakpoint !== 'sm' &&\n      this.suppressResponsive === false;\n\n    const showCompanyLogoByProperty =\n      this.breakpoint !== 'sm' && !!this.companyLogo;\n\n    return (\n      <Host\n        class={{\n          [`breakpoint-${this.breakpoint}`]: true,\n          'hide-bottom-border': this.hideBottomBorder,\n        }}\n        slot=\"application-header\"\n      >\n        <div class=\"left-side\">\n          {this.appIcon && this.breakpoint !== 'sm' && (\n            <div\n              class={{\n                'app-icon': true,\n                'app-icon-outline': this.appIconOutline,\n              }}\n            >\n              <img src={this.appIcon} alt={this.appIconAlt} />\n            </div>\n          )}\n          {(this.showMenu || showMenuByApplicationFrame) && (\n            <ix-menu-expand-icon\n              onClick={() => this.onMenuClick()}\n              expanded={this.menuExpanded}\n            ></ix-menu-expand-icon>\n          )}\n          {showApplicationSwitch && (\n            <ix-icon-button\n              onClick={() => this.showAppSwitch()}\n              icon={iconApps}\n              variant=\"subtle-tertiary\"\n              class={{\n                'app-switch': true,\n                'without-app-icon': !this.appIcon,\n              }}\n              aria-label={this.ariaLabelAppSwitchIconButton}\n            ></ix-icon-button>\n          )}\n          {showCompanyLogoByProperty && (\n            <div class=\"logo\">\n              <img src={this.companyLogo} alt={this.companyLogoAlt} />\n            </div>\n          )}\n          <div\n            class={{\n              logo: true,\n              'hide-logo': !this.hasSlottedLogo,\n            }}\n          >\n            <slot\n              name=\"logo\"\n              onSlotchange={() => (this.hasSlottedLogo = this.checkLogoSlot())}\n            ></slot>\n          </div>\n          <div class=\"name\">\n            <ix-typography format=\"body-lg\" class=\"application-name\">\n              {this.name}\n            </ix-typography>\n            {this.nameSuffix && this.breakpoint !== 'sm' && (\n              <ix-typography format=\"body-xs\" class=\"application-name-suffix\">\n                {this.nameSuffix}\n              </ix-typography>\n            )}\n          </div>\n        </div>\n        <div class={{ 'right-side': true, sm: this.breakpoint === 'sm' }}>\n          {this.breakpoint !== 'sm' && (\n            <div class=\"secondary\">\n              <slot name=\"secondary\"></slot>\n            </div>\n          )}\n          <div class=\"content\">\n            {this.breakpoint !== 'sm' && <slot></slot>}\n            <ix-icon-button\n              class={{\n                'context-menu': true,\n                'context-menu-visible':\n                  this.hasOverflowContextMenu || this.hasOverflowSlotElements,\n              }}\n              data-context-menu\n              data-testid=\"show-more\"\n              icon={iconMoreMenu}\n              variant=\"subtle-tertiary\"\n              aria-label={this.ariaLabelMoreMenuIconButton}\n              aria-hidden={a11yBoolean(\n                !(this.hasOverflowContextMenu || this.hasOverflowSlotElements)\n              )}\n            ></ix-icon-button>\n            <ix-dropdown\n              data-overflow-dropdown\n              class=\"dropdown\"\n              discoverAllSubmenus\n              trigger={this.resolveContextMenuButton()}\n              aria-hidden={a11yBoolean(\n                !(this.hasOverflowContextMenu || this.hasOverflowSlotElements)\n              )}\n              enableTopLayer={this.enableTopLayer}\n            >\n              <div\n                class=\"dropdown-content\"\n                onClick={(e) => this.onContentBgClick(e)}\n              >\n                {this.breakpoint === 'sm' && (\n                  <div\n                    class={{\n                      'slot-content': true,\n                      'slot-content-active': this.hasSecondarySlotElements,\n                    }}\n                  >\n                    <slot\n                      name=\"secondary\"\n                      onSlotchange={() =>\n                        this.updateHasSlotAssignedElementsStates()\n                      }\n                    ></slot>\n                  </div>\n                )}\n                {this.breakpoint === 'sm' && (\n                  <div\n                    class={{\n                      'slot-content': true,\n                      'slot-content-active': this.hasDefaultSlotElements,\n                    }}\n                  >\n                    <slot\n                      onSlotchange={() =>\n                        this.updateHasSlotAssignedElementsStates()\n                      }\n                    ></slot>\n                  </div>\n                )}\n                <div\n                  class={{\n                    'slot-content': true,\n                    'slot-content-active': this.hasOverflowSlotElements,\n                  }}\n                >\n                  <slot\n                    name=\"overflow\"\n                    onSlotchange={() =>\n                      this.updateHasSlotAssignedElementsStates()\n                    }\n                  ></slot>\n                </div>\n              </div>\n            </ix-dropdown>\n            <slot name=\"ix-application-header-avatar\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -8,8 +8,8 @@
  */
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
-import { createMutationObserver } from "../utils/mutation-observer";
 import { makeRef } from "../utils/make-ref";
+import { createMutationObserver } from "../utils/mutation-observer";
 let sequenceId = 0;
 const createId = (prefix = 'breadcrumb-') => {
     return `${prefix}-${sequenceId++}`;
@@ -33,6 +33,13 @@ export class Breadcrumb {
          * with conditionally hidden previous items
          */
         this.ariaLabelPreviousButton = 'previous';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.previousButtonRef = makeRef();
         this.nextButtonRef = makeRef();
         this.items = [];
@@ -83,9 +90,9 @@ export class Breadcrumb {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: 'c5457acd786da77d474f83613a2c12910a193779' }, h("ix-dropdown", { key: '3f1e0ae1e4ac1d192ff7c0d5619329cfbcdf8a62', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (h(Host, { key: '6c7e20e30924d04854ca78ead9fd98d5ebe346bf' }, h("ix-dropdown", { key: '822c078f94f89e66db61e65f77d5e7bc6fb40aa2', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef.waitForCurrent()
-                : undefined, onShowChanged: ({ detail }) => {
+                : undefined, enableTopLayer: this.enableTopLayer, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
                 const previousButton = this.hostElement.shadowRoot.getElementById(this.previousButtonId);
                 // Need to force update previous button to change `aria-expanded`
@@ -100,7 +107,7 @@ export class Breadcrumb {
             return (h("ix-dropdown-item", { label: label, onClick: () => {
                     this.onItemClick(label);
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: '11b4a0c0cbad59437fccee34a73cd4e89de39a1c', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'ad9d8c27e05b76f334f7cf6f79038d339e8d538c' }, h("slot", { key: 'd84c2c0028e22cbfd126b867177ba9b4271e8c24' }))), h("ix-dropdown", { key: '6ba681eb8f116ec287961a7e873b90d381baefdb', trigger: this.nextButtonRef.waitForCurrent() }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: 'e9f69c0666458f34d930bc5e19663fc9a8e69d90', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '2ad3f37c9baffbd9eb8789dc8304dceb6772e0d4' }, h("slot", { key: '2bd136c9714401ddf2ea8bc5e3cb783b128ce795' }))), h("ix-dropdown", { key: 'ce382ec6bd3590e678a03517b31ec15bb7f2528f', trigger: this.nextButtonRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,
@@ -199,6 +206,32 @@ export class Breadcrumb {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'previous'"
+            },
+            "enableTopLayer": {
+                "type": "boolean",
+                "attribute": "enable-top-layer",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "since",
+                            "text": "4.3.0"
+                        }],
+                    "text": "Enable Popover API rendering for dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.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  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() subtle = false;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick!: EventEmitter<{ event: UIEvent; item: string }>;\n\n  private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n  private readonly nextButtonRef = makeRef<HTMLElement>();\n\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver?: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.subtle = this.subtle;\n      bc.hideChevron = updatedItems.length - 1 === index && !shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef(bc);\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.invisible = index < updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef.waitForCurrent()\n              : undefined\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            const previousButton = this.hostElement.shadowRoot!.getElementById(\n              this.previousButtonId\n            );\n\n            // Need to force update previous button to change `aria-expanded`\n            if (previousButton) {\n              forceUpdate(previousButton);\n            }\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={this.previousButtonRef}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef.waitForCurrent()}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.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  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { makeRef } from '../utils/make-ref';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() subtle = false;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Enable Popover API rendering for dropdown.\n   *\n   * @default false\n   * @since 4.3.0\n   */\n  @Prop() enableTopLayer: boolean = false;\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick!: EventEmitter<{ event: UIEvent; item: string }>;\n\n  private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n  private readonly nextButtonRef = makeRef<HTMLElement>();\n\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver?: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.subtle = this.subtle;\n      bc.hideChevron = updatedItems.length - 1 === index && !shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef(bc);\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.invisible = index < updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef.waitForCurrent()\n              : undefined\n          }\n          enableTopLayer={this.enableTopLayer}\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            const previousButton = this.hostElement.shadowRoot!.getElementById(\n              this.previousButtonId\n            );\n\n            // Need to force update previous button to change `aria-expanded`\n            if (previousButton) {\n              forceUpdate(previousButton);\n            }\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={this.previousButtonRef}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown\n          trigger={this.nextButtonRef.waitForCurrent()}\n          enableTopLayer={this.enableTopLayer}\n        >\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -40,6 +40,11 @@ const handleOnClick = (e, props) => {
         props.onClick(e);
     }
 };
+const isIconDecorative = (ariaAttributes, children) => {
+    const hasTextContent = children && children.length > 0;
+    const hasAriaLabel = !!(ariaAttributes['aria-label'] || ariaAttributes['aria-labelledby']);
+    return hasTextContent || hasAriaLabel;
+};
 export const BaseButton = (props, children) => {
     var _a, _b, _c;
     const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
@@ -47,15 +52,16 @@ export const BaseButton = (props, children) => {
     if (!ariaAttributes['aria-disabled'] && props.disabled) {
         ariaAttributes['aria-disabled'] = 'true';
     }
+    const iconIsDecorative = isIconDecorative(ariaAttributes, children);
     const commonAttributes = Object.assign(Object.assign({}, ariaAttributes), { tabindex: props.disabled ? -1 : ((_c = props.tabIndex) !== null && _c !== void 0 ? _c : 0), class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) });
     const buttonContent = [
         props.loading ? (h("ix-spinner", { size: getSpinnerSize(props), hideTrack: true })) : null,
-        props.icon && !props.loading ? (h("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor })) : null,
+        props.icon && !props.loading ? (h("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor, "aria-hidden": iconIsDecorative ? 'true' : undefined })) : null,
         h("div", { class: {
                 content: true,
                 [`content-${props.alignment}`]: !!props.alignment,
             } }, children),
-        props.iconRight ? (h("ix-icon", { class: "icon-right", name: props.iconRight, size: props.iconSize, color: props.iconColor })) : null,
+        props.iconRight ? (h("ix-icon", { class: "icon-right", name: props.iconRight, size: props.iconSize, color: props.iconColor, "aria-hidden": iconIsDecorative ? 'true' : undefined })) : null,
         props.afterContent ? props.afterContent : null,
     ];
     // If href is provided, render as an anchor tag

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

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/button/base-button.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 */\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\nimport { AnchorInterface } from './button.interface';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    [`btn-${variant}`]: true,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: selected,\n    disabled: disabled,\n  };\n};\n\nexport type BaseButtonProps = {\n  type: string;\n  variant: ButtonVariant;\n  iconOnly: boolean;\n  iconOval: boolean;\n  selected: boolean;\n  disabled: boolean;\n  loading: boolean;\n  icon?: string;\n  iconRight?: string;\n  onClick?: Function;\n  ariaAttributes?: A11yAttributes;\n  extraClasses?: { [key: string]: boolean };\n  iconSize?: string;\n  iconColor?: string;\n  alignment?: ButtonAlignment;\n  tabIndex?: number;\n  afterContent?: any;\n} & AnchorInterface;\n\nconst getSpinnerSize = (btnProps: BaseButtonProps) => {\n  if (!btnProps.icon) {\n    return 'small';\n  }\n\n  switch (btnProps.iconSize) {\n    case '12':\n      return 'xx-small';\n    case '16':\n      return 'x-small';\n    default:\n      return 'small';\n  }\n};\n\nconst handleOnClick = (e: Event, props: BaseButtonProps) => {\n  if (props.disabled || props.loading) {\n    e.preventDefault();\n    e.stopPropagation();\n    return;\n  }\n  if (props.onClick) {\n    props.onClick(e);\n  }\n};\n\nexport const BaseButton: FunctionalComponent<BaseButtonProps> = (\n  props: BaseButtonProps,\n  children\n) => {\n  const extraClasses = props.extraClasses ?? {};\n\n  const ariaAttributes = props.ariaAttributes ?? {};\n  if (!ariaAttributes['aria-disabled'] && props.disabled) {\n    ariaAttributes['aria-disabled'] = 'true';\n  }\n\n  const commonAttributes = {\n    ...ariaAttributes,\n    tabindex: props.disabled ? -1 : (props.tabIndex ?? 0),\n    class: {\n      ...getButtonClasses(\n        props.variant,\n        props.iconOnly,\n        props.iconOval,\n        props.selected,\n        props.disabled || props.loading\n      ),\n      ...extraClasses,\n    },\n  };\n\n  const buttonContent = [\n    props.loading ? (\n      <ix-spinner size={getSpinnerSize(props)} hideTrack></ix-spinner>\n    ) : null,\n    props.icon && !props.loading ? (\n      <ix-icon\n        class=\"icon\"\n        name={props.icon}\n        size={props.iconSize as any}\n        color={props.iconColor}\n      ></ix-icon>\n    ) : null,\n    <div\n      class={{\n        content: true,\n        [`content-${props.alignment}`]: !!props.alignment,\n      }}\n    >\n      {children}\n    </div>,\n    props.iconRight ? (\n      <ix-icon\n        class=\"icon-right\"\n        name={props.iconRight}\n        size={props.iconSize as any}\n        color={props.iconColor}\n      ></ix-icon>\n    ) : null,\n    props.afterContent ? props.afterContent : null,\n  ];\n\n  // If href is provided, render as an anchor tag\n  if (props.href) {\n    return (\n      <a\n        {...commonAttributes}\n        href={props.disabled ? undefined : props.href}\n        target={props.target}\n        role=\"button\"\n        rel={props.rel}\n        onClick={(e: Event) => handleOnClick(e, props)}\n      >\n        {buttonContent}\n      </a>\n    );\n  }\n\n  // Otherwise, render as a button\n  return (\n    <button\n      {...commonAttributes}\n      onClick={(e: Event) => handleOnClick(e, props)}\n      type={props.type}\n    >\n      {buttonContent}\n    </button>\n  );\n};\n"]}
+{"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/button/base-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,OAAsB,EACtB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAiB,EACjB,QAAiB,EACjB,EAAE;IACF,OAAO;QACL,GAAG,EAAE,IAAI;QACT,CAAC,OAAO,OAAO,EAAE,CAAC,EAAE,IAAI;QACxB,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,CAAC,CAAC;AAsBF,MAAM,cAAc,GAAG,CAAC,QAAyB,EAAE,EAAE;IACnD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACnB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,QAAQ,QAAQ,CAAC,QAAQ,EAAE,CAAC;QAC1B,KAAK,IAAI;YACP,OAAO,UAAU,CAAC;QACpB,KAAK,IAAI;YACP,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,OAAO,CAAC;IACnB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,CAAQ,EAAE,KAAsB,EAAE,EAAE;IACzD,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QACpC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO;IACT,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CACvB,cAA8B,EAC9B,QAAa,EACJ,EAAE;IACX,MAAM,cAAc,GAAG,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,CAAC,CAAC,CACrB,cAAc,CAAC,YAAY,CAAC,IAAI,cAAc,CAAC,iBAAiB,CAAC,CAClE,CAAC;IACF,OAAO,cAAc,IAAI,YAAY,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAyC,CAC9D,KAAsB,EACtB,QAAQ,EACR,EAAE;;IACF,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,CAAC;IAE9C,MAAM,cAAc,GAAG,MAAA,KAAK,CAAC,cAAc,mCAAI,EAAE,CAAC;IAClD,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;QACvD,cAAc,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;IAC3C,CAAC;IAED,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAEpE,MAAM,gBAAgB,mCACjB,cAAc,KACjB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,QAAQ,mCAAI,CAAC,CAAC,EACrD,KAAK,kCACA,gBAAgB,CACjB,KAAK,CAAC,OAAO,EACb,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAChC,GACE,YAAY,IAElB,CAAC;IAEF,MAAM,aAAa,GAAG;QACpB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,kBAAY,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,SAAc,CACjE,CAAC,CAAC,CAAC,IAAI;QACR,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAC7B,eACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,QAAe,EAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,iBACT,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GACzC,CACZ,CAAC,CAAC,CAAC,IAAI;QACR,WACE,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,CAAC,WAAW,KAAK,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS;aAClD,IAEA,QAAQ,CACL;QACN,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,eACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,IAAI,EAAE,KAAK,CAAC,QAAe,EAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,iBACT,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GACzC,CACZ,CAAC,CAAC,CAAC,IAAI;QACR,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI;KAC/C,CAAC;IAEF,+CAA+C;IAC/C,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;QACf,OAAO,CACL,yBACM,gBAAgB,IACpB,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAC7C,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,KAE7C,aAAa,CACZ,CACL,CAAC;IACJ,CAAC;IAED,gCAAgC;IAChC,OAAO,CACL,8BACM,gBAAgB,IACpB,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EAC9C,IAAI,EAAE,KAAK,CAAC,IAAI,KAEf,aAAa,CACP,CACV,CAAC;AACJ,CAAC,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\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport { ButtonVariant } from './button';\nimport { AnchorInterface } from './button.interface';\n\nexport type ButtonAlignment = 'center' | 'start';\n\nexport const getButtonClasses = (\n  variant: ButtonVariant,\n  iconOnly = false,\n  iconOval = false,\n  selected: boolean,\n  disabled: boolean\n) => {\n  return {\n    btn: true,\n    [`btn-${variant}`]: true,\n    'btn-icon': iconOnly,\n    'btn-oval': iconOval,\n    selected: selected,\n    disabled: disabled,\n  };\n};\n\nexport type BaseButtonProps = {\n  type: string;\n  variant: ButtonVariant;\n  iconOnly: boolean;\n  iconOval: boolean;\n  selected: boolean;\n  disabled: boolean;\n  loading: boolean;\n  icon?: string;\n  iconRight?: string;\n  onClick?: Function;\n  ariaAttributes?: A11yAttributes;\n  extraClasses?: { [key: string]: boolean };\n  iconSize?: string;\n  iconColor?: string;\n  alignment?: ButtonAlignment;\n  tabIndex?: number;\n  afterContent?: any;\n} & AnchorInterface;\n\nconst getSpinnerSize = (btnProps: BaseButtonProps) => {\n  if (!btnProps.icon) {\n    return 'small';\n  }\n\n  switch (btnProps.iconSize) {\n    case '12':\n      return 'xx-small';\n    case '16':\n      return 'x-small';\n    default:\n      return 'small';\n  }\n};\n\nconst handleOnClick = (e: Event, props: BaseButtonProps) => {\n  if (props.disabled || props.loading) {\n    e.preventDefault();\n    e.stopPropagation();\n    return;\n  }\n  if (props.onClick) {\n    props.onClick(e);\n  }\n};\n\nconst isIconDecorative = (\n  ariaAttributes: A11yAttributes,\n  children: any\n): boolean => {\n  const hasTextContent = children && children.length > 0;\n  const hasAriaLabel = !!(\n    ariaAttributes['aria-label'] || ariaAttributes['aria-labelledby']\n  );\n  return hasTextContent || hasAriaLabel;\n};\n\nexport const BaseButton: FunctionalComponent<BaseButtonProps> = (\n  props: BaseButtonProps,\n  children\n) => {\n  const extraClasses = props.extraClasses ?? {};\n\n  const ariaAttributes = props.ariaAttributes ?? {};\n  if (!ariaAttributes['aria-disabled'] && props.disabled) {\n    ariaAttributes['aria-disabled'] = 'true';\n  }\n\n  const iconIsDecorative = isIconDecorative(ariaAttributes, children);\n\n  const commonAttributes = {\n    ...ariaAttributes,\n    tabindex: props.disabled ? -1 : (props.tabIndex ?? 0),\n    class: {\n      ...getButtonClasses(\n        props.variant,\n        props.iconOnly,\n        props.iconOval,\n        props.selected,\n        props.disabled || props.loading\n      ),\n      ...extraClasses,\n    },\n  };\n\n  const buttonContent = [\n    props.loading ? (\n      <ix-spinner size={getSpinnerSize(props)} hideTrack></ix-spinner>\n    ) : null,\n    props.icon && !props.loading ? (\n      <ix-icon\n        class=\"icon\"\n        name={props.icon}\n        size={props.iconSize as any}\n        color={props.iconColor}\n        aria-hidden={iconIsDecorative ? 'true' : undefined}\n      ></ix-icon>\n    ) : null,\n    <div\n      class={{\n        content: true,\n        [`content-${props.alignment}`]: !!props.alignment,\n      }}\n    >\n      {children}\n    </div>,\n    props.iconRight ? (\n      <ix-icon\n        class=\"icon-right\"\n        name={props.iconRight}\n        size={props.iconSize as any}\n        color={props.iconColor}\n        aria-hidden={iconIsDecorative ? 'true' : undefined}\n      ></ix-icon>\n    ) : null,\n    props.afterContent ? props.afterContent : null,\n  ];\n\n  // If href is provided, render as an anchor tag\n  if (props.href) {\n    return (\n      <a\n        {...commonAttributes}\n        href={props.disabled ? undefined : props.href}\n        target={props.target}\n        role=\"button\"\n        rel={props.rel}\n        onClick={(e: Event) => handleOnClick(e, props)}\n      >\n        {buttonContent}\n      </a>\n    );\n  }\n\n  // Otherwise, render as a button\n  return (\n    <button\n      {...commonAttributes}\n      onClick={(e: Event) => handleOnClick(e, props)}\n      type={props.type}\n    >\n      {buttonContent}\n    </button>\n  );\n};\n"]}

package/dist/collection/components/card/card.css

@@ -327,4 +327,53 @@
     --theme-card-primary--border-color--selected
   );
   --ix-card-background: var(--theme-card-primary--background--selected);
+}
+
+:host(.passive) {
+  cursor: default;
+}
+
+:host(.passive.card-outline) {
+  --ix-card-background: var(--theme-card-outline--background);
+  --ix-card-border-color: var(--theme-card-outline--border-color);
+}
+
+:host(.passive.card-filled) {
+  --ix-card-background: var(--theme-card-filled--background);
+  --ix-card-border-color: var(--theme-card-filled--border-color);
+}
+
+:host(.passive.card-alarm) {
+  --ix-card-background: var(--theme-card-alarm--background);
+  --ix-card-border-color: var(--theme-card-alarm--border-color);
+}
+
+:host(.passive.card-critical) {
+  --ix-card-background: var(--theme-card-critical--background);
+  --ix-card-border-color: var(--theme-card-critical--border-color);
+}
+
+:host(.passive.card-warning) {
+  --ix-card-background: var(--theme-card-warning--background);
+  --ix-card-border-color: var(--theme-card-warning--border-color);
+}
+
+:host(.passive.card-success) {
+  --ix-card-background: var(--theme-card-success--background);
+  --ix-card-border-color: var(--theme-card-success--border-color);
+}
+
+:host(.passive.card-info) {
+  --ix-card-background: var(--theme-card-info--background);
+  --ix-card-border-color: var(--theme-card-info--border-color);
+}
+
+:host(.passive.card-neutral) {
+  --ix-card-background: var(--theme-card-neutral--background);
+  --ix-card-border-color: var(--theme-card-neutral--border-color);
+}
+
+:host(.passive.card-primary) {
+  --ix-card-background: var(--theme-card-primary--background);
+  --ix-card-border-color: var(--theme-card-primary--border-color);
 }

package/dist/collection/components/card/card.js

@@ -9,12 +9,17 @@ export class Card {
          * Show card in selected state
          */
         this.selected = false;
+        /**
+         * If true, disables hover and active styles and changes cursor to default
+         */
+        this.passive = false;
     }
     render() {
-        return (h(Host, { key: '3b734eddf8516af24b52b1b2ba27766a913f943d', class: {
+        return (h(Host, { key: '3eed87586aed1916f7c1e3c2323a46c794d046d9', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
-            } }, h("div", { key: '7a2cce1797c1e89c8568e9e196020747f0f4150b', class: "card-content" }, h("slot", { key: 'ea837bde282a62637ed15b96b8ca407219e949ae' })), h("div", { key: 'acc07c72e4a63a671fb945e4c0332825f4781a1d', class: "card-footer" }, h("slot", { key: '870004ea22909180bac56c8b7c040d914e268f1d', name: "card-accordion" }))));
+                passive: this.passive,
+            } }, h("div", { key: '7ae77cffe48272d0acc8cbd0dc7286d0fc835d8d', class: "card-content" }, h("slot", { key: 'ba07f9804dd1af6256ceb0cc972b2cc03a18f558' })), h("div", { key: '72bc9064c1d09188d60e1b9516811a91435f53b4', class: "card-footer" }, h("slot", { key: '7fbacfea4d8308e88b4db025567654a0a4ef0d96', name: "card-accordion" }))));
     }
     static get is() { return "ix-card"; }
     static get encapsulation() { return "shadow"; }
@@ -75,6 +80,26 @@ export class Card {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "passive": {
+                "type": "boolean",
+                "attribute": "passive",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, disables hover and active styles and changes cursor to default"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACK,YAAO,GAAgB,SAAS,CAAC;QAEzC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;KAmBnC;IAjBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;aAC/B;YAED,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { CardVariant } from './card.types';\n\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement!: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'outline';\n\n  /**\n   * Show card in selected state\n   */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACK,YAAO,GAAgB,SAAS,CAAC;QAEzC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,YAAO,GAAY,KAAK,CAAC;KAoBlC;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBAC9B,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB;YAED,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport type { CardVariant } from './card.types';\n\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement!: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'outline';\n\n  /**\n   * Show card in selected state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * If true, disables hover and active styles and changes cursor to default\n   */\n  @Prop() passive: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n          passive: this.passive,\n        }}\n      >\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/category-filter/category-filter.js

@@ -6,14 +6,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { iconClear, iconSearch } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
 import { BaseButton } from "../button/base-button";
+import { a11yHostAttributes } from "../utils/a11y";
+import { addDisposableEventListener, } from "../utils/disposable-event-listener";
+import { makeRef } from "../utils/make-ref";
 import { InputState } from "./input-state";
 import { LogicalFilterOperator } from "./logical-filter-operator";
-import { iconClear, iconSearch } from "@siemens/ix-icons/icons";
-import { makeRef } from "../utils/make-ref";
-import { addDisposableEventListener, } from "../utils/disposable-event-listener";
-import { a11yHostAttributes } from "../utils/a11y";
 export class CategoryFilter {
     constructor() {
         this.ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
@@ -58,6 +58,13 @@ export class CategoryFilter {
          * i18n label for 'Filter by text'
          */
         this.i18nPlainText = 'Filter by text';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
     }
     get dropdown() {
         return this.hostElement.shadowRoot.querySelector('ix-dropdown');
@@ -503,22 +510,22 @@ export class CategoryFilter {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '6040e5611b073b5df60b2f021a1fd6521a6de1df' }, h("form", { key: '4baf23174e46355ca7fbd5ecad14145cabaea8d5', ref: (el) => (this.formElement = el) }, h("div", { key: 'adecb78f948b498e0a9f42355ab590e2966958d1', "read-only": this.readonly, class: {
+        return (h(Host, { key: 'c9e7bdba1b9a6c9c368ff11d40ccf41883cc7d6d' }, h("form", { key: '1201a3a234a4c1c49f7897f1461dc9dcc7974c08', ref: (el) => (this.formElement = el) }, h("div", { key: 'f6330fac3e425656ec2e3c1511edd822c091829e', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: '4430f91076d6d7d04e1b9beea3a62877835b527f', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: 'aeaef4cf293c3b6c8baca478ec788ce33ecabfb6', class: "token-container" }, h("div", { key: 'd599d0c8173bef92c64ad71cff0e89dabc7fde99', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: 'dd3ba3a48b05fc1ac46e631c133fc58c0bd8b5bc', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: 'cb89410ee85d600ba5eb8708f635f1fb7324673d', class: "token-container" }, h("div", { key: 'b8b053df9ef5d6ac9db6a0e0c39d231943f7a96e', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: '43eac9a872f30a34780aa702c6905348649018b5', class: {
+            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: 'e589a93dc007d179d555e65fe655bb89d37f9e0a', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
-            }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));
+            }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader(), enableTopLayer: this.enableTopLayer }, this.renderDropdownContent()))));
     }
     static get is() { return "ix-category-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -861,6 +868,32 @@ export class CategoryFilter {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "enableTopLayer": {
+                "type": "boolean",
+                "attribute": "enable-top-layer",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "since",
+                            "text": "4.3.0"
+                        }],
+                    "text": "Enable Popover API rendering for dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }