@infineon/infineon-design-system-stencil 30.9.3--canary.1685.f1ef2e4b9ffe6633a9cb0a5308d4949e30ccdad4.0 → 30.9.3--canary.1689.26c727e0d9124075063eb557b3db09ae4b08da66.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["stepCss","IfxStepStyle0","Step","activeStep","showStepNumber","variant","indicatorPosition","onStepChange","event","previousActiveStep","detail","this","stepId","error","clickable","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","disabled","stepperState","complete","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","lastStep","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    &.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        }\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.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\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.$ifxColorEngineering400;\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.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\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.$ifxColorEngineering400;\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    &.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.$ifxColorEngineering400;\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.$ifxColorEngineering400;\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.$ifxColorEngineering400;\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='warningf24'></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,qjIAChB,MAAAC,EAAeD,E,MCaFE,EAAI,M,uCACgB,M,cACA,M,WACc,M,cACG,M,YACrB,E,kBAC8B,CAAEC,WAAY,EACZC,eAAgB,MAChBC,QAAS,UACTC,kBAAmB,Q,qCAG9C,K,CAG9B,YAAAC,CAAaC,GACT,MAAMC,EAAqBD,EAAME,OAAOD,mBACxC,GAAIA,IAAuBE,KAAKC,QAAUD,KAAKE,MAAO,CAClDF,KAAKG,UAAY,I,EAKzB,iBAAAC,CAAkBC,GACdL,KAAKM,OAAUD,EAAgBb,aAAeQ,KAAKC,M,CAIvD,gBAAAM,GACI,GAAIP,KAAKM,OAAQ,CACbN,KAAKE,MAAQ,K,EAKrB,eAAAM,GACI,IAAKR,KAAKS,UAAYT,KAAKU,aAAahB,UAAY,YAAcM,KAAKG,WAAaH,KAAKW,UAAW,CAChGX,KAAKU,aAAaE,cAAcZ,KAAKC,OAAQ,K,EAIrD,iBAAAY,CAAkBhB,GACd,IAAKG,KAAKS,UAAYT,KAAKU,aAAahB,UAAY,YAAcM,KAAKG,WAAaH,KAAKW,WAAad,EAAMiB,MAAQ,QAAS,CACzHd,KAAKU,aAAaE,cAAcZ,KAAKC,OAAQ,K,EAIrD,sBAAAc,CAAuBlB,GACnB,GAAIG,KAAKS,SAAU,CACfZ,EAAMmB,iB,EAId,MAAAC,GACI,OACIC,EAAA,OAAAJ,IAAA,0DAAqBd,KAAKM,OAAS,OAAQ,MAAK,gBAC3BN,KAAKM,QAAUN,KAAKW,SAAW,MAAQ,KACxDQ,QAAWC,GAAMpB,KAAKe,uBAAuBK,GAC7CC,MAAS,gBAAgBrB,KAAKC,SAAW,EAAI,aAAc,gCACjDD,KAAKE,MAAQ,QAAS,+BACtBF,KAAKU,aAAahB,oCAClBM,KAAKW,SAAW,WAAY,+BAC5BX,KAAKsB,SAAW,YAAa,yCACnBtB,KAAKU,aAAaf,8CAC5BK,KAAKM,OAAS,SAAW,+BACzBN,KAAKG,UAAY,YAAc,+BAC/BH,KAAKS,SAAW,WAAY,MAEtCS,EAAA,OAAAJ,IAAA,2CAAKO,MAAQ,qBAERrB,KAAKU,aAAahB,UAAY,WAAawB,EAAA,QAAAJ,IAAA,2CAAMO,MAAQ,qBAGrDrB,KAAKU,aAAahB,UAAY,aAAeM,KAAKE,OAAUF,KAAKE,OAASF,KAAKM,SAChFY,EAAA,OAAAJ,IAAA,2CAAKO,MAAQ,aACPrB,KAAKU,aAAajB,iBAAmBO,KAAKW,WAAaX,KAAKM,OAAUN,KAAKC,OAAS,GACpFD,KAAKW,WAAaX,KAAKM,QAAWY,EAAA,YAAAJ,IAAA,2CAAUS,KAAK,YAClDvB,KAAKM,QAAUY,EAAA,QAAAJ,IAAA,2CAAMO,MAAQ,kBAIpCrB,KAAKU,aAAahB,UAAW,WAAaM,KAAKE,QAAUF,KAAKM,QAAWY,EAAA,YAAAJ,IAAA,2CAAUS,KAAK,eAGzFvB,KAAKU,aAAahB,UAAY,WAAawB,EAAA,QAAAJ,IAAA,2CAAMO,MAAS,oBAAoBrB,KAAKM,OAAS,SAAW,SAKvGN,KAAKU,aAAahB,UAAY,WAAcM,KAAKU,aAAahB,UAAY,YAAcM,KAAKM,QAAUN,KAAKC,SAAWD,KAAKU,aAAalB,WAAW,KACrJ0B,EAAA,OAAAJ,IAAA,2CAAKU,UAAWxB,KAAKS,UAAYT,KAAKW,WAAaX,KAAKM,OAAS,GAAK,EAClEe,MAAS,cAAcrB,KAAKU,aAAahB,UAAY,UAAaM,KAAKM,OAAS,aAAe,aAAgB,KAC/Ga,QAAS,KAAQnB,KAAKQ,iBAAiB,EACvCiB,UAAYL,IAAQpB,KAAKa,kBAAkBO,EAAE,GAE3CpB,KAAKU,aAAahB,UAAY,WAAcwB,EAAA,QAAAJ,IAAA,6CAE7Cd,KAAKU,aAAahB,UAAY,YAAeM,KAAKM,OAAU,SAAW,GACvEN,KAAKU,aAAahB,UAAY,WAAawB,EAAA,QAAAJ,IAAA,8C","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["filterBarCss","IfxFilterBarStyle0","FilterBar","this","handleMoreFiltersClick","showAllFilters","updateVisibleSlots","handleResetEvent","filterSearchSlot","_a","el","shadowRoot","querySelector","HTMLSlotElement","filterSearchSlottedElements","assignedElements","flatten","forEach","filterSearchWrapper","filterSearch","searchField","querySelectorAll","length","searchFieldElement","value","selectedOptions","ifxTopbarFilterChange","emit","handleSearchChange","event","handleTopbarFilterChange","handleFilterSelect","newSelectedOptions","type","filterName","filterValue","detail","existingOptionIndex","findIndex","option","filterValues","push","connectedCallback","addEventListener","window","componentWillUnload","removeEventListener","componentDidLoad","visibleSlots","Number","MAX_SAFE_INTEGER","maxShownFilters","render","safeVisibleSlots","Math","max","actualNumberOfComponents","slotsToShow","min","slots","Array","from","_","i","h","class","name","Host","key","showMoreFiltersButton","onClick","disabled","variant","size","target","theme","icon"],"sources":["src/components/table-advanced-version/filter-bar/filter-bar.scss?tag=ifx-filter-bar&encapsulation=shadow","src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"sourcesContent":["/* filter-bar.scss */\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.search-container {\n  display: flex;\n  width: calc(100% - 48px); /* Adjust width to account for padding */\n  padding-left: 24px;\n  padding-right: 24px;  flex-direction: row;\n  align-items: flex-start;\n  margin-bottom: tokens.$ifxSpace200;\n}\n\n.components-container {\n  display: flex;\n  width: calc(100% - 48px); /* Adjust width to account for padding */\n  padding-left: 24px;\n  padding-right: 24px;  flex-direction: row;\n  align-items: flex-end;\n  align-content:flex-end;\n  flex-wrap: wrap;\n  gap: tokens.$ifxSpace200;\n}\n\n.filter-slot-wrapper {\n    flex-grow: 1;\n    flex-basis: 100%; \n    max-width: 100%; \n  }\n\n@media (max-width: 1024px) { /* Adjust based on your breakpoints for mid/small screens */\n    .more-filters-wrapper {\n        order: 3; /* Keeps the button at the end/new row */\n        width: 100%; /* Takes full width to allow centering */\n        display: flex; /* Enables flexbox properties */\n        justify-content: center; /* Centers the button horizontally */\n        padding-top: tokens.$ifxSpace200; /* Adds space above the button, adjust as needed */\n      }\n  }\n\n\n  @media (min-width: 720px) and (max-width: 1024px) {\n    .filter-slot-wrapper {\n        flex-basis: calc((100% - tokens.$ifxSpace200) / 2);\n        max-width: calc((100% - tokens.$ifxSpace200) / 2);\n      }\n    \n\n}\n\n  @media (min-width: 1025px) {\n    .filter-slot-wrapper {\n        flex-basis: auto; \n        max-width: 200px; \n      }\n\n    ::slotted([slot=\"filter-search\"]) {\n        max-width: 828px;\n      }\n  }\n  \n  ::slotted([slot=\"filter-search\"]) {\n    flex-grow: 1;\n    flex-basis: 100%;\n    width: 100%; \n  }","// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-bar',\n  styleUrl: 'filter-bar.scss',\n  shadow: true\n})\nexport class FilterBar {\n  @Element() el: HTMLElement;\n  @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n  @Event() ifxTopbarFilterChange: EventEmitter;\n  @State() showAllFilters: boolean = false;\n  @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n  @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n  /* If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again */\n  connectedCallback() {\n    this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n    this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n    this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  \n  componentDidLoad() {\n    this.updateVisibleSlots();\n  }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n   this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n  handleMoreFiltersClick = () => {\n    this.showAllFilters = true;\n    this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n  }\n\n  handleResetEvent = () => {\n    const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n    if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n      const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n  \n    filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n      const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n      const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n      if (searchField.length > 0) {\n        searchField.forEach((searchFieldElement: any) => {\n          searchFieldElement.value = '';\n        });\n      }\n    });\n  }\n\n    this.selectedOptions = [];\n\n    // Emit the change to inform any parent components that the filters have been reset\n    this.ifxTopbarFilterChange.emit(this.selectedOptions);\n  }\n\n\n  handleSearchChange = (event: CustomEvent) => {\n    this.handleTopbarFilterChange(event);\n  }\n\n  handleFilterSelect = (event: CustomEvent) => {\n    this.handleTopbarFilterChange(event);\n  }\n\n  handleTopbarFilterChange = (event: CustomEvent) => {\n    const newSelectedOptions = [...this.selectedOptions];\n\n    if (event.type === 'ifxFilterSearchChange') {\n      const { filterName, filterValue } = event.detail;\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        // If an existing filter is found, update its value\n        newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n      } else {\n        newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n      }\n    } else if (event.type === 'ifxFilterSelect') {\n      const { filterName, filterValues, type } = event.detail;\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n        newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n      } else {\n        newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n      }\n    }\n\n    this.selectedOptions = newSelectedOptions;\n    this.ifxTopbarFilterChange.emit(this.selectedOptions);\n  }\n\n  render() {\n    const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n    const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n     // Calculate slotsToShow safely\n    const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n    const slots = Array.from({ length: slotsToShow }, (_, i) => (\n      <div class=\"filter-slot-wrapper\">\n        <slot name={`filter-component-${i + 1}`}></slot>\n      </div>\n    ));\n\n    return (\n      <Host>\n        <div class=\"search-container\">\n          <slot name=\"filter-search\"></slot> {/* Directly place the search slot here */}\n        </div>\n        <div class=\"components-container\">\n          {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n          {this.showMoreFiltersButton && !this.showAllFilters && (\n            <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n              <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n                <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n              </ifx-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-9adea907.entry.js → p-c82d6a95.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,g as r}from"./p-c63974da.js";const a='.date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}.date__picker-input{font-family:"Source Sans 3";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}';const o=a;const s=class{constructor(i){e(this,i);this.ifxDate=t(this,"ifxDate",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.inputId=`ifx-date-picker-${++n}`;this.size="s";this.error=false;this.success=false;this.disabled=false;this.required=false}getDate(e){const t=e.target.value;const i=new Date(t);const r=i.getDate();const a=i.getMonth()+1;const o=i.getFullYear();if(!t){this.internals.setFormValue(null);this.ifxDate.emit({day:r,month:a,year:o});return}const s=this.el.shadowRoot.querySelector(".date__picker-input");s.classList.add("has-value");this.internals.setFormValue(i.toISOString().substring(0,10));this.ifxDate.emit({day:r,month:a,year:o})}handleInputFocusOnIconClick(){const e=this.el.shadowRoot.querySelector(".date__picker-input");if(e){e.focus()}}getBrowser(){if(navigator.userAgent.indexOf("Chrome")!=-1){return"Chrome"}else if(navigator.userAgent.indexOf("Opera")!=-1){return"Opera"}else if(navigator.userAgent.indexOf("MSIE")!=-1){return"IE"}else if(navigator.userAgent.indexOf("Firefox")!=-1){return"Firefox"}else{return"unknown"}}setFireFoxClasses(){const e=this.getBrowser();const t=this.el.shadowRoot.querySelector(".date__picker-input");if(e==="Firefox"){t.classList.add("firefox__classes")}else if(t.classList.contains("firefox__classes")){t.classList.remove("firefox__classes")}}componentDidLoad(){this.setFireFoxClasses();if(this.value){this.getDate({target:{value:this.value}})}}formResetCallback(){this.internals.setFormValue(null)}render(){var e,t;return i("div",{key:"8939525c9d1b6ca3d6d1d598f18c801eaa274925",class:`date__picker-container ${this.error?"error":""} ${this.disabled?"disabled":""}`},i("label",{key:"b6943a24e0b7b92826f8f0a951aa8ba07b07a602",class:"label__wrapper",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),i("div",{key:"dbb6810bec0365a771ee39feca14455d553f308f",class:`input__wrapper ${this.size==="l"?"large":"small"} ${this.disabled?"disabled":""}`},i("input",{key:"c4532643be4a7a29a9c8837787e997059bdaa7c1",type:"date",class:`date__picker-input ${this.error?"error":""} ${this.success?"success":""}`,disabled:this.disabled?true:undefined,"aria-invalid":this.error?true:undefined,"aria-label":this.AriaLabel,max:this.max,min:this.min,value:this.value,required:this.required,onChange:e=>this.getDate(e)}),i("div",{key:"401c972432d3c0a057a3fe812fa730372b12fcbe",class:"icon__wrapper",role:"button",onClick:()=>this.handleInputFocusOnIconClick()},i("ifx-icon",{key:"125529210997e8dd611e5bb394909a1cf08fc47b",icon:"calendar16","aria-hidden":"true"}))),((t=this.caption)===null||t===void 0?void 0:t.trim())&&i("div",{key:"1367a5dc715de1f7f0ea40a9995ce07a9030aae8",class:"caption__wrapper"},this.caption.trim()))}static get formAssociated(){return true}get el(){return r(this)}};let n=0;s.style=o;export{s as ifx_date_picker};
-//# sourceMappingURL=p-9adea907.entry.js.map
+import{r as e,c as i,h as t,g as r}from"./p-6b122987.js";const a='.date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}.date__picker-input{font-family:"Source Sans 3";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}';const n=a;const o=class{constructor(t){e(this,t);this.ifxDate=i(this,"ifxDate",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-date-picker-${++s}`;this.size="s";this.error=false;this.success=false;this.disabled=false;this.AriaLabel=undefined;this.value=undefined;this.max=undefined;this.min=undefined;this.required=false;this.label=undefined;this.caption=undefined}getDate(e){const i=e.target.value;const t=new Date(i);const r=t.getDate();const a=t.getMonth()+1;const n=t.getFullYear();if(!i){this.internals.setFormValue(null);this.ifxDate.emit({day:r,month:a,year:n});return}const o=this.el.shadowRoot.querySelector(".date__picker-input");o.classList.add("has-value");this.internals.setFormValue(t.toISOString().substring(0,10));this.ifxDate.emit({day:r,month:a,year:n})}handleInputFocusOnIconClick(){const e=this.el.shadowRoot.querySelector(".date__picker-input");if(e){e.focus()}}getBrowser(){if(navigator.userAgent.indexOf("Chrome")!=-1){return"Chrome"}else if(navigator.userAgent.indexOf("Opera")!=-1){return"Opera"}else if(navigator.userAgent.indexOf("MSIE")!=-1){return"IE"}else if(navigator.userAgent.indexOf("Firefox")!=-1){return"Firefox"}else{return"unknown"}}setFireFoxClasses(){const e=this.getBrowser();const i=this.el.shadowRoot.querySelector(".date__picker-input");if(e==="Firefox"){i.classList.add("firefox__classes")}else if(i.classList.contains("firefox__classes")){i.classList.remove("firefox__classes")}}componentDidLoad(){this.setFireFoxClasses();if(this.value){this.getDate({target:{value:this.value}})}}formResetCallback(){this.internals.setFormValue(null)}render(){var e,i;return t("div",{key:"8939525c9d1b6ca3d6d1d598f18c801eaa274925",class:`date__picker-container ${this.error?"error":""} ${this.disabled?"disabled":""}`},t("label",{key:"b6943a24e0b7b92826f8f0a951aa8ba07b07a602",class:"label__wrapper",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),t("div",{key:"dbb6810bec0365a771ee39feca14455d553f308f",class:`input__wrapper ${this.size==="l"?"large":"small"} ${this.disabled?"disabled":""}`},t("input",{key:"c4532643be4a7a29a9c8837787e997059bdaa7c1",type:"date",class:`date__picker-input ${this.error?"error":""} ${this.success?"success":""}`,disabled:this.disabled?true:undefined,"aria-invalid":this.error?true:undefined,"aria-label":this.AriaLabel,max:this.max,min:this.min,value:this.value,required:this.required,onChange:e=>this.getDate(e)}),t("div",{key:"401c972432d3c0a057a3fe812fa730372b12fcbe",class:"icon__wrapper",role:"button",onClick:()=>this.handleInputFocusOnIconClick()},t("ifx-icon",{key:"125529210997e8dd611e5bb394909a1cf08fc47b",icon:"calendar16","aria-hidden":"true"}))),((i=this.caption)===null||i===void 0?void 0:i.trim())&&t("div",{key:"1367a5dc715de1f7f0ea40a9995ce07a9030aae8",class:"caption__wrapper"},this.caption.trim()))}static get formAssociated(){return true}get el(){return r(this)}};let s=0;o.style=n;export{o as ifx_date_picker};
+//# sourceMappingURL=p-c82d6a95.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["datePickerCss","IfxDatePickerStyle0","DatePicker","this","inputId","datePickerId","getDate","e","inputValue","target","value","selectedDate","Date","day","month","getMonth","year","getFullYear","internals","setFormValue","ifxDate","emit","input","el","shadowRoot","querySelector","classList","add","toISOString","substring","handleInputFocusOnIconClick","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","contains","remove","componentDidLoad","formResetCallback","render","h","key","class","error","disabled","htmlFor","_a","label","trim","size","type","success","undefined","AriaLabel","max","min","required","onChange","role","onClick","icon","_b","caption"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() AriaLabel: string;\n  @Prop() value: string;\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n      \n    if (!inputValue) {\n      this.internals.setFormValue(null);\n      this.ifxDate.emit({day, month, year});\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    this.ifxDate.emit({day, month, year})\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if(input) { \n      input.focus()\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  componentDidLoad() { \n    this.setFireFoxClasses()\n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n        { this.label?.trim() }\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type=\"date\"\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.AriaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,g as n}from"./p-6b122987.js";const a='.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=a;const o=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.itemPosition=undefined}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren()}componentDidLoad(){if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot");if(e.toLowerCase()==="mobile-menu-top"||e.toLowerCase()==="second__layer"){this.openSubLayerMenu()}if(!this.internalHref&&e.toLowerCase()!=="mobile-menu-top"&&e.toLowerCase()!=="second__layer"){const e=this.getItemMenu();if(this.hasChildNavItems){const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();if(e.type.toUpperCase()==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(e.type.toUpperCase()==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}render(){return i("div",{key:"6ff7d6a2325d44e4fdbcbdda8fd299890a080237",class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"f39e9887ee956d9e35e8c8ea058a769d91355e43",class:"sub__layer-back-button"},i("div",{key:"7a5df0bdee1cc4c3cd6529d4f0acbf7c0bd1b8d9",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"43f69fe60182744438d49827344e68ff095d92dc",icon:"arrow-left-16"}),i("span",{key:"b6d292fccd3c2e8e539bbf8b37f456732236d847"},"Back"))),i("a",{key:"7f51f40c4bdbfee4738ee87d9b6abb0baee777a0",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"6cdec578af960350371c7d2ce65512e499cc39cd",class:"inner__content-wrapper"},i("div",{key:"4432784789f1ea5bda62fa4c840f42be8a8c2c74",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"75937d113caa0480e934c0960778c51a82d94eb5",icon:this.icon})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"411a240382cdccc5857bfd3d3232fda11dece2eb",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"a3d6fb775527a0d896da3d26577bfa909e97fd57",icon:"chevron-left-12"})),i("span",{key:"fc2307f8e62ae20727b76526ef661839465c4378",class:"label__wrapper"},i("slot",{key:"35fa2c5762cc7676146407f03986b6e65aacf356"}))),i("div",{key:"7bc21e2370abfeb56e2c551b07ac40e7dcf34cd7",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"84154f7bebb4fbf3cdf992e3c1e3fb3f898e3479",icon:"chevron-down-12"})),i("div",{key:"872ad6a50578420c5fcfe990e328911df2cec8fa",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"5b1f1bb38a1b7a784c6f90161e923b6055a380b9",icon:"chevron-right-12"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"f093cbb3bd72ad2062a1f5faca60f3402d582611",class:"navbar-menu"}," ",i("slot",{key:"9f100a38d2e8b1062c6d01263bddf452a0d962c3",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"fa0e103d8b61280dd9d525daa4da1b344f050345",class:"sub__layer-menu"}," ",i("slot",{key:"5d01536bedd1abb83dcc9805935584b01834581e",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
+//# sourceMappingURL=p-caff080b.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["navbarItemCss","IfxNavbarItemStyle0","NavbarItem","handleOutsideClick","event","path","composedPath","itemMenu","this","getItemMenu","classList","contains","includes","el","closeItemMenu","hideComponent","style","display","showComponent","toggleChildren","action","arrowIcon","getChevronDownIconWrapper","handleClassList","moveChildComponentsIntoSubLayerMenu","subLayerMenu","subLayerMenuIsOpened","navbarItem","getNavBarItem","subLayerBackButton","getSubLayerBackButton","ifxNavItem","emit","component","navItems","querySelectorAll","isSidebarMenuItem","i","length","setAttribute","sublayerBackButton","shadowRoot","querySelector","toggleFirstLayerItem","actionOne","actionTwo","secondLayerMenu","getSubLayerMenu","openSubLayerMenu","hasChildNavItems","rightArrowIcon","getRightArrowIcon","slotName","getAttribute","toLowerCase","parent","parentElement","addMenuItemClass","moveChildComponentsBackIntoNavbar","returnToFirstLayer","menuItemRightIconWrapper","componentWillLoad","setHref","checkIfItemIsNested","checkIfItemHasChildren","componentDidLoad","getNavbarItems","relocateItemsToFirstlayer","componentDidUpdate","isLayerItemParent","setMenuItemPosition","isMenuItem","menuPosition","getItemMenuPosition","itemPosition","type","className","navItem","forEach","item","href","trim","internalHref","undefined","tagName","toUpperCase","sidebarItems","setItemSideSpecifications","menuItem","slotValue","menu","slot","getRootNode","host","toggleItemMenu","handleNestedLayerMenu","e","render","h","key","class","onMouseLeave","onMouseEnter","onClick","icon","target","showLabel","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n\n.navbar__item {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px 8px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family);\n  text-decoration: none;\n  font-weight: 400;\n  font-size: 16px;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.hide { \n    display: none;\n  }\n\n  &.isParent { \n    gap: 8px;\n  }\n\n  & .navItemIconWrapper { \n    transition: .3s;\n  }\n\n  &.open { \n    & .navItemIconWrapper { \n      transform: rotate(-180deg);\n      transition: .3s;\n    }\n  }\n\n  &:hover {\n    color: tokens.$ifxColorOcean500;\n    cursor: pointer;\n\n    & .username__tooltip { \n      display: block;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper { \n      & .initials__wrapper { \n        cursor: pointer;\n        background-color: tokens.$ifxColorOcean600;\n      }\n    }\n  }\n\n  &.remove {\n    display: none;\n  }\n\n  &.removeLabel {\n    & .label__wrapper {\n      display: none;\n    }\n  }\n\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px;\n    gap: 8px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n\n    & .username__tooltip { \n      display: none;\n      position: absolute;\n      top: 35px;\n      right: 0;\n      text-wrap: nowrap;\n      padding: 1px 5px;\n      font-size: 13px;\n      font-family: \"Source Sans 3\";\n      background-color: black;\n      color: #fff;\n      z-index: 99;\n    }\n\n    &:hover { \n      & .username__tooltip { \n        display: block;\n      }\n    }\n\n    & .initials__wrapper { \n      display: flex;\n      width: 24px;\n      height: 24px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100%;\n      background-color: tokens.$ifxColorOcean500;\n\n      & .initials { \n        color: #FFF;\n        text-align: center;\n        font-family: \"Source Sans 3\";\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 20px; \n\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -khtml-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      \n      }\n    }\n\n    & img { \n      width: 24px; \n      height: 24px;\n      border-radius: 100%;\n    }\n\n    &.removeWrapper {\n      display: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n}\n\n.container { \n  position: relative;\n\n  & .sub__layer-back-button { \n    display: none;\n    &.show { \n      display: flex;\n      justify-content: flex-start;\n\n      & .back__button-wrapper { \n        display: flex;\n        align-items: center;\n        gap: tokens.$ifxSpace100;\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n        color: tokens.$ifxColorOcean500;\n        font-size: 16px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 24px;\n\n        & span, & ifx-icon { \n          &:hover { \n            cursor: pointer;\n          }\n        }\n\n      }\n    }\n  }\n\n  &.hide { \n    display: none;\n  }\n\n  & .inner__content-wrapper { \n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    &.no-gap { \n      gap: 0px;\n    }\n  }\n}\n\n.navbar-menu  {\n  position: absolute;\n  display: none;\n  list-style-type: none;\n  visibility: visible;\n  flex-direction: column;\n  width: 224px;\n  min-width: 224px;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: var(--ifx-font-family);\n\n  &.open:not(.itemInMobileMenu) {\n    display: flex;\n  }\n\n  &.itemInMobileMenu { \n    display: none;\n  }\n\n  &.right { \n    left: 100%;\n    top: -40%;\n  }\n\n  &.left { \n    top: -40%;\n    right: 100%;\n  }\n\n  &.rightSideItemMenu { \n    left: initial;\n    right: 0px;\n  }\n}\n\n.navbar__item { \n    &.layer__item-parent { \n      color: tokens.$ifxColorBaseBlack;\n      font-size: 24px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 32px; \n      letter-spacing: -0.24px;\n      cursor: initial;\n\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \n        & ifx-icon { \n          & svg { \n            width: 24px;\n            height: 24px;\n          }\n        }\n      }\n    }\n\n\n  &.sidebarMenuItem { \n    justify-content: space-between;\n    padding: 0;\n  }\n\n\n  &.menuItem {\n    text-decoration: none;\n    color: tokens.$ifxColorBaseBlack;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    gap: 8px;\n    font-family: var(--ifx-font-family);\n  \n    &.hide {\n      display: none;\n    }\n  \n    & .label__wrapper {\n      color: tokens.$ifxColorBaseBlack;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n  \n    &:hover {\n      cursor: pointer;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  \n    &:active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n}\n\n.sub__layer-menu { \n  padding: 5px;\n  display: none;\n\n  &.remove__margin { \n    margin: 0;\n    padding: 0;\n  }\n \n  &.open { \n    display: block;\n  }\n}\n\n.navbar__item { \n  &.hide { \n    display: none;\n  }\n}\n\n.menuItemRightIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n.navItemIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-item',\n  styleUrl: 'navbar-item.scss',\n  shadow: true\n})\n\nexport class NavbarItem {\n\n  @Element() el;\n  @Prop() showLabel: boolean = true;\n  @Prop() icon: string = \"\"\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() hideOnMobile: boolean = true;\n  @State() internalHref: string = \"\"\n  @State() isMenuItem: boolean = false;\n  @State() hasChildNavItems: boolean = false;\n  @State() isSidebarMenuItem: boolean = false;\n  @State() itemPosition: string;\n  @Event() ifxNavItem: EventEmitter;\n \n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const itemMenu = this.getItemMenu()\n    if(itemMenu) { \n      if(itemMenu.classList.contains('open')) { \n        if (!path.includes(this.el)) {\n          this.closeItemMenu();\n        }\n      }\n    }\n  }\n\n  @Method()\n  async hideComponent() { \n    this.el.style.display = 'none';\n  }\n\n  @Method()\n  async showComponent() { \n    this.el.style.display = '';\n  }\n\n  @Method()\n  async toggleChildren(action) { \n    const itemMenu = this.getItemMenu()\n    const arrowIcon = this.getChevronDownIconWrapper()\n    if(itemMenu) { \n      this.handleClassList(arrowIcon, action, 'hide')\n      this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsIntoSubLayerMenu() { \n    const subLayerMenu = this.getItemMenu()\n    if(subLayerMenu) { \n      const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n      if(subLayerMenuIsOpened) { \n        const navbarItem = this.getNavBarItem()\n        const subLayerBackButton = this.getSubLayerBackButton()\n        this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n        this.handleClassList(subLayerBackButton, 'add', 'show')\n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n\n    const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n    this.isSidebarMenuItem = true;\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'second__layer')\n      navItems[i].moveChildComponentsIntoSubLayerMenu()\n    }\n  }\n\n  getSubLayerBackButton() { \n    const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n    return sublayerBackButton\n  }\n\n  @Method()\n  async toggleFirstLayerItem(actionOne, actionTwo) { \n   const navbarItem = this.getNavBarItem()\n   const secondLayerMenu = this.getSubLayerMenu()\n   const subLayerBackButton = this.getSubLayerBackButton()\n   this.handleClassList(subLayerBackButton, [actionOne], 'show')\n   this.handleClassList(navbarItem, [actionTwo], 'hide')\n   this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n  }\n\n  openSubLayerMenu() { \n    if(this.hasChildNavItems) { \n      const subLayerBackButton = this.getSubLayerBackButton()\n      const rightArrowIcon = this.getRightArrowIcon()\n      const navbarItem = this.getNavBarItem()\n      const subLayerMenu = this.getSubLayerMenu()\n      const slotName = this.el.getAttribute('slot')\n\n      this.handleClassList(subLayerBackButton, 'add', 'show')\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n      this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n      this.handleClassList(subLayerMenu, 'add', 'open')\n    \n      if(slotName.toLowerCase() === 'second__layer') {\n        this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n        this.handleClassList(navbarItem, 'remove', 'menuItem')\n      } else { \n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n  }\n\n  @Method()\n  async addMenuItemClass() { \n    const navbarItem = this.getNavBarItem()\n    this.handleClassList(navbarItem, 'add', 'menuItem')\n    const rightArrowIcon = this.getRightArrowIcon()\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsBackIntoNavbar() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const secondLayerMenu = this.getSubLayerMenu()\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n    this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n    const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n    this.isSidebarMenuItem = false;\n    this.showComponent()\n    this.handleClassList(navbarItem, 'remove', 'hide')\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'first__layer')\n      navItems[i].moveChildComponentsBackIntoNavbar()\n      navItems[i].addMenuItemClass()\n      navItems[i].returnToFirstLayer()\n    }\n  }\n\n  getRightArrowIcon() { \n    const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n    return menuItemRightIconWrapper;\n  }\n\n  getChevronDownIconWrapper() { \n    const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n    return arrowIcon;\n  }\n\n  @Method()\n  async returnToFirstLayer() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const rightArrowIcon = this.getRightArrowIcon()\n    const subLayerMenu = this.getSubLayerMenu()\n    const slotName = this.el.getAttribute('slot')\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(subLayerMenu, 'remove', 'open')\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n\n    if(slotName.toLowerCase() === 'second__layer') {\n      this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n      this.handleClassList(navbarItem, 'add', 'menuItem')\n    } else { \n      this.ifxNavItem.emit({component: this.el, action: 'return'})\n    }\n  }\n\n  componentWillLoad() {\n    this.setHref()\n    this.checkIfItemIsNested()\n    this.checkIfItemHasChildren()\n  }\n\n  componentDidLoad() { \n    if(this.hasChildNavItems) { \n      const navItems = this.getNavbarItems();\n      this.relocateItemsToFirstlayer(navItems)\n    }\n  }\n\n  componentDidUpdate() { \n    const navbarItem = this.getNavBarItem()\n    const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n    if(this.isSidebarMenuItem && isLayerItemParent) {\n      const rightArrowIcon = this.getRightArrowIcon()\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n    }\n  }\n \n  @Method()\n  async setMenuItemPosition() { \n    if(this.isMenuItem && this.hasChildNavItems) { \n      const menuPosition = this.getItemMenuPosition()\n      if(menuPosition === 'left') { \n        this.itemPosition = 'left'\n      } else if(menuPosition === 'right') { \n        this.itemPosition = 'right'\n      }\n    }\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getNavbarItems() {\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\n    return navItems;\n  }\n  \n  getNavBarItem() { \n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n    return navItem;\n  }\n\n  getSubLayerMenu() { \n    const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n    return subLayerMenu;\n  }\n\n  relocateItemsToFirstlayer(navItems) { \n     navItems.forEach(item => {\n      item.setAttribute('slot', 'first__layer')\n    })\n  }\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  checkIfItemIsNested() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n    || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n      this.isMenuItem = true;\n      return;\n    } else {\n      this.isMenuItem = false;\n    }\n  }\n\n  checkIfItemHasChildren() { \n    const sidebarItems = this.getNavbarItems();\n    if (sidebarItems.length !== 0) {\n      this.hasChildNavItems = true;\n    } else {\n      this.hasChildNavItems = false;\n    } \n  }\n\n  @Method()\n  async setItemSideSpecifications() {  \n    const menuItem = this.el;\n    const itemMenu = this.getItemMenu()\n    const slotValue = menuItem.getAttribute('slot')\n \n    if(slotValue.toLowerCase().trim() === \"right-item\") { \n      this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n    }\n\n    return true;\n  }\n\n  getItemMenu() { \n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n    return menu;\n  }\n\n  closeItemMenu() { \n    const itemMenu = this.getItemMenu()\n    const menuItem = this.getNavBarItem()\n    if(itemMenu) { \n      this.handleClassList(itemMenu, 'remove', 'open')\n      this.handleClassList(menuItem, 'remove', 'open')\n    }\n  }\n\n  getItemMenuPosition() {\n    let parentElement = this.el;\n    while(parentElement) {\n      if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {\n        return 'left'\n      }\n      parentElement = parentElement.parentElement || parentElement.getRootNode().host;\n    }\n    return 'right'\n  }\n  \n  toggleItemMenu() {\n    const slotName = this.el.getAttribute('slot')\n\n    if(slotName.toLowerCase() === 'mobile-menu-top' || slotName.toLowerCase() === 'second__layer') { \n      this.openSubLayerMenu()\n    }\n\n    if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) {   \n      const itemMenu = this.getItemMenu()\n    \n      if(this.hasChildNavItems) { \n        const menuItem = this.getNavBarItem()\n        this.handleClassList(itemMenu, 'toggle', 'open');\n        this.handleClassList(menuItem, 'toggle', 'open');\n      } \n    }\n  }\n\n  handleNestedLayerMenu(e) { \n    if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n      const itemMenu = this.getItemMenu()\n      const menuPosition = this.getItemMenuPosition()\n      if(e.type.toUpperCase() === 'MOUSEENTER') { \n        this.handleClassList(itemMenu, 'add', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'add', 'left')\n        } else if(menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'add', 'right')\n        }\n      }\n\n      if(e.type.toUpperCase() === 'MOUSELEAVE') { \n        this.handleClassList(itemMenu, 'remove', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'remove', 'left')\n        } else if (menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'remove', 'right')\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)}  onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n        <div class=\"sub__layer-back-button\">\n          <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n            <ifx-icon icon=\"arrow-left-16\" />\n            <span>Back</span>\n          </div>\n        </div>\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n          <div class=\"inner__content-wrapper\">\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n              {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n            </div>\n\n            {this.itemPosition === 'left' \n            && this.hasChildNavItems \n            && this.isMenuItem && \n            <div class=\"menuItemLeftIconWrapper\">\n                <ifx-icon icon=\"chevron-left-12\" />\n            </div>}\n\n            <span class=\"label__wrapper\">\n              <slot />\n            </span>\n          </div>\n\n          <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-down-12\" />\n          </div>\n          \n         {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-right-12\" />\n          </div>}\n        </a>\n        \n        {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n        {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n      </div>\n    )\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAgB,07IACtB,MAAAC,EAAeD,E,MCOFE,EAAU,M,+EAGQ,K,UACN,G,UACA,G,YACE,Q,kBACO,K,kBACA,G,gBACD,M,sBACM,M,uBACC,M,4BAKtC,kBAAAC,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,MAAMC,EAAWC,KAAKC,cACtB,GAAGF,EAAU,CACX,GAAGA,EAASG,UAAUC,SAAS,QAAS,CACtC,IAAKN,EAAKO,SAASJ,KAAKK,IAAK,CAC3BL,KAAKM,e,IAOb,mBAAMC,GACJP,KAAKK,GAAGG,MAAMC,QAAU,M,CAI1B,mBAAMC,GACJV,KAAKK,GAAGG,MAAMC,QAAU,E,CAI1B,oBAAME,CAAeC,GACnB,MAAMb,EAAWC,KAAKC,cACtB,MAAMY,EAAYb,KAAKc,4BACvB,GAAGf,EAAU,CACXC,KAAKe,gBAAgBF,EAAWD,EAAQ,QACxCZ,KAAKe,gBAAgBhB,EAAUa,EAAQ,mB,EAK3C,yCAAMI,GACJ,MAAMC,EAAejB,KAAKC,cAC1B,GAAGgB,EAAc,CACf,MAAMC,EAAuBlB,KAAKe,gBAAgBE,EAAc,WAAY,QAC5E,GAAGC,EAAsB,CACvB,MAAMC,EAAanB,KAAKoB,gBACxB,MAAMC,EAAqBrB,KAAKsB,wBAChCtB,KAAKe,gBAAgBI,EAAY,MAAO,sBACxCnB,KAAKe,gBAAgBM,EAAoB,MAAO,QAChDrB,KAAKuB,WAAWC,KAAK,CAACC,UAAWzB,KAAKK,GAAIO,OAAQ,kB,EAItD,MAAMc,EAAW1B,KAAKK,GAAGsB,iBAAiB,yBAC1C3B,KAAK4B,kBAAoB,KAEzB,IAAI,IAAIC,EAAI,EAAGA,EAAIH,EAASI,OAAQD,IAAK,CACvCH,EAASG,GAAGE,aAAa,OAAQ,iBACjCL,EAASG,GAAGb,qC,EAIhB,qBAAAM,GACE,MAAMU,EAAqBhC,KAAKK,GAAG4B,WAAWC,cAAc,2BAC5D,OAAOF,C,CAIT,0BAAMG,CAAqBC,EAAWC,GACrC,MAAMlB,EAAanB,KAAKoB,gBACxB,MAAMkB,EAAkBtC,KAAKuC,kBAC7B,MAAMlB,EAAqBrB,KAAKsB,wBAChCtB,KAAKe,gBAAgBM,EAAoB,CAACe,GAAY,QACtDpC,KAAKe,gBAAgBI,EAAY,CAACkB,GAAY,QAC9CrC,KAAKe,gBAAgBuB,EAAiB,CAACD,GAAY,iB,CAGpD,gBAAAG,GACE,GAAGxC,KAAKyC,iBAAkB,CACxB,MAAMpB,EAAqBrB,KAAKsB,wBAChC,MAAMoB,EAAiB1C,KAAK2C,oBAC5B,MAAMxB,EAAanB,KAAKoB,gBACxB,MAAMH,EAAejB,KAAKuC,kBAC1B,MAAMK,EAAW5C,KAAKK,GAAGwC,aAAa,QAEtC7C,KAAKe,gBAAgBM,EAAoB,MAAO,QAChDrB,KAAKe,gBAAgB2B,EAAgB,MAAO,QAC5C1C,KAAKe,gBAAgBI,EAAY,MAAO,sBACxCnB,KAAKe,gBAAgBE,EAAc,MAAO,QAE1C,GAAG2B,EAASE,gBAAkB,gBAAiB,CAC7C9C,KAAKuB,WAAWC,KAAK,CAACC,UAAWzB,KAAKK,GAAI0C,OAAQ/C,KAAKK,GAAG2C,cAAepC,OAAQ,oBACjFZ,KAAKe,gBAAgBI,EAAY,SAAU,W,KACtC,CACLnB,KAAKuB,WAAWC,KAAK,CAACC,UAAWzB,KAAKK,GAAIO,OAAQ,kB,GAMxD,sBAAMqC,GACJ,MAAM9B,EAAanB,KAAKoB,gBACxBpB,KAAKe,gBAAgBI,EAAY,MAAO,YACxC,MAAMuB,EAAiB1C,KAAK2C,oBAC5B,GAAG3C,KAAKyC,iBAAkB,CACxBzC,KAAKe,gBAAgB2B,EAAgB,SAAU,O,EAKnD,uCAAMQ,GACJ,MAAM7B,EAAqBrB,KAAKsB,wBAChC,MAAMH,EAAanB,KAAKoB,gBACxB,MAAMkB,EAAkBtC,KAAKuC,kBAE7BvC,KAAKe,gBAAgBM,EAAoB,SAAU,QACnDrB,KAAKe,gBAAgBI,EAAY,SAAU,sBAC3CnB,KAAKe,gBAAgBuB,EAAiB,SAAU,kBAEhDtC,KAAKuB,WAAWC,KAAK,CAACC,UAAWzB,KAAKK,GAAIO,OAAQ,SAElD,MAAMc,EAAW1B,KAAKK,GAAGsB,iBAAiB,0BAC1C3B,KAAK4B,kBAAoB,MACzB5B,KAAKU,gBACLV,KAAKe,gBAAgBI,EAAY,SAAU,QAE3C,IAAI,IAAIU,EAAI,EAAGA,EAAIH,EAASI,OAAQD,IAAK,CACvCH,EAASG,GAAGE,aAAa,OAAQ,gBACjCL,EAASG,GAAGqB,oCACZxB,EAASG,GAAGoB,mBACZvB,EAASG,GAAGsB,oB,EAIhB,iBAAAR,GACE,MAAMS,EAA2BpD,KAAKK,GAAG4B,WAAWC,cAAc,6BAClE,OAAOkB,C,CAGT,yBAAAtC,GACE,MAAMD,EAAYb,KAAKK,GAAG4B,WAAWC,cAAc,uBACnD,OAAOrB,C,CAIT,wBAAMsC,GACJ,MAAM9B,EAAqBrB,KAAKsB,wBAChC,MAAMH,EAAanB,KAAKoB,gBACxB,MAAMsB,EAAiB1C,KAAK2C,oBAC5B,MAAM1B,EAAejB,KAAKuC,kBAC1B,MAAMK,EAAW5C,KAAKK,GAAGwC,aAAa,QAEtC7C,KAAKe,gBAAgBM,EAAoB,SAAU,QACnDrB,KAAKe,gBAAgBI,EAAY,SAAU,sBAC3CnB,KAAKe,gBAAgBE,EAAc,SAAU,QAC7C,GAAGjB,KAAKyC,iBAAkB,CACxBzC,KAAKe,gBAAgB2B,EAAgB,SAAU,O,CAGjD,GAAGE,EAASE,gBAAkB,gBAAiB,CAC7C9C,KAAKuB,WAAWC,KAAK,CAACC,UAAWzB,KAAKK,GAAI0C,OAAQ/C,KAAKK,GAAG2C,cAAepC,OAAQ,wBACjFZ,KAAKe,gBAAgBI,EAAY,MAAO,W,KACnC,CACLnB,KAAKuB,WAAWC,KAAK,CAACC,UAAWzB,KAAKK,GAAIO,OAAQ,U,EAItD,iBAAAyC,GACErD,KAAKsD,UACLtD,KAAKuD,sBACLvD,KAAKwD,wB,CAGP,gBAAAC,GACE,GAAGzD,KAAKyC,iBAAkB,CACxB,MAAMf,EAAW1B,KAAK0D,iBACtB1D,KAAK2D,0BAA0BjC,E,EAInC,kBAAAkC,GACE,MAAMzC,EAAanB,KAAKoB,gBACxB,MAAMyC,EAAoB7D,KAAKe,gBAAgBI,EAAY,WAAY,sBACvE,GAAGnB,KAAK4B,mBAAqBiC,EAAmB,CAC9C,MAAMnB,EAAiB1C,KAAK2C,oBAC5B3C,KAAKe,gBAAgB2B,EAAgB,MAAO,O,EAKhD,yBAAMoB,GACJ,GAAG9D,KAAK+D,YAAc/D,KAAKyC,iBAAkB,CAC3C,MAAMuB,EAAehE,KAAKiE,sBAC1B,GAAGD,IAAiB,OAAQ,CAC1BhE,KAAKkE,aAAe,M,MACf,GAAGF,IAAiB,QAAS,CAClChE,KAAKkE,aAAe,O,GAK1B,eAAAnD,CAAgBV,EAAI8D,EAAMC,GACxB/D,EAAGH,UAAUiE,GAAMC,GACnB,GAAID,IAAS,WAAY,CACvB,OAAO9D,EAAGH,UAAUC,SAASiE,E,EAIjC,cAAAV,GACE,MAAMhC,EAAW1B,KAAKK,GAAGsB,iBAAiB,mBAC1C,OAAOD,C,CAGT,aAAAN,GACE,MAAMiD,EAAUrE,KAAKK,GAAG4B,WAAWC,cAAc,iBACjD,OAAOmC,C,CAGT,eAAA9B,GACE,MAAMtB,EAAejB,KAAKK,GAAG4B,WAAWC,cAAc,oBACtD,OAAOjB,C,CAGT,yBAAA0C,CAA0BjC,GACvBA,EAAS4C,SAAQC,IAChBA,EAAKxC,aAAa,OAAQ,eAAe,G,CAI7C,OAAAuB,GACE,GAAItD,KAAKwE,KAAK1B,cAAc2B,SAAW,GAAI,CACzCzE,KAAK0E,aAAeC,S,MACf3E,KAAK0E,aAAe1E,KAAKwE,I,CAGlC,mBAAAjB,GACE,MAAMP,EAAgBhD,KAAKK,GAAG2C,cAC9B,GAAIA,EAAc4B,QAAQC,gBAAkB,mBACzC7B,EAAc4B,QAAQC,gBAAkB,qBAAsB,CAC/D7E,KAAK+D,WAAa,KAClB,M,KACK,CACL/D,KAAK+D,WAAa,K,EAItB,sBAAAP,GACE,MAAMsB,EAAe9E,KAAK0D,iBAC1B,GAAIoB,EAAahD,SAAW,EAAG,CAC7B9B,KAAKyC,iBAAmB,I,KACnB,CACLzC,KAAKyC,iBAAmB,K,EAK5B,+BAAMsC,GACJ,MAAMC,EAAWhF,KAAKK,GACtB,MAAMN,EAAWC,KAAKC,cACtB,MAAMgF,EAAYD,EAASnC,aAAa,QAExC,GAAGoC,EAAUnC,cAAc2B,SAAW,aAAc,CAClDzE,KAAKe,gBAAgBhB,EAAU,MAAO,oB,CAGxC,OAAO,I,CAGT,WAAAE,GACE,MAAMiF,EAAOlF,KAAKK,GAAG4B,WAAWC,cAAc,gBAC9C,OAAOgD,C,CAGT,aAAA5E,GACE,MAAMP,EAAWC,KAAKC,cACtB,MAAM+E,EAAWhF,KAAKoB,gBACtB,GAAGrB,EAAU,CACXC,KAAKe,gBAAgBhB,EAAU,SAAU,QACzCC,KAAKe,gBAAgBiE,EAAU,SAAU,O,EAI7C,mBAAAf,GACE,IAAIjB,EAAgBhD,KAAKK,GACzB,MAAM2C,EAAe,CACnB,GAAGA,EAAc4B,UAAY,sBAAwB5B,EAAcmC,OAAS,aAAc,CACxF,MAAO,M,CAETnC,EAAgBA,EAAcA,eAAiBA,EAAcoC,cAAcC,I,CAE7E,MAAO,O,CAGT,cAAAC,GACE,MAAM1C,EAAW5C,KAAKK,GAAGwC,aAAa,QAEtC,GAAGD,EAASE,gBAAkB,mBAAqBF,EAASE,gBAAkB,gBAAiB,CAC7F9C,KAAKwC,kB,CAGP,IAAIxC,KAAK0E,cAAgB9B,EAASE,gBAAkB,mBAAqBF,EAASE,gBAAkB,gBAAkB,CACpH,MAAM/C,EAAWC,KAAKC,cAEtB,GAAGD,KAAKyC,iBAAkB,CACxB,MAAMuC,EAAWhF,KAAKoB,gBACtBpB,KAAKe,gBAAgBhB,EAAU,SAAU,QACzCC,KAAKe,gBAAgBiE,EAAU,SAAU,O,GAK/C,qBAAAO,CAAsBC,GACpB,GAAGxF,KAAK+D,YAAc/D,KAAKyC,mBAAqBzC,KAAK4B,kBAAmB,CACtE,MAAM7B,EAAWC,KAAKC,cACtB,MAAM+D,EAAehE,KAAKiE,sBAC1B,GAAGuB,EAAErB,KAAKU,gBAAkB,aAAc,CACxC7E,KAAKe,gBAAgBhB,EAAU,MAAO,QACtC,GAAGiE,IAAiB,OAAQ,CAC1BhE,KAAKe,gBAAgBhB,EAAU,MAAO,O,MACjC,GAAGiE,IAAiB,QAAS,CAClChE,KAAKe,gBAAgBhB,EAAU,MAAO,Q,EAI1C,GAAGyF,EAAErB,KAAKU,gBAAkB,aAAc,CACxC7E,KAAKe,gBAAgBhB,EAAU,SAAU,QACzC,GAAGiE,IAAiB,OAAQ,CAC1BhE,KAAKe,gBAAgBhB,EAAU,SAAU,O,MACpC,GAAIiE,IAAiB,QAAS,CACnChE,KAAKe,gBAAgBhB,EAAU,SAAU,Q,IAMjD,MAAA0F,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YAAYC,aAAcL,GAAKxF,KAAKuF,sBAAsBC,GAAKM,aAAcN,GAAKxF,KAAKuF,sBAAsBC,IACtHE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBAAuBG,QAAS,IAAM/F,KAAKmD,sBACpDuC,EAAA,YAAAC,IAAA,2CAAUK,KAAK,kBACfN,EAAA,QAAAC,IAAA,sDAGJD,EAAA,KAAAC,IAAA,2CAAGnB,KAAMxE,KAAK0E,aAAcuB,OAAQjG,KAAKiG,OAAQF,QAAS,IAAM/F,KAAKsF,iBAAkBM,MAAU,gBAAgB5F,KAAK4B,kBAAoB,kBAAoB,OAAO5B,KAAKkG,UAAY,cAAgB,MAAMlG,KAAK+D,WAAa,WAAa,MAAM/D,KAAKyC,iBAAmB,WAAa,MACpRiD,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iEAAiE5F,KAAKgG,KAAO,gBAAkB,MACxGhG,KAAKgG,MAAQN,EAAA,YAAAC,IAAA,2CAAUK,KAAMhG,KAAKgG,QAGpChG,KAAKkE,eAAiB,QACpBlE,KAAKyC,kBACLzC,KAAK+D,YACR2B,EAAA,OAAAC,IAAA,2CAAKC,MAAM,2BACPF,EAAA,YAAAC,IAAA,2CAAUK,KAAK,qBAGnBN,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBACVF,EAAA,QAAAC,IAAA,+CAIJD,EAAA,OAAAC,IAAA,2CAAKC,MAAO,sBAAsB5F,KAAKyC,mBAAqBzC,KAAK+D,aAAe/D,KAAK4B,kBAAoB,GAAK,UAC5G8D,EAAA,YAAAC,IAAA,2CAAUK,KAAK,qBAGjBN,EAAA,OAAAC,IAAA,2CAAKC,MAAO,4BAA8B5F,KAAKkE,eAAiB,SAAWlE,KAAKyC,kBAAoBzC,KAAK+D,YAAgB/D,KAAK4B,mBAAqB5B,KAAKyC,iBAAqB,GAAK,UAChLiD,EAAA,YAAAC,IAAA,2CAAUK,KAAK,uBAIlBhG,KAAKyC,mBAAqBzC,KAAK4B,mBAAqB8D,EAAA,MAAAC,IAAA,2CAAIC,MAAM,eAAa,IAAEF,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,iBAAiB,KACzGnG,KAAK4B,mBAAqB8D,EAAA,MAAAC,IAAA,2CAAIC,MAAM,mBAAiB,IAAEF,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,kBAAkB,K","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-0179cb3c.entry.js → p-ce413596.entry.js}

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

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

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

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

@@ -0,0 +1,2 @@
+import{r as t,h as o,g as i}from"./p-6b122987.js";import{c as e}from"./p-e459974a.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}';const a=s;const l=class{constructor(o){t(this,o);this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.icon=undefined}componentWillLoad(){if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=e(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const i=window.scrollX;const e=t.top+o+t.height/2;const s=t.left+i+t.width/2;if(this.position==="auto"){if(e>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const i={"tooltip-compact":true,visible:this.tooltipVisible};const e={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"246f0b291e39bbe49ebea1eed9827400f22bb680","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"a16771de825d12d46661be2ecb61ce8326e25794"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"974e0fdbf389fcce6cc34eccb897b188f0413eea",class:t},o("button",{key:"a777e5a63134c07f4330d790044a7aafdb63a83c","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"69cc351f97d892f98cf8bc3df48d2877129e4238",icon:"cross16"})),o("div",{key:"5db6f0ceff12be22d6de58767bab509b67dd9ff8",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"22fd94a588780e413dc04dcc126380b5b382fde6",class:"tooltip-dismissible-header"},this.header),o("div",{key:"abd4158d18a1c57dda508caddcdb1be945a8efd2",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"1bcd11086f4922c03532c99b2dd1618b862af68b",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"5dfac1fa79d7204b1f0770ed243cdbadfc14fdd9",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"a52aec447163df16d86d14f96d74501c45266e2a",class:i},this.text,o("svg",{key:"c28c49ee4446d73b366bb68280ddf5b9192cc79a",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"2de515ea4344c728a1da4b368c93c7ade11badcb",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"9e3186e4856770c831d0422bce64b131c64f55f0",class:e},o("slot",{key:"089640249dbfcf8eed4525615d6e289955304e09",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"eab4f9af96d154a289bec83673db47d3580c267d",class:"tooltip-extended-content"},this.header&&o("div",{key:"810497a167351bef22a9e61050264032be295455",class:"tooltip-extended-header"},this.header),o("div",{key:"802dbe5e093b9d69b9155e188d35a421b2ca0c2e",class:"tooltip-extended-body"},this.text)),o("svg",{key:"ff19a79905e5ea4af628364a254e03e022a08a3d",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"557540e1fd91ad15580011ddf37a4cd25a8a6ae3",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return i(this)}static get watchers(){return{position:["positionChanged"]}}};l.style=a;export{l as ifx_tooltip};
+//# sourceMappingURL=p-d101e5a0.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipCss","IfxTooltipStyle0","Tooltip","this","popperInstance","onMouseEnter","_a","setOptions","options","Object","assign","modifiers","name","enabled","initializePopper","tooltipVisible","tooltipEl","style","display","_b","update","onMouseLeave","onClick","variant","toLowerCase","onDismissClick","componentWillLoad","trim","componentDidLoad","slotElement","el","shadowRoot","querySelector","firstChild","addEventListener","referenceEl","effectivePosition","position","determineBestPosition","internalPosition","createPopper","placement","offset","element","setAttribute","rect","getBoundingClientRect","yOffset","window","scrollY","xOffset","scrollX","verticalHalfwayPoint","top","height","horizontalHalfwayPoint","left","width","innerHeight","innerWidth","positionChanged","newVal","destroy","disconnectedCallback","render","tooltipDismissible","visible","tooltipCompact","tooltipExtended","h","key","header","class","icon","text","viewBox","fill","xmlns","id","d","stroke"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.tooltip__container {\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n  font-family: var(--ifx-font-family);\n\n}\n\n%tooltip-common {\n  background-color: tokens.$ifxColorBaseBlack;\n  border: 1px solid black;\n  z-index: 1080;\n  display: none;\n  transition: opacity 0.3s;\n  position: absolute;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseWhite;\n  width: max-content;\n  box-sizing: border-box;\n\n  white-space: pre-wrap;   /* wraps text at spaces and within words */\n  word-wrap: break-word;   /* breaks text within a word if necessary */\n  overflow-wrap: anywhere; /* breaks text at arbitrary points when needed */\n\n  &.visible {\n    display: flex !important;\n    align-items: start;\n    //min-width: 100px;\n    //width: auto;\n  }\n}\n\n\n\n.tooltip-dismissible {\n  @extend %tooltip-common;\n\n    .close-button {\n      all: unset;\n      //position: absolute;\n      //top: tokens.$ifxSpace150;\n      //right: tokens.$ifxSpace150;\n      cursor: pointer;\n      position: relative;\n      order: 2;\n      margin-top: 12px;\n      margin-right: 12px;\n      line-height: 0px;\n    }\n\n  .tooltip-dismissible-content {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    padding: tokens.$ifxSpace150;\n    flex-grow: 1;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n\n  }\n\n  .tooltip-dismissible-header,\n  .tooltip-dismissible-body {\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .tooltip-dismissible-header {\n    font-weight: tokens.$ifxFontWeightSemibold;\n  }\n\n  .tooltip-dismissible-body {\n    font-weight: tokens.$ifxFontWeightRegular;\n  }\n}\n\n.tooltip-compact {\n  @extend %tooltip-common;\n  padding: 4px 8px;\n  text-align: center;\n  flex-grow: 1;\n}\n\n\n.tooltip-extended {\n  @extend %tooltip-common;\n  //padding-left: 36px; // Added this line, adjust as per your icon width\n  //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n  align-items: center;\n  padding: tokens.$ifxSpace150;\n  gap: 10px;\n\n  .extended_icon {\n    display: flex;\n    align-self: flex-start;\n    align-items: center;\n    //padding-top: tokens.$ifxSpace150;\n    cursor: pointer;\n  }\n\n\n\n  .tooltip-extended-content {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    //padding: tokens.$ifxSpace150;\n    flex-grow: 1;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n  }\n\n  .tooltip-extended-header,\n  .tooltip-extended-body {\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .tooltip-extended-header {\n    font-weight: tokens.$ifxFontWeightSemibold;\n  }\n\n  .tooltip-extended-body {\n    font-weight: tokens.$ifxFontWeightRegular;\n  }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n  // For 'top' placement\n  &[data-placement=\"top\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    left: 50%;\n    transform: rotate(180deg) translateX(-50%);\n  }\n\n  // For 'top-start' placement\n  &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    left: 10px; // Adjust as needed\n    transform: rotate(180deg)\n  }\n\n  // For 'top-end' placement\n  &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    right: 10px; // Adjust as needed\n    transform: rotate(180deg);\n  }\n\n  // For 'bottom' placement\n  &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n    top: -7px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  // For 'bottom-start' placement\n  &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n    top: -7px;\n    left: 10px; // Adjust as needed\n  }\n\n  // For 'bottom-end' placement\n  &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n    top: -7px;\n    right: 10px; // Adjust as needed\n  }\n\n  // For 'left' placement\n  &[data-placement=\"left\"]>.tooltip-arrow-svg {\n    right: -3px;\n    top: 50%;\n    transform: rotate(90deg) translateY(-50%) translateX(-50%);\n  }\n\n  // For 'right' placement\n  &[data-placement=\"right\"]>.tooltip-arrow-svg {\n    left: -3px;\n    top: 50%;\n    transform: rotate(270deg) translateY(-50%) translateX(50%);\n  }\n}\n\n\n.tooltip-compact {\n  @extend %tooltip-arrow-positions;\n  min-width: 28px !important;\n  max-width: 145px !important;\n}\n\n.tooltip-dismissible {\n  @extend %tooltip-arrow-positions;\n  min-width: 145px !important;\n  max-width: 310px !important;\n}\n\n.tooltip-extended {\n  @extend %tooltip-arrow-positions;\n  min-width: 145px !important;\n  max-width: 310px !important;\n}\n","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n \n\n@Component({\n  tag: 'ifx-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true\n})\nexport class Tooltip {\n\n  @Element() el: HTMLElement;\n  @State() tooltipVisible: boolean = false;\n  @Prop() header: string = '';\n  @Prop() text: string = '';\n  @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n  @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n  @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n  @Prop() icon: string;\n\n  tooltipEl: HTMLElement;\n  referenceEl: HTMLElement;\n  popperInstance: any = null;\n\n\n  componentWillLoad() { \n    if(this.variant.toLowerCase().trim() === \"\") { \n      this.variant = 'compact'\n    }\n  }\n  \n  componentDidLoad() {\n    const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n    \n    if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n      slotElement.addEventListener('mouseenter', this.onMouseEnter)\n      slotElement.addEventListener('mouseleave', this.onMouseLeave)\n    }else{\n      slotElement.addEventListener('click', this.onClick);\n    }\n\n  }\n\n  initializePopper() {\n    if (this.popperInstance) return;\n\n    this.referenceEl = this.el;\n    this.tooltipEl;\n    if (this.variant.toLowerCase() === 'compact') {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n    }\n    else if (this.variant.toLowerCase() === 'dismissible') {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n    }\n    else {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n    }\n\n    const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n    // Set the internalPosition\n    this.internalPosition = effectivePosition;\n\n    if (this.tooltipEl && this.referenceEl) {\n\n      this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n        placement: this.internalPosition,\n        modifiers: [\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 8]  // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n            }\n          },\n          {\n            name: 'arrow',\n            options: {\n              element: '.tooltip-arrow-svg'\n            }\n          }\n        ]\n      });\n\n    }\n\n    // Add this line to set the 'data-placement' attribute on the tooltip\n    this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n  }\n\n  determineBestPosition() {\n    // This is a simplified version, you can enhance this based on available viewport space.\n    const rect = this.referenceEl.getBoundingClientRect();\n    const yOffset = window.scrollY; // Get current scroll position\n    const xOffset = window.scrollX; // Get current horizontal scroll position\n\n    const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n    const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n    if (this.position === 'auto') {\n      if (verticalHalfwayPoint > window.innerHeight / 2) {\n        if (horizontalHalfwayPoint > window.innerWidth / 2) {\n          return 'top-end';\n        } else {\n          return 'top-start';\n        }\n      } else {\n        if (horizontalHalfwayPoint > window.innerWidth / 2) {\n          return 'bottom-end';\n        } else {\n          return 'bottom-start';\n        }\n      }\n    } else {\n      return this.position;\n    }\n  }\n\n  @Watch('position')\n  positionChanged(newVal: any) {\n    this.internalPosition = newVal;\n    this.popperInstance?.destroy();\n    this.popperInstance = null; // Force re-initialization on next mouse enter\n  }\n\n\n\n  onMouseEnter = () => {\n    // Enable the event listeners immediately\n    this.popperInstance?.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: 'eventListeners', enabled: true },\n      ],\n    }));\n\n    // Initialize the popper instance\n    this.initializePopper();\n\n    // Make the tooltip visible\n    this.tooltipVisible = true;\n    this.tooltipEl.style.display = 'block';\n\n    // Update the popper instance immediately after initialization\n    this.popperInstance?.update();\n  }\n\n\n  onMouseLeave = () => {\n    this.tooltipVisible = false;\n    this.tooltipEl.style.display = 'none';\n\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  onClick = () => {\n    if (this.variant.toLowerCase() === 'dismissible') {\n      this.initializePopper();\n      this.tooltipVisible = !this.tooltipVisible;\n      this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n      this.popperInstance?.update();\n    }\n  }\n\n  onDismissClick = () => {\n    this.tooltipVisible = false;\n    this.tooltipEl.style.display = 'none';\n  }\n\n  render() {\n    const tooltipDismissible = {\n      'tooltip-dismissible': true,\n      'visible': this.tooltipVisible,\n    };\n\n    const tooltipCompact = {\n      'tooltip-compact': true,\n      'visible': this.tooltipVisible,\n    };\n\n    const tooltipExtended = {\n      'tooltip-extended': true,\n      'visible': this.tooltipVisible,\n    };\n\n    return (\n      <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n        <slot></slot>\n\n        {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n          <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n            <ifx-icon icon=\"cross16\"></ifx-icon>\n          </button>\n          <div class=\"tooltip-dismissible-content\">\n            {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n            <div class=\"tooltip-dismissible-body\">{this.text}</div>\n          </div>\n          <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n          </svg>\n        </div>\n        }\n        {this.variant.toLowerCase() === 'compact' &&\n          <div class={tooltipCompact}>\n            {this.text}\n            <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n            </svg>\n          </div>\n        }\n        {this.variant.toLowerCase() === 'extended' &&\n          <div class={tooltipExtended}>\n            <slot name=\"icon\">\n              {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n                <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n                  <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n                  <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n                  <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n                </svg>\n              }\n            </slot>\n            <div class=\"tooltip-extended-content\">\n              {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n              <div class=\"tooltip-extended-body\">{this.text}</div>\n            </div>\n            <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n            </svg>\n          </div >\n        }\n      </div>\n    );\n  }\n\n\n}"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as i,g as o}from"./p-6b122987.js";const t=':host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}';const c=t;const n=class{constructor(i){e(this,i);this.ifxChange=r(this,"ifxChange",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.disabled=false;this.checked=false;this.error=false;this.size="m";this.indeterminate=false;this.value=undefined;this.internalChecked=undefined;this.internalIndeterminate=undefined}handleCheckbox(){if(!this.disabled){if(this.inputElement.indeterminate){this.internalChecked=true;this.internalIndeterminate=false}else{this.internalChecked=!this.internalChecked}if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}}async isChecked(){return this.internalChecked}async toggleCheckedState(e){this.internalChecked=e}valueChanged(e,r){if(e!==r){this.internalChecked=e;this.inputElement.checked=this.internalChecked}}indeterminateChanged(e,r){if(e!==r){this.internalIndeterminate=e;this.inputElement.indeterminate=this.internalIndeterminate}}handleKeydown(e){if(e.keyCode===32||e.keyCode===13){this.handleCheckbox();e.preventDefault()}}componentWillLoad(){this.internalChecked=this.checked;this.internalIndeterminate=this.indeterminate}componentDidRender(){this.inputElement.indeterminate=this.internalIndeterminate}formResetCallback(){this.internals.setFormValue(null)}getCheckedClassName(){if(this.error){if(this.internalChecked){return"checked error"}else{return"error"}}else if(this.internalChecked){return"checked"}else return""}render(){const e=this.el.innerHTML;let r=false;if(e){r=true}return i("div",{key:"42d5a5b45e19edb9ad6885c2849ec4909fb587ea",class:"checkbox__container"},i("input",{key:"a924fc885614c78b86d396c50665470e1c281c2f",type:"checkbox",hidden:true,ref:e=>this.inputElement=e,checked:this.internalChecked,onChange:this.handleCheckbox.bind(this),id:"checkbox",value:`${this.value}`,disabled:this.disabled?true:undefined}),i("div",{key:"b39d40cdd76089d90ef783f971b3ff1eedddd16c",tabindex:"0",onClick:this.handleCheckbox.bind(this),onKeyDown:this.handleKeydown.bind(this),role:"checkbox","aria-checked":this.indeterminate?"mixed":this.internalChecked.toString(),"aria-disabled":this.disabled,"aria-labelledby":"label",class:`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size==="m"?"checkbox-m":""}\n        ${this.indeterminate?"indeterminate":""}\n        ${this.disabled?"disabled":""}`},this.internalChecked&&i("ifx-icon",{key:"c377c5f5a75b99a6b9b9e94b46f585e0957779bf",icon:"check-12","aria-hidden":"true"})),r&&i("div",{key:"eece08029794065f499efe28480f2fc2030dabd9",id:"label",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""} `,onClick:this.handleCheckbox.bind(this)},i("slot",{key:"a317e5c7eedb34e245888b7f24df1cd5de633bf3"})))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{checked:["valueChanged"],indeterminate:["indeterminateChanged"]}}};n.style=c;export{n as ifx_checkbox};
+//# sourceMappingURL=p-d52e5250.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","IfxCheckboxStyle0","Checkbox","handleCheckbox","this","disabled","inputElement","indeterminate","internalChecked","internalIndeterminate","value","undefined","internals","setFormValue","ifxChange","emit","isChecked","toggleCheckedState","newVal","valueChanged","newValue","oldValue","checked","indeterminateChanged","handleKeydown","event","keyCode","preventDefault","componentWillLoad","componentDidRender","formResetCallback","getCheckedClassName","error","render","slot","el","innerHTML","hasSlot","h","key","class","type","hidden","ref","onChange","bind","id","tabindex","onClick","onKeyDown","role","toString","size","icon"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family);\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (this.inputElement.indeterminate) {\n        this.internalChecked = true;\n        this.internalIndeterminate = false;\n      } else {\n        this.internalChecked = !this.internalChecked;\n      }\n      \n      if (this.internalChecked) {\n        if (this.value !== undefined) {\n          this.internals.setFormValue(this.value);\n        } else {\n          this.internals.setFormValue(\"on\")\n        }\n      } else {\n        this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n\n    if (slot) {\n      hasSlot = true;\n    }\n\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && <ifx-icon icon=\"check-12\"  aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,guEACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,M,4OAIS,M,aACD,M,WACF,M,UACF,I,mBACU,M,yFASjC,cAAAC,GACE,IAAKC,KAAKC,SAAU,CAClB,GAAID,KAAKE,aAAaC,cAAe,CACnCH,KAAKI,gBAAkB,KACvBJ,KAAKK,sBAAwB,K,KACxB,CACLL,KAAKI,iBAAmBJ,KAAKI,e,CAG/B,GAAIJ,KAAKI,gBAAiB,CACxB,GAAIJ,KAAKM,QAAUC,UAAW,CAC5BP,KAAKQ,UAAUC,aAAaT,KAAKM,M,KAC5B,CACLN,KAAKQ,UAAUC,aAAa,K,MAEzB,CACLT,KAAKQ,UAAUC,aAAa,K,CAE9BT,KAAKU,UAAUC,KAAKX,KAAKI,gB,EAK7B,eAAMQ,GACJ,OAAOZ,KAAKI,e,CAId,wBAAMS,CAAmBC,GACvBd,KAAKI,gBAAkBU,C,CAIzB,YAAAC,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBjB,KAAKI,gBAAkBY,EACvBhB,KAAKE,aAAagB,QAAUlB,KAAKI,e,EAMrC,oBAAAe,CAAqBH,EAAmBC,GACtC,GAAID,IAAaC,EAAU,CACzBjB,KAAKK,sBAAwBW,EAC7BhB,KAAKE,aAAaC,cAAgBH,KAAKK,qB,EAI3C,aAAAe,CAAcC,GAEZ,GAAIA,EAAMC,UAAY,IAAMD,EAAMC,UAAY,GAAI,CAChDtB,KAAKD,iBACLsB,EAAME,gB,EAIV,iBAAAC,GACExB,KAAKI,gBAAkBJ,KAAKkB,QAC5BlB,KAAKK,sBAAwBL,KAAKG,a,CAGpC,kBAAAsB,GACEzB,KAAKE,aAAaC,cAAgBH,KAAKK,qB,CAQzC,iBAAAqB,GACE1B,KAAKQ,UAAUC,aAAa,K,CAG9B,mBAAAkB,GACE,GAAI3B,KAAK4B,MAAO,CACd,GAAI5B,KAAKI,gBAAiB,CACxB,MAAO,e,KACF,CACL,MAAO,O,OAEJ,GAAIJ,KAAKI,gBAAiB,CAC/B,MAAO,S,MACF,MAAO,E,CAGhB,MAAAyB,GACE,MAAMC,EAAO9B,KAAK+B,GAAGC,UACrB,IAAIC,EAAU,MAEd,GAAIH,EAAM,CACRG,EAAU,I,CAGZ,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACTF,EAAA,SAAAC,IAAA,2CACEE,KAAK,WACLC,OAAM,KACNC,IAAMR,GAAQ/B,KAAKE,aAAe6B,EAClCb,QAASlB,KAAKI,gBACdoC,SAAUxC,KAAKD,eAAe0C,KAAKzC,MACnC0C,GAAG,WACHpC,MAAO,GAAGN,KAAKM,QACfL,SAAUD,KAAKC,SAAW,KAAOM,YAGnC2B,EAAA,OAAAC,IAAA,2CACEQ,SAAS,IACTC,QAAS5C,KAAKD,eAAe0C,KAAKzC,MAClC6C,UAAW7C,KAAKoB,cAAcqB,KAAKzC,MACnC8C,KAAK,WAAU,eACD9C,KAAKG,cAAgB,QAAUH,KAAKI,gBAAgB2C,WAAU,gBAC7D/C,KAAKC,SAAQ,kBACZ,QAChBmC,MAAO,iCACLpC,KAAK2B,kCACP3B,KAAKgD,OAAS,IAAM,aAAe,eACnChD,KAAKG,cAAgB,gBAAkB,eACvCH,KAAKC,SAAW,WAAa,MAE5BD,KAAKI,iBAAmB8B,EAAA,YAAAC,IAAA,2CAAUc,KAAK,WAAU,cAAc,UAEjEhB,GACCC,EAAA,OAAAC,IAAA,2CAAKO,GAAG,QAAQN,MAAO,SAASpC,KAAKgD,OAAS,IAAM,UAAY,MAAMhD,KAAKC,SAAW,WAAa,MAAO2C,QAAS5C,KAAKD,eAAe0C,KAAKzC,OAC1IkC,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-52b61a69.entry.js → p-db09429f.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as i}from"./p-c63974da.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const o=t;const a=class{constructor(i){e(this,i);this.ifxClose=r(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return i("div",{class:"close-icon-wrapper"},i("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},i("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}}render(){return this.variant==="info"?i("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},i("div",{class:"info__text-wrapper"},i("div",{class:"info__headline-wrapper"},i("slot",{name:"headline"})),i("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},i("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):i("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&i("div",{class:"icon-wrapper"},i("ifx-icon",{icon:this.icon})),i("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},i("slot",null)),this.closable?this.renderCloseButton():null)}};a.style=o;export{a as ifx_alert};
-//# sourceMappingURL=p-52b61a69.entry.js.map
+import{r as e,c as r,h as i}from"./p-6b122987.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const o=t;const a=class{constructor(i){e(this,i);this.ifxClose=r(this,"ifxClose",7);this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"};this.variant="primary";this.icon=undefined;this.closable=true;this.AriaLive="assertive";this.uniqueId=undefined}handleClose(){this.ifxClose.emit()}renderCloseButton(){return i("div",{class:"close-icon-wrapper"},i("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},i("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}}render(){return this.variant==="info"?i("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},i("div",{class:"info__text-wrapper"},i("div",{class:"info__headline-wrapper"},i("slot",{name:"headline"})),i("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},i("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):i("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&i("div",{class:"icon-wrapper"},i("ifx-icon",{icon:this.icon})),i("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},i("slot",null)),this.closable?this.renderCloseButton():null)}};a.style=o;export{a as ifx_alert};
+//# sourceMappingURL=p-db09429f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","this","alertTypeDescription","primary","success","danger","warning","info","handleClose","ifxClose","emit","renderCloseButton","h","class","onClick","bind","icon","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","render","variant","role","AriaLive","name","id","closable"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAW,qoFACjB,MAAAC,EAAeD,E,MCMFE,EAAK,M,4DAQhBC,KAAAC,qBAAuB,CACrBC,QAAW,gBACXC,QAAW,gBACXC,OAAU,cACVC,QAAW,gBACXC,KAAQ,iB,aAZ+D,U,kCAG7C,K,cACT,Y,wBAWnB,WAAAC,GACEP,KAAKQ,SAASC,M,CAGhB,iBAAAC,GACE,OACEC,EAAA,OAAKC,MAAM,sBACTD,EAAA,UAAQE,QAASb,KAAKO,YAAYO,KAAKd,MAAK,aAAa,iBACvDW,EAAA,YAAUI,KAAK,c,CAMvB,gBAAAC,CAAiBC,EAAS,MACxB,MAAO,GAAGA,KAAUC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,I,CAG9D,iBAAAC,GACE,IAAKtB,KAAKuB,SAAU,CAClBvB,KAAKuB,SAAWvB,KAAKgB,iBAAiB,Q,EAI1C,MAAAQ,GACE,OAAOxB,KAAKyB,UAAY,OACtBd,EAAA,OAAKC,MAAM,sBAAsBc,KAAK,QAAO,YAAY1B,KAAK2B,SAAQ,mBAAoB3B,KAAKC,qBAAqBD,KAAKyB,SAAQ,kBAAkB,gCACjJd,EAAA,OAAKC,MAAM,sBACTD,EAAA,OAAKC,MAAM,0BACTD,EAAA,QAAMiB,KAAK,cAEbjB,EAAA,OAAKkB,GAAI,qBAAqB7B,KAAKuB,WAAYX,MAAM,6BACnDD,EAAA,QAAMiB,KAAK,WAGd5B,KAAK8B,SAAW9B,KAAKU,oBAAsB,MAG9CC,EAAA,OAAKC,MAAO,SAASZ,KAAKyB,UAAWC,KAAK,SACvC1B,KAAKe,MACJJ,EAAA,OAAKC,MAAM,gBACTD,EAAA,YAAUI,KAAMf,KAAKe,QAGzBJ,EAAA,OAAKC,MAAM,aAAaiB,GAAI,cAAc7B,KAAKuB,YAC7CZ,EAAA,cAEDX,KAAK8B,SAAW9B,KAAKU,oBAAsB,K","ignoreList":[]}