@infineon/infineon-design-system-stencil 39.5.1--canary.1723.ff8f559ad2723273cd93183465ad335fc28571d7.0 → 39.5.2--canary.2093.6587af63bb759a16655a658c28ffa7d521cd4197.0

package/dist/infineon-design-system-stencil/{p-edbfa46e.entry.js.map → p-98c2e3a9.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tabsCss","IfxTabs","constructor","hostRef","this","orientation","activeTabIndex","fullWidth","internalActiveTabIndex","tabObjects","canScrollLeft","canScrollRight","internalFocusedTabIndex","tabRefs","tabHeaderRefs","tabFocusHandlers","Map","updateBorderOnWindowResize","updateBorderAndFocus","updateScrollButtons","setActiveAndFocusedTab","index","length","_a","disabled","setTimeout","scrollTabIntoView","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","internalOrientation","toLowerCase","onSlotChange","updateTabStyles","forEach","tab","classList","toggle","setAttribute","reRenderBorder","borderElement","el","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","tabs","querySelectorAll","Array","from","map","icon","iconPosition","setupTabFocusListeners","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","handler","set","addEventListener","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","handleClick","previousTabIndex","ifxChange","emit","previousTab","currentTab","handleKeyDown","ev","key","shiftKey","preventDefault","path","composedPath","isTabHeader","some","includes","shouldDisableScrolling","scrollLeft","scrollWidth","clientWidth","tabsListElement","scrollAmount","Math","min","scrollBy","behavior","scrollRight","maxScroll","currentScroll","onTabsListScroll","tabElement","container","tabRect","getTabCenterInfo","containerRect","getContainerCenterInfo","abs","center","desiredScrollLeft","calculateCenteredScrollPosition","scrollTo","maxScrollLeft","max","render","h","class","shape","variant","size","onClick","role","ref","onScroll","onMouseDown","event","_b","_","display","name"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.tabs {\n  display: flex;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  width: 100%;\n}\n\n.tabs.horizontal {\n  flex-direction: column;\n}\n\n.tabs-container {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  gap: tokens.$ifxSpace100;\n}\n\n.scroll-button {\n  flex-shrink: 0;\n  z-index: 10;\n  transition: all 0.3s ease-in-out;\n\n  &.hidden {\n    pointer-events: none;\n  }\n\n  &.scroll-left.hidden {\n    width: 0;\n    min-width: 0;\n    max-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    opacity: 0;\n    overflow: hidden;\n  }\n\n  &.scroll-right.hidden {\n    visibility: hidden;\n    pointer-events: none;\n  }\n}\n\n.tabs.vertical {\n  flex-direction: row;\n}\n\n.tabs-list {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  font-weight: tokens.$ifxFontWeightSemibold;\n\n  &.scrollable {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    white-space: nowrap;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n\n.tabs-list:focus-within .active-border {\n  display: none;\n}\n\n.active-border {\n  content: \"\";\n  position: absolute;\n  transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\n}\n\n.tabs.horizontal .active-border {\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n.tabs.vertical .tabs-list {\n  flex-direction: column;\n  border-bottom: none;\n}\n\n.tabs.vertical .tab-content {\n  padding-top: 0px;\n  padding-left: 32px;\n}\n\n.tabs:not(.vertical) {\n  & .tab-item {\n    &.full-width {\n      flex: 1;\n    }\n  }\n\n\n  &.full-width-enabled {\n    .scroll-button {\n      display: none;\n    }\n\n    .tabs-list {\n      flex: 1;\n\n      &.scrollable {\n        overflow-x: visible; // Disable horizontal scrolling\n      }\n    }\n  }\n}\n\n.tab-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  flex-shrink: 0;\n  max-width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  @media (max-width: tokens.$ifxBreakpointM) {\n    font-size: tokens.$ifxFontSizeS;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace100;\n  }\n\n  &.icon__right {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n  }\n\n  &:hover {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:active,\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:focus,\n  &.focus {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: -2px;\n    border-radius: 2px;\n\n    // Assuming .active-border is a sibling of .tab-item\n    +.active-border {\n      display: none; // Hide the active border when the tab is in focus\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n.tabs.vertical .tab-item {\n  border-right: 2px solid transparent;\n  min-width: 7em;\n}\n\n.tabs.vertical .active-border {\n  left: 0;\n  top: 0;\n  width: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n\n.tab-content {\n  padding-top: 24px;\n  padding-left: 0px;\n  flex-grow: 1;\n}\n\n.tabs.small .tab-item {\n  font-size: tokens.$ifxFontSizeS;\n}\n","import { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true\n})\nexport class IfxTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() orientation: string = \"horizontal\";\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  @Prop() fullWidth: boolean = false;\n\n  @State() internalOrientation: string;\n  @State() internalActiveTabIndex: number = 0;\n  @State() tabObjects: any[] = [];\n  @State() canScrollLeft: boolean = false;\n  @State() canScrollRight: boolean = false;\n\n  private internalFocusedTabIndex: number = 0;\n  private tabRefs: HTMLElement[] = [];\n  private tabHeaderRefs: HTMLElement[] = [];\n  private tabsListElement: HTMLElement;\n  private tabFocusHandlers: Map<HTMLElement, () => void> = new Map();\n\n  @Event() ifxChange: EventEmitter;\n\n  @Listen('resize', {target: 'window'})\n  updateBorderOnWindowResize() {\n    this.updateBorderAndFocus();\n    this.updateScrollButtons();\n  }\n\n  setActiveAndFocusedTab(index: number) {\n    if (index >= this.tabObjects.length) {\n      index = this.tabObjects.length - 1;\n    }\n    if (index < 0) {\n      index = 0;\n    }\n    if (!this.tabObjects[index]?.disabled) {\n      this.internalActiveTabIndex = index;\n      this.internalFocusedTabIndex = index;\n      // Scroll the active tab into view\n      setTimeout(() => this.scrollTabIntoView(index), 0);\n    }\n  }\n\n  @Listen('tabHeaderChange')\n  handleTabHeaderChange(e) {\n    const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n    this.tabObjects[tabIndex].header = e.detail;\n    this.tabObjects = [...this.tabObjects];\n  }\n\n\n  @Watch('activeTabIndex')\n  activeTabIndexChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.setActiveAndFocusedTab(newValue);\n    }\n  }\n\n  componentWillLoad() {\n    this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n    this.onSlotChange();\n    this.setActiveAndFocusedTab(this.activeTabIndex);\n    this.updateTabStyles();\n  }\n\n  updateTabStyles() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.classList.toggle('active', index === this.internalActiveTabIndex);\n      tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n    });\n  }\n\n\n  // needed for smooth border transition\n  reRenderBorder() {\n    const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n    if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n      if (this.orientation === 'horizontal') {\n\n        borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n        borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n        borderElement.style.top = '';\n        borderElement.style.height = '';\n      } else {\n        borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n        borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n        borderElement.style.left = '';\n        borderElement.style.width = '';\n      }\n    }\n  }\n\n\n  // when a slot is removed / added\n  @Listen('slotchange')\n  onSlotChange() {\n    const tabs = this.el.querySelectorAll('ifx-tab');\n    this.tabObjects = Array.from(tabs).map((tab) => {\n      return {\n        header: tab?.header,\n        disabled: tab?.disabled === true,\n        icon: tab?.icon,\n        iconPosition: tab?.iconPosition\n      }\n    });\n\n    this.tabRefs = Array.from(tabs);\n    this.tabRefs.forEach((tab, index) => {\n      tab.setAttribute('slot', `tab-${index}`);\n    });\n\n    // Re-setup focus listeners when tabs change\n    setTimeout(() => {\n      this.setupTabFocusListeners();\n      this.updateScrollButtons();\n    }, 0);\n  }\n\n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-tabs', await framework)\n    }\n    this.updateBorderAndFocus();\n    this.updateScrollButtons();\n    // Add keyboard event listeners for each tab header\n    this.setupTabFocusListeners();\n  }\n\n  private setupTabFocusListeners() {\n    // Clear any existing handlers\n    this.tabFocusHandlers.clear();\n\n    this.tabHeaderRefs.forEach((tab, index) => {\n      const handler = () => {\n        this.internalFocusedTabIndex = index;\n      };\n\n      // Store the handler so we can remove it later\n      this.tabFocusHandlers.set(tab, handler);\n      tab.addEventListener('focus', handler);\n    });\n  }\n\n  disconnectedCallback() {\n    // Remove keyboard event listeners when component is unmounted\n    this.tabFocusHandlers.forEach((handler, tab) => {\n      tab.removeEventListener('focus', handler);\n    });\n    this.tabFocusHandlers.clear();\n  }\n  componentDidUpdate() {\n    this.updateBorderAndFocus();\n    this.updateScrollButtons();\n  }\n\n  private updateBorderAndFocus() {\n    this.reRenderBorder()\n    this.updateTabFocusability();\n  }\n\n  private updateTabFocusability() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n    })\n  }\n\n\n  private focusNextTab() {\n    let nextIndex = this.internalFocusedTabIndex + 1;\n    while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n      nextIndex++;\n    }\n    if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n      this.internalFocusedTabIndex = nextIndex;\n      this.tabHeaderRefs[nextIndex].focus();\n    }\n  }\n\n  private focusPreviousTab() {\n    let prevIndex = this.internalFocusedTabIndex - 1;\n    while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n      prevIndex--;\n    }\n    if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n      this.internalFocusedTabIndex = prevIndex;\n      this.tabHeaderRefs[prevIndex].focus();\n    }\n  }\n\n\n  private getTabItemClass(index: number) {\n    const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n    const isDisabled = this.tabObjects[index].disabled;\n    const iconPosition = this.tabObjects[index].iconPosition\n    return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n  }\n\n  private handleClick(tab, index) {\n    if (!tab.disabled) {\n      const previousTabIndex = this.internalActiveTabIndex;\n      this.internalActiveTabIndex = index;\n      this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: index });\n      // Center the clicked tab\n      setTimeout(() => this.scrollTabIntoView(index), 0);\n    }\n  }\n\n\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Tab') {\n\n      if (ev.shiftKey) {\n        // Shift + Tab\n        if (this.internalFocusedTabIndex === 0) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusPreviousTab();\n        }\n      } else {\n        // Tab\n        if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusNextTab();\n        }\n      }\n    } else if (ev.key === 'Enter') {\n      const path = ev.composedPath();\n      const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\n      if (!isTabHeader) {\n        return;\n      }\n\n      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n        const previousTabIndex = this.internalActiveTabIndex;\n        this.internalActiveTabIndex = this.internalFocusedTabIndex;\n        this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: this.internalFocusedTabIndex });\n        // Center the activated tab\n        setTimeout(() => this.scrollTabIntoView(this.internalFocusedTabIndex), 0);\n      }\n    }\n  }\n\n  private updateScrollButtons() {\n    // Reset scroll buttons if conditions not met\n    if (this.shouldDisableScrolling()) {\n      this.canScrollLeft = false;\n      this.canScrollRight = false;\n      return;\n    }\n\n    const { scrollLeft, scrollWidth, clientWidth } = this.tabsListElement;\n    this.canScrollLeft = scrollLeft > 0;\n    this.canScrollRight = scrollLeft < scrollWidth - clientWidth;\n  }\n\n  private shouldDisableScrolling(): boolean {\n    return !this.tabsListElement ||\n           this.internalOrientation === 'vertical' ||\n           this.fullWidth;\n  }\n\n  private scrollLeft() {\n    if (!this.canScrollLeft || !this.tabsListElement) return;\n\n    const scrollAmount = Math.min(200, this.tabsListElement.scrollLeft);\n    this.tabsListElement.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n  }\n\n  private scrollRight() {\n    if (!this.canScrollRight || !this.tabsListElement) return;\n\n    const maxScroll = this.tabsListElement.scrollWidth - this.tabsListElement.clientWidth;\n    const currentScroll = this.tabsListElement.scrollLeft;\n    const scrollAmount = Math.min(200, maxScroll - currentScroll);\n    this.tabsListElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n  }\n\n  private onTabsListScroll() {\n    this.updateScrollButtons();\n  }\n\n  private scrollTabIntoView(index: number) {\n    if (this.shouldDisableScrolling() || !this.tabHeaderRefs[index]) {\n      return;\n    }\n\n    const tabElement = this.tabHeaderRefs[index];\n    const container = this.tabsListElement;\n\n    const tabRect = this.getTabCenterInfo(tabElement);\n    const containerRect = this.getContainerCenterInfo(container);\n\n    // Only scroll if the tab is not already reasonably centered\n    if (Math.abs(tabRect.center - containerRect.center) > 50) {\n      const desiredScrollLeft = this.calculateCenteredScrollPosition(tabRect, containerRect);\n      container.scrollTo({ left: desiredScrollLeft, behavior: 'smooth' });\n    }\n  }\n\n  private getTabCenterInfo(tabElement: HTMLElement) {\n    const left = tabElement.offsetLeft;\n    const width = tabElement.offsetWidth;\n    return {\n      left,\n      width,\n      center: left + (width / 2)\n    };\n  }\n\n  private getContainerCenterInfo(container: HTMLElement) {\n    const scrollLeft = container.scrollLeft;\n    const width = container.clientWidth;\n    return {\n      scrollLeft,\n      width,\n      center: scrollLeft + (width / 2)\n    };\n  }\n\n  private calculateCenteredScrollPosition(tabRect: any, containerRect: any): number {\n    const desiredScrollLeft = tabRect.center - (containerRect.width / 2);\n    const maxScrollLeft = this.tabsListElement.scrollWidth - containerRect.width;\n    return Math.max(0, Math.min(desiredScrollLeft, maxScrollLeft));\n  }\n\n  render() {\n    return (\n      <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}`}>\n        {this.internalOrientation === 'horizontal' ? (\n          <div class=\"tabs-container\">\n            <ifx-icon-button\n              shape=\"round\"\n              variant=\"tertiary\"\n              icon=\"chevronLeft16\"\n              size=\"s\"\n              disabled={false}\n              aria-label=\"Scroll tabs left\"\n              onClick={() => this.scrollLeft()}\n              class={`scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}`}\n            >\n            </ifx-icon-button>\n            <ul\n              role=\"tablist\"\n              class=\"tabs-list scrollable\"\n              ref={(el) => (this.tabsListElement = el)}\n              onScroll={() => this.onTabsListScroll()}\n            >\n              {this.tabObjects?.map((tab, index) => (\n                <li\n                  class={this.getTabItemClass(index)}\n                  ref={(el) => (this.tabHeaderRefs[index] = el)}\n                  onMouseDown={(event) => event.preventDefault()}\n                  onClick={() => this.handleClick(tab, index)}\n                  aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n                  aria-disabled={tab.disabled ? 'true' : 'false'}\n                  role=\"tab\"\n                >\n                  {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n                  {tab?.header}\n                </li>\n              ))}\n              <div class=\"active-border\"></div>\n            </ul>\n            <ifx-icon-button\n              shape=\"round\"\n              variant=\"tertiary\"\n              icon=\"chevronRight16\"\n              size=\"s\"\n              disabled={false}\n              aria-label=\"Scroll tabs right\"\n              onClick={() => this.scrollRight()}\n              class={`scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}`}\n            >\n            </ifx-icon-button>\n          </div>\n        ) : (\n          <ul role=\"tablist\" class=\"tabs-list\">\n            {this.tabObjects?.map((tab, index) => (\n              <li\n                class={this.getTabItemClass(index)}\n                ref={(el) => (this.tabHeaderRefs[index] = el)}\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={() => this.handleClick(tab, index)}\n                aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n                aria-disabled={tab.disabled ? 'true' : 'false'}\n                role=\"tab\"\n              >\n                {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n                {tab?.header}\n              </li>\n            ))}\n            <div class=\"active-border\"></div>\n          </ul>\n        )}\n        <div class=\"tab-content\">\n          {Array.from(this.tabObjects).map((_, index) => (\n            <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n              <slot name={`tab-${index}`} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tabsCss","IfxTabs","constructor","hostRef","this","orientation","activeTabIndex","fullWidth","internalActiveTabIndex","tabObjects","canScrollLeft","canScrollRight","internalFocusedTabIndex","tabRefs","tabHeaderRefs","tabFocusHandlers","Map","updateBorderOnWindowResize","updateBorderAndFocus","updateScrollButtons","setActiveAndFocusedTab","index","length","_a","disabled","setTimeout","scrollTabIntoView","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","internalOrientation","toLowerCase","onSlotChange","updateTabStyles","forEach","tab","classList","toggle","setAttribute","reRenderBorder","borderElement","el","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","tabs","querySelectorAll","Array","from","map","icon","iconPosition","setupTabFocusListeners","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","handler","set","addEventListener","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","handleClick","previousTabIndex","ifxChange","emit","previousTab","currentTab","handleKeyDown","ev","key","shiftKey","preventDefault","path","composedPath","isTabHeader","some","includes","shouldDisableScrolling","scrollLeft","scrollWidth","clientWidth","tabsListElement","scrollAmount","Math","min","scrollBy","behavior","scrollRight","maxScroll","currentScroll","onTabsListScroll","tabElement","container","tabRect","getTabCenterInfo","containerRect","getContainerCenterInfo","abs","center","desiredScrollLeft","calculateCenteredScrollPosition","scrollTo","maxScrollLeft","max","render","h","class","shape","variant","size","onClick","role","ref","onScroll","onMouseDown","event","_b","_","display","name"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.tabs {\n  display: flex;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  width: 100%;\n}\n\n.tabs.horizontal {\n  flex-direction: column;\n}\n\n.tabs-container {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  gap: tokens.$ifxSpace100;\n}\n\n.scroll-button {\n  flex-shrink: 0;\n  z-index: 10;\n  transition: all 0.3s ease-in-out;\n\n  &.hidden {\n    pointer-events: none;\n  }\n\n  &.scroll-left.hidden {\n    width: 0;\n    min-width: 0;\n    max-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    opacity: 0;\n    overflow: hidden;\n  }\n\n  &.scroll-right.hidden {\n    visibility: hidden;\n    pointer-events: none;\n  }\n}\n\n.tabs.vertical {\n  flex-direction: row;\n}\n\n.tabs-list {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  font-weight: tokens.$ifxFontWeightSemibold;\n\n  &.scrollable {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    white-space: nowrap;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n\n.tabs-list:focus-within .active-border {\n  display: none;\n}\n\n.active-border {\n  content: \"\";\n  position: absolute;\n  transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\n}\n\n.tabs.horizontal .active-border {\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n.tabs.vertical .tabs-list {\n  flex-direction: column;\n  border-bottom: none;\n}\n\n.tabs.vertical .tab-content {\n  padding-top: 0px;\n  padding-left: 32px;\n}\n\n.tabs:not(.vertical) {\n  & .tab-item {\n    &.full-width {\n      flex: 1;\n    }\n  }\n\n\n  &.full-width-enabled {\n    .scroll-button {\n      display: none;\n    }\n\n    .tabs-list {\n      flex: 1;\n\n      &.scrollable {\n        overflow-x: visible; // Disable horizontal scrolling\n      }\n    }\n  }\n}\n\n.tab-item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  flex-shrink: 0;\n  max-width: 50%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  @media (max-width: tokens.$ifxBreakpointM) {\n    font-size: tokens.$ifxFontSizeS;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace100;\n  }\n\n  &.icon__right {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n  }\n\n  &:hover {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:active,\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:focus,\n  &.focus {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: -2px;\n    border-radius: 2px;\n\n    // Assuming .active-border is a sibling of .tab-item\n    +.active-border {\n      display: none; // Hide the active border when the tab is in focus\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n.tabs.vertical .tab-item {\n  border-right: 2px solid transparent;\n  min-width: 7em;\n}\n\n.tabs.vertical .active-border {\n  left: 0;\n  top: 0;\n  width: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n\n.tab-content {\n  padding-top: 24px;\n  padding-left: 0px;\n  flex-grow: 1;\n}\n\n.tabs.small .tab-item {\n  font-size: tokens.$ifxFontSizeS;\n}\n","import { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true\n})\nexport class IfxTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() orientation: string = \"horizontal\";\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  @Prop() fullWidth: boolean = false;\n\n  @State() internalOrientation: string;\n  @State() internalActiveTabIndex: number = 0;\n  @State() tabObjects: any[] = [];\n  @State() canScrollLeft: boolean = false;\n  @State() canScrollRight: boolean = false;\n\n  private internalFocusedTabIndex: number = 0;\n  private tabRefs: HTMLElement[] = [];\n  private tabHeaderRefs: HTMLElement[] = [];\n  private tabsListElement: HTMLElement;\n  private tabFocusHandlers: Map<HTMLElement, () => void> = new Map();\n\n  @Event() ifxChange: EventEmitter;\n\n  @Listen('resize', {target: 'window'})\n  updateBorderOnWindowResize() {\n    this.updateBorderAndFocus();\n    this.updateScrollButtons();\n  }\n\n  setActiveAndFocusedTab(index: number) {\n    if (index >= this.tabObjects.length) {\n      index = this.tabObjects.length - 1;\n    }\n    if (index < 0) {\n      index = 0;\n    }\n    if (!this.tabObjects[index]?.disabled) {\n      this.internalActiveTabIndex = index;\n      this.internalFocusedTabIndex = index;\n      // Scroll the active tab into view\n      setTimeout(() => this.scrollTabIntoView(index), 0);\n    }\n  }\n\n  @Listen('tabHeaderChange')\n  handleTabHeaderChange(e) {\n    const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n    this.tabObjects[tabIndex].header = e.detail;\n    this.tabObjects = [...this.tabObjects];\n  }\n\n\n  @Watch('activeTabIndex')\n  activeTabIndexChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.setActiveAndFocusedTab(newValue);\n    }\n  }\n\n  componentWillLoad() {\n    this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n    this.onSlotChange();\n    this.setActiveAndFocusedTab(this.activeTabIndex);\n    this.updateTabStyles();\n  }\n\n  updateTabStyles() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.classList.toggle('active', index === this.internalActiveTabIndex);\n      tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n    });\n  }\n\n\n  // needed for smooth border transition\n  reRenderBorder() {\n    const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n    if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n      if (this.orientation === 'horizontal') {\n\n        borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n        borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n        borderElement.style.top = '';\n        borderElement.style.height = '';\n      } else {\n        borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n        borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n        borderElement.style.left = '';\n        borderElement.style.width = '';\n      }\n    }\n  }\n\n\n  // when a slot is removed / added\n  @Listen('slotchange')\n  onSlotChange() {\n    const tabs = this.el.querySelectorAll('ifx-tab');\n    this.tabObjects = Array.from(tabs).map((tab) => {\n      return {\n        header: tab?.header,\n        disabled: tab?.disabled === true,\n        icon: tab?.icon,\n        iconPosition: tab?.iconPosition\n      }\n    });\n\n    this.tabRefs = Array.from(tabs);\n    this.tabRefs.forEach((tab, index) => {\n      tab.setAttribute('slot', `tab-${index}`);\n    });\n\n    // Re-setup focus listeners when tabs change\n    setTimeout(() => {\n      this.setupTabFocusListeners();\n      this.updateScrollButtons();\n    }, 0);\n  }\n\n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-tabs', await framework)\n    }\n    this.updateBorderAndFocus();\n    this.updateScrollButtons();\n    // Add keyboard event listeners for each tab header\n    this.setupTabFocusListeners();\n  }\n\n  private setupTabFocusListeners() {\n    // Clear any existing handlers\n    this.tabFocusHandlers.clear();\n\n    this.tabHeaderRefs.forEach((tab, index) => {\n      const handler = () => {\n        this.internalFocusedTabIndex = index;\n      };\n\n      // Store the handler so we can remove it later\n      this.tabFocusHandlers.set(tab, handler);\n      tab.addEventListener('focus', handler);\n    });\n  }\n\n  disconnectedCallback() {\n    // Remove keyboard event listeners when component is unmounted\n    this.tabFocusHandlers.forEach((handler, tab) => {\n      tab.removeEventListener('focus', handler);\n    });\n    this.tabFocusHandlers.clear();\n  }\n  componentDidUpdate() {\n    this.updateBorderAndFocus();\n    this.updateScrollButtons();\n  }\n\n  private updateBorderAndFocus() {\n    this.reRenderBorder()\n    this.updateTabFocusability();\n  }\n\n  private updateTabFocusability() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n    })\n  }\n\n\n  private focusNextTab() {\n    let nextIndex = this.internalFocusedTabIndex + 1;\n    while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n      nextIndex++;\n    }\n    if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n      this.internalFocusedTabIndex = nextIndex;\n      this.tabHeaderRefs[nextIndex].focus();\n    }\n  }\n\n  private focusPreviousTab() {\n    let prevIndex = this.internalFocusedTabIndex - 1;\n    while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n      prevIndex--;\n    }\n    if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n      this.internalFocusedTabIndex = prevIndex;\n      this.tabHeaderRefs[prevIndex].focus();\n    }\n  }\n\n\n  private getTabItemClass(index: number) {\n    const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n    const isDisabled = this.tabObjects[index].disabled;\n    const iconPosition = this.tabObjects[index].iconPosition\n    return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n  }\n\n  private handleClick(tab, index) {\n    if (!tab.disabled) {\n      const previousTabIndex = this.internalActiveTabIndex;\n      this.internalActiveTabIndex = index;\n      this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: index });\n      // Center the clicked tab\n      setTimeout(() => this.scrollTabIntoView(index), 0);\n    }\n  }\n\n\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Tab') {\n\n      if (ev.shiftKey) {\n        // Shift + Tab\n        if (this.internalFocusedTabIndex === 0) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusPreviousTab();\n        }\n      } else {\n        // Tab\n        if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusNextTab();\n        }\n      }\n    } else if (ev.key === 'Enter') {\n      const path = ev.composedPath();\n      const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\n      if (!isTabHeader) {\n        return;\n      }\n\n      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n        const previousTabIndex = this.internalActiveTabIndex;\n        this.internalActiveTabIndex = this.internalFocusedTabIndex;\n        this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: this.internalFocusedTabIndex });\n        // Center the activated tab\n        setTimeout(() => this.scrollTabIntoView(this.internalFocusedTabIndex), 0);\n      }\n    }\n  }\n\n  private updateScrollButtons() {\n    // Reset scroll buttons if conditions not met\n    if (this.shouldDisableScrolling()) {\n      this.canScrollLeft = false;\n      this.canScrollRight = false;\n      return;\n    }\n\n    const { scrollLeft, scrollWidth, clientWidth } = this.tabsListElement;\n    this.canScrollLeft = scrollLeft > 0;\n    this.canScrollRight = scrollLeft < scrollWidth - clientWidth;\n  }\n\n  private shouldDisableScrolling(): boolean {\n    return !this.tabsListElement ||\n           this.internalOrientation === 'vertical' ||\n           this.fullWidth;\n  }\n\n  private scrollLeft() {\n    if (!this.canScrollLeft || !this.tabsListElement) return;\n\n    const scrollAmount = Math.min(200, this.tabsListElement.scrollLeft);\n    this.tabsListElement.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n  }\n\n  private scrollRight() {\n    if (!this.canScrollRight || !this.tabsListElement) return;\n\n    const maxScroll = this.tabsListElement.scrollWidth - this.tabsListElement.clientWidth;\n    const currentScroll = this.tabsListElement.scrollLeft;\n    const scrollAmount = Math.min(200, maxScroll - currentScroll);\n    this.tabsListElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n  }\n\n  private onTabsListScroll() {\n    this.updateScrollButtons();\n  }\n\n  private scrollTabIntoView(index: number) {\n    if (this.shouldDisableScrolling() || !this.tabHeaderRefs[index]) {\n      return;\n    }\n\n    const tabElement = this.tabHeaderRefs[index];\n    const container = this.tabsListElement;\n\n    const tabRect = this.getTabCenterInfo(tabElement);\n    const containerRect = this.getContainerCenterInfo(container);\n\n    // Only scroll if the tab is not already reasonably centered\n    if (Math.abs(tabRect.center - containerRect.center) > 50) {\n      const desiredScrollLeft = this.calculateCenteredScrollPosition(tabRect, containerRect);\n      container.scrollTo({ left: desiredScrollLeft, behavior: 'smooth' });\n    }\n  }\n\n  private getTabCenterInfo(tabElement: HTMLElement) {\n    const left = tabElement.offsetLeft;\n    const width = tabElement.offsetWidth;\n    return {\n      left,\n      width,\n      center: left + (width / 2)\n    };\n  }\n\n  private getContainerCenterInfo(container: HTMLElement) {\n    const scrollLeft = container.scrollLeft;\n    const width = container.clientWidth;\n    return {\n      scrollLeft,\n      width,\n      center: scrollLeft + (width / 2)\n    };\n  }\n\n  private calculateCenteredScrollPosition(tabRect: any, containerRect: any): number {\n    const desiredScrollLeft = tabRect.center - (containerRect.width / 2);\n    const maxScrollLeft = this.tabsListElement.scrollWidth - containerRect.width;\n    return Math.max(0, Math.min(desiredScrollLeft, maxScrollLeft));\n  }\n\n  render() {\n    return (\n      <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}`}>\n        {this.internalOrientation === 'horizontal' ? (\n          <div class=\"tabs-container\">\n            <ifx-icon-button\n              shape=\"round\"\n              variant=\"tertiary\"\n              icon=\"chevronLeft16\"\n              size=\"s\"\n              disabled={false}\n              aria-label=\"Scroll tabs left\"\n              onClick={() => this.scrollLeft()}\n              class={`scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}`}\n            >\n            </ifx-icon-button>\n            <ul\n              role=\"tablist\"\n              class=\"tabs-list scrollable\"\n              ref={(el) => (this.tabsListElement = el)}\n              onScroll={() => this.onTabsListScroll()}\n            >\n              {this.tabObjects?.map((tab, index) => (\n                <li\n                  class={this.getTabItemClass(index)}\n                  ref={(el) => (this.tabHeaderRefs[index] = el)}\n                  onMouseDown={(event) => event.preventDefault()}\n                  onClick={() => this.handleClick(tab, index)}\n                  aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n                  aria-disabled={tab.disabled ? 'true' : 'false'}\n                  role=\"tab\"\n                >\n                  {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n                  {tab?.header}\n                </li>\n              ))}\n              <div class=\"active-border\"></div>\n            </ul>\n            <ifx-icon-button\n              shape=\"round\"\n              variant=\"tertiary\"\n              icon=\"chevronRight16\"\n              size=\"s\"\n              disabled={false}\n              aria-label=\"Scroll tabs right\"\n              onClick={() => this.scrollRight()}\n              class={`scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}`}\n            >\n            </ifx-icon-button>\n          </div>\n        ) : (\n          <ul role=\"tablist\" class=\"tabs-list\">\n            {this.tabObjects?.map((tab, index) => (\n              <li\n                class={this.getTabItemClass(index)}\n                ref={(el) => (this.tabHeaderRefs[index] = el)}\n                onMouseDown={(event) => event.preventDefault()}\n                onClick={() => this.handleClick(tab, index)}\n                aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n                aria-disabled={tab.disabled ? 'true' : 'false'}\n                role=\"tab\"\n              >\n                {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n                {tab?.header}\n              </li>\n            ))}\n            <div class=\"active-border\"></div>\n          </ul>\n        )}\n        <div class=\"tab-content\">\n          {Array.from(this.tabObjects).map((_, index) => (\n            <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n              <slot name={`tab-${index}`} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-9ea43bb7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s}from"./p-DtIEDtZ8.js";const o=':root{--ifx-font-family:"Source Sans 3", \'Arial, sans-serif\'}.segment{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border:1px solid #BFBBBB;border-radius:1px;padding:0 8px 0 8px;height:34px;background-color:#FFFFFF;transition:all 100ms ease;transition-property:color, background;font:600 0.875rem/1.25rem "Source Sans 3"}.segment:focus-visible{color:#FFFFFF;background-color:#0A8276}.segment:hover{color:#FFFFFF;background-color:#08665C;cursor:pointer}.segment:active{background-color:#06534B}.segment.segment--selected{color:#FFFFFF;background-color:#0A8276}.segment.segment--small{height:30px}.segment::after{position:absolute;top:0;left:0;width:100%;height:100%;outline:1px solid #BFBBBB;border-radius:1px;content:""}';const n=class{constructor(s){e(this,s);this.segmentSelect=t(this,"segmentSelect",5);this.selected=false}handleSegmentClick(){if(this.selected)return;this.selected=true;this.segmentSelect.emit(this.segmentIndex)}handleSegmentKeyDown(e){if(e.code==="Enter"||e.code==="Space"){if(this.selected)return;this.selected=true;this.segmentSelect.emit(this.segmentIndex)}}render(){return s("div",{key:"7e3de00d0927c957e99a81faf334f096a1f3b4fc",class:`segment ${this.selected?"segment--selected":""}`,tabIndex:0,onClick:()=>{this.handleSegmentClick()},onKeyDown:e=>{this.handleSegmentKeyDown(e)}},s("ifx-icon",{key:"6d6d9d9d02bebbe45aa32250fe73ee4deac9876a",icon:this.icon})," ",s("slot",{key:"2c860e35d492f81d846356e60bdcf04919cc6bc7"}))}};n.style=o;export{n as ifx_segment};
+//# sourceMappingURL=p-9ea43bb7.entry.js.map

package/dist/infineon-design-system-stencil/{p-5b571505.entry.js.map → p-9ea43bb7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["segmentCss","Segment","constructor","hostRef","this","selected","handleSegmentClick","segmentSelect","emit","segmentIndex","handleSegmentKeyDown","event","code","render","h","key","class","tabIndex","onClick","onKeyDown","e","icon"],"sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.segment {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSize100;\n    position: relative;\n\n    border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\n    \n    height: 34px;\n\n    background-color: tokens.$ifxColorBaseWhite;\n\n    transition: all 100ms ease;\n    transition-property: color, background;\n    \n    font: tokens.$ifxBodyBodySemibold04;\n\n    &:focus-visible {\n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &:hover {         \n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean600;\n        \n        cursor: pointer;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorOcean700;\n    }\n    \n    &.segment--selected {\n        color: tokens.$ifxColorBaseWhite;\n        \n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &.segment--small {\n        height: 30px;\n    }\n}\n\n.segment::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n\n    content: '';\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segment',\n    styleUrl: 'segment.scss',\n    shadow: true\n})\n\nexport class Segment {\n    @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n    @Prop() icon: string;\n    @Prop() segmentIndex: number;\n    @Prop({ mutable: true }) selected: boolean = false;\n    @Prop() value!: string;\n\n    handleSegmentClick() {\n        if (this.selected) return;\n        this.selected = true;\n        this.segmentSelect.emit(this.segmentIndex);\n    }\n    \n    handleSegmentKeyDown(event: KeyboardEvent) {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            if (this.selected) return;\n            this.selected = true;\n            this.segmentSelect.emit(this.segmentIndex);\n        }\n    }\n\n    render() {\n        return (\n            <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n                tabIndex={0}\n                onClick={() => {this.handleSegmentClick()}}\n                onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n                <ifx-icon icon={this.icon}></ifx-icon> <slot />\n            </div>\n        );\n    }\n}"],"mappings":"kDAAA,MAAMA,EAAa,uvB,MCQNC,EAAO,MANpB,WAAAC,CAAAC,G,uDAW6BC,KAAQC,SAAY,KA2BhD,CAxBG,kBAAAC,GACI,GAAIF,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKG,cAAcC,KAAKJ,KAAKK,a,CAGjC,oBAAAC,CAAqBC,GACjB,GAAIA,EAAMC,OAAS,SAAWD,EAAMC,OAAS,QAAS,CAClD,GAAIR,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKG,cAAcC,KAAKJ,KAAKK,a,EAIrC,MAAAI,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,WAAWZ,KAAKC,SAAW,oBAAsB,KACzDY,SAAU,EACVC,QAAS,KAAOd,KAAKE,oBAAoB,EACzCa,UAAYC,IAAOhB,KAAKM,qBAAqBU,EAAE,GAC/CN,EAAA,YAAAC,IAAA,2CAAUM,KAAMjB,KAAKiB,OAAiB,IAACP,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["segmentCss","Segment","constructor","hostRef","this","selected","handleSegmentClick","segmentSelect","emit","segmentIndex","handleSegmentKeyDown","event","code","render","h","key","class","tabIndex","onClick","onKeyDown","e","icon"],"sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.segment {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSize100;\n    position: relative;\n\n    border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\n    \n    height: 34px;\n\n    background-color: tokens.$ifxColorBaseWhite;\n\n    transition: all 100ms ease;\n    transition-property: color, background;\n    \n    font: tokens.$ifxBodyBodySemibold04;\n\n    &:focus-visible {\n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &:hover {         \n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean600;\n        \n        cursor: pointer;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorOcean700;\n    }\n    \n    &.segment--selected {\n        color: tokens.$ifxColorBaseWhite;\n        \n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &.segment--small {\n        height: 30px;\n    }\n}\n\n.segment::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n\n    content: '';\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segment',\n    styleUrl: 'segment.scss',\n    shadow: true\n})\n\nexport class Segment {\n    @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n    @Prop() icon: string;\n    @Prop() segmentIndex: number;\n    @Prop({ mutable: true }) selected: boolean = false;\n    @Prop() value!: string;\n\n    handleSegmentClick() {\n        if (this.selected) return;\n        this.selected = true;\n        this.segmentSelect.emit(this.segmentIndex);\n    }\n    \n    handleSegmentKeyDown(event: KeyboardEvent) {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            if (this.selected) return;\n            this.selected = true;\n            this.segmentSelect.emit(this.segmentIndex);\n        }\n    }\n\n    render() {\n        return (\n            <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n                tabIndex={0}\n                onClick={() => {this.handleSegmentClick()}}\n                onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n                <ifx-icon icon={this.icon}></ifx-icon> <slot />\n            </div>\n        );\n    }\n}"],"mappings":"kDAAA,MAAMA,EAAa,yvB,MCQNC,EAAO,MANpB,WAAAC,CAAAC,G,uDAW6BC,KAAQC,SAAY,KA2BhD,CAxBG,kBAAAC,GACI,GAAIF,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKG,cAAcC,KAAKJ,KAAKK,a,CAGjC,oBAAAC,CAAqBC,GACjB,GAAIA,EAAMC,OAAS,SAAWD,EAAMC,OAAS,QAAS,CAClD,GAAIR,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKG,cAAcC,KAAKJ,KAAKK,a,EAIrC,MAAAI,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,WAAWZ,KAAKC,SAAW,oBAAsB,KACzDY,SAAU,EACVC,QAAS,KAAOd,KAAKE,oBAAoB,EACzCa,UAAYC,IAAOhB,KAAKM,qBAAqBU,EAAE,GAC/CN,EAAA,YAAAC,IAAA,2CAAUM,KAAMjB,KAAKiB,OAAiB,IAACP,EAAQ,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-PqnYwNKt.js → p-DtIEDtZ8.js}

@@ -1,3 +1,3 @@
-const e="infineon-design-system-stencil";const t={hydratedSelectorName:"hydrated",lazyLoad:true,shadowDom:true,slotRelocation:true,updatable:true};const n=()=>{};const s='@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-Regular.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-Regular.ttf.woff") format("woff")}@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-Semibold.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-Semibold.ttf.woff") format("woff")}@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-It.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-It.ttf.woff") format("woff")}:root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}ifx-icon:empty{display:none}';var r=Object.defineProperty;var o=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:true})};var i="http://www.w3.org/2000/svg";var l="http://www.w3.org/1999/xhtml";var f=e=>{if(e.__stencil__getHostRef){return e.__stencil__getHostRef()}return void 0};var a=(e,t)=>{e.__stencil__getHostRef=()=>t;t.t=e};var c=(e,t)=>{const n={o:0,$hostElement$:e,i:t,l:new Map};{n.u=new Promise((e=>n.v=e))}{n.h=new Promise((e=>n.p=e));e["s-p"]=[];e["s-rc"]=[]}const s=n;e.__stencil__getHostRef=()=>s;return s};var u=(e,t)=>t in e;var v=(e,t)=>(0,console.error)(e,t);var d=new Map;var h=(e,t,n)=>{const s=e.m.replace(/-/g,"_");const r=e.S;if(!r){return void 0}const o=d.get(r);if(o){return o[s]}
+const e="infineon-design-system-stencil";const t={hydratedSelectorName:"hydrated",lazyLoad:true,shadowDom:true,slotRelocation:true,updatable:true};const n=()=>{};const s='@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-Regular.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-Regular.ttf.woff") format("woff")}@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-Semibold.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-Semibold.ttf.woff") format("woff")}@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;src:url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-It.ttf.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@infineon/design-system-tokens@5.0.0/dist/fonts/source-sans-3/SourceSans3-It.ttf.woff") format("woff")}:root{--ifx-font-family:"Source Sans 3", \'Arial, sans-serif\'}ifx-icon:empty{display:none}';var r=Object.defineProperty;var o=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:true})};var i="http://www.w3.org/2000/svg";var l="http://www.w3.org/1999/xhtml";var f=e=>{if(e.__stencil__getHostRef){return e.__stencil__getHostRef()}return void 0};var a=(e,t)=>{e.__stencil__getHostRef=()=>t;t.t=e};var c=(e,t)=>{const n={o:0,$hostElement$:e,i:t,l:new Map};{n.u=new Promise((e=>n.v=e))}{n.h=new Promise((e=>n.p=e));e["s-p"]=[];e["s-rc"]=[]}const s=n;e.__stencil__getHostRef=()=>s;return s};var u=(e,t)=>t in e;var v=(e,t)=>(0,console.error)(e,t);var d=new Map;var h=(e,t,n)=>{const s=e.m.replace(/-/g,"_");const r=e.S;if(!r){return void 0}const o=d.get(r);if(o){return o[s]}
 /*!__STENCIL_STATIC_IMPORT_SWITCH__*/return import(`./${r}.entry.js${""}`).then((e=>{{d.set(r,e)}return e[s]}),(e=>{v(e,t.$hostElement$)}))};var p=new Map;var m="{visibility:hidden}.hydrated{visibility:inherit}";var y="slot-fb{display:contents}slot-fb[hidden]{display:none}";var w="http://www.w3.org/1999/xlink";var S=typeof window!=="undefined"?window:{};var g=S.HTMLElement||class{};var b={o:0,$:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,s)=>e.addEventListener(t,n,s),rel:(e,t,n,s)=>e.removeEventListener(t,n,s),ce:(e,t)=>new CustomEvent(e,t)};var $=t.shadowDom;var j=(()=>{var e;let t=false;try{(e=S.document)==null?void 0:e.addEventListener("e",null,Object.defineProperty({},"passive",{get(){t=true}}))}catch(e){}return t})();var k=e=>Promise.resolve(e);var O=(()=>{try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var E=O?(()=>!!S.document&&Object.getOwnPropertyDescriptor(S.document.adoptedStyleSheets,"length").writable)():false;var x=false;var C=[];var R=[];var N=(e,t)=>n=>{e.push(n);if(!x){x=true;if(t&&b.o&4){L(F)}else{b.raf(F)}}};var M=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){v(e)}}e.length=0};var F=()=>{M(C);{M(R);if(x=C.length>0){b.raf(F)}}};var L=e=>k().then(e);var P=N(R,true);var T=e=>{const t=new URL(e,b.$);return t.origin!==S.location.origin?t.href:t.pathname};var U=e=>{e=typeof e;return e==="object"||e==="function"};function A(e){var t,n,s;return(s=(n=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:n.getAttribute("content"))!=null?s:void 0}var D=e=>e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");var W={};o(W,{err:()=>_,map:()=>z,ok:()=>I,unwrap:()=>B,unwrapErr:()=>H});var I=e=>({isOk:true,isErr:false,value:e});var _=e=>({isOk:false,isErr:true,value:e});function z(e,t){if(e.isOk){const n=t(e.value);if(n instanceof Promise){return n.then((e=>I(e)))}else{return I(n)}}if(e.isErr){const t=e.value;return _(t)}throw"should never get here"}var B=e=>{if(e.isOk){return e.value}else{throw e.value}};var H=e=>{if(e.isErr){return e.value}else{throw e.value}};function q(e){if(!O)return void 0;const t=new CSSStyleSheet;t.replaceSync(e);return t}var V;function Y(e){var t;const n=this.attachShadow({mode:"open",delegatesFocus:!!(e.o&16)});if(V===void 0)V=(t=q(s))!=null?t:null;if(V){if(E){n.adoptedStyleSheets.push(V)}else{n.adoptedStyleSheets=[...n.adoptedStyleSheets,V]}}}var G=e=>{const t=ne(e,"childNodes");if(e.tagName&&e.tagName.includes("-")&&e["s-cr"]&&e.tagName!=="SLOT-FB"){K(t,e.tagName).forEach((e=>{if(e.nodeType===1&&e.tagName==="SLOT-FB"){if(Q(e,Z(e),false).length){e.hidden=true}else{e.hidden=false}}}))}let n=0;for(n=0;n<t.length;n++){const e=t[n];if(e.nodeType===1&&ne(e,"childNodes").length){G(e)}}};var J=e=>{const t=[];for(let n=0;n<e.length;n++){const s=e[n]["s-nr"]||void 0;if(s&&s.isConnected){t.push(s)}}return t};function K(e,t,n){let s=0;let r=[];let o;for(;s<e.length;s++){o=e[s];if(o["s-sr"]&&(!t||o["s-hn"]===t)&&n===void 0){r.push(o)}r=[...r,...K(o.childNodes,t,n)]}return r}var Q=(e,t,n=true)=>{const s=[];if(n&&e["s-sr"]||!e["s-sr"])s.push(e);let r=e;while(r=r.nextSibling){if(Z(r)===t&&(n||!r["s-sr"]))s.push(r)}return s};var X=(e,t)=>{if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var Z=e=>typeof e["s-sn"]==="string"?e["s-sn"]:e.nodeType===1&&e.getAttribute("slot")||void 0;function ee(e){if(e.assignedElements||e.assignedNodes||!e["s-sr"])return;const t=t=>function(e){const n=[];const s=this["s-sn"];if(e==null?void 0:e.flatten){console.error(`\n          Flattening is not supported for Stencil non-shadow slots.\n          You can use \`.childNodes\` to nested slot fallback content.\n          If you have a particular use case, please open an issue on the Stencil repo.\n        `)}const r=this["s-cr"].parentElement;const o=r.__childNodes?r.childNodes:J(r.childNodes);o.forEach((e=>{if(s===Z(e)){n.push(e)}}));if(t){return n.filter((e=>e.nodeType===1))}return n}.bind(e);e.assignedElements=t(true);e.assignedNodes=t(false)}var te=e=>{const t=e.cloneNode;e.cloneNode=function(e){const n=this;const s=n.shadowRoot&&$;const r=t.call(n,s?e:false);if(!s&&e){let e=0;let t,n;const s=["s-id","s-cr","s-lr","s-rc","s-sc","s-p","s-cn","s-sr","s-sn","s-hn","s-ol","s-nr","s-si","s-rf","s-scs"];const o=this.__childNodes||this.childNodes;for(;e<o.length;e++){t=o[e]["s-nr"];n=s.every((t=>!o[e][t]));if(t){{r.appendChild(t.cloneNode(true))}}if(n){r.appendChild(o[e].cloneNode(true))}}}return r}};function ne(e,t){if("__"+t in e){const n=e["__"+t];if(typeof n!=="function")return n;return n.bind(e)}else{if(typeof e[t]!=="function")return e[t];return e[t].bind(e)}}var se=(e,t="")=>{{return()=>{}}};var re=(e,t)=>{{return()=>{}}};var oe=new WeakMap;var ie=(e,t,n)=>{let s=p.get(e);if(O&&n){s=s||new CSSStyleSheet;if(typeof s==="string"){s=t}else{s.replaceSync(t)}}else{s=t}p.set(e,s)};var le=(e,t,n)=>{var s;const r=ae(t);const o=p.get(r);if(!S.document){return r}e=e.nodeType===11?e:S.document;if(o){if(typeof o==="string"){e=e.head||e;let n=oe.get(e);let i;if(!n){oe.set(e,n=new Set)}if(!n.has(r)){{i=S.document.createElement("style");i.innerHTML=o;const n=(s=b.j)!=null?s:A(S.document);if(n!=null){i.setAttribute("nonce",n)}if(!(t.o&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(i,(n==null?void 0:n.parentNode)===e?n:null)}else if("host"in e){if(O){const t=new CSSStyleSheet;t.replaceSync(o);if(E){e.adoptedStyleSheets.unshift(t)}else{e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}}else{const t=e.querySelector("style");if(t){t.innerHTML=o+t.innerHTML}else{e.prepend(i)}}}else{e.append(i)}}if(t.o&1){e.insertBefore(i,null)}}if(t.o&4){i.innerHTML+=y}if(n){n.add(r)}}}else if(!e.adoptedStyleSheets.includes(o)){if(E){e.adoptedStyleSheets.push(o)}else{e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]}}}return r};var fe=e=>{const t=e.i;const n=e.$hostElement$;const s=t.o;const r=se("attachStyles",t.m);const o=le(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);if(s&10){n["s-sc"]=o;n.classList.add(o+"-h")}r()};var ae=(e,t)=>"sc-"+e.m;var ce=(e,t,...n)=>{let s=null;let r=null;let o=null;let i=false;let l=false;const f=[];const a=t=>{for(let n=0;n<t.length;n++){s=t[n];if(Array.isArray(s)){a(s)}else if(s!=null&&typeof s!=="boolean"){if(i=typeof e!=="function"&&!U(s)){s=String(s)}if(i&&l){f[f.length-1].k+=s}else{f.push(i?ue(null,s):s)}l=i}}};a(n);if(t){if(t.key){r=t.key}if(t.name){o=t.name}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,f,he)}const c=ue(e,null);c.O=t;if(f.length>0){c.C=f}{c.R=r}{c.N=o}return c};var ue=(e,t)=>{const n={o:0,M:e,k:t,F:null,C:null};{n.O=null}{n.R=null}{n.N=null}return n};var ve={};var de=e=>e&&e.M===ve;var he={forEach:(e,t)=>e.map(pe).forEach(t),map:(e,t)=>e.map(pe).map(t).map(me)};var pe=e=>({vattrs:e.O,vchildren:e.C,vkey:e.R,vname:e.N,vtag:e.M,vtext:e.k});var me=e=>{if(typeof e.vtag==="function"){const t={...e.vattrs};if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return ce(e.vtag,t,...e.vchildren||[])}const t=ue(e.vtag,e.vtext);t.O=e.vattrs;t.C=e.vchildren;t.R=e.vkey;t.N=e.vname;return t};var ye=e=>{const t=D(e);return new RegExp(`(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${t}))(${t}\\b)`,"g")};ye("::slotted");ye(":host");ye(":host-context");var we=(e,t,n)=>{if(typeof e==="string"&&(t&16||t&8)&&(e.startsWith("{")&&e.endsWith("}")||e.startsWith("[")&&e.endsWith("]"))){try{return JSON.parse(e)}catch(e){}}if(e!=null&&!U(e)){if(t&4){{return e==="false"?false:e===""||!!e}}if(t&2){return typeof e==="string"?parseFloat(e):typeof e==="number"?e:NaN}if(t&1){return String(e)}return e}return e};var Se=e=>{var t;return(t=f(e))==null?void 0:t.$hostElement$};var ge=(e,t,n)=>{const s=Se(e);return{emit:e=>be(s,t,{bubbles:!!(n&4),composed:!!(n&2),cancelable:!!(n&1),detail:e})}};var be=(e,t,n)=>{const s=b.ce(t,n);e.dispatchEvent(s);return s};var $e=(e,t,n,s,r,o,i)=>{if(n===s){return}let l=u(e,t);let f=t.toLowerCase();if(t==="class"){const t=e.classList;const r=ke(n);let o=ke(s);{t.remove(...r.filter((e=>e&&!o.includes(e))));t.add(...o.filter((e=>e&&!r.includes(e))))}}else if(t==="style"){{for(const t in n){if(!s||s[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in s){if(!n||s[t]!==n[t]){if(t.includes("-")){e.style.setProperty(t,s[t])}else{e.style[t]=s[t]}}}}else if(t==="key");else if(t==="ref"){if(s){s(e)}}else if(!l&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(u(S,f)){t=f.slice(2)}else{t=f[2]+t.slice(3)}if(n||s){const r=t.endsWith(Oe);t=t.replace(Ee,"");if(n){b.rel(e,t,n,r)}if(s){b.ael(e,t,s,r)}}}else{const i=U(s);if((l||i&&s!==null)&&!r){try{if(!e.tagName.includes("-")){const r=s==null?"":s;if(t==="list"){l=false}else if(n==null||e[t]!=r){if(typeof e.__lookupSetter__(t)==="function"){e[t]=r}else{e.setAttribute(t,r)}}}else if(e[t]!==s){e[t]=s}}catch(e){}}let a=false;{if(f!==(f=f.replace(/^xlink\:?/,""))){t=f;a=true}}if(s==null||s===false){if(s!==false||e.getAttribute(t)===""){if(a){e.removeAttributeNS(w,t)}else{e.removeAttribute(t)}}}else if((!l||o&4||r)&&!i&&e.nodeType===1){s=s===true?"":s;if(a){e.setAttributeNS(w,t,s)}else{e.setAttribute(t,s)}}}};var je=/\s/;var ke=e=>{if(typeof e==="object"&&e&&"baseVal"in e){e=e.baseVal}if(!e||typeof e!=="string"){return[]}return e.split(je)};var Oe="Capture";var Ee=new RegExp(Oe+"$");var xe=(e,t,n,s)=>{const r=t.F.nodeType===11&&t.F.host?t.F.host:t.F;const o=e&&e.O||{};const i=t.O||{};{for(const e of Ce(Object.keys(o))){if(!(e in i)){$e(r,e,o[e],void 0,n,t.o)}}}for(const e of Ce(Object.keys(i))){$e(r,e,o[e],i[e],n,t.o)}};function Ce(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var Re;var Ne;var Me=false;var Fe=false;var Le=false;var Pe=false;var Te=(e,n,s)=>{var r;const o=n.C[s];let f=0;let a;let c;let u;if(!Me){Le=true;if(o.M==="slot"){o.o|=o.C?2:1}}if(o.k!==null){a=o.F=S.document.createTextNode(o.k)}else if(o.o&1){a=o.F=S.document.createTextNode("");{xe(null,o,Pe)}}else{if(!Pe){Pe=o.M==="svg"}if(!S.document){throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component.")}a=o.F=S.document.createElementNS(Pe?i:l,!Me&&t.slotRelocation&&o.o&2?"slot-fb":o.M);if(Pe&&o.M==="foreignObject"){Pe=false}{xe(null,o,Pe)}if(o.C){for(f=0;f<o.C.length;++f){c=Te(e,o,f);if(c){a.appendChild(c)}}}{if(o.M==="svg"){Pe=false}else if(a.tagName==="foreignObject"){Pe=true}}}a["s-hn"]=Ne;{if(o.o&(2|1)){a["s-sr"]=true;a["s-cr"]=Re;a["s-sn"]=o.N||"";a["s-rf"]=(r=o.O)==null?void 0:r.ref;ee(a);u=e&&e.C&&e.C[s];if(u&&u.M===o.M&&e.F){{Ue(e.F,false)}}}}return a};var Ue=(e,t)=>{b.o|=1;const n=Array.from(e.__childNodes||e.childNodes);for(let e=n.length-1;e>=0;e--){const s=n[e];if(s["s-hn"]!==Ne&&s["s-ol"]){Ve(_e(s).parentNode,s,_e(s));s["s-ol"].remove();s["s-ol"]=void 0;s["s-sh"]=void 0;Le=true}if(t){Ue(s,t)}}b.o&=-2};var Ae=(e,t,n,s,r,o)=>{let i=e["s-cr"]&&e["s-cr"].parentNode||e;let l;if(i.shadowRoot&&i.tagName===Ne){i=i.shadowRoot}for(;r<=o;++r){if(s[r]){l=Te(null,n,r);if(l){s[r].F=l;Ve(i,l,_e(t))}}}};var De=(e,t,n)=>{for(let s=t;s<=n;++s){const t=e[s];if(t){const e=t.F;qe(t);if(e){{Fe=true;if(e["s-ol"]){e["s-ol"].remove()}else{Ue(e,true)}}e.remove()}}}};var We=(e,t,n,s,r=false)=>{let o=0;let i=0;let l=0;let f=0;let a=t.length-1;let c=t[0];let u=t[a];let v=s.length-1;let d=s[0];let h=s[v];let p;let m;while(o<=a&&i<=v){if(c==null){c=t[++o]}else if(u==null){u=t[--a]}else if(d==null){d=s[++i]}else if(h==null){h=s[--v]}else if(Ie(c,d,r)){ze(c,d,r);c=t[++o];d=s[++i]}else if(Ie(u,h,r)){ze(u,h,r);u=t[--a];h=s[--v]}else if(Ie(c,h,r)){if(c.M==="slot"||h.M==="slot"){Ue(c.F.parentNode,false)}ze(c,h,r);Ve(e,c.F,u.F.nextSibling);c=t[++o];h=s[--v]}else if(Ie(u,d,r)){if(c.M==="slot"||h.M==="slot"){Ue(u.F.parentNode,false)}ze(u,d,r);Ve(e,u.F,c.F);u=t[--a];d=s[++i]}else{l=-1;{for(f=o;f<=a;++f){if(t[f]&&t[f].R!==null&&t[f].R===d.R){l=f;break}}}if(l>=0){m=t[l];if(m.M!==d.M){p=Te(t&&t[i],n,l)}else{ze(m,d,r);t[l]=void 0;p=m.F}d=s[++i]}else{p=Te(t&&t[i],n,i);d=s[++i]}if(p){{Ve(_e(c.F).parentNode,p,_e(c.F))}}}}if(o>a){Ae(e,s[v+1]==null?null:s[v+1].F,n,s,i,v)}else if(i>v){De(t,o,a)}};var Ie=(e,t,n=false)=>{if(e.M===t.M){if(e.M==="slot"){return e.N===t.N}if(!n){return e.R===t.R}if(n&&!e.R&&t.R){e.R=t.R}return true}return false};var _e=e=>e&&e["s-ol"]||e;var ze=(e,n,s=false)=>{const r=n.F=e.F;const o=e.C;const i=n.C;const l=n.M;const f=n.k;let a;if(f===null){{Pe=l==="svg"?true:l==="foreignObject"?false:Pe}{xe(e,n,Pe)}if(o!==null&&i!==null){We(r,o,n,i,s)}else if(i!==null){if(e.k!==null){r.textContent=""}Ae(r,null,n,i,0,i.length-1)}else if(!s&&t.updatable&&o!==null){De(o,0,o.length-1)}else;if(Pe&&l==="svg"){Pe=false}}else if(a=r["s-cr"]){a.parentNode.textContent=f}else if(e.k!==f){r.data=f}};var Be=[];var He=e=>{let t;let n;let s;const r=e.__childNodes||e.childNodes;for(const e of r){if(e["s-sr"]&&(t=e["s-cr"])&&t.parentNode){n=t.parentNode.__childNodes||t.parentNode.childNodes;const r=e["s-sn"];for(s=n.length-1;s>=0;s--){t=n[s];if(!t["s-cn"]&&!t["s-nr"]&&t["s-hn"]!==e["s-hn"]&&true){if(X(t,r)){let n=Be.find((e=>e.L===t));Fe=true;t["s-sn"]=t["s-sn"]||r;if(n){n.L["s-sh"]=e["s-hn"];n.P=e}else{t["s-sh"]=e["s-hn"];Be.push({P:e,L:t})}if(t["s-sr"]){Be.map((e=>{if(X(e.L,t["s-sn"])){n=Be.find((e=>e.L===t));if(n&&!e.P){e.P=n.P}}}))}}else if(!Be.some((e=>e.L===t))){Be.push({L:t})}}}}if(e.nodeType===1){He(e)}}};var qe=e=>{{e.O&&e.O.ref&&e.O.ref(null);e.C&&e.C.map(qe)}};var Ve=(e,t,n)=>{{return e==null?void 0:e.insertBefore(t,n)}};var Ye=(e,t,n=false)=>{var s,r,o,i;const l=e.$hostElement$;const f=e.i;const a=e.T||ue(null,null);const c=de(t);const u=c?t:ce(null,null,t);Ne=l.tagName;if(f.U){u.O=u.O||{};f.U.map((([e,t])=>u.O[t]=l[e]))}if(n&&u.O){for(const e of Object.keys(u.O)){if(l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){u.O[e]=l[e]}}}u.M=null;u.o|=4;e.T=u;u.F=a.F=l.shadowRoot||l;Me=!!(f.o&1)&&!(f.o&128);{Re=l["s-cr"];Fe=false}ze(a,u,n);{b.o|=1;if(Le){He(u.F);for(const e of Be){const t=e.L;if(!t["s-ol"]&&S.document){const e=S.document.createTextNode("");e["s-nr"]=t;Ve(t.parentNode,t["s-ol"]=e,t)}}for(const e of Be){const t=e.L;const l=e.P;if(l){const e=l.parentNode;let n=l.nextSibling;{let o=(s=t["s-ol"])==null?void 0:s.previousSibling;while(o){let s=(r=o["s-nr"])!=null?r:null;if(s&&s["s-sn"]===t["s-sn"]&&e===(s.__parentNode||s.parentNode)){s=s.nextSibling;while(s===t||(s==null?void 0:s["s-sr"])){s=s==null?void 0:s.nextSibling}if(!s||!s["s-nr"]){n=s;break}}o=o.previousSibling}}const i=t.__parentNode||t.parentNode;const f=t.__nextSibling||t.nextSibling;if(!n&&e!==i||f!==n){if(t!==n){if(!t["s-hn"]&&t["s-ol"]){t["s-hn"]=t["s-ol"].parentNode.nodeName}Ve(e,t,n);if(t.nodeType===1&&t.tagName!=="SLOT-FB"){t.hidden=(o=t["s-ih"])!=null?o:false}}}t&&typeof l["s-rf"]==="function"&&l["s-rf"](l)}else{if(t.nodeType===1){if(n){t["s-ih"]=(i=t.hidden)!=null?i:false}t.hidden=true}}}}if(Fe){G(u.F)}b.o&=-2;Be.length=0}Re=void 0};var Ge=(e,t)=>{if(t&&!e.A&&t["s-p"]){const n=t["s-p"].push(new Promise((s=>e.A=()=>{t["s-p"].splice(n-1,1);s()})))}};var Je=(e,t)=>{{e.o|=16}if(e.o&4){e.o|=512;return}Ge(e,e.D);const n=()=>Ke(e,t);if(t){queueMicrotask((()=>{n()}));return}return P(n)};var Ke=(e,t)=>{const n=e.$hostElement$;const s=se("scheduleUpdate",e.i.m);const r=e.t;if(!r){throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let o;if(t){{e.o|=256;if(e.W){e.W.map((([e,t])=>st(r,e,t,n)));e.W=void 0}}o=st(r,"componentWillLoad",void 0,n)}else{o=st(r,"componentWillUpdate",void 0,n)}o=Qe(o,(()=>st(r,"componentWillRender",void 0,n)));s();return Qe(o,(()=>Ze(e,r,t)))};var Qe=(e,t)=>Xe(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var Xe=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var Ze=async(e,t,n)=>{var s;const r=e.$hostElement$;const o=se("update",e.i.m);const i=r["s-rc"];if(n){fe(e)}const l=se("render",e.i.m);{et(e,t,r,n)}if(i){i.map((e=>e()));r["s-rc"]=void 0}l();o();{const t=(s=r["s-p"])!=null?s:[];const n=()=>tt(e);if(t.length===0){n()}else{Promise.all(t).then(n);e.o|=4;t.length=0}}};var et=(e,t,n,s)=>{try{t=t.render();{e.o&=-17}{e.o|=2}{{{Ye(e,t,s)}}}}catch(t){v(t,e.$hostElement$)}return null};var tt=e=>{const t=e.i.m;const n=e.$hostElement$;const s=se("postUpdate",t);const r=e.t;const o=e.D;st(r,"componentDidRender",void 0,n);if(!(e.o&64)){e.o|=64;{rt(n)}st(r,"componentDidLoad",void 0,n);s();{e.p(n);if(!o){nt()}}}else{st(r,"componentDidUpdate",void 0,n);s()}{e.v(n)}{if(e.A){e.A();e.A=void 0}if(e.o&512){L((()=>Je(e,false)))}e.o&=-517}};var nt=t=>{L((()=>be(S,"appload",{detail:{namespace:e}})))};var st=(e,t,n,s)=>{if(e&&e[t]){try{return e[t](n)}catch(e){v(e,s)}}return void 0};var rt=e=>{var n;return e.classList.add((n=t.hydratedSelectorName)!=null?n:"hydrated")};var ot=(e,t)=>f(e).l.get(t);var it=(e,t,n,s)=>{const r=f(e);if(!r){return}if(!r){throw new Error(`Couldn't find host element for "${s.m}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`)}const o=r.$hostElement$;const i=r.l.get(t);const l=r.o;const a=r.t;n=we(n,s.I[t][0]);const c=Number.isNaN(i)&&Number.isNaN(n);const u=n!==i&&!c;if((!(l&8)||i===void 0)&&u){r.l.set(t,n);if(a){if(s._&&l&128){const e=s._[t];if(e){e.map((e=>{try{a[e](n,i,t)}catch(e){v(e,o)}}))}}if((l&(2|16))===2){if(a.componentShouldUpdate){if(a.componentShouldUpdate(n,i,t)===false){return}}Je(r,false)}}}};var lt=(e,n,s)=>{var r,o;const i=e.prototype;if(n.I||(n._||e.watchers)){if(e.watchers&&!n._){n._=e.watchers}const l=Object.entries((r=n.I)!=null?r:{});l.map((([e,[t]])=>{if(t&31||s&2&&t&32){const{get:r,set:o}=Object.getOwnPropertyDescriptor(i,e)||{};if(r)n.I[e][0]|=2048;if(o)n.I[e][0]|=4096;if(s&1||!r){Object.defineProperty(i,e,{get(){{if((n.I[e][0]&2048)===0){return ot(this,e)}const t=f(this);const s=t?t.t:i;if(!s)return;return s[e]}},configurable:true,enumerable:true})}Object.defineProperty(i,e,{set(r){const i=f(this);if(!i){return}if(o){const s=t&32?this[e]:i.$hostElement$[e];if(typeof s==="undefined"&&i.l.get(e)){r=i.l.get(e)}else if(!i.l.get(e)&&s){i.l.set(e,s)}o.apply(this,[we(r,t)]);r=t&32?this[e]:i.$hostElement$[e];it(this,e,r,n);return}{if((s&1)===0||(n.I[e][0]&4096)===0){it(this,e,r,n);if(s&1&&!i.t){i.h.then((()=>{if(n.I[e][0]&4096&&i.t[e]!==i.l.get(e)){i.t[e]=r}}))}return}const o=()=>{const s=i.t[e];if(!i.l.get(e)&&s){i.l.set(e,s)}i.t[e]=we(r,t);it(this,e,i.t[e],n)};if(i.t){o()}else{i.h.then((()=>o()))}}}})}else if(s&1&&t&64){Object.defineProperty(i,e,{value(...t){var n;const s=f(this);return(n=s==null?void 0:s.u)==null?void 0:n.then((()=>{var n;return(n=s.t)==null?void 0:n[e](...t)}))}})}}));if(s&1){const s=new Map;i.attributeChangedCallback=function(e,r,o){b.jmp((()=>{var l;const a=s.get(e);if(this.hasOwnProperty(a)&&t.lazyLoad){o=this[a];delete this[a]}else if(i.hasOwnProperty(a)&&typeof this[a]==="number"&&this[a]==o){return}else if(a==null){const t=f(this);const s=t==null?void 0:t.o;if(t&&s&&!(s&8)&&s&128&&o!==r){const s=t.t;const i=(l=n._)==null?void 0:l[e];i==null?void 0:i.forEach((t=>{if(s[t]!=null){s[t].call(s,o,r,e)}}))}return}const c=Object.getOwnPropertyDescriptor(i,a);o=o===null&&typeof this[a]==="boolean"?false:o;if(o!==this[a]&&(!c.get||!!c.set)){this[a]=o}}))};e.observedAttributes=Array.from(new Set([...Object.keys((o=n._)!=null?o:{}),...l.filter((([e,t])=>t[0]&31)).map((([e,t])=>{var r;const o=t[1]||e;s.set(o,e);if(t[0]&512){(r=n.U)==null?void 0:r.push([e,o])}return o}))]))}}return e};var ft=async(e,t,n,s)=>{let r;if((t.o&32)===0){t.o|=32;const s=n.S;if(s){const s=h(n,t);if(s&&"then"in s){const e=re();r=await s;e()}else{r=s}if(!r){throw new Error(`Constructor for "${n.m}#${t.B}" was not found`)}if(!r.isProxied){{n._=r.watchers}lt(r,n,2);r.isProxied=true}const o=se("createInstance",n.m);{t.o|=8}try{new r(t)}catch(t){v(t,e)}{t.o&=-9}{t.o|=128}o();at(t.t,e)}else{r=e.constructor;const n=e.localName;customElements.whenDefined(n).then((()=>t.o|=128))}if(r&&r.style){let e;if(typeof r.style==="string"){e=r.style}const t=ae(n);if(!p.has(t)){const s=se("registerStyles",n.m);ie(t,e,!!(n.o&1));s()}}}const o=t.D;const i=()=>Je(t,true);if(o&&o["s-rc"]){o["s-rc"].push(i)}else{i()}};var at=(e,t)=>{{st(e,"connectedCallback",void 0,t)}};var ct=e=>{if((b.o&1)===0){const t=f(e);if(!t){return}const n=t.i;const s=se("connectedCallback",n.m);if(!(t.o&1)){t.o|=1;{if(n.o&(4|8)){ut(e)}}{let n=e;while(n=n.parentNode||n.host){if(n["s-p"]){Ge(t,t.D=n);break}}}if(n.I){Object.entries(n.I).map((([t,[n]])=>{if(n&31&&e.hasOwnProperty(t)){const n=e[t];delete e[t];e[t]=n}}))}{ft(e,t,n)}}else{mt(e,t,n.H);if(t==null?void 0:t.t){at(t.t,e)}else if(t==null?void 0:t.h){t.h.then((()=>at(t.t,e)))}}s()}};var ut=e=>{if(!S.document){return}const t=e["s-cr"]=S.document.createComment("");t["s-cn"]=true;Ve(e,t,e.firstChild)};var vt=(e,t)=>{{st(e,"disconnectedCallback",void 0,t||e)}};var dt=async e=>{if((b.o&1)===0){const t=f(e);{if(t==null?void 0:t.q){t.q.map((e=>e()));t.q=void 0}}if(t==null?void 0:t.t){vt(t.t,e)}else if(t==null?void 0:t.h){t.h.then((()=>vt(t.t,e)))}}if(oe.has(e)){oe.delete(e)}if(e.shadowRoot&&oe.has(e.shadowRoot)){oe.delete(e.shadowRoot)}};var ht=(e,t={})=>{var n;if(!S.document){console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");return}const s=se();const r=[];const o=t.exclude||[];const i=S.customElements;const l=S.document.head;const a=l.querySelector("meta[charset]");const u=S.document.createElement("style");const v=[];let d;let h=true;Object.assign(b,t);b.$=new URL(t.resourcesUrl||"./",S.document.baseURI).href;let p=false;e.map((e=>{e[1].map((t=>{var n;const s={o:t[0],m:t[1],I:t[2],H:t[3]};if(s.o&4){p=true}{s.I=t[2]}{s.H=t[3]}{s.U=[]}{s._=(n=t[4])!=null?n:{}}const l=s.m;const a=class extends HTMLElement{constructor(e){super(e);this.hasRegisteredEventListeners=false;e=this;c(e,s);if(s.o&1){{if(!e.shadowRoot){Y.call(e,s)}else{if(e.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${s.m}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}}connectedCallback(){const e=f(this);if(!e){return}if(!this.hasRegisteredEventListeners){this.hasRegisteredEventListeners=true;mt(this,e,s.H)}if(d){clearTimeout(d);d=null}if(h){v.push(this)}else{b.jmp((()=>ct(this)))}}disconnectedCallback(){b.jmp((()=>dt(this)));b.raf((()=>{var e;const t=f(this);if(!t){return}const n=v.findIndex((e=>e===this));if(n>-1){v.splice(n,1)}if(((e=t==null?void 0:t.T)==null?void 0:e.F)instanceof Node&&!t.T.F.isConnected){delete t.T.F}}))}componentOnReady(){var e;return(e=f(this))==null?void 0:e.h}};if(!(s.o&1)&&s.o&256){{{te(a.prototype)}}}s.S=e[0];if(!o.includes(l)&&!i.get(l)){r.push(l);i.define(l,lt(a,s,1))}}))}));if(r.length>0){if(p){u.textContent+=y}{u.textContent+=r.sort()+m}if(u.innerHTML.length){u.setAttribute("data-styles","");const e=(n=b.j)!=null?n:A(S.document);if(e!=null){u.setAttribute("nonce",e)}l.insertBefore(u,a?a.nextSibling:l.firstChild)}}h=false;if(v.length){v.map((e=>e.connectedCallback()))}else{{b.jmp((()=>d=setTimeout(nt,30)))}}s()};var pt=(e,t)=>t;var mt=(e,t,n,s)=>{if(n&&S.document){n.map((([n,s,r])=>{const o=wt(S.document,e,n);const i=yt(t,r);const l=St(n);b.ael(o,s,i,l);(t.q=t.q||[]).push((()=>b.rel(o,s,i,l)))}))}};var yt=(e,t)=>n=>{var s;try{{if(e.o&256){(s=e.t)==null?void 0:s[t](n)}else{(e.W=e.W||[]).push([t,n])}}}catch(t){v(t,e.$hostElement$)}};var wt=(e,t,n)=>{if(n&4){return e}if(n&8){return S}if(n&16){return e.body}return t};var St=e=>j?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var gt=e=>b.j=e;export{pt as F,g as H,Se as a,ht as b,ge as c,ve as d,T as e,n as g,ce as h,k as p,a as r,gt as s};
-//# sourceMappingURL=p-PqnYwNKt.js.map
+//# sourceMappingURL=p-DtIEDtZ8.js.map