@infineon/infineon-design-system-stencil 37.3.1--canary.1964.530e3486d9a790b1814e2a86ae7faa2f9d7086c8.0 → 37.3.1--canary.1962.2df3ba8eb81ab176f223b364df364a5edcb97852.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","IfxDropdownStyle0","Dropdown","constructor","hostRef","this","placement","defaultOpen","internalIsOpen","noAppendToBody","noCloseOnOutsideClick","noCloseOnMenuClick","componentWillLoad","updateSlotContent","watchHandlerIsOpen","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","newValue","oldValue","openDropdown","closeDropdown","watchHandlerDisabled","trigger","disabled","watchHandlerSlot","querySelector","removeEventListener","triggerClickHandler","bind","addEventListener","menu","remove","document","body","append","menuClickHandler","disconnectedCallback","popperInstance","destroy","isOpen","ifxClose","emit","createPopper","ifxOpen","handleOutsideClick","event","target","contains","render","h","key","class"],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n@Component({\n  tag: 'ifx-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true\n})\n\nexport class Dropdown {\n  @Prop() placement: Placement = 'bottom-start';\n\n  // isOpen prop\n  @Prop() defaultOpen: boolean = false;\n  // internal state for isOpen prop\n  @State() internalIsOpen: boolean = false;\n\n  // isOpen prop\n  @Prop() noAppendToBody: boolean = false;\n\n  // Custom events for opening and closing dropdown\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n\n  // determine if dropdown is disabled\n  @Prop() disabled: boolean;\n\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n\n  // Reference to host element\n  @Element() el;\n  // Dropdown trigger and menu\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n\n\n  componentWillLoad() {\n    //maybe not needed\n    this.updateSlotContent();\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-dropdown', framework)\n    }\n  }\n\n  @Watch('defaultOpen')\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n      if (newValue) {\n        this.openDropdown();\n      } else {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchHandlerDisabled(newValue: boolean) {\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n    }\n  }\n\n\n  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\n\n\n  // handling assignment of trigger and menu\n  updateSlotContent() {\n    // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n    }\n    // Remove menu if exists from body\n    if (!this.noAppendToBody) {\n      if (this.menu) {\n        this.menu.remove();\n      }\n      // Get new menu and add to body\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n      // event handler for closing dropdown on menu click\n      document.body.append(this.menu);\n    } else {\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n    }\n    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n    this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  triggerClickHandler() {\n    if (!this.internalIsOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n    // Remove menu if exists\n    if (this.menu) {\n      this.menu.remove();\n    }\n  }\n\n  @Method()\n  async isOpen() {\n    return this.internalIsOpen;\n  }\n\n  @Method()\n  async closeDropdown() {\n    if (this.internalIsOpen) {\n      this.internalIsOpen = false;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n      // Emit close event\n      this.ifxClose.emit();\n    }\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  @Method()\n  async openDropdown() {\n    if (!this.internalIsOpen && !this.disabled) {\n      this.internalIsOpen = true;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = true;\n      (this.menu as unknown as IOpenable).isOpen = true;\n      // Create popper instance for positioning\n      this.popperInstance = createPopper(\n        this.el,\n        this.menu,\n        { placement: this.placement });\n\n      this.ifxOpen.emit();\n    }\n  }\n\n  //emitted by and listening to it from the dropdown menu right now\n  // @Listen('ifxDropdownMenu')\n  // handleDropdownMenuEvents(event: CustomEvent) {\n  //   this.ifxDropdown.emit(event.detail)\n  //   console.log('Selected item received in higher-level parent:');\n  // }\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    // Close dropdown if outside click\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,h as o,g as i}from"./p-b7a462e5.js";import{d as e,t as c}from"./p-0b20eded.js";import{i as s}from"./p-1ecafb97.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem "Source Sans 3";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem "Source Sans 3";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}';const a=r;const n=class{constructor(o){t(this,o);this.errorStates=new Map;this.alignment="vertical";this.groupLabelText="Group Label Text";this.hasErrors=false;this.handleSlotChange=()=>{this.initializeState()}}handleCheckboxError(t){const o=t.target;if(o.tagName==="ifx-checkbox"){this.errorStates.set(o,t.detail);this.updateHasErrors()}}async setGroupError(t){const o=Array.from(this.el.querySelectorAll("ifx-checkbox"));o.forEach((o=>{o.error=t}))}componentWillLoad(){this.initializeState()}componentDidLoad(){if(!s(this.el)){const t=e();c("ifx-checkbox-group",t)}}initializeState(){this.errorStates.clear();const t=Array.from(this.el.querySelectorAll("ifx-checkbox"));t.forEach((t=>{if(!this.errorStates.has(t)){this.errorStates.set(t,t.error||false)}}));this.updateHasErrors()}updateHasErrors(){this.hasErrors=Array.from(this.errorStates.values()).some((t=>t))}render(){return o("div",{key:"2f0835c43f763e2b77a2737961951862f9d39942",class:"checkbox-group-container"},this.showGroupLabel?o("div",{class:"group-label"},this.groupLabelText," *"):"",o("div",{key:"1cd16caf00a68beb981ffc17afcb4b8bc8f24c03",class:`checkbox-group ${this.alignment} ${this.size}`},o("slot",{key:"b541ccfa67e41b33eba1022844c9afe186c2f77c",onSlotchange:this.handleSlotChange})),this.showCaption?o("div",{class:`caption ${this.hasErrors?"error":"default"}`},this.showCaptionIcon?o("div",{class:"caption-icon"},o("ifx-icon",{icon:"c-info-16"})):"",o("div",{class:"caption-text"},this.captionText)):"")}static get formAssociated(){return true}get el(){return i(this)}};n.style=a;export{n as ifx_checkbox_group};
+//# sourceMappingURL=p-24f8b133.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxGroupCss","IfxCheckboxGroupStyle0","CheckboxGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","hasErrors","handleSlotChange","initializeState","handleCheckboxError","event","checkbox","target","tagName","set","detail","updateHasErrors","setGroupError","error","checkboxes","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox-group', framework)\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"mappings":"iIAAA,MAAMA,EAAmB,m0BACzB,MAAAC,EAAeD,E,MCWFE,EAAa,MAP1B,WAAAC,CAAAC,G,UAQUC,KAAAC,YAAyC,IAAIC,IAG7CF,KAAAG,UAAuC,WAGvCH,KAAAI,eAAyB,mBAIxBJ,KAAAK,UAAqB,MAgC9BL,KAAAM,iBAAmB,KACjBN,KAAKO,iBAAiB,C,CA9BxB,mBAAAC,CAAoBC,GAClB,MAAMC,EAAWD,EAAME,OACvB,GAAID,EAASE,UAAY,eAAgB,CACvCZ,KAAKC,YAAYY,IAAIH,EAAUD,EAAMK,QACrCd,KAAKe,iB,EAMT,mBAAMC,CAAcC,GAClB,MAAMC,EAAaC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASb,IACjBA,EAAiBO,MAAQA,CAAK,G,CAInC,iBAAAO,GACExB,KAAKO,iB,CAIP,gBAAAkB,GACE,IAAIC,EAAuB1B,KAAKqB,IAAK,CACnC,MAAMM,EAAYC,IAClBC,EAAe,qBAAsBF,E,EAQjC,eAAApB,GACNP,KAAKC,YAAY6B,QACjB,MAAMZ,EAAaC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASb,IAClB,IAAKV,KAAKC,YAAY8B,IAAIrB,GAAW,CACnCV,KAAKC,YAAYY,IAAIH,EAAWA,EAAiBO,OAAS,M,KAG9DjB,KAAKe,iB,CAGC,eAAAA,GACNf,KAAKK,UAAYc,MAAMC,KAAKpB,KAAKC,YAAY+B,UAAUC,MAAMhB,GAAUA,G,CAGzE,MAAAiB,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BACRrC,KAAKsC,eAAiBH,EAAA,OAAKE,MAAM,eAAerC,KAAKI,eAAc,MAAY,GAChF+B,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBrC,KAAKG,aAAaH,KAAKuC,QACnDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAcxC,KAAKM,oBAE1BN,KAAKyC,YACJN,EAAA,OAAKE,MAAO,WAAWrC,KAAKK,UAAY,QAAU,aAC/CL,KAAK0C,gBAAkBP,EAAA,OAAKE,MAAM,gBAAeF,EAAA,YAAUQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBrC,KAAK4C,cACxB,G","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a as s,g as h}from"./p-b7a462e5.js";import{d as n,t as r}from"./p-0b20eded.js";import{i as c}from"./p-1ecafb97.js";const o=".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 d=o;const l=class{constructor(e){t(this,e);this.ifxChange=i(this,"ifxChange",7);this.activeIndex=-1;this.hoverIndex=-1;this.focusIndex=-1;this.dividers=Array();this.eventHandlers=new Map}componentWillLoad(){this.items=Array.from(this.el.children);this.initializeDividers();this.addEventListeners();this.ensureSingleSelectedItem()}componentDidLoad(){if(!c(this.el)){const t=n();r("ifx-content-switcher",t)}}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)=>{const e=t.getAttribute("selected")==="true"||t.selected;if(e){if(this.activeIndex<0){this.selectItem(i)}else{t.removeAttribute("selected");t.selected=false}}}))}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:"f9c89cb06851f1de2f010e29ac7a18799579b509"},e("div",{key:"274f182b4ad9f2d268b0e2f3ab89ee2beb8a54ad",class:"ifx-content-switcher",role:"group"},e("slot",{key:"5092b067bbcddf9102a36c0197b03dba6c4b8a4c"})))}get el(){return h(this)}};l.style=d;export{l as ifx_content_switcher};
+//# sourceMappingURL=p-310e7e52.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["contentSwitcherCss","IfxContentSwitcherStyle0","ContentSwitcher","constructor","hostRef","this","activeIndex","hoverIndex","focusIndex","dividers","Array","eventHandlers","Map","componentWillLoad","items","from","el","children","initializeDividers","addEventListeners","ensureSingleSelectedItem","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","disconnectedCallback","removeEventListeners","forEach","item","index","length","divider","document","createElement","classList","add","after","push","handlers","click","selectItem","mouseenter","handleHover","mouseleave","focus","handleFocus","blur","Object","keys","event","addEventListener","set","removeEventListener","clear","isSelected","getAttribute","selected","removeAttribute","isActive","updateDividersOfItem","itemIndex","updateDividerVisibility","dividerIndex","hiddenDividers","Set","setDividerVisibility","has","hidden","toggle","oldIndex","setAttribute","ifxChange","emit","oldValue","getValueOfItem","newValue","toLocaleString","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';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\ntype ContentSwitcherItem = Element & {\n  selected: boolean;\n};\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  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-content-switcher', framework)\n    }\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  ensureSingleSelectedItem() {\n    this.items.forEach((item, index) => {\n      const isSelected = (item.getAttribute('selected') === 'true') || (item as ContentSwitcherItem).selected;\n      if (isSelected) {\n        if (this.activeIndex < 0) {\n          this.selectItem(index);\n        } else {\n          item.removeAttribute('selected');\n          (item as ContentSwitcherItem).selected = false;\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":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-507107be.entry.js → p-3c0715cf.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,a as n,g as o}from"./p-b7a462e5.js";import{d as i,t as d}from"./p-e8504e6b.js";import{i as a}from"./p-1ecafb97.js";import{c as r}from"./p-5cdc6210.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;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;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#0A8276;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}';const b=s;const l=class{constructor(t){e(this,t);this.variant="primary";this.theme="default";this.size="m";this.disabled=false;this.target="_self";this.type="button";this.fullWidth=false;this.handleClick=e=>{if(this.el.shadowRoot){const t=this.el.closest("form");if(t){e.preventDefault();if(this.type==="reset"){this.resetClickHandler()}else{const e=document.createElement("button");if(this.type){e.type=this.type}e.style.display="none";t.appendChild(e);e.click();e.remove()}}}}}setInternalHref(e){this.internalHref=e}async setFocus(){this.focusableElement.focus()}insertNativeButton(){this.nativeButton=document.createElement("button");this.nativeButton.type=this.type;this.nativeButton.style.display="none";this.el.closest("form").appendChild(this.nativeButton)}handleFormAndInternalHref(){if(this.el.closest("form")){if(this.el.href){this.el.internalHref=undefined}this.insertNativeButton()}else{this.internalHref=this.href}}handleButtonWidth(){if(this.fullWidth){this.el.style.setProperty("--bw","100%")}else{this.el.style.setProperty("--bw","fit-content")}}componentWillLoad(){this.handleFormAndInternalHref();if(!a(this.el)){const e=i();d("ifx-button",e)}}componentWillRender(){this.handleButtonWidth()}resetClickHandler(){const e=this.el.closest("form");const t=e.querySelectorAll("ifx-text-field, ifx-textarea");t.forEach((e=>{e.reset()}))}handleKeyDown(e){if(e.key===" "||e.key==="Enter"&&!this.disabled){this.focusableElement.click()}}handleHostClick(e){if(this.disabled===true){e.stopImmediatePropagation()}}handleFocus(e){if(this.disabled){e.preventDefault();this.focusableElement.blur()}}render(){return t(n,{key:"4f6edce27cacd5d9859790e028cabf756b65463b"},t("a",{key:"d3a7759dbd2ed5128c5919e187c70ee82abfc643",role:this.href?"link":"button",tabIndex:this.disabled?-1:0,ref:e=>this.focusableElement=e,class:this.getClassNames(),href:!this.disabled?this.internalHref:undefined,target:this.target,onClick:this.handleClick,rel:this.target==="_blank"?"noopener noreferrer":undefined,onFocus:e=>this.handleFocus(e),"aria-disabled":this.disabled?"true":null,"aria-describedby":this.theme==="danger"?"Dangerous action":undefined,"aria-label":this.ariaLabel||undefined},t("slot",{key:"54e7e801f580008fc48688446cf58b304c283067"})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary-${this.theme}`:`${this.variant}`==="tertiary"?`tertiary-${this.theme}`:`${this.theme}`}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 r("btn",this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return o(this)}static get watchers(){return{href:["setInternalHref"]}}};l.style=b;export{l as ifx_button};
-//# sourceMappingURL=p-507107be.entry.js.map
+import{r as e,h as t,a as n,g as o}from"./p-b7a462e5.js";import{d as i,t as d}from"./p-0b20eded.js";import{i as a}from"./p-1ecafb97.js";import{c as r}from"./p-5cdc6210.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;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;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#0A8276;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}';const b=s;const l=class{constructor(t){e(this,t);this.variant="primary";this.theme="default";this.size="m";this.disabled=false;this.target="_self";this.type="button";this.fullWidth=false;this.handleClick=e=>{if(this.el.shadowRoot){const t=this.el.closest("form");if(t){e.preventDefault();if(this.type==="reset"){this.resetClickHandler()}else{const e=document.createElement("button");if(this.type){e.type=this.type}e.style.display="none";t.appendChild(e);e.click();e.remove()}}}}}setInternalHref(e){this.internalHref=e}async setFocus(){this.focusableElement.focus()}insertNativeButton(){this.nativeButton=document.createElement("button");this.nativeButton.type=this.type;this.nativeButton.style.display="none";this.el.closest("form").appendChild(this.nativeButton)}handleFormAndInternalHref(){if(this.el.closest("form")){if(this.el.href){this.el.internalHref=undefined}this.insertNativeButton()}else{this.internalHref=this.href}}handleButtonWidth(){if(this.fullWidth){this.el.style.setProperty("--bw","100%")}else{this.el.style.setProperty("--bw","fit-content")}}componentWillLoad(){this.handleFormAndInternalHref()}componentDidLoad(){if(!a(this.el)){const e=i();d("ifx-button",e)}}componentWillRender(){this.handleButtonWidth()}resetClickHandler(){const e=this.el.closest("form");const t=e.querySelectorAll("ifx-text-field, ifx-textarea");t.forEach((e=>{e.reset()}))}handleKeyDown(e){if(e.key===" "||e.key==="Enter"&&!this.disabled){this.focusableElement.click()}}handleHostClick(e){if(this.disabled===true){e.stopImmediatePropagation()}}handleFocus(e){if(this.disabled){e.preventDefault();this.focusableElement.blur()}}render(){return t(n,{key:"f576e333ecb33a35bfe8418ecdc6fa0616380bd7"},t("a",{key:"625ac29c56e789fcdf6b56d7bead8aba1b287afa",role:this.href?"link":"button",tabIndex:this.disabled?-1:0,ref:e=>this.focusableElement=e,class:this.getClassNames(),href:!this.disabled?this.internalHref:undefined,target:this.target,onClick:this.handleClick,rel:this.target==="_blank"?"noopener noreferrer":undefined,onFocus:e=>this.handleFocus(e),"aria-disabled":this.disabled?"true":null,"aria-describedby":this.theme==="danger"?"Dangerous action":undefined,"aria-label":this.ariaLabel||undefined},t("slot",{key:"ff594217326742db7bc06b25a6f30c1a4b45be04"})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary-${this.theme}`:`${this.variant}`==="tertiary"?`tertiary-${this.theme}`:`${this.theme}`}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 r("btn",this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return o(this)}static get watchers(){return{href:["setInternalHref"]}}};l.style=b;export{l as ifx_button};
+//# sourceMappingURL=p-3c0715cf.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonCss","IfxButtonStyle0","Button","constructor","hostRef","this","variant","theme","size","disabled","target","type","fullWidth","handleClick","ev","el","shadowRoot","parentForm","closest","preventDefault","resetClickHandler","fakeButton","document","createElement","style","display","appendChild","click","remove","setInternalHref","newValue","internalHref","setFocus","focusableElement","focus","insertNativeButton","nativeButton","handleFormAndInternalHref","href","undefined","handleButtonWidth","setProperty","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillRender","formElement","customElements","querySelectorAll","forEach","element","reset","handleKeyDown","key","handleHostClick","event","stopImmediatePropagation","handleFocus","blur","render","h","Host","role","tabIndex","ref","class","getClassNames","onClick","rel","onFocus","ariaLabel","getVariantClass","getSizeClass","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  vertical-align: bottom;\n  display: inline-flex;\n  width: var(--bw, fit-content);\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: tokens.$ifxSize500;\n  padding: 0px tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  font-style: normal;\n  text-decoration: none;\n  user-select: none;\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  width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn.disabled {\n  pointer-events: none;\n}\n\n.btn-default {\n  //default variant=primary; default color=default\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.btn-secondary-default {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorOcean500;\n  border: 1px solid 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-default {\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-danger {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorRed500;\n  border-color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n.btn-secondary-danger {\n  background-color: tokens.$ifxColorBaseWhite;\n  color: tokens.$ifxColorRed500;\n  border: 1px solid tokens.$ifxColorRed500;\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-danger {\n  //combination tertiary + danger not in design\n  background-color: tokens.$ifxColorBaseTransparent;\n  color: tokens.$ifxColorRed500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-inverse {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    opacity: tokens.$ifxOpacity100;\n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorOcean500;\n    pointer-events: none;\n  }\n}\n\n.btn-secondary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    border: 1px solid tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-tertiary-inverse {\n  color: tokens.$ifxColorBaseWhite;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorBaseWhite;\n    opacity: tokens.$ifxOpacity100;\n    pointer-events: none;\n\n  }\n}\n\n.btn {\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  &.btn-xs {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize400;\n    line-height: tokens.$ifxLineHeightXs;\n  }\n\n  &.btn-s {\n    font-size: tokens.$ifxFontSizeS;\n    height: tokens.$ifxSize450;\n    line-height: tokens.$ifxLineHeightS;\n  }\n\n  // &.btn-m { //default\n  //   font-size: tokens.$ifxFontSizeM;\n  //   height: tokens.$ifxSize400;\n  //   line-height: tokens.$ifxLineHeightM;\n  // }\n\n\n  &.btn-l {\n    font-size: tokens.$ifxFontSizeXl;\n    height: tokens.$ifxSize600;\n    line-height: tokens.$ifxLineHeightXl;\n  }\n\n\n\n  &.btn-default: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    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary-default: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      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-secondary:not(:disabled, .disabled) {\n\n    &:hover {\n      background-color: tokens.$ifxColorBerry500;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorBerry500;\n    }\n  }\n\n\n\n  &.btn-danger: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.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n  &.btn-secondary-danger:not(:disabled, .disabled) {\n\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      color: tokens.$ifxColorBaseWhite;\n      background-color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorRed700;\n    }\n  }\n\n\n  &.btn-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.btn-secondary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean500;\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n\n\n  &.btn-tertiary-default: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.$ifxColorOcean600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean700;\n    }\n\n\n  }\n\n\n\n\n\n  &.btn-tertiary-danger: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.$ifxColorRed600;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorRed600;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorRed700;\n    }\n\n  }\n\n\n  &.btn-tertiary-inverse:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorEngineering200;\n\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() size: string = 'm';\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  @Prop() fullWidth: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  private nativeButton: HTMLButtonElement | HTMLInputElement;\n\n  @Watch('href')\n  setInternalHref(newValue: string) {\n    this.internalHref = newValue;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  insertNativeButton() {\n    this.nativeButton = document.createElement('button');\n    this.nativeButton.type = this.type;\n    this.nativeButton.style.display = 'none';\n    this.el.closest('form').appendChild(this.nativeButton);\n  }\n\n  handleFormAndInternalHref() {\n    if (this.el.closest('form')) {\n      if (this.el.href) {\n        this.el.internalHref = undefined;\n      }\n      this.insertNativeButton()\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  handleButtonWidth() {\n    if (this.fullWidth) {\n      this.el.style.setProperty('--bw', '100%');\n    } else {\n      this.el.style.setProperty('--bw', 'fit-content');\n    }\n  }\n\n  componentWillLoad() {\n    this.handleFormAndInternalHref()\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-button', framework)\n    }\n  }\n\n  componentWillRender() {\n    this.handleButtonWidth()\n  }\n\n\n\n  handleClick = (ev: Event) => {\n    if (this.el.shadowRoot) {\n      const parentForm = this.el.closest('form');\n      if (parentForm) {\n        ev.preventDefault();\n\n        if (this.type === 'reset') {\n          // If the button type is 'reset', manually reset all custom form fields\n          this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n        } else {\n          const fakeButton = document.createElement('button');\n          if (this.type) {\n            fakeButton.type = this.type;\n          }\n          fakeButton.style.display = 'none';\n          parentForm.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n  }\n\n  resetClickHandler() {\n    const formElement = this.el.closest('form');\n    const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n    customElements.forEach(element => {\n      element.reset();\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ( ev.key === \" \" || ev.key === 'Enter' && !this.disabled) {\n      this.focusableElement.click();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleHostClick(event: Event) {\n    if (this.disabled === true) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  handleFocus(event: FocusEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      this.focusableElement.blur();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <a\n          role={this.href ? 'link' : 'button'}\n          tabIndex={this.disabled ? -1 : 0}\n          ref={(el) => (this.focusableElement = el)}\n          class={this.getClassNames()}\n          href={!this.disabled ? this.internalHref : undefined}\n          target={this.target}\n          onClick={this.handleClick}\n          rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          onFocus={(event) => this.handleFocus(event)}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n          aria-label={this.ariaLabel || undefined}\n        >\n          <slot></slot>\n        </a>\n      </Host>\n    );\n  }\n\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary-${this.theme}`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary-${this.theme}`\n        : `${this.theme}`;\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',\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as i,g as n}from"./p-b7a462e5.js";import{d as t,t as r}from"./p-0b20eded.js";import{i as a}from"./p-1ecafb97.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.indicator__container .dot__wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276}.indicator__container .number__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276}.indicator__container .number__container .number__wrapper{padding:0 4px;color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.indicator__container .number__container.inverted{background-color:#FFFFFF}.indicator__container .number__container.inverted .number__wrapper{color:#0A8276}';const s=o;const d=class{constructor(i){e(this,i);this.inverted=false;this.variant="number";this.number=0}handleNumber(){this.filteredNumber=!isNaN(this.number)&&this.number>99?"99+":this.number}componentWillLoad(){this.handleNumber()}componentDidLoad(){if(!a(this.el)){const e=t();r("ifx-indicator",e)}}componentWillUpdate(){this.handleNumber()}render(){return i("div",{key:"b84bdef7b1d306b5f80525441155a92d6df8f257","aria-label":this.ariaLabel,class:"indicator__container"},this.variant==="number"&&i("div",{key:"d7176eb85e4ad329e4a205524d1db171db5411b5",class:`number__container ${this.inverted?"inverted":""}`},i("div",{key:"57d0058b768f16f552a5acc6afdb52c28f0276e9",class:"number__wrapper"},this.filteredNumber)),this.variant==="dot"&&i("div",{key:"01e2ecae3feac842c2e635ddd4821bd10f796680",class:"dot__wrapper"}))}get el(){return n(this)}};d.style=s;export{d as ifx_indicator};
+//# sourceMappingURL=p-3cba3e28.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["indicatorCss","IfxIndicatorStyle0","Indicator","constructor","hostRef","this","inverted","variant","number","handleNumber","filteredNumber","isNaN","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","ariaLabel","class"],"sources":["src/components/indicator/indicator.scss?tag=ifx-indicator&encapsulation=shadow","src/components/indicator/indicator.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.indicator__container { \n  & .dot__wrapper { \n  display: flex;\n  width: 8px;\n  height: 8px;\n  justify-content: center;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 50%;\n  background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .number__container {\n  height: 16px;\n  display: inline-flex;\n  padding: 0; \n  min-width: 16px; \n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n  background-color: tokens.$ifxColorOcean500;\n\n    & .number__wrapper {\n      padding: 0 4px;\n      color: tokens.$ifxColorBaseWhite;\n      text-align: center;\n      font-size: tokens.$ifxFontSizeS;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: 16px;\n    }\n\n    &.inverted {\n      background-color: tokens.$ifxColorBaseWhite;\n\n      & .number__wrapper {\n        color: tokens.$ifxColorOcean500;\n      }\n    }\n  }\n}\n\n\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-indicator',\n  styleUrl: 'indicator.scss',\n  shadow: true\n})\nexport class Indicator {\n  @Element() el;\n  @State() filteredNumber: string | number;\n  @Prop() inverted: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() variant: string = 'number'\n  @Prop() number: number = 0;\n\n  handleNumber() {\n    this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;\n  }\n\n  componentWillLoad() { \n    this.handleNumber()\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-indicator', framework)\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleNumber()\n  }\n\n  render() {\n    return (\n      <div aria-label={this.ariaLabel} class='indicator__container'>\n       {this.variant === 'number' && \n       <div class={`number__container ${this.inverted ? 'inverted' : \"\"}`}>\n          <div class=\"number__wrapper\">\n            {this.filteredNumber}\n          </div> \n       </div>}\n       {this.variant === 'dot' && <div class=\"dot__wrapper\"></div>}\n      </div>\n    );\n  }\n}"],"mappings":"iIAAA,MAAMA,EAAe,swBACrB,MAAAC,EAAeD,E,MCSFE,EAAS,MALtB,WAAAC,CAAAC,G,UAQUC,KAAAC,SAAoB,MAEpBD,KAAAE,QAAkB,SAClBF,KAAAG,OAAiB,C,CAEzB,YAAAC,GACEJ,KAAKK,gBAAkBC,MAAMN,KAAKG,SAAWH,KAAKG,OAAS,GAAK,MAAQH,KAAKG,M,CAG/E,iBAAAI,GACEP,KAAKI,c,CAGP,gBAAAI,GACE,IAAIC,EAAuBT,KAAKU,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,gBAAiBF,E,EAIpC,mBAAAG,GACEd,KAAKI,c,CAGP,MAAAW,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAiBjB,KAAKkB,UAAWC,MAAM,wBACrCnB,KAAKE,UAAY,UAClBc,EAAA,OAAAC,IAAA,2CAAKE,MAAO,qBAAqBnB,KAAKC,SAAW,WAAa,MAC3De,EAAA,OAAAC,IAAA,2CAAKE,MAAM,mBACRnB,KAAKK,iBAGVL,KAAKE,UAAY,OAASc,EAAA,OAAAC,IAAA,2CAAKE,MAAM,iB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as a,a as r,g as o}from"./p-b7a462e5.js";import{d,t as i}from"./p-0b20eded.js";import{i as t}from"./p-1ecafb97.js";const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}';const s=c;const l=class{constructor(a){e(this,a);this.direction="vertical";this.href="";this.internalHref="";this.target="_self"}setImgPosition(e){this.alignment=e.detail}handleComponentAdjustment(){const e=this.el.querySelector("ifx-card-image");const a=this.el.querySelector("ifx-card-links");if(!e){this.noImg=true}else this.noImg=false;if(!a){this.noBtns=true}else this.noBtns=false;if(this.href.trim()===""){this.internalHref=undefined}else this.internalHref=this.href}handleClassList(e,a,r){e.classList[a](r)}componentWillLoad(){this.handleComponentAdjustment()}componentDidLoad(){if(!t(this.el)){const e=d();i("ifx-card",e)}}componentWillUpdate(){this.handleComponentAdjustment()}render(){return a(r,{key:"c86e34335adbe7b7db446c3ab3295dc0f3ee96f4"},a("div",{key:"068ec134bcf5dcf3b2007586438632e025a1176a","aria-label":this.ariaLabel,class:`card \n          ${this.noBtns?"noBtns":""}\n          ${this.direction} \n          ${this.alignment}`,role:"region"},this.direction==="horizontal"&&a("div",{key:"f59f464e0172502cffb0a8300107cca3af6c1560",class:"horizontal"},a("a",{key:"97bdbd14405187cc82bbb8ab21ddacd74bd289ed",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"d8c4372067f17adddae10de9b3ad96f5c44b8d37",name:"img"})),a("div",{key:"d3e4311ba021cfc37a4275b1efe7f3d141e005bb",class:"lower__body-wrapper"},a("a",{key:"be05b3dc5bab69b9646b293a9393db416b4beaef",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"0a82ecdb07c9318a2c8dbc83152fdfe37f2ac59c"})),a("div",{key:"f8be0303d5d50a4d7b893a0b4c50496fd05afa36"},a("slot",{key:"75c5dc71b4b4a34eb4850ae412372d47a8a1a961",name:"buttons"})))),this.direction==="vertical"&&a("div",{key:"64c60e3183f998c222898c820efbb8160032b286",class:"vertical"},a("a",{key:"fee051655226a8285dbd4b0f55644bb41fa517b9",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},a("div",{key:"b5ad518719de1c28162b8f3057a3b024ee954a80",class:`card-img ${this.noImg?"noImage":""}`},a("slot",{key:"e35f50d03d91ef0a5662a0aac19fd971876d0919",name:"img"})),a("div",{key:"add1d61b73011f3a323b4e2aa826cc5961b8ec51",class:"upper-body"},a("slot",{key:"7e98358c19ee4bc976e6cf22c47d346a87775554"}))),a("div",{key:"ee7d6a789d09bd5aa57ec5c3e4875627c396d181",class:"lower__body-wrapper"},a("slot",{key:"c80358b0954aa5833e408ff10536f4385797f502",name:"buttons"})))))}get el(){return o(this)}};l.style=s;export{l as ifx_card};
+//# sourceMappingURL=p-3eef70c3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","IfxCardStyle0","Card","constructor","hostRef","this","direction","href","internalHref","target","setImgPosition","event","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","trim","undefined","handleClassList","type","className","classList","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","Host","key","ariaLabel","class","role","name"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  border-radius: 1px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() ariaLabel: string | null;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image')\n    const links = this.el.querySelector('ifx-card-links')\n\n    if (!image) {\n      this.noImg = true;\n    } else this.noImg = false;\n\n    if (!links) {\n      this.noBtns = true;\n    } else this.noBtns = false;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n\n  componentWillLoad() {\n    this.handleComponentAdjustment()\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-card', framework)\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment()\n  }\n\nrender() {\n    return (\n      <Host>\n        <div aria-label={this.ariaLabel} class={\n          `card \n          ${this.noBtns ? 'noBtns' : \"\"}\n          ${this.direction} \n          ${this.alignment}`\n        }\n        role=\"region\">\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body'>\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"mIAAA,MAAMA,EAAU,q0DAChB,MAAAC,EAAeD,E,MCUFE,EAAI,MANjB,WAAAC,CAAAC,G,UASUC,KAAAC,UAAuC,WAGvCD,KAAAE,KAAe,GACdF,KAAAG,aAAuB,GACxBH,KAAAI,OAAiB,O,CAIzB,cAAAC,CAAeC,GACbN,KAAKO,UAAYD,EAAME,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQV,KAAKW,GAAGC,cAAc,kBACpC,MAAMC,EAAQb,KAAKW,GAAGC,cAAc,kBAEpC,IAAKF,EAAO,CACVV,KAAKc,MAAQ,I,MACRd,KAAKc,MAAQ,MAEpB,IAAKD,EAAO,CACVb,KAAKe,OAAS,I,MACTf,KAAKe,OAAS,MAErB,GAAIf,KAAKE,KAAKc,SAAW,GAAI,CAC3BhB,KAAKG,aAAec,S,MACfjB,KAAKG,aAAeH,KAAKE,I,CAGlC,eAAAgB,CAAgBP,EAAIQ,EAAMC,GACxBT,EAAGU,UAAUF,GAAMC,E,CAIrB,iBAAAE,GACEtB,KAAKS,2B,CAGP,gBAAAc,GACE,IAAIC,EAAuBxB,KAAKW,IAAK,CACnC,MAAMc,EAAYC,IAClBC,EAAe,WAAYF,E,EAI/B,mBAAAG,GACE5B,KAAKS,2B,CAGT,MAAAoB,GACI,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAiBhC,KAAKiC,UAAWC,MAC/B,oBACElC,KAAKe,OAAS,SAAW,iBACzBf,KAAKC,yBACLD,KAAKO,YAET4B,KAAK,UAEFnC,KAAKC,YAAc,cAClB6B,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,YAAYlC,KAAKc,MAAQ,UAAY,MAAMd,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,cACtG2B,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,cAAclC,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,cACzE2B,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAKlBpC,KAAKC,YAAc,YAClB6B,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,uBAAuBlC,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,aAAcC,OAAQJ,KAAKI,QAC7G0B,EAAA,OAAAE,IAAA,2CAAKE,MAAO,YAAYlC,KAAKc,MAAQ,UAAY,MAC/CgB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,QAAAE,IAAA,+CAIJF,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,QAAAE,IAAA,2CAAMI,KAAK,e","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as i,h as o,g as t,c as e}from"./p-b7a462e5.js";import{d as n,t as s}from"./p-0b20eded.js";import{i as c}from"./p-1ecafb97.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}';const r=a;const d=class{constructor(o){i(this,o);this.autoCollapse=false}componentDidLoad(){if(!c(this.el)){const i=n();s("ifx-accordion",i)}}async onItemOpen(i){if(this.autoCollapse){const o=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const t of o){const o=t;if(o!==i.target&&await o.open){o.open=false}}}}render(){return o("div",{key:"97d3c07083a4e92ddd3b511c1cdfc5224c024908",class:"accordion-wrapper"},o("slot",{key:"b90c60d5f9ecec11d8f63801d0d6434ac4e868fc"}))}static get delegatesFocus(){return true}get el(){return t(this)}};d.style=r;const f=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}';const l=f;const h=class{constructor(o){i(this,o);this.ifxOpen=e(this,"ifxOpen",7);this.ifxClose=e(this,"ifxClose",7);this.open=false;this.AriaLevel=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.openAccordionItem();this.contentEl=this.el.shadowRoot.querySelector("#accordion-content");if(this.contentEl){this.attachResizeObserver()}}componentDidUpdate(){this.openAccordionItem()}openChanged(i){this.internalOpen=i}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxOpen.emit({isOpen:this.internalOpen})}else{this.ifxClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.contentEl){if(this.internalOpen){this.contentEl.style.height="auto";const i=this.contentEl.scrollHeight;this.contentEl.style.height=`${i}px`;this.contentEl.style.overflow="visible"}else{this.contentEl.style.height="0";this.contentEl.style.overflow="hidden"}}}attachResizeObserver(){const i=this.el.shadowRoot.querySelector(".inner-content");if(i){this.resizeObserver=new ResizeObserver((()=>{if(this.internalOpen){this.openAccordionItem()}}));this.resizeObserver.observe(i)}}handleKeydown(i){const o=i.composedPath();if(!o.includes(this.titleEl)){return}switch(i.key){case"Enter":case" ":i.preventDefault();this.toggleOpen();break}}render(){return o("div",{key:"6f314f7ff18566be1de5fb8c169405df296ba346",class:`accordion-item ${this.internalOpen?"open":""}`},o("div",{key:"0c20697cd02a7af28f481c7104a6b100ad478081",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0",ref:i=>this.titleEl=i},o("span",{key:"d41d3016e5f967f361dea497486673d786ba3d83","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLevel),class:"accordion-icon"},o("ifx-icon",{key:"27308dfb2a2cd73303705521a41f706482cb8da3",icon:"chevron-down-16"})),o("span",{key:"c71749876b23310d9d9037552dcb4800f3b16d13",id:"accordion-caption",class:"accordion-caption"},this.caption)),o("div",{key:"23d3f2ee657ff35edd3d341e883aadb6d1858c79",id:"accordion-content",class:"accordion-content",ref:i=>this.contentEl=i,role:"region","aria-labelledby":"accordion-caption"},o("div",{key:"3716d880d2c26471e515ba60a0b1227758130a09",class:"inner-content"},o("slot",{key:"0ae80ac1d41934a1e3a84e3d3a8bdc97b5cf1e2c"}))))}get el(){return t(this)}static get watchers(){return{open:["openChanged"]}}};h.style=l;export{d as ifx_accordion,h as ifx_accordion_item};
+//# sourceMappingURL=p-41de6046.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["accordionCss","IfxAccordionStyle0","Accordion","constructor","hostRef","this","autoCollapse","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","onItemOpen","event","items","Array","from","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","IfxAccordionItemStyle0","IfxAccordionItem","AriaLevel","internalOpen","componentWillLoad","openAccordionItem","contentEl","shadowRoot","querySelector","attachResizeObserver","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","style","height","updatedHeight","scrollHeight","overflow","innerContentEl","resizeObserver","ResizeObserver","observe","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","role","onClick","tabindex","ref","String","icon","id","caption"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-accordion', framework)\n    }\n  }\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  //transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: flex;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n  private resizeObserver!: ResizeObserver;\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n\n     this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n      if (this.contentEl) {\n        this.attachResizeObserver();\n      }\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.contentEl) {\n      if (this.internalOpen) {\n      this.contentEl.style.height = 'auto'; \n      const updatedHeight = this.contentEl.scrollHeight; \n      this.contentEl.style.height = `${updatedHeight}px`; \n        this.contentEl.style.overflow = 'visible';\n      } else {\n        this.contentEl.style.height = '0';\n        this.contentEl.style.overflow = 'hidden';\n      }\n    }\n  }\n\n  attachResizeObserver() { \n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n\n    if (innerContentEl) {\n      this.resizeObserver = new ResizeObserver(() => {\n        if (this.internalOpen) {\n          this.openAccordionItem();\n        }\n      });\n\n      this.resizeObserver.observe(innerContentEl); \n    }\n  }\n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if(!path.includes(this.titleEl)) { \n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-16\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-7097e349.entry.js → p-50c8c8fa.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as a,h as e,g as r}from"./p-b7a462e5.js";import{d as i,t}from"./p-e8504e6b.js";import{i as h}from"./p-1ecafb97.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}';const c=o;const n=class{constructor(e){s(this,e);this.ifxInput=a(this,"ifxInput",7);this.ifxOpen=a(this,"ifxOpen",7);this.isOpen=true;this.disabled=false;this.autocomplete="on";this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true}}async onNavbarMobile(){this.ifxOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){if(!h(this.el)){const s=i();t("ifx-search-bar",s)}this.setInitialState();this.ifxOpen.emit(this.internalState)}handleInput(s){this.value=s.detail}render(){return e("div",{key:"829eb39822ce060654f82701f32ed0939d34d62c","aria-label":"a search bar","aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?e("div",{class:"search-bar-wrapper"},e("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},e("ifx-icon",{icon:"search-16",slot:"search-icon"})),e("a",{tabindex:"-1",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):e("div",{class:"search-bar__icon-wrapper",onClick:this.handleCloseButton},e("ifx-icon",{icon:"search-16"})))}get el(){return r(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};n.style=c;export{n as ifx_search_bar};
-//# sourceMappingURL=p-7097e349.entry.js.map
+import{r as a,c as s,h as e,g as r}from"./p-b7a462e5.js";import{d as i,t}from"./p-0b20eded.js";import{i as h}from"./p-1ecafb97.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}';const c=o;const n=class{constructor(e){a(this,e);this.ifxInput=s(this,"ifxInput",7);this.ifxOpen=s(this,"ifxOpen",7);this.isOpen=true;this.disabled=false;this.autocomplete="on";this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true}}async onNavbarMobile(){this.ifxOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState();this.ifxOpen.emit(this.internalState)}componentDidLoad(){if(!h(this.el)){const a=i();t("ifx-search-bar",a)}}handleInput(a){this.value=a.detail}render(){return e("div",{key:"20fa4657f0e623c108af83270d2962345b936f7f","aria-label":"a search bar","aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?e("div",{class:"search-bar-wrapper"},e("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},e("ifx-icon",{icon:"search-16",slot:"search-icon"})),e("a",{tabindex:"-1",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):e("div",{class:"search-bar__icon-wrapper",onClick:this.handleCloseButton},e("ifx-icon",{icon:"search-16"})))}get el(){return r(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};n.style=c;export{n as ifx_search_bar};
+//# sourceMappingURL=p-50c8c8fa.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["searchBarCss","IfxSearchBarStyle0","SearchBar","constructor","hostRef","this","isOpen","disabled","autocomplete","handleCloseButton","internalState","ifxOpen","emit","handleFocus","onNavbarMobile","handlePropChange","setInitialState","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","handleInput","event","value","detail","render","h","key","class","maxlength","onIfxInput","bind","icon","slot","tabindex","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  width: 100%; //revert\n  display: flex;\n}\n\n.search-bar {\n  box-sizing: border-box;\n  height: tokens.$ifxSize500;\n  background-color: tokens.$ifxColorBaseWhite;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace200;\n    width: 100%;\n\n    & a {\n      text-decoration: none;\n      font-size: tokens.$ifxFontSizeM;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: tokens.$ifxLineHeightM;\n      color: tokens.$ifxColorOcean500;\n      cursor: pointer;\n    }\n\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n   @Prop() autocomplete: string = \"on\";\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-search-bar', framework)\n    }\n  }\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAe,+3BACrB,MAAAC,EAAeD,E,MCSFE,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAAC,OAAkB,KAClBD,KAAAE,SAAoB,MAMnBF,KAAAG,aAAuB,KAchCH,KAAAI,kBAAoB,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAuBvCL,KAAAQ,YAAc,KACZR,KAAKK,cAAgB,IAAI,C,CApC3B,oBAAMI,GACJT,KAAKM,QAAQC,KAAK,OAClBP,KAAKK,cAAgB,K,CAIvB,gBAAAK,GACEV,KAAKK,cAAgBL,KAAKC,M,CAQ5B,eAAAU,GACEX,KAAKK,cAAgBL,KAAKC,M,CAG5B,iBAAAW,GACEZ,KAAKW,kBACLX,KAAKM,QAAQC,KAAKP,KAAKK,c,CAGzB,gBAAAQ,GACE,IAAIC,EAAuBd,KAAKe,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,iBAAkBF,E,EAIrC,WAAAG,CAAYC,GACVpB,KAAKqB,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,eAAc,gBAAgBzB,KAAKE,SAAUwB,MAAO,cAAc1B,KAAKK,cAAgB,OAAS,YAC7GL,KAAKK,cACJmB,EAAA,OAAKE,MAAM,sBACTF,EAAA,oBAAkBrB,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUmB,MAAOrB,KAAKqB,MAAOM,UAAW3B,KAAK2B,UAAWC,WAAY5B,KAAKmB,YAAYU,KAAK7B,OAC1JwB,EAAA,YAAUM,KAAK,YAAYC,KAAK,iBAGlCP,EAAA,KAAGQ,SAAS,KAAKC,KAAK,qBAAqBC,QAASlC,KAAKI,mBAAiB,UAG5EoB,EAAA,OAAKE,MAAM,2BAA2BQ,QAASlC,KAAKI,mBAClDoB,EAAA,YAAUM,KAAK,e","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,h as o,g as i}from"./p-b7a462e5.js";import{d as r,t as a}from"./p-0b20eded.js";import{i as e}from"./p-1ecafb97.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem "Source Sans 3";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem "Source Sans 3";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}';const s=n;const c=class{constructor(o){t(this,o);this.errorStates=new Map;this.alignment="vertical";this.groupLabelText="Group Label Text";this.hasErrors=false;this.handleSlotChange=()=>{this.initializeState()}}handleRadioButtonError(t){const o=t.target;if(o.tagName==="ifx-radio-button"){this.errorStates.set(o,t.detail);this.updateHasErrors()}}async setGroupError(t){const o=Array.from(this.el.querySelectorAll("ifx-radio-button"));o.forEach((o=>{o.error=t}))}componentWillLoad(){this.initializeState()}componentDidLoad(){if(!e(this.el)){const t=r();a("ifx-radio-button-group",t)}}initializeState(){this.errorStates.clear();const t=Array.from(this.el.querySelectorAll("ifx-radio-button"));t.forEach((t=>{if(!this.errorStates.has(t)){this.errorStates.set(t,t.error||false)}}));this.updateHasErrors()}updateHasErrors(){this.hasErrors=Array.from(this.errorStates.values()).some((t=>t))}render(){return o("div",{key:"5afb3bffc5b5521746ce4c5e870d1a4318f356b4",class:"radio-button-group-container"},this.showGroupLabel?o("div",{class:"group-label"},this.groupLabelText," *"):"",o("div",{key:"eda425f6a519859ad6035d85e140707e58320a25",class:`radio-button-group ${this.alignment} ${this.size}`},o("slot",{key:"1765676d85f6e0d0422c702b2f26005b2c18b192",onSlotchange:this.handleSlotChange})),this.showCaption?o("div",{class:`caption ${this.hasErrors?"error":"default"}`},this.showCaptionIcon?o("div",{class:"caption-icon"},o("ifx-icon",{icon:"c-info-16"})):"",o("div",{class:"caption-text"},this.captionText)):"")}static get formAssociated(){return true}get el(){return i(this)}};c.style=s;export{c as ifx_radio_button_group};
+//# sourceMappingURL=p-53c250fe.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["radioButtonGroupCss","IfxRadioButtonGroupStyle0","RadioButtonGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","hasErrors","handleSlotChange","initializeState","handleRadioButtonError","event","radioButton","target","tagName","set","detail","updateHasErrors","setGroupError","error","radioButtons","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.radio-button-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n    tag: 'ifx-radio-button-group',\n    styleUrl: 'radio-button-group.scss',\n    shadow: true,\n    formAssociated: true\n})\n\nexport class RadioButtonGroup {\n    private errorStates: Map<HTMLElement, boolean> = new Map();\n\n    @Element() el: HTMLElement;\n    @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n    @Prop() size: string;\n    @Prop() showGroupLabel: boolean;\n    @Prop() groupLabelText: string = 'Group Label Text';\n    @Prop() showCaption: boolean;\n    @Prop() captionText: string;\n    @Prop() showCaptionIcon: boolean;\n    @State() hasErrors: boolean = false;\n    \n    @Listen('ifxError')\n    handleRadioButtonError(event: CustomEvent) {\n        const radioButton = event.target as HTMLElement;\n        if (radioButton.tagName === 'ifx-radio-button') {\n            this.errorStates.set(radioButton, event.detail);\n            this.updateHasErrors();\n        }\n    }\n\n     // Method to set the error state of all radio-butttons in the group\n      @Method()\n      async setGroupError(error: boolean) {\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n          (radioButton as any).error = error;\n        });\n      }\n\n    componentWillLoad() {\n        this.initializeState();\n    }\n\n    componentDidLoad() { \n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-radio-button-group', framework)\n        }\n    }\n\n    handleSlotChange = () => {\n        this.initializeState();\n    };\n\n    private initializeState() {\n        this.errorStates.clear();\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n            if (!this.errorStates.has(radioButton)) {\n                this.errorStates.set(radioButton, (radioButton as any).error || false);\n            }\n        });\n        this.updateHasErrors();\n    }\n\n    private updateHasErrors() {\n        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n    }\n\n    render() {\n        return (\n            <div class='radio-button-group-container'>\n                {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n                <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n                    <slot onSlotchange={this.handleSlotChange} ></slot>\n                </div>\n                {this.showCaption ? (\n                    <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n                        {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n                        </ifx-icon></div> : ''}\n                        <div class='caption-text'>{this.captionText}</div>\n                    </div>) : ''}\n            </div>\n        );\n    }\n}"],"mappings":"iIAAA,MAAMA,EAAsB,m1BAC5B,MAAAC,EAAeD,E,MCWFE,EAAgB,MAP7B,WAAAC,CAAAC,G,UAQYC,KAAAC,YAAyC,IAAIC,IAG7CF,KAAAG,UAAuC,WAGvCH,KAAAI,eAAyB,mBAIxBJ,KAAAK,UAAqB,MA+B9BL,KAAAM,iBAAmB,KACfN,KAAKO,iBAAiB,C,CA7B1B,sBAAAC,CAAuBC,GACnB,MAAMC,EAAcD,EAAME,OAC1B,GAAID,EAAYE,UAAY,mBAAoB,CAC5CZ,KAAKC,YAAYY,IAAIH,EAAaD,EAAMK,QACxCd,KAAKe,iB,EAMX,mBAAMC,CAAcC,GAClB,MAAMC,EAAeC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASb,IACnBA,EAAoBO,MAAQA,CAAK,G,CAIxC,iBAAAO,GACIxB,KAAKO,iB,CAGT,gBAAAkB,GACI,IAAIC,EAAuB1B,KAAKqB,IAAK,CACjC,MAAMM,EAAYC,IAClBC,EAAe,yBAA0BF,E,EAQzC,eAAApB,GACJP,KAAKC,YAAY6B,QACjB,MAAMZ,EAAeC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,qBACzDJ,EAAaK,SAASb,IAClB,IAAKV,KAAKC,YAAY8B,IAAIrB,GAAc,CACpCV,KAAKC,YAAYY,IAAIH,EAAcA,EAAoBO,OAAS,M,KAGxEjB,KAAKe,iB,CAGD,eAAAA,GACJf,KAAKK,UAAYc,MAAMC,KAAKpB,KAAKC,YAAY+B,UAAUC,MAAMhB,GAAUA,G,CAG3E,MAAAiB,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gCACNrC,KAAKsC,eAAiBH,EAAA,OAAKE,MAAM,eAAerC,KAAKI,eAAc,MAAY,GAChF+B,EAAA,OAAAC,IAAA,2CAAKC,MAAO,sBAAsBrC,KAAKG,aAAaH,KAAKuC,QACrDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAcxC,KAAKM,oBAE5BN,KAAKyC,YACFN,EAAA,OAAKE,MAAO,WAAWrC,KAAKK,UAAY,QAAU,aAC7CL,KAAK0C,gBAAkBP,EAAA,OAAKE,MAAM,gBAAeF,EAAA,YAAUQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBrC,KAAK4C,cAC1B,G","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as o,h as r,g as e}from"./p-b7a462e5.js";import{d as n,t as d}from"./p-0b20eded.js";import{i as a}from"./p-1ecafb97.js";const i=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #F7F7F7}.container.border-engineering-200{border:1px solid #EEEDED}.container.border-engineering-300{border:1px solid #BFBBBB}.container.border-engineering-400{border:1px solid #8D8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3C3A39}.container.border-ocean-100{border:1px solid #DFF4F3}.container.border-ocean-200{border:1px solid #B8DEDA}.container.border-ocean-300{border:1px solid #6CB4AD}.container.border-ocean-400{border:1px solid #3B9B91}.container.border-ocean-500{border:1px solid #0A8276}.container.border-ocean-600{border:1px solid #08665C}.container.border-ocean-700{border:1px solid #06534B}.container.border-red-500{border:1px solid #CD002F}.container.border-red-600{border:1px solid #A2001E}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #E16B25}.container.border-green-500{border:1px solid #4CA460}.container.border-lawn-400{border:1px solid #B9D257}.container.border-lawn-500{border:1px solid #9BBA43}.container.border-lawn-700{border:1px solid #3C6C0F}.container.border-berry-400{border:1px solid #BE3283}.container.border-berry-500{border:1px solid #9C216E}.container.border-sun-400{border:1px solid #FF9737}.container.border-sun-500{border:1px solid #F97414}.container.border-sand-400{border:1px solid #FBE273}.container.border-sand-500{border:1px solid #FCD442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:600;font-size:1rem;line-height:1.25rem;display:inline;color:#1D1D1D}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#F7F7F7}.dot.engineering-200{background-color:#EEEDED}.dot.engineering-300{background-color:#BFBBBB}.dot.engineering-400{background-color:#8D8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3C3A39}.dot.ocean-100{background-color:#DFF4F3}.dot.ocean-200{background-color:#B8DEDA}.dot.ocean-300{background-color:#6CB4AD}.dot.ocean-400{background-color:#3B9B91}.dot.ocean-500{background-color:#0A8276}.dot.ocean-600{background-color:#08665C}.dot.ocean-700{background-color:#06534B}.dot.red-500{background-color:#CD002F}.dot.red-600{background-color:#A2001E}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#E16B25}.dot.green-500{background-color:#4CA460}.dot.lawn-400{background-color:#B9D257}.dot.lawn-500{background-color:#9BBA43}.dot.lawn-700{background-color:#3C6C0F}.dot.berry-400{background-color:#BE3283}.dot.berry-500{background-color:#9C216E}.dot.sun-400{background-color:#FF9737}.dot.sun-500{background-color:#F97414}.dot.sand-400{background-color:#FBE273}.dot.sand-500{background-color:#FCD442}';const c=i;const t=class{constructor(r){o(this,r);this.border=false;this.color="orange-500"}componentDidLoad(){if(!a(this.el)){const o=n();d("ifx-status",o)}}render(){var o;const e=((o=this.color)===null||o===void 0?void 0:o.trim())?this.color:"orange-500";const n=this.border?`container border-${e}`:"container no-border";return r("div",{key:"b9b5b96a361c6bbe91c25ee4fe3f31d17a54f99a","aria-label":"a status indicator","aria-value":this.label,class:n},r("span",{key:"ab2bdff7227c2ae8230d80eb5ef675b76e6ba794",class:`dot ${e}`}),r("p",{key:"14a81a557a54ab2b654cd1b83749b4dc1750ce32",class:"text"},this.label))}get el(){return e(this)}};t.style=c;export{t as ifx_status};
+//# sourceMappingURL=p-5ec9c3ed.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["statusCss","IfxStatusStyle0","Status","constructor","hostRef","this","border","color","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","effectiveColor","_a","trim","containerClass","h","key","label","class"],"sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-block;\n}\n\n.container {\n  display: flex;\n  min-height: 1.25em;\n  align-items: center;\n  padding: 0 tokens.$ifxSpace100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.no-border {\n    padding: 0; // Remove padding when border is not present\n  }\n\n  &.border-engineering-100{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\n  }\n\n  &.border-engineering-200{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  }\n\n  &.border-engineering-300{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n  }\n\n  &.border-engineering-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\n  }\n\n  &.border-engineering-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n  }\n\n  &.border-engineering-600{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\n  }\n\n  &.border-ocean-100 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\n  }\n\n  &.border-ocean-200 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\n  }\n\n  &.border-ocean-300 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\n  }\n\n  &.border-ocean-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\n  }\n\n  &.border-ocean-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n  }\n\n  &.border-ocean-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\n  }\n\n  &.border-ocean-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\n  }\n\n  &.border-red-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n  }\n\n  &.border-red-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\n  }\n\n  &.border-red-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\n  }\n\n  &.border-orange-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n  }\n\n  &.border-green-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n  }\n\n  &.border-lawn-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\n  }\n\n  &.border-lawn-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\n  }\n\n  &.border-lawn-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\n  }\n\n  &.border-berry-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\n  }\n\n  &.border-berry-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\n  }\n\n  &.border-sun-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\n  }\n\n  &.border-sun-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\n  }\n\n  &.border-sand-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\n  }\n\n  &.border-sand-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\n  }\n\n\n}\n\n.text {\n  margin: 0;\n  padding-left: tokens.$ifxSpace50;\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightS;\n  display: inline;\n  color: tokens.$ifxColorBaseBlack;\n}\n\n.dot {\n  display: inline-block;\n  width: tokens.$ifxSize100;\n  height: tokens.$ifxSize100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n}\n\n\n.dot {\n  &.engineering-100 {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  &.engineering-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.engineering-300 {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n\n  &.engineering-400 {\n    background-color: tokens.$ifxColorEngineering400;\n  }\n\n  &.engineering-500 {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.engineering-600 {\n    background-color: tokens.$ifxColorEngineering600;\n  }\n\n  &.ocean-100 {\n    background-color: tokens.$ifxColorOcean100;\n  }\n\n  &.ocean-200 {\n    background-color: tokens.$ifxColorOcean200;\n  }\n\n  &.ocean-300 {\n    background-color: tokens.$ifxColorOcean300;\n  }\n\n  &.ocean-400 {\n    background-color: tokens.$ifxColorOcean400;\n  }\n\n  &.ocean-500 {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.ocean-600 {\n    background-color: tokens.$ifxColorOcean600;\n  }\n\n  &.ocean-700 {\n    background-color: tokens.$ifxColorOcean700;\n  }\n\n  &.red-500 {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.red-600 {\n    background-color: tokens.$ifxColorRed600;\n  }\n\n  &.red-700 {\n    background-color: tokens.$ifxColorRed700;\n  }\n\n  &.orange-500 {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.green-500 {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.lawn-400{\n    background-color: tokens.$ifxColorLawn400;\n  }\n\n  &.lawn-500{\n    background-color: tokens.$ifxColorLawn500;\n  }\n\n  &.lawn-700 {\n    background-color: tokens.$ifxColorLawn700;\n  }\n\n  &.berry-400 {\n    background-color: tokens.$ifxColorBerry400;\n  }\n\n  &.berry-500 {\n    background-color: tokens.$ifxColorBerry500;\n  }\n\n  &.sun-400 {\n    background-color: tokens.$ifxColorSun400;\n  }\n\n  &.sun-500 {\n    background-color: tokens.$ifxColorSun500;\n  }\n\n  &.sand-400{\n    background-color: tokens.$ifxColorSand400;\n  }\n\n  &.sand-500{\n    background-color: tokens.$ifxColorSand500;\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Element() el;\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: string = 'orange-500';\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-status', framework)\n    }\n  }\n\n  render() {\n    const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n    const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${effectiveColor}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"],"mappings":"iIAAA,MAAMA,EAAY,87FAClB,MAAAC,EAAeD,E,MCUFE,EAAM,MANnB,WAAAC,CAAAC,G,UASUC,KAAAC,OAAkB,MAClBD,KAAAE,MAAgB,Y,CAExB,gBAAAC,GACE,IAAIC,EAAuBJ,KAAKK,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,aAAcF,E,EAIjC,MAAAG,G,MACE,MAAMC,IAAiBC,EAAAX,KAAKE,SAAK,MAAAS,SAAA,SAAAA,EAAEC,QAASZ,KAAKE,MAAQ,aACzD,MAAMW,EAAiBb,KAAKC,OAAS,oBAAoBS,IAAmB,sBAE5E,OACEI,EAAA,OAAAC,IAAA,wDAAgB,qBAAoB,aAAaf,KAAKgB,MAAOC,MAAOJ,GAClEC,EAAA,QAAAC,IAAA,2CAAME,MAAO,OAAOP,MACpBI,EAAA,KAAAC,IAAA,2CAAGE,MAAM,QAAQjB,KAAKgB,O","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-431d50b8.entry.js → p-6a96a708.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as r,h as o,g as e}from"./p-b7a462e5.js";import{d as i,t as a}from"./p-e8504e6b.js";import{i as n}from"./p-1ecafb97.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const s=d;const c=class{constructor(o){t(this,o);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=false}componentWillLoad(){if(!n(this.el)){const t=i();a("ifx-radio-button",t)}this.fallbackInput=document.createElement("input");this.fallbackInput.type="radio";this.fallbackInput.hidden=true;this.fallbackInput.className="_ifx-radiobutton-fallback";this.fallbackInput.style.cssText=`\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;this.fallbackInput.setAttribute("aria-hidden","true");this.fallbackInput.tabIndex=-1;this.el.appendChild(this.fallbackInput);if("attachInternals"in HTMLElement.prototype){try{this.internals=this.el.attachInternals()}catch(t){console.warn("ElementInternals not supported")}}this.internalChecked=this.checked||false;this.hasSlot=!!this.el.querySelector("[slot]")||this.el.innerHTML.trim()!==""}handleCheckedChange(t){this.internalChecked=t}updateFormValue(){var t;if((t=this.internals)===null||t===void 0?void 0:t.setFormValue){this.internals.setFormValue(this.internalChecked?this.value:null)}this.fallbackInput.checked=this.internalChecked;this.fallbackInput.name=this.name;this.fallbackInput.value=this.value;this.fallbackInput.disabled=this.disabled}errorChanged(t,r){if(t!==r){this.ifxError.emit(t)}}handleRadioButtonClick(t){if(this.disabled){t.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.checked=this.internalChecked;this.ifxChange.emit(this.internalChecked);const r=new CustomEvent("change",{bubbles:true,composed:true,detail:{checked:this.internalChecked}});this.el.dispatchEvent(r)}handleKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault();this.handleRadioButtonClick(new PointerEvent("click"))}}handleExternalChange(t){const r=t.target;if(r===this.el||r.tagName.toLowerCase()!=="ifx-radio-button")return;if(r.getAttribute("name")===this.name){this.internalChecked=false}}render(){return o("div",{key:"fd24cefee24acfa95408fa678c392f8ffe2e8d31",role:"radio","aria-checked":String(this.internalChecked),"aria-disabled":String(this.disabled),class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:t=>this.handleRadioButtonClick(t),tabindex:this.disabled?-1:0},o("div",{key:"b772b58995ba09ee27c452156b999d3f38d16308",class:`radioButton__wrapper \n            ${this.internalChecked?"checked":""} \n            ${this.disabled?"disabled":""} \n            ${this.error?"error":""}`},this.internalChecked&&o("div",{key:"b61958654a910ee90f030948c8771c50f287a62a",class:"radioButton__wrapper-mark"})),this.hasSlot&&o("div",{key:"ced2361cf68a493412cc867294d25823269d1426",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},o("slot",{key:"d99922c668e8ec29e81824c486988c18ae294fee"})),o("input",{key:"9f2defbbf33ad4a4a71497426332d91ae0d90cf9",type:"radio",hidden:true,ref:t=>this.inputElement=t,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:t=>t.stopPropagation()}))}static get formAssociated(){return true}get el(){return e(this)}static get watchers(){return{checked:["handleCheckedChange"],internalChecked:["updateFormValue"],error:["errorChanged"]}}};c.style=s;export{c as ifx_radio_button};
-//# sourceMappingURL=p-431d50b8.entry.js.map
+import{r as t,c as r,h as o,g as i}from"./p-b7a462e5.js";import{d as e,t as a}from"./p-0b20eded.js";import{i as n}from"./p-1ecafb97.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const s=d;const c=class{constructor(o){t(this,o);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=false}componentWillLoad(){this.fallbackInput=document.createElement("input");this.fallbackInput.type="radio";this.fallbackInput.hidden=true;this.fallbackInput.className="_ifx-radiobutton-fallback";this.fallbackInput.style.cssText=`\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;this.fallbackInput.setAttribute("aria-hidden","true");this.fallbackInput.tabIndex=-1;this.el.appendChild(this.fallbackInput);if("attachInternals"in HTMLElement.prototype){try{this.internals=this.el.attachInternals()}catch(t){console.warn("ElementInternals not supported")}}this.internalChecked=this.checked||false;this.hasSlot=!!this.el.querySelector("[slot]")||this.el.innerHTML.trim()!==""}componentDidLoad(){if(!n(this.el)){const t=e();a("ifx-radio-button",t)}}handleCheckedChange(t){this.internalChecked=t}updateFormValue(){var t;if((t=this.internals)===null||t===void 0?void 0:t.setFormValue){this.internals.setFormValue(this.internalChecked?this.value:null)}this.fallbackInput.checked=this.internalChecked;this.fallbackInput.name=this.name;this.fallbackInput.value=this.value;this.fallbackInput.disabled=this.disabled}errorChanged(t,r){if(t!==r){this.ifxError.emit(t)}}handleRadioButtonClick(t){if(this.disabled){t.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.checked=this.internalChecked;this.ifxChange.emit(this.internalChecked);const r=new CustomEvent("change",{bubbles:true,composed:true,detail:{checked:this.internalChecked}});this.el.dispatchEvent(r)}handleKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault();this.handleRadioButtonClick(new PointerEvent("click"))}}handleExternalChange(t){const r=t.target;if(r===this.el||r.tagName.toLowerCase()!=="ifx-radio-button")return;if(r.getAttribute("name")===this.name){this.internalChecked=false}}render(){return o("div",{key:"6820a31dcfcdee4ae332fcc67b31b99c09d0d95e",role:"radio","aria-checked":String(this.internalChecked),"aria-disabled":String(this.disabled),class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:t=>this.handleRadioButtonClick(t),tabindex:this.disabled?-1:0},o("div",{key:"ff8f081ab3cf365f5d193198c4cf4b59687bc4e1",class:`radioButton__wrapper \n            ${this.internalChecked?"checked":""} \n            ${this.disabled?"disabled":""} \n            ${this.error?"error":""}`},this.internalChecked&&o("div",{key:"b78654a5a798ab13045ec4e8028c88ac2156be33",class:"radioButton__wrapper-mark"})),this.hasSlot&&o("div",{key:"823e4beb13c85adf100abd9d1cef54469609a404",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},o("slot",{key:"7792803c43ace6002f603dc410a731d78cdd6cfa"})),o("input",{key:"514758f188c0c243c22d825e1ed9333344eb615a",type:"radio",hidden:true,ref:t=>this.inputElement=t,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:t=>t.stopPropagation()}))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"],internalChecked:["updateFormValue"],error:["errorChanged"]}}};c.style=s;export{c as ifx_radio_button};
+//# sourceMappingURL=p-6a96a708.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","constructor","hostRef","this","disabled","error","size","internalChecked","hasSlot","componentWillLoad","fallbackInput","document","createElement","type","hidden","className","style","cssText","setAttribute","tabIndex","el","appendChild","HTMLElement","prototype","internals","attachInternals","e","console","warn","checked","querySelector","innerHTML","trim","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","handleCheckedChange","newValue","updateFormValue","_a","setFormValue","value","name","errorChanged","oldValue","ifxError","emit","handleRadioButtonClick","event","stopPropagation","inputElement","click","ifxChange","changeEvent","CustomEvent","bubbles","composed","detail","dispatchEvent","handleKeyDown","ev","includes","key","preventDefault","PointerEvent","handleExternalChange","target","tagName","toLowerCase","getAttribute","render","h","role","String","class","onClick","tabindex","ref"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\n  }\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n            &.error::after {\n                border-color: #CD002F;\n                background-color: #CD002F;\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-radio-button', framework)\n    }\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as s,h as e,g as t}from"./p-b7a462e5.js";import{d as r,t as a}from"./p-0b20eded.js";import{i}from"./p-1ecafb97.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex;width:100%}.progress-bar{height:16px;bottom:0;right:0;top:0;left:0;display:flex;height:20px;border-radius:1px;width:100%;overflow:hidden;background-color:#EEEDED;font-family:var(--ifx-font-family)}.progress-bar.s{height:4px}.progress-bar .label{font-style:normal;font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#FFFFFF}.progress-bar .progress{display:flex;align-items:center;justify-content:center;min-width:fit-content;height:100%;background-color:#0A8276;transition:width 0.2s ease}';const n=o;const l=class{constructor(e){s(this,e);this.value=0;this.showLabel=false}valueChanged(s,e){if(s!==e){this.internalValue=s}}componentWillLoad(){this.internalValue=this.value}componentDidLoad(){if(!i(this.el)){const s=r();a("ifx-progress-bar",s)}}render(){return e("div",{key:"2e52f2858b55f573515e531c621970e2bc9a2b8a","aria-label":"a progress bar","aria-value":this.value,class:`progress-bar ${this.size}`},e("div",{key:"89db2fed9df94a208affea4d8f3847b0b90da9ef",class:"progress",style:{width:`${this.internalValue}%`}},this.showLabel&&this.size!=="s"&&this.internalValue!==0&&e("span",{key:"d744a21d5c89db8068471d6266f82273679b6074",class:"label"},`${this.internalValue}%`)))}get el(){return t(this)}static get watchers(){return{value:["valueChanged"]}}};l.style=n;export{l as ifx_progress_bar};
+//# sourceMappingURL=p-6e2570c5.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["progressBarCss","IfxProgressBarStyle0","ProgressBar","constructor","hostRef","this","value","showLabel","valueChanged","newValue","oldValue","internalValue","componentWillLoad","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","key","class","size","style","width"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  \n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Element() el: HTMLElement;\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n  componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-progress-bar', framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"4HAAA,MAAMA,EAAiB,okBACvB,MAAAC,EAAeD,E,MCSFE,EAAW,MALxB,WAAAC,CAAAC,G,UAOUC,KAAAC,MAAgB,EAEhBD,KAAAE,UAAqB,K,CAK7B,YAAAC,CAAaC,EAAkBC,GAC7B,GAAID,IAAaC,EAAU,CACzBL,KAAKM,cAAgBF,C,EAIzB,iBAAAG,GACEP,KAAKM,cAAgBN,KAAKC,K,CAG5B,gBAAAO,GACE,IAAIC,EAAuBT,KAAKU,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,mBAAoBF,E,EAIvC,MAAAG,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,iBAAgB,aAAahB,KAAKC,MAAQgB,MAAO,gBAAgBjB,KAAKkB,QACpFH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWE,MAAO,CAAEC,MAAO,GAAGpB,KAAKM,mBAC3CN,KAAKE,WAAaF,KAAKkB,OAAS,KAAOlB,KAAKM,gBAAkB,GAAKS,EAAA,QAAAC,IAAA,2CAAMC,MAAM,SAAS,GAAGjB,KAAKM,mB","ignoreList":[]}