@infineon/infineon-design-system-stencil 30.9.3--canary.1496.9fc4de9852ba9ec2e36ce3e0ff89d8fddb5acdc5.0 → 30.9.3--canary.1679.8d0c83c3f0040ae0386585c5203298c7d94911f3.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["tabsCss","IfxTabsStyle0","IfxTabs","updateBorderOnWindowResize","this","updateBorderAndFocus","setActiveAndFocusedTab","index","tabObjects","length","_a","disabled","internalActiveTabIndex","internalFocusedTabIndex","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","internalOrientation","orientation","toLowerCase","activeTabIndex","ifxTabChange","emit","previousTab","currentTab","onSlotChange","updateTabStyles","tabHeaderRefs","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","tabRefs","setDefaultOrientation","validOrientations","lowercaseOrientation","includes","componentDidLoad","addEventListener","onTabFocus","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","fullWidth","handleClick","handleKeyDown","ev","key","shiftKey","preventDefault","previouslyActiveTabIndex","render","h","class","role","ref","onMouseDown","event","onClick","_","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);\n  width: 100%;\n}\n\n.tabs.horizontal {\n  flex-direction: column;\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\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.tab-item {\n  // Reduced padding values\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\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: none;\n    border-radius: 1px;\n    box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\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}","//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\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() internalFocusedTabIndex: number = 0;\n  @State() tabRefs: HTMLElement[] = [];\n  @State() tabHeaderRefs: HTMLElement[] = [];\n  @State() disabledTabs: string[] = [];\n  @State() tabObjects: any[] = [];\n\n  @Event() ifxTabChange: EventEmitter;\n\n  @Listen('resize', {target: 'window'})\n  updateBorderOnWindowResize() {\n    this.updateBorderAndFocus();\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    }\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\n\n  componentWillLoad() {\n    this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n    if (this.internalActiveTabIndex !== this.activeTabIndex) {\n      this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n    };\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\n  setDefaultOrientation() {\n    const validOrientations = ['horizontal', 'vertical'];\n    const lowercaseOrientation = this.orientation.toLowerCase();\n\n    if (!validOrientations.includes(lowercaseOrientation)) {\n      this.internalOrientation = 'horizontal';\n    } else this.internalOrientation = this.orientation;\n  }\n\n  componentDidLoad() {\n    this.updateBorderAndFocus();\n    // Add keyboard event listeners for each tab header\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.addEventListener('focus', this.onTabFocus(index));\n    });\n\n  }\n\n  onTabFocus(index) {\n    return () => {\n      this.internalFocusedTabIndex = index;\n    };\n  }\n\n  disconnectedCallback() {\n    // Remove keyboard event listeners when component is unmounted\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.removeEventListener('focus', this.onTabFocus(index));\n    });\n  }\n  componentDidUpdate() {\n    this.updateBorderAndFocus();\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    this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n    if (!tab.disabled) this.internalActiveTabIndex = index;\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      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n        const previouslyActiveTabIndex = this.internalActiveTabIndex;\n        this.internalActiveTabIndex = this.internalFocusedTabIndex;\n        this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\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        <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}"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s}from"./p-6b122987.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, 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 o=n;const i=class{constructor(s){e(this,s);this.segmentSelect=t(this,"segmentSelect",5);this.icon=undefined;this.segmentIndex=undefined;this.selected=false;this.value=undefined}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:"65b451c80bc02f4c9fa388fa8c3d37db370c88c6",class:`segment ${this.selected?"segment--selected":""}`,tabIndex:0,onClick:()=>{this.handleSegmentClick()},onKeyDown:e=>{this.handleSegmentKeyDown(e)}},s("ifx-icon",{key:"6e2e6d4115dcf308a4ae09f412b90c7d1c6f6bce",icon:this.icon})," ",s("slot",{key:"0fbdd8238a3ebe51e47e17c7b4ad2e1b119dbd15"}))}};i.style=o;export{i as ifx_segment};
+//# sourceMappingURL=p-a16d5258.entry.js.map

