@infineon/infineon-design-system-stencil 30.10.0--canary.1696.b831179ac32ae02cdeaa1c4b607f326c7553bc3a.0 → 31.0.0--canary.1697.e5e5c4da838c535d0e5399b759dcee2325e38b03.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","isChecked","this","internalChecked","componentWillLoad","checked","slot","el","innerHTML","hasSlot","handleRadioButtonClick","event","disabled","stopPropagation","inputElement","click","ifxChange","emit","handleChange","target","name","render","h","key","value","class","size","onClick","bind","error","tabIndex","type","hidden","ref","e"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n}\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family);\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: false,\n  formAssociated: false\n})\nexport class RadioButton {\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop() size: \"s\" | \"m\" = \"s\";\n  @Prop() name: string;\n  @Prop() checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = true;\n\n  @State() inputElement: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n  /**\n   * @returns whether the radio button is checked.\n   */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n  \n  componentWillLoad() {\n    if (this.checked) this.internalChecked = this.checked;\n    const slot = this.el.innerHTML;\n    if (slot) {\n      this.hasSlot = true;\n    } else this.hasSlot = false;\n  }\n\n\n  /**\n   * Click the hidden input element to let it handle the state\n   * and emit ifxChange event.\n   */\n  handleRadioButtonClick(event: PointerEvent) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  /**\n   * Listen to all change events.\n   * Needed to get informed when another button of the group gets chcked \n   * and this one needs to become unchecked. \n   * \n   * @param event \n   */\n  @Listen('change', { target: 'window' }) \n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if (target.name === this.name) {\n      this.internalChecked = this.inputElement.checked;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={this.handleRadioButtonClick.bind(this)}\n      >\n        <div\n          class={`radioButton__wrapper \n          ${this.internalChecked ? 'checked' : ''} \n          ${this.disabled ? 'disabled' : ''} \n          ${this.error ? 'error' : ''}`}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n        <input\n          type=\"radio\" \n          hidden \n          ref={el => this.inputElement = el as HTMLInputElement} \n          name={this.name}  \n          value={this.value}\n          checked={this.internalChecked}        \n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}></input>\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,y5FACvB,MAAAC,EAAeD,E,MCQFE,EAAW,M,4EAEM,M,gCAEH,M,UACC,I,gEAGU,M,aACR,K,4BAU5B,eAAMC,GACJ,OAAOC,KAAKC,e,CAGd,iBAAAC,GACE,GAAIF,KAAKG,QAASH,KAAKC,gBAAkBD,KAAKG,QAC9C,MAAMC,EAAOJ,KAAKK,GAAGC,UACrB,GAAIF,EAAM,CACRJ,KAAKO,QAAU,I,MACVP,KAAKO,QAAU,K,CAQxB,sBAAAC,CAAuBC,GACrB,GAAIT,KAAKU,SAAU,CACjBD,EAAME,kBACN,M,CAGFX,KAAKY,aAAaC,QAClBb,KAAKC,gBAAkBD,KAAKY,aAAaT,QACzCH,KAAKc,UAAUC,KAAKf,KAAKC,gB,CAW3B,YAAAe,CAAaP,GACX,MAAMQ,EAASR,EAAMQ,OACrB,GAAIA,EAAOC,OAASlB,KAAKkB,KAAM,CAC7BlB,KAAKC,gBAAkBD,KAAKY,aAAaT,O,EAI7C,MAAAgB,GACE,OACEC,EAAA,OAAAC,IAAA,wDACa,iBAAgB,aAAarB,KAAKsB,MAAK,gBAAiBtB,KAAKU,SACxEa,MAAO,0BAA0BvB,KAAKwB,QAAQxB,KAAKU,SAAW,WAAa,KAC3Ee,QAASzB,KAAKQ,uBAAuBkB,KAAK1B,OAE1CoB,EAAA,OAAAC,IAAA,2CACEE,MAAO,oCACLvB,KAAKC,gBAAkB,UAAY,kBACnCD,KAAKU,SAAW,WAAa,kBAC7BV,KAAK2B,MAAQ,QAAU,KACzBC,SAAU5B,KAAKU,UAAY,EAAI,GAE9BV,KAAKC,iBAAmBmB,EAAA,OAAAC,IAAA,2CAAKE,MAAM,+BAErCvB,KAAKO,SACJa,EAAA,OAAAC,IAAA,2CAAKE,MAAO,SAASvB,KAAKwB,OAAS,IAAM,UAAY,MAAMxB,KAAKU,SAAW,WAAa,MACtFU,EAAA,QAAAC,IAAA,8CAGJD,EAAA,SAAAC,IAAA,2CACEQ,KAAK,QACLC,OAAM,KACNC,IAAK1B,GAAML,KAAKY,aAAeP,EAC/Ba,KAAMlB,KAAKkB,KACXI,MAAOtB,KAAKsB,MACZnB,QAASH,KAAKC,gBACdS,SAAUV,KAAKU,SACfe,QAAUO,GAAMA,EAAErB,oB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s}from"./p-6b122987.js";const i="";const l=i;const h=class{constructor(s){e(this,s);this.ifxFilterSelect=t(this,"ifxFilterSelect",7);this.filterName=undefined;this.filterLabel=undefined;this.placeholder=undefined;this.type="text";this.options=undefined;this.filterValues=[]}handleTextInputChange(e){const t=e.target;const s=t.value;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:[s],type:this.type})}handleSingleSelectChange(e){const t=e.detail.value;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:[t],type:this.type})}handleMultiselectOptionChange(e){this.filterValues=e.detail;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:this.filterValues,type:this.type})}render(){switch(this.type){case"text":return s("ifx-text-field",{error:false,disabled:false,placeholder:this.placeholder,onIfxInput:e=>this.handleTextInputChange(e)},this.filterLabel);case"single-select":return s("ifx-select",{placeholder:"true","search-enabled":"true","search-placeholder-value":"Search...",onIfxSelect:e=>this.handleSingleSelectChange(e),"ifx-placeholder-value":this.placeholder,"ifx-label":this.filterLabel,"ifx-options":this.options});case"multi-select":return s("ifx-multiselect",{label:this.filterLabel,placeholder:this.placeholder,options:this.options,onIfxSelect:e=>this.handleMultiselectOptionChange(e)});default:return null}}};h.style=l;export{h as ifx_set_filter};
-//# sourceMappingURL=p-189c89c3.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["setFilterCss","IfxSetFilterStyle0","SetFilter","handleTextInputChange","event","target","value","this","ifxFilterSelect","emit","filterName","filterValues","type","handleSingleSelectChange","detail","handleMultiselectOptionChange","render","h","error","disabled","placeholder","onIfxInput","filterLabel","onIfxSelect","options","label"],"sources":["src/components/table-advanced-version/set-filter/set-filter.scss?tag=ifx-set-filter&encapsulation=shadow","src/components/table-advanced-version/set-filter/setFilter.tsx"],"sourcesContent":["/* set-filter.css */\n\n","// SetFilter.tsx\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-set-filter',\n  styleUrl: 'set-filter.scss',\n  shadow: true\n})\nexport class SetFilter {\n  @Prop() filterName: string;\n  @Prop() filterLabel: string;\n  @Prop() placeholder: string;\n  @Prop() type: 'text' | 'single-select' | 'multi-select' = 'text';\n  @Prop() options: any[] | string;\n  @State() filterValues: string[] = [];\n\n  @Event() ifxFilterSelect: EventEmitter;\n\n\n  handleTextInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const value = target.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n\n  }\n\n  handleSingleSelectChange(event: CustomEvent) {\n    const value = event.detail.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n  }\n\n\n  handleMultiselectOptionChange(event: CustomEvent) {\n    this.filterValues = event.detail; // Assuming that ifx-multiselect emits an array of selected options\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\n  }\n\n\n  render() {\n    switch (this.type) {\n      case 'text':\n        return (\n          <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\n            onIfxInput={event => this.handleTextInputChange(event)}\n          >{this.filterLabel}</ifx-text-field>\n        );\n      case 'single-select':\n        return (\n          <ifx-select\n            placeholder=\"true\"\n            search-enabled=\"true\"\n            search-placeholder-value=\"Search...\"\n            onIfxSelect={event => this.handleSingleSelectChange(event)}\n            ifx-placeholder-value={this.placeholder}\n            ifx-label={this.filterLabel}\n            ifx-options={this.options}\n          ></ifx-select>\n        );\n      case 'multi-select':\n        return (\n          <ifx-multiselect\n            label={this.filterLabel}\n            placeholder={this.placeholder}\n            options={this.options}\n            onIfxSelect={event => this.handleMultiselectOptionChange(event)}\n          />\n        );\n      default:\n        return null;\n    }\n  }\n}\n\n"],"mappings":"kDAAA,MAAMA,EAAe,GACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,oKAIsC,O,yCAExB,E,CAKlC,qBAAAC,CAAsBC,GACpB,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAQD,EAAOC,MACrBC,KAAKC,gBAAgBC,KAAK,CAAEC,WAAYH,KAAKG,WAAYC,aAAc,CAACL,GAAQM,KAAML,KAAKK,M,CAI7F,wBAAAC,CAAyBT,GACvB,MAAME,EAAQF,EAAMU,OAAOR,MAC3BC,KAAKC,gBAAgBC,KAAK,CAAEC,WAAYH,KAAKG,WAAYC,aAAc,CAACL,GAAQM,KAAML,KAAKK,M,CAI7F,6BAAAG,CAA8BX,GAC5BG,KAAKI,aAAeP,EAAMU,OAC1BP,KAAKC,gBAAgBC,KAAK,CAAEC,WAAYH,KAAKG,WAAYC,aAAcJ,KAAKI,aAAcC,KAAML,KAAKK,M,CAIvG,MAAAI,GACE,OAAQT,KAAKK,MACX,IAAK,OACH,OACEK,EAAA,kBAAgBC,MAAO,MAAOC,SAAU,MAAOC,YAAab,KAAKa,YAC/DC,WAAYjB,GAASG,KAAKJ,sBAAsBC,IAChDG,KAAKe,aAEX,IAAK,gBACH,OACEL,EAAA,cACEG,YAAY,OAAM,iBACH,OAAM,2BACI,YACzBG,YAAanB,GAASG,KAAKM,yBAAyBT,GAAM,wBACnCG,KAAKa,YAAW,YAC5Bb,KAAKe,YAAW,cACdf,KAAKiB,UAGxB,IAAK,eACH,OACEP,EAAA,mBACEQ,MAAOlB,KAAKe,YACZF,YAAab,KAAKa,YAClBI,QAASjB,KAAKiB,QACdD,YAAanB,GAASG,KAAKQ,8BAA8BX,KAG/D,QACE,OAAO,K","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as a,a as r,g as d}from"./p-6b122987.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}';const i=o;const t=class{constructor(a){e(this,a);this.noBtns=undefined;this.direction="vertical";this.alignment=undefined;this.noImg=undefined;this.href="";this.internalHref="";this.target="_self";this.AriaLabel=undefined}setImgPosition(e){this.alignment=e.detail}handleComponentAdjustment(){const e=this.el.querySelector("ifx-card-image");const a=this.el.querySelector("ifx-card-links");if(!e){this.noImg=true}else this.noImg=false;if(!a){this.noBtns=true}else this.noBtns=false;if(this.href.trim()===""){this.internalHref=undefined}else this.internalHref=this.href}handleClassList(e,a,r){e.classList[a](r)}componentWillLoad(){this.handleComponentAdjustment()}componentWillUpdate(){this.handleComponentAdjustment()}render(){return a(r,{key:"01e7592f9bf887e80837db93ab637fa77fb1ce1f"},a("div",{key:"8b784dff18da8f47e57a293554dc18af013293f4","aria-label":this.AriaLabel,class:`card \n          ${this.noBtns?"noBtns":""}\n          ${this.direction} \n          ${this.alignment}`,role:"region"},this.direction==="horizontal"&&a("div",{key:"69e234c4c3302dd8bf6b5133016e3c0642cf0034",class:"horizontal"},a("a",{key:"c4e4288637327e7e0f68b68a3ee750e3567c327d",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"d119095e1e71d459b160744276a2987b9596d076",name:"img"})),a("div",{key:"53b3816544b90daec193ced7b084aa2dfa12f7c6",class:"lower__body-wrapper"},a("a",{key:"61477913ea24a2bdc3765771bf60af809a5643f5",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"aa49da1c6b7cefefb5d9f36f72f3166e09c2e494"})),a("div",{key:"da9e12e7e215397ed699f3158676235d3ec1e05c"},a("slot",{key:"dd43320f7bc1d0dce6f3c6a3bbf4de31c60d9f77",name:"buttons"})))),this.direction==="vertical"&&a("div",{key:"81a7e3a57402983a7544cb80c37609ca1189b8cd",class:"vertical"},a("a",{key:"3835c2cbb6de0e6b518f72d7752033e71e62e5f6",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},a("div",{key:"57f555a369c10897d75058780993a45d0dc4b1da",class:`card-img ${this.noImg?"noImage":""}`},a("slot",{key:"fc23cd2f3575e0c8bf9dc4e50581527175d3dfa5",name:"img"})),a("div",{key:"abc7faafe9cb34acba6cd6db1daca948438511e9",class:"upper-body"},a("slot",{key:"9f8ed0bfa8ac124368b0fc0af24037ab9549d26b"}))),a("div",{key:"f13ded514016af3d5975224049db6c84c32e7c03",class:"lower__body-wrapper"},a("slot",{key:"3a6875e3f2daa209ad56bc5417facd8835af3ea0",name:"buttons"})))))}get el(){return d(this)}};t.style=i;export{t as ifx_card};
-//# sourceMappingURL=p-1aed7d45.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","IfxCardStyle0","Card","setImgPosition","event","this","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","href","trim","internalHref","undefined","handleClassList","type","className","classList","componentWillLoad","componentWillUpdate","render","h","Host","key","AriaLabel","class","direction","role","name","target"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  border-radius: 1px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family);\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() AriaLabel: string;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image')\n    const links = this.el.querySelector('ifx-card-links')\n\n    if (!image) {\n      this.noImg = true;\n    } else this.noImg = false;\n\n    if (!links) {\n      this.noBtns = true;\n    } else this.noBtns = false;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n\n  componentWillLoad() {\n    this.handleComponentAdjustment()\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment()\n  }\n\nrender() {\n    return (\n      <Host>\n        <div aria-label={this.AriaLabel} class={\n          `card \n          ${this.noBtns ? 'noBtns' : \"\"}\n          ${this.direction} \n          ${this.alignment}`\n        }\n        role=\"region\">\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body'>\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAU,+1DAChB,MAAAC,EAAeD,E,MCQFE,EAAI,M,8DAGgC,W,wDAGxB,G,kBACS,G,YACP,Q,yBAIzB,cAAAC,CAAeC,GACbC,KAAKC,UAAYF,EAAMG,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQJ,KAAKK,GAAGC,cAAc,kBACpC,MAAMC,EAAQP,KAAKK,GAAGC,cAAc,kBAEpC,IAAKF,EAAO,CACVJ,KAAKQ,MAAQ,I,MACRR,KAAKQ,MAAQ,MAEpB,IAAKD,EAAO,CACVP,KAAKS,OAAS,I,MACTT,KAAKS,OAAS,MAErB,GAAIT,KAAKU,KAAKC,SAAW,GAAI,CAC3BX,KAAKY,aAAeC,S,MACfb,KAAKY,aAAeZ,KAAKU,I,CAGlC,eAAAI,CAAgBT,EAAIU,EAAMC,GACxBX,EAAGY,UAAUF,GAAMC,E,CAIrB,iBAAAE,GACElB,KAAKG,2B,CAGP,mBAAAgB,GACEnB,KAAKG,2B,CAGT,MAAAiB,GACI,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAiBvB,KAAKwB,UAAWC,MAC/B,oBACEzB,KAAKS,OAAS,SAAW,iBACzBT,KAAK0B,yBACL1B,KAAKC,YAET0B,KAAK,UAEF3B,KAAK0B,YAAc,cAClBL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,YAAYzB,KAAKQ,MAAQ,UAAY,MAAMR,KAAKY,aAAe,YAAc,KAAMF,KAAMV,KAAKY,cACtGS,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAGbP,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,cAAczB,KAAKY,aAAe,YAAc,KAAMF,KAAMV,KAAKY,cACzES,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAKlB5B,KAAK0B,YAAc,YAClBL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,uBAAuBzB,KAAKY,aAAe,YAAc,KAAMF,KAAMV,KAAKY,aAAciB,OAAQ7B,KAAK6B,QAC7GR,EAAA,OAAAE,IAAA,2CAAKE,MAAO,YAAYzB,KAAKQ,MAAQ,UAAY,MAC/Ca,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAGbP,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,QAAAE,IAAA,+CAIJF,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,QAAAE,IAAA,2CAAMK,KAAK,e","ignoreList":[]}

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

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

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

