@infineon/infineon-design-system-stencil 39.5.1--canary.2128.0bbcf8ad9dfd8faa9be4616d66bfb77783eaacbf.0 → 39.5.1--canary.2128.32855eaced35e683ae58f61e74597b349ac6110b.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":[]}