package/dist/infineon-design-system-stencil/p-a16d5258.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["segmentCss","IfxSegmentStyle0","Segment","handleSegmentClick","this","selected","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,ixBACnB,MAAAC,EAAeD,E,MCOFE,EAAO,M,oIAK6B,M,qBAG7C,kBAAAC,GACI,GAAIC,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKE,cAAcC,KAAKH,KAAKI,a,CAGjC,oBAAAC,CAAqBC,GACjB,GAAIA,EAAMC,OAAS,SAAWD,EAAMC,OAAS,QAAS,CAClD,GAAIP,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKE,cAAcC,KAAKH,KAAKI,a,EAIrC,MAAAI,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,WAAWX,KAAKC,SAAW,oBAAsB,KACzDW,SAAU,EACVC,QAAS,KAAOb,KAAKD,oBAAoB,EACzCe,UAAYC,IAAOf,KAAKK,qBAAqBU,EAAE,GAC/CN,EAAA,YAAAC,IAAA,2CAAUM,KAAMhB,KAAKgB,OAAiB,IAACP,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-5dd5e2e3.entry.js → p-a8ccf376.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o,g as i}from"./p-95a83b13.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.col{display:flex;flex-direction:column;gap:12px;padding-right:8px;color:#1D1D1D;font-family:var(--ifx-font-family)}.col ::slotted([slot=title]){box-sizing:border-box;font-weight:600;font-size:1rem;line-height:1.5rem;margin:0;padding:0}.col span{display:flex;flex-direction:column;gap:12px;color:#1D1D1D}.col span ::slotted([slot=link]){box-sizing:border-box;font-weight:400;font-size:1rem;line-height:1.5rem}';const a=t;const f=class{constructor(o){e(this,o)}render(){return o("div",{key:"4cad5415cae80dfff4e7d75e82163bd0ef71f648",class:"col"},o("slot",{key:"e884b90aadc3df6f4ec4ccff44a8e05589277b5c",name:"title"}),o("span",{key:"e29933f15be919b14ea765ccbcf75bcd8c8f19e7","aria-label":"navigation link"},o("slot",{key:"5ae8906786990bc1e0821982fa4f0d7bb9dadc9f",name:"link"})))}get el(){return i(this)}};f.style=a;export{f as ifx_footer_column};
-//# sourceMappingURL=p-5dd5e2e3.entry.js.map
+import{r as e,h as o,g as i}from"./p-6b122987.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.col{display:flex;flex-direction:column;gap:12px;padding-right:8px;color:#1D1D1D;font-family:var(--ifx-font-family)}.col ::slotted([slot=title]){box-sizing:border-box;font-weight:600;font-size:1rem;line-height:1.5rem;margin:0;padding:0}.col span{display:flex;flex-direction:column;gap:12px;color:#1D1D1D}.col span ::slotted([slot=link]){box-sizing:border-box;font-weight:400;font-size:1rem;line-height:1.5rem}';const a=t;const f=class{constructor(o){e(this,o)}render(){return o("div",{key:"4cad5415cae80dfff4e7d75e82163bd0ef71f648",class:"col"},o("slot",{key:"e884b90aadc3df6f4ec4ccff44a8e05589277b5c",name:"title"}),o("span",{key:"e29933f15be919b14ea765ccbcf75bcd8c8f19e7","aria-label":"navigation link"},o("slot",{key:"5ae8906786990bc1e0821982fa4f0d7bb9dadc9f",name:"link"})))}get el(){return i(this)}};f.style=a;export{f as ifx_footer_column};
+//# sourceMappingURL=p-a8ccf376.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as s,g as i}from"./p-6b122987.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.stepper{display:flex;align-items:center}.stepper.compact{justify-content:space-between;align-items:center}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}';const a=r;const p=class{constructor(s){t(this,s);this.ifxChange=e(this,"ifxChange",7);this.activeStep=1;this.indicatorPosition="left";this.showStepNumber=false;this.variant="default";this.stepsCount=undefined;this.shouldEmitEvent=true;this.emittedByClick=false}onStepChange(t){const e=this.getSteps();const s=e[t.detail.previousActiveStep-1];if(s&&!s.complete){s.setAttribute("error","true")}}handleActiveStep(t,e){const s=this.getSteps();if(!this.shouldEmitEvent){this.shouldEmitEvent=true;return}if(!s[t-1].disabled){this.emitIfxChange(t,e)}else{if(t<e){let i=t;this.shouldEmitEvent=false;while(i>=1&&s[i-1].disabled)i--;if(i<1){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}else{let i=t;this.shouldEmitEvent=false;while(i<=this.stepsCount&&s[i-1].disabled)i++;if(i>this.stepsCount){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}}}emitIfxChange(t,e){this.ifxChange.emit({activeStep:t,previousActiveStep:e,totalSteps:this.stepsCount,emittedByClick:this.emittedByClick});this.emittedByClick=false}getSteps(){const t=this.el.querySelectorAll("ifx-step");return t}addStepIdsToStepsAndCountSteps(){const t=this.getSteps();t[t.length-1].lastStep=true;for(let e=0;e<t.length;e++){t[e].stepId=e+1}this.stepsCount=t.length}setActiveStep(t,e=false){this.emittedByClick=e;this.activeStep=t}setStepsBeforeActiveToComplete(){const t=this.getSteps();t.forEach(((t,e)=>{if(e+1<this.activeStep)t.complete=true}))}syncIfxSteps(){const t=this.getSteps();for(let e=0;e<t.length;e++){const s={activeStep:this.activeStep,indicatorPosition:this.indicatorPosition!=="right"?"left":"right",showStepNumber:this.showStepNumber,variant:this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant,setActiveStep:this.setActiveStep.bind(this)};t[e].stepperState=s}}setInitialActiveStep(){this.activeStep=Math.max(1,Math.min(this.stepsCount+(this.variant!=="compact"?1:0),this.activeStep))}componentWillLoad(){this.addStepIdsToStepsAndCountSteps();this.setInitialActiveStep();this.setStepsBeforeActiveToComplete()}componentDidLoad(){this.syncIfxSteps()}componentWillUpdate(){this.syncIfxSteps()}render(){return s("div",{key:"f2e93e259a501fd05a2a80c7397d06a0b8e1ac68","aria-label":"a stepper",role:"navigation",class:`stepper ${this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant} ${this.variant==="compact"?"compact-"+this.indicatorPosition:""}`},this.variant==="compact"&&s("div",{key:"ce3a39478b07bb66339386a4d5628f9f8863a4be",class:"stepper-progress"},s("div",{key:"5a7e0c967387d6b17dfa4dd2e676acc1eed4661a",class:"progress-detail"},`${Math.min(this.activeStep,this.stepsCount)} of ${this.stepsCount}`)),s("div",{key:"8db37824dcce73499eae526a34f17ff85a943e8d",class:`stepper-wrapper`},s("slot",{key:"b8bf71472c5b63c993999dcc41b6694d5f683afd"})))}componentDidRender(){if(this.variant=="compact"){const t=this.el.shadowRoot.querySelector(".stepper-progress");t.style.setProperty("--pb",`${this.activeStep/this.stepsCount*100}%`)}}get el(){return i(this)}static get watchers(){return{activeStep:["handleActiveStep"]}}};p.style=a;export{p as ifx_stepper};
+//# sourceMappingURL=p-b14bd5b7.entry.js.map

package/dist/infineon-design-system-stencil/p-b14bd5b7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stepperCss","IfxStepperStyle0","Stepper","onStepChange","event","steps","this","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","shouldEmitEvent","disabled","emitIfxChange","i","activeStep","stepsCount","ifxChange","emit","totalSteps","emittedByClick","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","indicatorPosition","showStepNumber","variant","bind","setInitialActiveStep","Math","max","min","componentWillLoad","componentDidLoad","componentWillUpdate","render","h","key","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        justify-content: space-between;\n        align-items: center;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\n \n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if (!steps[newStep-1].disabled) {\n            this.emitIfxChange(newStep, oldStep);\n        } else {\n            // If coming from higher step number to the lower step number\n            if (newStep < oldStep) {\n                let i = newStep;\n                this.shouldEmitEvent = false;\n                while (i >= 1 && steps[i-1].disabled) i--;\n                // if all the steps are disabled no change.\n                if (i < 1) {\n                    this.activeStep = oldStep;\n                } else {\n                    this.emitIfxChange(i, oldStep);\n                    this.activeStep = i;\n                }\n            } \n            // If coming from lower step number to the higher step number\n            else {\n                let i = newStep;\n                this.shouldEmitEvent = false;\n                while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                if (i > this.stepsCount) {\n                    this.activeStep = oldStep;\n                } else {\n                    this.emitIfxChange(i, oldStep);\n                    this.activeStep = i;\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    componentDidLoad() {\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = 'a stepper' \n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-c7a73fff.entry.js → p-b5a3fad1.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as r}from"./p-95a83b13.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__title{width:100%;height:fit-content;border-top:1px solid #EEEDED;padding:12px 0}.sidebar__title.no-top-border{border-top:none}.sidebar__title-label{height:20px;font:600 0.875rem/1.25rem "Source Sans 3";text-transform:uppercase;color:#575352;letter-spacing:3px}';const s=i;const o=class{constructor(t){e(this,t)}render(){return t("div",{key:"b663c85d4fe0e56da9dcf04c06e352ef6ac62ac5",class:"sidebar__title"},t("div",{key:"8ebfc682c5756ce08358e761085e6041d5d6513f",class:"sidebar__title-label"},t("slot",{key:"8cfa912b8cdf5bfd30113895e34375d93766dd2e"})))}get el(){return r(this)}};o.style=s;export{o as ifx_sidebar_title};
-//# sourceMappingURL=p-c7a73fff.entry.js.map
+import{r as e,h as t,g as r}from"./p-6b122987.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__title{width:100%;height:fit-content;border-top:1px solid #EEEDED;padding:12px 0}.sidebar__title.no-top-border{border-top:none}.sidebar__title-label{height:20px;font:600 0.875rem/1.25rem "Source Sans 3";text-transform:uppercase;color:#575352;letter-spacing:3px}';const s=i;const o=class{constructor(t){e(this,t)}render(){return t("div",{key:"b663c85d4fe0e56da9dcf04c06e352ef6ac62ac5",class:"sidebar__title"},t("div",{key:"8ebfc682c5756ce08358e761085e6041d5d6513f",class:"sidebar__title-label"},t("slot",{key:"8cfa912b8cdf5bfd30113895e34375d93766dd2e"})))}get el(){return r(this)}};o.style=s;export{o as ifx_sidebar_title};
+//# sourceMappingURL=p-b5a3fad1.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,h as a}from"./p-6b122987.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;align-items:center;padding:4px 16px;border:1px solid #BFBBBB;border-radius:9999px;background-color:#FFFFFF;gap:8px;font-family:var(--ifx-font-family)}.container:hover{cursor:pointer;border-color:#8D8786}.container:active,.container.active{border-color:#1D1D1D}.container:focus:not(:active,.active){outline:none;border-color:#1D1D1D}.container .label-wrapper{text-decoration:none}.container .label-wrapper .label{margin:0;font-weight:400;font-size:1rem;line-height:20px;color:#1D1D1D}';const r=o;const i=class{constructor(a){e(this,a);this.icon=undefined}render(){return a("div",{key:"103aaf52f43ba9b22e337a9984dd353cfe0fe155","aria-label":"a tag",class:"container"},this.icon&&a("ifx-icon",{key:"2f87ba630039cdf93aac9f6ff67660168fd43d60",icon:this.icon}),a("a",{key:"0d77514108965a1fcdd54e41e4ca932eb64d6161",href:"javascript:void(null);",class:"label-wrapper"},a("p",{key:"e15558bac0bcb4273cb4e73ee527f9368f4ce27c",class:"label"},a("slot",{key:"eff616388b80ffc1cd677761b5584554ddc64a4d"}))))}};i.style=r;export{i as ifx_tag};
+//# sourceMappingURL=p-bbaa8d57.entry.js.map

package/dist/infineon-design-system-stencil/{p-b4a3ea1d.entry.js.map → p-bbaa8d57.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tagCss","IfxTagStyle0","Tag","render","h","key","class","this","icon","href"],"sources":["src/components/tag/tag.scss?tag=ifx-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  align-items: center;\n  padding: tokens.$ifxSpace50 tokens.$ifxSpace200;\n  border: 1px solid tokens.$ifxColorEngineering300;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  background-color: tokens.$ifxColorBaseWhite;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n  &:hover {\n    cursor: pointer;\n    border-color: tokens.$ifxColorEngineering400;\n  }\n\n  &:active,\n  &.active {\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  &:focus:not(:active, .active) {\n    outline: none;\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  .label-wrapper {\n    text-decoration: none;\n\n    .label {\n      margin: 0;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: 20px;\n      color: tokens.$ifxColorBaseBlack;\n    }\n  }\n}","import { Component, Prop, h } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-tag',\n  styleUrl: 'tag.scss',\n  shadow: true\n})\nexport class Tag {\n  @Prop() icon: string;\n\n\n\n  render() {\n    return (\n      <div aria-label=\"a tag\" class=\"container\">\n        {this.icon && (\n          <ifx-icon icon={this.icon}></ifx-icon>)}\n        <a href=\"javascript:void(null);\" class=\"label-wrapper\" >\n          <p class=\"label\">\n            <slot />\n          </p>\n        </a>\n      </div>\n\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAS,snBACf,MAAAC,EAAeD,E,MCOFE,EAAG,M,yBAKd,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,QAAQC,MAAM,aAC3BC,KAAKC,MACJJ,EAAA,YAAAC,IAAA,2CAAUG,KAAMD,KAAKC,OACvBJ,EAAA,KAAAC,IAAA,2CAAGI,KAAK,yBAAyBH,MAAM,iBACrCF,EAAA,KAAAC,IAAA,2CAAGC,MAAM,SACPF,EAAA,QAAAC,IAAA,+C","ignoreList":[]}
+{"version":3,"names":["tagCss","IfxTagStyle0","Tag","render","h","key","class","this","icon","href"],"sources":["src/components/tag/tag.scss?tag=ifx-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  align-items: center;\n  padding: tokens.$ifxSpace50 tokens.$ifxSpace200;\n  border: 1px solid tokens.$ifxColorEngineering300;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  background-color: tokens.$ifxColorBaseWhite;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n  &:hover {\n    cursor: pointer;\n    border-color: tokens.$ifxColorEngineering400;\n  }\n\n  &:active,\n  &.active {\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  &:focus:not(:active, .active) {\n    outline: none;\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  .label-wrapper {\n    text-decoration: none;\n\n    .label {\n      margin: 0;\n      font-weight: tokens.$ifxFontWeightRegular;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: 20px;\n      color: tokens.$ifxColorBaseBlack;\n    }\n  }\n}","import { Component, Prop, h } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-tag',\n  styleUrl: 'tag.scss',\n  shadow: true\n})\nexport class Tag {\n  @Prop() icon: string;\n\n\n\n  render() {\n    return (\n      <div aria-label=\"a tag\" class=\"container\">\n        {this.icon && (\n          <ifx-icon icon={this.icon}></ifx-icon>)}\n        <a href=\"javascript:void(null);\" class=\"label-wrapper\" >\n          <p class=\"label\">\n            <slot />\n          </p>\n        </a>\n      </div>\n\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAS,snBACf,MAAAC,EAAeD,E,MCOFE,EAAG,M,6CAKd,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,QAAQC,MAAM,aAC3BC,KAAKC,MACJJ,EAAA,YAAAC,IAAA,2CAAUG,KAAMD,KAAKC,OACvBJ,EAAA,KAAAC,IAAA,2CAAGI,KAAK,yBAAyBH,MAAM,iBACrCF,EAAA,KAAAC,IAAA,2CAAGC,MAAM,SACPF,EAAA,QAAAC,IAAA,+C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-09a43d79.entry.js → p-bc8a4226.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as o,a as i,g as n}from"./p-95a83b13.js";function a(e,t,o,i=20,n=0){const s=[];if(n>=i){return s}const d=e=>{const s=e.assignedNodes().filter((e=>e.nodeType===1));if(s.length>0){const e=s[0].parentElement;return a(e,t,o,i,n+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){s.push(e)}if(e.shadowRoot!=null){s.push(...a(e.shadowRoot,t,o,i,n+1))}else if(e.tagName==="SLOT"){s.push(...d(e))}else{s.push(...a(e,t,o,i,n+1))}}return s}function s(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function d(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function r(e){if(e.getAttribute("tabindex")==="-1"||s(e)||d(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function c(e,t,o){const i=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));i.addEventListener("finish",(()=>{i.commitStyles();i.cancel()}));return i}const l={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const f={fadeIn:[Object.assign(Object.assign({offset:0},l),{opacity:0}),Object.assign(Object.assign({offset:1},l),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},l),{opacity:1}),Object.assign(Object.assign({offset:1},l),{opacity:0})]};const h=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);overflow:hidden;box-sizing:border-box;align-items:stretch}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1;overflow-y:auto}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const b=h;const m=class{constructor(o){e(this,o);this.ifxModalOpen=t(this,"ifxModalOpen",7);this.ifxModalClose=t(this,"ifxModalClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}componentDidLoad(){this.focusableElements=a(this.hostElement.shadowRoot,(e=>s(e)||e.matches("[data-focus-trap-edge]")),r)}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=c(this.modalContainer,f.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxModalOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxModalOpen.emit()}}close(){try{const e=c(this.modalContainer,f.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxModalClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxModalClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}render(){const e=this.variant!=="default";return o(i,{key:"622de26c143196380000861b977a483595799667"},o("div",{key:"62e5820014cbf03a4cda7d39dd8e9f7d58d81635",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"e023841191ff25390e9b5f8b24562f8ec22eb9af",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"10d3e8232f6bc52e6bb337621fe53c96265a6b84","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"83dbaf46f8461430da29f4ec0de615bae86fc1c2",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.caption},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"080b7681bca959116bd2c48741a5fd6a4dc97cd8",class:"modal-content"},o("div",{key:"847772a8f8736914887a869ae7eabd443266ca4e",class:"modal-header"},o("h2",{key:"0ac26f87449e72c39afa3f672ae4c2f44ee4465f",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"dba0bc92c5bb0a695f9449bf146933529da935de",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-24",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"571fca3750ca7df83c0c834e235674639d5e88a7",class:"modal-body"},o("slot",{key:"b7008875ccc46abe0b06d7f10dcc25a6d257ffdf",name:"content"})),o("div",{key:"f6639e282e3f856d648847c91752a7fca3fc3505",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"d12f3e70c2ba8f3ae52e1ec3087ea6dc916c9e92",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"05e2615fda33ac19d61f1845d3df042642634347","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return n(this)}static get watchers(){return{opened:["openedChanged"]}}};m.style=b;export{m as ifx_modal};
-//# sourceMappingURL=p-09a43d79.entry.js.map
+import{r as e,c as t,h as o,a as i,g as n}from"./p-6b122987.js";function a(e,t,o,i=20,n=0){const s=[];if(n>=i){return s}const d=e=>{const s=e.assignedNodes().filter((e=>e.nodeType===1));if(s.length>0){const e=s[0].parentElement;return a(e,t,o,i,n+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){s.push(e)}if(e.shadowRoot!=null){s.push(...a(e.shadowRoot,t,o,i,n+1))}else if(e.tagName==="SLOT"){s.push(...d(e))}else{s.push(...a(e,t,o,i,n+1))}}return s}function s(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function d(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function r(e){if(e.getAttribute("tabindex")==="-1"||s(e)||d(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function c(e,t,o){const i=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));i.addEventListener("finish",(()=>{i.commitStyles();i.cancel()}));return i}const l={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const f={fadeIn:[Object.assign(Object.assign({offset:0},l),{opacity:0}),Object.assign(Object.assign({offset:1},l),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},l),{opacity:1}),Object.assign(Object.assign({offset:1},l),{opacity:0})]};const h=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);overflow:hidden;box-sizing:border-box;align-items:stretch}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1;overflow-y:auto}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const b=h;const m=class{constructor(o){e(this,o);this.ifxModalOpen=t(this,"ifxModalOpen",7);this.ifxModalClose=t(this,"ifxModalClose",7);this.focusableElements=[];this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}};this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true}componentDidLoad(){this.focusableElements=a(this.hostElement.shadowRoot,(e=>s(e)||e.matches("[data-focus-trap-edge]")),r)}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=c(this.modalContainer,f.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxModalOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxModalOpen.emit()}}close(){try{const e=c(this.modalContainer,f.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxModalClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxModalClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}render(){const e=this.variant!=="default";return o(i,{key:"622de26c143196380000861b977a483595799667"},o("div",{key:"62e5820014cbf03a4cda7d39dd8e9f7d58d81635",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"e023841191ff25390e9b5f8b24562f8ec22eb9af",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"10d3e8232f6bc52e6bb337621fe53c96265a6b84","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"83dbaf46f8461430da29f4ec0de615bae86fc1c2",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.caption},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"080b7681bca959116bd2c48741a5fd6a4dc97cd8",class:"modal-content"},o("div",{key:"847772a8f8736914887a869ae7eabd443266ca4e",class:"modal-header"},o("h2",{key:"0ac26f87449e72c39afa3f672ae4c2f44ee4465f",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"dba0bc92c5bb0a695f9449bf146933529da935de",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-24",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"571fca3750ca7df83c0c834e235674639d5e88a7",class:"modal-body"},o("slot",{key:"b7008875ccc46abe0b06d7f10dcc25a6d257ffdf",name:"content"})),o("div",{key:"f6639e282e3f856d648847c91752a7fca3fc3505",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"d12f3e70c2ba8f3ae52e1ec3087ea6dc916c9e92",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"05e2615fda33ac19d61f1845d3df042642634347","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return n(this)}static get watchers(){return{opened:["openedChanged"]}}};m.style=b;export{m as ifx_modal};
+//# sourceMappingURL=p-bc8a4226.entry.js.map

package/dist/infineon-design-system-stencil/p-bc8a4226.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModalStyle0","IfxModal","this","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","showModal","key","doBeforeClose","opened","componentDidLoad","hostElement","el","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxModalOpen","emit","err","close","ifxModalClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","closeOnOverlayClick","handleButtonsSlotChange","e","currentTarget","assignedElements","childElementCount","slotButtonsPresent","render","isAlertVariant","variant","h","Host","ref","class","onClick","onFocus","tabindex","size","role","caption","alertIcon","icon","showCloseButton","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family);\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxModalOpen: EventEmitter;\n  @Event() ifxModalClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxModalOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxModalOpen.emit();\n\n    }\n\n\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxModalClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxModalClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" /*onSlotchange={() => console.log('slots children modified')}*/ />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a as s,g as h}from"./p-6b122987.js";const n=".ifx-content-switcher{background-color:#FFFFFF;border:1px solid #BFBBBB;border-radius:9999px;height:36px;width:fit-content;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}.ifx-content-switcher ::slotted(ifx-content-switcher-item){position:relative}.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child){left:-1px;margin-right:-1px}.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child){right:-1px;margin-left:-1px}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider){width:1px;height:20px;background-color:#8D8786;margin:0px 1px;visibility:visible}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden){visibility:hidden}";const r=n;const c=class{constructor(e){t(this,e);this.ifxChange=i(this,"ifxChange",7);this.eventHandlers=new Map;this.items=undefined;this.activeIndex=-1;this.hoverIndex=-1;this.focusIndex=-1;this.dividers=Array()}componentWillLoad(){this.items=Array.from(this.el.children);this.initializeDividers();this.addEventListeners();this.ensureSingleSelectedItem()}disconnectedCallback(){this.removeEventListeners()}initializeDividers(){this.items.forEach(((t,i)=>{if(i<this.items.length-1){const i=document.createElement("div");i.classList.add("ifx-content-switcher-divider");t.after(i);this.dividers.push(i)}}))}addEventListeners(){this.items.forEach(((t,i)=>{const e={click:()=>this.selectItem(i),mouseenter:()=>this.handleHover(i,true),mouseleave:()=>this.handleHover(i,false),focus:()=>this.handleFocus(i,true),blur:()=>this.handleFocus(i,false)};Object.keys(e).forEach((i=>{t.addEventListener(i,e[i])}));this.eventHandlers.set(t,e)}))}removeEventListeners(){this.eventHandlers.forEach(((t,i)=>{Object.keys(t).forEach((e=>{i.removeEventListener(e,t[e])}))}));this.eventHandlers.clear()}ensureSingleSelectedItem(){this.items.forEach(((t,i)=>{if(t.hasAttribute("selected")){if(this.activeIndex<0){this.selectItem(i)}else{t.removeAttribute("selected")}}}))}handleHover(t,i){this.hoverIndex=i?t:-1;this.updateDividersOfItem(t)}handleFocus(t,i){this.focusIndex=i?t:-1;this.updateDividersOfItem(t)}updateDividersOfItem(t){if(t<this.items.length-1){this.updateDividerVisibility(t)}if(t>0){this.updateDividerVisibility(t-1)}}updateDividerVisibility(t){const i=new Set([this.activeIndex,this.activeIndex-1,this.hoverIndex,this.hoverIndex-1,this.focusIndex,this.focusIndex-1]);this.setDividerVisibility(t,i.has(t))}setDividerVisibility(t,i){if(this.dividers[t]){this.dividers[t].classList.toggle("hidden",i)}}selectItem(t){if(t===this.activeIndex)return;const i=this.activeIndex;if(i>=0){this.items[i].removeAttribute("selected")}this.activeIndex=t;this.items[t].setAttribute("selected","true");this.ifxChange.emit({oldValue:this.getValueOfItem(i),newValue:this.getValueOfItem(t)});this.updateDividersOfItem(i);this.updateDividersOfItem(t)}getValueOfItem(t){if(this.items[t]==null)return t.toLocaleString();return this.items[t].getAttribute("value")||t.toLocaleString()}render(){return e(s,{key:"0c50e18a9ac86fb7be75a049c82bb73bbad834ec"},e("div",{key:"6b17a332e6be8a261d7e70143dd60bc51bf637df",class:"ifx-content-switcher",role:"group"},e("slot",{key:"23a9d14ad25b16d4b3f6411199765b74ef1b9d62"})))}get el(){return h(this)}};c.style=r;export{c as ifx_content_switcher};
+//# sourceMappingURL=p-bddc382a.entry.js.map

package/dist/infineon-design-system-stencil/p-bddc382a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["contentSwitcherCss","IfxContentSwitcherStyle0","ContentSwitcher","this","eventHandlers","Map","Array","componentWillLoad","items","from","el","children","initializeDividers","addEventListeners","ensureSingleSelectedItem","disconnectedCallback","removeEventListeners","forEach","item","index","length","divider","document","createElement","classList","add","after","dividers","push","handlers","click","selectItem","mouseenter","handleHover","mouseleave","focus","handleFocus","blur","Object","keys","event","addEventListener","set","removeEventListener","clear","hasAttribute","activeIndex","removeAttribute","isActive","hoverIndex","updateDividersOfItem","focusIndex","itemIndex","updateDividerVisibility","dividerIndex","hiddenDividers","Set","setDividerVisibility","has","hidden","toggle","oldIndex","setAttribute","ifxChange","emit","oldValue","getValueOfItem","newValue","toLocaleString","getAttribute","render","h","Host","key","class","role"],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    height: tokens.$ifxSize450;\n    width: fit-content;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & ::slotted(ifx-content-switcher-item) {\n        position: relative;\n        // top: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:first-child) {\n        left: -1px;\n        margin-right: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:last-child) {\n        right: -1px;\n        margin-left: -1px;\n    }\n\n    // Dividers\n    & ::slotted(.ifx-content-switcher-divider) {\n        width: tokens.$ifxSize12;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorEngineering400;\n        margin: 0px 1px;\n        visibility: visible;\n    }\n\n    & ::slotted(.ifx-content-switcher-divider.hidden) {\n        visibility: hidden;\n    }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\n@Component({\n  tag: 'ifx-content-switcher',\n  styleUrl: './content-switcher.scss',\n  shadow: true,\n})\nexport class ContentSwitcher {\n  @Element() el: HTMLElement;\n\n  @State() items: Element[];\n  @State() activeIndex = -1;\n  @State() hoverIndex: number = -1;\n  @State() focusIndex: number = -1;\n\n  @State() dividers: Element[] = Array();\n\n  @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n  private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n  componentWillLoad() {\n    this.items = Array.from(this.el.children);\n    this.initializeDividers();\n    this.addEventListeners();\n    this.ensureSingleSelectedItem();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n  }\n\n  /**\n   * Initialize the dividers between items.\n   */\n  initializeDividers() {\n    this.items.forEach((item, index) => {\n      if (index < this.items.length - 1) {\n        const divider = document.createElement('div');\n        divider.classList.add('ifx-content-switcher-divider');\n        item.after(divider);\n        this.dividers.push(divider);\n      }\n    });\n  }\n\n  /**\n   * Add event listeners for each item.\n   */\n  addEventListeners() {\n    this.items.forEach((item, index) => {\n      const handlers = {\n        click: () => this.selectItem(index),\n        mouseenter: () => this.handleHover(index, true),\n        mouseleave: () => this.handleHover(index, false),\n        focus: () => this.handleFocus(index, true),\n        blur: () => this.handleFocus(index, false),\n      };\n\n      Object.keys(handlers).forEach(event => {\n        item.addEventListener(event, handlers[event]);\n      });\n\n      this.eventHandlers.set(item, handlers);\n    });\n  }\n\n  /**\n   * Remove all event listeners.\n   */\n  removeEventListeners() {\n    this.eventHandlers.forEach((handlers, item) => {\n      Object.keys(handlers).forEach(event => {\n        item.removeEventListener(event, handlers[event]);\n      });\n    });\n    this.eventHandlers.clear();\n  }\n\n  /**\n   * Ensure that only one item is selected at a time.\n   */\n  ensureSingleSelectedItem() {\n    this.items.forEach((item, index) => {\n      if (item.hasAttribute('selected')) {\n        if (this.activeIndex < 0) {\n          this.selectItem(index);\n        } else {\n          item.removeAttribute('selected');\n        }\n      }\n    });\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is hovered.\n   */\n  handleHover(index: number, isActive: boolean) {\n    this.hoverIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is focused.\n   */\n  handleFocus(index: number, isActive: boolean) {\n    this.focusIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Update visibility of dividers adjacent to a specific item.\n   * @param itemIndex - Index of the item.\n   */\n  updateDividersOfItem(itemIndex: number) {\n    if (itemIndex < this.items.length - 1) {\n      this.updateDividerVisibility(itemIndex);\n    }\n    if (itemIndex > 0) {\n      this.updateDividerVisibility(itemIndex - 1);\n    }\n  }\n\n  /**\n   * Update visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   */\n  updateDividerVisibility(dividerIndex: number) {\n    const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n    this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n  }\n\n  /**\n   * Set the visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   * @param hidden - Whether the divider should be hidden.\n   */\n  setDividerVisibility(dividerIndex: number, hidden: boolean) {\n    if (this.dividers[dividerIndex]) {\n      this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n    }\n  }\n\n  /**\n   * Select a specific item.\n   * @param itemIndex - Index of the item to be selected.\n   */\n  selectItem(itemIndex: number) {\n    if (itemIndex === this.activeIndex) return;\n    const oldIndex = this.activeIndex;\n    if (oldIndex >= 0) {\n      this.items[oldIndex].removeAttribute('selected');\n    }\n\n    this.activeIndex = itemIndex;\n    this.items[itemIndex].setAttribute('selected', 'true');\n\n    this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n    this.updateDividersOfItem(oldIndex);\n    this.updateDividersOfItem(itemIndex);\n  }\n\n  /**\n   * Get the value property of the item at a specific index.\n   * Falls back to the index if no value is set.\n   * \n   * @param index - Index of the item. \n   * @returns The value of the item.\n   */\n  getValueOfItem(index: number): string {\n    if (this.items[index] == null) return index.toLocaleString();\n    return this.items[index].getAttribute('value') || index.toLocaleString();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ifx-content-switcher\" role=\"group\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAqB,isBAC3B,MAAAC,EAAeD,E,MCQFE,EAAe,M,8DAYlBC,KAAAC,cAAgE,IAAIC,I,uCARpD,E,iBACO,E,iBACA,E,cAEAC,O,CAM/B,iBAAAC,GACEJ,KAAKK,MAAQF,MAAMG,KAAKN,KAAKO,GAAGC,UAChCR,KAAKS,qBACLT,KAAKU,oBACLV,KAAKW,0B,CAGP,oBAAAC,GACEZ,KAAKa,sB,CAMP,kBAAAJ,GACET,KAAKK,MAAMS,SAAQ,CAACC,EAAMC,KACxB,GAAIA,EAAQhB,KAAKK,MAAMY,OAAS,EAAG,CACjC,MAAMC,EAAUC,SAASC,cAAc,OACvCF,EAAQG,UAAUC,IAAI,gCACtBP,EAAKQ,MAAML,GACXlB,KAAKwB,SAASC,KAAKP,E,KAQzB,iBAAAR,GACEV,KAAKK,MAAMS,SAAQ,CAACC,EAAMC,KACxB,MAAMU,EAAW,CACfC,MAAO,IAAM3B,KAAK4B,WAAWZ,GAC7Ba,WAAY,IAAM7B,KAAK8B,YAAYd,EAAO,MAC1Ce,WAAY,IAAM/B,KAAK8B,YAAYd,EAAO,OAC1CgB,MAAO,IAAMhC,KAAKiC,YAAYjB,EAAO,MACrCkB,KAAM,IAAMlC,KAAKiC,YAAYjB,EAAO,QAGtCmB,OAAOC,KAAKV,GAAUZ,SAAQuB,IAC5BtB,EAAKuB,iBAAiBD,EAAOX,EAASW,GAAO,IAG/CrC,KAAKC,cAAcsC,IAAIxB,EAAMW,EAAS,G,CAO1C,oBAAAb,GACEb,KAAKC,cAAca,SAAQ,CAACY,EAAUX,KACpCoB,OAAOC,KAAKV,GAAUZ,SAAQuB,IAC5BtB,EAAKyB,oBAAoBH,EAAOX,EAASW,GAAO,GAChD,IAEJrC,KAAKC,cAAcwC,O,CAMrB,wBAAA9B,GACEX,KAAKK,MAAMS,SAAQ,CAACC,EAAMC,KACxB,GAAID,EAAK2B,aAAa,YAAa,CACjC,GAAI1C,KAAK2C,YAAc,EAAG,CACxB3C,KAAK4B,WAAWZ,E,KACX,CACLD,EAAK6B,gBAAgB,W,MAW7B,WAAAd,CAAYd,EAAe6B,GACzB7C,KAAK8C,WAAaD,EAAW7B,GAAS,EACtChB,KAAK+C,qBAAqB/B,E,CAQ5B,WAAAiB,CAAYjB,EAAe6B,GACzB7C,KAAKgD,WAAaH,EAAW7B,GAAS,EACtChB,KAAK+C,qBAAqB/B,E,CAO5B,oBAAA+B,CAAqBE,GACnB,GAAIA,EAAYjD,KAAKK,MAAMY,OAAS,EAAG,CACrCjB,KAAKkD,wBAAwBD,E,CAE/B,GAAIA,EAAY,EAAG,CACjBjD,KAAKkD,wBAAwBD,EAAY,E,EAQ7C,uBAAAC,CAAwBC,GACtB,MAAMC,EAAiB,IAAIC,IAAI,CAACrD,KAAK2C,YAAa3C,KAAK2C,YAAc,EAAG3C,KAAK8C,WAAY9C,KAAK8C,WAAa,EAAG9C,KAAKgD,WAAYhD,KAAKgD,WAAa,IACjJhD,KAAKsD,qBAAqBH,EAAcC,EAAeG,IAAIJ,G,CAQ7D,oBAAAG,CAAqBH,EAAsBK,GACzC,GAAIxD,KAAKwB,SAAS2B,GAAe,CAC/BnD,KAAKwB,SAAS2B,GAAc9B,UAAUoC,OAAO,SAAUD,E,EAQ3D,UAAA5B,CAAWqB,GACT,GAAIA,IAAcjD,KAAK2C,YAAa,OACpC,MAAMe,EAAW1D,KAAK2C,YACtB,GAAIe,GAAY,EAAG,CACjB1D,KAAKK,MAAMqD,GAAUd,gBAAgB,W,CAGvC5C,KAAK2C,YAAcM,EACnBjD,KAAKK,MAAM4C,GAAWU,aAAa,WAAY,QAE/C3D,KAAK4D,UAAUC,KAAK,CAAEC,SAAU9D,KAAK+D,eAAeL,GAAWM,SAAUhE,KAAK+D,eAAed,KAC7FjD,KAAK+C,qBAAqBW,GAC1B1D,KAAK+C,qBAAqBE,E,CAU5B,cAAAc,CAAe/C,GACb,GAAIhB,KAAKK,MAAMW,IAAU,KAAM,OAAOA,EAAMiD,iBAC5C,OAAOjE,KAAKK,MAAMW,GAAOkD,aAAa,UAAYlD,EAAMiD,gB,CAG1D,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBAAuBC,KAAK,SACrCJ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-28000a30.entry.js → p-c1b1b593.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as n,a as o,g as e}from"./p-95a83b13.js";import{c as i}from"./p-5cdc6210.js";const r=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const s=r;const a=class{constructor(n){t(this,n);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}}render(){return n(o,{key:"a13463972d971f052edc7c7483283b9beb150955"},this.href?n("a",{"aria-disabled":this.disabled,"aria-label":"a clickable icon button",ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.icon})):n("button",{class:this.getClassNames(),type:"button"},n("ifx-icon",{icon:this.icon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return i("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return e(this)}};a.style=s;export{a as ifx_icon_button};
-//# sourceMappingURL=p-28000a30.entry.js.map
+import{r as t,h as n,a as e,g as o}from"./p-6b122987.js";import{c as i}from"./p-5cdc6210.js";const r=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const s=r;const d=class{constructor(n){t(this,n);this.variant=undefined;this.size=undefined;this.disabled=undefined;this.icon=undefined;this.href=undefined;this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}}render(){return n(e,{key:"a13463972d971f052edc7c7483283b9beb150955"},this.href?n("a",{"aria-disabled":this.disabled,"aria-label":"a clickable icon button",ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.icon})):n("button",{class:this.getClassNames(),type:"button"},n("ifx-icon",{icon:this.icon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return i("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return o(this)}};d.style=s;export{d as ifx_icon_button};
+//# sourceMappingURL=p-c1b1b593.entry.js.map

package/dist/infineon-design-system-stencil/p-c1b1b593.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconButtonCss","IfxIconButtonStyle0","IconButton","handleClick","event","this","disabled","stopImmediatePropagation","setFocus","focusableElement","focus","componentWillLoad","shape","render","h","Host","key","href","ref","el","class","getClassNames","undefined","target","rel","icon","type","getVariantClass","variant","getSizeClass","size","classNames"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: var(--ifx-font-family);\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <a\n            aria-disabled={this.disabled}\n            aria-label='a clickable icon button'\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined}\n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAgB,y4EACtB,MAAAC,EAAeD,E,MCSFE,EAAU,M,gJAMI,Q,WACD,O,CAMxB,WAAAC,CAAYC,GACV,GAAIC,KAAKC,SAAU,CACjBF,EAAMG,0B,EAKV,cAAMC,GACJH,KAAKI,iBAAiBC,O,CAGxB,iBAAAC,GACE,GAAIN,KAAKO,QAAU,GAAI,CACrBP,KAAKO,MAAQ,O,EAIjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFX,KAAKY,KACJH,EAAA,qBACiBT,KAAKC,SAAQ,aACjB,0BACXY,IAAMC,GAAQd,KAAKI,iBAAmBU,EACtCC,MAAOf,KAAKgB,gBACZJ,MAAOZ,KAAKC,SAAWD,KAAKY,KAAOK,UACnCC,OAAQlB,KAAKkB,OACbC,IAAKnB,KAAKkB,SAAW,SAAW,sBAAwBD,WAExDR,EAAA,YAAUW,KAAMpB,KAAKoB,QAGvBX,EAAA,UACEM,MAAOf,KAAKgB,gBACZK,KAAK,UAELZ,EAAA,YAAUW,KAAMpB,KAAKoB,Q,CAO/B,eAAAE,GACE,MAAO,GAAGtB,KAAKuB,YAAc,YACzB,YACA,GAAGvB,KAAKuB,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAGxB,KAAKyB,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAGzB,KAAKyB,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAGzB,KAAKyB,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAT,GACE,OAAOU,EACL,kBACA,OAAO1B,KAAKO,QACZP,KAAKyB,MAAQ,OAAOzB,KAAKwB,iBACzB,OAAOxB,KAAKsB,oBACZtB,KAAKC,SAAW,WAAa,G","ignoreList":[]}