@siemens/ix 0.0.0-pr-1974-20250624072317 → 0.0.0-pr-1974-20250627114851

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

@@ -1 +1 @@
-{"version":3,"file":"ix-pane.entry.js","sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n@mixin set-border($composition) {\n  @if $composition {\n    border-#{$composition}: var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr);\n  }\n}\n\n:host {\n  @include ix-component;\n  background-color: var(--theme-color-2);\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  aside {\n    width: 100%;\n    height: 100%;\n  }\n\n  .title-text {\n    display: flex;\n    align-items: center;\n    gap: var(--theme-space-1);\n    overflow: hidden;\n\n    .title-text-overflow {\n      width: 100%;\n      height: 100%;\n      display: contents;\n\n      * {\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n    }\n  }\n\n  .header-gap {\n    gap: var(--theme-space-1);\n  }\n\n  .top-bottom-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2);\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane {\n    display: flex;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin: var(--theme-space-2) var(--theme-space--1)  var(--theme-space-2) var(--theme-space--1);\n\n      .title-text {\n        flex-direction: row-reverse;\n        justify-content: start;\n        flex-direction: row;\n      }\n\n      .rotate {\n        writing-mode: vertical-lr;\n        text-orientation: mixed;\n        transform: rotate(180deg);\n        flex-direction: row-reverse;\n\n        ix-icon {\n          transform: rotate(90deg);\n        }\n      }\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane.expanded {\n    flex-direction: column;\n  }\n\n  .mobile-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title-mobile {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      margin: var(--theme-space-1) var(--theme-space-2);\n    }\n  }\n\n  .side-pane-content {\n    padding: var(--theme-space-1) var(--theme-space-2);\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n  }\n}\n\n:host(.not-visible) {\n  display: none;\n}\n\n:host(.inline-color) {\n  background-color: var(--theme-color-1);\n}\n\n:host(.box-shadow) {\n  box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n  border-left: var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr);\n}\n\n:host(.left-pane-border) {\n  @include set-border(right);\n}\n\n:host(.right-pane-border) {\n  @include set-border(left);\n}\n\n:host(.top-pane-border) {\n  @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n  @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n  width: 100%;\n  position: absolute;\n  z-index: 100 !important;\n\n  .side-pane-content {\n    height: calc(100% - 2.5rem);\n  }\n}\n\n:host(.mobile-border-top) {\n  @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n  @include set-border(top);\n}\n\n:host(.top-expanded) {\n  top: 0;\n}\n\n:host(.bottom-expanded) {\n  bottom: 0;\n}\n\n:host(.left-right-pane) {\n  height: 100%;\n}\n\n:host(.top-bottom-pane) {\n  width: 100%;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\nimport {\n  iconClose,\n  iconDoubleChevronDown,\n  iconDoubleChevronLeft,\n  iconDoubleChevronRight,\n  iconDoubleChevronUp,\n} from '@siemens/ix-icons/icons';\n\nexport type Composition = 'top' | 'left' | 'bottom' | 'right';\nexport type ExpandedChangedEvent = {\n  slot: string;\n  expanded: boolean;\n};\nexport type SlotChangedEvent = {\n  slot: string;\n  newSlot: string;\n};\nexport type HideOnCollapseChangedEvent = {\n  slot: string;\n  hideOnCollapse: boolean;\n};\nexport type VariantChangedEvent = {\n  slot: string;\n  variant: 'floating' | 'inline';\n};\nexport type BorderlessChangedEvent = {\n  slot: string;\n  borderless: boolean;\n};\n\n@Component({\n  tag: 'ix-pane',\n  styleUrl: 'pane.scss',\n  shadow: true,\n})\nexport class Pane {\n  @Element() hostElement!: HTMLIxPaneElement;\n\n  /**\n   * Title of the side panel\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Variant of the side pane.\n   * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n   */\n  @Prop() variant: 'floating' | 'inline' = 'inline';\n\n  /**\n   * Define if the pane should have a collapsed state\n   */\n  @Prop() hideOnCollapse: boolean = false;\n\n  /**\n   * The maximum size of the sidebar, when it is expanded\n   */\n  @Prop() size:\n    | '240px'\n    | '320px'\n    | '360px'\n    | '480px'\n    | '600px'\n    | '33%'\n    | '50%' = '240px';\n\n  /**\n   * Toggle the border of the pane.\n   * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n   */\n  @Prop() borderless: boolean = false;\n\n  /**\n   * State of the pane\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * Defines the position of the pane inside it's container.\n   * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n   */\n  @Prop({ mutable: true }) composition: Composition = 'top';\n\n  /**\n   * Name of the icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * @internal\n   * Prevents overwriting of the variant and borderless property when used inside layout\n   */\n  @Prop() ignoreLayoutSettings: boolean = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) isMobile: boolean = false;\n\n  /**\n   * This event is triggered when the pane either expands or contracts\n   */\n  @Event() expandedChanged!: EventEmitter<ExpandedChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() variantChanged!: EventEmitter<VariantChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() borderlessChanged!: EventEmitter<BorderlessChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() hideOnCollapseChanged!: EventEmitter<HideOnCollapseChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() slotChanged!: EventEmitter<SlotChangedEvent>;\n\n  @State() private expandIcon = '';\n  @State() private showContent = false;\n  @State() private minimizeIcon = '';\n  @State() private floating = false;\n  @State() private parentWidthPx = 0;\n  @State() private parentHeightPx = 0;\n\n  private static readonly validPositions = ['top', 'left', 'bottom', 'right'];\n  private static readonly collapsedPane = '40px';\n  private static readonly collapsedPaneMobile = '48px';\n  private readonly animations: Map<string, anime.AnimeInstance> = new Map();\n  private animationCounter = 0;\n\n  private mutationObserver?: MutationObserver;\n  private resizeObserver?: ResizeObserver;\n\n  get currentSlot() {\n    return this.hostElement.getAttribute('slot');\n  }\n\n  get isBottomTopPane() {\n    return this.composition === 'bottom' || this.composition === 'top';\n  }\n\n  get isLeftRightPane() {\n    return this.composition === 'left' || this.composition === 'right';\n  }\n\n  get isMobileTop() {\n    return this.composition === 'top' || this.composition === 'left';\n  }\n\n  componentWillLoad() {\n    this.setIcons();\n\n    this.floating = this.variant === 'floating';\n\n    if (this.expanded) {\n      this.onParentSizeChange();\n    }\n\n    this.isMobile = matchBreakpoint('sm');\n    applicationLayoutService.onChange.on(() => {\n      this.isMobile = matchBreakpoint('sm');\n    });\n\n    if (this.currentSlot) {\n      this.setPosition(this.currentSlot);\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'slot'\n        ) {\n          const newSlot = this.currentSlot;\n          const oldSlot = mutation.oldValue;\n\n          if (newSlot !== oldSlot) {\n            this.slotChanged.emit({\n              slot: oldSlot ?? '',\n              newSlot: newSlot ?? '',\n            });\n\n            if (newSlot) {\n              this.setPosition(newSlot);\n            }\n          }\n        }\n      });\n    });\n    this.mutationObserver.observe(this.hostElement, {\n      attributes: true,\n      attributeOldValue: true,\n    });\n\n    const parentElement = this.hostElement.parentElement;\n    this.resizeObserver = new ResizeObserver((entries) => {\n      this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n      this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n    });\n    if (parentElement) this.resizeObserver.observe(parentElement);\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  private setPosition(value: string) {\n    if (Pane.validPositions.includes(value)) {\n      this.composition = value as Composition;\n    }\n  }\n\n  private getExpandPaneSize() {\n    let expandPaneSize: string;\n\n    if (this.isBottomTopPane) {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentHeightPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n        }\n      }\n    } else {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentWidthPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n        }\n      }\n    }\n\n    return expandPaneSize;\n  }\n\n  private setIcons() {\n    const { expandIcon, minimizeIcon } = this.getIconNames();\n    this.expandIcon = expandIcon;\n    this.minimizeIcon = minimizeIcon;\n  }\n\n  private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n    let expandIcon = '';\n    let minimizeIcon = '';\n\n    switch (this.composition) {\n      case 'left':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        break;\n      case 'right':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        break;\n      case 'bottom':\n        expandIcon = iconDoubleChevronDown;\n        minimizeIcon = iconDoubleChevronUp;\n        break;\n      case 'top':\n        expandIcon = iconDoubleChevronUp;\n        minimizeIcon = iconDoubleChevronDown;\n        break;\n    }\n\n    return { expandIcon, minimizeIcon };\n  }\n\n  private getKey() {\n    return (this.animationCounter++).toString();\n  }\n\n  private animateVerticalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement,\n      duration: Animation.mediumTime,\n      width: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          this.animateVerticalPadding('0px');\n        } else {\n          this.animateVerticalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateHorizontalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement,\n      duration: Animation.mediumTime,\n      height: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          if (!this.isMobile) this.animateHorizontalPadding('0px');\n        } else {\n          if (!this.isMobile) this.animateHorizontalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private removePadding() {\n    anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: 0,\n      paddingTop: 0,\n      paddingBottom: 0,\n      paddingLeft: 0,\n      paddingRight: 0,\n      delay: 0,\n    });\n  }\n\n  private animateHorizontalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: duration,\n      paddingTop: size,\n      paddingBottom: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      complete: () => {\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateVerticalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: duration,\n      paddingLeft: size,\n      paddingRight: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      complete: () => {\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private clearAnimations() {\n    this.animations.forEach((animation) => animation.pause());\n    this.animations.clear();\n    this.animationCounter = 0;\n  }\n\n  @Watch('isMobile')\n  onMobileChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.hostElement.style.removeProperty('min-height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('composition')\n  onPositionChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('hideOnCollapse')\n  onHideOnCollapseChange(value: boolean) {\n    this.onParentSizeChange();\n\n    this.hideOnCollapseChanged.emit({\n      slot: this.currentSlot ?? '',\n      hideOnCollapse: value,\n    });\n  }\n\n  @Watch('variant')\n  onVariantChange(value: 'inline' | 'floating') {\n    this.floating = value === 'floating';\n\n    this.variantChanged.emit({\n      slot: this.currentSlot ?? '',\n      variant: value,\n    });\n  }\n\n  @Watch('borderless')\n  onBorderlessChange(value: boolean) {\n    this.borderlessChanged.emit({\n      slot: this.currentSlot ?? '',\n      borderless: value,\n    });\n  }\n\n  private dispatchExpandedChangedEvent() {\n    const event = this.expandedChanged.emit({\n      slot: this.currentSlot ?? '',\n      expanded: !this.expanded,\n    });\n\n    if (!event.defaultPrevented) {\n      this.expanded = !this.expanded;\n    }\n  }\n\n  @Watch('parentHeightPx')\n  @Watch('parentWidthPx')\n  onParentSizeChange() {\n    this.clearAnimations();\n    this.removePadding();\n\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.height = '100%';\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = expandPaneSize;\n          this.animateHorizontalPadding('8px', 0);\n        } else {\n          this.hostElement.style.width = expandPaneSize;\n          this.animateVerticalPadding('8px', 0);\n        }\n      }\n\n      this.showContent = true;\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        }\n      }\n    }\n  }\n\n  @Watch('expanded')\n  @Watch('size')\n  onSizeChange() {\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.minHeight = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n        this.animateHorizontalFadeIn('100%');\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateHorizontalFadeIn(expandPaneSize);\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateVerticalFadeIn(expandPaneSize);\n        }\n      }\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.animateHorizontalFadeIn(Pane.collapsedPane);\n        } else {\n          this.animateVerticalFadeIn(Pane.collapsedPane);\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'inline-color': !this.floating,\n          'mobile-overlay': this.expanded && this.isMobile,\n          'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n          'bottom-expanded':\n            this.expanded && !this.isMobileTop && this.isMobile,\n          'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n          'left-right-pane': this.isLeftRightPane && !this.isMobile,\n          [`${this.composition}-pane-border`]:\n            !this.borderless && !this.isMobile && !this.floating,\n          'nav-left-border':\n            !this.borderless &&\n            !this.isMobile &&\n            this.composition !== 'right' &&\n            this.floating,\n          'mobile-border-top':\n            !this.borderless &&\n            this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'mobile-border-bottom':\n            !this.borderless &&\n            !this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'box-shadow': this.floating,\n          'aria-expanded': this.expanded,\n          'not-visible': this.hideOnCollapse && !this.expanded,\n        }}\n      >\n        <aside\n          id={`pane-${this.composition}`}\n          class={{\n            'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n            'left-right-pane': this.isLeftRightPane && !this.isMobile,\n            'mobile-pane': this.isMobile,\n            expanded: this.expanded,\n          }}\n        >\n          <div\n            id=\"title-div\"\n            class={{\n              title:\n                !this.isMobile && !this.hideOnCollapse && !this.showContent,\n              'title-finished':\n                !this.isMobile && !this.hideOnCollapse && this.showContent,\n              'title-expanded':\n                !this.isMobile && !this.hideOnCollapse && this.expanded,\n              'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n              'title-mobile': this.isMobile,\n              'header-gap': !this.isMobile && !this.hideOnCollapse,\n            }}\n          >\n            <ix-icon-button\n              class=\"title-icon\"\n              size=\"24\"\n              icon={\n                this.expanded\n                  ? this.isMobile || this.hideOnCollapse\n                    ? iconClose\n                    : this.expandIcon\n                  : this.minimizeIcon\n              }\n              ghost\n              onClick={() => this.dispatchExpandedChangedEvent()}\n              aria-controls={`pane-${this.composition}`}\n            />\n            <span\n              class={{\n                'title-text': true,\n                rotate:\n                  !this.expanded && !this.isMobile && this.isLeftRightPane,\n              }}\n            >\n              {this.icon ? (\n                <ix-icon size=\"24\" name={this.icon}></ix-icon>\n              ) : null}\n              <div class=\"title-text-overflow\">\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              </div>\n            </span>\n          </div>\n          <div class=\"side-pane-content\" hidden={!this.showContent}>\n            <slot></slot>\n          </div>\n        </aside>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-pane.entry.js","sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n@mixin set-border($composition) {\n  @if $composition {\n    border-#{$composition}: var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr);\n  }\n}\n\n:host {\n  @include ix-component;\n  background-color: var(--theme-color-2);\n  display: flex;\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  aside {\n    width: 100%;\n    height: 100%;\n  }\n\n  .title-text {\n    display: flex;\n    align-items: center;\n    gap: var(--theme-space-1);\n    overflow: hidden;\n\n    .title-text-overflow {\n      width: 100%;\n      height: 100%;\n      display: contents;\n\n      * {\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        overflow: hidden;\n      }\n    }\n  }\n\n  .header-gap {\n    gap: var(--theme-space-1);\n  }\n\n  .top-bottom-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2);\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane {\n    display: flex;\n    flex-grow: 1;\n\n    .title {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin: var(--theme-space-2) var(--theme-space--1)  var(--theme-space-2) var(--theme-space--1);\n\n      .title-text {\n        flex-direction: row-reverse;\n        justify-content: start;\n        flex-direction: row;\n      }\n\n      .rotate {\n        writing-mode: vertical-lr;\n        text-orientation: mixed;\n        transform: rotate(180deg);\n        flex-direction: row-reverse;\n\n        ix-icon {\n          transform: rotate(90deg);\n        }\n      }\n    }\n\n    .title-finished {\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n\n    .title-expanded {\n      display: flex;\n      flex-direction: row;\n    }\n\n    .title-hide-on-collapse {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      padding: 0 !important;\n      margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n    }\n  }\n\n  .left-right-pane.expanded {\n    flex-direction: column;\n  }\n\n  .mobile-pane {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n\n    .title-mobile {\n      display: flex;\n      flex-direction: row-reverse;\n      justify-content: space-between;\n      margin: var(--theme-space-1) var(--theme-space-2);\n    }\n  }\n\n  .side-pane-content {\n    padding: var(--theme-space-1) var(--theme-space-2);\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n  }\n}\n\n:host(.not-visible) {\n  display: none;\n}\n\n:host(.inline-color) {\n  background-color: var(--theme-color-1);\n}\n\n:host(.box-shadow) {\n  box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n  border-left: var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr);\n}\n\n:host(.left-pane-border) {\n  @include set-border(right);\n}\n\n:host(.right-pane-border) {\n  @include set-border(left);\n}\n\n:host(.top-pane-border) {\n  @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n  @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n  width: 100%;\n  position: absolute;\n  z-index: 100 !important;\n\n  .side-pane-content {\n    height: calc(100% - 2.5rem);\n  }\n}\n\n:host(.mobile-border-top) {\n  @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n  @include set-border(top);\n}\n\n:host(.top-expanded) {\n  top: 0;\n}\n\n:host(.bottom-expanded) {\n  bottom: 0;\n}\n\n:host(.left-right-pane) {\n  height: 100%;\n}\n\n:host(.top-bottom-pane) {\n  width: 100%;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\nimport {\n  iconClose,\n  iconDoubleChevronDown,\n  iconDoubleChevronLeft,\n  iconDoubleChevronRight,\n  iconDoubleChevronUp,\n} from '@siemens/ix-icons/icons';\nimport type {\n  BorderlessChangedEvent,\n  Composition,\n  ExpandedChangedEvent,\n  HideOnCollapseChangedEvent,\n  SlotChangedEvent,\n  VariantChangedEvent,\n} from './pane.types';\n\n@Component({\n  tag: 'ix-pane',\n  styleUrl: 'pane.scss',\n  shadow: true,\n})\nexport class Pane {\n  @Element() hostElement!: HTMLIxPaneElement;\n\n  /**\n   * Title of the side panel\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Variant of the side pane.\n   * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n   */\n  @Prop() variant: 'floating' | 'inline' = 'inline';\n\n  /**\n   * Define if the pane should have a collapsed state\n   */\n  @Prop() hideOnCollapse: boolean = false;\n\n  /**\n   * The maximum size of the sidebar, when it is expanded\n   */\n  @Prop() size:\n    | '240px'\n    | '320px'\n    | '360px'\n    | '480px'\n    | '600px'\n    | '33%'\n    | '50%' = '240px';\n\n  /**\n   * Toggle the border of the pane.\n   * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n   */\n  @Prop() borderless: boolean = false;\n\n  /**\n   * State of the pane\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * Defines the position of the pane inside it's container.\n   * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n   */\n  @Prop({ mutable: true }) composition: Composition = 'top';\n\n  /**\n   * Name of the icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * @internal\n   * Prevents overwriting of the variant and borderless property when used inside layout\n   */\n  @Prop() ignoreLayoutSettings: boolean = false;\n\n  /**\n   * @internal\n   */\n  @Prop({ mutable: true }) isMobile: boolean = false;\n\n  /**\n   * This event is triggered when the pane either expands or contracts\n   */\n  @Event() expandedChanged!: EventEmitter<ExpandedChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() variantChanged!: EventEmitter<VariantChangedEvent>;\n\n  /**\n   * This event is triggered when the variant of the pane is changed\n   */\n  @Event() borderlessChanged!: EventEmitter<BorderlessChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() hideOnCollapseChanged!: EventEmitter<HideOnCollapseChangedEvent>;\n\n  /**\n   * @internal\n   */\n  @Event() slotChanged!: EventEmitter<SlotChangedEvent>;\n\n  @State() private expandIcon = '';\n  @State() private showContent = false;\n  @State() private minimizeIcon = '';\n  @State() private floating = false;\n  @State() private parentWidthPx = 0;\n  @State() private parentHeightPx = 0;\n\n  private static readonly validPositions = ['top', 'left', 'bottom', 'right'];\n  private static readonly collapsedPane = '40px';\n  private static readonly collapsedPaneMobile = '48px';\n  private readonly animations: Map<string, anime.AnimeInstance> = new Map();\n  private animationCounter = 0;\n\n  private mutationObserver?: MutationObserver;\n  private resizeObserver?: ResizeObserver;\n\n  get currentSlot() {\n    return this.hostElement.getAttribute('slot');\n  }\n\n  get isBottomTopPane() {\n    return this.composition === 'bottom' || this.composition === 'top';\n  }\n\n  get isLeftRightPane() {\n    return this.composition === 'left' || this.composition === 'right';\n  }\n\n  get isMobileTop() {\n    return this.composition === 'top' || this.composition === 'left';\n  }\n\n  componentWillLoad() {\n    this.setIcons();\n\n    this.floating = this.variant === 'floating';\n\n    if (this.expanded) {\n      this.onParentSizeChange();\n    }\n\n    this.isMobile = matchBreakpoint('sm');\n    applicationLayoutService.onChange.on(() => {\n      this.isMobile = matchBreakpoint('sm');\n    });\n\n    if (this.currentSlot) {\n      this.setPosition(this.currentSlot);\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === 'attributes' &&\n          mutation.attributeName === 'slot'\n        ) {\n          const newSlot = this.currentSlot;\n          const oldSlot = mutation.oldValue;\n\n          if (newSlot !== oldSlot) {\n            this.slotChanged.emit({\n              slot: oldSlot ?? '',\n              newSlot: newSlot ?? '',\n            });\n\n            if (newSlot) {\n              this.setPosition(newSlot);\n            }\n          }\n        }\n      });\n    });\n    this.mutationObserver.observe(this.hostElement, {\n      attributes: true,\n      attributeOldValue: true,\n    });\n\n    const parentElement = this.hostElement.parentElement;\n    this.resizeObserver = new ResizeObserver((entries) => {\n      this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n      this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n    });\n    if (parentElement) this.resizeObserver.observe(parentElement);\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n  }\n\n  private setPosition(value: string) {\n    if (Pane.validPositions.includes(value)) {\n      this.composition = value as Composition;\n    }\n  }\n\n  private getExpandPaneSize() {\n    let expandPaneSize: string;\n\n    if (this.isBottomTopPane) {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentHeightPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n        }\n      }\n    } else {\n      if (this.size.includes('px')) {\n        const referenceValue = Math.round(this.parentWidthPx / 2);\n        const currentValue = Number(this.size.replace('px', ''));\n\n        if (referenceValue && referenceValue < currentValue) {\n          expandPaneSize = `${referenceValue}px`;\n        } else {\n          expandPaneSize = `${currentValue}px`;\n        }\n      } else {\n        if (this.size === '50%') {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n        } else {\n          expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n        }\n      }\n    }\n\n    return expandPaneSize;\n  }\n\n  private setIcons() {\n    const { expandIcon, minimizeIcon } = this.getIconNames();\n    this.expandIcon = expandIcon;\n    this.minimizeIcon = minimizeIcon;\n  }\n\n  private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n    let expandIcon = '';\n    let minimizeIcon = '';\n\n    switch (this.composition) {\n      case 'left':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        break;\n      case 'right':\n        expandIcon = this.isMobile\n          ? iconDoubleChevronDown\n          : iconDoubleChevronRight;\n        minimizeIcon = this.isMobile\n          ? iconDoubleChevronUp\n          : iconDoubleChevronLeft;\n        break;\n      case 'bottom':\n        expandIcon = iconDoubleChevronDown;\n        minimizeIcon = iconDoubleChevronUp;\n        break;\n      case 'top':\n        expandIcon = iconDoubleChevronUp;\n        minimizeIcon = iconDoubleChevronDown;\n        break;\n    }\n\n    return { expandIcon, minimizeIcon };\n  }\n\n  private getKey() {\n    return (this.animationCounter++).toString();\n  }\n\n  private animateVerticalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement,\n      duration: Animation.mediumTime,\n      width: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          this.animateVerticalPadding('0px');\n        } else {\n          this.animateVerticalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateHorizontalFadeIn(size: string) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement,\n      duration: Animation.mediumTime,\n      height: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      begin: () => {\n        if (!this.expanded) {\n          this.showContent = false;\n          if (!this.isMobile) this.animateHorizontalPadding('0px');\n        } else {\n          if (!this.isMobile) this.animateHorizontalPadding('8px');\n        }\n      },\n      complete: () => {\n        if (this.expanded) {\n          this.showContent = true;\n        }\n\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private removePadding() {\n    anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: 0,\n      paddingTop: 0,\n      paddingBottom: 0,\n      paddingLeft: 0,\n      paddingRight: 0,\n      delay: 0,\n    });\n  }\n\n  private animateHorizontalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: duration,\n      paddingTop: size,\n      paddingBottom: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      complete: () => {\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private animateVerticalPadding(\n    size: string,\n    duration = Animation.mediumTime\n  ) {\n    let key = this.getKey();\n    let animation = anime({\n      targets: this.hostElement.shadowRoot!.querySelector('#title-div'),\n      duration: duration,\n      paddingLeft: size,\n      paddingRight: size,\n      easing: 'easeInOutSine',\n      delay: 0,\n      complete: () => {\n        this.animations.delete(key);\n      },\n    });\n\n    this.animations.set(key, animation);\n  }\n\n  private clearAnimations() {\n    this.animations.forEach((animation) => animation.pause());\n    this.animations.clear();\n    this.animationCounter = 0;\n  }\n\n  @Watch('isMobile')\n  onMobileChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.hostElement.style.removeProperty('min-height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('composition')\n  onPositionChange() {\n    this.setIcons();\n    this.hostElement.style.removeProperty('width');\n    this.hostElement.style.removeProperty('height');\n    this.onParentSizeChange();\n  }\n\n  @Watch('hideOnCollapse')\n  onHideOnCollapseChange(value: boolean) {\n    this.onParentSizeChange();\n\n    this.hideOnCollapseChanged.emit({\n      slot: this.currentSlot ?? '',\n      hideOnCollapse: value,\n    });\n  }\n\n  @Watch('variant')\n  onVariantChange(value: 'inline' | 'floating') {\n    this.floating = value === 'floating';\n\n    this.variantChanged.emit({\n      slot: this.currentSlot ?? '',\n      variant: value,\n    });\n  }\n\n  @Watch('borderless')\n  onBorderlessChange(value: boolean) {\n    this.borderlessChanged.emit({\n      slot: this.currentSlot ?? '',\n      borderless: value,\n    });\n  }\n\n  private dispatchExpandedChangedEvent() {\n    const event = this.expandedChanged.emit({\n      slot: this.currentSlot ?? '',\n      expanded: !this.expanded,\n    });\n\n    if (!event.defaultPrevented) {\n      this.expanded = !this.expanded;\n    }\n  }\n\n  @Watch('parentHeightPx')\n  @Watch('parentWidthPx')\n  onParentSizeChange() {\n    this.clearAnimations();\n    this.removePadding();\n\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.height = '100%';\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = expandPaneSize;\n          this.animateHorizontalPadding('8px', 0);\n        } else {\n          this.hostElement.style.width = expandPaneSize;\n          this.animateVerticalPadding('8px', 0);\n        }\n      }\n\n      this.showContent = true;\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n        }\n      }\n    }\n  }\n\n  @Watch('expanded')\n  @Watch('size')\n  onSizeChange() {\n    if (this.expanded) {\n      if (this.isMobile) {\n        this.hostElement.style.minHeight = this.hideOnCollapse\n          ? '0'\n          : Pane.collapsedPaneMobile;\n        this.animateHorizontalFadeIn('100%');\n      } else {\n        const expandPaneSize = this.getExpandPaneSize();\n\n        if (this.isBottomTopPane) {\n          this.hostElement.style.height = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateHorizontalFadeIn(expandPaneSize);\n        } else {\n          this.hostElement.style.width = this.hideOnCollapse\n            ? '0'\n            : Pane.collapsedPane;\n          this.animateVerticalFadeIn(expandPaneSize);\n        }\n      }\n    } else {\n      this.showContent = false;\n\n      if (this.isMobile) {\n        this.hostElement.style.height = Pane.collapsedPaneMobile;\n      } else {\n        if (this.isBottomTopPane) {\n          this.animateHorizontalFadeIn(Pane.collapsedPane);\n        } else {\n          this.animateVerticalFadeIn(Pane.collapsedPane);\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'inline-color': !this.floating,\n          'mobile-overlay': this.expanded && this.isMobile,\n          'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n          'bottom-expanded':\n            this.expanded && !this.isMobileTop && this.isMobile,\n          'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n          'left-right-pane': this.isLeftRightPane && !this.isMobile,\n          [`${this.composition}-pane-border`]:\n            !this.borderless && !this.isMobile && !this.floating,\n          'nav-left-border':\n            !this.borderless &&\n            !this.isMobile &&\n            this.composition !== 'right' &&\n            this.floating,\n          'mobile-border-top':\n            !this.borderless &&\n            this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'mobile-border-bottom':\n            !this.borderless &&\n            !this.isMobileTop &&\n            this.isMobile &&\n            !this.expanded &&\n            !this.floating,\n          'box-shadow': this.floating,\n          'aria-expanded': this.expanded,\n          'not-visible': this.hideOnCollapse && !this.expanded,\n        }}\n      >\n        <aside\n          id={`pane-${this.composition}`}\n          class={{\n            'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n            'left-right-pane': this.isLeftRightPane && !this.isMobile,\n            'mobile-pane': this.isMobile,\n            expanded: this.expanded,\n          }}\n        >\n          <div\n            id=\"title-div\"\n            class={{\n              title:\n                !this.isMobile && !this.hideOnCollapse && !this.showContent,\n              'title-finished':\n                !this.isMobile && !this.hideOnCollapse && this.showContent,\n              'title-expanded':\n                !this.isMobile && !this.hideOnCollapse && this.expanded,\n              'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n              'title-mobile': this.isMobile,\n              'header-gap': !this.isMobile && !this.hideOnCollapse,\n            }}\n          >\n            <ix-icon-button\n              class=\"title-icon\"\n              size=\"24\"\n              icon={\n                this.expanded\n                  ? this.isMobile || this.hideOnCollapse\n                    ? iconClose\n                    : this.expandIcon\n                  : this.minimizeIcon\n              }\n              ghost\n              onClick={() => this.dispatchExpandedChangedEvent()}\n              aria-controls={`pane-${this.composition}`}\n            />\n            <span\n              class={{\n                'title-text': true,\n                rotate:\n                  !this.expanded && !this.isMobile && this.isLeftRightPane,\n              }}\n            >\n              {this.icon ? (\n                <ix-icon size=\"24\" name={this.icon}></ix-icon>\n              ) : null}\n              <div class=\"title-text-overflow\">\n                <ix-typography format=\"h4\">{this.heading}</ix-typography>\n              </div>\n            </span>\n          </div>\n          <div class=\"side-pane-content\" hidden={!this.showContent}>\n            <slot></slot>\n          </div>\n        </aside>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { m as makeRef } from './make-ref-bcj7UEIC.js';
 
 const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}";