@@ -1,2 +0,0 @@
-import{r as o,h as i,g as t,c as e}from"./p-6b122987.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}';const a=n;const s=class{constructor(i){o(this,i);this.autoCollapse=false}async onItemOpen(o){if(this.autoCollapse){const i=Array.from(this.el.querySelectorAll("ifx-accordion-item"));for(const t of i){const i=t;if(i!==o.target&&await i.open){i.open=false}}}}render(){return i("div",{key:"a69a6bea9d5347c0e1808d4635d458ce16614000",class:"accordion-wrapper"},i("slot",{key:"389e9039f9272a88d95aca8b83efbb754736a5dd"}))}static get delegatesFocus(){return true}get el(){return t(this)}};s.style=a;const c=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:"";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}';const r=c;const d=class{constructor(i){o(this,i);this.ifxItemOpen=e(this,"ifxItemOpen",7);this.ifxItemClose=e(this,"ifxItemClose",7);this.caption=undefined;this.open=false;this.AriaLive=3;this.internalOpen=false}componentWillLoad(){this.internalOpen=this.open}componentDidLoad(){this.openAccordionItem()}componentDidUpdate(){this.openAccordionItem()}openChanged(o){this.internalOpen=o}toggleOpen(){this.internalOpen=!this.internalOpen;this.open=this.internalOpen;if(this.internalOpen){this.ifxItemOpen.emit({isOpen:this.internalOpen})}else{this.ifxItemClose.emit({isClosed:!this.internalOpen})}}openAccordionItem(){if(this.internalOpen){this.contentEl.style.maxHeight=`${this.contentEl.scrollHeight}px`}else{this.contentEl.style.maxHeight="0"}}handleSlotChange(o){const i=o.target;const t=i.assignedNodes();if(t.length>0){t.forEach((o=>{const i=new MutationObserver(((o,i)=>{for(let i of o){if(i.type==="childList"){if(this.internalOpen){this.openAccordionItem()}}}}));i.observe(o,{attributes:true,childList:true,subtree:true})}))}if(this.internalOpen){this.openAccordionItem()}}handleKeydown(o){switch(o.key){case"Enter":case" ":o.preventDefault();this.toggleOpen();break}}render(){return i("div",{key:"1215772109c33556d626f4a7d40d6655684806a2",class:`accordion-item ${this.internalOpen?"open":""}`},i("div",{key:"30e7771bae93c213d9f95126886d7552ebe03b94",role:"button","aria-expanded":this.internalOpen,"aria-controls":"accordion-content",class:"accordion-title",onClick:()=>this.toggleOpen(),tabindex:"0"},i("span",{key:"7da5f484c41f9f01dd7eec5092ec8ad82947d481","aria-hidden":"true",role:"heading","aria-level":String(this.AriaLive),class:"accordion-icon"},i("ifx-icon",{key:"e64e478a66fd0dd2c3d3608294a6160aa4232952",icon:"chevron-down-12"})),i("span",{key:"7e1ff777da8ce68d6d5f1266512fbd05731169f5",id:"accordion-caption",class:"accordion-caption"},this.caption)),i("div",{key:"144fa8393da592e1d928b51d7b4ad48d6b06a100",id:"accordion-content",class:"accordion-content",ref:o=>this.contentEl=o,role:"region","aria-labelledby":"accordion-caption"},i("div",{key:"28702f514d9bd400499a49a3b1cd675f56d7fcad",class:"inner-content"},i("slot",{key:"e40109a457e4b1cc09c8234d5003361bb6c1c6fb",onSlotchange:o=>this.handleSlotChange(o)}))))}static get watchers(){return{open:["openChanged"]}}};d.style=r;export{s as ifx_accordion,d as ifx_accordion_item};
-//# sourceMappingURL=p-222c1af9.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["accordionCss","IfxAccordionStyle0","Accordion","onItemOpen","event","this","autoCollapse","items","Array","from","el","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","IfxAccordionItemStyle0","IfxAccordionItem","componentWillLoad","internalOpen","componentDidLoad","openAccordionItem","componentDidUpdate","openChanged","newValue","toggleOpen","ifxItemOpen","emit","isOpen","ifxItemClose","isClosed","contentEl","style","maxHeight","scrollHeight","handleSlotChange","e","slotElement","nodes","assignedNodes","length","forEach","node","observer","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleKeydown","ev","preventDefault","role","onClick","tabindex","String","AriaLive","icon","id","caption","ref","onSlotchange"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family);\n\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('ifxItemOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family);\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLive = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxItemOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxItemClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLive) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAe,+MACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,2CAEY,K,CAIhC,gBAAMC,CAAWC,GACf,GAAIC,KAAKC,aAAc,CACrB,MAAMC,EAAQC,MAAMC,KAAKJ,KAAKK,GAAGC,iBAAiB,uBAClD,IAAK,MAAMC,KAAQL,EAAO,CACxB,MAAMM,EAAcD,EACpB,GAAIC,IAAgBT,EAAMU,cAAiBD,EAAYE,KAAO,CAC5DF,EAAYE,KAAO,K,IAM3B,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACTF,EAAA,QAAAC,IAAA,6C,6EC7BR,MAAME,EAAmB,8nCACzB,MAAAC,EAAeD,E,MCOFE,EAAgB,M,8IAIR,M,cACA,E,kBACc,K,CAMjC,iBAAAC,GACElB,KAAKmB,aAAenB,KAAKU,I,CAG3B,gBAAAU,GACEpB,KAAKqB,mB,CAGP,kBAAAC,GACEtB,KAAKqB,mB,CAMP,WAAAE,CAAYC,GACVxB,KAAKmB,aAAeK,C,CAGtB,UAAAC,GACEzB,KAAKmB,cAAgBnB,KAAKmB,aAC1BnB,KAAKU,KAAOV,KAAKmB,aAEjB,GAAInB,KAAKmB,aAAc,CACrBnB,KAAK0B,YAAYC,KAAK,CAAEC,OAAQ5B,KAAKmB,c,KAChC,CACLnB,KAAK6B,aAAaF,KAAK,CAAEG,UAAW9B,KAAKmB,c,EAI7C,iBAAAE,GACE,GAAIrB,KAAKmB,aAAc,CACrBnB,KAAK+B,UAAUC,MAAMC,UAAY,GAAGjC,KAAK+B,UAAUG,gB,KAC9C,CACLlC,KAAK+B,UAAUC,MAAMC,UAAY,G,EAIrC,gBAAAE,CAAiBC,GACf,MAAMC,EAAcD,EAAE3B,OACtB,MAAM6B,EAAQD,EAAYE,gBAE1B,GAAGD,EAAME,OAAS,EAAG,CACnBF,EAAMG,SAAQC,IACZ,MAAMC,EAAW,IAAIC,kBAAiB,CAACC,EAAeC,KACpD,IAAI,IAAIC,KAAYF,EAAe,CACjC,GAAIE,EAASC,OAAS,YAAa,CACjC,GAAIhD,KAAKmB,aAAc,CACrBnB,KAAKqB,mB,OAKbsB,EAASM,QAAQP,EAAM,CAAEQ,WAAY,KAAMC,UAAW,KAAMC,QAAS,MAAO,G,CAIhF,GAAIpD,KAAKmB,aAAc,CACrBnB,KAAKqB,mB,EAOT,aAAAgC,CAAcC,GACZ,OAAQA,EAAGzC,KACT,IAAK,QACL,IAAK,IACHyC,EAAGC,iBACHvD,KAAKyB,aACL,M,CAKN,MAAAd,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBd,KAAKmB,aAAe,OAAS,MACzDP,EAAA,OAAAC,IAAA,2CAAK2C,KAAK,SAAQ,gBAAgBxD,KAAKmB,aAAY,gBAAgB,oBAAoBL,MAAM,kBAAkB2C,QAAS,IAAMzD,KAAKyB,aAAciC,SAAS,KACxJ9C,EAAA,QAAAC,IAAA,yDAAkB,OAAO2C,KAAK,UAAS,aAAaG,OAAO3D,KAAK4D,UAAqB9C,MAAM,kBACzFF,EAAA,YAAAC,IAAA,2CAAUgD,KAAK,qBAEjBjD,EAAA,QAAAC,IAAA,2CAAMiD,GAAG,oBAAoBhD,MAAM,qBAAqBd,KAAK+D,UAE/DnD,EAAA,OAAAC,IAAA,2CAAKiD,GAAG,oBAAoBhD,MAAM,oBAAoBkD,IAAM3D,GAAQL,KAAK+B,UAAY1B,EAAoBmD,KAAK,SAAQ,kBAAiB,qBACrI5C,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,QAAAC,IAAA,2CAAMoD,aAAe7B,GAAMpC,KAAKmC,iBAAiBC,O","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s}from"./p-6b122987.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.segment{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border:1px solid #BFBBBB;border-radius:1px;padding:0 8px 0 8px;height:34px;background-color:#FFFFFF;transition:all 100ms ease;transition-property:color, background;font:600 0.875rem/1.25rem "Source Sans 3"}.segment:focus-visible{color:#FFFFFF;background-color:#0A8276}.segment:hover{color:#FFFFFF;background-color:#08665C;cursor:pointer}.segment:active{background-color:#06534B}.segment.segment--selected{color:#FFFFFF;background-color:#0A8276}.segment.segment--small{height:30px}.segment::after{position:absolute;top:0;left:0;width:100%;height:100%;outline:1px solid #BFBBBB;border-radius:1px;content:""}';const o=n;const i=class{constructor(s){e(this,s);this.segmentSelect=t(this,"segmentSelect",5);this.icon=undefined;this.segmentIndex=undefined;this.selected=false;this.value=undefined}handleSegmentClick(){if(this.selected)return;this.selected=true;this.segmentSelect.emit(this.segmentIndex)}handleSegmentKeyDown(e){if(e.code==="Enter"||e.code==="Space"){if(this.selected)return;this.selected=true;this.segmentSelect.emit(this.segmentIndex)}}render(){return s("div",{key:"587e008edc3a8ea46b22c684de9a3c8260df0d3b",class:`segment ${this.selected?"segment--selected":""}`,tabIndex:0,onClick:()=>{this.handleSegmentClick()},onKeyDown:e=>{this.handleSegmentKeyDown(e)}},s("ifx-icon",{key:"e54741c9a73bc7f8ec78d989202b2f9873177afe",icon:this.icon})," ",s("slot",{key:"09e547f59983cf93d26458ce0f7c61d781ddaeab"}))}};i.style=o;export{i as ifx_segment};
-//# sourceMappingURL=p-255ffeee.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["segmentCss","IfxSegmentStyle0","Segment","handleSegmentClick","this","selected","segmentSelect","emit","segmentIndex","handleSegmentKeyDown","event","code","render","h","key","class","tabIndex","onClick","onKeyDown","e","icon"],"sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.segment {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSize100;\n    position: relative;\n\n    border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\n    \n    height: 34px;\n\n    background-color: tokens.$ifxColorBaseWhite;\n\n    transition: all 100ms ease;\n    transition-property: color, background;\n    \n    font: tokens.$ifxBodyBodySemibold04;\n\n    &:focus-visible {\n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &:hover {         \n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean600;\n        \n        cursor: pointer;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorOcean700;\n    }\n    \n    &.segment--selected {\n        color: tokens.$ifxColorBaseWhite;\n        \n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &.segment--small {\n        height: 30px;\n    }\n}\n\n.segment::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n\n    content: '';\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segment',\n    styleUrl: 'segment.scss',\n    shadow: true\n})\n\nexport class Segment {\n    @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n    @Prop() icon: string;\n    @Prop() segmentIndex: number;\n    @Prop({ mutable: true }) selected: boolean = false;\n    @Prop() value!: string;\n\n    handleSegmentClick() {\n        if (this.selected) return;\n        this.selected = true;\n        this.segmentSelect.emit(this.segmentIndex);\n    }\n    \n    handleSegmentKeyDown(event: KeyboardEvent) {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            if (this.selected) return;\n            this.selected = true;\n            this.segmentSelect.emit(this.segmentIndex);\n        }\n    }\n\n    render() {\n        return (\n            <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n                tabIndex={0}\n                onClick={() => {this.handleSegmentClick()}}\n                onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n                <ifx-icon icon={this.icon}></ifx-icon> <slot />\n            </div>\n        );\n    }\n}"],"mappings":"kDAAA,MAAMA,EAAa,ixBACnB,MAAAC,EAAeD,E,MCOFE,EAAO,M,oIAK6B,M,qBAG7C,kBAAAC,GACI,GAAIC,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKE,cAAcC,KAAKH,KAAKI,a,CAGjC,oBAAAC,CAAqBC,GACjB,GAAIA,EAAMC,OAAS,SAAWD,EAAMC,OAAS,QAAS,CAClD,GAAIP,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKE,cAAcC,KAAKH,KAAKI,a,EAIrC,MAAAI,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,WAAWX,KAAKC,SAAW,oBAAsB,KACzDW,SAAU,EACVC,QAAS,KAAOb,KAAKD,oBAAoB,EACzCe,UAAYC,IAAOf,KAAKK,qBAAqBU,EAAE,GAC/CN,EAAA,YAAAC,IAAA,2CAAUM,KAAMhB,KAAKgB,OAAiB,IAACP,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["segmentedControlCss","IfxSegmentedControlStyle0","SegmentedControl","this","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","length","setSegmentSize","shadowRoot","querySelector","classList","add","size","componentDidLoad","render","h","key","class","label","trim","caption","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: tokens.$ifxSpace150;\n}\n\n.group__label {\n    font: tokens.$ifxBodyBody05;\n\n    &:empty {\n        display: none;\n    }\n}\n\n.group__controls {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n    margin-left: -1px;\n    margin-top: -1px;\n}\n\n.group__caption {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    font: tokens.$ifxBodyBody05;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n        if (!activeSegmentedControlFound && segments.length) {\n            (segments[0] as HTMLIfxSegmentElement).selected = true;\n            this.selectedValue = (segments[0] as HTMLIfxSegmentElement).value;\n        }\n    }\n\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    componentDidLoad() {\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n                <div class='group__label'>\n                    { this.label.trim() }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class='group__caption'>\n                        <ifx-icon icon='cinfo16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"],"mappings":"yDAAA,MAAMA,EAAsB,0cAC5B,MAAAC,EAAeD,E,MCOFE,EAAgB,M,8DAgBjBC,KAAAC,cAAwB,G,aAXN,G,WACF,G,UACY,S,CAGpC,eAAAC,CAAgBC,GACZ,MAAMC,cAAEA,EAAaH,cAAEA,GAAkBD,KAAKK,wBAAwBF,EAAMG,QAC5EN,KAAKC,cAAgBA,EACrBD,KAAKO,UAAUC,KAAK,CAAEJ,gBAAeH,iB,CAKzC,uBAAAI,CAAwBI,GACpB,IAAIL,EACJ,IAAIH,EAEJ,MAAMS,EAAqBV,KAAKW,cAChCD,EAASE,SAASC,IACd,GAAIA,EAAQC,SAAU,CAClB,GAAID,EAAQE,eAAiBN,EAAkB,CAC3CI,EAAQC,SAAW,MACnBV,EAAgBS,EAAQG,K,KACrB,CACHf,EAAgBY,EAAQG,K,MAKpC,MAAO,CAAEZ,gBAAeH,gB,CAG5B,WAAAU,GACI,OAAOX,KAAKD,iBAAiBkB,iBAAiB,c,CAGlD,gBAAAC,GACI,MAAMR,EAAqBV,KAAKW,cAChC,IAAIQ,EAA8B,MAClCT,EAASE,SAAQ,CAACC,EAAgCO,KAC9CP,EAAQE,aAAeK,EACvB,GAAID,EAA6B,CAC7B,GAAIN,EAAQC,SAAUD,EAAQC,SAAW,K,KACtC,CACH,GAAID,EAAQC,SAAU,CAClBK,EAA8B,KAC9BnB,KAAKC,cAAgBY,EAAQG,K,MAIzC,IAAKG,GAA+BT,EAASW,OAAQ,CAChDX,EAAS,GAA6BI,SAAW,KAClDd,KAAKC,cAAiBS,EAAS,GAA6BM,K,EAKpE,cAAAM,GACI,MAAMZ,EAAqBV,KAAKW,cAChCD,EAASE,SAASC,IACdA,EAAQU,WAAWC,cAAc,YAAYC,UAAUC,IAAI,YAAY1B,KAAK2B,OAAO,G,CAI3F,gBAAAC,GACI5B,KAAKkB,kB,CAGT,MAAAW,GACI,OACIC,EAAA,OAAAC,IAAA,wDAAiB/B,KAAKC,cAAa,aAAa,oBAAoB+B,MAAM,SACtEF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACLhC,KAAKiC,MAAMC,QAGjBJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIA/B,KAAKmC,QAAQD,QACbJ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACPF,EAAA,YAAAC,IAAA,2CAAUK,KAAK,YAAqB,IAAGpC,KAAKmC,QAAQD,Q,CAOxE,kBAAAG,GACIrC,KAAKsB,gB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as o,g as e}from"./p-6b122987.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}';const n=s;const a=class{constructor(o){i(this,o);this.ifxDropdownItem=t(this,"ifxDropdownItem",7);this.icon=undefined;this.href="";this.target="_self";this.hide=false;this.size="l"}handleMenuSize(i){this.size=i.detail}handleEventEmission(){this.ifxDropdownItem.emit(this.el.textContent)}render(){let i=this.href?{href:this.href,target:this.target}:{};return o("a",Object.assign({key:"d1c6f3cbd4554b1018770258e8f47419edc02352"},i,{onClick:()=>this.handleEventEmission(),class:`dropdown-item ${this.size==="s"?"small":""} ${this.hide?"hide":""}`}),this.icon&&o("ifx-icon",{key:"b814d88ad14f00b04357b5549ae5a5b24adc1b6b",class:"icon",icon:this.icon}),o("span",{key:"49587568db0c0a4f76f9fad0873a6072a698c8ad"},o("slot",{key:"ccfdb428ffa6d9053c0ff9dc3b6b39469e09f208"})))}get el(){return e(this)}};a.style=n;export{a as ifx_dropdown_item};
-//# sourceMappingURL=p-27a52d0b.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownItemCss","IfxDropdownItemStyle0","DropdownItem","handleMenuSize","event","this","size","detail","handleEventEmission","ifxDropdownItem","emit","el","textContent","render","hrefAttr","href","target","h","Object","assign","key","onClick","class","hide","icon"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: tokens.$ifxSize100;\n  font-family: var(--ifx-font-family);\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &.small {\n    & span {\n      font-size: 14px;\n    }\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.icon {\n  margin-right: 4px;\n}","// dropdown-item.tsx\nimport { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    let hrefAttr = this.href ? { href: this.href, target: this.target } : {};\n    return (\n      <a {...hrefAttr} onClick={() => this.handleEventEmission()} class={`dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span>\n          <slot />\n        </span>\n      </a>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAkB,0hBACxB,MAAAC,EAAeD,E,MCQFE,EAAY,M,wGAEA,G,YACE,Q,UACD,M,UACA,G,CAKxB,cAAAC,CAAeC,GACbC,KAAKC,KAAOF,EAAMG,M,CAGpB,mBAAAC,GACEH,KAAKI,gBAAgBC,KAAKL,KAAKM,GAAGC,Y,CAGpC,MAAAC,GACE,IAAIC,EAAWT,KAAKU,KAAO,CAAEA,KAAMV,KAAKU,KAAMC,OAAQX,KAAKW,QAAW,GACtE,OACEC,EAAA,IAAAC,OAAAC,OAAA,CAAAC,IAAA,4CAAON,EAAQ,CAAEO,QAAS,IAAMhB,KAAKG,sBAAuBc,MAAO,iBAAiBjB,KAAKC,OAAS,IAAM,QAAU,MAAMD,KAAKkB,KAAO,OAAS,OAC1IlB,KAAKmB,MAAQP,EAAA,YAAAG,IAAA,2CAAUE,MAAM,OAAOE,KAAMnB,KAAKmB,OAChDP,EAAA,QAAAG,IAAA,4CACEH,EAAA,QAAAG,IAAA,8C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-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:"2f35138e87796c57dff7cf5eb92001781a714edc","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"7739a2f8c71f851d1e58c0e77518107677cd2e85"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"f4c340136b918db9873ca8dfe3d8cbbbc126c3ce",class:t},o("button",{key:"ff455893ab4ccfce6382fbd304b3feb22972dffc","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"52cb44e3d84fdd10fb238ff8ba567feab8f9d0c1",icon:"cross16"})),o("div",{key:"ded62ccc8896056a6b0780474b649b7830009103",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"c8c60396c154768cd9ab9b23eaf036dd5b639ee3",class:"tooltip-dismissible-header"},this.header),o("div",{key:"27ca68485ffb44194f4f1e74651fd28e2a45162d",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"d871c1cf15d1511978a9c83ef11c5ab5854f0921",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:"ba9d2b4b3b4434eaed8faa6db2e641b6a30f0aa3",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"5235880e4a3543e53708839bfe7577880c93e5c6",class:i},this.text,o("svg",{key:"89c655f203ba0b43a29d30b84d4cbbce5437e361",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:"0463ad51e72f3d994faaf8d9f46dc614525715dd",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"8d8f48ea56f1ffb6c164e2ae93777ac14749d825",class:e},o("slot",{key:"8565dbb82773678e702fae9b74de36e81be53b70",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:"4a1c19770dcf69aa9888c281f85e587812844e8e",class:"tooltip-extended-content"},this.header&&o("div",{key:"e077cd93e962cc66722e927bb3bded9f8fabbd43",class:"tooltip-extended-header"},this.header),o("div",{key:"d4564db6662ce4da5bd976232cc6e46d379ab843",class:"tooltip-extended-body"},this.text)),o("svg",{key:"5c9233e4d1c39fb4fe7522f7388d9018addbe7ca",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:"5e20178a7ef43d349f10d29d4fd4a1dc31166e21",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-2d2d6bff.entry.js.map

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

