@infineon/infineon-design-system-stencil 37.13.1--canary.1987.3a00aa50ac2f53008f1e351eabf4b0c340894bb9.0 → 37.13.1--canary.1992.0eb8390d6cfd0c060d046f7e91d06e160e2dc360.0

package/dist/infineon-design-system-stencil/{p-fb11d0cc.entry.js.map → p-6d5a43ee.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["segmentedControlCss","SegmentedControl","constructor","hostRef","this","caption","label","size","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","setSegmentSize","shadowRoot","querySelector","classList","add","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","trim","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: tokens.$ifxSpace150;\n}\n\n.group__label {\n    font: tokens.$ifxBodyBody05;\n\n    &:empty {\n        display: none;\n    }\n}\n\n.group__controls {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n    margin-left: -1px;\n    margin-top: -1px;\n}\n\n.group__caption {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    font: tokens.$ifxBodyBody05;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, 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-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \n            const framework = detectFramework();\n            trackComponent('ifx-segmented-control', await framework)\n        }\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n                <div class='group__label'>\n                    { this.label.trim() }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class='group__caption'>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"],"mappings":"mIAAA,MAAMA,EAAsB,gb,MCWfC,EAAgB,MAN7B,WAAAC,CAAAC,G,+CAWYC,KAAOC,QAAW,GAClBD,KAAKE,MAAW,GAChBF,KAAIG,KAAwB,UAS5BH,KAAaI,cAAW,EAgFnC,CAtFG,eAAAC,CAAgBC,GACZ,MAAMC,cAAEA,EAAaH,cAAEA,GAAkBJ,KAAKQ,wBAAwBF,EAAMG,QAC5ET,KAAKI,cAAgBA,EACrBJ,KAAKU,UAAUC,KAAK,CAAEJ,gBAAeH,iB,CAKzC,uBAAAI,CAAwBI,GACpB,IAAIL,EACJ,IAAIH,EAEJ,MAAMS,EAAqBb,KAAKc,cAChCD,EAASE,SAASC,IACd,GAAIA,EAAQC,SAAU,CAClB,GAAID,EAAQE,eAAiBN,EAAkB,CAC3CI,EAAQC,SAAW,MACnBV,EAAgBS,EAAQG,K,KACrB,CACHf,EAAgBY,EAAQG,K,MAKpC,MAAO,CAAEZ,gBAAeH,gB,CAG5B,WAAAU,GACI,OAAOd,KAAKH,iBAAiBuB,iBAAiB,c,CAGlD,gBAAAC,GACI,MAAMR,EAAqBb,KAAKc,cAChC,IAAIQ,EAA8B,MAClCT,EAASE,SAAQ,CAACC,EAAgCO,KAC9CP,EAAQE,aAAeK,EACvB,GAAID,EAA6B,CAC7B,GAAIN,EAAQC,SAAUD,EAAQC,SAAW,K,KACtC,CACH,GAAID,EAAQC,SAAU,CAClBK,EAA8B,KAC9BtB,KAAKI,cAAgBY,EAAQG,K,MAM7C,cAAAK,GACI,MAAMX,EAAqBb,KAAKc,cAChCD,EAASE,SAASC,IACdA,EAAQS,WAAWC,cAAc,YAAYC,UAAUC,IAAI,YAAY5B,KAAKG,OAAO,G,CAI3F,sBAAM0B,GACF,IAAIC,EAAuB9B,KAAKH,kBAAmB,CAC/C,MAAMkC,EAAYC,IAClBC,EAAe,8BAA+BF,E,CAElD/B,KAAKqB,kB,CAGT,MAAAa,GACI,OACIC,EAAiB,OAAAC,IAAA,wDAAApC,KAAKI,cAAa,aAAa,oBAAoBiC,MAAM,SACtEF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,gBACLrC,KAAKE,MAAMoC,QAGjBH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIApC,KAAKC,QAAQqC,QACbH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,kBACPF,EAAU,YAAAC,IAAA,2CAAAG,KAAK,cAAuB,IAAGvC,KAAKC,QAAQqC,Q,CAO1E,kBAAAE,GACIxC,KAAKwB,gB","ignoreList":[]}
+{"version":3,"names":["segmentedControlCss","SegmentedControl","constructor","hostRef","this","caption","label","size","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","setSegmentSize","shadowRoot","querySelector","classList","add","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","trim","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: tokens.$ifxSpace150;\n}\n\n.group__label {\n    font: tokens.$ifxBodyBody05;\n\n    &:empty {\n        display: none;\n    }\n}\n\n.group__controls {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n    margin-left: -1px;\n    margin-top: -1px;\n}\n\n.group__caption {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    font: tokens.$ifxBodyBody05;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, 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-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \n            const framework = detectFramework();\n            trackComponent('ifx-segmented-control', await framework)\n        }\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n                <div class='group__label'>\n                    { this.label.trim() }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class='group__caption'>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"],"mappings":"wIAAA,MAAMA,EAAsB,gb,MCWfC,EAAgB,MAN7B,WAAAC,CAAAC,G,+CAWYC,KAAOC,QAAW,GAClBD,KAAKE,MAAW,GAChBF,KAAIG,KAAwB,UAS5BH,KAAaI,cAAW,EAgFnC,CAtFG,eAAAC,CAAgBC,GACZ,MAAMC,cAAEA,EAAaH,cAAEA,GAAkBJ,KAAKQ,wBAAwBF,EAAMG,QAC5ET,KAAKI,cAAgBA,EACrBJ,KAAKU,UAAUC,KAAK,CAAEJ,gBAAeH,iB,CAKzC,uBAAAI,CAAwBI,GACpB,IAAIL,EACJ,IAAIH,EAEJ,MAAMS,EAAqBb,KAAKc,cAChCD,EAASE,SAASC,IACd,GAAIA,EAAQC,SAAU,CAClB,GAAID,EAAQE,eAAiBN,EAAkB,CAC3CI,EAAQC,SAAW,MACnBV,EAAgBS,EAAQG,K,KACrB,CACHf,EAAgBY,EAAQG,K,MAKpC,MAAO,CAAEZ,gBAAeH,gB,CAG5B,WAAAU,GACI,OAAOd,KAAKH,iBAAiBuB,iBAAiB,c,CAGlD,gBAAAC,GACI,MAAMR,EAAqBb,KAAKc,cAChC,IAAIQ,EAA8B,MAClCT,EAASE,SAAQ,CAACC,EAAgCO,KAC9CP,EAAQE,aAAeK,EACvB,GAAID,EAA6B,CAC7B,GAAIN,EAAQC,SAAUD,EAAQC,SAAW,K,KACtC,CACH,GAAID,EAAQC,SAAU,CAClBK,EAA8B,KAC9BtB,KAAKI,cAAgBY,EAAQG,K,MAM7C,cAAAK,GACI,MAAMX,EAAqBb,KAAKc,cAChCD,EAASE,SAASC,IACdA,EAAQS,WAAWC,cAAc,YAAYC,UAAUC,IAAI,YAAY5B,KAAKG,OAAO,G,CAI3F,sBAAM0B,GACF,IAAIC,EAAuB9B,KAAKH,kBAAmB,CAC/C,MAAMkC,EAAYC,IAClBC,EAAe,8BAA+BF,E,CAElD/B,KAAKqB,kB,CAGT,MAAAa,GACI,OACIC,EAAiB,OAAAC,IAAA,wDAAApC,KAAKI,cAAa,aAAa,oBAAoBiC,MAAM,SACtEF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,gBACLrC,KAAKE,MAAMoC,QAGjBH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIApC,KAAKC,QAAQqC,QACbH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,kBACPF,EAAU,YAAAC,IAAA,2CAAAG,KAAK,cAAuB,IAAGvC,KAAKC,QAAQqC,Q,CAO1E,kBAAAE,GACIxC,KAAKwB,gB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c,h as i,a as s}from"./p-DS8meZSd.js";import{d as t,t as o}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const h=class{constructor(i){e(this,i);this.ifxChange=c(this,"ifxChange",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.checked=false;this.name="";this.disabled=false;this.internalChecked=false}async isChecked(){return this.internalChecked}componentWillLoad(){this.internalChecked=this.checked}toggleLabelGap(){const e=this.el.shadowRoot.querySelector("slot");const c=this.el.shadowRoot.querySelector(".container");if(e.assignedNodes().length){c.classList.add("gap")}else{c.classList.remove("gap")}}async componentDidLoad(){if(!a(this.el)){const e=t();o("ifx-switch",await e)}this.toggleLabelGap()}valueChanged(e,c){if(e!==c){this.internalChecked=e}}toggleSwitch(){if(this.disabled)return;this.internalChecked=!this.internalChecked;if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"||e.key===" "){this.toggleSwitch()}}formResetCallback(){this.internals.setFormValue(null)}render(){return i("div",{key:"d2ff9dc8d7cf6fc3d497993f95e6576bb9d6a135",class:"container",role:"switch","aria-checked":this.internalChecked?"true":"false","aria-label":this.name,onClick:()=>this.toggleSwitch(),onKeyDown:e=>this.handleKeyDown(e)},i("div",{key:"9859ed7c79c5f5a0b7a99e26a30335e42e305f2c",class:`switch__checkbox-container ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`,tabindex:"0"},i("div",{key:"aa7752a3d19454fa05f20c2b4cf0027e54b82cc1",class:"switch__checkbox-wrapper"},i("input",{key:"628c3d5134af182568a2de37e52edf3bee9cbb36",type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,checked:this.internalChecked,value:`${this.value}`}),i("div",{key:"91aebaa44415c2c94d42e6df2dce2ef05620609f",class:`switch ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`}))),i("div",{key:"57e4151d43ba4fee3b09cdcf93ec26dc884612b3",class:`switch__label-wrapper ${this.disabled?"disabled":""}`},i("label",{key:"30de77889ff4c205ad3b680e65394f8024857750",htmlFor:"switch"},i("slot",{key:"1cb1f77f64f56d43bbc6b59e72f84b0ff564076d",onSlotchange:()=>this.toggleLabelGap()}))))}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{checked:["valueChanged"]}}};h.style=r;export{h as ifx_switch};
+//# sourceMappingURL=p-71c6b92c.entry.js.map

