@infineon/infineon-design-system-stencil 30.10.0--canary.1702.6c63d2d857f4174f3e9f8e7b7cb49f6bca39238a.0 → 30.10.0

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","IfxCheckboxStyle0","Checkbox","constructor","hostRef","this","disabled","checked","error","size","indeterminate","handleCheckbox","inputElement","internalChecked","internalIndeterminate","value","undefined","internals","setFormValue","ifxChange","emit","isChecked","toggleCheckedState","newVal","valueChanged","newValue","oldValue","indeterminateChanged","handleKeydown","event","keyCode","preventDefault","componentWillLoad","componentDidRender","formResetCallback","getCheckedClassName","render","slot","el","innerHTML","hasSlot","h","key","class","type","hidden","ref","onChange","bind","id","tabindex","onClick","onKeyDown","role","toString","icon"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family);\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (this.inputElement.indeterminate) {\n        this.internalChecked = true;\n        this.internalIndeterminate = false;\n      } else {\n        this.internalChecked = !this.internalChecked;\n      }\n      \n      if (this.internalChecked) {\n        if (this.value !== undefined) {\n          this.internals.setFormValue(this.value);\n        } else {\n          this.internals.setFormValue(\"on\")\n        }\n      } else {\n        this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n\n    if (slot) {\n      hasSlot = true;\n    }\n\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && <ifx-icon icon=\"check-12\"  aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["radioButtonCss","IfxRadioButtonStyle0","RadioButton","constructor","hostRef","this","disabled","error","size","internalChecked","hasSlot","componentWillLoad","fallbackInput","document","createElement","type","hidden","el","appendChild","HTMLElement","prototype","internals","attachInternals","e","console","warn","checked","querySelector","innerHTML","trim","handleCheckedChange","newValue","updateFormValue","_a","setFormValue","value","name","handleRadioButtonClick","event","stopPropagation","inputElement","click","ifxChange","emit","changeEvent","CustomEvent","bubbles","composed","detail","dispatchEvent","handleKeyDown","ev","includes","key","preventDefault","PointerEvent","handleExternalChange","target","tagName","toLowerCase","getAttribute","render","h","role","String","class","onClick","tabindex","ref"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n}\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, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sidebarCss","IfxSidebarStyle0","ACTIVE","ACTIVE_SECTION","SIDEBAR_ITEM","Sidebar","constructor","hostRef","this","applicationName","initialCollapse","showFooter","showHeader","termsOfUse","imprint","privacyPolicy","target","currentYear","Date","getFullYear","copyrightText","internalTermsofUse","internalImprint","internalPrivacyPolicy","internalShowFooter","activeItem","expandActiveItems","expandRecursively","async","parent","isItemExpandable","active","currRes","children","getSidebarMenuItems","i","length","Math","max","expandMenu","topLevelItems","el","adjustTopBorder","tagName","shadowRoot","querySelector","classList","add","contains","allIfxTitles","querySelectorAll","forEach","element","nextSibling","nextElementSibling","addPaddingToTheLastItem","sidebarItem","sidebarChildItems","childItem","childNavItem","getNavItem","isChildItemExpandable","handleClassList","adjustItemsPadding","sidebarItems","toUpperCase","isFirstSidebarItemExpandable","previousSidebarItem","previousSidebarNavItem","sidebarNavItem","isSidebarItemExpandable","componentDidLoad","setInitialActiveItem","applyActiveSectionToParent","_a","handleItem","firstActiveFoundInGroup","item","isActive","handleBorderIndicatorDisplacement","setAttribute","hasChildren","hasActiveChild","clickedItemSection","getActiveItemSection","isOpen","containsActiveSection","type","className","clickedItem","activeMenuItemSection","isMenu","removeActiveClassesRecursively","removeClasses","root","querySidebarItems","child","remove","getAttribute","menuItem","handleSidebarItemInteraction","event","detail","subMenus","menu","menuItemSection","iteratedComponent","activeAttributeValue","handleSidebarItemActivated","parentElement","componentWillLoad","trim","render","h","key","class","width","height","viewBox","fill","xmlns","d","id","href"],"sources":["src/components/navigation/sidebar/sidebar.scss?tag=ifx-sidebar&encapsulation=shadow","src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  height: 100%;\n  display: inline-flex;\n}\n\n.sidebar__container {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-right: 1px solid #EEEDED;\n  width: 264px;\n  height: 100%;\n  font-family: var(--ifx-font-family);\n\n  & .sidebar__top-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 0px;\n    flex: 1 1 auto;\n    order: 0;\n    z-index: 0;\n    width: 100%;\n    overflow-y: auto;\n\n    //max-height: 440px;\n    //overflow-y: auto;\n\n    & .sidebar__nav-bar {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 32px;\n      background-color: tokens.$ifxColorBaseWhite;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n      width: 100%;\n\n      & .sidebar__nav-bar-logo {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-start;\n        padding: 0px;\n        gap: tokens.$ifxSpace200;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & .sidebar__nav-bar-logo-img {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          padding: 0px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n\n          & svg {\n            width: 91px;\n            height: tokens.$ifxSize500;\n          }\n        }\n\n        & .sidebar__nav-bar-logo-text {\n          font-style: normal;\n          font-weight: tokens.$ifxFontWeightSemibold;\n          font-size: tokens.$ifxFontSizeM;\n          line-height: tokens.$ifxLineHeightM;\n          display: flex;\n          align-items: center;\n          color: tokens.$ifxColorBaseBlack;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n          white-space: pre-wrap;\n          word-wrap: break-word;\n          overflow-wrap: anywhere;\n        }\n      }\n    }\n\n    & .sidebar__nav-container {\n      scrollbar-gutter: stable;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 12px 32px;\n      flex: 1 1 auto;\n      order: 1;\n      width: 100%;\n      // overflow-y: auto;\n\n      & ::slotted(*) {\n        width: 100%;\n      }\n    }\n  }\n\n  & .sidebar__footer-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    padding: 0px 32px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 1;\n    z-index: 1;\n\n    & .sidebar__footer-wrapper {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 24px 0px;\n      gap: tokens.$ifxSpace200;\n      border-top: 1px solid #EEEDED;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n      width: 100%;\n\n\n      & .sidebar__footer-wrapper-top-links {\n        display: flex;\n        align-items: flex-start;\n        padding: 0px;\n        gap: 12px;\n        flex: none;\n        order: 0;\n        align-self: stretch;\n        flex-grow: 0;\n        flex-wrap: wrap;\n\n        & a {\n          font: tokens.$ifxBodyBody04;\n          display: flex;\n          text-decoration: none;\n          align-items: center;\n          color: tokens.$ifxColorBaseBlack;\n          flex: none;\n          flex-grow: 0;\n\n          &:hover {\n            color: #08665C;\n          }\n\n          &:focus {\n            outline: none;\n            color: #08665C;\n          }\n        }\n      }\n\n      & .sidebar__footer-wrapper-bottom-links {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n\n        & span {\n          font: tokens.$ifxBodyBody04;\n          text-decoration: none;\n          color: tokens.$ifxColorEngineering500;\n          flex: none;\n          order: 1;\n          flex-grow: 0;\n          white-space: pre-wrap;\n          word-wrap: break-word;  \n          overflow-wrap: anywhere;\n\n          &:hover {\n            cursor: initial;\n          }\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Prop, State, Listen } from '@stencil/core';\n\nconst ACTIVE = 'active';\nconst ACTIVE_SECTION = 'active-section';\nconst SIDEBAR_ITEM = '.sidebar__nav-item';\n\n@Component({\n  tag: 'ifx-sidebar',\n  styleUrl: 'sidebar.scss',\n  shadow: true\n})\n\nexport class Sidebar {\n  @Element() el;\n  @Prop() applicationName: string = ''\n  @Prop() initialCollapse: boolean = true\n  @Prop() showFooter: boolean = true\n  @Prop() showHeader: boolean = true;\n  @Prop() termsOfUse: string = \"#\"\n  @Prop() imprint: string = \"#\"\n  @Prop() privacyPolicy: string = \"#\"\n  @Prop() target: string = \"_blank\"\n  @State() currentYear: number = new Date().getFullYear()\n  @Prop() copyrightText: string = '© 1999 - ' + this.currentYear + ' Infineon Technologies AG'\n  @State() internalTermsofUse: string = \"\"\n  @State() internalImprint: string = \"\"\n  @State() internalPrivacyPolicy: string = \"\"\n  @State() internalShowFooter: boolean = true\n\n  @State() activeItem: HTMLElement | null = null;\n\n  expandActiveItems(){\n    const expandRecursively = async (parent) => {\n      if(await parent.isItemExpandable() !== true){\n        if(parent.active) return 1;\n        return 0;\n      }\n      let currRes = 0;\n      const children = this.getSidebarMenuItems(parent);\n      for(let i = 0; i < children.length; i++){\n        currRes = Math.max(currRes, await expandRecursively(children[i]));\n      }\n      if(currRes > 0){\n        if(currRes == 1){\n          parent.expandMenu(false);\n        }else{\n          parent.expandMenu(true);\n        }\n      }\n\n      return (currRes ? currRes+1 : 0);\n    }\n\n    const topLevelItems = this.getSidebarMenuItems(this.el);\n    for(let i = 0; i < topLevelItems.length; i++){\n      expandRecursively(topLevelItems[i])\n    }\n  }\n\n  adjustTopBorder() {\n    const children = this.el.children;\n    if(!children.length) return;\n    if(children[0].tagName === 'IFX-SIDEBAR-TITLE'){\n      children[0].shadowRoot.querySelector('.sidebar__title').classList.add('no-top-border')\n    }\n    \n    if(children[0].tagName === 'IFX-SIDEBAR-ITEM' && children[0].shadowRoot.querySelector('div > a').classList.contains('header__section')){\n      children[0].shadowRoot.querySelector('div > a').classList.add('no-top-border')\n    }\n\n    const allIfxTitles = this.el.querySelectorAll('ifx-sidebar-title');\n    allIfxTitles.forEach(element => {\n      const nextSibling = element.nextElementSibling;\n      if(nextSibling && nextSibling.tagName === 'IFX-SIDEBAR-ITEM' && nextSibling.shadowRoot.querySelector('div > a').classList.contains('header__section')){\n        nextSibling.shadowRoot.querySelector('div > a').classList.add('no-top-border')\n      }\n    });\n  }\n\n  async addPaddingToTheLastItem(sidebarItem) {\n    const sidebarChildItems = this.getSidebarMenuItems(sidebarItem)\n\n    for(let i = 0; i < sidebarChildItems.length; i++){\n\n      const childItem = sidebarChildItems[i];\n      const childNavItem = this.getNavItem(childItem.shadowRoot);\n      const isChildItemExpandable = await childItem.isItemExpandable();\n\n      if(isChildItemExpandable) {\n        this.addPaddingToTheLastItem(childItem);\n      }\n\n      if(i === sidebarChildItems.length-1){\n        this.handleClassList(childNavItem, 'add', 'extra-padding__bottom');\n      }\n    }\n  }\n\n  async adjustItemsPadding() {\n    const sidebarItems = this.el.children;\n\n    if(sidebarItems.length === 0) return;\n\n    // Processing first item\n    if(sidebarItems[0].tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n      const isFirstSidebarItemExpandable = sidebarItems[0].isItemExpandable();\n      if(isFirstSidebarItemExpandable) {\n        this.addPaddingToTheLastItem(sidebarItems[0]);\n      }\n    }\n\n    // Processing remaining items\n    for(let i = 1; i < sidebarItems.length; i++){\n\n      const sidebarItem = sidebarItems[i];\n      const previousSidebarItem = sidebarItems[i-1];\n      const previousSidebarNavItem = this.getNavItem(previousSidebarItem.shadowRoot);\n\n      if(sidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-TITLE') {\n        \n        if(previousSidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && previousSidebarNavItem && !this.handleClassList(previousSidebarNavItem, 'contains', 'header__section')) {\n          this.handleClassList(previousSidebarNavItem, 'add', 'extra-padding__bottom');\n        }\n\n      } else if(sidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n\n        const sidebarNavItem = this.getNavItem(sidebarItem.shadowRoot);\n\n        if(previousSidebarItem.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && previousSidebarNavItem && !this.handleClassList(previousSidebarNavItem, 'contains', 'header__section') && this.handleClassList(sidebarNavItem, 'contains', 'header__section')) {\n          this.handleClassList(previousSidebarNavItem, 'add', 'extra-padding__bottom');\n        }\n\n        const isSidebarItemExpandable = await sidebarItem.isItemExpandable();\n\n        if(isSidebarItemExpandable) {\n          this.addPaddingToTheLastItem(sidebarItem);\n        }\n      }\n    }\n\n  }\n  \n  componentDidLoad() {\n    this.adjustTopBorder();\n    this.setInitialActiveItem();\n    if(!this.initialCollapse){\n      this.expandActiveItems();\n    }\n    this.adjustItemsPadding();\n    this.applyActiveSectionToParent(this.el);\n  }\n\n  getSidebarMenuItems(el = this.el) {\n    const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n    if (sidebarItems.length === 0) {\n      return el.shadowRoot?.querySelectorAll('ifx-sidebar-item');\n    }\n    return sidebarItems;\n  }\n\n  setInitialActiveItem() {\n    const handleItem = (parent) => {\n      const children = this.getSidebarMenuItems(parent);\n      let firstActiveFoundInGroup = false;\n\n      children?.forEach(item => {\n        // If the item is active and it's the first active one in its group\n        if (this.isActive(item) && !firstActiveFoundInGroup) {\n          firstActiveFoundInGroup = true;\n          this.handleBorderIndicatorDisplacement(item);\n        }\n        // If the item is active but it's not the first one in its group\n        else if (this.isActive(item) && firstActiveFoundInGroup) {\n          item.setAttribute('active', 'false'); // Set the 'active' attribute to 'false'\n        }\n\n\n        // If the clicked item is a menu and doesn't have any active children\n        if (this.hasChildren(item.shadowRoot) && !this.hasActiveChild(item.shadowRoot)) {\n          const clickedItemSection = this.getActiveItemSection(item);\n          this.handleClassList(clickedItemSection, 'remove', 'active-section');\n        }\n        // If clickedItem is an opened menu and it contains another menu with 'active-section'\n        if (this.hasChildren(item.shadowRoot) && this.isOpen(item.shadowRoot) && this.containsActiveSection(item)) {\n          const clickedItemSection = this.getActiveItemSection(item);\n          this.handleClassList(clickedItemSection, 'remove', 'active-section');\n        }\n\n        // Recursive call for child items\n        if (this.hasChildren(item.shadowRoot)) {\n          handleItem(item.shadowRoot);\n        }\n      });\n    }\n    // Start with the top-level items\n    const topLevelItems = this.getSidebarMenuItems(this.el);\n    topLevelItems.forEach(handleItem);\n  }\n\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n\n  getActiveItemSection(item) {\n    return this.getNavItem(item.shadowRoot);\n  }\n\n\n  getNavItem(el) {\n    return el?.querySelector('.sidebar__nav-item')\n  }\n\n  hasChildren(el) {\n    return el?.querySelector('.item__arrow-wrapper') !== null ? true : false;\n  }\n\n\n  handleBorderIndicatorDisplacement(clickedItem) {\n    // Recursive function to handle each item\n    const handleItem = (item) => {\n      // Check if current item is active or the one that was clicked\n      const isActive = this.isActive(item) || item === clickedItem;\n\n      if (isActive) {\n        const activeMenuItemSection = this.getActiveItemSection(item);\n        const isMenu = this.hasChildren(activeMenuItemSection);\n\n        if (isMenu) {\n          this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n        }\n      }\n\n      // Recursive call for child items\n      const children = this.getSidebarMenuItems(item);\n      children.forEach(handleItem);\n    };\n\n    // Start with the top-level items\n    const topLevelItems = this.getSidebarMenuItems(this.el);\n    topLevelItems.forEach(handleItem);\n  }\n\n\n  removeActiveClassesRecursively() {\n    const removeClasses = (root) => {\n      const children = this.querySidebarItems(root);\n      children.forEach((child) => {\n        const sidebarItem = child.shadowRoot.querySelector(SIDEBAR_ITEM);\n        sidebarItem.classList.remove(ACTIVE_SECTION);\n        sidebarItem.classList.remove(ACTIVE);\n        if (child.getAttribute('active')) {\n          child.setAttribute('active', 'false');\n        }\n        removeClasses(child.shadowRoot);\n      });\n    }\n    removeClasses(this.el);\n    if (this.activeItem) {\n      this.activeItem.setAttribute('active', 'false');\n    }\n    this.activeItem = null;\n  }\n\n  hasActiveChild(menuItem) {\n    const children = this.getSidebarMenuItems(menuItem);\n    if (children) {\n      for (let child of children) {\n        // If the child item is active\n        if (this.isActive(child)) {\n          return true;\n        }\n        // If the child item has children, recurse into them\n        else if (this.hasChildren(child.shadowRoot)) {\n          if (this.hasActiveChild(child.shadowRoot)) {\n            return true;\n          }\n        }\n      }\n    }\n    return false;\n  }\n\n\n  @Listen('ifxSidebarMenu')\n  handleSidebarItemInteraction(event: CustomEvent) {\n    // This method can be used to handle the ifxSidebarMenu event\n    // Get the element that triggered the event\n    const clickedItem = event.detail;\n\n    // If the clicked item is not a menu OR is a menu that has an active child\n    if (!this.hasChildren(clickedItem.shadowRoot) || this.hasActiveChild(clickedItem.shadowRoot)) {\n      this.handleBorderIndicatorDisplacement(clickedItem);\n    }\n\n    // If the clicked item is a menu and doesn't have any active children\n    if (this.hasChildren(clickedItem.shadowRoot) && !this.hasActiveChild(clickedItem.shadowRoot)) {\n      const clickedItemSection = this.getActiveItemSection(clickedItem);\n      this.handleClassList(clickedItemSection, 'remove', 'active-section');\n    }\n\n    // If clickedItem is an opened menu and it contains another menu with 'active-section'\n    if (this.hasChildren(clickedItem.shadowRoot) && this.isOpen(clickedItem.shadowRoot) && this.containsActiveSection(clickedItem)) {\n      const clickedItemSection = this.getActiveItemSection(clickedItem);\n      this.handleClassList(clickedItemSection, 'remove', 'active-section');\n    }\n  }\n\n  isOpen(menuItem) {\n    return this.getNavItem(menuItem).classList.contains('open') ? true : false;\n  }\n\n  containsActiveSection(menuItem) {\n    const children = this.getSidebarMenuItems(menuItem);\n    for (let child of children) {\n      if (this.getNavItem(child.shadowRoot).classList.contains('active-section') || (this.hasChildren(child.shadowRoot) && this.containsActiveSection(child.shadowRoot))) {\n        this.handleClassList(child, 'add', 'active-section')\n        return true;\n      }\n    }\n    return false;\n  }\n\n  applyActiveSectionToParent(el) {\n    // Get all submenus of the given element\n    const subMenus = this.getSidebarMenuItems(el);\n\n    subMenus?.forEach(menu => {\n      // If this submenu has an active child, add active-section class to it\n      if (this.hasActiveChild(menu.shadowRoot)) {\n        const menuItemSection = this.getActiveItemSection(menu);\n        this.handleClassList(menuItemSection, 'add', 'active-section');\n      }\n\n      // Apply to submenu's children\n      this.applyActiveSectionToParent(menu.shadowRoot);\n    });\n  }\n\n\n\n  querySidebarItems(el) {\n    return el.querySelectorAll('ifx-sidebar-item')\n  }\n\n  isActive(iteratedComponent) {\n    const activeAttributeValue = iteratedComponent.getAttribute('active');\n    const isActive = activeAttributeValue === 'true';\n    return isActive;\n  }\n\n  @Listen('ifxSidebarNavigationItem')\n  handleSidebarItemActivated(event: CustomEvent) {\n\n    this.removeActiveClassesRecursively();\n\n    this.activeItem = event.detail;\n    this.activeItem.setAttribute('active', 'true');\n\n    // Get the parent element of the activated item\n    const parent = this.getNavItem(event.detail.parentElement.parentElement.parentElement);\n    if (parent) {\n      this.handleClassList(parent, 'add', 'active-section');\n    }\n  }\n\n  componentWillLoad() {\n    this.internalTermsofUse = this.termsOfUse.trim();\n    this.internalPrivacyPolicy = this.privacyPolicy.trim();\n    this.internalImprint = this.imprint.trim();\n    this.internalShowFooter = this.showFooter;\n    if(this.internalShowFooter && !this.internalImprint && !this.internalPrivacyPolicy && !this.internalTermsofUse && !this.copyrightText){\n      this.internalShowFooter = false;\n    }\n  }\n  \n  render() {\n    return (\n      <div aria-label=\"a navigation sidebar\" aria-value={this.applicationName} class='sidebar__container'>\n        <div class='sidebar__top-container'>\n        {\n          this.showHeader && \n          <div class=\"sidebar__nav-bar\">\n            <div class=\"sidebar__nav-bar-logo\">\n              <div class='sidebar__nav-bar-logo-img'>\n                <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <g clip-path=\"url(#clip0_2396_2480)\">\n                    <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n                    <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n                  </g>\n                  <defs>\n                    <clipPath id=\"clip0_2396_2480\">\n                      <rect width=\"91\" height=\"40\" fill=\"white\" />\n                    </clipPath>\n                  </defs>\n                </svg>              </div>\n              <div class='sidebar__nav-bar-logo-text'>{this.applicationName}</div>\n            </div>\n          </div>\n        }\n          <div class=\"sidebar__nav-container\">\n            <slot />\n          </div>\n        </div>\n\n        {\n          this.internalShowFooter &&\n          <div class='sidebar__footer-container'>\n            <div class=\"sidebar__footer-wrapper\">\n            {\n              (this.internalTermsofUse || this.internalImprint || this.internalPrivacyPolicy) &&\n              <div class='sidebar__footer-wrapper-top-links'>\n                  {\n                    this.internalTermsofUse !== ''  && <a target={this.target} href={this.internalTermsofUse}>Terms of use</a>\n                  }\n                  {\n                    this.internalImprint !== '' && <a target={this.target} href={this.internalImprint}>Imprint</a>\n                  }\n                  {\n                    this.internalPrivacyPolicy !== '' && <a target={this.target} href={this.internalPrivacyPolicy}>Privacy policy</a>\n                  }\n              </div>\n            }\n              \n              {\n                this.copyrightText &&\n                <div class='sidebar__footer-wrapper-bottom-links'>\n                    <span>{this.copyrightText}</span>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-e244bae4.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:129px;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const n=a;const r=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}componentDidLoad(){this.updateValuePercent()}render(){return t("div",{key:"b465d077094d60c3bdf74cd5ac862e967841067b",class:"ifx-slider"},this.leftText&&t("span",{key:"5913654492aa7e837b6778935b5cb3a7002308fd",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"26b106c741836e06e127ef3299f0d433de693ab9",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"a slider","aria-value":this.value,"aria-disabled":this.disabled}):t("div",{class:"range-slider__wrapper","aria-label":"a range slider","aria-value":this.value,"aria-disabled":this.disabled},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)})),this.rightIcon&&t("ifx-icon",{key:"4af440423ce265817ecd177c0f74a9ed1d0e5f10",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"627694f955bfc92530e91fdd56ddaa791d7006e7",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"6b564afbe80debd694cd325e6719c5fecd40ca66",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};r.style=n;export{r as ifx_slider};
-//# sourceMappingURL=p-7182fd2d.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sliderCss","IfxSliderStyle0","IfxSlider","constructor","hostRef","this","min","max","step","disabled","showPercentage","type","internalValue","percentage","internalMinValue","internalMaxValue","valueChanged","newValue","updateValuePercent","minValueChanged","maxValueChanged","getRangeSliderWrapper","rangeSliderWrapper","el","shadowRoot","querySelector","handleInputChangeOfRangeSlider","event","target","parseFloat","maxInputRef","value","minInputRef","id","ifxChange","emit","minVal","maxVal","updateZIndexIfRangeSlider","handleOnMouseLeaveOfRangeSlider","sliderWrapper","insertBefore","calculatePercentageValue","num","den","String","toFixed","handleInputChange","roundToValidStep","relativeValue","remainder","minPercent","parentElement","style","setProperty","maxPercent","inputRef","targetId","zIndex","componentWillLoad","undefined","Math","minValueHandle","maxValueHandle","componentDidLoad","render","h","key","class","leftText","leftIcon","icon","ref","onInput","onMouseUp","rightIcon","rightText"],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n  display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 129px;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAY,64FAClB,MAAAC,EAAeD,E,MCOFE,EAAS,MALtB,WAAAC,CAAAC,G,+CAMUC,KAAAC,IAAc,EACdD,KAAAE,IAAc,IACdF,KAAAG,KAAe,EAIfH,KAAAI,SAAoB,MACpBJ,KAAAK,eAA0B,MAK1BL,KAAAM,KAA4B,SAC3BN,KAAAO,cAAwB,EACxBP,KAAAQ,WAAqB,EACrBR,KAAAS,iBAA2B,EAC3BT,KAAAU,iBAA2B,G,CAUpC,YAAAC,CAAaC,GACXZ,KAAKO,cAAgBK,EACrBZ,KAAKa,oB,CAIP,eAAAC,CAAgBF,GACdZ,KAAKS,iBAAmBG,EACxBZ,KAAKa,oB,CAIP,eAAAE,CAAgBH,GACdZ,KAAKU,iBAAmBE,EACxBZ,KAAKa,oB,CAGP,qBAAAG,GACE,MAAMC,EAAqBjB,KAAKkB,GAAGC,WAAWC,cAAc,0BAC5D,OAAOH,C,CAGT,8BAAAI,CAA+BC,GAC7B,MAAMC,EAASD,EAAMC,OACrB,GAAGC,WAAWxB,KAAKyB,YAAYC,OAASF,WAAWxB,KAAK2B,YAAYD,QAAU,EAAG,CAC/E,GAAGH,EAAOK,KAAO,aAAc,CAC7B5B,KAAKyB,YAAYC,MAAQ1B,KAAK2B,YAAYD,K,KACvC,CACH1B,KAAK2B,YAAYD,MAAQ1B,KAAKyB,YAAYC,K,EAG9C,GAAGH,EAAOK,KAAO,aAAc,CAC7B5B,KAAKU,iBAAmBc,WAAWxB,KAAKyB,YAAYC,M,KAC/C,CACL1B,KAAKS,iBAAmBe,WAAWxB,KAAK2B,YAAYD,M,CAEtD1B,KAAK6B,UAAUC,KAAK,CAACC,OAAQ/B,KAAKS,iBAAkBuB,OAAQhC,KAAKU,mBACjEV,KAAKa,qBACLb,KAAKiC,0BAA0BV,EAAOK,G,CAGxC,+BAAAM,CAAgCZ,GAC9B,MAAMC,EAASD,EAAMC,OACrB,MAAMY,EAAgBnC,KAAKgB,wBAC3B,GAAGO,EAAOK,KAAO,aAAc,CAC7BO,EAAcC,aAAapC,KAAKyB,YAAazB,KAAK2B,Y,KAC7C,CACLQ,EAAcC,aAAapC,KAAK2B,YAAa3B,KAAKyB,Y,EAItD,wBAAAY,GACE,MAAMC,GAAOtC,KAAKO,cAAgBP,KAAKC,KAAO,EAC9C,MAAMsC,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5BD,KAAKQ,YAAcgB,WAAWgB,OAAQF,EAAIC,EAAK,MAAME,QAAQ,E,CAG/D,iBAAAC,CAAkBpB,GAChB,MAAMC,EAASD,EAAMC,OACrBvB,KAAKO,cAAgBiB,WAAWD,EAAOG,OACvC1B,KAAK6B,UAAUC,KAAK9B,KAAKO,eACzBP,KAAKqC,2BACLrC,KAAKa,oB,CAGC,gBAAA8B,CAAiBjB,GACvB,MAAMkB,EAAgBlB,EAAQ1B,KAAKC,IACnC,MAAM4C,EAAYD,EAAgB5C,KAAKG,KACvC,GAAI0C,GAAa7C,KAAKG,KAAO,EAAG,CAC9B,OAAOH,KAAKC,IAAM2C,GAAiB5C,KAAKG,KAAO0C,E,KAC1C,CACL,OAAO7C,KAAKC,IAAM2C,EAAgBC,C,EAItC,kBAAAhC,GACE,MAAM0B,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5B,GAAGD,KAAKM,OAAS,SAAS,CACxB,GAAIN,KAAK2B,YAAa,CACpB,MAAMW,GAAOtC,KAAK2C,iBAAiB3C,KAAKS,kBAAoBT,KAAKC,KAAO,EACxE,MAAM6C,EAAcR,EAAIC,EAAO,IAC/BvC,KAAK2B,YAAYoB,cAAcC,MAAMC,YAAY,sBAAuB,GAAGH,K,CAG7E,GAAI9C,KAAKyB,YAAa,CACpB,MAAMa,GAAOtC,KAAK2C,iBAAiB3C,KAAKU,kBAAoBV,KAAKC,KAAO,EACxE,MAAMiD,EAAcZ,EAAIC,EAAO,IAC/BvC,KAAKyB,YAAYsB,cAAcC,MAAMC,YAAY,sBAAuB,GAAGC,K,MAGxE,CAEL,GAAIlD,KAAKmD,SAAU,CACjB,MAAMb,GAAOtC,KAAK2C,iBAAiB3C,KAAKO,eAAiBP,KAAKC,KAAO,EACrE,MAAMsC,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5B,MAAMO,EAAc8B,EAAIC,EAAO,IAC/BvC,KAAKmD,SAASH,MAAMC,YAAY,kBAAmB,GAAGzC,K,GAQ5D,yBAAAyB,CAA0BmB,EAAmB,IAC3C,GAAIA,IAAa,aAAc,CAC7BpD,KAAK2B,YAAYqB,MAAMK,OAAS,IAChCrD,KAAKyB,YAAYuB,MAAMK,OAAS,G,KAC3B,CACLrD,KAAK2B,YAAYqB,MAAMK,OAAS,IAChCrD,KAAKyB,YAAYuB,MAAMK,OAAS,G,EAIpC,iBAAAC,GACE,GAAGtD,KAAK0B,QAAU6B,UAAW,CAC3BvD,KAAKO,eAAiBP,KAAKE,IAAIF,KAAKC,KAAO,C,KACtC,CACLD,KAAKO,cAAgBiD,KAAKtD,IAAIF,KAAKC,IAAKuD,KAAKvD,IAAID,KAAKE,IAAKF,KAAK0B,O,CAGlE1B,KAAKqC,2BAEL,GAAGrC,KAAKyD,iBAAmBF,UAAWvD,KAAKS,iBAAmBT,KAAKyD,oBAC9DzD,KAAKS,iBAAmBT,KAAKC,IAClC,GAAGD,KAAK0D,iBAAmBH,UAAWvD,KAAKU,iBAAmBV,KAAK0D,oBAC9D1D,KAAKU,iBAAmBV,KAAKE,G,CAGpC,gBAAAyD,GACE3D,KAAKa,oB,CAKP,MAAA+C,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cACR/D,KAAKgE,UACJH,EAAA,QAAAC,IAAA,2CAAMC,MAAO,aACV/D,KAAKgE,UAGThE,KAAKiE,UACJJ,EAAA,YAAAC,IAAA,2CAAUI,KAAMlE,KAAKiE,SAAUF,MAAO,YAAY/D,KAAKI,SAAW,YAAc,OAG/EJ,KAAKM,OAAS,SACbuD,EAAA,SACEvD,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKO,cACZH,SAAUJ,KAAKI,SACf+D,IAAMjD,GAAQlB,KAAKmD,SAAWjC,EAC9BkD,QAAU9C,GAAUtB,KAAK0C,kBAAkBpB,GAAM,aACtC,WAAU,aACTtB,KAAK0B,MAAK,gBACP1B,KAAKI,WAGtByD,EAAA,OAAKE,MAAQ,wBAAuB,aAAY,iBAAgB,aAAa/D,KAAK0B,MAAK,gBAAiB1B,KAAKI,UAC3GyD,EAAA,SACEjC,GAAG,aACHtB,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKS,iBACZL,SAAUJ,KAAKI,SACf+D,IAAMjD,GAAQlB,KAAK2B,YAAcT,EACjCkD,QAAU9C,GAAUtB,KAAKqB,+BAA+BC,GACxD+C,UAAY/C,GAAUtB,KAAKkC,gCAAgCZ,KAE7DuC,EAAA,SACEjC,GAAG,aACHtB,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKU,iBACZN,SAAUJ,KAAKI,SACf+D,IAAMjD,GAAQlB,KAAKyB,YAAcP,EACjCkD,QAAU9C,GAAUtB,KAAKqB,+BAA+BC,GACxD+C,UAAY/C,GAAUtB,KAAKkC,gCAAgCZ,MAKlEtB,KAAKsE,WACJT,EAAA,YAAAC,IAAA,2CAAUI,KAAMlE,KAAKsE,UAAWP,MAAO,aAAa/D,KAAKI,SAAW,YAAc,OAEnFJ,KAAKuE,WACJV,EAAA,QAAAC,IAAA,2CAAMC,MAAO,aAAa/D,KAAKI,SAAW,YAAc,MACrDJ,KAAKuE,WAITvE,KAAKK,gBAAmBL,KAAKM,OAAS,UACrCuD,EAAA,QAAAC,IAAA,2CACEC,MAAO,qBAAqB/D,KAAKI,SAAW,YAAc,MAEzDJ,KAAKQ,WAAU,K","ignoreList":[]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["progressBarCss","IfxProgressBarStyle0","ProgressBar","constructor","hostRef","this","value","showLabel","valueChanged","newValue","oldValue","internalValue","componentWillLoad","render","h","key","class","size","style","width"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n  width: 100%;\n}\n\n.progress-bar {\n  height: tokens.$ifxSize200;\n  bottom: 0;\n  right: 0;\n  top: 0;\n  left: 0;\n  display: flex;\n  height: tokens.$ifxSize250;\n  border-radius: tokens.$ifxBorderRadius12;\n  width: 100%; // Ensure the bar itself can grow up to 100% width\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\n  background-color: tokens.$ifxColorEngineering200;\n  font-family: var(--ifx-font-family, sans-serif);\n  \n  &.s {\n    height: 4px;\n  }\n\n  .label {\n    font-style: normal;\n    font-size: tokens.$ifxFontSizeS;\n    font-weight: 400;\n    line-height: tokens.$ifxLineHeightS;\n    color: tokens.$ifxColorBaseWhite;\n  }\n  \n  .progress {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: fit-content;\n    height: 100%;\n    background-color: #0A8276;\n    transition: width 0.2s ease;\n  }\n}","import { Component, Prop, h, State, Watch } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true\n})\nexport class ProgressBar {\n  @Prop() value: number = 0;\n  @Prop() size: string;\n  @Prop() showLabel: boolean = false;\n\n  @State() internalValue: number;\n\n  @Watch('value')\n  valueChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.internalValue = newValue;\n    }\n  }\n\n  \n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n\n\n  render() {\n    return (\n      <div aria-label='a progress bar' aria-value={this.value}  class={`progress-bar ${this.size}`}>\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAiB,0mBACvB,MAAAC,EAAeD,E,MCOFE,EAAW,MALxB,WAAAC,CAAAC,G,UAMUC,KAAAC,MAAgB,EAEhBD,KAAAE,UAAqB,K,CAK7B,YAAAC,CAAaC,EAAkBC,GAC7B,GAAID,IAAaC,EAAU,CACzBL,KAAKM,cAAgBF,C,EAKzB,iBAAAG,GACEP,KAAKM,cAAgBN,KAAKC,K,CAK5B,MAAAO,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,iBAAgB,aAAaV,KAAKC,MAAQU,MAAO,gBAAgBX,KAAKY,QACpFH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWE,MAAO,CAAEC,MAAO,GAAGd,KAAKM,mBAC3CN,KAAKE,WAAaF,KAAKY,OAAS,KAAOZ,KAAKM,gBAAkB,GAAKG,EAAA,QAAAC,IAAA,2CAAMC,MAAM,SAAS,GAAGX,KAAKM,mB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o}from"./p-e244bae4.js";const s=':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 n=s;const i=class{constructor(o){e(this,o);this.segmentSelect=t(this,"segmentSelect",5);this.selected=false}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 o("div",{key:"49c56df2adf407d13685ae7c99b512afa532c6de",class:`segment ${this.selected?"segment--selected":""}`,tabIndex:0,onClick:()=>{this.handleSegmentClick()},onKeyDown:e=>{this.handleSegmentKeyDown(e)}},o("ifx-icon",{key:"c576b2bb7b09ae6ed1946759df7303df36b430dc",icon:this.icon})," ",o("slot",{key:"61d467f2cda3552d5c90e9995ceccdca76c6825c"}))}};i.style=n;export{i as ifx_segment};
-//# sourceMappingURL=p-784660b3.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["segmentCss","IfxSegmentStyle0","Segment","constructor","hostRef","this","selected","handleSegmentClick","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,MANpB,WAAAC,CAAAC,G,uDAW6BC,KAAAC,SAAoB,K,CAG7C,kBAAAC,GACI,GAAIF,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKG,cAAcC,KAAKJ,KAAKK,a,CAGjC,oBAAAC,CAAqBC,GACjB,GAAIA,EAAMC,OAAS,SAAWD,EAAMC,OAAS,QAAS,CAClD,GAAIR,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKG,cAAcC,KAAKJ,KAAKK,a,EAIrC,MAAAI,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,WAAWZ,KAAKC,SAAW,oBAAsB,KACzDY,SAAU,EACVC,QAAS,KAAOd,KAAKE,oBAAoB,EACzCa,UAAYC,IAAOhB,KAAKM,qBAAqBU,EAAE,GAC/CN,EAAA,YAAAC,IAAA,2CAAUM,KAAMjB,KAAKiB,OAAiB,IAACP,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,g as r}from"./p-e244bae4.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}';const n=i;const o=class{constructor(t){e(this,t);this.isLastItem=false;this.hasDropdownMenu=false}handleOutsideClick(e){const t=e.composedPath();if(!t.includes(this.el)){this.closeDropdownMenu()}}handleKeyDown(e){if(e.key==="Enter"||e.key===" "){this.toggleDropdownMenu()}else if(e.key==="Escape"){this.closeDropdownMenu()}}getDropdownMenu(){const e=this.el.shadowRoot.querySelector(".dropdown-menu");return e}menuWrapperEventReEmitter(e){this.emittedElement=e.detail}getMenuIconWrapper(){return this.emittedElement}handleClassList(e,t,r){e.classList[t](r)}closeDropdownMenu(){if(this.hasDropdownMenu){const e=this.getDropdownMenu();const t=this.getMenuIconWrapper();this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","show")}}toggleDropdownMenu(){if(this.hasDropdownMenu){const e=this.getDropdownMenu();const t=this.getMenuIconWrapper();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","show")}}isDropdownMenuOpen(){const e=this.getDropdownMenu();return this.hasDropdownMenu&&e&&e.classList.contains("open")}handleLastItem(){const e=this.el.closest("ifx-breadcrumb").querySelectorAll("ifx-breadcrumb-item");if(this.el===e[e.length-1]){this.isLastItem=true}else this.isLastItem=false}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("breadcrumb-dropdown")}this.handleLastItem()}componentDidUpdate(){this.handleLastItem()}componentWillRender(){this.setHasDropdownMenuState()}setHasDropdownMenuState(){const e=this.getIfxDropdownMenuComponent();if(e){this.hasDropdownMenu=!!e}}getIfxDropdownMenuComponent(){const e=this.el.querySelector("ifx-dropdown-menu");return e}componentDidLoad(){const e=this.getIfxDropdownMenuComponent();if(!this.hasDropdownMenu){const e=this.getMenuIconWrapper();this.handleClassList(e,"toggle","hide")}else{e.isOpen=true}}render(){return t("li",{key:"5779bbe0854a084c33c1bb535655fe484165784e",class:"breadcrumb-parent","aria-current":`${this.isLastItem?"page":""}`},t("li",{key:"63e956424dda4002a84c7da17bfe42b3f7f830b0",role:"button",tabindex:this.hasDropdownMenu?0:-1,class:"breadcrumb-wrapper",onClick:()=>this.toggleDropdownMenu(),"aria-controls":this.uniqueId,"aria-haspopup":"menu","aria-label":"Toggle dropdown menu"},t("slot",{key:"14f66501d9ac8efc9ff9e6b771757e30c70814a6",name:"label"}),t("div",{key:"9620ab0608dc5c74aa39fe321a332421ee4c76b3",id:this.uniqueId,class:"dropdown-menu","aria-expanded":this.isDropdownMenuOpen(),"aria-label":"Dropdown menu"},t("slot",{key:"c4e6e9b1650f2467876f7824201139b369625b3d"}))),!this.isLastItem&&t("span",{key:"5c028ab8720841b8a2777a84d7ad3f933ab43b79",class:"breadcrumb-divider","aria-hidden":"true"},"/"))}get el(){return r(this)}};o.style=n;export{o as ifx_breadcrumb_item};
-//# sourceMappingURL=p-814da9fd.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbItemCss","IfxBreadcrumbItemStyle0","BreadcrumbItem","constructor","hostRef","this","isLastItem","hasDropdownMenu","handleOutsideClick","event","path","composedPath","includes","el","closeDropdownMenu","handleKeyDown","ev","key","toggleDropdownMenu","getDropdownMenu","dropdownMenu","shadowRoot","querySelector","menuWrapperEventReEmitter","emittedElement","detail","getMenuIconWrapper","handleClassList","type","className","classList","menuWrapper","isDropdownMenuOpen","contains","handleLastItem","breadcrumbItems","closest","querySelectorAll","length","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","componentDidUpdate","componentWillRender","setHasDropdownMenuState","getIfxDropdownMenuComponent","componentDidLoad","iconMenuWrapper","isOpen","render","h","class","role","tabindex","onClick","name","id"],"sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px;\n  gap: tokens.$ifxSpace150;\n  min-height: tokens.$ifxSize300;\n  justify-content: center;\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & .breadcrumb-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    position: relative;\n\n    & .dropdown-menu {\n      display: none;\n      position: absolute;\n      top: 20px;\n\n      &.open {\n        display: block;\n      }\n    }\n\n    & a {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family);\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex-direction: column;\n      justify-content: center;\n      padding: 0px;\n      border-bottom: 1px solid #1D1D1D;\n    }\n  }\n\n  & .breadcrumb-divider {\n    width: 10px;\n    height: tokens.$ifxSize200;\n    color: tokens.$ifxColorEngineering200;\n    line-height: 13px;\n    font-size: tokens.$ifxFontSizeXl;\n\n    margin-right: 12px;\n  }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n\n  @State() isLastItem: boolean = false;\n  @Element() el;\n  private emittedElement: HTMLElement;\n  @State() uniqueId: string;\n  @State() hasDropdownMenu: boolean = false;\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      this.toggleDropdownMenu();\n    } else if (ev.key === 'Escape') {\n      this.closeDropdownMenu();\n    }\n  }\n\n  getDropdownMenu() {\n    const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n    return dropdownMenu\n  }\n\n  @Listen('breadcrumbMenuIconWrapper')\n  menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n    this.emittedElement = event.detail;\n  }\n\n  getMenuIconWrapper(): HTMLElement | undefined {\n    return this.emittedElement;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n  closeDropdownMenu() {\n    if(this.hasDropdownMenu) {\n      const dropdownMenu = this.getDropdownMenu()\n      const menuWrapper = this.getMenuIconWrapper()\n      this.handleClassList(dropdownMenu, 'remove', 'open')\n      this.handleClassList(menuWrapper, 'remove', 'show')\n    }\n  }\n\n  toggleDropdownMenu() { \n    if(this.hasDropdownMenu) {\n      const dropdownMenu = this.getDropdownMenu()\n      const menuWrapper = this.getMenuIconWrapper()\n      this.handleClassList(dropdownMenu, 'toggle', 'open')\n      this.handleClassList(menuWrapper, 'toggle', 'show')\n    }\n  }\n\n  isDropdownMenuOpen(): boolean {\n    const dropdownMenu = this.getDropdownMenu()\n    return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n  }\n\n  handleLastItem() { \n    const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n    if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n      this.isLastItem = true;\n    } else this.isLastItem = false;\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n    }\n    this.handleLastItem()\n  }\n\n  componentDidUpdate() {\n    this.handleLastItem()\n  }\n\n  componentWillRender() { \n    this.setHasDropdownMenuState()\n  }\n\n  setHasDropdownMenuState() { \n    const dropdownMenu = this.getIfxDropdownMenuComponent();\n    if(dropdownMenu) {\n      this.hasDropdownMenu = !!dropdownMenu;\n    }\n  }\n\n  getIfxDropdownMenuComponent() { \n    const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n    return dropdownMenu;\n  }\n\n  componentDidLoad() { \n    const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n    if(!this.hasDropdownMenu) { \n      const iconMenuWrapper = this.getMenuIconWrapper();\n      this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n    } else { \n      dropdownMenu.isOpen = true;\n    }\n  }\n\n  render() {\n    return (\n      <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n       <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n          <slot name='label'/>\n          <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n            <slot />\n          </div>\n        </li>\n        {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n      </li>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,a}from"./p-e244bae4.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;flex-direction:column}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}:host(.wrapper--disabled) .wrapper__label{color:#575352}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #575352;background-color:#EEEDED}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#575352}';const i=s;const o=class{constructor(r){e(this,r);this.ifxInput=t(this,"ifxInput",7);if(r.$hostElement$["s-ei"]){this.internals=r.$hostElement$["s-ei"]}else{this.internals=r.$hostElement$.attachInternals();r.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-textarea-${++l}`;this.disabled=false;this.error=false;this.readOnly=false;this.resize="both";this.wrap="soft"}async reset(){this.resetTextarea()}formResetCallback(){this.resetTextarea();this.internals.setFormValue("")}handleOnInput(e){this.value=e.target.value;this.internals.setFormValue(this.value);this.ifxInput.emit(this.value)}resetTextarea(){this.value="";this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){this.internals.setFormValue(this.value)}render(){var e,t;return r(a,{key:"d557bff378899253b1eea26f202a3d934424deac",class:`wrapper \n\t\t\t\t\t\twrapper--${this.error?"error":""}\n\t\t\t\t\t\twrapper--${this.disabled?"disabled":""}`},r("label",{key:"9163e001e0423effcbc9bad56af021acb8fc5229",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),r("div",{key:"ce7ea7607837c9979a984627fb9d762494a211b8",class:"wrapper__textarea"},r("textarea",{key:"6587f63b3d5ef32db9bf4c25ba03246d31a1120e","aria-label":"a textarea","aria-value":this.value,"aria-disabled":this.disabled,id:this.inputId,style:{resize:this.resize},name:this.name?this.name:this.inputId,cols:this.cols,rows:this.rows,maxlength:this.maxlength,wrap:this.wrap,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,onInput:e=>this.handleOnInput(e)})),((t=this.caption)===null||t===void 0?void 0:t.trim())&&r("div",{key:"96f109dfc94c8563ce9b3aacfae00eef4b6a49b2",class:"wrapper__caption"},this.caption.trim()))}static get formAssociated(){return true}};let l=0;o.style=i;export{o as ifx_textarea};
-//# sourceMappingURL=p-8a160977.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","IfxTextareaStyle0","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","readOnly","resize","wrap","reset","resetTextarea","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop } from \"@stencil/core\"\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper \n\t\t\t\t\t\twrapper--${this.error ? 'error' : ''}\n\t\t\t\t\t\twrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"oDAAA,MAAMA,EAAc,k9BACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAAG,SAAoB,MACpBH,KAAAI,MAAiB,MAKjBJ,KAAAK,SAAoB,MACpBL,KAAAM,OAAsD,OAGtDN,KAAAO,KAAgC,M,CAGxC,WAAMC,GACLR,KAAKS,e,CAGN,iBAAAC,GACCV,KAAKS,gBACLT,KAAKW,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACbd,KAAKe,MAASD,EAAEE,OAA+BD,MAC/Cf,KAAKW,UAAUC,aAAaZ,KAAKe,OACjCf,KAAKiB,SAASC,KAAKlB,KAAKe,M,CAGzB,aAAAN,GACCT,KAAKe,MAAQ,GACbf,KAAKW,UAAUQ,YAAY,IAC3BnB,KAAKW,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACCpB,KAAKW,UAAUC,aAAaZ,KAAKe,M,CAGlC,MAAAM,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,kCACCzB,KAAKI,MAAQ,QAAU,4BACvBJ,KAAKG,SAAW,WAAY,MACzCmB,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAU1B,KAAKC,UAC1C0B,EAAA3B,KAAK4B,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAAA,YAAAE,IAAA,wDACY,aAAY,aACVxB,KAAKe,MAAK,gBACPf,KAAKG,SACrB2B,GAAK9B,KAAKC,QACV8B,MAAQ,CAACzB,OAAQN,KAAKM,QACtB0B,KAAOhC,KAAKgC,KAAOhC,KAAKgC,KAAOhC,KAAKC,QACpCgC,KAAOjC,KAAKiC,KACZC,KAAOlC,KAAKkC,KACZC,UAAYnC,KAAKmC,UACjB5B,KAAOP,KAAKO,KACZJ,SAAWH,KAAKG,SAChBiC,SAAWpC,KAAKK,SAChBgC,YAAcrC,KAAKqC,YACnBtB,MAAQf,KAAKe,MACbuB,QAAWxB,GAAMd,KAAKa,cAAcC,QAIpCyB,EAAAvC,KAAKwC,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRzB,KAAKwC,QAAQX,Q,2CAQrB,IAAI3B,EAAa,E","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["stepCss","IfxStepStyle0","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering400;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningf24'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-e244bae4.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:"";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}';const o=a;const n=class{constructor(s){t(this,s);this.ifxTabChange=i(this,"ifxTabChange",7);this.orientation="horizontal";this.activeTabIndex=0;this.fullWidth=false;this.internalActiveTabIndex=0;this.internalFocusedTabIndex=0;this.tabRefs=[];this.tabHeaderRefs=[];this.disabledTabs=[];this.tabObjects=[]}updateBorderOnWindowResize(){this.updateBorderAndFocus()}setActiveAndFocusedTab(t){var i;if(t>=this.tabObjects.length){t=this.tabObjects.length-1}if(t<0){t=0}if(!((i=this.tabObjects[t])===null||i===void 0?void 0:i.disabled)){this.internalActiveTabIndex=t;this.internalFocusedTabIndex=t}}handleTabHeaderChange(t){const i=t.target.getAttribute("slot").replace("tab-","");this.tabObjects[i].header=t.detail;this.tabObjects=[...this.tabObjects]}activeTabIndexChanged(t,i){if(t!==i){this.setActiveAndFocusedTab(t)}}componentWillLoad(){this.internalOrientation=this.orientation.toLowerCase()==="vertical"?"vertical":"horizontal";if(this.internalActiveTabIndex!==this.activeTabIndex){this.ifxTabChange.emit({previousTab:this.internalActiveTabIndex,currentTab:this.activeTabIndex})}this.onSlotChange();this.setActiveAndFocusedTab(this.activeTabIndex);this.updateTabStyles()}updateTabStyles(){this.tabHeaderRefs.forEach(((t,i)=>{t.classList.toggle("active",i===this.internalActiveTabIndex);t.setAttribute("aria-selected",i===this.internalActiveTabIndex?"true":"false")}))}reRenderBorder(){const t=this.el.shadowRoot.querySelector(".active-border");if(t&&this.tabHeaderRefs[this.internalActiveTabIndex]){if(this.orientation==="horizontal"){t.style.left=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;t.style.width=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;t.style.top="";t.style.height=""}else{t.style.top=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;t.style.height=`${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;t.style.left="";t.style.width=""}}}onSlotChange(){const t=this.el.querySelectorAll("ifx-tab");this.tabObjects=Array.from(t).map((t=>({header:t===null||t===void 0?void 0:t.header,disabled:(t===null||t===void 0?void 0:t.disabled)===true,icon:t===null||t===void 0?void 0:t.icon,iconPosition:t===null||t===void 0?void 0:t.iconPosition})));this.tabRefs=Array.from(t);this.tabRefs.forEach(((t,i)=>{t.setAttribute("slot",`tab-${i}`)}))}setDefaultOrientation(){const t=["horizontal","vertical"];const i=this.orientation.toLowerCase();if(!t.includes(i)){this.internalOrientation="horizontal"}else this.internalOrientation=this.orientation}componentDidLoad(){this.updateBorderAndFocus();this.tabHeaderRefs.forEach(((t,i)=>{t.addEventListener("focus",this.onTabFocus(i))}))}onTabFocus(t){return()=>{this.internalFocusedTabIndex=t}}disconnectedCallback(){this.tabHeaderRefs.forEach(((t,i)=>{t.removeEventListener("focus",this.onTabFocus(i))}))}componentDidUpdate(){this.updateBorderAndFocus()}updateBorderAndFocus(){this.reRenderBorder();this.updateTabFocusability()}updateTabFocusability(){this.tabHeaderRefs.forEach(((t,i)=>{t.tabIndex=i===this.internalActiveTabIndex?0:-1}))}focusNextTab(){let t=this.internalFocusedTabIndex+1;while(t<this.tabHeaderRefs.length&&this.tabObjects[t].disabled){t++}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}focusPreviousTab(){let t=this.internalFocusedTabIndex-1;while(t>=0&&this.tabObjects[t].disabled){t--}if(t>=0&&t<this.tabHeaderRefs.length){this.internalFocusedTabIndex=t;this.tabHeaderRefs[t].focus()}}getTabItemClass(t){const i=t===this.internalActiveTabIndex&&!this.tabObjects[t].disabled;const s=this.tabObjects[t].disabled;const e=this.tabObjects[t].iconPosition;return`tab-item ${this.fullWidth?"full-width":""} ${i?"active":""} ${s?"disabled":""} ${"icon__"+e}`}handleClick(t,i){this.ifxTabChange.emit({previousTab:this.internalActiveTabIndex,currentTab:i});if(!t.disabled)this.internalActiveTabIndex=i}handleKeyDown(t){if(t.key==="Tab"){if(t.shiftKey){if(this.internalFocusedTabIndex===0){return}else{t.preventDefault();this.focusPreviousTab()}}else{if(this.internalFocusedTabIndex===this.tabHeaderRefs.length-1){return}else{t.preventDefault();this.focusNextTab()}}}else if(t.key==="Enter"){if(this.internalFocusedTabIndex!==-1&&!this.tabObjects[this.internalFocusedTabIndex].disabled){const t=this.internalActiveTabIndex;this.internalActiveTabIndex=this.internalFocusedTabIndex;this.ifxTabChange.emit({previousTab:t,currentTab:this.internalFocusedTabIndex})}}}render(){var t;return s("div",{key:"b94b74545720034560b78d35909a4757c9239c28","aria-label":"navigation tabs",class:`tabs ${this.internalOrientation}`},s("ul",{key:"9689012ae62d5d22c7f9938bce7a5247d7fd1022",role:"tablist",class:"tabs-list"},(t=this.tabObjects)===null||t===void 0?void 0:t.map(((t,i)=>s("li",{class:this.getTabItemClass(i),ref:t=>this.tabHeaderRefs[i]=t,onMouseDown:t=>t.preventDefault(),onClick:()=>this.handleClick(t,i),"aria-selected":i===this.internalActiveTabIndex?"true":"false","aria-disabled":t.disabled?"true":"false",role:"tab"},(t===null||t===void 0?void 0:t.icon)?s("ifx-icon",{icon:t.icon}):"",t===null||t===void 0?void 0:t.header))),s("div",{key:"0365da7db703747de5996d5b48f1a59ba3ebc3e0",class:"active-border"})),s("div",{key:"53bdc3fbd557dec39cbdea5543ef7e56bf57a156",class:"tab-content"},Array.from(this.tabObjects).map(((t,i)=>s("div",{style:{display:i===this.internalActiveTabIndex?"block":"none"}},s("slot",{name:`tab-${i}`}))))))}get el(){return e(this)}static get watchers(){return{activeTabIndex:["activeTabIndexChanged"]}}};n.style=o;export{n as ifx_tabs};
-//# sourceMappingURL=p-91ac452f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabsCss","IfxTabsStyle0","IfxTabs","constructor","hostRef","this","orientation","activeTabIndex","fullWidth","internalActiveTabIndex","internalFocusedTabIndex","tabRefs","tabHeaderRefs","disabledTabs","tabObjects","updateBorderOnWindowResize","updateBorderAndFocus","setActiveAndFocusedTab","index","length","_a","disabled","handleTabHeaderChange","e","tabIndex","target","getAttribute","replace","header","detail","activeTabIndexChanged","newValue","oldValue","componentWillLoad","internalOrientation","toLowerCase","ifxTabChange","emit","previousTab","currentTab","onSlotChange","updateTabStyles","forEach","tab","classList","toggle","setAttribute","reRenderBorder","borderElement","el","shadowRoot","querySelector","style","left","offsetLeft","width","offsetWidth","top","height","offsetTop","offsetHeight","tabs","querySelectorAll","Array","from","map","icon","iconPosition","setDefaultOrientation","validOrientations","lowercaseOrientation","includes","componentDidLoad","addEventListener","onTabFocus","disconnectedCallback","removeEventListener","componentDidUpdate","updateTabFocusability","focusNextTab","nextIndex","focus","focusPreviousTab","prevIndex","getTabItemClass","isActive","isDisabled","handleClick","handleKeyDown","ev","key","shiftKey","preventDefault","previouslyActiveTabIndex","render","h","class","role","ref","onMouseDown","event","onClick","_","display","name"],"sources":["src/components/tabs/tabs.scss?tag=ifx-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["//ifxTabs.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.tabs {\n  display: flex;\n  font-family: var(--ifx-font-family);\n  width: 100%;\n}\n\n.tabs.horizontal {\n  flex-direction: column;\n}\n\n.tabs.vertical {\n  flex-direction: row;\n}\n\n.tabs-list {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  font-weight: tokens.$ifxFontWeightSemibold;\n}\n\n.tabs-list:focus-within .active-border {\n  display: none;\n}\n\n.active-border {\n  content: \"\";\n  position: absolute;\n  transition: left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out;\n}\n\n.tabs.horizontal .active-border {\n  bottom: 0;\n  left: 0;\n  height: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n.tabs.vertical .tabs-list {\n  flex-direction: column;\n  border-bottom: none;\n}\n\n.tabs.vertical .tab-content {\n  padding-top: 0px;\n  padding-left: 32px;\n}\n\n.tabs:not(.vertical) {\n  & .tab-item {\n    &.full-width { \n      flex: 1;\n    }\n  }\n}\n\n.tab-item {\n  // Reduced padding values\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n  cursor: pointer;\n  position: relative;\n\n  &.icon__right {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n  }\n  \n  &:hover {\n    color: tokens.$ifxColorOcean500;\n  }\n  \n  &:active,\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:focus,\n  &.focus {\n    outline: none;\n    border-radius: 1px;\n    box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    \n    // Assuming .active-border is a sibling of .tab-item\n    +.active-border {\n      display: none; // Hide the active border when the tab is in focus\n    }\n  }\n  \n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n.tabs.vertical .tab-item {\n  border-right: 2px solid transparent;\n  min-width: 7em;\n}\n\n.tabs.vertical .active-border {\n  left: 0;\n  top: 0;\n  width: 2px;\n  background-color: tokens.$ifxColorOcean500;\n}\n\n\n.tab-content {\n  padding-top: 24px;\n  padding-left: 0px;\n  flex-grow: 1;\n}\n\n.tabs.small .tab-item {\n  font-size: tokens.$ifxFontSizeS;\n}","//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\n\n@Component({\n  tag: 'ifx-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true\n})\nexport class IfxTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() orientation: string = \"horizontal\";\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  @Prop() fullWidth: boolean = false;\n\n  @State() internalOrientation: string;\n  @State() internalActiveTabIndex: number = 0;\n  @State() internalFocusedTabIndex: number = 0;\n  @State() tabRefs: HTMLElement[] = [];\n  @State() tabHeaderRefs: HTMLElement[] = [];\n  @State() disabledTabs: string[] = [];\n  @State() tabObjects: any[] = [];\n\n  @Event() ifxTabChange: EventEmitter;\n\n  @Listen('resize', {target: 'window'})\n  updateBorderOnWindowResize() {\n    this.updateBorderAndFocus();\n  }\n\n  setActiveAndFocusedTab(index: number) {\n    if (index >= this.tabObjects.length) {\n      index = this.tabObjects.length - 1;\n    }\n    if (index < 0) {\n      index = 0;\n    }\n    if (!this.tabObjects[index]?.disabled) {\n      this.internalActiveTabIndex = index;\n      this.internalFocusedTabIndex = index;\n    }\n  }\n\n  @Listen('tabHeaderChange')\n  handleTabHeaderChange(e) { \n    const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n    this.tabObjects[tabIndex].header = e.detail;\n    this.tabObjects = [...this.tabObjects]; \n  }\n  \n\n  @Watch('activeTabIndex')\n  activeTabIndexChanged(newValue: number, oldValue: number) {\n    if (newValue !== oldValue) {\n      this.setActiveAndFocusedTab(newValue);\n    }\n  }\n\n\n\n  componentWillLoad() {\n    this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n    if (this.internalActiveTabIndex !== this.activeTabIndex) {\n      this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n    };\n    this.onSlotChange();\n    this.setActiveAndFocusedTab(this.activeTabIndex);\n    this.updateTabStyles();\n  }\n\n  updateTabStyles() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.classList.toggle('active', index === this.internalActiveTabIndex);\n      tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n    });\n  }\n\n\n  // needed for smooth border transition\n  reRenderBorder() {\n    const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n    if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n      if (this.orientation === 'horizontal') {\n\n        borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n        borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n        borderElement.style.top = '';\n        borderElement.style.height = '';\n      } else {\n        borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n        borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n        borderElement.style.left = '';\n        borderElement.style.width = '';\n      }\n    }\n  }\n\n\n  // when a slot is removed / added\n  @Listen('slotchange')\n  onSlotChange() {\n    const tabs = this.el.querySelectorAll('ifx-tab');\n    this.tabObjects = Array.from(tabs).map((tab) => {\n      return {\n        header: tab?.header,\n        disabled: tab?.disabled === true,\n        icon: tab?.icon,\n        iconPosition: tab?.iconPosition\n      }\n    });\n\n    this.tabRefs = Array.from(tabs);\n    this.tabRefs.forEach((tab, index) => {\n      tab.setAttribute('slot', `tab-${index}`);\n    });\n  }\n\n  setDefaultOrientation() {\n    const validOrientations = ['horizontal', 'vertical'];\n    const lowercaseOrientation = this.orientation.toLowerCase();\n\n    if (!validOrientations.includes(lowercaseOrientation)) {\n      this.internalOrientation = 'horizontal';\n    } else this.internalOrientation = this.orientation;\n  }\n\n  componentDidLoad() {\n    this.updateBorderAndFocus();\n    // Add keyboard event listeners for each tab header\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.addEventListener('focus', this.onTabFocus(index));\n    });\n\n  }\n\n  onTabFocus(index) {\n    return () => {\n      this.internalFocusedTabIndex = index;\n    };\n  }\n\n  disconnectedCallback() {\n    // Remove keyboard event listeners when component is unmounted\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.removeEventListener('focus', this.onTabFocus(index));\n    });\n  }\n  componentDidUpdate() {\n    this.updateBorderAndFocus();\n  }\n\n  private updateBorderAndFocus() {\n    this.reRenderBorder()\n    this.updateTabFocusability();\n  }\n\n  private updateTabFocusability() {\n    this.tabHeaderRefs.forEach((tab, index) => {\n      tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n    })\n  }\n\n\n  private focusNextTab() {\n    let nextIndex = this.internalFocusedTabIndex + 1;\n    while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n      nextIndex++;\n    }\n    if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n      this.internalFocusedTabIndex = nextIndex;\n      this.tabHeaderRefs[nextIndex].focus();\n    }\n  }\n\n  private focusPreviousTab() {\n    let prevIndex = this.internalFocusedTabIndex - 1;\n    while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n      prevIndex--;\n    }\n    if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n      this.internalFocusedTabIndex = prevIndex;\n      this.tabHeaderRefs[prevIndex].focus();\n    }\n  }\n\n\n  private getTabItemClass(index: number) {\n    const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n    const isDisabled = this.tabObjects[index].disabled;\n    const iconPosition = this.tabObjects[index].iconPosition\n    return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n  }\n\n  private handleClick(tab, index) {\n    this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n    if (!tab.disabled) this.internalActiveTabIndex = index;\n\n  }\n\n\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Tab') {\n\n      if (ev.shiftKey) {\n        // Shift + Tab\n        if (this.internalFocusedTabIndex === 0) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusPreviousTab();\n        }\n      } else {\n        // Tab\n        if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n          // Allow default behavior to move focus out of component\n          return;\n        } else {\n          ev.preventDefault();\n          this.focusNextTab();\n        }\n      }\n    } else if (ev.key === 'Enter') {\n      if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n        const previouslyActiveTabIndex = this.internalActiveTabIndex;\n        this.internalActiveTabIndex = this.internalFocusedTabIndex;\n        this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\n        <ul role=\"tablist\" class=\"tabs-list\">\n          {this.tabObjects?.map((tab, index) => (\n            <li\n              class={this.getTabItemClass(index)}\n              ref={(el) => (this.tabHeaderRefs[index] = el)}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => this.handleClick(tab, index)}\n              aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n              aria-disabled={tab.disabled ? 'true' : 'false'}\n              role=\"tab\"\n            > \n              {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n              {tab?.header}\n            </li>\n          ))}\n          <div class=\"active-border\"></div>\n        </ul>\n        <div class=\"tab-content\">\n          {Array.from(this.tabObjects).map((_, index) => (\n            <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n              <slot name={`tab-${index}`} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as a}from"./p-e244bae4.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__text-wrapper{padding-bottom:0px}.card__text-wrapper.hasBtn{padding-bottom:16px}.card-text{line-height:1.5rem;font-size:1rem;font-weight:400;white-space:wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}';const r=i;const o=class{constructor(e){t(this,e)}componentWillLoad(){const t=this.el.closest("ifx-card").querySelector("ifx-link");const e=this.el.closest("ifx-card").querySelector("ifx-button");if(t||e){this.hasBtn=true}}render(){return e("div",{key:"fea1823e8000b8699142eefb127eb1716a606bcd",class:`card__text-wrapper ${this.hasBtn?"hasBtn":""}`},e("div",{key:"ee9baf1f210a6bf109669d3dbb075f56cf52ee22",class:`card-text`},e("slot",{key:"d4e94f54325b349d0a908f1812412e4a6ff1adad"})))}get el(){return a(this)}};o.style=r;export{o as ifx_card_text};
-//# sourceMappingURL=p-934704d9.entry.js.map