@@ -1 +0,0 @@
-{"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-32fc3ce3.entry.js

@@ -1,2 +0,0 @@
-import{r,h as o}from"./p-6b122987.js";const s=".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";const a=s;const c=class{constructor(o){r(this,o)}render(){return o("div",{key:"2c7435f309112c640c3ff68a244d3c663ceb5b7a",class:"dropdown-separator"})}};c.style=a;export{c as ifx_dropdown_separator};
-//# sourceMappingURL=p-32fc3ce3.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,g as i}from"./p-6b122987.js";const h=".list-entry{display:flex;align-items:center;margin-top:8px;align-self:stretch}";const n=h;const r=class{constructor(s){t(this,s);this.ifxListEntryChange=e(this,"ifxListEntryChange",7);this.value=undefined;this.label=undefined;this.type=undefined}valueChanged(t){if(t){this.host.setAttribute("value","true")}else{this.host.removeAttribute("value")}}handleFilterEntryChange(t){this.value=t.detail;this.ifxListEntryChange.emit({label:this.label,value:this.value,type:this.type})}render(){return s("div",{key:"5ff1bfbd21d708cd8c4b420e13f8b83728cdcf7e",class:"wrapper"},this.type==="checkbox"?s("div",{class:"list-entry"},s("ifx-checkbox",{size:"s",checked:this.value},this.label)):s("div",{class:"list-entry"},s("ifx-radio-button",{size:"s",checked:this.value},this.label)))}get host(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};r.style=n;export{r as ifx_list_entry};
-//# sourceMappingURL=p-360d9e44.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as t,h as s}from"./p-6b122987.js";const i=":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";const o=i;const n=class{constructor(s){t(this,s);this.isOpen=false;this.theme="default";this.variant=undefined;this.size="m";this.disabled=undefined;this.hideArrow=false}render(){return s("ifx-button",{key:"4dc468fdf8211511a97d58441059b0ca44bb880c",variant:this.variant,theme:this.theme,size:this.size,disabled:this.disabled,class:"dropdown-trigger-button"},s("slot",{key:"5e77a7b367905623309508c784233784685caf94"}),!this.hideArrow&&s("ifx-icon",{key:"c60c753f1d57a4ab819a680c48fa1664704dc42b",icon:"chevron-down-12",class:`icon${this.isOpen?" rotate":""}`}))}};n.style=o;export{n as ifx_dropdown_trigger_button};
-//# sourceMappingURL=p-379a2090.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownTriggerButtonCss","IfxDropdownTriggerButtonStyle0","DropdownItem","render","h","key","variant","this","theme","size","disabled","class","hideArrow","icon","isOpen"],"sources":["src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.scss?tag=ifx-dropdown-trigger-button&encapsulation=shadow","src/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n}\n\n.rotate {\n  transition: transform 0.2s ease-in-out;\n  transform: rotate(-180deg);\n  margin-top: 0em;\n}\n\n.icon {\n  margin-top: 0em;\n  transition: transform 0.2s ease-in-out;\n}\n","// dropdown-trigger-button.tsx\nimport { Component, Prop, h } from \"@stencil/core\";\nimport { IOpenable } from '../IOpenable';\n\n@Component({\n  tag: 'ifx-dropdown-trigger-button',\n  styleUrl: 'dropdown-trigger-button.scss',\n  shadow: true\n})\n\nexport class DropdownItem implements IOpenable {\n  @Prop() isOpen: boolean = false;\n\n  @Prop() theme: 'default' | 'danger' | 'inverse' = 'default';\n  @Prop() variant: 'primary';\n  @Prop() size: 's' | 'm' = 'm';\n  @Prop() disabled: boolean;\n  @Prop() hideArrow: boolean = false;\n\n  render() {\n    return (\n      <ifx-button\n        variant={this.variant}\n        theme={this.theme}\n        size={this.size}\n        disabled={this.disabled}\n        class=\"dropdown-trigger-button\"\n      >\n        <slot />\n        {!this.hideArrow &&\n          <ifx-icon icon=\"chevron-down-12\" class={`icon${this.isOpen ? ' rotate' : ''}`} />\n        }\n      </ifx-button>\n    )\n  }\n}"],"mappings":"2CAAA,MAAMA,EAA2B,gLACjC,MAAAC,EAAeD,E,MCSFE,EAAY,M,qCACG,M,WAEwB,U,iCAExB,I,uCAEG,K,CAE7B,MAAAC,GACE,OACEC,EAAA,cAAAC,IAAA,2CACEC,QAASC,KAAKD,QACdE,MAAOD,KAAKC,MACZC,KAAMF,KAAKE,KACXC,SAAUH,KAAKG,SACfC,MAAM,2BAENP,EAAA,QAAAC,IAAA,8CACEE,KAAKK,WACLR,EAAA,YAAAC,IAAA,2CAAUQ,KAAK,kBAAkBF,MAAO,OAAOJ,KAAKO,OAAS,UAAY,O","ignoreList":[]}