@infineon/infineon-design-system-stencil 39.5.3--canary.2139.e4938f63762e51c5b6c1bdf4c1421264956fa3fc.0 → 39.5.3--canary.2139.d0b33fbe33894b18307e791c76e8f04ff38af687.0

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

@@ -0,0 +1,2 @@
+import{r as e,h as t}from"./p-PqnYwNKt.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem "Source Sans 3"}.step-wrapper .step-label:focus{outline:2px solid #0A8276;outline-offset:2px}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem "Source Sans 3"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}';const p=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("div",{key:"9a603ade945d1020bcba53fa85777a27f08f7df1","aria-current":this.active?"step":false,"aria-disabled":this.active||this.complete?false:true,onClick:e=>this.stopOnClickPropogation(e),class:`step-wrapper ${this.stepId===1?"first-step":""} \n                        ${this.error?"error":""}\n                        ${this.stepperState.variant}\n                        ${this.complete?"complete":""}\n                        ${this.lastStep?"last-step":""}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active?"active":""}\n                        ${this.clickable?"clickable":""}\n                        ${this.disabled?"disabled":""}`},t("div",{key:"ec1bdd77edfd87f066df44db5f3f0e115b3f7a67",class:"step-icon-wrapper"},this.stepperState.variant!=="compact"&&t("span",{key:"46ae721e9ba89b6f561540d6228b4928d74522a0",class:"step-connector-l"}),this.stepperState.variant!=="compact"&&(!this.error||this.error&&this.active)&&t("div",{key:"e168325daeff9ca6b2ff4e045bce5ec974e9c5d5",class:"step-icon"},this.stepperState.showStepNumber&&!this.complete&&!this.active?this.stepId:"",this.complete&&!this.active&&t("ifx-icon",{key:"4eb3de9575a8704f0ed7e1ade9ccae31ea59c572",icon:"check16"}),this.active&&t("span",{key:"c0c554eaae6a28783a4597633e4c60dbe14c0fda",class:"active-indic"})),this.stepperState.variant!=="compact"&&this.error&&!this.active&&t("ifx-icon",{key:"1b27252ddf3369c3732e7b40786645ec2720d8bb",icon:"warningF16"}),this.stepperState.variant!=="compact"&&t("span",{key:"38bf07c39837ed4f77de59c44a2a32fbdb069439",class:`step-connector-r ${this.active?"active":""}`})),(this.stepperState.variant!=="compact"||this.stepperState.variant==="compact"&&(this.active||this.stepId===this.stepperState.activeStep+1))&&t("div",{key:"f13581114efa81deaeecd38ffe27b14d1d3dcc87",tabIndex:!this.disabled&&this.complete&&!this.active?0:-1,class:`step-label ${this.stepperState.variant==="compact"?this.active?"curr-label":"next-label":""}`,onClick:()=>{this.handleStepClick()},onKeyDown:e=>{this.handleStepKeyDown(e)}},this.stepperState.variant!=="compact"&&t("slot",{key:"6accb517e6d561549759a3a723c4c24b1729e80a"}),this.stepperState.variant==="compact"&&!this.active?"Next: ":"",this.stepperState.variant==="compact"&&t("slot",{key:"c6960ab0dd25316c6407433ecad376b66b47d28c"})))}static get watchers(){return{stepperState:["updateCurrentStep"],active:["updateErrorState"]}}};p.style=r;export{p as ifx_step};
+//# sourceMappingURL=p-a4dd2fe1.entry.js.map