@@ -53,13 +53,13 @@ const Pill = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '0662b1d016904af48cd38b4da31b2d672898fb31', style: this.variant === 'custom'
+        return (h(Host, { key: '41b9f6f4870c8585f5bca24e469a5a99afd68012', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.pillColor,
                 }
                 : {}, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: '3ece1d029fc0daa09d834a71fdf1d7ac16122023', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '2674de0ba7ee68a9b38344cbc4b75cb10f778b3b', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -74,9 +74,9 @@ const Pill = class {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, this.icon && (h("ix-icon", { key: '489caa92bab68202d6544dc3e5e94ecd618d5f85', class: {
+            } }, this.icon && (h("ix-icon", { key: '412400a5ca6b85c730c097365fc2b437a3b7eb03', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '16' })), h("span", { key: 'dd77e86d3f75e0c4d1a7c18847891bfb6c036b5f', class: "slot-container" }, h("slot", { key: 'f206fd87c2c6ed8d77f56b473e36f9641aa046a8', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16' })), h("span", { key: '76689695f7d66f427eb59fcb57c413cd23622777', class: "slot-container" }, h("slot", { key: '2852c8a4cdf1f55e941fbe0091ad22ce73dc5cc5', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, F as Fragment, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { h, r as registerInstance, F as Fragment, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { T as iconCirclePause, c as iconSuccess, a as iconWarning, b as iconInfo, i as iconError } from './index-DLTnniMb.js';
 
 /*
@@ -133,14 +133,14 @@ const ProgressIndicator = class {
     render() {
         const normalizedValue = ((this.value - this.min) / (this.max - this.min)) * 100;
         const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
-        return (h(Host, { key: '3e8b999ad2d502491b323f1a4669db6ef7888f93', class: {
+        return (h(Host, { key: 'cc4c823745da737d65f73c5b5525a58c634ded43', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, h("div", { key: 'd84360ccaa9ab1e699e3606c6792d90ca5d09a58', class: {
+            }, tabIndex: -1 }, h("div", { key: 'aa5c1b618b24bccd01611fcd2cb99cf9d496e94b', class: {
                 'progress-indicator': true,
                 [this.size]: true,
                 [this.status]: true,
-            } }, this.label && (h("ix-typography", { key: '1b749c74a75653189ca8adbca4b91dcb23fb5b3d', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: '53d1d56bf0b9f519164fb1bf066e7a72052eb10b', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
+            } }, this.label && (h("ix-typography", { key: 'dd49d159c46f555a5e3385c361604d500477b9ba', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: '67f62d530de5dcc02f274aab3ddde419d56d383c', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ix-progress-indicator.entry.js","sources":["src/components/progress-indicator/linear.tsx","src/components/progress-indicator/circular.tsx","src/components/progress-indicator/progress-indicator.scss?tag=ix-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 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 { h } from '@stencil/core';\n\nexport function LinearBar({\n  value,\n}: Readonly<{\n  value: number;\n}>) {\n  return (\n    <div class=\"linear-progress-container\">\n      <div\n        class=\"progress\"\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={100}\n      >\n        <div\n          class={{\n            'progress-bar': true,\n          }}\n          style={{ width: `${value}%` }}\n          data-value={value}\n        ></div>\n      </div>\n    </div>\n  );\n}\n","/*\n * SPDX-FileCopyrightText: 2025 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 { h, type FunctionalComponent } from '@stencil/core';\nimport { ProgressIndicatorSize } from './progress-indicator';\n\nfunction getCircularSize(size: ProgressIndicatorSize) {\n  switch (size) {\n    case 'xs':\n      return 16;\n    case 'sm':\n      return 24;\n    case 'md':\n      return 32;\n    case 'lg':\n      return 48;\n    case 'xl':\n      return 64;\n    default:\n      return 32;\n  }\n}\n\nexport type CircularProgressProps = {\n  value: number;\n  size: ProgressIndicatorSize;\n};\n\nexport const CircularProgress: FunctionalComponent<CircularProgressProps> = (\n  props: Readonly<CircularProgressProps>,\n  children\n) => {\n  const { value, size } = props;\n  const sizeInPixel = getCircularSize(size);\n  const radius = sizeInPixel / 2;\n  const circumference = 2 * Math.PI * radius;\n  const percentage = Math.round(circumference * ((100 - value) / 100));\n\n  const slotInsideCircular = size === 'lg' || size === 'xl';\n\n  return (\n    <div class=\"circular-progress-container\">\n      <svg\n        width={sizeInPixel}\n        height={sizeInPixel}\n        viewBox={`-${sizeInPixel * 0.125} -${sizeInPixel * 0.125} ${\n          sizeInPixel * 1.25\n        } ${sizeInPixel * 1.25}`}\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ transform: 'rotate(-90deg)' }}\n      >\n        <circle\n          r={radius}\n          cx={radius}\n          cy={radius}\n          fill=\"transparent\"\n          stroke=\"var(--theme-color-component-4)\"\n          stroke-width={`3px`}\n        ></circle>\n        {percentage > 0 && (\n          <circle\n            r={radius}\n            cx={radius}\n            cy={radius}\n            stroke=\"var(--ix-progress-indicator-color)\"\n            stroke-width=\"3px\"\n            stroke-linecap=\"round\"\n            stroke-dashoffset={`${percentage}px`}\n            fill=\"transparent\"\n            stroke-dasharray={`${circumference}px`}\n          ></circle>\n        )}\n        <foreignObject\n          x={`0px`}\n          y={`0px`}\n          width={`${sizeInPixel}px`}\n          height={`${sizeInPixel}px`}\n          style={{\n            transform: `rotate(90deg) translate(0px, -${sizeInPixel}px)`,\n          }}\n        >\n          {slotInsideCircular && (\n            <div class=\"slotted-container slotted-container-inside\">\n              {children}\n            </div>\n          )}\n        </foreignObject>\n      </svg>\n      {!slotInsideCircular && <div class=\"slotted-container\">{children}</div>}\n    </div>\n  );\n};\n","/*\n * SPDX-FileCopyrightText: 2025 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@use './linear' as linear;\n@use './circular' as circular;\n\n:host {\n  display: block;\n  position: relative;\n  width: 24rem;\n  height: fit-content;\n\n  .progress-container {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: nowrap;\n  }\n\n  .label {\n    margin: 0.25rem 0px;\n  }\n\n  .helper-text {\n    display: flex;\n    align-items: flex-start;\n    margin: 0.25rem 0px;\n    gap: 0.25rem;\n\n    ix-icon {\n      margin: 0.125rem;\n    }\n\n    &.success {\n      ix-icon {\n        color: var(--theme-color-success);\n      }\n    }\n\n    &.error {\n      color: var(--theme-color-alarm-text);\n\n      ix-icon {\n        color: var(--theme-color-alarm);\n      }\n    }\n\n    &.info {\n      ix-icon {\n        color: var(--theme-color-info);\n      }\n    }\n\n    &.warning {\n      ix-icon {\n        color: var(--theme-color-warning);\n      }\n    }\n\n    &.paused {\n      ix-icon {\n        color: var(--theme-color-neutral);\n      }\n    }\n\n    &.text-left {\n      justify-content: flex-start;\n    }\n\n    &.text-right {\n      justify-content: flex-end;\n    }\n\n    &.text-center {\n      justify-content: center;\n    }\n  }\n\n  .progress-indicator {\n    --ix-progress-indicator-color: var(--theme-color-success);\n\n    height: 100%;\n\n    &.xs {\n      --ix-progress-indicator-height: 0.125rem;\n    }\n\n    &.sm {\n      --ix-progress-indicator-height: 0.25rem;\n    }\n\n    &.md {\n      --ix-progress-indicator-height: 0.5rem;\n    }\n\n    &.lg {\n      --ix-progress-indicator-height: 1rem;\n    }\n\n    &.xl {\n      --ix-progress-indicator-height: 1.5rem;\n    }\n\n    &.success {\n      --ix-progress-indicator-color: var(--theme-color-success);\n    }\n\n    &.error {\n      --ix-progress-indicator-color: var(--theme-color-alarm);\n    }\n\n    &.info {\n      --ix-progress-indicator-color: var(--theme-color-info);\n    }\n\n    &.warning {\n      --ix-progress-indicator-color: var(--theme-color-warning);\n    }\n\n    &.paused {\n      --ix-progress-indicator-color: var(--theme-color-neutral);\n    }\n  }\n}\n\n:host(.linear) {\n  .progress-indicator {\n    &.xs {\n      --ix-progress-indicator-height: 0.125rem;\n    }\n\n    &.sm {\n      --ix-progress-indicator-height: 0.25rem;\n    }\n\n    &.md {\n      --ix-progress-indicator-height: 0.5rem;\n    }\n\n    &.lg {\n      --ix-progress-indicator-height: 1rem;\n    }\n\n    &.xl {\n      --ix-progress-indicator-height: 1.5rem;\n    }\n  }\n\n  @include linear.linear;\n\n  .linear-slot {\n    min-width: 2.25rem;\n  }\n}\n\n:host(.circular) {\n  @include circular.circular;\n}\n","/*\n * SPDX-FileCopyrightText: 2025 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 { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport { LinearBar } from './linear';\nimport {\n  iconCirclePause,\n  iconError,\n  iconInfo,\n  iconSuccess,\n  iconWarning,\n} from '@siemens/ix-icons/icons';\nimport { CircularProgress } from './circular';\n\nexport type ProgressIndicatorSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * @since 3.2.0\n */\n@Component({\n  tag: 'ix-progress-indicator',\n  styleUrl: 'progress-indicator.scss',\n  shadow: true,\n})\nexport class ProgressIndicator {\n  @Element() hostElement!: HTMLIxProgressIndicatorElement;\n\n  /**\n   * The type of progress indicator to use.\n   */\n  @Prop() type: 'linear' | 'circular' = 'linear';\n\n  /**\n   * The size of the progress indicator.\n   */\n  @Prop() size: ProgressIndicatorSize = 'md';\n\n  /**\n   * The value of the progress indicator.\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The minimum value of the progress indicator.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value of the progress indicator.\n   */\n  @Prop() max: number = 100;\n\n  /**\n   * The state of the progress indicator.\n   * This is used to indicate the current state of the progress indicator.\n   */\n  @Prop() status:\n    | 'default'\n    | 'success'\n    | 'error'\n    | 'info'\n    | 'warning'\n    | 'paused' = 'default';\n\n  /**\n   * The label for the progress indicator.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The helper text for the progress indicator.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The text alignment for the helper text.\n   * Can be 'left', 'center', or 'right'.\n   */\n  @Prop() textAlignment: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Show the helper text as a tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  private getHelperText() {\n    let icon: string | null = null;\n\n    switch (this.status) {\n      case 'error':\n        icon = iconError;\n        break;\n      case 'info':\n        icon = iconInfo;\n        break;\n      case 'warning':\n        icon = iconWarning;\n        break;\n      case 'success':\n        icon = iconSuccess;\n        break;\n      case 'paused':\n        icon = iconCirclePause;\n        break;\n      default:\n        icon = null;\n    }\n\n    if (!this.helperText) {\n      return <slot name=\"helper-text\"></slot>;\n    }\n\n    return (\n      <div\n        class={{\n          'helper-text': true,\n          [this.status]: true,\n          'text-left': this.textAlignment === 'left',\n          'text-center': this.textAlignment === 'center',\n          'text-right': this.textAlignment === 'right',\n        }}\n      >\n        {icon && <ix-icon name={icon} size=\"16\"></ix-icon>}\n        <div class=\"text\">{this.helperText}</div>\n        <slot name=\"helper-text\"></slot>\n      </div>\n    );\n  }\n\n  render() {\n    const normalizedValue =\n      ((this.value - this.min) / (this.max - this.min)) * 100;\n\n    const clampedValue = Math.max(0, Math.min(normalizedValue, 100));\n\n    return (\n      <Host\n        class={{\n          linear: this.type === 'linear',\n          circular: this.type === 'circular',\n        }}\n        tabIndex={-1}\n      >\n        <div\n          class={{\n            'progress-indicator': true,\n            [this.size]: true,\n            [this.status]: true,\n          }}\n        >\n          {this.label && (\n            <ix-typography\n              format=\"label\"\n              textColor={this.status === 'error' ? 'alarm' : 'soft'}\n              class={'label'}\n            >\n              {this.label}\n            </ix-typography>\n          )}\n\n          <div class=\"progress-container\">\n            {this.type === 'linear' ? (\n              <Fragment>\n                <LinearBar value={clampedValue}></LinearBar>\n                <div class=\"linear-slot\">\n                  <slot></slot>\n                </div>\n              </Fragment>\n            ) : (\n              <CircularProgress value={clampedValue} size={this.size}>\n                <slot></slot>\n              </CircularProgress>\n            )}\n          </div>\n          {this.showTextAsTooltip === true && this.helperText ? (\n            <ix-tooltip\n              for={this.hostElement}\n              showDelay={500}\n              placement=\"bottom\"\n            >\n              {this.getHelperText()}\n            </ix-tooltip>\n          ) : (\n            this.getHelperText()\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-progress-indicator.entry.js","sources":["src/components/progress-indicator/linear.tsx","src/components/progress-indicator/circular.tsx","src/components/progress-indicator/progress-indicator.scss?tag=ix-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 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 { h } from '@stencil/core';\n\nexport function LinearBar({\n  value,\n}: Readonly<{\n  value: number;\n}>) {\n  return (\n    <div class=\"linear-progress-container\">\n      <div\n        class=\"progress\"\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={100}\n      >\n        <div\n          class={{\n            'progress-bar': true,\n          }}\n          style={{ width: `${value}%` }}\n          data-value={value}\n        ></div>\n      </div>\n    </div>\n  );\n}\n","/*\n * SPDX-FileCopyrightText: 2025 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 { h, type FunctionalComponent } from '@stencil/core';\nimport type { ProgressIndicatorSize } from './progress-indicator.types';\n\nfunction getCircularSize(size: ProgressIndicatorSize) {\n  switch (size) {\n    case 'xs':\n      return 16;\n    case 'sm':\n      return 24;\n    case 'md':\n      return 32;\n    case 'lg':\n      return 48;\n    case 'xl':\n      return 64;\n    default:\n      return 32;\n  }\n}\n\nexport type CircularProgressProps = {\n  value: number;\n  size: ProgressIndicatorSize;\n};\n\nexport const CircularProgress: FunctionalComponent<CircularProgressProps> = (\n  props: Readonly<CircularProgressProps>,\n  children\n) => {\n  const { value, size } = props;\n  const sizeInPixel = getCircularSize(size);\n  const radius = sizeInPixel / 2;\n  const circumference = 2 * Math.PI * radius;\n  const percentage = Math.round(circumference * ((100 - value) / 100));\n\n  const slotInsideCircular = size === 'lg' || size === 'xl';\n\n  return (\n    <div class=\"circular-progress-container\">\n      <svg\n        width={sizeInPixel}\n        height={sizeInPixel}\n        viewBox={`-${sizeInPixel * 0.125} -${sizeInPixel * 0.125} ${\n          sizeInPixel * 1.25\n        } ${sizeInPixel * 1.25}`}\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ transform: 'rotate(-90deg)' }}\n      >\n        <circle\n          r={radius}\n          cx={radius}\n          cy={radius}\n          fill=\"transparent\"\n          stroke=\"var(--theme-color-component-4)\"\n          stroke-width={`3px`}\n        ></circle>\n        {percentage > 0 && (\n          <circle\n            r={radius}\n            cx={radius}\n            cy={radius}\n            stroke=\"var(--ix-progress-indicator-color)\"\n            stroke-width=\"3px\"\n            stroke-linecap=\"round\"\n            stroke-dashoffset={`${percentage}px`}\n            fill=\"transparent\"\n            stroke-dasharray={`${circumference}px`}\n          ></circle>\n        )}\n        <foreignObject\n          x={`0px`}\n          y={`0px`}\n          width={`${sizeInPixel}px`}\n          height={`${sizeInPixel}px`}\n          style={{\n            transform: `rotate(90deg) translate(0px, -${sizeInPixel}px)`,\n          }}\n        >\n          {slotInsideCircular && (\n            <div class=\"slotted-container slotted-container-inside\">\n              {children}\n            </div>\n          )}\n        </foreignObject>\n      </svg>\n      {!slotInsideCircular && <div class=\"slotted-container\">{children}</div>}\n    </div>\n  );\n};\n","/*\n * SPDX-FileCopyrightText: 2025 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@use './linear' as linear;\n@use './circular' as circular;\n\n:host {\n  display: block;\n  position: relative;\n  width: 24rem;\n  height: fit-content;\n\n  .progress-container {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: nowrap;\n  }\n\n  .label {\n    margin: 0.25rem 0px;\n  }\n\n  .helper-text {\n    display: flex;\n    align-items: flex-start;\n    margin: 0.25rem 0px;\n    gap: 0.25rem;\n\n    ix-icon {\n      margin: 0.125rem;\n    }\n\n    &.success {\n      ix-icon {\n        color: var(--theme-color-success);\n      }\n    }\n\n    &.error {\n      color: var(--theme-color-alarm-text);\n\n      ix-icon {\n        color: var(--theme-color-alarm);\n      }\n    }\n\n    &.info {\n      ix-icon {\n        color: var(--theme-color-info);\n      }\n    }\n\n    &.warning {\n      ix-icon {\n        color: var(--theme-color-warning);\n      }\n    }\n\n    &.paused {\n      ix-icon {\n        color: var(--theme-color-neutral);\n      }\n    }\n\n    &.text-left {\n      justify-content: flex-start;\n    }\n\n    &.text-right {\n      justify-content: flex-end;\n    }\n\n    &.text-center {\n      justify-content: center;\n    }\n  }\n\n  .progress-indicator {\n    --ix-progress-indicator-color: var(--theme-color-success);\n\n    height: 100%;\n\n    &.xs {\n      --ix-progress-indicator-height: 0.125rem;\n    }\n\n    &.sm {\n      --ix-progress-indicator-height: 0.25rem;\n    }\n\n    &.md {\n      --ix-progress-indicator-height: 0.5rem;\n    }\n\n    &.lg {\n      --ix-progress-indicator-height: 1rem;\n    }\n\n    &.xl {\n      --ix-progress-indicator-height: 1.5rem;\n    }\n\n    &.success {\n      --ix-progress-indicator-color: var(--theme-color-success);\n    }\n\n    &.error {\n      --ix-progress-indicator-color: var(--theme-color-alarm);\n    }\n\n    &.info {\n      --ix-progress-indicator-color: var(--theme-color-info);\n    }\n\n    &.warning {\n      --ix-progress-indicator-color: var(--theme-color-warning);\n    }\n\n    &.paused {\n      --ix-progress-indicator-color: var(--theme-color-neutral);\n    }\n  }\n}\n\n:host(.linear) {\n  .progress-indicator {\n    &.xs {\n      --ix-progress-indicator-height: 0.125rem;\n    }\n\n    &.sm {\n      --ix-progress-indicator-height: 0.25rem;\n    }\n\n    &.md {\n      --ix-progress-indicator-height: 0.5rem;\n    }\n\n    &.lg {\n      --ix-progress-indicator-height: 1rem;\n    }\n\n    &.xl {\n      --ix-progress-indicator-height: 1.5rem;\n    }\n  }\n\n  @include linear.linear;\n\n  .linear-slot {\n    min-width: 2.25rem;\n  }\n}\n\n:host(.circular) {\n  @include circular.circular;\n}\n","/*\n * SPDX-FileCopyrightText: 2025 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 { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport { LinearBar } from './linear';\nimport {\n  iconCirclePause,\n  iconError,\n  iconInfo,\n  iconSuccess,\n  iconWarning,\n} from '@siemens/ix-icons/icons';\nimport { CircularProgress } from './circular';\nimport type { ProgressIndicatorSize } from './progress-indicator.types';\n\n/**\n * @since 3.2.0\n */\n@Component({\n  tag: 'ix-progress-indicator',\n  styleUrl: 'progress-indicator.scss',\n  shadow: true,\n})\nexport class ProgressIndicator {\n  @Element() hostElement!: HTMLIxProgressIndicatorElement;\n\n  /**\n   * The type of progress indicator to use.\n   */\n  @Prop() type: 'linear' | 'circular' = 'linear';\n\n  /**\n   * The size of the progress indicator.\n   */\n  @Prop() size: ProgressIndicatorSize = 'md';\n\n  /**\n   * The value of the progress indicator.\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The minimum value of the progress indicator.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value of the progress indicator.\n   */\n  @Prop() max: number = 100;\n\n  /**\n   * The state of the progress indicator.\n   * This is used to indicate the current state of the progress indicator.\n   */\n  @Prop() status:\n    | 'default'\n    | 'success'\n    | 'error'\n    | 'info'\n    | 'warning'\n    | 'paused' = 'default';\n\n  /**\n   * The label for the progress indicator.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The helper text for the progress indicator.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The text alignment for the helper text.\n   * Can be 'left', 'center', or 'right'.\n   */\n  @Prop() textAlignment: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Show the helper text as a tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  private getHelperText() {\n    let icon: string | null = null;\n\n    switch (this.status) {\n      case 'error':\n        icon = iconError;\n        break;\n      case 'info':\n        icon = iconInfo;\n        break;\n      case 'warning':\n        icon = iconWarning;\n        break;\n      case 'success':\n        icon = iconSuccess;\n        break;\n      case 'paused':\n        icon = iconCirclePause;\n        break;\n      default:\n        icon = null;\n    }\n\n    if (!this.helperText) {\n      return <slot name=\"helper-text\"></slot>;\n    }\n\n    return (\n      <div\n        class={{\n          'helper-text': true,\n          [this.status]: true,\n          'text-left': this.textAlignment === 'left',\n          'text-center': this.textAlignment === 'center',\n          'text-right': this.textAlignment === 'right',\n        }}\n      >\n        {icon && <ix-icon name={icon} size=\"16\"></ix-icon>}\n        <div class=\"text\">{this.helperText}</div>\n        <slot name=\"helper-text\"></slot>\n      </div>\n    );\n  }\n\n  render() {\n    const normalizedValue =\n      ((this.value - this.min) / (this.max - this.min)) * 100;\n\n    const clampedValue = Math.max(0, Math.min(normalizedValue, 100));\n\n    return (\n      <Host\n        class={{\n          linear: this.type === 'linear',\n          circular: this.type === 'circular',\n        }}\n        tabIndex={-1}\n      >\n        <div\n          class={{\n            'progress-indicator': true,\n            [this.size]: true,\n            [this.status]: true,\n          }}\n        >\n          {this.label && (\n            <ix-typography\n              format=\"label\"\n              textColor={this.status === 'error' ? 'alarm' : 'soft'}\n              class={'label'}\n            >\n              {this.label}\n            </ix-typography>\n          )}\n\n          <div class=\"progress-container\">\n            {this.type === 'linear' ? (\n              <Fragment>\n                <LinearBar value={clampedValue}></LinearBar>\n                <div class=\"linear-slot\">\n                  <slot></slot>\n                </div>\n              </Fragment>\n            ) : (\n              <CircularProgress value={clampedValue} size={this.size}>\n                <slot></slot>\n              </CircularProgress>\n            )}\n          </div>\n          {this.showTextAsTooltip === true && this.helperText ? (\n            <ix-tooltip\n              for={this.hostElement}\n              showDelay={500}\n              placement=\"bottom\"\n            >\n              {this.getHelperText()}\n            </ix-tooltip>\n          ) : (\n            this.getHelperText()\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA;;;;;;;AAOG;AAGa,SAAA,SAAS,CAAC,EACxB,KAAK,GAGL,EAAA;AACA,IAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,2BAA2B,EAAA;AACpC,QAAA,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,KAAK,EAAA,eAAA,EACL,CAAC,EAAA,eAAA,EACD,GAAG,EAAA;AAElB,YAAA,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,oBAAA,cAAc,EAAE,IAAI;AACrB,iBAAA,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,KAAK,CAAG,CAAA,CAAA,EAAE,gBACjB,KAAK,EAAA,CACZ,CACH,CACF;AAEV;;AClCA;;;;;;;AAOG;AAIH,SAAS,eAAe,CAAC,IAA2B,EAAA;IAClD,QAAQ,IAAI;AACV,QAAA,KAAK,IAAI;AACP,YAAA,OAAO,EAAE;AACX,QAAA,KAAK,IAAI;AACP,YAAA,OAAO,EAAE;AACX,QAAA,KAAK,IAAI;AACP,YAAA,OAAO,EAAE;AACX,QAAA,KAAK,IAAI;AACP,YAAA,OAAO,EAAE;AACX,QAAA,KAAK,IAAI;AACP,YAAA,OAAO,EAAE;AACX,QAAA;AACE,YAAA,OAAO,EAAE;;AAEf;AAOO,MAAM,gBAAgB,GAA+C,CAC1E,KAAsC,EACtC,QAAQ,KACN;AACF,IAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK;AAC7B,IAAA,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC;AACzC,IAAA,MAAM,MAAM,GAAG,WAAW,GAAG,CAAC;IAC9B,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM;AAC1C,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,GAAG,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;IAEpE,MAAM,kBAAkB,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI;AAEzD,IAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA;AACtC,QAAA,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,CAAI,CAAA,EAAA,WAAW,GAAG,KAAK,CAAA,EAAA,EAAK,WAAW,GAAG,KAAK,IACtD,WAAW,GAAG,IAChB,CAAA,CAAA,EAAI,WAAW,GAAG,IAAI,EAAE,EACxB,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAA;YAEtC,CACE,CAAA,QAAA,EAAA,EAAA,CAAC,EAAE,MAAM,EACT,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,IAAI,EAAC,aAAa,EAClB,MAAM,EAAC,gCAAgC,EACzB,cAAA,EAAA,CAAA,GAAA,CAAK,EACX,CAAA;AACT,YAAA,UAAU,GAAG,CAAC,KACb,CAAA,CAAA,QAAA,EAAA,EACE,CAAC,EAAE,MAAM,EACT,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAC,oCAAoC,kBAC9B,KAAK,EAAA,gBAAA,EACH,OAAO,EAAA,mBAAA,EACH,GAAG,UAAU,CAAA,EAAA,CAAI,EACpC,IAAI,EAAC,aAAa,EAAA,kBAAA,EACA,GAAG,aAAa,CAAA,EAAA,CAAI,GAC9B,CACX;YACD,CACE,CAAA,eAAA,EAAA,EAAA,CAAC,EAAE,CAAK,GAAA,CAAA,EACR,CAAC,EAAE,CAAA,GAAA,CAAK,EACR,KAAK,EAAE,GAAG,WAAW,CAAA,EAAA,CAAI,EACzB,MAAM,EAAE,GAAG,WAAW,CAAA,EAAA,CAAI,EAC1B,KAAK,EAAE;oBACL,SAAS,EAAE,CAAiC,8BAAA,EAAA,WAAW,CAAK,GAAA,CAAA;AAC7D,iBAAA,EAAA,EAEA,kBAAkB,KACjB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4CAA4C,EAAA,EACpD,QAAQ,CACL,CACP,CACa,CACZ;QACL,CAAC,kBAAkB,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAAE,QAAQ,CAAO,CACnE;AAEV,CAAC;;ACjGD,MAAM,oBAAoB,GAAG,8yFAA8yF;;MC4B9zF,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAA0B,QAAQ;AAE9C;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAA0B,IAAI;AAE1C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEzB;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAAW,CAAC;AAEvB;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAAW,GAAG;AAEzB;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAMC,SAAS;AAYxB;;;AAGG;AACK,QAAA,IAAa,CAAA,aAAA,GAAgC,MAAM;AAE3D;;AAEG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAY,KAAK;AA0G3C;IAxGS,aAAa,GAAA;QACnB,IAAI,IAAI,GAAkB,IAAI;AAE9B,QAAA,QAAQ,IAAI,CAAC,MAAM;AACjB,YAAA,KAAK,OAAO;gBACV,IAAI,GAAG,SAAS;gBAChB;AACF,YAAA,KAAK,MAAM;gBACT,IAAI,GAAG,QAAQ;gBACf;AACF,YAAA,KAAK,SAAS;gBACZ,IAAI,GAAG,WAAW;gBAClB;AACF,YAAA,KAAK,SAAS;gBACZ,IAAI,GAAG,WAAW;gBAClB;AACF,YAAA,KAAK,QAAQ;gBACX,IAAI,GAAG,eAAe;gBACtB;AACF,YAAA;gBACE,IAAI,GAAG,IAAI;;AAGf,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,GAAQ;;AAGzC,QAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;AACnB,gBAAA,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI;AACnB,gBAAA,WAAW,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;AAC1C,gBAAA,aAAa,EAAE,IAAI,CAAC,aAAa,KAAK,QAAQ;AAC9C,gBAAA,YAAY,EAAE,IAAI,CAAC,aAAa,KAAK,OAAO;aAC7C,EAAA,EAEA,IAAI,IAAI,eAAS,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAW,CAAA,EAClD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,UAAU,CAAO,EACzC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,aAAa,EAAQ,CAAA,CAC5B;;IAIV,MAAM,GAAA;QACJ,MAAM,eAAe,GACnB,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG;AAEzD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC;QAEhE,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AAC9B,gBAAA,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;AACnC,aAAA,EACD,QAAQ,EAAE,EAAE,EAAA,EAEZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,oBAAoB,EAAE,IAAI;AAC1B,gBAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;AACjB,gBAAA,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI;AACpB,aAAA,EAAA,EAEA,IAAI,CAAC,KAAK,KACT,sEACE,MAAM,EAAC,OAAO,EACd,SAAS,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,OAAO,GAAG,MAAM,EACrD,KAAK,EAAE,OAAO,EAEb,EAAA,IAAI,CAAC,KAAK,CACG,CACjB,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK,QAAQ,IACrB,EAAC,QAAQ,EAAA,IAAA,EACP,CAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,YAAY,EAAc,CAAA,EAC5C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACT,CACG,KAEX,CAAC,CAAA,gBAAgB,EAAC,EAAA,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,EACpD,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACI,CACpB,CACG,EACL,IAAI,CAAC,iBAAiB,KAAK,IAAI,IAAI,IAAI,CAAC,UAAU,IACjD,CAAA,CAAA,YAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,SAAS,EAAE,GAAG,EACd,SAAS,EAAC,QAAQ,EAEjB,EAAA,IAAI,CAAC,aAAa,EAAE,CACV,KAEb,IAAI,CAAC,aAAa,EAAE,CACrB,CACG,CACD;;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-B6NtGPRE.js';
+import { r as registerInstance, h, H as Host } from './index-DJsXFBNm.js';
 
 const pushCardCss = ":host{display:block;position:relative}:host ix-card{cursor:default}:host ix-card-accordion{cursor:pointer}:host .icon{height:2.5rem;width:2.5rem}:host .notification{font-size:40px}:host ix-card-content{height:11rem}";
 
@@ -16,7 +16,7 @@ const PushCard = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '551eaf59756a26404f08550ffd581c1d2a5ec6cb' }, h("ix-card", { key: '234c25fbff11612a41cf7195375388a1e04dd2cf', variant: this.variant }, h("ix-card-content", { key: 'b71305f3dc0309a7861c14a4315f65eebe1ffb2c' }, h("ix-card-title", { key: 'e0eaa51dc09a29d8b58a08f5cc49c7b8fb5f423b' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: '2004b4d4678c4ee82446c0a0e2aa53e4f49d4b99', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '6e3e664070520558f015007d68ea0bb6e229fcde', name: "title-action" })), h("ix-typography", { key: '2955264ba26f4794d5d917127d5f9394ab2242e6', format: "h4" }, this.heading), h("ix-typography", { key: '0b4ce54a5dce834ffeb5fe8b5a369a1839e2f300' }, this.subheading)), h("ix-card-accordion", { key: '9061ab3e0ead9f5d6c272b718c81ad7efdd1d18d', collapse: this.collapse }, h("slot", { key: '2117cbc308f825d5b45e1ecaf7fd83f4b0e9e798' })))));
+        return (h(Host, { key: 'bf65467fcb8c46c5c28ca769becf1894e863bc21' }, h("ix-card", { key: '4ab2834af82584ade5c817264fa1f0158c7a7ffe', variant: this.variant }, h("ix-card-content", { key: '8490ac958852a9c8658194eb2f425c52fb067e0a' }, h("ix-card-title", { key: '0093f02be724a2933a05d11af61601765ca9565b' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: '76a1da65e71606c836ba199de2d180d8d9b21695', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: 'ad9a4fe6a866f3d58fb51ffd5c4824185dd8f474', name: "title-action" })), h("ix-typography", { key: '5fd43752ce21b27fc89392db9925b09378fdd0c9', format: "h4" }, this.heading), h("ix-typography", { key: '1ca4ff340ab8420892521ffd056933f2198d9474' }, this.subheading)), h("ix-card-accordion", { key: '938b5f0882878e7dbebe22cc025fa2ce6a4ad701', collapse: this.collapse }, h("slot", { key: '349bb34de52513c0564cf1025679a10035c9343a' })))));
     }
 };
 PushCard.style = pushCardCss;

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

@@ -1 +1 @@
-{"version":3,"file":"ix-push-card.entry.js","sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  position: relative;\n\n  ix-card {\n    cursor: default;\n  }\n\n  ix-card-accordion {\n    cursor: pointer;\n  }\n\n  .icon {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n\n  .notification {\n    font-size: 40px;\n  }\n\n  ix-card-content {\n    height: 11rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\n\nexport type PushCardVariant = CardVariant;\n\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification?: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'outline';\n\n  /**\n   * Collapse the card\n   */\n  @Prop() collapse: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-content>\n            <ix-card-title>\n              {this.icon ? (\n                <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n              ) : null}\n              <span class={'notification'}>{this.notification ?? 0}</span>\n              <slot name=\"title-action\"></slot>\n            </ix-card-title>\n            <ix-typography format=\"h4\">{this.heading}</ix-typography>\n            <ix-typography>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion collapse={this.collapse}>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,yNAAyN;;MCmBhO,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AA0BE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAoB,SAAS;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AAwBjC;IAtBC,MAAM,GAAA;;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC5B,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,IACR,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAW,IAC3D,IAAI,EACR,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAG,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC,CAAQ,EAC5D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAQ,CACnB,EAChB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,EACzD,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAgB,IAAI,CAAC,UAAU,CAAiB,CAChC,EAClB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACK,CACZ,CACL;;;;;;;"}
+{"version":3,"file":"ix-push-card.entry.js","sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  position: relative;\n\n  ix-card {\n    cursor: default;\n  }\n\n  ix-card-accordion {\n    cursor: pointer;\n  }\n\n  .icon {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n\n  .notification {\n    font-size: 40px;\n  }\n\n  ix-card-content {\n    height: 11rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { PushCardVariant } from './push-card.types';\n\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification?: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'outline';\n\n  /**\n   * Collapse the card\n   */\n  @Prop() collapse: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-content>\n            <ix-card-title>\n              {this.icon ? (\n                <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n              ) : null}\n              <span class={'notification'}>{this.notification ?? 0}</span>\n              <slot name=\"title-action\"></slot>\n            </ix-card-title>\n            <ix-typography format=\"h4\">{this.heading}</ix-typography>\n            <ix-typography>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion collapse={this.collapse}>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,yNAAyN;;MCiBhO,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AA0BE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAoB,SAAS;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AAwBjC;IAtBC,MAAM,GAAA;;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC5B,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,IACR,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAW,IAC3D,IAAI,EACR,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAG,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC,CAAQ,EAC5D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAQ,CACnB,EAChB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,EACzD,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAgB,IAAI,CAAC,UAAU,CAAiB,CAChC,EAClB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACK,CACZ,CACL;;;;;;;"}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B6NtGPRE.js';
-import { H as HookValidationLifecycle } from './validation-DuPOpjMi.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DJsXFBNm.js';
+import { H as HookValidationLifecycle } from './validation-gQpVWmEm.js';
 import { m as makeRef } from './make-ref-bcj7UEIC.js';
 
 const radioGroupCss = ":host{display:inline-block;position:relative}:host .checkbox-container{display:flex;flex-direction:column;gap:1rem;margin:0.375rem 0;flex-wrap:wrap}:host .checkbox-container.row-layout{flex-direction:row}";
@@ -111,10 +111,10 @@ const RadiobuttonGroup = class {
         return Promise.resolve(this.touched);
     }
     render() {
-        return (h(Host, { key: 'df02d0574b1201f9dc2e4ffc0cca3b796ab38a26', onIxBlur: () => (this.touched = true), ref: this.groupRef }, h("ix-field-wrapper", { key: '69166196117663244ea5dd946238b9429a71e467', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: 'dcea2d79018de3bb2b6d74e650964b37eb33f67a', class: {
+        return (h(Host, { key: '0cadba0159ce31d3c7976745b2587e65c4a3790b', onIxBlur: () => (this.touched = true), ref: this.groupRef }, h("ix-field-wrapper", { key: 'f271cb0195f0a6a3f30ba2d7d76b15724b5508f2', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '735a66afc8ffb20ebd91064e2417f3fd7a225eaa', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '4a2a181e1fd167681e7d43d70072a6bd8d5761d2' })))));
+            } }, h("slot", { key: 'b60868dae49bfe14593be563bd8c66d5f7a2ecb2' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { m as makeRef } from './make-ref-bcj7UEIC.js';
-import { c as createClassMutationObserver } from './validation-DuPOpjMi.js';
+import { c as createClassMutationObserver } from './validation-gQpVWmEm.js';
 import { a as a11yBoolean } from './a11y-Bb7pDeaQ.js';
 
 const radioCss = ":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;border:1px solid white;border-radius:100px;margin-right:0.5rem}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-radiobtn--focus--outline-offset)}:host input[type=radio]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%}:host .checkmark{border-radius:100px;background-color:var(--theme-color-primary--contrast);width:0.5rem;height:0.5rem}:host button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.checked) button,:host([indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.checked:hover) button,:host([indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.checked:active) button,:host([indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.disabled){pointer-events:none}:host(.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.checked.disabled) button,:host([indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}ix-typography{margin-top:0.125rem}:host(.ix-info:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(--theme-radiobtn-unchecked--background--info);--theme-radiobtn-unchecked--background--hover:var(--theme-radiobtn-unchecked--background--info--hover);--theme-radiobtn-unchecked--background--active:var(--theme-radiobtn-unchecked--background--info--active);--theme-radiobtn-unchecked--border-color:var(--theme-radiobtn-unchecked--border-color--info);--theme-radiobtn-unchecked--border-color--hover:var(--theme-radiobtn-unchecked--border-color--info--hover);--theme-radiobtn-unchecked--border-color--active:var(--theme-radiobtn-unchecked--border-color--info--active);--theme-radiobtn-checked--background:var(--theme-radiobtn-checked--background--info);--theme-radiobtn-checked--background--hover:var(--theme-radiobtn-checked--background--info--hover);--theme-radiobtn-checked--background--active:var(--theme-radiobtn-checked--background--info--active);--theme-radiobtn-checked--border-color:var(--theme-radiobtn-checked--border-color--info);--theme-radiobtn-checked--border-color--hover:var(--theme-radiobtn-checked--border-color--info--hover);--theme-radiobtn-checked--border-color--active:var(--theme-radiobtn-checked--border-color--info--active);--theme-radiobtn-mixed--background:var(--theme-radiobtn-mixed--background--info);--theme-radiobtn-mixed--background--hover:var(--theme-radiobtn-mixed--background--info--hover);--theme-radiobtn-mixed--background--active:var(--theme-radiobtn-mixed--background--info--active);--theme-radiobtn-mixed--border-color:var(--theme-radiobtn-mixed--border-color--info);--theme-radiobtn-mixed--border-color--hover:var(--theme-radiobtn-mixed--border-color--info--hover);--theme-radiobtn-mixed--border-color--active:var(--theme-radiobtn-mixed--border-color--info--active)}:host(.ix-info) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-info.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) button,:host(.ix-info[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-warning:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(--theme-radiobtn-unchecked--background--warning);--theme-radiobtn-unchecked--background--hover:var(--theme-radiobtn-unchecked--background--warning--hover);--theme-radiobtn-unchecked--background--active:var(--theme-radiobtn-unchecked--background--warning--active);--theme-radiobtn-unchecked--border-color:var(--theme-radiobtn-unchecked--border-color--warning);--theme-radiobtn-unchecked--border-color--hover:var(--theme-radiobtn-unchecked--border-color--warning--hover);--theme-radiobtn-unchecked--border-color--active:var(--theme-radiobtn-unchecked--border-color--warning--active);--theme-radiobtn-checked--background:var(--theme-radiobtn-checked--background--warning);--theme-radiobtn-checked--background--hover:var(--theme-radiobtn-checked--background--warning--hover);--theme-radiobtn-checked--background--active:var(--theme-radiobtn-checked--background--warning--active);--theme-radiobtn-checked--border-color:var(--theme-radiobtn-checked--border-color--warning);--theme-radiobtn-checked--border-color--hover:var(--theme-radiobtn-checked--border-color--warning--hover);--theme-radiobtn-checked--border-color--active:var(--theme-radiobtn-checked--border-color--warning--active);--theme-radiobtn-mixed--background:var(--theme-radiobtn-mixed--background--warning);--theme-radiobtn-mixed--background--hover:var(--theme-radiobtn-mixed--background--warning--hover);--theme-radiobtn-mixed--background--active:var(--theme-radiobtn-mixed--background--warning--active);--theme-radiobtn-mixed--border-color:var(--theme-radiobtn-mixed--border-color--warning);--theme-radiobtn-mixed--border-color--hover:var(--theme-radiobtn-mixed--border-color--warning--hover);--theme-radiobtn-mixed--border-color--active:var(--theme-radiobtn-mixed--border-color--warning--active)}:host(.ix-warning) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-warning.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) button,:host(.ix-warning[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid--required:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(--theme-radiobtn-unchecked--background--invalid);--theme-radiobtn-unchecked--background--hover:var(--theme-radiobtn-unchecked--background--invalid--hover);--theme-radiobtn-unchecked--background--active:var(--theme-radiobtn-unchecked--background--invalid--active);--theme-radiobtn-unchecked--border-color:var(--theme-radiobtn-unchecked--border-color--invalid);--theme-radiobtn-unchecked--border-color--hover:var(--theme-radiobtn-unchecked--border-color--invalid--hover);--theme-radiobtn-unchecked--border-color--active:var(--theme-radiobtn-unchecked--border-color--invalid--active);--theme-radiobtn-checked--background:var(--theme-radiobtn-checked--background--invalid);--theme-radiobtn-checked--background--hover:var(--theme-radiobtn-checked--background--invalid--hover);--theme-radiobtn-checked--background--active:var(--theme-radiobtn-checked--background--invalid--active);--theme-radiobtn-checked--border-color:var(--theme-radiobtn-checked--border-color--invalid);--theme-radiobtn-checked--border-color--hover:var(--theme-radiobtn-checked--border-color--invalid--hover);--theme-radiobtn-checked--border-color--active:var(--theme-radiobtn-checked--border-color--invalid--active);--theme-radiobtn-mixed--background:var(--theme-radiobtn-mixed--background--invalid);--theme-radiobtn-mixed--background--hover:var(--theme-radiobtn-mixed--background--invalid--hover);--theme-radiobtn-mixed--background--active:var(--theme-radiobtn-mixed--background--invalid--active);--theme-radiobtn-mixed--border-color:var(--theme-radiobtn-mixed--border-color--invalid);--theme-radiobtn-mixed--border-color--hover:var(--theme-radiobtn-mixed--border-color--invalid--hover);--theme-radiobtn-mixed--border-color--active:var(--theme-radiobtn-mixed--border-color--invalid--active)}:host(.ix-invalid--required) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid--required.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}:host(.ix-invalid:not(.disabled)) button{--theme-radiobtn-unchecked--background:var(--theme-radiobtn-unchecked--background--invalid);--theme-radiobtn-unchecked--background--hover:var(--theme-radiobtn-unchecked--background--invalid--hover);--theme-radiobtn-unchecked--background--active:var(--theme-radiobtn-unchecked--background--invalid--active);--theme-radiobtn-unchecked--border-color:var(--theme-radiobtn-unchecked--border-color--invalid);--theme-radiobtn-unchecked--border-color--hover:var(--theme-radiobtn-unchecked--border-color--invalid--hover);--theme-radiobtn-unchecked--border-color--active:var(--theme-radiobtn-unchecked--border-color--invalid--active);--theme-radiobtn-checked--background:var(--theme-radiobtn-checked--background--invalid);--theme-radiobtn-checked--background--hover:var(--theme-radiobtn-checked--background--invalid--hover);--theme-radiobtn-checked--background--active:var(--theme-radiobtn-checked--background--invalid--active);--theme-radiobtn-checked--border-color:var(--theme-radiobtn-checked--border-color--invalid);--theme-radiobtn-checked--border-color--hover:var(--theme-radiobtn-checked--border-color--invalid--hover);--theme-radiobtn-checked--border-color--active:var(--theme-radiobtn-checked--border-color--invalid--active);--theme-radiobtn-mixed--background:var(--theme-radiobtn-mixed--background--invalid);--theme-radiobtn-mixed--background--hover:var(--theme-radiobtn-mixed--background--invalid--hover);--theme-radiobtn-mixed--background--active:var(--theme-radiobtn-mixed--background--invalid--active);--theme-radiobtn-mixed--border-color:var(--theme-radiobtn-mixed--border-color--invalid);--theme-radiobtn-mixed--border-color--hover:var(--theme-radiobtn-mixed--border-color--invalid--hover);--theme-radiobtn-mixed--border-color--active:var(--theme-radiobtn-mixed--border-color--invalid--active)}:host(.ix-invalid) button{background-color:var(--theme-radiobtn-unchecked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-radiobtn-unchecked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-radiobtn-unchecked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid[indeterminate]) button{background-color:var(--theme-radiobtn-checked--background);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid[indeterminate]:hover) button{background-color:var(--theme-radiobtn-checked--background--hover);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid[indeterminate]:active) button{background-color:var(--theme-radiobtn-checked--background--active);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active)}:host(.ix-invalid.disabled) button{background-color:var(--theme-radiobtn-unchecked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid[indeterminate].disabled) button{background-color:var(--theme-radiobtn-checked--background--disabled);border:var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled)}";
@@ -88,17 +88,17 @@ const Radio = class {
         return Promise.resolve(this.formInternals.form);
     }
     render() {
-        return (h(Host, { key: '4758929737e11bfbd0e451b3e54d660fbde85768', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", class: {
+        return (h(Host, { key: '4352faa97b54bf21ceb349a01761dbdd24ef1440', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", class: {
                 disabled: this.disabled,
                 checked: this.checked,
-            }, onBlur: () => this.ixBlur.emit() }, h("label", { key: 'd2afc7aaf1f93fd5944a221f3a04c0800ce290f9' }, h("input", { key: '557f03dc8b4713642d48b241102edeacd0ab229a', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, name: this.name, ref: this.inputRef, type: "radio", onChange: () => {
+            }, onBlur: () => this.ixBlur.emit() }, h("label", { key: '03eba555f8607a52c9846fccc61a41a5123bd882' }, h("input", { key: 'e7bd349e01540ce6972e978c7e9ed10b4c472725', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, name: this.name, ref: this.inputRef, type: "radio", onChange: () => {
                 const ref = this.inputRef.current;
                 if (ref) {
                     this.setCheckedState(ref.checked);
                 }
-            } }), h("button", { key: '0d5d3d3e67a551738f73bd0735b003a429baa3d4', disabled: this.disabled, class: {
+            } }), h("button", { key: '98cf1af286d7ee5d79cdb636e0eed6aafeaf6c71', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, h("div", { key: '2fd252cdd058278ca8920f6e7f97fbf4398082d9', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } })), h("ix-typography", { key: 'a15d35478a0e23f3f76802f38ad2c4703217e0e4', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '86a03832ffc66f97aefd5c5f1e435cd2413cbec4' })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, h("div", { key: '05c0ff1d06a449f95f4ff0d701f604f0c67de87b', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } })), h("ix-typography", { key: '44b9b08400297b5497e72c143d0405f1fdc39ba0', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '70dd4b58d047a51f25cd2e0a54df3ccbc0a971ea' })))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B6NtGPRE.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DJsXFBNm.js';
 import { B as iconPlus, j as iconClear, q as iconChevronDownSmall } from './index-DLTnniMb.js';
 import { a as a11yBoolean } from './a11y-Bb7pDeaQ.js';
 import { A as ArrowFocusController } from './focus-BAKpVknt.js';
-import { H as HookValidationLifecycle } from './validation-DuPOpjMi.js';
-import { O as OnListener } from './listener-DCrO174s.js';
+import { H as HookValidationLifecycle } from './validation-gQpVWmEm.js';
+import { O as OnListener } from './listener-B0yYRvMl.js';
 import { m as makeRef } from './make-ref-bcj7UEIC.js';
 import { c as createMutationObserver } from './mutation-observer-CX81WQtk.js';
 import './disposable-event-listener-CKoABG1h.js';
@@ -572,9 +572,9 @@ const Select = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'fdfc4962114ec9fc4cf0fe61d40787dba81f60a6', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (h(Host, { key: '52c08e1231ca8e0215e7cce2aa1bd6234c0236e0', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, h("ix-field-wrapper", { key: '56517622c68630fd31b5b4e98fc6d7851582fc6e', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '7765a0bf460e16716f50a4f8c7624bcad927667b', class: {
+            } }, h("ix-field-wrapper", { key: 'bb0b4abdc8a1840db5ebfead204b5be03ead8bef', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '313cd7b0eb6348d6216faee466e4e0e7b19ea14a', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -582,13 +582,13 @@ const Select = class {
                 this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, h("div", { key: 'c2e8b90f7647b38ee8a576dc757084c62fb84179', class: "input-container" }, h("div", { key: '60a9d1b6f7118103c6999bb1f592f3a4ea48c16b', class: "chips" }, this.isMultipleMode
+            } }, h("div", { key: '2c2f94a15cd29d0b1770009d07d71ca4ce7b6793', class: "input-container" }, h("div", { key: '9b2553820b924ce956937746a5989514f9440798', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: 'eb952ef1b366f58dd6ec38801ef5b3e593199383', class: "trigger" }, h("input", { key: 'a41e364dcba508d681a6790381881175716d152d', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            : '', h("div", { key: 'd468fc7e69768a4963ed9d06b5c7e1d2717c630a', class: "trigger" }, h("input", { key: '440ed97c1957ec869d980c8c5aa4c27d84467ef2', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
                 this.inputElement = ref;
@@ -605,7 +605,7 @@ const Select = class {
             } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, key: "dropdown", class: { 'dropdown-visible': this.dropdownShow }, icon: iconChevronDownSmall, ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            } }))))))), h("ix-dropdown", { key: '570a352447ec2b5ad541d9099d015cf0bd106b15', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } }))))))), h("ix-dropdown", { key: '8ec6fe3981cc7c82d7759e0c6f77c3ab8a2a4c71', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'display-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 var _a, _b;
@@ -621,12 +621,12 @@ const Select = class {
                     styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
                 }
                 return styleOverwrites;
-            } }, h("div", { key: '0e36c98203e2454bb875800f624c4184e51e6363', class: {
+            } }, h("div", { key: 'c489337865d7e47b71b0642bffd5a184c0d1a5d3', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '6188f73b7d46ccba8bc082089c3fa3e97a93fdfc', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '335fc13ac07a12aeb0ab4efdc5b265f337cb82c4', onSlotchange: () => {
                 this.updateSelection();
-            } }), h("div", { key: 'f20e633a7b5b4add9ee28541a987f8a81eb32162', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+            } }), h("div", { key: '0651a940c3d45486403b3c10530b73f294a99c25', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();