package/dist/infineon-design-system-stencil/{p-3d447d67.entry.js.map → p-71c6b92c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["switchCss","Switch","constructor","hostRef","this","checked","name","disabled","internalChecked","isChecked","componentWillLoad","toggleLabelGap","slot","el","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","valueChanged","newValue","oldValue","toggleSwitch","value","undefined","internals","setFormValue","ifxChange","emit","handleKeyDown","event","key","formResetCallback","render","h","class","role","onClick","onKeyDown","tabindex","type","hidden","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, 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-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', await framework)\n    }\n    this.toggleLabelGap();\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-labelledby=\"switch-label\"\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAY,sgD,MCYLC,EAAM,MANnB,WAAAC,CAAAC,G,+MAOUC,KAAOC,QAAY,MACnBD,KAAIE,KAAW,GACfF,KAAQG,SAAY,MAEnBH,KAAeI,gBAAY,KAgHrC,CAvGC,eAAMC,GACJ,OAAOL,KAAKI,e,CAGd,iBAAAE,GACEN,KAAKI,gBAAkBJ,KAAKC,O,CAI9B,cAAAM,GACE,MAAMC,EAAOR,KAAKS,GAAGC,WAAWC,cAAc,QAC9C,MAAMC,EAAYZ,KAAKS,GAAGC,WAAWC,cAAc,cACnD,GAAIH,EAAKK,gBAAgBC,OAAQ,CAC/BF,EAAUG,UAAUC,IAAI,M,KACnB,CACLJ,EAAUG,UAAUE,OAAO,M,EAI/B,sBAAMC,GACJ,IAAIC,EAAuBnB,KAAKS,IAAK,CACnC,MAAMW,EAAYC,IAClBC,EAAe,mBAAoBF,E,CAErCpB,KAAKO,gB,CAIP,YAAAgB,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBzB,KAAKI,gBAAkBoB,C,EAI3B,YAAAE,GACE,GAAI1B,KAAKG,SAAU,OACnBH,KAAKI,iBAAmBJ,KAAKI,gBAE7B,GAAIJ,KAAKI,gBAAiB,CACxB,GAAIJ,KAAK2B,QAAUC,UAAW,CAC5B5B,KAAK6B,UAAUC,aAAa9B,KAAK2B,M,KAC5B,CACL3B,KAAK6B,UAAUC,aAAa,K,MAEzB,CACL9B,KAAK6B,UAAUC,aAAa,K,CAG9B9B,KAAK+B,UAAUC,KAAKhC,KAAKI,gB,CAG3B,aAAA6B,CAAcC,GACZ,GAAIlC,KAAKG,SAAU,OAEnB,GAAI+B,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CnC,KAAK0B,c,EAQT,iBAAAU,GACEpC,KAAK6B,UAAUC,aAAa,K,CAG9B,MAAAO,GACE,OACEC,EACE,OAAAH,IAAA,2CAAAI,MAAM,YACNC,KAAK,SACS,eAAAxC,KAAKI,gBAAkB,OAAS,QAC/B,gBAAAJ,KAAKG,SAAW,OAAS,QAAO,kBAC/B,eAChBsC,QAAS,IAAMzC,KAAK0B,eACpBgB,UAAYR,GAAUlC,KAAKiC,cAAcC,IAGzCI,EAAA,OAAAH,IAAA,2CACEI,MAAO,8BAA8BvC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,KAC3GwC,SAAS,KAETL,EAAK,OAAAH,IAAA,2CAAAI,MAAM,4BACTD,EAAA,SAAAH,IAAA,2CAAOS,KAAK,WAAWC,OAAM,KAC3B3C,KAAMF,KAAKE,KACXC,SAAUH,KAAKG,SACfF,QAASD,KAAKI,gBACduB,MAAO,GAAG3B,KAAK2B,UACjBW,EAAA,OAAAH,IAAA,2CAAKI,MAAO,UAAUvC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,SAKhGmC,EAAA,OAAAH,IAAA,2CAAKI,MAAO,yBAAyBvC,KAAKG,SAAW,WAAa,MAChEmC,EAAO,SAAAH,IAAA,2CAAAW,QAAQ,UACbR,EAAA,QAAAH,IAAA,2CAAMY,aAAc,IAAM/C,KAAKO,qB","ignoreList":[]}
+{"version":3,"names":["switchCss","Switch","constructor","hostRef","this","checked","name","disabled","internalChecked","isChecked","componentWillLoad","toggleLabelGap","slot","el","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","valueChanged","newValue","oldValue","toggleSwitch","value","undefined","internals","setFormValue","ifxChange","emit","handleKeyDown","event","key","formResetCallback","render","h","class","role","onClick","onKeyDown","tabindex","type","hidden","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, 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-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', await framework)\n    }\n    this.toggleLabelGap();\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAY,sgD,MCYLC,EAAM,MANnB,WAAAC,CAAAC,G,+MAOUC,KAAOC,QAAY,MACnBD,KAAIE,KAAW,GACfF,KAAQG,SAAY,MAEnBH,KAAeI,gBAAY,KA+GrC,CAtGC,eAAMC,GACJ,OAAOL,KAAKI,e,CAGd,iBAAAE,GACEN,KAAKI,gBAAkBJ,KAAKC,O,CAI9B,cAAAM,GACE,MAAMC,EAAOR,KAAKS,GAAGC,WAAWC,cAAc,QAC9C,MAAMC,EAAYZ,KAAKS,GAAGC,WAAWC,cAAc,cACnD,GAAIH,EAAKK,gBAAgBC,OAAQ,CAC/BF,EAAUG,UAAUC,IAAI,M,KACnB,CACLJ,EAAUG,UAAUE,OAAO,M,EAI/B,sBAAMC,GACJ,IAAIC,EAAuBnB,KAAKS,IAAK,CACnC,MAAMW,EAAYC,IAClBC,EAAe,mBAAoBF,E,CAErCpB,KAAKO,gB,CAIP,YAAAgB,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBzB,KAAKI,gBAAkBoB,C,EAI3B,YAAAE,GACE,GAAI1B,KAAKG,SAAU,OACnBH,KAAKI,iBAAmBJ,KAAKI,gBAE7B,GAAIJ,KAAKI,gBAAiB,CACxB,GAAIJ,KAAK2B,QAAUC,UAAW,CAC5B5B,KAAK6B,UAAUC,aAAa9B,KAAK2B,M,KAC5B,CACL3B,KAAK6B,UAAUC,aAAa,K,MAEzB,CACL9B,KAAK6B,UAAUC,aAAa,K,CAG9B9B,KAAK+B,UAAUC,KAAKhC,KAAKI,gB,CAG3B,aAAA6B,CAAcC,GACZ,GAAIlC,KAAKG,SAAU,OAEnB,GAAI+B,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CnC,KAAK0B,c,EAQT,iBAAAU,GACEpC,KAAK6B,UAAUC,aAAa,K,CAG9B,MAAAO,GACE,OACEC,EAAA,OAAAH,IAAA,2CACEI,MAAM,YACNC,KAAK,SACS,eAAAxC,KAAKI,gBAAkB,OAAS,QAAO,aACzCJ,KAAKE,KACjBuC,QAAS,IAAMzC,KAAK0B,eACpBgB,UAAYR,GAAUlC,KAAKiC,cAAcC,IAGzCI,EAAA,OAAAH,IAAA,2CACEI,MAAO,8BAA8BvC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,KAC3GwC,SAAS,KAETL,EAAK,OAAAH,IAAA,2CAAAI,MAAM,4BACTD,EAAA,SAAAH,IAAA,2CAAOS,KAAK,WAAWC,OAAM,KAC3B3C,KAAMF,KAAKE,KACXC,SAAUH,KAAKG,SACfF,QAASD,KAAKI,gBACduB,MAAO,GAAG3B,KAAK2B,UACjBW,EAAA,OAAAH,IAAA,2CAAKI,MAAO,UAAUvC,KAAKI,gBAAkB,UAAY,MAAMJ,KAAKG,SAAW,WAAa,SAKhGmC,EAAA,OAAAH,IAAA,2CAAKI,MAAO,yBAAyBvC,KAAKG,SAAW,WAAa,MAChEmC,EAAO,SAAAH,IAAA,2CAAAW,QAAQ,UACbR,EAAA,QAAAH,IAAA,2CAAMY,aAAc,IAAM/C,KAAKO,qB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as a,d as r,a as o}from"./p-DS8meZSd.js";import{d,t as i}from"./p-DcmcuUOA.js";import{i as t}from"./p-Bw2fh5LT.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=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()}async componentDidLoad(){if(!t(this.el)){const e=d();i("ifx-card",await e)}}componentWillUpdate(){this.handleComponentAdjustment()}render(){return a(r,{key:"3a6943f0f1aa3ee634d433d05c542ee7b9b72e69"},a("div",{key:"229574b0f669dd3b30a71d094698d5455165d9d2","aria-label":this.ariaLabel,class:`card \n          ${this.noBtns?"noBtns":""}\n          ${this.direction} \n          ${this.alignment}`,role:"region"},this.direction==="horizontal"&&a("div",{key:"f3816627bb7f132608a20ca6318ae7f112607cc2",class:"horizontal"},a("a",{key:"0ecded0f956f06f7148418582e77def35c2a313b",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"2f008321ec850c85d56049cb67e378760d2e3ea2",name:"img"})),a("div",{key:"2e9455f45aaf6c230aa2b60607397f161bd41e2d",class:"lower__body-wrapper"},a("a",{key:"156a10f3416703248152e4494f339e40012131cd",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"ee3126d09544d828c0f10c4d1d2ee3cd3a952ce7"})),a("div",{key:"3581851fa9fd0ee7e76753ee7beaf65774665bf7"},a("slot",{key:"6b05e2c89e3b694b1aa8e3aac33f9848802a5665",name:"buttons"})))),this.direction==="vertical"&&a("div",{key:"a586ca1d70852798681f52eeee5e991336f130c6",class:"vertical"},a("a",{key:"e6cd065de551b3ba9d73c9fd73c97421f7f44c57",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},a("div",{key:"e59a87785b9590316c8e118a7ce133fae644491d",class:`card-img ${this.noImg?"noImage":""}`},a("slot",{key:"fbee6d02cfa0c3c2b3a3fc0df61c743137b94c94",name:"img"})),a("div",{key:"bc3fde0afb8c9af15ceec92020164f70cb2a9857",class:"upper-body"},a("slot",{key:"c69cd3e3004f5975273aa7155cf880684878a85e"}))),a("div",{key:"6920488d4b4904eb72adb9eacb37e65eacf99b30",class:"lower__body-wrapper"},a("slot",{key:"d9db8d30a6d8615d3d6a3e06415886e9e126bca6",name:"buttons"})))))}get el(){return o(this)}};s.style=c;export{s as ifx_card};
+//# sourceMappingURL=p-7873796d.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","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  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-card', await 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,q0D,MCWHC,EAAI,MANjB,WAAAC,CAAAC,G,UASUC,KAASC,UAA8B,WAGvCD,KAAIE,KAAW,GACdF,KAAYG,aAAW,GACxBH,KAAMI,OAAW,OA4F1B,CAxFC,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,sBAAMc,GACJ,IAAIC,EAAuBxB,KAAKW,IAAK,CACnC,MAAMc,EAAYC,IAClBC,EAAe,iBAAkBF,E,EAIrC,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,EAAK,OAAAE,IAAA,2CAAAE,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,EAAK,OAAAE,IAAA,2CAAAE,MAAM,uBACTJ,EAAG,KAAAE,IAAA,2CAAAE,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,EAAK,OAAAE,IAAA,2CAAAE,MAAM,YACTJ,EAAG,KAAAE,IAAA,2CAAAE,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,EAAK,OAAAE,IAAA,2CAAAE,MAAM,cACTJ,EAAA,QAAAE,IAAA,+CAIJF,EAAK,OAAAE,IAAA,2CAAAE,MAAM,uBACTJ,EAAM,QAAAE,IAAA,2CAAAI,KAAK,e","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-5f5e674d.entry.js → p-7ce54612.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,F as s,a}from"./p-DS8meZSd.js";const n='.tree-item{position:relative;cursor:pointer;list-style:none}.tree-item.tree-item--expanded{position:relative}.tree-item.tree-item--has-children{position:relative}.tree-item.tree-item--has-children .tree-item__header>.tree-item__chevron-container{display:flex}.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header>.tree-item__chevron-container::after{display:block}.tree-item--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.tree-item__content{display:flex;flex-direction:row}.tree-item__content:hover .tree-item__checkbox-container,.tree-item__content:hover .tree-item__header{background-color:#F7F7F7}.tree-item__checkbox-container{position:sticky;left:0;z-index:10;padding:4px;background-color:#FFFFFF}.tree-item__header{flex-grow:1;display:flex;align-items:center;white-space:nowrap;height:20px;padding-top:4px;padding-right:16px;padding-bottom:4px;padding-left:8px}.tree-item__chevron-container{display:none;align-items:center;margin-right:8px;height:20px}.tree-item__chevron-container::after{--height-line-start:28px;display:none;content:"";position:absolute;z-index:1;top:var(--height-line-start);left:auto;margin-left:8px;width:1px;height:calc(100% - var(--height-line-start));background-color:#EEEDED}.tree-item--disabled .tree-item__chevron-container::after{color:#EEEDED}.tree-item__chevron.chevron-down{transform:rotate(90deg)}.tree-item__chevron.chevron-right{transform:rotate(0)}.tree-item__label-icon-container{display:flex;align-items:center}.tree-item__label-icon-container:focus{outline:none}.tree-item__label-icon-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.tree-item__icon-container{position:relative;width:16px;height:16px}.tree-item__icon-container ifx-icon{position:absolute;left:0;top:0;opacity:1;transition:opacity 0.2s ease-in-out}.tree-item__icon-container ifx-icon.icon--hidden{opacity:0}.tree-item__label{padding-left:8px}.tree-item__children{display:none}.tree-item[aria-expanded=true]>.tree-item__children{display:block}';const r=class{constructor(i){e(this,i);this.ifxTreeViewItemExpandChange=t(this,"ifxTreeViewItemExpandChange",7);this.ifxTreeViewItemCheckChange=t(this,"ifxTreeViewItemCheckChange",7);this.ifxTreeViewItemDisableChange=t(this,"ifxTreeViewItemDisableChange",7);this.expanded=false;this.initiallyExpanded=false;this.disableItem=false;this.initiallySelected=false;this.hasChildren=false;this.isChecked=false;this.partialChecked=false;this.level=0;this.disableAllItems=false;this.expandAllItems=false;this.suppressExpandEvents=false;this.findChildren=()=>Array.from(this.host.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"));this.calculateNodeLevel=()=>{let e=0,t=this.host.parentElement;while(t){if(t.tagName==="IFX-TREE-VIEW-ITEM")e++;t=t.parentElement}return e};this.handleStateChange=e=>{if(this.disabled)return;e.stopPropagation();this.updateCheckState(e.detail.checked)};this.handleCheckboxChange=e=>{var t,i;if(this.disabled)return;this.updateCheckState((i=(t=e.detail)===null||t===void 0?void 0:t.checked)!==null&&i!==void 0?i:!this.isChecked)};this.handleHeaderClick=({target:e})=>{if(this.disabled)return;if(!e.closest(".tree-item__checkbox-container, .tree-item__chevron-container")){if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}}};this.toggleExpand=()=>{if(this.disabled||!this.hasChildren)return;this.expanded=!this.expanded};this.handleKeyDown=e=>{var t,i,s,a,n,r;const h=Array.from(((t=this.host.closest("ifx-tree-view"))===null||t===void 0?void 0:t.querySelectorAll("ifx-tree-view-item"))||[]);const o=h.filter((e=>{var t,i;let s=(t=e.parentElement)===null||t===void 0?void 0:t.closest("ifx-tree-view-item");while(s){const e=s;if(!(e.expandAllItems||e.expanded))return false;s=(i=s.parentElement)===null||i===void 0?void 0:i.closest("ifx-tree-view-item")}return true}));const d=o.findIndex((e=>e===this.host));const l=e=>e===null||e===void 0?void 0:e.focus();switch(e.key){case"ArrowDown":{e.preventDefault();for(let e=d+1;e<o.length;e++){const t=o[e];if(!t.disabled){l((i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowUp":{e.preventDefault();for(let e=d-1;e>=0;e--){const t=o[e];if(!t.disabled){l((s=t.shadowRoot)===null||s===void 0?void 0:s.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowRight":{e.preventDefault();if(!this.isExpanded&&this.hasChildren){this.expanded=true}else if(this.isExpanded&&this.hasChildren){const e=this.host.querySelector("ifx-tree-view-item");if(e&&!e.disabled){l((a=e.shadowRoot)===null||a===void 0?void 0:a.querySelector(".tree-item__label-icon-container"))}}break}case"ArrowLeft":{e.preventDefault();if(this.isExpanded&&this.hasChildren){this.expanded=false}else{const e=(n=this.host.parentElement)===null||n===void 0?void 0:n.closest("ifx-tree-view-item");if(e&&!e.disabled){l((r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".tree-item__label-icon-container"))}}break}case" ":case"Enter":{e.preventDefault();if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}break}}}}get disabled(){return this.disableAllItems||this.disableItem}get isExpanded(){return this.expandAllItems||this.expanded}componentWillLoad(){this.expanded=this.initiallyExpanded;this.hasChildren=this.findChildren().length>0;this.level=this.calculateNodeLevel();this.host.setAttribute("data-level",this.level.toString());this.isChecked=this.initiallySelected;this.host.addEventListener("internal-check-state-change",this.handleStateChange)}componentDidLoad(){this.observeParentAttribute("disable-all-items",(e=>this.disableAllItems=e));this.observeParentAttribute("data-expand-all-items",(e=>this.expandAllItems=e),true);if(this.shouldExpandFromParent())this.expandAllDescendants();this.host["__stencil_instance"]=this;if(this.initiallySelected)setTimeout((()=>this.updateParentState()),0)}observeParentAttribute(e,t,i=false){let s=this.host.parentElement;while(s){if(s.tagName==="IFX-TREE-VIEW"||i&&s.hasAttribute(e)){const i=new MutationObserver((()=>t(s.hasAttribute(e))));i.observe(s,{attributes:true});t(s.hasAttribute(e));break}s=s.parentElement}}shouldExpandFromParent(){let e=this.host.parentElement;while(e){if(e.tagName==="IFX-TREE-VIEW"&&(e.hasAttribute("expand-all-items")||e.hasAttribute("data-expand-all-items")))return true;e=e.parentElement}return false}expandAllDescendants(){this.expanded=true;this.findChildren().forEach((e=>{var t,i;e.expanded=true;(i=(t=e).expandAllDescendants)===null||i===void 0?void 0:i.call(t)}))}expandOrCollapseAllDescendants(e){this.suppressExpandEvents=true;const t=[];this.expanded=e;if(this.hasChildren)t.push({expanded:e,value:this.value});this.findChildren().forEach((i=>{const s=i["__stencil_instance"];if(s&&s.hasChildren){s.suppressExpandEvents=true;s.expanded=e;t.push({expanded:e,value:s.value});if(s.hasChildren){const i=s.expandOrCollapseAllDescendants(e);t.push(...i)}}}));this.suppressExpandEvents=false;return t}async updateCheckState(e,t=false){if(this.disabled)return;if(!t&&this.hasChildren){const t=this.collectDescendantStates(e);this.setNodeState({isChecked:e,partialChecked:false},false);await this.updateChildrenSilently(e);this.ifxTreeViewItemCheckChange.emit({checked:e,indeterminate:false,value:this.value,affectedChildItems:t,component:this});this.updateParentState()}else if(t){this.setNodeState({isChecked:e,partialChecked:false},false)}else{this.setNodeState({isChecked:e,partialChecked:false});await this.updateChildrenState(e);this.updateParentState()}}async updateChildrenSilently(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){i.setNodeState({isChecked:e,partialChecked:false},false);await i.updateChildrenSilently(e)}}}handleExpandedChange(e){if(!this.suppressExpandEvents){this.ifxTreeViewItemExpandChange.emit({expanded:e,value:this.value,affectedItems:[{expanded:e,value:this.value}],component:this})}}handleDisableItemChange(e){this.ifxTreeViewItemDisableChange.emit({disabled:e,component:this})}setNodeState(e,t=true){this.isChecked=e.isChecked;this.partialChecked=e.partialChecked;if(t){this.ifxTreeViewItemCheckChange.emit({checked:this.isChecked,indeterminate:this.partialChecked,value:this.value,level:this.level,disabled:this.disabled,component:this})}}collectDescendantStates(e){const t=[];const i=(s,a=false)=>{let n=s===this.host?this:s["__stencil_instance"];if(!a&&!(n===null||n===void 0?void 0:n.disabled)){t.push({checked:e,indeterminate:false,value:n===null||n===void 0?void 0:n.value})}Array.from(s.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}))};Array.from(this.host.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}));return t}async updateChildrenState(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){await t.componentOnReady();t.dispatchEvent(new CustomEvent("internal-check-state-change",{detail:{checked:e},bubbles:false,composed:true}))}}}findSiblingNodes(e){return Array.from(e.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"))}updateParentState(){var e;const t=(e=this.host.parentElement)===null||e===void 0?void 0:e.closest("ifx-tree-view-item");if(!t)return;setTimeout((()=>{const e=t["__stencil_instance"];if(!e)return;const i=this.findSiblingNodes(t);const{allChecked:s,someChecked:a}=this.calculateSiblingStates(i);e.setNodeState({isChecked:s,partialChecked:!s&&a},false);e.updateParentState()}),0)}calculateSiblingStates(e){const t=e.map((e=>{const t=e["__stencil_instance"];return{checked:t===null||t===void 0?void 0:t.isChecked,partial:t===null||t===void 0?void 0:t.partialChecked}}));const i=t.filter((e=>e.checked)).length;const s=t.filter((e=>e.partial)).length;return{allChecked:t.length>0&&i===t.length&&s===0,someChecked:i>0||s>0}}render(){return i("div",{key:"162ae23e62d1e72d51db7be555af269a404a8a8b",class:{"tree-item":true,"tree-item--expanded":this.isExpanded,"tree-item--has-children":this.hasChildren,"tree-item--disabled":this.disabled},role:"treeitem","aria-expanded":this.isExpanded?"true":"false","data-level":this.level,"aria-disabled":this.disabled?"true":undefined,"aria-label":this.ariaLabel},i("div",{key:"befe8adcc6e30761593f89dcbc0b0afe3699e002",class:"tree-item__content"},i("div",{key:"5ad3f49e004fed83f1541ecef8bd94fd78ddc59f",class:"tree-item__checkbox-container",onClick:e=>e.stopPropagation()},i("ifx-checkbox",{key:"c038eb439265d26b74e6598a488f2d41a6d5dd96",size:"s",checked:this.partialChecked?false:this.isChecked,indeterminate:this.partialChecked,onIfxChange:this.handleCheckboxChange,disabled:this.disabled})),i("div",{key:"316f703d55730d34724c8ef8568d55fc69e6815b",class:"tree-item__header",style:{paddingLeft:`${this.level*24+10}px`},onClick:this.handleHeaderClick,tabIndex:-1,"aria-disabled":this.disabled?"true":undefined},this.hasChildren&&i("div",{key:"d2a8e5a1a403e6a239056a353d3bc38d209e0907",class:"tree-item__chevron-container",onClick:this.toggleExpand},i("ifx-icon",{key:"ea9ea3c3e9dc083b53faf27a89b73df19d2e68ca",class:`tree-item__chevron ${this.isExpanded?"chevron-down":"chevron-right"}`,icon:"chevron-right-16"}),i("div",{key:"14be28eda1a6d823f3416b6fdef0cd17cbc5a39f",class:"tree-item__line"})),i("div",{key:"488409621c1355737f0e5d7f5b90d6b94465cdaa",class:"tree-item__label-icon-container",tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown},i("div",{key:"163c36cdda49d36c94f7c7f18539f8e71bf04ed2",class:"tree-item__icon-container"},this.hasChildren?i(s,null,i("ifx-icon",{class:{"icon--hidden":this.isExpanded},icon:"folder-16"}),i("ifx-icon",{class:{"icon--hidden":!this.isExpanded},icon:"folder-open-16"})):i("ifx-icon",{icon:"file-16"})),i("span",{key:"42f0d9e90ae841e206318811c73e54bcf44c3cee",class:"tree-item__label"},i("slot",{key:"a06b08003dbaf058dee39508b193e4a5b94f65a7"}))))),this.isExpanded&&i("div",{key:"fc197474a8d0ba6d16cceede2ebef4c5db296501",class:"tree-item__children"},i("slot",{key:"cda8a8d46c3a59af25371545611bd6c9229be625",name:"children"})))}get host(){return a(this)}static get watchers(){return{expanded:["handleExpandedChange"],disableItem:["handleDisableItemChange"]}}};r.style=n;export{r as ifx_tree_view_item};
-//# sourceMappingURL=p-5f5e674d.entry.js.map
+import{r as e,c as t,h as i,F as s,a}from"./p-DS8meZSd.js";const n='.tree-item{position:relative;cursor:pointer;list-style:none}.tree-item.tree-item--expanded{position:relative}.tree-item.tree-item--has-children{position:relative}.tree-item.tree-item--has-children .tree-item__header>.tree-item__chevron-container{display:flex}.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header>.tree-item__chevron-container::after{display:block}.tree-item--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.tree-item__content{display:flex;flex-direction:row}.tree-item__content:hover .tree-item__checkbox-container,.tree-item__content:hover .tree-item__header{background-color:#F7F7F7}.tree-item__checkbox-container{position:sticky;left:0;z-index:10;padding:4px;background-color:#FFFFFF}.tree-item__header{flex-grow:1;display:flex;align-items:center;white-space:nowrap;height:20px;padding-top:4px;padding-right:16px;padding-bottom:4px;padding-left:8px}.tree-item__chevron-container{display:none;align-items:center;margin-right:8px;height:20px}.tree-item__chevron-container::after{--height-line-start:28px;display:none;content:"";position:absolute;z-index:1;top:var(--height-line-start);left:auto;margin-left:8px;width:1px;height:calc(100% - var(--height-line-start));background-color:#EEEDED}.tree-item--disabled .tree-item__chevron-container::after{color:#EEEDED}.tree-item__chevron.chevron-down{transform:rotate(90deg)}.tree-item__chevron.chevron-right{transform:rotate(0)}.tree-item__label-icon-container{display:flex;align-items:center}.tree-item__label-icon-container:focus{outline:none}.tree-item__label-icon-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.tree-item__icon-container{position:relative;width:16px;height:16px}.tree-item__icon-container ifx-icon{position:absolute;left:0;top:0;opacity:1;transition:opacity 0.2s ease-in-out}.tree-item__icon-container ifx-icon.icon--hidden{opacity:0}.tree-item__label{padding-left:8px}.tree-item__children{display:none}.tree-item[aria-expanded=true]>.tree-item__children{display:block}';const r=class{constructor(i){e(this,i);this.ifxTreeViewItemExpandChange=t(this,"ifxTreeViewItemExpandChange",7);this.ifxTreeViewItemCheckChange=t(this,"ifxTreeViewItemCheckChange",7);this.ifxTreeViewItemDisableChange=t(this,"ifxTreeViewItemDisableChange",7);this.expanded=false;this.initiallyExpanded=false;this.disableItem=false;this.initiallySelected=false;this.hasChildren=false;this.isChecked=false;this.partialChecked=false;this.level=0;this.disableAllItems=false;this.expandAllItems=false;this.suppressExpandEvents=false;this.findChildren=()=>Array.from(this.host.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"));this.calculateNodeLevel=()=>{let e=0,t=this.host.parentElement;while(t){if(t.tagName==="IFX-TREE-VIEW-ITEM")e++;t=t.parentElement}return e};this.handleStateChange=e=>{if(this.disabled)return;e.stopPropagation();this.updateCheckState(e.detail.checked)};this.handleCheckboxChange=e=>{var t,i;if(this.disabled)return;this.updateCheckState((i=(t=e.detail)===null||t===void 0?void 0:t.checked)!==null&&i!==void 0?i:!this.isChecked)};this.handleHeaderClick=({target:e})=>{if(this.disabled)return;if(!e.closest(".tree-item__checkbox-container, .tree-item__chevron-container")){if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}}};this.toggleExpand=()=>{if(this.disabled||!this.hasChildren)return;this.expanded=!this.expanded};this.handleKeyDown=e=>{var t,i,s,a,n,r;const h=Array.from(((t=this.host.closest("ifx-tree-view"))===null||t===void 0?void 0:t.querySelectorAll("ifx-tree-view-item"))||[]);const o=h.filter((e=>{var t,i;let s=(t=e.parentElement)===null||t===void 0?void 0:t.closest("ifx-tree-view-item");while(s){const e=s;if(!(e.expandAllItems||e.expanded))return false;s=(i=s.parentElement)===null||i===void 0?void 0:i.closest("ifx-tree-view-item")}return true}));const l=o.findIndex((e=>e===this.host));const c=e=>e===null||e===void 0?void 0:e.focus();switch(e.key){case"ArrowDown":{e.preventDefault();for(let e=l+1;e<o.length;e++){const t=o[e];if(!t.disabled){c((i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowUp":{e.preventDefault();for(let e=l-1;e>=0;e--){const t=o[e];if(!t.disabled){c((s=t.shadowRoot)===null||s===void 0?void 0:s.querySelector(".tree-item__label-icon-container"));break}}break}case"ArrowRight":{e.preventDefault();if(!this.isExpanded&&this.hasChildren){this.expanded=true}else if(this.isExpanded&&this.hasChildren){const e=this.host.querySelector("ifx-tree-view-item");if(e&&!e.disabled){c((a=e.shadowRoot)===null||a===void 0?void 0:a.querySelector(".tree-item__label-icon-container"))}}break}case"ArrowLeft":{e.preventDefault();if(this.isExpanded&&this.hasChildren){this.expanded=false}else{const e=(n=this.host.parentElement)===null||n===void 0?void 0:n.closest("ifx-tree-view-item");if(e&&!e.disabled){c((r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".tree-item__label-icon-container"))}}break}case" ":case"Enter":{e.preventDefault();if(this.hasChildren){const e=!this.isChecked;this.updateCheckState(e);const t=e?this.expandOrCollapseAllDescendants(true):this.expandOrCollapseAllDescendants(false);this.ifxTreeViewItemExpandChange.emit({expanded:e,affectedItems:t,component:this})}else{this.updateCheckState(!this.isChecked)}break}}}}get disabled(){return this.disableAllItems||this.disableItem}get isExpanded(){return this.expandAllItems||this.expanded}componentWillLoad(){this.expanded=this.initiallyExpanded;this.hasChildren=this.findChildren().length>0;this.level=this.calculateNodeLevel();this.host.setAttribute("data-level",this.level.toString());this.isChecked=this.initiallySelected;this.host.addEventListener("internal-check-state-change",this.handleStateChange)}componentDidLoad(){this.observeParentAttribute("disable-all-items",(e=>this.disableAllItems=e));this.observeParentAttribute("data-expand-all-items",(e=>this.expandAllItems=e),true);if(this.shouldExpandFromParent())this.expandAllDescendants();this.host["__stencil_instance"]=this;if(this.initiallySelected)setTimeout((()=>this.updateParentState()),0)}observeParentAttribute(e,t,i=false){let s=this.host.parentElement;while(s){if(s.tagName==="IFX-TREE-VIEW"||i&&s.hasAttribute(e)){const i=new MutationObserver((()=>t(s.hasAttribute(e))));i.observe(s,{attributes:true});t(s.hasAttribute(e));break}s=s.parentElement}}shouldExpandFromParent(){let e=this.host.parentElement;while(e){if(e.tagName==="IFX-TREE-VIEW"&&(e.hasAttribute("expand-all-items")||e.hasAttribute("data-expand-all-items")))return true;e=e.parentElement}return false}expandAllDescendants(){this.expanded=true;this.findChildren().forEach((e=>{var t,i;e.expanded=true;(i=(t=e).expandAllDescendants)===null||i===void 0?void 0:i.call(t)}))}expandOrCollapseAllDescendants(e){this.suppressExpandEvents=true;const t=[];this.expanded=e;if(this.hasChildren)t.push({expanded:e,value:this.value});this.findChildren().forEach((i=>{const s=i["__stencil_instance"];if(s&&s.hasChildren){s.suppressExpandEvents=true;s.expanded=e;t.push({expanded:e,value:s.value});if(s.hasChildren){const i=s.expandOrCollapseAllDescendants(e);t.push(...i)}}}));this.suppressExpandEvents=false;return t}async updateCheckState(e,t=false){if(this.disabled)return;if(!t&&this.hasChildren){const t=this.collectDescendantStates(e);this.setNodeState({isChecked:e,partialChecked:false},false);await this.updateChildrenSilently(e);this.ifxTreeViewItemCheckChange.emit({checked:e,indeterminate:false,value:this.value,affectedChildItems:t,component:this});this.updateParentState()}else if(t){this.setNodeState({isChecked:e,partialChecked:false},false)}else{this.setNodeState({isChecked:e,partialChecked:false});await this.updateChildrenState(e);this.updateParentState()}}async updateChildrenSilently(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){i.setNodeState({isChecked:e,partialChecked:false},false);await i.updateChildrenSilently(e)}}}handleExpandedChange(e){if(!this.suppressExpandEvents){this.ifxTreeViewItemExpandChange.emit({expanded:e,value:this.value,affectedItems:[{expanded:e,value:this.value}],component:this})}}handleDisableItemChange(e){this.ifxTreeViewItemDisableChange.emit({disabled:e,component:this})}setNodeState(e,t=true){this.isChecked=e.isChecked;this.partialChecked=e.partialChecked;if(t){this.ifxTreeViewItemCheckChange.emit({checked:this.isChecked,indeterminate:this.partialChecked,value:this.value,level:this.level,disabled:this.disabled,component:this})}}collectDescendantStates(e){const t=[];const i=(s,a=false)=>{let n=s===this.host?this:s["__stencil_instance"];if(!a&&!(n===null||n===void 0?void 0:n.disabled)){t.push({checked:e,indeterminate:false,value:n===null||n===void 0?void 0:n.value})}Array.from(s.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}))};Array.from(this.host.children).forEach((e=>{if(e.tagName==="IFX-TREE-VIEW-ITEM")i(e,false)}));return t}async updateChildrenState(e){for(const t of this.findChildren()){const i=t["__stencil_instance"];if(i&&!i.disabled){await t.componentOnReady();t.dispatchEvent(new CustomEvent("internal-check-state-change",{detail:{checked:e},bubbles:false,composed:true}))}}}findSiblingNodes(e){return Array.from(e.children).filter((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"))}updateParentState(){var e;const t=(e=this.host.parentElement)===null||e===void 0?void 0:e.closest("ifx-tree-view-item");if(!t)return;setTimeout((()=>{const e=t["__stencil_instance"];if(!e)return;const i=this.findSiblingNodes(t);const{allChecked:s,someChecked:a}=this.calculateSiblingStates(i);e.setNodeState({isChecked:s,partialChecked:!s&&a},false);e.updateParentState()}),0)}calculateSiblingStates(e){const t=e.map((e=>{const t=e["__stencil_instance"];return{checked:t===null||t===void 0?void 0:t.isChecked,partial:t===null||t===void 0?void 0:t.partialChecked}}));const i=t.filter((e=>e.checked)).length;const s=t.filter((e=>e.partial)).length;return{allChecked:t.length>0&&i===t.length&&s===0,someChecked:i>0||s>0}}render(){return i("div",{key:"b382f043910b7aea147b4a3d8957b50bbb69f270",class:{"tree-item":true,"tree-item--expanded":this.isExpanded,"tree-item--has-children":this.hasChildren,"tree-item--disabled":this.disabled},role:"treeitem","aria-expanded":this.isExpanded?"true":"false","data-level":this.level,"aria-disabled":this.disabled?"true":undefined,"aria-label":this.ariaLabel},i("div",{key:"547935ce2e47ecaeaac55a5c3436a3a02e7d4aca",class:"tree-item__content"},i("div",{key:"799079032aafd3e72b4d29c9f3a1b8eeae306d74",class:"tree-item__checkbox-container",onClick:e=>e.stopPropagation()},i("ifx-checkbox",{key:"2c97b33134217d8398466cecf15deb13302c7adc",size:"s",checked:this.partialChecked?false:this.isChecked,indeterminate:this.partialChecked,onIfxChange:this.handleCheckboxChange,disabled:this.disabled})),i("div",{key:"07d97392053e7ef3c38ce6d64683881dacbd9516",class:"tree-item__header",style:{paddingLeft:`${this.level*24+10}px`},onClick:this.handleHeaderClick,tabIndex:-1,"aria-disabled":this.disabled?"true":undefined},this.hasChildren&&i("div",{key:"1ffa4fb674d90a06d82a3419136c164b3654ca71",class:"tree-item__chevron-container",onClick:this.toggleExpand},i("ifx-icon",{key:"2da83b8a5196476e2ae364b213d1201f6f53c612",class:`tree-item__chevron ${this.isExpanded?"chevron-down":"chevron-right"}`,icon:"chevron-right-16"}),i("div",{key:"654e5d3d2fe1c5243480129023785da373f52336",class:"tree-item__line"})),i("div",{key:"5ea7a77901f16c59ed1224e81bee8513f3d502fa",class:"tree-item__label-icon-container",tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown},i("div",{key:"08e958ec2b33f110cc9a36ecc6fc479646659645",class:"tree-item__icon-container"},this.hasChildren?i(s,null,i("ifx-icon",{class:{"icon--hidden":this.isExpanded},icon:"folder-16"}),i("ifx-icon",{class:{"icon--hidden":!this.isExpanded},icon:"folder-open-16"})):i("ifx-icon",{icon:"file-16"})),i("span",{key:"8fd14dfd77b2d1488367d2cb415a9e3e86adcf72",class:"tree-item__label"},i("slot",{key:"4faae4c0df02ab739505fbe5dd791b18f81c7a82"}))))),this.isExpanded&&i("div",{key:"e7917a721bcb256dbd24e6b19a29e095be51eaa0",class:"tree-item__children"},i("slot",{key:"a5992d80d1bc0d36c8498f73e57005587d483730",name:"children"})))}get host(){return a(this)}static get watchers(){return{expanded:["handleExpandedChange"],disableItem:["handleDisableItemChange"]}}};r.style=n;export{r as ifx_tree_view_item};
+//# sourceMappingURL=p-7ce54612.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as o,h as r,a as e}from"./p-DS8meZSd.js";import{d as n,t as d}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.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=class{constructor(r){o(this,r);this.border=false;this.color="orange-500"}async componentDidLoad(){if(!a(this.el)){const o=n();d("ifx-status",await 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:"5c05fea02c5edc5cdebaa0a08c21e4e12cbf4139","aria-label":"a status indicator","aria-value":this.label,class:n},r("span",{key:"c546e86e37c2692f017bda9938d53436caf771c0",class:`dot ${e}`}),r("p",{key:"98b767f5a97332da894a987c0bd203f377d72db9",class:"text"},this.label))}get el(){return e(this)}};c.style=i;export{c as ifx_status};
+//# sourceMappingURL=p-8291f4e6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["statusCss","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  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-status', await 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,87F,MCWLC,EAAM,MANnB,WAAAC,CAAAC,G,UASUC,KAAMC,OAAY,MAClBD,KAAKE,MAAW,YAoBzB,CAlBC,sBAAMC,GACJ,IAAIC,EAAuBJ,KAAKK,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,mBAAoBF,E,EAIvC,MAAAG,G,MACE,MAAMC,IAAiBC,EAAAX,KAAKE,SAAK,MAAAS,SAAA,SAAAA,EAAEC,QAASZ,KAAKE,MAAQ,aACzD,MAAMW,EAAiBb,KAAKC,OAAS,oBAAoBS,IAAmB,sBAE5E,OACEI,EAAgB,OAAAC,IAAA,6EAAiC,aAAAf,KAAKgB,MAAOC,MAAOJ,GAClEC,EAAA,QAAAC,IAAA,2CAAME,MAAO,OAAOP,MACpBI,EAAG,KAAAC,IAAA,2CAAAE,MAAM,QAAQjB,KAAKgB,O","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-863e520d.entry.js → p-89d7b521.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,e as t,h as a,a as s}from"./p-DS8meZSd.js";const i="*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";const r=class{constructor(a){e(this,a);this.tableTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);this.wizardTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`)}toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".templates__wrapper").querySelectorAll("ifx-template");t.forEach((t=>{t.toggleTemplate(e)}))}handleError(e){const t=this.el.shadowRoot.querySelector(".alert__wrapper");if(e.detail){t.classList.add("show")}else{t.classList.remove("show")}}filterTemplates(e){const t=this.el.shadowRoot.querySelector(".templates__title");const a=this.el.shadowRoot.querySelector(".back__btn-wrapper");if(e.detail){t.classList.add("hide");if(e.detail!=="details"){a.classList.add("show")}this.toggleTemplate(e.detail)}else{t.classList.remove("hide");a.classList.remove("show");this.toggleTemplate(null)}}closeAlert(){const e=this.el.shadowRoot.querySelector(".alert__wrapper");e.classList.remove("show")}render(){return a("div",{key:"2d9ccb404cd44ee792616a416d45af6969c11a19",class:"templates__container"},a("div",{key:"7d9e45149564d2242878dbbfded2ea15831f8170",class:"back__btn-wrapper"},a("ifx-icon-button",{key:"e5388dd20c8c1f3a94443ae983b2f4c4e941c429",onClick:()=>this.filterTemplates(false),shape:"round",variant:"tertiary",icon:"arrow-left-16",target:"_blank",size:"m"}),a("div",{key:"1b2a63f1b8ab5ebd0dbc30596f4ee1b5b9371fe9",class:"alert__wrapper"},a("ifx-alert",{key:"092ed5aa673d275fc52487230354d4ab041b1980",onClick:()=>this.closeAlert(),"aria-live":"assertive",variant:"danger",icon:"c-info-16"},"All fields are mandatory"))),a("h2",{key:"69b45afb1bf51ab3baccd68fe3d4f1c404aae826",class:"templates__title"},"Choose your template"),a("div",{key:"9d9607f52e8dc440c1da8d337237d9db9eff75a1",class:"templates__wrapper"},a("ifx-template",{key:"4c8858042261b273050d5343fb2f58290e7350f2",name:"template-01",thumbnail:this.tableTemplate}),a("ifx-template",{key:"3285011905aaad365bc8f54952b1fef65bd3495a",name:"template-02",thumbnail:this.wizardTemplate})))}static get assetsDirs(){return["assets"]}get el(){return s(this)}};r.style=i;export{r as ifx_templates_ui};
-//# sourceMappingURL=p-863e520d.entry.js.map
+import{r as e,e as t,h as a,a as s}from"./p-DS8meZSd.js";const i="*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";const r=class{constructor(a){e(this,a);this.tableTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);this.wizardTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`)}toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".templates__wrapper").querySelectorAll("ifx-template");t.forEach((t=>{t.toggleTemplate(e)}))}handleError(e){const t=this.el.shadowRoot.querySelector(".alert__wrapper");if(e.detail){t.classList.add("show")}else{t.classList.remove("show")}}filterTemplates(e){const t=this.el.shadowRoot.querySelector(".templates__title");const a=this.el.shadowRoot.querySelector(".back__btn-wrapper");if(e.detail){t.classList.add("hide");if(e.detail!=="details"){a.classList.add("show")}this.toggleTemplate(e.detail)}else{t.classList.remove("hide");a.classList.remove("show");this.toggleTemplate(null)}}closeAlert(){const e=this.el.shadowRoot.querySelector(".alert__wrapper");e.classList.remove("show")}render(){return a("div",{key:"c34596386a391c421389f7d0715e01de0581de2e",class:"templates__container"},a("div",{key:"d36800e04daa98ba555b0e8e4f58957960d296f6",class:"back__btn-wrapper"},a("ifx-icon-button",{key:"0909aef53ac7b933839afa61bce5916e6e1dbb6f",onClick:()=>this.filterTemplates(false),shape:"round",variant:"tertiary",icon:"arrow-left-16",target:"_blank",size:"m"}),a("div",{key:"8c4928e1224963db801779c5a5557a3fef979d2d",class:"alert__wrapper"},a("ifx-alert",{key:"4cd3381649bd441959b55796fc7908507d1019ca",onClick:()=>this.closeAlert(),"aria-live":"assertive",variant:"danger",icon:"c-info-16"},"All fields are mandatory"))),a("h2",{key:"5e4c952723938f8d8c07e75d52da443dfd57cf42",class:"templates__title"},"Choose your template"),a("div",{key:"fea5647d0a300fb3b84c06a09dd12c0bd16b5630",class:"templates__wrapper"},a("ifx-template",{key:"b23fed97f867be22c33cf24fd5f8cb273c1c408e",name:"template-01",thumbnail:this.tableTemplate}),a("ifx-template",{key:"84798da9a0339349072f0df1e882ab8aed922068",name:"template-02",thumbnail:this.wizardTemplate})))}static get assetsDirs(){return["assets"]}get el(){return s(this)}};r.style=i;export{r as ifx_templates_ui};
+//# sourceMappingURL=p-89d7b521.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as t,d as a,a as s}from"./p-DS8meZSd.js";import{d as i,t as o}from"./p-DcmcuUOA.js";import{i as l}from"./p-Bw2fh5LT.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}.wrapper__label .required{margin-left:4px}.wrapper__label .required.error{color:#CD002F}:host(.wrapper--disabled) .wrapper__label{color:#575352}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #575352;background-color:#EEEDED}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#575352}';const p=class{constructor(t){e(this,t);this.ifxInput=r(this,"ifxInput",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-textarea-${++h}`;this.disabled=false;this.error=false;this.required=false;this.readOnly=false;this.resize="both";this.wrap="soft";this.fullWidth="false"}async reset(){this.resetTextarea()}handleComponentWidth(){const e=this.el.shadowRoot.querySelector(".wrapper__textarea");const r=this.fullWidth.toLowerCase()==="true";if(r){e.classList.add("fullWidth")}else if(e.classList.contains("fullWidth")){e.classList.remove("fullWidth")}}componentDidRender(){this.handleComponentWidth()}formResetCallback(){this.resetTextarea();this.internals.setFormValue("")}handleOnInput(e){this.value=e.target.value;this.internals.setFormValue(this.value);this.ifxInput.emit(this.value)}resetTextarea(){this.value="";this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){this.internals.setFormValue(this.value)}async componentDidLoad(){if(!l(this.el)){const e=i();o("ifx-textarea",await e)}}render(){var e,r;return t(a,{key:"b4481c42adc76f507c7b6ba58c6a9a3bf2dc002e",class:`wrapper--${this.error?"error":""} wrapper--${this.disabled?"disabled":""}`},t("label",{key:"34dc978345858588513900e8dd942ad4585342ef",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim(),this.required&&t("span",{key:"c7b7cf42e30c3dfebd6d4f04809c95ab7f01e5fd",class:`required ${this.error?"error":""}`},"*")),t("div",{key:"6b6bca4bdb1cb3c6a1eb92464b608ca00ded8862",class:"wrapper__textarea"},t("textarea",{key:"0d26ed98a8c443f07381b411d46bae7de192e714","aria-label":"a textarea","aria-value":this.value,"aria-disabled":this.disabled,id:this.inputId,style:{resize:this.resize},name:this.name?this.name:this.inputId,cols:this.cols,rows:this.rows,maxlength:this.maxlength,wrap:this.wrap,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,onInput:e=>this.handleOnInput(e)})),((r=this.caption)===null||r===void 0?void 0:r.trim())&&t("div",{key:"e9da35cc7b65c78fa1afdf2cf27f18e7505deb89",class:"wrapper__caption"},this.caption.trim()))}static get formAssociated(){return true}get el(){return s(this)}};let h=0;p.style=d;export{p as ifx_textarea};
+//# sourceMappingURL=p-8a526f6e.entry.js.map

package/dist/infineon-design-system-stencil/{p-1453032c.entry.js.map → p-8a526f6e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["textareaCss","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","required","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n     outline: 2px solid tokens.$ifxColorOcean500;\n     outline-offset: 0; \n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, 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\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() required: boolean = false;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\n\t\tif (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n\t\t}\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.handleComponentWidth()\n\t}\n\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\t\tasync componentDidLoad() { \n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent('ifx-textarea', await framework)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\n\t\t\t\t\t{this.label?.trim()}\n\t\t\t\t\t{this.required && (\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n\t\t\t\t\t)}\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={this.value}\n\t\t\t\t\t\taria-disabled={this.disabled}\n\t\t\t\t\t\tid={this.inputId}\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={this.cols}\n\t\t\t\t\t\trows={this.rows}\n\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\twrap={this.wrap}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\treadonly={this.readOnly}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{this.caption.trim()}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"+IAAA,MAAMA,EAAc,6qC,MCYPC,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAQG,SAAY,MACpBH,KAAKI,MAAY,MAKjBJ,KAAQK,SAAY,MACpBL,KAAQM,SAAY,MACpBN,KAAMO,OAAgD,OAGtDP,KAAIQ,KAA4B,OACfR,KAASS,UAAW,OAwF7C,CArFA,WAAMC,GACLV,KAAKW,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBb,KAAKc,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAcjB,KAAKS,UAAUS,gBAAkB,OAErD,GAAID,EAAa,CAChBJ,EAAgBM,UAAUC,IAAI,Y,MACxB,GAAIP,EAAgBM,UAAUE,SAAS,aAAc,CAC3DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACCvB,KAAKY,sB,CAGN,iBAAAY,GACCxB,KAAKW,gBACLX,KAAKyB,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACb5B,KAAK6B,MAASD,EAAEE,OAA+BD,MAC/C7B,KAAKyB,UAAUC,aAAa1B,KAAK6B,OACjC7B,KAAK+B,SAASC,KAAKhC,KAAK6B,M,CAGzB,aAAAlB,GACCX,KAAK6B,MAAQ,GACb7B,KAAKyB,UAAUQ,YAAY,IAC3BjC,KAAKyB,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACClC,KAAKyB,UAAUC,aAAa1B,KAAK6B,M,CAGjC,sBAAMM,GACN,IAAIC,EAAuBpC,KAAKc,IAAK,CACpC,MAAMuB,EAAYC,IAClBC,EAAe,qBAAsBF,E,EAIvC,MAAAG,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAY5C,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,SAAW,WAAa,MAC3FsC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAS7C,KAAKC,UAC1C6C,EAAA9C,KAAK+C,SAAK,MAAAD,SAAA,SAAEA,EAAAE,OACZhD,KAAKK,UACLoC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,YAAY5C,KAAKI,MAAQ,QAAU,MAAc,MAIhEqC,EAAK,OAAAE,IAAA,2CAAAC,MAAM,qBACVH,EACY,YAAAE,IAAA,qEAAY,aACX3C,KAAK6B,MACF,gBAAA7B,KAAKG,SACpB8C,GAAIjD,KAAKC,QACTiD,MAAO,CAAE3C,OAAQP,KAAKO,QACtB4C,KAAMnD,KAAKmD,KAAOnD,KAAKmD,KAAOnD,KAAKC,QACnCmD,KAAMpD,KAAKoD,KACXC,KAAMrD,KAAKqD,KACXC,UAAWtD,KAAKsD,UAChB9C,KAAMR,KAAKQ,KACXL,SAAUH,KAAKG,SACfoD,SAAUvD,KAAKM,SACfkD,YAAaxD,KAAKwD,YAClB3B,MAAO7B,KAAK6B,MACZ4B,QAAU7B,GAAM5B,KAAK2B,cAAcC,QAIpC8B,EAAA1D,KAAK2D,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACdP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACT5C,KAAK2D,QAAQX,Q,mEAQpB,IAAI9C,EAAa,E","ignoreList":[]}
+{"version":3,"names":["textareaCss","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","required","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, 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\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() required: boolean = false;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\n\t\tif (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n\t\t}\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.handleComponentWidth()\n\t}\n\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\t\tasync componentDidLoad() { \n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent('ifx-textarea', await framework)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\n\t\t\t\t\t{this.label?.trim()}\n\t\t\t\t\t{this.required && (\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n\t\t\t\t\t)}\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={this.value}\n\t\t\t\t\t\taria-disabled={this.disabled}\n\t\t\t\t\t\tid={this.inputId}\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={this.cols}\n\t\t\t\t\t\trows={this.rows}\n\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\twrap={this.wrap}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\treadonly={this.readOnly}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{this.caption.trim()}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"+IAAA,MAAMA,EAAc,wqC,MCYPC,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAQG,SAAY,MACpBH,KAAKI,MAAY,MAKjBJ,KAAQK,SAAY,MACpBL,KAAQM,SAAY,MACpBN,KAAMO,OAAgD,OAGtDP,KAAIQ,KAA4B,OACfR,KAASS,UAAW,OAwF7C,CArFA,WAAMC,GACLV,KAAKW,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBb,KAAKc,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAcjB,KAAKS,UAAUS,gBAAkB,OAErD,GAAID,EAAa,CAChBJ,EAAgBM,UAAUC,IAAI,Y,MACxB,GAAIP,EAAgBM,UAAUE,SAAS,aAAc,CAC3DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACCvB,KAAKY,sB,CAGN,iBAAAY,GACCxB,KAAKW,gBACLX,KAAKyB,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACb5B,KAAK6B,MAASD,EAAEE,OAA+BD,MAC/C7B,KAAKyB,UAAUC,aAAa1B,KAAK6B,OACjC7B,KAAK+B,SAASC,KAAKhC,KAAK6B,M,CAGzB,aAAAlB,GACCX,KAAK6B,MAAQ,GACb7B,KAAKyB,UAAUQ,YAAY,IAC3BjC,KAAKyB,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACClC,KAAKyB,UAAUC,aAAa1B,KAAK6B,M,CAGjC,sBAAMM,GACN,IAAIC,EAAuBpC,KAAKc,IAAK,CACpC,MAAMuB,EAAYC,IAClBC,EAAe,qBAAsBF,E,EAIvC,MAAAG,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAY5C,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,SAAW,WAAa,MAC3FsC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAS7C,KAAKC,UAC1C6C,EAAA9C,KAAK+C,SAAK,MAAAD,SAAA,SAAEA,EAAAE,OACZhD,KAAKK,UACLoC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,YAAY5C,KAAKI,MAAQ,QAAU,MAAc,MAIhEqC,EAAK,OAAAE,IAAA,2CAAAC,MAAM,qBACVH,EACY,YAAAE,IAAA,qEAAY,aACX3C,KAAK6B,MACF,gBAAA7B,KAAKG,SACpB8C,GAAIjD,KAAKC,QACTiD,MAAO,CAAE3C,OAAQP,KAAKO,QACtB4C,KAAMnD,KAAKmD,KAAOnD,KAAKmD,KAAOnD,KAAKC,QACnCmD,KAAMpD,KAAKoD,KACXC,KAAMrD,KAAKqD,KACXC,UAAWtD,KAAKsD,UAChB9C,KAAMR,KAAKQ,KACXL,SAAUH,KAAKG,SACfoD,SAAUvD,KAAKM,SACfkD,YAAaxD,KAAKwD,YAClB3B,MAAO7B,KAAK6B,MACZ4B,QAAU7B,GAAM5B,KAAK2B,cAAcC,QAIpC8B,EAAA1D,KAAK2D,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACdP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACT5C,KAAK2D,QAAQX,Q,mEAQpB,IAAI9C,EAAa,E","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-993d003a.entry.js → p-8c82ffa9.entry.js}

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["stepperCss","Stepper","constructor","hostRef","this","activeStep","indicatorPosition","showStepNumber","variant","shouldEmitEvent","emittedByClick","onStepChange","event","steps","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","disabled","emitIfxChange","i","stepsCount","ifxChange","emit","totalSteps","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","bind","setInitialActiveStep","Math","max","min","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","key","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\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-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-stepper', await framework)\n        }\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = 'a stepper' \n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"mappings":"wIAAA,MAAMA,EAAa,m6B,MCoBNC,EAAO,MANpB,WAAAC,CAAAC,G,+CAW6BC,KAAUC,WAAW,EACtCD,KAAiBE,kBAAsB,OACvCF,KAAcG,eAAa,MAC3BH,KAAOI,QAAwC,UAI9CJ,KAAeK,gBAAY,KAC3BL,KAAcM,eAAY,KA4JtC,CAzJG,YAAAC,CAAaC,GACT,MAAMC,EAAQT,KAAKU,WACnB,MAAMC,EAAqBF,EAAMD,EAAMI,OAAOD,mBAAmB,GACjE,GAAIA,IAAuBA,EAAmBE,SAAU,CACpDF,EAAmBG,aAAa,QAAS,O,EAKjD,gBAAAC,CAAiBC,EAAiBC,GAC9B,MAAMR,EAAQT,KAAKU,WACnB,IAAKV,KAAKK,gBAAiB,CACvBL,KAAKK,gBAAkB,KACvB,M,CAGJ,GAAGI,EAAMO,EAAQ,GAAI,CACjB,IAAKP,EAAMO,EAAQ,GAAGE,SAAU,CAC5BlB,KAAKmB,cAAcH,EAASC,E,KACzB,CAEH,GAAID,EAAUC,EAAS,CACnB,IAAIG,EAAIJ,EACRhB,KAAKK,gBAAkB,MACvB,MAAOe,GAAK,GAAKX,EAAMW,EAAE,GAAGF,SAAUE,IAEtC,GAAIA,EAAI,EAAG,CACPpB,KAAKC,WAAagB,C,KACf,CACHjB,KAAKmB,cAAcC,EAAGH,GACtBjB,KAAKC,WAAamB,C,MAIrB,CACD,IAAIA,EAAIJ,EACRhB,KAAKK,gBAAkB,MACvB,MAAOe,GAAKpB,KAAKqB,YAAcZ,EAAMW,EAAE,GAAGF,SAAUE,IACpD,GAAIA,EAAIpB,KAAKqB,WAAY,CACrBrB,KAAKC,WAAagB,C,KACf,CACHjB,KAAKmB,cAAcC,EAAGH,GACtBjB,KAAKC,WAAamB,C,KAOtC,aAAAD,CAAclB,EAAoBU,GAC9BX,KAAKsB,UAAUC,KAAK,CAACtB,WAAYA,EAC7BU,mBAAoBA,EACpBa,WAAYxB,KAAKqB,WACjBf,eAAgBN,KAAKM,iBAEzBN,KAAKM,eAAiB,K,CAG1B,QAAAI,GACI,MAAMD,EAAwCT,KAAKyB,GAAGC,iBAAiB,YACvE,OAAOjB,C,CAIX,8BAAAkB,GACI,MAAMlB,EAAQT,KAAKU,WACnBD,EAAMA,EAAMmB,OAAS,GAAGC,SAAW,KACnC,IAAK,IAAIT,EAAI,EAAGA,EAAIX,EAAMmB,OAAQR,IAAK,CACnCX,EAAMW,GAAGU,OAASV,EAAI,C,CAE1BpB,KAAKqB,WAAaZ,EAAMmB,M,CAI5B,aAAAG,CAAcD,EAAgBE,EAAsB,OAChDhC,KAAKM,eAAiB0B,EACtBhC,KAAKC,WAAa6B,C,CAGtB,8BAAAG,GACI,MAAMxB,EAAQT,KAAKU,WACnBD,EAAMyB,SAAS,CAACC,EAAML,KAClB,GAAIA,EAAO,EAAI9B,KAAKC,WAAYkC,EAAKtB,SAAW,IAAI,G,CAI5D,YAAAuB,GACI,MAAM3B,EAAQT,KAAKU,WACnB,IAAK,IAAIU,EAAI,EAAGA,EAAIX,EAAMmB,OAAQR,IAAK,CACnC,MAAMiB,EAA6B,CAC/BpC,WAAYD,KAAKC,WACjBC,kBAAoBF,KAAKE,oBAAsB,QAAU,OAAS,QAClEC,eAAgBH,KAAKG,eACrBC,QAAWJ,KAAKI,UAAY,WAAaJ,KAAKI,UAAY,WAAc,UAAYJ,KAAKI,QACzF2B,cAAe/B,KAAK+B,cAAcO,KAAKtC,OAE3CS,EAAMW,GAAGiB,aAAeA,C,EAIhC,oBAAAE,GACIvC,KAAKC,WAAauC,KAAKC,IAAI,EAAGD,KAAKE,IAAI1C,KAAKqB,YAAcrB,KAAKI,UAAY,UAAY,EAAI,GAAIJ,KAAKC,Y,CAIxG,iBAAA0C,GACI3C,KAAK2B,iCACL3B,KAAKuC,uBACLvC,KAAKiC,gC,CAGT,sBAAMW,GACF,IAAIC,EAAuB7C,KAAKyB,IAAK,CACjC,MAAMqB,EAAYC,IAClBC,EAAe,oBAAqBF,E,CAExC9C,KAAKoC,c,CAGT,mBAAAa,GACIjD,KAAKoC,c,CAGT,MAAAc,GACI,OACIC,EAAkB,OAAAC,IAAA,oEACdC,KAAO,aACPC,MAAS,WAAYtD,KAAKI,UAAY,WAAaJ,KAAKI,UAAY,WAAc,UAAYJ,KAAKI,WAAWJ,KAAKI,UAAY,UAAY,WAAWJ,KAAKE,kBAAmB,MAGzKF,KAAKI,UAAY,WAClB+C,EAAK,OAAAC,IAAA,2CAAAE,MAAQ,oBACTH,EAAK,OAAAC,IAAA,2CAAAE,MAAQ,mBACR,GAAGd,KAAKE,IAAI1C,KAAKC,WAAYD,KAAKqB,kBAAkBrB,KAAKqB,eAMtE8B,EAAK,OAAAC,IAAA,2CAAAE,MAAS,mBACVH,EAAQ,QAAAC,IAAA,8C,CAMxB,kBAAAG,GAEI,GAAIvD,KAAKI,SAAW,UAAW,CAC3B,MAAMoD,EAA2BxD,KAAKyB,GAAGgC,WAAWC,cAAc,qBAClEF,EAAYG,MAAMC,YAAY,OAAQ,GAAI5D,KAAKC,WAAcD,KAAe,WAAK,O","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-394548d7.entry.js → p-94eaf9ae.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,d as s,a}from"./p-DS8meZSd.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=class{constructor(i){t(this,i);this.ifxTopbarFilterChange=e(this,"ifxTopbarFilterChange",7);this.selectedOptions=[];this.showAllFilters=false;this.maxShownFilters=4;this.showMoreFiltersButton=true;this.handleMoreFiltersClick=()=>{this.showAllFilters=true;this.updateVisibleSlots()};this.handleResetEvent=()=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="filter-search"]');if(e instanceof HTMLSlotElement){const t=e.assignedElements({flatten:true});t.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}))}this.selectedOptions=[];this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.handleSearchChange=t=>{this.handleTopbarFilterChange(t)};this.handleFilterSelect=t=>{this.handleTopbarFilterChange(t)};this.handleTopbarFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const a=e.findIndex((t=>t.filterName===i));if(a!==-1){e[a].filterValues=[s]}else{e.push({filterName:i,filterValues:[s],type:"text"})}}else if(t.type==="ifxFilterSelect"){const{filterName:i,filterValues:s,type:a}=t.detail;const l=e.findIndex((t=>t.filterName===i));if(l!==-1){e[l].filterValues=s;e[l].type=a}else{e.push({filterName:i,filterValues:s,type:a})}}this.selectedOptions=e;this.ifxTopbarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillUnload(){this.el.removeEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillLoad(){this.updateVisibleSlots()}updateVisibleSlots(){this.visibleSlots=this.showAllFilters?Number.MAX_SAFE_INTEGER:this.maxShownFilters}render(){const t=Math.max(0,this.visibleSlots);const e=this.el.querySelectorAll("ifx-set-filter").length;const a=Math.min(t,e,Number.MAX_SAFE_INTEGER);const l=Array.from({length:a},((t,e)=>i("div",{class:"filter-slot-wrapper"},i("slot",{name:`filter-component-${e+1}`}))));return i(s,{key:"61ff68bcd216de78c9cb8e602a0c458d2e8d8c80"},i("div",{key:"16ad48a609a86177bf091353c2d1e2930f8cd511",class:"search-container"},i("slot",{key:"5cf1d5ee6b7abe44edbd6826eb521ab491b6f621",name:"filter-search"})," "),i("div",{key:"22bf6b2805f8c0a2db88b18905a5216c5091cc31",class:"components-container"},l.length>0?l:i("slot",{name:"filter-component"}),this.showMoreFiltersButton&&!this.showAllFilters&&i("div",{key:"3873323683c5115d92be0735b283e082e052622a",class:"more-filters-wrapper",onClick:this.handleMoreFiltersClick},i("ifx-button",{key:"3628211cca4ec943829f4964b9f49ae4e9b89ad3",type:"button",disabled:false,variant:"tertiary",size:"m",target:"_blank",theme:"default","full-width":"false"},i("ifx-icon",{key:"c659f861b2223ae50f23dedfe7b1a8d0e52aadba",icon:"filter-16"}),"More filters"))))}get el(){return a(this)}};r.style=l;export{r as ifx_filter_bar};
-//# sourceMappingURL=p-394548d7.entry.js.map
+import{r as t,c as e,h as i,d as s,a}from"./p-DS8meZSd.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=class{constructor(i){t(this,i);this.ifxTopbarFilterChange=e(this,"ifxTopbarFilterChange",7);this.selectedOptions=[];this.showAllFilters=false;this.maxShownFilters=4;this.showMoreFiltersButton=true;this.handleMoreFiltersClick=()=>{this.showAllFilters=true;this.updateVisibleSlots()};this.handleResetEvent=()=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="filter-search"]');if(e instanceof HTMLSlotElement){const t=e.assignedElements({flatten:true});t.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}))}this.selectedOptions=[];this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.handleSearchChange=t=>{this.handleTopbarFilterChange(t)};this.handleFilterSelect=t=>{this.handleTopbarFilterChange(t)};this.handleTopbarFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const a=e.findIndex((t=>t.filterName===i));if(a!==-1){e[a].filterValues=[s]}else{e.push({filterName:i,filterValues:[s],type:"text"})}}else if(t.type==="ifxFilterSelect"){const{filterName:i,filterValues:s,type:a}=t.detail;const l=e.findIndex((t=>t.filterName===i));if(l!==-1){e[l].filterValues=s;e[l].type=a}else{e.push({filterName:i,filterValues:s,type:a})}}this.selectedOptions=e;this.ifxTopbarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillUnload(){this.el.removeEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillLoad(){this.updateVisibleSlots()}updateVisibleSlots(){this.visibleSlots=this.showAllFilters?Number.MAX_SAFE_INTEGER:this.maxShownFilters}render(){const t=Math.max(0,this.visibleSlots);const e=this.el.querySelectorAll("ifx-set-filter").length;const a=Math.min(t,e,Number.MAX_SAFE_INTEGER);const l=Array.from({length:a},((t,e)=>i("div",{class:"filter-slot-wrapper"},i("slot",{name:`filter-component-${e+1}`}))));return i(s,{key:"7fb927baf0e0ea9622e6e16ab2fb6ef884f9cb99"},i("div",{key:"835ff1c82b6d16907ccd61bc00f057f0fd85f740",class:"search-container"},i("slot",{key:"1a2b2255e4fae0a65531549ca31106bef74273af",name:"filter-search"})," "),i("div",{key:"874d52c3f148be8a48201f39c257cc5ed6d021d4",class:"components-container"},l.length>0?l:i("slot",{name:"filter-component"}),this.showMoreFiltersButton&&!this.showAllFilters&&i("div",{key:"49ad307b63a7fa2047e957df374920b00e34464d",class:"more-filters-wrapper",onClick:this.handleMoreFiltersClick},i("ifx-button",{key:"fefdbd82b0a01f6ea9f2ea26b678786a9c0fd0d7",type:"button",disabled:false,variant:"tertiary",size:"m",target:"_blank",theme:"default","full-width":"false"},i("ifx-icon",{key:"f4e4fef3b2ca4952b12a99a1ab263d750383bab6",icon:"filter-16"}),"More filters"))))}get el(){return a(this)}};r.style=l;export{r as ifx_filter_bar};
+//# sourceMappingURL=p-94eaf9ae.entry.js.map

package/dist/infineon-design-system-stencil/{p-582f7515.entry.js → p-9779c3ab.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,d as s,a as r}from"./p-DS8meZSd.js";const a=":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";const c=class{constructor(i){t(this,i);this.ifxSidebarFilterChange=e(this,"ifxSidebarFilterChange",7);this.selectedOptions=[];this.handleResetEvent=()=>{const t=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const e=t.assignedElements({flatten:true});e.forEach((t=>{const e=t.querySelectorAll("ifx-list");e.forEach((t=>{t.resetTrigger=!t.resetTrigger}))}));const i=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const s=i.assignedElements({flatten:true});s.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}));this.selectedOptions=[];this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleUpdateSidebarFilter=t=>{const{filterName:e}=t.detail;const i=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const s=i?i.assignedElements({flatten:true}):[];s.forEach((t=>{const i=t.querySelectorAll("ifx-list");i.forEach((t=>{if(t.getAttribute("name")===e){t.resetTrigger=!t.resetTrigger}}))}));const r=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const a=r?r.assignedNodes({flatten:true}):[];a.forEach((t=>{if(t.nodeType===Node.ELEMENT_NODE){const e=t;const i=e.firstElementChild;if(i){i.setAttribute("value","");i.dispatchEvent(new CustomEvent("ifxInput",{bubbles:true,composed:true,detail:""}))}}}));const c=this.selectedOptions.map((t=>{if(t.filterGroupName===e){return Object.assign(Object.assign({},t),{selectedItems:[],value:""})}return t}));this.selectedOptions=c;this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleAccordionChange=t=>{this.handleFilterChange(t)};this.handleSearchChange=t=>{this.handleFilterChange(t)};this.handleFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const r=e.findIndex((t=>typeof t!=="string"&&t.filterGroupName===i));if(r!==-1){e[r].value=s}else{e.push({filterGroupName:i,value:s})}}else if(t.type==="ifxFilterAccordionChange"){const{filterGroupName:i,selectedItems:s}=t.detail;const r=e.findIndex((t=>t.filterGroupName===i));if(r!==-1){e[r]={filterGroupName:i,selectedItems:s}}else{e.push({filterGroupName:i,selectedItems:s})}}this.selectedOptions=e;this.ifxSidebarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent);window.addEventListener("ifxUpdateSidebarFilter",this.handleUpdateSidebarFilter)}componentWillUnload(){this.el.removeEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}render(){return i(s,{key:"1d0bf0c68fb42e0394e0aa9bb5e66660d3ef5cda"},i("div",{key:"215cd4cb99b4200d6a37c73267658f5dea619fff",class:"filter-type-group"},i("slot",{key:"e3a96b1a72ae653d2bcd51faf9c3a297bc541de3",name:"filter-search"}),i("slot",{key:"828ff0797c6f7ae7b3d6a2b6b0cdbde982b95cb1",name:"filter-accordion"})))}get el(){return r(this)}};c.style=a;export{c as ifx_filter_type_group};
-//# sourceMappingURL=p-582f7515.entry.js.map
+import{r as t,c as e,h as i,d as s,a as r}from"./p-DS8meZSd.js";const a=":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";const c=class{constructor(i){t(this,i);this.ifxSidebarFilterChange=e(this,"ifxSidebarFilterChange",7);this.selectedOptions=[];this.handleResetEvent=()=>{const t=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const e=t.assignedElements({flatten:true});e.forEach((t=>{const e=t.querySelectorAll("ifx-list");e.forEach((t=>{t.resetTrigger=!t.resetTrigger}))}));const i=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const s=i.assignedElements({flatten:true});s.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}));this.selectedOptions=[];this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleUpdateSidebarFilter=t=>{const{filterName:e}=t.detail;const i=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const s=i?i.assignedElements({flatten:true}):[];s.forEach((t=>{const i=t.querySelectorAll("ifx-list");i.forEach((t=>{if(t.getAttribute("name")===e){t.resetTrigger=!t.resetTrigger}}))}));const r=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const a=r?r.assignedNodes({flatten:true}):[];a.forEach((t=>{if(t.nodeType===Node.ELEMENT_NODE){const e=t;const i=e.firstElementChild;if(i){i.setAttribute("value","");i.dispatchEvent(new CustomEvent("ifxInput",{bubbles:true,composed:true,detail:""}))}}}));const c=this.selectedOptions.map((t=>{if(t.filterGroupName===e){return Object.assign(Object.assign({},t),{selectedItems:[],value:""})}return t}));this.selectedOptions=c;this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleAccordionChange=t=>{this.handleFilterChange(t)};this.handleSearchChange=t=>{this.handleFilterChange(t)};this.handleFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const r=e.findIndex((t=>typeof t!=="string"&&t.filterGroupName===i));if(r!==-1){e[r].value=s}else{e.push({filterGroupName:i,value:s})}}else if(t.type==="ifxFilterAccordionChange"){const{filterGroupName:i,selectedItems:s}=t.detail;const r=e.findIndex((t=>t.filterGroupName===i));if(r!==-1){e[r]={filterGroupName:i,selectedItems:s}}else{e.push({filterGroupName:i,selectedItems:s})}}this.selectedOptions=e;this.ifxSidebarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent);window.addEventListener("ifxUpdateSidebarFilter",this.handleUpdateSidebarFilter)}componentWillUnload(){this.el.removeEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}render(){return i(s,{key:"8e245856c37deb35a27e9f16ea68796fcfc8bda3"},i("div",{key:"d3061c5ac3980edd92eaae1fccf9acbfb2cd85dc",class:"filter-type-group"},i("slot",{key:"a0209af9fed2908f7d6449913820031a71526f80",name:"filter-search"}),i("slot",{key:"59a42cdc0ad9d5eed7a14a4d78379284d4241385",name:"filter-accordion"})))}get el(){return r(this)}};c.style=a;export{c as ifx_filter_type_group};
+//# sourceMappingURL=p-9779c3ab.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as t,h as e,a as i,c as r}from"./p-DS8meZSd.js";import{d as n,t as o}from"./p-DcmcuUOA.js";import{i as s}from"./p-Bw2fh5LT.js";import{c as a}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const p=":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#FFFFFF;border-left-color:#FFFFFF;border-right-color:#FFFFFF}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0A8276}.semiconductor.inverted svg{fill:#FFFFFF}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";const l=class{constructor(e){t(this,e);this.inverted=false}async componentDidLoad(){if(!s(this.el)){const t=n();o("ifx-spinner",await t)}}render(){return e("div",{key:"31b5c7c0cd9ed8aa434e37a8c9eb83a455c2a5f7","aria-label":"spinner indicating a loading process",class:this.getClassNames()},e("div",{key:"d2ddaa89a5fde1f908342997e251f7cba3df2929",class:`${this.variant!=="brand"?"border":""} ${this.inverted?"inverted":""}`}),this.variant==="brand"&&e("div",{key:"dc2faa0f770b39ddd8623ae5c6f9c0132a8cd82c",class:`semiconductor ${this.inverted?"inverted":""} ${this.getSizeClass()}`},e("svg",{key:"a0b89dd66eb983065fdec1f41019b54007d370f5",width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"d8313728a4ac374c97ef4956429c6c7276d23bdf",id:"spinner/conductor"},e("path",{key:"3422556938c6d9ba6038362d5cbf60cc5f96266c",id:"Vector",d:"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z"})))))}getSizeClass(){return`${this.size}`==="s"?"s":""}getClassNames(){return a("spinner",this.size&&`spinner ${this.getSizeClass()}`)}get el(){return i(this)}};l.style=p;const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}';const d=class{constructor(e){t(this,e);this.ifxInput=r(this,"ifxInput",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.placeholder="Placeholder";this.value="";this.error=false;this.label="";this.icon="";this.caption="";this.size="m";this.required=false;this.optional=false;this.success=false;this.disabled=false;this.showDeleteIcon=false;this.autocomplete="on";this.type="text";this.internalId="text-field"}valueWatcher(t){if(t!==this.inputElement.value){this.inputElement.value=t}}async reset(){this.value="";this.inputElement.value=""}handleDeleteContent(){this.reset();this.ifxInput.emit(this.value)}handleInput(){const t=this.inputElement.value;this.value=t;this.internals.setFormValue(t);this.ifxInput.emit(this.value)}handleTypeProp(){this.internalType=this.type==="text"||this.type==="password"?this.type:"text"}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){this.handleTypeProp()}async componentDidLoad(){if(!s(this.el)){const t=n();o("ifx-text-field",await t)}}render(){return e("div",{key:"7ea646628085cf4007533a9ec6825ad2259cb509","aria-label":"a text field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`textInput__container ${this.disabled?"disabled":""}`},e("div",{key:"f97974d86716cc16b219b4b9ba904a7d25f55000",class:"textInput__top-wrapper"},e("label",{key:"eb0c422f0d16387f377d794c667f36a3f42ee6e9",htmlFor:this.internalId},e("slot",{key:"b3319e688dc9976eed5f5b72baa5e57e97952381"}),this.optional&&this.required?e("span",{class:"optional-required"},"(optional) *"):this.optional?e("span",{class:"optional"},"(optional)"):this.required?e("span",{class:`required ${this.error?"error":""}`},"*"):null)),e("div",{key:"0f2e2494a174e8f24cebf99c3b8fdf13bcd1a8bf",class:"textInput__bottom-wrapper"},e("div",{key:"ea748222b6c51c62822c8850acdb3423c132d16e",class:"input-container"},this.icon&&e("ifx-icon",{key:"98b62a88b7306dc56ff9619554ce21f5d8f54bdf",class:"input-icon",icon:this.icon}),e("input",{key:"51ee89ffcb7debcd3287e1aeb55fcaacceaeae2c",ref:t=>this.inputElement=t,disabled:this.disabled,autocomplete:this.autocomplete,type:this.internalType,id:this.internalId,value:this.value,onInput:()=>this.handleInput(),placeholder:this.placeholder,maxlength:this.maxlength,class:`${this.icon?"icon":""}\n                ${this.error?"error":""} \n              ${this.size==="s"?"input-s":""}\n              ${this.success?"success":""}`}),this.showDeleteIcon&&this.value&&e("ifx-icon",{key:"548a96a6ff8d8825290f5b6034f9a6daff3e4f83",class:"delete-icon",icon:"cRemove16",onClick:()=>this.handleDeleteContent()})),this.caption&&!this.error&&e("div",{key:"412b58db8de04214ec3d59bd2ff35eb77949ffff",class:`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""`},this.caption),this.error&&e("div",{key:"8811eece7b1c34dc8197056a879b5b425aa59c53",class:"textInput__bottom-wrapper-caption error"},this.caption)))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{value:["valueWatcher"]}}};d.style=c;export{l as ifx_spinner,d as ifx_text_field};
+//# sourceMappingURL=p-9bd0a9d4.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["spinnerCss","Spinner","constructor","hostRef","this","inverted","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","key","class","getClassNames","variant","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames","textFieldCss","TextField","placeholder","value","error","label","icon","caption","required","optional","success","disabled","showDeleteIcon","autocomplete","type","internalId","valueWatcher","newValue","inputElement","reset","handleDeleteContent","ifxInput","emit","handleInput","query","internals","setFormValue","handleTypeProp","internalType","formResetCallback","setValidity","componentWillLoad","htmlFor","ref","onInput","maxlength","onClick"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\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';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() el;\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-spinner', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid #CD002F;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid #4CA460;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: #8D8786;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      letter-spacing: 0.2px;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: #CD002F;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, 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-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    this.handleTypeProp()\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-text-field', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"oMAAA,MAAMA,EAAa,ovB,MCWNC,EAAO,MALpB,WAAAC,CAAAC,G,UASUC,KAAQC,SAAY,KAqC7B,CAnCC,sBAAMC,GACJ,IAAIC,EAAuBH,KAAKI,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,oBAAqBF,E,EAIxC,MAAAG,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,uCAAuCC,MAAOX,KAAKY,iBACjEH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,GAAGX,KAAKa,UAAY,QAAU,SAAW,MAAMb,KAAKC,SAAW,WAAa,OACvFD,KAAKa,UAAY,SACbJ,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBX,KAAKC,SAAW,WAAa,MAAMD,KAAKc,kBACtEL,EAAA,OAAAC,IAAA,2CAAKK,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChEV,EAAG,KAAAC,IAAA,2CAAAU,GAAG,qBACJX,EAAA,QAAAC,IAAA,2CAAMU,GAAG,SAASC,EAAE,4vC,CAQlC,YAAAP,GACE,MAAO,GAAGd,KAAKsB,SAAW,IACtB,IACA,E,CAGN,aAAAV,GACE,OAAOW,EACL,UACAvB,KAAKsB,MAAQ,WAAWtB,KAAKc,iB,qCCjDnC,MAAMU,EAAe,2qH,MCYRC,EAAS,MAPtB,WAAA3B,CAAAC,G,6MAUUC,KAAW0B,YAAW,cACL1B,KAAK2B,MAAW,GACjC3B,KAAK4B,MAAY,MACjB5B,KAAK6B,MAAW,GAChB7B,KAAI8B,KAAW,GACf9B,KAAO+B,QAAW,GAClB/B,KAAIsB,KAAW,IACftB,KAAQgC,SAAY,MACpBhC,KAAQiC,SAAY,MACpBjC,KAAOkC,QAAY,MACnBlC,KAAQmC,SAAY,MAEpBnC,KAAcoC,eAAY,MAC1BpC,KAAYqC,aAAW,KACvBrC,KAAIsC,KAAwB,OAC5BtC,KAAUuC,WAAW,YA2G9B,CAjGC,YAAAC,CAAaC,GACX,GAAIA,IAAazC,KAAK0C,aAAaf,MAAO,CACxC3B,KAAK0C,aAAaf,MAAQc,C,EAK9B,WAAME,GACJ3C,KAAK2B,MAAQ,GACb3B,KAAK0C,aAAaf,MAAQ,E,CAG5B,mBAAAiB,GACE5C,KAAK2C,QACL3C,KAAK6C,SAASC,KAAK9C,KAAK2B,M,CAG1B,WAAAoB,GACE,MAAMC,EAAQhD,KAAK0C,aAAaf,MAChC3B,KAAK2B,MAAQqB,EACbhD,KAAKiD,UAAUC,aAAaF,GAC5BhD,KAAK6C,SAASC,KAAK9C,KAAK2B,M,CAG1B,cAAAwB,GACCnD,KAAKoD,aAAepD,KAAKsC,OAAS,QAAUtC,KAAKsC,OAAS,WAAatC,KAAKsC,KAAO,M,CAGpF,iBAAAe,GACErD,KAAKiD,UAAUK,YAAY,IAC3BtD,KAAKiD,UAAUC,aAAa,G,CAG9B,iBAAAK,GACEvD,KAAKmD,gB,CAGP,sBAAMjD,GACJ,IAAIC,EAAuBH,KAAKI,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,uBAAwBF,E,EAI3C,MAAAG,GACE,OACEC,EAAgB,OAAAC,IAAA,sFAA0C,aAAAV,KAAK2B,MAAsB,gBAAA3B,KAAKmC,SAAUxB,MAAO,wBAAwBX,KAAKmC,SAAW,WAAa,MAC9J1B,EAAK,OAAAC,IAAA,2CAAAC,MAAM,0BACTF,EAAA,SAAAC,IAAA,2CAAO8C,QAASxD,KAAKuC,YACnB9B,EAAa,QAAAC,IAAA,6CACZV,KAAKiC,UAAYjC,KAAKgC,SACrBvB,EAAM,QAAAE,MAAM,qBAAmB,gBAC7BX,KAAKiC,SACPxB,EAAA,QAAME,MAAM,YAA4B,cACtCX,KAAKgC,SACPvB,EAAM,QAAAE,MAAO,YAAYX,KAAK4B,MAAQ,QAAU,MAAc,KAC5D,OAIRnB,EAAK,OAAAC,IAAA,2CAAAC,MAAM,6BACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACRX,KAAK8B,MACJrB,EAAA,YAAAC,IAAA,2CAAUC,MAAM,aAAamB,KAAM9B,KAAK8B,OAE1CrB,EAAA,SAAAC,IAAA,2CACE+C,IAAMrD,GAAQJ,KAAK0C,aAAetC,EAClC+B,SAAUnC,KAAKmC,SACfE,aAAcrC,KAAKqC,aACnBC,KAAMtC,KAAKoD,aACXhC,GAAIpB,KAAKuC,WACTZ,MAAO3B,KAAK2B,MACZ+B,QAAS,IAAM1D,KAAK+C,cACpBrB,YAAa1B,KAAK0B,YAClBiC,UAAW3D,KAAK2D,UAChBhD,MACE,GAAGX,KAAK8B,KAAO,OAAS,uBACtB9B,KAAK4B,MAAQ,QAAU,sBACzB5B,KAAKsB,OAAS,IAAM,UAAY,qBAChCtB,KAAKkC,QAAU,UAAY,OAE1BlC,KAAKoC,gBAAkBpC,KAAK2B,OAC7BlB,EAAU,YAAAC,IAAA,2CAAAC,MAAM,cAAcmB,KAAK,YAAY8B,QAAS,IAAM5D,KAAK4C,yBAGxE5C,KAAK+B,UAAY/B,KAAK4B,OACrBnB,EAAK,OAAAC,IAAA,2CAAAC,MAAO,qCAAqCX,KAAKmC,4BACnDnC,KAAK+B,SAET/B,KAAK4B,OACJnB,EAAK,OAAAC,IAAA,2CAAAC,MAAM,2CACRX,KAAK+B,U","ignoreList":[]}