package/dist/infineon-design-system-stencil/{p-453bd9bd.entry.js.map → p-a4dd2fe1.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stepCss","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n            color: tokens.$ifxColorEngineering500;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering300; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500; \n        outline-offset: 2px;\n    }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering300;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering300;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering300;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering300;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering300;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n        \n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering300;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,wnI,MCcHC,EAAI,MANjB,WAAAC,CAAAC,G,UAOYC,KAAQC,SAAa,MACrBD,KAAQE,SAAa,MACJF,KAAKG,MAAa,MACjBH,KAAQI,SAAY,MACtCJ,KAAMK,OAAW,EACCL,KAAAM,aAA6B,CAAEC,WAAY,EACZC,eAAgB,MAChBC,QAAS,UACTC,kBAAmB,QAGnEV,KAASW,UAAY,KA6FjC,CA1FG,YAAAC,CAAaC,GACT,MAAMC,EAAqBD,EAAME,OAAOD,mBACxC,GAAIA,IAAuBd,KAAKK,QAAUL,KAAKG,MAAO,CAClDH,KAAKW,UAAY,I,EAKzB,iBAAAK,CAAkBC,GACdjB,KAAKkB,OAAUD,EAAgBV,aAAeP,KAAKK,M,CAIvD,gBAAAc,GACI,GAAInB,KAAKkB,OAAQ,CACblB,KAAKG,MAAQ,K,EAKrB,eAAAiB,GACI,IAAKpB,KAAKE,UAAYF,KAAKM,aAAaG,UAAY,YAAcT,KAAKW,WAAaX,KAAKC,UAAW,CAChGD,KAAKM,aAAae,cAAcrB,KAAKK,OAAQ,K,EAIrD,iBAAAiB,CAAkBT,GACd,IAAKb,KAAKE,UAAYF,KAAKM,aAAaG,UAAY,YAAcT,KAAKW,WAAaX,KAAKC,WAAaY,EAAMU,MAAQ,QAAS,CACzHvB,KAAKM,aAAae,cAAcrB,KAAKK,OAAQ,K,EAIrD,sBAAAmB,CAAuBX,GACnB,GAAIb,KAAKE,SAAU,CACfW,EAAMY,iB,EAId,MAAAC,GACI,OACIC,EAAqB,OAAAJ,IAAA,0DAAAvB,KAAKkB,OAAS,OAAQ,MACtB,gBAAAlB,KAAKkB,QAAUlB,KAAKC,SAAW,MAAQ,KACxD2B,QAAWC,GAAM7B,KAAKwB,uBAAuBK,GAC7CC,MAAS,gBAAgB9B,KAAKK,SAAW,EAAI,aAAc,gCACjDL,KAAKG,MAAQ,QAAS,+BACtBH,KAAKM,aAAaG,oCAClBT,KAAKC,SAAW,WAAY,+BAC5BD,KAAKI,SAAW,YAAa,yCACnBJ,KAAKM,aAAaI,8CAC5BV,KAAKkB,OAAS,SAAW,+BACzBlB,KAAKW,UAAY,YAAc,+BAC/BX,KAAKE,SAAW,WAAY,MAEtCyB,EAAK,OAAAJ,IAAA,2CAAAO,MAAQ,qBAER9B,KAAKM,aAAaG,UAAY,WAAakB,EAAM,QAAAJ,IAAA,2CAAAO,MAAQ,qBAGrD9B,KAAKM,aAAaG,UAAY,aAAeT,KAAKG,OAAUH,KAAKG,OAASH,KAAKkB,SAChFS,EAAK,OAAAJ,IAAA,2CAAAO,MAAQ,aACP9B,KAAKM,aAAaE,iBAAmBR,KAAKC,WAAaD,KAAKkB,OAAUlB,KAAKK,OAAS,GACpFL,KAAKC,WAAaD,KAAKkB,QAAWS,EAAA,YAAAJ,IAAA,2CAAUQ,KAAK,YAClD/B,KAAKkB,QAAUS,EAAA,QAAAJ,IAAA,2CAAMO,MAAQ,kBAIpC9B,KAAKM,aAAaG,UAAW,WAAaT,KAAKG,QAAUH,KAAKkB,QAAWS,EAAU,YAAAJ,IAAA,2CAAAQ,KAAK,eAGzF/B,KAAKM,aAAaG,UAAY,WAAakB,EAAA,QAAAJ,IAAA,2CAAMO,MAAS,oBAAoB9B,KAAKkB,OAAS,SAAW,SAKvGlB,KAAKM,aAAaG,UAAY,WAAcT,KAAKM,aAAaG,UAAY,YAAcT,KAAKkB,QAAUlB,KAAKK,SAAWL,KAAKM,aAAaC,WAAW,KACrJoB,EAAA,OAAAJ,IAAA,2CAAKS,UAAWhC,KAAKE,UAAYF,KAAKC,WAAaD,KAAKkB,OAAS,GAAI,EACjEY,MAAS,cAAc9B,KAAKM,aAAaG,UAAY,UAAaT,KAAKkB,OAAS,aAAe,aAAgB,KAC/GU,QAAS,KAAQ5B,KAAKoB,iBAAiB,EACvCa,UAAYJ,IAAQ7B,KAAKsB,kBAAkBO,EAAE,GAE3C7B,KAAKM,aAAaG,UAAY,WAAckB,EAAO,QAAAJ,IAAA,6CAEpDvB,KAAKM,aAAaG,UAAY,YAAeT,KAAKkB,OAAU,SAAW,GACvElB,KAAKM,aAAaG,UAAY,WAAakB,EAAO,QAAAJ,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["stepCss","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n            color: tokens.$ifxColorEngineering500;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering300; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500; \n        outline-offset: 2px;\n    }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering300;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering300;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering300;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering300;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering300;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n        \n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering300;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-bbd819a8.entry.js → p-acd0cede.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,d as e,a as n}from"./p-DtIEDtZ8.js";import{g as o}from"./p-e2ZcgK7p.js";import{d as r,t as c}from"./p-DcmcuUOA.js";import{i as h}from"./p-Bw2fh5LT.js";const a="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const l=class{constructor(i){t(this,i);this.consoleError=s(this,"consoleError",7);this.icon=""}updateIcon(t){this.internalIcon=t;this.setIcon()}convertStringToHtml(t){const s=document.createElement("div");s.innerHTML=t;return s.firstChild}convertHtmlToObject(t){let s=Array.from(t.attributes,(({name:t,value:s})=>({name:t,value:s}))).reduce(((t,s)=>{t[s.name]=s.value;return t}),{});return s}convertPathsToVnode(t){let s=[];const e=this.convertHtmlToObject(t);const n=i("path",e);s.push(n);if(t.firstChild){const e=t.querySelectorAll("path");const n=t.querySelectorAll("path").length;for(let t=0;t<n;t++){let n=this.convertHtmlToObject(e[t]);let o=i("path",n);s.push(o)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const e=s.getAttribute("width");const n=s.getAttribute("height");const o=s.getAttribute("fill");const r=s.getAttribute("viewBox");return i("svg",{class:"inline-svg",width:e,height:n,xmlns:"http://www.w3.org/2000/svg",fill:o,viewBox:r},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const i=this.getSVG(s);return i}else if(this.icon!==""){this.consoleError.emit(true);return}else{return}}setIcon(){const t=t=>t.replace(/[-_]+(.)/g,((t,s)=>s.toUpperCase())).replace(/^(.)/,(t=>t.toLowerCase()));const s=t(this.internalIcon);this.ifxIcon=o(s)}isInsideAgGrid(t){var s;let i=t;while(i){if((s=i.className)===null||s===void 0?void 0:s.toLowerCase().startsWith("ag-")){return true}i=i.parentElement}return false}isInsideChoices(t){var s;let i=t;while(i){if((s=i.className)===null||s===void 0?void 0:s.toLowerCase().startsWith("choices__")){return true}i=i.parentElement}return false}componentWillLoad(){this.internalIcon=this.icon;this.setIcon()}async componentDidLoad(){if(!h(this.el)){if(!this.isInsideAgGrid(this.el)&&!this.isInsideChoices(this.el)){const t=r();c("ifx-icon",await t)}}}render(){return i(e,{key:"e5cab8793c55383813b83e97038545526070d0a7"},this.constructIcon())}get el(){return n(this)}static get watchers(){return{icon:["updateIcon"]}}};l.style=a;export{l as ifx_icon};
-//# sourceMappingURL=p-bbd819a8.entry.js.map
+import{r as t,c as s,h as i,d as e,a as n}from"./p-PqnYwNKt.js";import{g as o}from"./p-e2ZcgK7p.js";import{d as r,t as c}from"./p-DcmcuUOA.js";import{i as h}from"./p-Bw2fh5LT.js";const a="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const l=class{constructor(i){t(this,i);this.consoleError=s(this,"consoleError",7);this.icon=""}updateIcon(t){this.internalIcon=t;this.setIcon()}convertStringToHtml(t){const s=document.createElement("div");s.innerHTML=t;return s.firstChild}convertHtmlToObject(t){let s=Array.from(t.attributes,(({name:t,value:s})=>({name:t,value:s}))).reduce(((t,s)=>{t[s.name]=s.value;return t}),{});return s}convertPathsToVnode(t){let s=[];const e=this.convertHtmlToObject(t);const n=i("path",e);s.push(n);if(t.firstChild){const e=t.querySelectorAll("path");const n=t.querySelectorAll("path").length;for(let t=0;t<n;t++){let n=this.convertHtmlToObject(e[t]);let o=i("path",n);s.push(o)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const e=s.getAttribute("width");const n=s.getAttribute("height");const o=s.getAttribute("fill");const r=s.getAttribute("viewBox");return i("svg",{class:"inline-svg",width:e,height:n,xmlns:"http://www.w3.org/2000/svg",fill:o,viewBox:r},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const i=this.getSVG(s);return i}else if(this.icon!==""){this.consoleError.emit(true);return}else{return}}setIcon(){const t=t=>t.replace(/[-_]+(.)/g,((t,s)=>s.toUpperCase())).replace(/^(.)/,(t=>t.toLowerCase()));const s=t(this.internalIcon);this.ifxIcon=o(s)}isInsideAgGrid(t){var s;let i=t;while(i){if((s=i.className)===null||s===void 0?void 0:s.toLowerCase().startsWith("ag-")){return true}i=i.parentElement}return false}isInsideChoices(t){var s;let i=t;while(i){if((s=i.className)===null||s===void 0?void 0:s.toLowerCase().startsWith("choices__")){return true}i=i.parentElement}return false}componentWillLoad(){this.internalIcon=this.icon;this.setIcon()}async componentDidLoad(){if(!h(this.el)){if(!this.isInsideAgGrid(this.el)&&!this.isInsideChoices(this.el)){const t=r();c("ifx-icon",await t)}}}render(){return i(e,{key:"e5cab8793c55383813b83e97038545526070d0a7"},this.constructIcon())}get el(){return n(this)}static get watchers(){return{icon:["updateIcon"]}}};l.style=a;export{l as ifx_icon};
+//# sourceMappingURL=p-acd0cede.entry.js.map

package/dist/infineon-design-system-stencil/{p-b969b2c0.entry.js → p-b7672947.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as e,h as t,a as o}from"./p-DtIEDtZ8.js";const s=":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 4px;font-family:var(--ifx-font-family)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";const d=class{constructor(t){i(this,t);this.menuSize=e(this,"menuSize",7);this.ifxDropdownMenuItem=e(this,"ifxDropdownMenuItem",7);this.isOpen=false;this.size="l";this.hideTopPadding=false;this.filteredItems=[]}handleMenuFilter(i){const e=i.detail;this.filterDropdownItems(e)}handleDropdownItemValueEmission(i){this.ifxDropdownMenuItem.emit(i.detail)}filterDropdownItems(i){const e=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));let t,o;let s=i.toUpperCase();for(let i=0;i<e.length;i++){t=e[i];o=t.textContent||t.innerText;if(o.toUpperCase().indexOf(s)>-1){t.setAttribute("hide",false)}else{t.setAttribute("hide",true)}}}componentWillUpdate(){this.menuSize.emit(this.size)}componentWillLoad(){this.filteredItems=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));const i=this.el.querySelector("ifx-search-field");const e=this.el.querySelector("ifx-dropdown-header");if(i||e){this.hideTopPadding=true}else this.hideTopPadding=false}render(){return t("div",{key:"e4d2067883d6a787f4b8d718af8ff98b3815ee04",class:`dropdown-menu \n      ${this.isOpen?"show":""} \n      ${this.hideTopPadding?"hideTopPadding":""}\n      ${this.size==="s"?"small":""}`},t("slot",{key:"290c409805d04ea7f96f5c7516d150222867da6b"}))}get el(){return o(this)}};d.style=s;export{d as ifx_dropdown_menu};
-//# sourceMappingURL=p-b969b2c0.entry.js.map
+import{r as i,c as e,h as t,a as o}from"./p-PqnYwNKt.js";const s=":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 4px;font-family:var(--ifx-font-family)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";const d=class{constructor(t){i(this,t);this.menuSize=e(this,"menuSize",7);this.ifxDropdownMenuItem=e(this,"ifxDropdownMenuItem",7);this.isOpen=false;this.size="l";this.hideTopPadding=false;this.filteredItems=[]}handleMenuFilter(i){const e=i.detail;this.filterDropdownItems(e)}handleDropdownItemValueEmission(i){this.ifxDropdownMenuItem.emit(i.detail)}filterDropdownItems(i){const e=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));let t,o;let s=i.toUpperCase();for(let i=0;i<e.length;i++){t=e[i];o=t.textContent||t.innerText;if(o.toUpperCase().indexOf(s)>-1){t.setAttribute("hide",false)}else{t.setAttribute("hide",true)}}}componentWillUpdate(){this.menuSize.emit(this.size)}componentWillLoad(){this.filteredItems=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));const i=this.el.querySelector("ifx-search-field");const e=this.el.querySelector("ifx-dropdown-header");if(i||e){this.hideTopPadding=true}else this.hideTopPadding=false}render(){return t("div",{key:"e4d2067883d6a787f4b8d718af8ff98b3815ee04",class:`dropdown-menu \n      ${this.isOpen?"show":""} \n      ${this.hideTopPadding?"hideTopPadding":""}\n      ${this.size==="s"?"small":""}`},t("slot",{key:"290c409805d04ea7f96f5c7516d150222867da6b"}))}get el(){return o(this)}};d.style=s;export{d as ifx_dropdown_menu};
+//# sourceMappingURL=p-b7672947.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,d as i,a as n}from"./p-PqnYwNKt.js";import{d as a,t as s}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";function c(e,t,o,i=20,n=0){const a=[];if(n>=i){return a}const s=e=>{const a=e.assignedNodes().filter((e=>e.nodeType===1));if(a.length>0){const e=a[0].parentElement;return c(e,t,o,i,n+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){a.push(e)}if(e.shadowRoot!=null){a.push(...c(e.shadowRoot,t,o,i,n+1))}else if(e.tagName==="SLOT"){a.push(...s(e))}else{a.push(...c(e,t,o,i,n+1))}}return a}function d(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function l(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function h(e){if(e.getAttribute("tabindex")==="-1"||d(e)||l(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function f(e,t,o){const i=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));i.addEventListener("finish",(()=>{i.commitStyles();i.cancel()}));return i}const b={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const m={fadeIn:[Object.assign(Object.assign({offset:0},b),{opacity:0}),Object.assign(Object.assign({offset:1},b),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},b),{opacity:1}),Object.assign(Object.assign({offset:1},b),{opacity:0})]};const u=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}.modal-content-container.no-overflow{overflow:hidden}.modal-content-container.no-overflow .modal-body{overflow-y:auto}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const p=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleResize=()=>{clearTimeout(this.resizeTimeout);this.resizeTimeout=setTimeout((()=>{if(this.showModal){this.handleComponentOverflow()}}),100)};this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}async componentDidLoad(){if(!r(this.hostElement)){const e=a();s("ifx-modal",await e)}this.focusableElements=c(this.hostElement.shadowRoot,(e=>d(e)||e.matches("[data-focus-trap-edge]")),h);window.addEventListener("resize",this.handleResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleResize)}componentWillRender(){if(this.showModal){this.handleComponentOverflow()}}async handleComponentOverflow(){const e=this.hostElement.shadowRoot.querySelector(".modal-content-container");if(this.showModal&&await this.isModalContentContainerHeightReachedViewport()){e.classList.add("no-overflow")}else if(e===null||e===void 0?void 0:e.classList.contains("no-overflow")){e===null||e===void 0?void 0:e.classList.remove("no-overflow")}}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=f(this.modalContainer,m.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=f(this.modalContainer,m.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleContentUpdate(e){const t=e.target;const o=t.assignedNodes();if(o.length>0){o.forEach((e=>{if(e.observer){e.observer.disconnect();delete e.observer}const t=new MutationObserver(((e,t)=>{for(let t of e){if(t.type==="childList"){if(this.showModal){this.handleComponentOverflow()}}}}));t.observe(e,{attributes:true,childList:true,subtree:true});e.observer=t}))}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}isModalContentContainerHeightReachedViewport(){return new Promise((e=>{setTimeout((()=>{const t=this.hostElement.shadowRoot.querySelector(".modal-content");const o=t.offsetHeight;const i=window.innerHeight;const n=3;e(o+n>=i*.9)}),100)}))}render(){const e=this.variant!=="default";return o(i,{key:"8927c0356e8b8987acf9310b559c1568c6de4f37"},o("div",{key:"df0f8b0be2953a4974ca739120c7b7495c52fc1f",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"8e6d35ddf390200573b38c6b2057bdf382838428",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"324587e244e5519f7e0d755cbf1b43b1ca998ce7","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"11cb80157d6ae5e0c57b786c0a295722b6c94d85",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.captionAriaLabel},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"ec6865df02bd71ac1b8513e147bf48bab522479b",class:"modal-content"},o("div",{key:"c9591304fc6ee447a60d16eea4c5017903397691",class:"modal-header"},o("h2",{key:"de9241b726711243ca5101ce3e49250f743c994b",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"561e1f6783efc4f54f422856cc4cb36c89503529",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-16",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"12788241b957ea98433872238c15a8d2ad9c13f6",class:"modal-body"},o("slot",{key:"1dab9a551e1dbe7e90334869282ef0c6597104a7",name:"content",onSlotchange:e=>this.handleContentUpdate(e)})),o("div",{key:"215c3be2970c6191a97a878d8fb97d5c8a2a40e6",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"221bf1f5442baa42a6e098505baa32b5aa343ba0",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"516f850b612376cde60c4cff6f7e04927bda5e7e","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return n(this)}static get watchers(){return{opened:["openedChanged"]}}};p.style=u;export{p as ifx_modal};
+//# sourceMappingURL=p-bd8c6834.entry.js.map

package/dist/infineon-design-system-stencil/{p-550283fa.entry.js.map → p-bd8c6834.entry.js.map}

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

package/dist/infineon-design-system-stencil/{p-27808b00.entry.js → p-beaba918.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s}from"./p-DtIEDtZ8.js";const o=".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";const e=class{constructor(s){t(this,s);this.imgPosition=i(this,"imgPosition",7)}handlePosition(t){this.imgPosition.emit(t)}componentWillLoad(){this.handlePosition(this.position)}componentDidUpdate(){this.handlePosition(this.position)}render(){return s("img",{key:"74204d35691d617c897b876c6efee1b9a6722f64",src:this.src,alt:this.alt,class:"card-image"})}};e.style=o;export{e as ifx_card_image};
-//# sourceMappingURL=p-27808b00.entry.js.map
+import{r as t,c as i,h as s}from"./p-PqnYwNKt.js";const o=".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";const e=class{constructor(s){t(this,s);this.imgPosition=i(this,"imgPosition",7)}handlePosition(t){this.imgPosition.emit(t)}componentWillLoad(){this.handlePosition(this.position)}componentDidUpdate(){this.handlePosition(this.position)}render(){return s("img",{key:"74204d35691d617c897b876c6efee1b9a6722f64",src:this.src,alt:this.alt,class:"card-image"})}};e.style=o;export{e as ifx_card_image};
+//# sourceMappingURL=p-beaba918.entry.js.map

package/dist/infineon-design-system-stencil/{p-b5efb1d6.entry.js → p-c578a728.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,a}from"./p-DtIEDtZ8.js";const r=".sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#EEEDED}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-size:1rem;line-height:1.5rem;font-weight:600}";const s=class{constructor(i){e(this,i);this.ifxFilterSearchChange=t(this,"ifxFilterSearchChange",7);this.disabled=false;this.showDeleteIcon=false;this.filterOrientation="sidebar"}valueChanged(e){this.host.setAttribute("value",e.toString())}handleFilterSearchChange(e){const t=this.host.parentElement.querySelector(`ifx-filter-search[filter-name="${this.filterName}"]`);if(t&&t!==this.host){throw new Error(`A search filter with the name '${this.filterName}' already exists.`)}this.filterValue=e.detail;this.showDeleteIcon=this.filterValue!=="";this.ifxFilterSearchChange.emit({filterName:this.filterName,filterValue:this.filterValue,filterKey:this.filterKey})}render(){return i("div",{key:"19979b3514737df346d309c9080cd42d010aee50",class:`${this.filterOrientation==="sidebar"?"sidebar-filter-search-wrapper":"topbar-filter-search-wrapper"}`},i("div",{key:"6f266b247fb3cc57030f9afe9c59ea7afbf05b6b",class:"filter-name"},this.filterName),i("ifx-search-field",{key:"b252531ff2f2754dea952637ce01f9c2f095f92f",placeholder:this.placeholder,"show-delete-icon":this.showDeleteIcon,disabled:this.disabled,value:this.filterValue}))}get host(){return a(this)}static get watchers(){return{value:["valueChanged"]}}};s.style=r;export{s as ifx_filter_search};
-//# sourceMappingURL=p-b5efb1d6.entry.js.map
+import{r as e,c as t,h as i,a}from"./p-PqnYwNKt.js";const r=".sidebar-filter-search-wrapper{display:flex;padding:12px 16px 16px 16px;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family);background:#EEEDED}.topbar-filter-search-wrapper{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;gap:4px;font-family:var(--ifx-font-family)}.topbar-filter-search-wrapper ifx-search-field{width:100%;}.filter-name{font-size:1rem;line-height:1.5rem;font-weight:600}";const s=class{constructor(i){e(this,i);this.ifxFilterSearchChange=t(this,"ifxFilterSearchChange",7);this.disabled=false;this.showDeleteIcon=false;this.filterOrientation="sidebar"}valueChanged(e){this.host.setAttribute("value",e.toString())}handleFilterSearchChange(e){const t=this.host.parentElement.querySelector(`ifx-filter-search[filter-name="${this.filterName}"]`);if(t&&t!==this.host){throw new Error(`A search filter with the name '${this.filterName}' already exists.`)}this.filterValue=e.detail;this.showDeleteIcon=this.filterValue!=="";this.ifxFilterSearchChange.emit({filterName:this.filterName,filterValue:this.filterValue,filterKey:this.filterKey})}render(){return i("div",{key:"19979b3514737df346d309c9080cd42d010aee50",class:`${this.filterOrientation==="sidebar"?"sidebar-filter-search-wrapper":"topbar-filter-search-wrapper"}`},i("div",{key:"6f266b247fb3cc57030f9afe9c59ea7afbf05b6b",class:"filter-name"},this.filterName),i("ifx-search-field",{key:"b252531ff2f2754dea952637ce01f9c2f095f92f",placeholder:this.placeholder,"show-delete-icon":this.showDeleteIcon,disabled:this.disabled,value:this.filterValue}))}get host(){return a(this)}static get watchers(){return{value:["valueChanged"]}}};s.style=r;export{s as ifx_filter_search};
+//# sourceMappingURL=p-c578a728.entry.js.map

package/dist/infineon-design-system-stencil/{p-2151de2a.entry.js → p-c6826c1e.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as s,a as h}from"./p-DtIEDtZ8.js";import{d as e,t as o}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";import{c as n}from"./p-BfP9ezJQ.js";const r=":host{display:inline-block}";const c=class{constructor(s){i(this,s);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.ifxDropdown=t(this,"ifxDropdown",7);this.placement="bottom-start";this.defaultOpen=false;this.internalIsOpen=false;this.noAppendToBody=false;this.noCloseOnOutsideClick=false;this.noCloseOnMenuClick=false;this.handleTriggerClick=()=>{if(!this.internalIsOpen)this.openDropdown();else this.closeDropdown()};this.handleTriggerKeyDown=i=>{const t=i.key;if(t==="Tab"&&this.internalIsOpen&&!i.shiftKey){i.preventDefault();this.focusFirstItem()}};this.handleMenuClick=()=>{if(!this.noCloseOnMenuClick)this.closeDropdown()};this.handleMenuKeyDown=i=>{var t,s,h;const e=this.getItemFocusables();if(!e.length)return;const o=e.indexOf(document.activeElement);switch(i.key){case"ArrowDown":i.preventDefault();e[(o+1)%e.length].focus();break;case"ArrowUp":i.preventDefault();e[(o-1+e.length)%e.length].focus();break;case"Home":i.preventDefault();e[0].focus();break;case"End":i.preventDefault();e[e.length-1].focus();break;case"Enter":case" ":case"Spacebar":i.preventDefault();(t=document.activeElement)===null||t===void 0?void 0:t.click();break;case"Escape":i.preventDefault();this.closeDropdown();(s=this.trigger)===null||s===void 0?void 0:s.focus();break;case"Tab":if(i.shiftKey&&o===0){i.preventDefault();this.closeDropdown();(h=this.trigger)===null||h===void 0?void 0:h.focus()}break}}}handleOutsideClick(i){const t=i.target;if(!this.noCloseOnOutsideClick&&!this.el.contains(t)&&!this.menu.contains(t)){this.closeDropdown()}}handleFocusOutside(i){const t=i.target;if(this.internalIsOpen&&!this.el.contains(t)&&!this.menu.contains(t)){this.closeDropdown()}}getItemFocusables(){if(!this.menu)return[];const i=Array.from(this.menu.querySelectorAll("ifx-dropdown-item"));return i.filter((i=>!(i.getAttribute("hide")==="true"||i.classList.contains("hide")))).map((i=>{var t;return(t=i.shadowRoot)===null||t===void 0?void 0:t.querySelector("a")})).filter((i=>!!i))}componentWillLoad(){this.updateSlotContent();this.watchHandlerIsOpen(this.defaultOpen,this.internalIsOpen)}async componentDidLoad(){if(!a(this.el)){const i=e();o("ifx-dropdown",await i)}}watchHandlerIsOpen(i,t){if(i!==t&&i!==this.internalIsOpen){if(i){this.openDropdown()}else{this.closeDropdown()}}}watchHandlerDisabled(i){if(this.trigger){this.trigger.disabled=i}}watchHandlerSlot(){this.updateSlotContent()}focusFirstItem(){const[i]=this.getItemFocusables();i===null||i===void 0?void 0:i.focus()}updateSlotContent(){const i=this.el.querySelector("ifx-dropdown-trigger-button, ifx-dropdown-trigger");if(i!==this.trigger){if(this.trigger){this.trigger.removeEventListener("click",this.handleTriggerClick);this.trigger.removeEventListener("keydown",this.handleTriggerKeyDown)}this.trigger=i;if(this.trigger){this.trigger.disabled=this.disabled;this.trigger.addEventListener("click",this.handleTriggerClick);this.trigger.addEventListener("keydown",this.handleTriggerKeyDown)}}const t=this.el.querySelector("ifx-dropdown-menu");if(!this.noAppendToBody){if(this.menu&&this.menu!==t){this.menu.removeEventListener("click",this.handleMenuClick);this.menu.removeEventListener("keydown",this.handleMenuKeyDown);this.menu.remove()}this.menu=t;if(this.menu&&!document.body.contains(this.menu)){document.body.append(this.menu)}}else{this.menu=t}if(this.menu){this.menu.removeEventListener("click",this.handleMenuClick);this.menu.removeEventListener("keydown",this.handleMenuKeyDown);this.menu.addEventListener("click",this.handleMenuClick);this.menu.addEventListener("keydown",this.handleMenuKeyDown)}}menuClickHandler(){if(!this.noCloseOnMenuClick){this.closeDropdown()}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.menu){this.menu.remove()}}async isOpen(){return this.internalIsOpen}async closeDropdown(){if(this.internalIsOpen){this.internalIsOpen=false;this.trigger.isOpen=false;this.menu.isOpen=false;this.ifxClose.emit()}if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}async openDropdown(){if(!this.internalIsOpen&&!this.disabled){this.internalIsOpen=true;this.trigger.isOpen=true;this.menu.isOpen=true;this.popperInstance=n(this.el,this.menu,{placement:this.placement});this.ifxOpen.emit()}}render(){return s("div",{key:"98fae8a111b3e91b8a4f2690e0dd462d1c6c4791","aria-label":"dropdown menu",class:"dropdown"},s("slot",{key:"f491cae9545a2d18342efa9f2fb29412d580f643"}))}get el(){return h(this)}static get watchers(){return{defaultOpen:["watchHandlerIsOpen"],disabled:["watchHandlerDisabled"]}}};c.style=r;export{c as ifx_dropdown};
-//# sourceMappingURL=p-2151de2a.entry.js.map
+import{r as i,c as s,h as t,a as h}from"./p-PqnYwNKt.js";import{d as e,t as o}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";import{c as n}from"./p-BfP9ezJQ.js";const r=":host{display:inline-block}";const c=class{constructor(t){i(this,t);this.ifxOpen=s(this,"ifxOpen",7);this.ifxClose=s(this,"ifxClose",7);this.ifxDropdown=s(this,"ifxDropdown",7);this.placement="bottom-start";this.defaultOpen=false;this.internalIsOpen=false;this.noAppendToBody=false;this.noCloseOnOutsideClick=false;this.noCloseOnMenuClick=false;this.handleTriggerClick=()=>{if(!this.internalIsOpen)this.openDropdown();else this.closeDropdown()};this.handleTriggerKeyDown=i=>{const s=i.key;if(s==="Tab"&&this.internalIsOpen&&!i.shiftKey){i.preventDefault();this.focusFirstItem()}};this.handleMenuClick=()=>{if(!this.noCloseOnMenuClick)this.closeDropdown()};this.handleMenuKeyDown=i=>{var s,t,h;const e=this.getItemFocusables();if(!e.length)return;const o=e.indexOf(document.activeElement);switch(i.key){case"ArrowDown":i.preventDefault();e[(o+1)%e.length].focus();break;case"ArrowUp":i.preventDefault();e[(o-1+e.length)%e.length].focus();break;case"Home":i.preventDefault();e[0].focus();break;case"End":i.preventDefault();e[e.length-1].focus();break;case"Enter":case" ":case"Spacebar":i.preventDefault();(s=document.activeElement)===null||s===void 0?void 0:s.click();break;case"Escape":i.preventDefault();this.closeDropdown();(t=this.trigger)===null||t===void 0?void 0:t.focus();break;case"Tab":if(i.shiftKey&&o===0){i.preventDefault();this.closeDropdown();(h=this.trigger)===null||h===void 0?void 0:h.focus()}break}}}handleOutsideClick(i){const s=i.target;if(!this.noCloseOnOutsideClick&&!this.el.contains(s)&&!this.menu.contains(s)){this.closeDropdown()}}handleFocusOutside(i){const s=i.target;if(this.internalIsOpen&&!this.el.contains(s)&&!this.menu.contains(s)){this.closeDropdown()}}getItemFocusables(){if(!this.menu)return[];const i=Array.from(this.menu.querySelectorAll("ifx-dropdown-item"));return i.filter((i=>!(i.getAttribute("hide")==="true"||i.classList.contains("hide")))).map((i=>{var s;return(s=i.shadowRoot)===null||s===void 0?void 0:s.querySelector("a")})).filter((i=>!!i))}componentWillLoad(){this.updateSlotContent();this.watchHandlerIsOpen(this.defaultOpen,this.internalIsOpen)}async componentDidLoad(){if(!a(this.el)){const i=e();o("ifx-dropdown",await i)}}watchHandlerIsOpen(i,s){if(i!==s&&i!==this.internalIsOpen){if(i){this.openDropdown()}else{this.closeDropdown()}}}watchHandlerDisabled(i){if(this.trigger){this.trigger.disabled=i}}watchHandlerSlot(){this.updateSlotContent()}focusFirstItem(){const[i]=this.getItemFocusables();i===null||i===void 0?void 0:i.focus()}updateSlotContent(){const i=this.el.querySelector("ifx-dropdown-trigger-button, ifx-dropdown-trigger");if(i!==this.trigger){if(this.trigger){this.trigger.removeEventListener("click",this.handleTriggerClick);this.trigger.removeEventListener("keydown",this.handleTriggerKeyDown)}this.trigger=i;if(this.trigger){this.trigger.disabled=this.disabled;this.trigger.addEventListener("click",this.handleTriggerClick);this.trigger.addEventListener("keydown",this.handleTriggerKeyDown)}}const s=this.el.querySelector("ifx-dropdown-menu");if(!this.noAppendToBody){if(this.menu&&this.menu!==s){this.menu.removeEventListener("click",this.handleMenuClick);this.menu.removeEventListener("keydown",this.handleMenuKeyDown);this.menu.remove()}this.menu=s;if(this.menu&&!document.body.contains(this.menu)){document.body.append(this.menu)}}else{this.menu=s}if(this.menu){this.menu.removeEventListener("click",this.handleMenuClick);this.menu.removeEventListener("keydown",this.handleMenuKeyDown);this.menu.addEventListener("click",this.handleMenuClick);this.menu.addEventListener("keydown",this.handleMenuKeyDown)}}menuClickHandler(){if(!this.noCloseOnMenuClick){this.closeDropdown()}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.menu){this.menu.remove()}}async isOpen(){return this.internalIsOpen}async closeDropdown(){if(this.internalIsOpen){this.internalIsOpen=false;this.trigger.isOpen=false;this.menu.isOpen=false;this.ifxClose.emit()}if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}async openDropdown(){if(!this.internalIsOpen&&!this.disabled){this.internalIsOpen=true;this.trigger.isOpen=true;this.menu.isOpen=true;this.popperInstance=n(this.el,this.menu,{placement:this.placement});this.ifxOpen.emit()}}render(){return t("div",{key:"98fae8a111b3e91b8a4f2690e0dd462d1c6c4791","aria-label":"dropdown menu",class:"dropdown"},t("slot",{key:"f491cae9545a2d18342efa9f2fb29412d580f643"}))}get el(){return h(this)}static get watchers(){return{defaultOpen:["watchHandlerIsOpen"],disabled:["watchHandlerDisabled"]}}};c.style=r;export{c as ifx_dropdown};
+//# sourceMappingURL=p-c6826c1e.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,a as s,d as o}from"./p-PqnYwNKt.js";import{d as n,t as l}from"./p-DcmcuUOA.js";import{i as c}from"./p-Bw2fh5LT.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.disabled .ifx-label-wrapper{color:#BFBBBB}.ifx-multiselect-container.disabled .ifx-multiselect-wrapper{background:#BFBBBB;color:#FFFFFF;border-color:#BFBBBB;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-label-wrapper .required{margin-left:4px}.ifx-multiselect-container .ifx-label-wrapper .required.error{color:#CD002F}.ifx-multiselect-container .multi__select-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.ifx-multiselect-container .multi__select-caption.error{color:#CD002F}.ifx-multiselect-container .multi__select-caption.disabled{color:#BFBBBB}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal;height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;display:flex;align-items:center;gap:8px}.ifx-multiselect-container .ifx-multiselect-icon-container .ifx-multiselect-icon-container{display:flex}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper{display:flex;align-items:center;transition:transform 0.2s ease-in-out}.ifx-multiselect-container .ifx-multiselect-icon-container .icon-wrapper--open{transform:rotate(180deg)}.ifx-multiselect-container .ifx-clear-button{display:flex;align-items:center}.ifx-multiselect-container .ifx-clear-button.hide{display:none}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{box-sizing:border-box;position:absolute;top:100%;left:0;width:100%;margin-top:4px;border:1px solid #EEEDED;background-color:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;z-index:1000;display:flex;flex-direction:column}.ifx-multiselect-container:not(.disabled) .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-dropdown-functions{padding:12px 16px;border-bottom:1px solid #EEEDED;flex-shrink:0}.ifx-multiselect-dropdown-search{margin-bottom:12px}.ifx-multiselect-dropdown-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.ifx-multiselect-dropdown-controls .select-all-wrapper{display:flex}.ifx-multiselect-dropdown-controls .expand-collapse-controls{display:flex;gap:12px}.ifx-multiselect-dropdown-controls .control-item{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-dropdown-controls .control-item:hover{color:#0A8276}.ifx-multiselect-dropdown-controls .control-item:active{color:#08665C}.ifx-multiselect-dropdown-controls .control-item:focus{outline:none}.ifx-multiselect-dropdown-controls .control-item:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.ifx-multiselect-options{flex:1;overflow-y:auto;padding-top:12px;padding-bottom:12px}.ifx-multiselect-options.show-no-results .ifx-multiselect-no-results{display:block}.ifx-multiselect-no-results{padding-left:16px;padding-right:16px;display:none}';function a(e,t){let i;return function s(...o){const n=()=>{clearTimeout(i);e(...o)};clearTimeout(i);i=setTimeout(n,t)}}const h=class{constructor(i){e(this,i);this.ifxSelect=t(this,"ifxSelect",7);this.ifxOpen=t(this,"ifxOpen",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.disabled=false;this.required=false;this.error=false;this.caption="";this.label="";this.placeholder="";this.showSearch=true;this.showSelectAll=true;this.showClearButton=true;this.showExpandCollapse=true;this.noResultsMessage="No results found.";this.showNoResultsMessage=true;this.searchPlaceholder="Search";this.selectAllLabel="Select all";this.expandLabel="Expand";this.collapseLabel="Collapse";this.ariaMultiSelectLabel="Multi-select dropdown";this.ariaMultiSelectLabelledBy="";this.ariaMultiSelectDescribedBy="";this.ariaSearchLabel="Search options";this.ariaClearLabel="Clear all selections";this.ariaToggleLabel="Toggle dropdown";this.ariaSelectAllLabel="Select all options";this.ariaExpandAllLabel="Expand all categories";this.ariaCollapseAllLabel="Collapse all categories";this.internalError=false;this.persistentSelectedOptions=[];this.dropdownOpen=false;this.searchTerm="";this.handleSearch=a((e=>{const t=e.value.toLowerCase();const i=t!=="";this.searchTerm=t;const s=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");if(s){if(i){s.classList.remove("active")}else{const e=this.el.shadowRoot.querySelector("ifx-search-field");const t=e&&e.matches(":focus-within");if(!t){s.classList.add("active")}}}const o=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(o){if(i){o.classList.add("has-search-filter")}else{o.classList.remove("has-search-filter")}}requestAnimationFrame((()=>{const e=this.el.querySelectorAll("ifx-multiselect-option");e.forEach((e=>{const s=new CustomEvent("ifx-search-filter",{detail:{searchTerm:t,isActive:i}});e.dispatchEvent(s)}));if(i){setTimeout((()=>{const e=this.el.querySelectorAll("ifx-multiselect-option");let t=0;e.forEach((e=>{const i=window.getComputedStyle(e);const s=e.getBoundingClientRect();if(i.display!=="none"&&i.visibility!=="hidden"&&i.opacity!=="0"&&s.height>0){t++}}));const i=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(i){if(t===0){i.classList.add("show-no-results")}else{i.classList.remove("show-no-results")}}}),200)}else{const e=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(e){e.classList.remove("show-no-results")}}}))}),150);this.handleDocumentClick=e=>{const t=e.composedPath();if(!t.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.resetSearch();this.ifxOpen.emit(this.dropdownOpen)}}}parseChildOptions(){const e=[];const t=Array.from(this.el.children);t.forEach(((t,i)=>{if(t.tagName==="IFX-MULTISELECT-OPTION"){const s=this.parseOptionElement(t,i);if(s){e.push(s)}}}));return e}parseOptionElement(e,t){const i=e.getAttribute("value")||`option-${t}`;const s=e.hasAttribute("selected");const o=e.hasAttribute("disabled");const n=e.hasAttribute("indeterminate");const l={value:i,selected:s,disabled:o,indeterminate:n};const c=Array.from(e.children).filter((e=>e.tagName==="IFX-MULTISELECT-OPTION")).map(((e,t)=>this.parseOptionElement(e,t))).filter((e=>e!==null));if(c.length>0){l.children=c}return l}loadInitialOptions(){this.internalError=this.error;const e=this.parseChildOptions();const t=this.collectSelectedOptions(e);const i=t.filter((e=>!this.persistentSelectedOptions.some((t=>t.value==e.value))));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...i]}collectSelectedOptions(e){let t=[];for(const i of e){if(i.selected){if(i.children&&i.children.length>0){t=t.concat(this.collectLeafOptions(i.children))}else{if(!t.some((e=>e.value===i.value))){t.push(i)}}}else{if(i.children&&i.children.length>0){t=t.concat(this.collectSelectedOptions(i.children))}}}return t}collectLeafOptions(e){let t=[];for(const i of e){if(i.children&&i.children.length>0){t=t.concat(this.collectLeafOptions(i.children))}else{t.push(i)}}return t}handleSearchFocus(e){const t=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper");if(t){if(e||this.searchTerm!==""){t.classList.remove("active")}else{t.classList.add("active")}}}positionDropdown(){var e;const t=(e=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper"))===null||e===void 0?void 0:e.getBoundingClientRect();const i=window.innerHeight-t.bottom;const s=t.top;if(s>i&&t.height>i||t.bottom>window.innerHeight){this.dropdownFlipped=true}else{this.dropdownFlipped=false}}updateSlotBasedSelections(e=false){const t=this.el.querySelectorAll("ifx-multiselect-option");const i=[];t.forEach((e=>{const t=e["__stencil_instance"];if(t&&t.selected&&!t.hasChildren){i.push({value:t.value,selected:true,disabled:t.disabled,label:t.getTextContent()||t.value})}}));this.persistentSelectedOptions=i;if(e){this.ifxSelect.emit(this.persistentSelectedOptions)}}updateInitialParentStates(){const e=this.el.querySelectorAll("ifx-multiselect-option");const t=Array.from(e).map((e=>({element:e,instance:e["__stencil_instance"],depth:parseInt(e.getAttribute("data-level")||"0")}))).filter((e=>e.instance)).sort(((e,t)=>t.depth-e.depth));t.forEach((({instance:e})=>{if(e.hasChildren){this.updateParentState(e)}}))}updateParentState(e){const t=Array.from(e.el.children).filter((e=>e.tagName==="IFX-MULTISELECT-OPTION")).map((e=>e["__stencil_instance"])).filter((e=>e!==null));const i=t.filter((e=>e.selected)).length;const s=t.filter((e=>e.indeterminate)).length;const o=t.length;if(i===o&&s===0){e.selected=true;e.indeterminate=false}else if(i===0&&s===0){e.selected=false;e.indeterminate=false}else{e.selected=false;e.indeterminate=true}}async componentDidLoad(){if(!c(this.el)){const e=n();l("ifx-multiselect",await e)}setTimeout((()=>{this.positionDropdown()}),500);this.el.addEventListener("ifx-option-changed",(e=>{var t;const i=(t=e.target)===null||t===void 0?void 0:t.__stencil_instance;if(i&&!i.hasChildren){this.updateSlotBasedSelections(true)}}));setTimeout((()=>{this.updateSlotBasedSelections(false);this.updateInitialParentStates()}),100)}componentWillLoad(){this.loadInitialOptions()}updateInternalError(){this.internalError=this.error}onSelectionChange(e,t){const i=new FormData;e.forEach((e=>i.append(this.name,e.value)))}collapseAll(){const e=this.el.querySelectorAll("ifx-multiselect-option");e.forEach((e=>{const t=e["__stencil_instance"];if(t&&t.hasChildren){t.isExpanded=false}}))}expandAll(){const e=this.el.querySelectorAll("ifx-multiselect-option");e.forEach((e=>{const t=e["__stencil_instance"];if(t&&t.hasChildren){t.isExpanded=true}}))}selectAll(){this.resetSearch();const e=this.el.querySelectorAll("ifx-multiselect-option");e.forEach((e=>{const t=e["__stencil_instance"];if(t){if(t.hasChildren){t.isExpanded=true}else{t.selected=true}}}));setTimeout((()=>{this.updateInitialParentStates();this.updateSlotBasedSelections(false);this.ifxSelect.emit(this.persistentSelectedOptions)}),0)}async clearSelection(){const e=this.el.querySelectorAll("ifx-multiselect-option");e.forEach((e=>{const t=e["__stencil_instance"];if(t){t.selected=false;t.indeterminate=false;if(t.hasChildren){t.isExpanded=false}}}));this.persistentSelectedOptions=[];setTimeout((()=>{this.updateSlotBasedSelections(false);this.ifxSelect.emit(this.persistentSelectedOptions)}),0)}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;setTimeout((()=>{if(this.dropdownOpen){document.addEventListener("click",this.handleDocumentClick)}else{this.resetSearch()}this.ifxOpen.emit(this.dropdownOpen)}),0)}resetSearch(){this.searchTerm="";const e=this.el.shadowRoot.querySelector("ifx-search-field");if(e){e.value=""}const t=this.el.shadowRoot.querySelector(".ifx-multiselect-options");if(t){t.classList.remove("has-search-filter")}const i=this.el.querySelectorAll("ifx-multiselect-option");i.forEach((e=>{const t=new CustomEvent("ifx-search-filter",{detail:{searchTerm:"",isActive:false}});e.dispatchEvent(t)}))}handleWrapperClick(e){this.positionDropdown();if(e.currentTarget===e.target){this.toggleDropdown()}}handleKeyDown(e){if(this.disabled)return;if(!this.dropdownOpen){switch(e.code){case"Enter":case"Space":case"ArrowDown":e.preventDefault();this.toggleDropdown();break}return}switch(e.code){case"Escape":e.preventDefault();this.toggleDropdown();break;case"Enter":case"Space":const t=e.target;if(!t.closest(".ifx-multiselect-dropdown-functions")){e.preventDefault();this.toggleDropdown()}break;case"ArrowDown":case"ArrowUp":e.preventDefault();this.focusFirstOption();break}}focusFirstOption(){var e;const t=this.el.querySelector("ifx-multiselect-option:not(.search-hidden)");if(t){const i=(e=t.shadowRoot)===null||e===void 0?void 0:e.querySelector(".option-label");i===null||i===void 0?void 0:i.focus()}}renderSelectAll(){const e=this.el.querySelectorAll("ifx-multiselect-option");const t=Array.from(e).filter((e=>!e.hasChildren));const s=Array.from(e).filter((e=>!e.hasChildren&&e.selected));const o=t.length>0&&s.length===t.length;const n=e=>{if(e){e.preventDefault();e.stopPropagation()}if(o){this.clearSelection()}else{this.selectAll()}};return i("div",{class:"select-all-wrapper"},i("ifx-checkbox",{id:"selectAll",checked:o,size:"s","aria-label":this.ariaSelectAllLabel,onClick:n,onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();e.stopPropagation();n(e)}}},this.selectAllLabel))}renderNoResultsMessage(){return i("div",{class:"ifx-multiselect-no-results"},i("div",{class:"no-results-content"},i("span",{class:"no-results-text"},this.noResultsMessage)))}render(){const e=this.persistentSelectedOptions.map((e=>e.label||e.value)).join(", ");const t=this.persistentSelectedOptions.length>0;let s=false;const o=this.el.querySelectorAll("ifx-multiselect-option");if(o.length>0){s=Array.from(o).every((e=>e.children.length===0))}return i("div",{key:"fd7ce64694f743334f1c4577105d9c40f084ebbf",class:`ifx-multiselect-container ${this.disabled&&!this.error?"disabled":""}`,ref:e=>this.dropdownElement=e},i("div",{key:"81abefbfc60b69bcd9c7e9b909dae93fd1767773",class:"ifx-label-wrapper"},this.label&&i("span",{key:"6de06dac0828d7831519e3c92b68095e533ae375",class:"wrapper-label"},i("span",{key:"ed9c68a25201321d0d69444e88d60d68db24e330"},this.label),this.required&&i("span",{key:"070422e2ebb9cb47fb21dcee37229b70016c0da1",class:`required ${this.error?"error":""}`},"*"))),i("div",{key:"3b5d28e2c87f472e68f1a8293daa9d5246d170b2",class:`ifx-multiselect-wrapper\n        ${this.dropdownOpen?"active":""}\n        ${this.dropdownFlipped?"is-flipped":""}\n        ${this.internalError?"error":""}\n        ${this.disabled&&!this.error?"disabled":""}`,role:"combobox","aria-label":this.ariaMultiSelectLabel,"aria-labelledby":this.ariaMultiSelectLabelledBy||undefined,"aria-describedby":this.ariaMultiSelectDescribedBy||undefined,"aria-expanded":this.dropdownOpen,"aria-haspopup":"listbox","aria-disabled":this.disabled&&!this.error,tabindex:"0",onClick:this.disabled&&!this.error?undefined:e=>this.handleWrapperClick(e),onKeyDown:this.disabled&&!this.error?undefined:e=>this.handleKeyDown(e)},i("div",{key:"1d5e621056168b08004c8efb998ff25865da2239",class:`ifx-multiselect-input\n          ${t?"":"placeholder"}\n          `,onClick:this.disabled&&!this.error?undefined:()=>this.toggleDropdown()},t?e:this.placeholder),this.dropdownOpen&&i("div",{key:"88762a0e7d11feb2fba793f3d4dc7fc183c161e9",class:"ifx-multiselect-dropdown-menu"},(this.showSearch||this.showSelectAll||this.showExpandCollapse&&!s)&&i("div",{key:"f47c4fd519f502997c2c8ac3611f914e628a465b",class:"ifx-multiselect-dropdown-functions",onClick:e=>e.stopPropagation()},this.showSearch&&i("div",{key:"6d34c960d1dba9eca8bf4e1c89377d736c590b20",class:"ifx-multiselect-dropdown-search"},i("ifx-search-field",{key:"37bc73b76fb6011f64566aa3ffc4b01056a0ac1b",class:"search-input",placeholder:this.searchPlaceholder,size:"s","show-delete-icon":"true","aria-label":this.ariaSearchLabel,onKeyDown:e=>{e.stopPropagation()},onIfxInput:e=>this.handleSearch(e.target),onFocus:()=>this.handleSearchFocus(true),onBlur:()=>this.handleSearchFocus(false)})),i("div",{key:"d7a0b92d7532aa2290e253172359c694a83d92e9",class:"ifx-multiselect-dropdown-controls"},this.showSelectAll&&this.renderSelectAll(),this.showExpandCollapse&&!s&&i("div",{key:"c509eb6f7b77507cf3c1207f1e912130b722f84e",class:"expand-collapse-controls"},i("span",{key:"912ffe8e593e4e0f81cff8ad03e72139b492c23f",class:"control-item",role:"button",tabIndex:0,"aria-label":this.ariaExpandAllLabel,onClick:e=>{e.stopPropagation();this.expandAll()},onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();e.stopPropagation();this.expandAll()}}},this.expandLabel),i("span",{key:"e7201dfca2b2e16469778ffd922b4c64f3d06619",class:"control-item",role:"button",tabIndex:0,"aria-label":this.ariaCollapseAllLabel,onClick:e=>{e.stopPropagation();this.collapseAll()},onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();e.stopPropagation();this.collapseAll()}}},this.collapseLabel)))),i("div",{key:"031e2384922144e63b528ac69a8ad1bea1420acf",class:"ifx-multiselect-options",role:"listbox","aria-multiselectable":"true"},i("slot",{key:"b5e77631b05852b7f708b92f2cdd797b7cb653a2"}),this.searchTerm&&this.showNoResultsMessage&&this.renderNoResultsMessage())),i("div",{key:"5a813087f59df7ab9dca060d5c80d158bc8d6da1",class:"ifx-multiselect-icon-container"},this.persistentSelectedOptions.length>0&&i("div",{key:"0ae8b58fa2d2ccf28962264bfaa8949114f5767d",class:`ifx-clear-button ${!this.showClearButton?"hide":""}`,onClick:this.disabled&&!this.error?undefined:()=>this.clearSelection()},i("ifx-icon",{key:"8e60813fa135b67a28ba5759c37fb000641af257",icon:"cRemove16"})),i("div",{key:"f71cc3fa883c5af46d24048320bdf822c8ceeb99",class:"icon-wrapper-up",onClick:this.disabled&&!this.error?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-up",icon:"chevron-up-16"})),i("div",{key:"fb08f6a16daebfc6e0a58fcb24e5cfdffd80b423",class:"icon-wrapper-down",onClick:this.disabled&&!this.error?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-down",icon:"chevron-down-16"})))),this.caption&&i("div",{key:"4bd2795e4eb8539f8609bf83065f2637f2f1dc1b",class:`multi__select-caption ${this.error?"error":""} ${this.disabled&&!this.error?"disabled":""}`},this.caption))}get el(){return s(this)}static get watchers(){return{error:["updateInternalError"],persistentSelectedOptions:["onSelectionChange"]}}};h.style=r;const f=":host{display:block;width:100%}.option{display:flex;flex-direction:column;position:relative;cursor:pointer;list-style:none}.option.option--expanded{position:relative}.option.option--has-children{position:relative}.option.option--has-children .option-item>.chevron-wrapper{display:flex}.option--disabled{cursor:not-allowed;pointer-events:none;color:#BFBBBB}.option.search-hidden{display:none !important}.option.search-match .option-item .option-label .search-highlight{font-weight:bold}.option-item{display:flex;flex-direction:row;align-items:center;white-space:nowrap;min-height:20px;padding:4px 16px;background-color:#FFFFFF;transition:background-color 0.2s ease-in-out}.option-item:hover{background-color:#F7F7F7}.option--disabled .option-item:hover{background-color:transparent}.option-children{display:block}.chevron-wrapper{display:none;align-items:center;justify-content:center;margin-right:8px;width:20px;height:20px;flex-shrink:0}.chevron-wrapper:focus{outline:none}.chevron-wrapper:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--has-children .chevron-wrapper{display:flex}.chevron-wrapper .chevron{transition:transform 0.2s ease-in-out;color:#3C3A39}.chevron-wrapper .chevron.chevron--expanded{transform:rotate(90deg)}.chevron-wrapper .chevron.chevron--collapsed{transform:rotate(0deg)}.checkbox-wrapper{display:flex;align-items:center;margin-right:8px;flex-shrink:0}.option-label{flex-grow:1;display:flex;align-items:center;cursor:pointer;padding:2px 0;font-size:0.875rem}.option-label:focus{outline:none}.option-label:focus-visible{outline:2px solid #0A8276;outline-offset:2px;border-radius:1px}.option--disabled .option-label{cursor:not-allowed;color:#BFBBBB}";const d=class{constructor(t){e(this,t);this.selected=false;this.disabled=false;this.indeterminate=false;this.isExpanded=false;this.hasChildren=false;this.depth=0;this.searchTerm="";this.isSearchActive=false;this.isSearchDisabled=false;this.handleSearchFilter=e=>{const{searchTerm:t,isActive:i}=e.detail;this.searchTerm=t.toLowerCase();this.isSearchActive=i;requestAnimationFrame((()=>{this.updateSearchClasses()}))};this.handleCheckboxClick=e=>{if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;e.stopPropagation();let t;if(this.indeterminate){t=true}else{t=!this.selected}this.selected=t;this.indeterminate=false;if(this.hasChildren){this.isExpanded=t;requestAnimationFrame((()=>{this.selectAllChildren(t);this.expandAllChildren(t)}))}this.updateParentStates();this.notifyMultiselect()};this.handleHeaderClick=e=>{e.stopPropagation();if(!this.disabled&&!(this.isSearchActive&&this.isSearchDisabled)){this.handleClick(e)}}}componentWillLoad(){this.hasChildren=this.el.children.length>0;this.depth=this.calculateDepth();this.el.setAttribute("data-level",this.depth.toString());if(this.hasChildren){const e=this.hasAnySelectedChildren();if(e){this.isExpanded=true}}}componentDidLoad(){this.el["__stencil_instance"]=this;this.notifyMultiselect();this.el.addEventListener("ifx-search-filter",this.handleSearchFilter)}componentWillUpdate(){this.notifyMultiselect()}disconnectedCallback(){this.el.removeEventListener("ifx-search-filter",this.handleSearchFilter)}updateSearchClasses(){var e;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector(".option");if(!t)return;if(!this.isSearchActive){t.classList.remove("search-hidden","search-parent","search-match");this.removeHighlighting();this.isSearchDisabled=false;return}const i=this.getTextContent().toLowerCase();const s=i.includes(this.searchTerm);const o=this.hasMatchingParent();requestAnimationFrame((()=>{const e=this.hasMatchingChildren();t.classList.remove("search-hidden","search-parent","search-match");this.isSearchDisabled=false;if(s&&!this.hasChildren){t.classList.add("search-match");this.highlightSearchTerm()}else if(s&&this.hasChildren){t.classList.add("search-match");this.highlightSearchTerm();this.isExpanded=true}else if(!s&&this.hasChildren&&e){t.classList.add("search-parent");this.removeHighlighting();this.isExpanded=true;this.isSearchDisabled=true}else if(o){t.classList.add("search-match");this.removeHighlighting()}else{t.classList.add("search-hidden");this.removeHighlighting()}}))}highlightSearchTerm(){var e;if(!this.searchTerm)return;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector(".option-label");if(!t)return;const i=t.querySelector("slot");if(!i)return;this.removeHighlighting();const s=this.getTextContent();const o=this.searchTerm.toLowerCase();const n=s.toLowerCase();if(!n.includes(o))return;const l=n.indexOf(o);if(l===-1)return;const c=s.substring(0,l);const r=s.substring(l,l+o.length);const a=s.substring(l+o.length);const h=document.createElement("span");h.className="highlighted-text";if(c){h.appendChild(document.createTextNode(c))}const f=document.createElement("strong");f.className="search-highlight";f.textContent=r;h.appendChild(f);if(a){h.appendChild(document.createTextNode(a))}t.setAttribute("data-original-content","true");i.style.display="none";t.appendChild(h)}removeHighlighting(){var e;const t=(e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector(".option-label");if(!t)return;const i=t.querySelector("slot");const s=t.querySelector(".highlighted-text");if(s){t.removeChild(s)}if(i){i.style.display=""}t.removeAttribute("data-original-content")}getTextContent(){let e="";Array.from(this.el.childNodes).forEach((t=>{var i;if(t.nodeType===Node.TEXT_NODE){e+=((i=t.textContent)===null||i===void 0?void 0:i.trim())||""}}));return e||this.value||""}hasMatchingChildren(){if(!this.hasChildren)return false;const e=Array.from(this.el.children).filter((e=>e.tagName==="IFX-MULTISELECT-OPTION"));return e.some((e=>{const t=e["__stencil_instance"];if(!t)return false;const i=t.getTextContent().toLowerCase();const s=i.includes(this.searchTerm);const o=t.hasMatchingChildren();return s||o}))}hasMatchingParent(){let e=this.el.parentElement;while(e&&e.tagName==="IFX-MULTISELECT-OPTION"){const t=e["__stencil_instance"];if(t){const e=t.getTextContent().toLowerCase();if(e.includes(this.searchTerm)){return true}}e=e.parentElement}return false}calculateDepth(){let e=0;let t=this.el.parentElement;while(t&&t.tagName!=="IFX-MULTISELECT"){if(t.tagName==="IFX-MULTISELECT-OPTION"){e++}t=t.parentElement}return e}handleClick(e){if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;e.stopPropagation();if(e.type==="click"&&e.target.closest(".chevron-wrapper")){this.toggleExpansion();return}let t;if(this.indeterminate){t=true}else{t=!this.selected}this.selected=t;this.indeterminate=false;if(this.hasChildren){this.isExpanded=t;requestAnimationFrame((()=>{this.selectAllChildren(t);this.expandAllChildren(t)}))}this.updateParentStates();this.notifyMultiselect()}handleKeyDown(e){if(this.disabled||this.isSearchActive&&this.isSearchDisabled)return;const t=e.target;if(t.closest(".chevron-wrapper")||t.closest(".checkbox-wrapper")){return}if(e.key!=="ArrowUp"&&e.key!=="ArrowDown"){e.stopPropagation()}if(e.key==="ArrowRight"&&this.hasChildren){this.isExpanded=true}if(e.key==="ArrowLeft"&&this.hasChildren){this.isExpanded=false}}notifyMultiselect(){const e=new CustomEvent("ifx-option-changed",{bubbles:true,detail:{value:this.value,selected:this.selected,indeterminate:this.indeterminate}});this.el.dispatchEvent(e)}selectAllChildren(e){const t=Array.from(this.el.children).filter((e=>e.tagName==="IFX-MULTISELECT-OPTION"));t.forEach((t=>{var i;const s=t["__stencil_instance"];if(s){s.selected=e;s.indeterminate=false;if(s.hasChildren){s.isExpanded=e;s.selectAllChildren(e)}(i=s.notifyMultiselect)===null||i===void 0?void 0:i.call(s)}}))}expandAllChildren(e){const t=Array.from(this.el.children).filter((e=>e.tagName==="IFX-MULTISELECT-OPTION"));t.forEach((t=>{const i=t["__stencil_instance"];if(i&&i.hasChildren){i.isExpanded=e;i.expandAllChildren(e)}}))}updateParentStates(){var e;let t=this.el.parentElement;while(t&&t.tagName==="IFX-MULTISELECT-OPTION"){const i=t["__stencil_instance"];if(!i){t=t.parentElement;continue}const s=Array.from(t.children).filter((e=>e.tagName==="IFX-MULTISELECT-OPTION")).map((e=>e["__stencil_instance"])).filter((e=>e!==null));const o=s.filter((e=>e.selected)).length;const n=s.filter((e=>e.indeterminate)).length;const l=s.length;if(o===l&&n===0){i.selected=true;i.indeterminate=false}else if(o===0&&n===0){i.selected=false;i.indeterminate=false}else{i.selected=false;i.indeterminate=true}(e=i.notifyMultiselect)===null||e===void 0?void 0:e.call(i);t=t.parentElement}}toggleExpansion(){this.isExpanded=!this.isExpanded}hasAnySelectedChildren(){const e=Array.from(this.el.children).filter((e=>e.tagName==="IFX-MULTISELECT-OPTION"));return e.some((e=>{const t=e.hasAttribute("selected");const i=this.checkForSelectedDescendants(e);return t||i}))}checkForSelectedDescendants(e){const t=Array.from(e.children).filter((e=>e.tagName==="IFX-MULTISELECT-OPTION"));return t.some((e=>{const t=e.hasAttribute("selected");const i=this.checkForSelectedDescendants(e);return t||i}))}render(){let e=false;const t=this.el.closest("ifx-multiselect");if(t){const i=Array.from(t.querySelectorAll("ifx-multiselect-option"));e=i.every((e=>e.children.length===0))}const s=this.depth*28+16;const n=this.hasChildren?0:28;let l=s+n;const c=e?undefined:{paddingLeft:`${l}px`};return i(o,{key:"4dd008dabc4aec3070ad355aa877ff391e3883df"},i("div",{key:"848afd2fa2a34c2b5763dc8c979d898b498b39b1",class:{option:true,"option--has-children":this.hasChildren,"option--expanded":this.isExpanded,"option--disabled":this.disabled,"option--selected":this.selected},role:"option","aria-expanded":this.hasChildren?this.isExpanded?"true":"false":undefined,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false","data-level":this.depth,"data-value":this.value},i("div",{key:"28fe299c78e8f42d9ef763ba14c84e0123276de8",class:"option-item",style:c},i("div",{key:"891cd1a5c09c53df6c8079642aab48a893295cd8",class:"chevron-wrapper",tabIndex:this.hasChildren?0:-1,role:this.hasChildren?"button":undefined,"aria-label":this.hasChildren?this.isExpanded?"Collapse":"Expand":undefined,onClick:e=>{e.stopPropagation();this.toggleExpansion()},onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();e.stopPropagation();this.toggleExpansion()}}},this.hasChildren&&i("ifx-icon",{key:"7ddb0f0245f14fd8bc64fbfb3278c1d3a53f3834",class:`chevron ${this.isExpanded?"chevron--expanded":"chevron--collapsed"}`,icon:"chevron-right-16"})),i("div",{key:"a688fb56fd51cc1aefccf9b42d8f5c2a6ac271f8",class:"checkbox-wrapper",onClick:e=>e.stopPropagation()},i("ifx-checkbox",{key:"6ba8ea62a25285a59f3866dc0e7911b658477b3d",size:"s",checked:this.isSearchActive&&this.isSearchDisabled?false:this.indeterminate?false:this.selected,indeterminate:this.isSearchActive&&this.isSearchDisabled?false:this.indeterminate,onClick:this.handleCheckboxClick,disabled:this.disabled||this.isSearchActive&&this.isSearchDisabled,onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();e.stopPropagation();this.handleCheckboxClick(e)}}})),i("div",{key:"63d0d6313ee94b3e80a2a0058fa1e79431becb29",class:"option-label",onClick:this.handleHeaderClick,tabIndex:-1},i("slot",{key:"f503e85ef020cedec37931b6079a9164c1ce8d5d"}))),this.isExpanded&&i("div",{key:"75297050484cdc4a9c80b2bff614119a7c18ff3f",class:"option-children"},i("slot",{key:"f33fbe0abb5e7c9277e24e0445838d8e4d0a6910",name:"children"}))))}get el(){return s(this)}};d.style=f;export{h as ifx_multiselect,d as ifx_multiselect_option};
+//# sourceMappingURL=p-ca312cbb.entry.js.map