@infineon/infineon-design-system-stencil 31.0.0--canary.1640.e80c846ce332e4ddd95d97b8ad01c8da2d639e74.0 → 31.0.1--canary.1496.8c737dd1d967a94232501b111e63ebeb3fc3923f.0

package/dist/infineon-design-system-stencil/{p-b642a0c9.entry.js → p-e3bd44e5.entry.js}

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

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

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

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

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as e,g as c}from"./p-3604def6.js";const a=":host{display:block}";const o=a;const r=class{constructor(e){t(this,e);this.tabHeaderChange=s(this,"tabHeaderChange",7);this.icon="";this.iconPosition="left"}componentWillUpdate(){this.tabHeaderChange.emit(this.header)}render(){return e("slot",{key:"68fdfaa881c7619f208c32bf8f1ec579997fc7cf"})}get el(){return c(this)}};r.style=o;export{r as ifx_tab};
+//# sourceMappingURL=p-e7733535.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,g as i}from"./p-3604def6.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const o=a;const s=class{constructor(r){e(this,r);this.ifxClose=t(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return r("div",{class:"close-icon-wrapper"},r("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},r("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}}render(){return this.variant==="info"?r("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},r("div",{class:"info__text-wrapper"},r("div",{class:"info__headline-wrapper"},r("slot",{name:"headline"})),r("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},r("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):r("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&r("div",{class:"icon-wrapper"},r("ifx-icon",{icon:this.icon})),r("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},r("slot",null)),this.closable?this.renderCloseButton():null)}};s.style=o;const l=".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";const n=l;const p=class{constructor(r){e(this,r);this.toggleTemplates=t(this,"toggleTemplates",7);this.fieldError=t(this,"fieldError",7);this.repoDetails={name:"",desc:"",framework:""};this.showDetails=false;this.isTemplatePage=false;this.isLoading=true}authUser(){const e=undefined;const t="http://localhost:6262/?path=/docs/dds-templates--development";const r=undefined;const i=undefined;const a=`https://github.com/login/oauth/authorize?`+`client_id=${e}&`+`redirect_uri=${t}&`+`scope=${r}&`+`state=${i}`;window.open(a,"_blank")}componentDidLoad(){const e=new URL(window.location.href);const t=e.searchParams.get("code");const{templateName:r}=this.getLocalStorageValues();if(t&&this.name===r){this.isTemplatePage=true;this.toggleTemplates.emit("details");this.getUserToken(t)}}getLocalStorageValues(){const e=localStorage.getItem("repo_name");const t=localStorage.getItem("repo_desc");const r=localStorage.getItem("repo_framework");const i=localStorage.getItem("selectedTemplate");return{repoName:e,repoDesc:t,repoFramework:r,templateName:i}}async getUserToken(e){const{repoName:t,repoDesc:r,repoFramework:i,templateName:a}=this.getLocalStorageValues();fetch(`http://dds-templates.eu-central-1.elasticbeanstalk.com/token/${e}/${t}/${r}/${i}/${a}`).then((e=>{if(e.ok){return e.text()}else{return e.text().then((e=>{throw new Error(e)}))}})).then((e=>{if(e){this.isLoading=false;this.repoUrl=e;localStorage.clear()}})).catch((e=>{this.repoError=e.message;console.error("Error:",e.message)}))}handleUserInput(e,t){if(t==="name"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{name:e.target.value})}else if(t==="desc"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{desc:e.target.value})}else if(t==="framework"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{framework:e.target.value})}}submitUserData(){if(this.repoDetails.name&&this.repoDetails.desc&&this.repoDetails.framework){localStorage.setItem("repo_name",this.repoDetails.name);localStorage.setItem("repo_desc",this.repoDetails.desc);localStorage.setItem("repo_framework",this.repoDetails.framework);localStorage.setItem("selectedTemplate",this.name);this.fieldError.emit(false);this.authUser()}else{this.fieldError.emit("All fields are mandatory")}}togglePadding(e){let t=this.el.parentElement;if(t){const r=t.getRootNode();if(r instanceof ShadowRoot){t=r.host.parentElement}else{t=t.parentElement}if(e==="remove"){t.parentElement.style.padding="0px"}else if(e==="add"){t.parentElement.style.padding="4rem 20px"}}}handleCurrentTemplate(e){if(e&&!this.showDetails){this.togglePadding("remove");const t=e.currentTarget;this.toggleTemplates.emit(t);this.showDetails=true}}async toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".react__template-wrapper");if(t){if(!t.classList.contains("hide")&&e){if(t!==e){t.classList.add("hide")}}else{if(this.showDetails){this.showDetails=false}this.togglePadding("add");t.classList.remove("hide")}}}render(){return r("div",{key:"df42f1a8fd4452e706e259c0229d623903393a37"},this.isTemplatePage?r("div",{class:"template__page-wrapper"},!this.repoUrl&&!this.repoError&&r("div",null,r("h3",null,"Your repository is getting ready.."),r("p",null,"This will only take a minute.")),this.isLoading&&!this.repoError&&r("div",null,r("ifx-spinner",{variant:"default",size:"s"})),this.repoUrl&&r("ifx-link",{href:this.repoUrl,target:"_parent",size:"m",variant:"underlined"},"Your repository"),this.repoError&&r("div",null,this.repoError)):r("div",{class:"react__template-container"},r("div",{class:"react__template-wrapper",onClick:e=>this.handleCurrentTemplate(e)},r("div",{class:"image__wrapper"},r("img",{src:this.thumbnail}))),this.showDetails&&r("div",{class:"details__wrapper"},r("div",{class:"selection__buttons-wrapper"},r("div",{class:"selection__input"},r("input",{type:"radio",id:"react",name:"chosen_framework",value:"react",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{htmlFor:"react"},"React")),r("div",{class:"selection__input vue"},r("input",{class:"vue__input",disabled:true,type:"radio",id:"vue",name:"chosen_framework",value:"vue",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{class:"vue__label",htmlFor:"vue"},"Vue")," (Soon)")),r("div",{class:"input__fields-wrapper"},r("ifx-text-field",{required:true,onInput:e=>this.handleUserInput(e,"name"),size:"m",icon:"c-info-16",placeholder:"Your repository name"},"Repository Name"),r("ifx-text-field",{required:true,size:"m",icon:"c-info-16",onInput:e=>this.handleUserInput(e,"desc"),placeholder:"Your repository description"},"Repository Description"),r("ifx-button",{fullWidth:true,onClick:()=>this.submitUserData(),variant:"primary"},"Generate template")))))}get el(){return i(this)}};p.style=n;export{s as ifx_alert,p as ifx_template};
+//# sourceMappingURL=p-ebc75378.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","constructor","hostRef","this","variant","closable","AriaLive","alertTypeDescription","primary","success","danger","warning","info","handleClose","ifxClose","emit","renderCloseButton","h","class","onClick","bind","icon","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","render","role","name","id","templateCss","IfxTemplateStyle0","Template","repoDetails","desc","framework","showDetails","isTemplatePage","isLoading","authUser","clientId","undefined","redirectUri","scope","state","authorizationUrl","window","open","componentDidLoad","url","URL","location","href","code","searchParams","get","templateName","getLocalStorageValues","toggleTemplates","getUserToken","repoName","localStorage","getItem","repoDesc","repoFramework","authCode","fetch","then","response","ok","text","errorMessage","Error","data","repoUrl","clear","catch","error","repoError","message","console","handleUserInput","e","type","Object","assign","target","value","submitUserData","setItem","fieldError","togglePadding","action","parent","el","parentElement","rootNode","getRootNode","ShadowRoot","host","style","padding","handleCurrentTemplate","targetTemplate","currentTarget","toggleTemplate","currTemp","templateWrapper","shadowRoot","querySelector","classList","contains","add","remove","key","size","src","thumbnail","onInput","htmlFor","disabled","required","placeholder","fullWidth"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx","src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n","\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n\n  authUser() { \n    const clientId = process.env.CLIENT_ID;\n    const redirectUri = 'http://localhost:6262/?path=/docs/dds-templates--development';\n    const scope = process.env.SCOPE;\n    const state = process.env.STATE;\n\n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${clientId}&` +\n      `redirect_uri=${redirectUri}&` +\n      `scope=${scope}&` +\n      `state=${state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`http://dds-templates.eu-central-1.elasticbeanstalk.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-2ab2c5cf.entry.js → p-ec8e99ff.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,h as e}from"./p-014d2c5a.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.numberIndicator__container{display:inline-flex;padding:0px 4px;max-height:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276;font-family:var(--ifx-font-family)}.numberIndicator__container span{color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.numberIndicator__container.inverted{background-color:#FFFFFF}.numberIndicator__container.inverted span{color:#0A8276}';const r=a;const i=class{constructor(e){n(this,e);this.inverted=false}render(){return e("div",{key:"6a3da8cb8451752f9852a79e19a49fdb425ff5e3","aria-label":"a number indicator",class:`numberIndicator__container ${this.inverted?"inverted":""}`},e("span",{key:"99a1835f799ec5b16560776ff02a4f8469d6f084"},e("slot",{key:"a7fe661eb175d006b97782c50d522aff1908cc20"})))}};i.style=r;export{i as ifx_number_indicator};
-//# sourceMappingURL=p-2ab2c5cf.entry.js.map
+import{r as n,h as e}from"./p-3604def6.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.numberIndicator__container{display:inline-flex;padding:0px 4px;max-height:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276;font-family:var(--ifx-font-family)}.numberIndicator__container span{color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.numberIndicator__container.inverted{background-color:#FFFFFF}.numberIndicator__container.inverted span{color:#0A8276}';const a=r;const i=class{constructor(e){n(this,e);this.inverted=false}render(){return e("div",{key:"6a3da8cb8451752f9852a79e19a49fdb425ff5e3","aria-label":"a number indicator",class:`numberIndicator__container ${this.inverted?"inverted":""}`},e("span",{key:"99a1835f799ec5b16560776ff02a4f8469d6f084"},e("slot",{key:"a7fe661eb175d006b97782c50d522aff1908cc20"})))}};i.style=a;export{i as ifx_number_indicator};
+//# sourceMappingURL=p-ec8e99ff.entry.js.map

package/dist/infineon-design-system-stencil/{p-e6212e02.entry.js → p-f733c692.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as s}from"./p-014d2c5a.js";import{c as r}from"./p-5cdc6210.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}';const a=t;const c=class{constructor(s){e(this,s);this.ifxInput=i(this,"ifxInput",7);this.value="";this.insideDropdown=false;this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.maxlength=null;this.handleInput=()=>{const e=this.inputElement.value;this.value=e;this.ifxInput.emit(this.value)};this.handleDelete=()=>{this.inputElement.value="";this.value="";this.ifxInput.emit(this.value)}}handleOutsideClick(e){const i=e.composedPath();if(!i.includes(this.inputElement)){this.isFocused=false}}valueWatcher(e){if(e!==this.inputElement.value){this.inputElement.value=e}}focusInput(){this.inputElement.focus();this.isFocused=true}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return s("div",{key:"dee8f8a10987683421db49a63c7e2f7a66ce1b64","aria-label":"a search field for user input","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},s("div",{key:"e6cc99edb05791bb80be7c2262088c668d6424b7",class:this.getWrapperClassNames(),tabindex:1,onFocus:()=>this.focusInput(),onClick:()=>this.focusInput()},s("ifx-icon",{key:"50cf96f238932cf46b1f0186bcb3b8a96a207889",icon:"search-16",class:"search-icon"}),s("input",{key:"358c300cc7c03ef61f1725b4c2380180eb7c26f2",ref:e=>this.inputElement=e,type:"text",onInput:()=>this.handleInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value}),this.showDeleteIcon&&this.showDeleteIconInternalState?s("ifx-icon",{icon:"cremove16",class:"delete-icon",onClick:this.handleDelete}):null))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return r(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`)}static get watchers(){return{value:["valueWatcher"]}}};c.style=a;export{c as ifx_search_field};
-//# sourceMappingURL=p-e6212e02.entry.js.map
+import{r as e,c as i,h as s}from"./p-3604def6.js";import{c as r}from"./p-5cdc6210.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}';const a=t;const c=class{constructor(s){e(this,s);this.ifxInput=i(this,"ifxInput",7);this.value="";this.insideDropdown=false;this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.maxlength=null;this.handleInput=()=>{const e=this.inputElement.value;this.value=e;this.ifxInput.emit(this.value)};this.handleDelete=()=>{this.inputElement.value="";this.value="";this.ifxInput.emit(this.value)}}handleOutsideClick(e){const i=e.composedPath();if(!i.includes(this.inputElement)){this.isFocused=false}}valueWatcher(e){if(e!==this.inputElement.value){this.inputElement.value=e}}focusInput(){this.inputElement.focus();this.isFocused=true}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return s("div",{key:"dee8f8a10987683421db49a63c7e2f7a66ce1b64","aria-label":"a search field for user input","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},s("div",{key:"e6cc99edb05791bb80be7c2262088c668d6424b7",class:this.getWrapperClassNames(),tabindex:1,onFocus:()=>this.focusInput(),onClick:()=>this.focusInput()},s("ifx-icon",{key:"50cf96f238932cf46b1f0186bcb3b8a96a207889",icon:"search-16",class:"search-icon"}),s("input",{key:"358c300cc7c03ef61f1725b4c2380180eb7c26f2",ref:e=>this.inputElement=e,type:"text",onInput:()=>this.handleInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value}),this.showDeleteIcon&&this.showDeleteIconInternalState?s("ifx-icon",{icon:"cremove16",class:"delete-icon",onClick:this.handleDelete}):null))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return r(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`)}static get watchers(){return{value:["valueWatcher"]}}};c.style=a;export{c as ifx_search_field};
+//# sourceMappingURL=p-f733c692.entry.js.map

package/dist/infineon-design-system-stencil/{p-4e07c00d.entry.js → p-f952a1f8.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a}from"./p-014d2c5a.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;align-items:center;padding:4px 16px;border:1px solid #BFBBBB;border-radius:9999px;background-color:#FFFFFF;gap:8px;font-family:var(--ifx-font-family)}.container:hover{cursor:pointer;border-color:#8D8786}.container:active,.container.active{border-color:#1D1D1D}.container:focus:not(:active,.active){outline:none;border-color:#1D1D1D}.container .label-wrapper{text-decoration:none}.container .label-wrapper .label{margin:0;font-weight:400;font-size:1rem;line-height:20px;color:#1D1D1D}';const r=o;const i=class{constructor(a){e(this,a)}render(){return a("div",{key:"41331d90004cb31b76563b71e0614e11635badca","aria-label":"a tag",class:"container"},this.icon&&a("ifx-icon",{key:"a05f1a5ab32772e4ab2b0571def479a48fdcf35f",icon:this.icon}),a("a",{key:"e5f810e31d7650a90dcecd657d5a9955c41b1fbf",href:"javascript:void(null);",class:"label-wrapper"},a("p",{key:"526a2ea2b178bc583f0ab93351df949fc5c8e667",class:"label"},a("slot",{key:"384383d1bd6f44f9f7bc409858eb54356c48bd51"}))))}};i.style=r;export{i as ifx_tag};
-//# sourceMappingURL=p-4e07c00d.entry.js.map
+import{r as e,h as a}from"./p-3604def6.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;align-items:center;padding:4px 16px;border:1px solid #BFBBBB;border-radius:9999px;background-color:#FFFFFF;gap:8px;font-family:var(--ifx-font-family)}.container:hover{cursor:pointer;border-color:#8D8786}.container:active,.container.active{border-color:#1D1D1D}.container:focus:not(:active,.active){outline:none;border-color:#1D1D1D}.container .label-wrapper{text-decoration:none}.container .label-wrapper .label{margin:0;font-weight:400;font-size:1rem;line-height:20px;color:#1D1D1D}';const r=o;const i=class{constructor(a){e(this,a)}render(){return a("div",{key:"41331d90004cb31b76563b71e0614e11635badca","aria-label":"a tag",class:"container"},this.icon&&a("ifx-icon",{key:"a05f1a5ab32772e4ab2b0571def479a48fdcf35f",icon:this.icon}),a("a",{key:"e5f810e31d7650a90dcecd657d5a9955c41b1fbf",href:"javascript:void(null);",class:"label-wrapper"},a("p",{key:"526a2ea2b178bc583f0ab93351df949fc5c8e667",class:"label"},a("slot",{key:"384383d1bd6f44f9f7bc409858eb54356c48bd51"}))))}};i.style=r;export{i as ifx_tag};
+//# sourceMappingURL=p-f952a1f8.entry.js.map

package/dist/types/components/templates/template/template.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class Template {
+    el: HTMLElement;
+    repoDetails: {
+        name: string;
+        desc: string;
+        framework: string;
+    };
+    repoUrl: string;
+    showDetails: boolean;
+    isTemplatePage: boolean;
+    isLoading: boolean;
+    repoError: string;
+    name: string;
+    toggleTemplates: EventEmitter;
+    fieldError: EventEmitter;
+    thumbnail: string;
+    authUser(): void;
+    componentDidLoad(): void;
+    getLocalStorageValues(): {
+        repoName: string;
+        repoDesc: string;
+        repoFramework: string;
+        templateName: string;
+    };
+    getUserToken(authCode: any): Promise<void>;
+    handleUserInput(e: any, type: any): void;
+    submitUserData(): void;
+    togglePadding(action: any): void;
+    handleCurrentTemplate(e: any): void;
+    toggleTemplate(currTemp: any): Promise<void>;
+    render(): any;
+}

package/dist/types/components/templates/templates-ui/templates-ui.d.ts

@@ -0,0 +1,10 @@
+export declare class TemplatesUI {
+    el: HTMLElement;
+    private tableTemplate;
+    private wizardTemplate;
+    toggleTemplate(currTemp: any): void;
+    handleError(e: any): void;
+    filterTemplates(e: any): void;
+    closeAlert(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -507,6 +507,13 @@ export namespace Components {
     interface IfxTag {
         "icon": string;
     }
+    interface IfxTemplate {
+        "name": string;
+        "thumbnail": string;
+        "toggleTemplate": (currTemp: any) => Promise<void>;
+    }
+    interface IfxTemplatesUi {
+    }
     interface IfxTextField {
         "caption": string;
         "disabled": boolean;
@@ -695,6 +702,10 @@ export interface IfxTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIfxTabsElement;
 }
+export interface IfxTemplateCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIfxTemplateElement;
+}
 export interface IfxTextFieldCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIfxTextFieldElement;
@@ -1547,6 +1558,30 @@ declare global {
         prototype: HTMLIfxTagElement;
         new (): HTMLIfxTagElement;
     };
+    interface HTMLIfxTemplateElementEventMap {
+        "toggleTemplates": any;
+        "fieldError": any;
+    }
+    interface HTMLIfxTemplateElement extends Components.IfxTemplate, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIfxTemplateElementEventMap>(type: K, listener: (this: HTMLIfxTemplateElement, ev: IfxTemplateCustomEvent<HTMLIfxTemplateElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIfxTemplateElementEventMap>(type: K, listener: (this: HTMLIfxTemplateElement, ev: IfxTemplateCustomEvent<HTMLIfxTemplateElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIfxTemplateElement: {
+        prototype: HTMLIfxTemplateElement;
+        new (): HTMLIfxTemplateElement;
+    };
+    interface HTMLIfxTemplatesUiElement extends Components.IfxTemplatesUi, HTMLStencilElement {
+    }
+    var HTMLIfxTemplatesUiElement: {
+        prototype: HTMLIfxTemplatesUiElement;
+        new (): HTMLIfxTemplatesUiElement;
+    };
     interface HTMLIfxTextFieldElementEventMap {
         "ifxInput": String;
     }
@@ -1659,6 +1694,8 @@ declare global {
         "ifx-table": HTMLIfxTableElement;
         "ifx-tabs": HTMLIfxTabsElement;
         "ifx-tag": HTMLIfxTagElement;
+        "ifx-template": HTMLIfxTemplateElement;
+        "ifx-templates-ui": HTMLIfxTemplatesUiElement;
         "ifx-text-field": HTMLIfxTextFieldElement;
         "ifx-textarea": HTMLIfxTextareaElement;
         "ifx-tooltip": HTMLIfxTooltipElement;
@@ -2155,6 +2192,14 @@ declare namespace LocalJSX {
     interface IfxTag {
         "icon"?: string;
     }
+    interface IfxTemplate {
+        "name"?: string;
+        "onFieldError"?: (event: IfxTemplateCustomEvent<any>) => void;
+        "onToggleTemplates"?: (event: IfxTemplateCustomEvent<any>) => void;
+        "thumbnail"?: string;
+    }
+    interface IfxTemplatesUi {
+    }
     interface IfxTextField {
         "caption"?: string;
         "disabled"?: boolean;
@@ -2266,6 +2311,8 @@ declare namespace LocalJSX {
         "ifx-table": IfxTable;
         "ifx-tabs": IfxTabs;
         "ifx-tag": IfxTag;
+        "ifx-template": IfxTemplate;
+        "ifx-templates-ui": IfxTemplatesUi;
         "ifx-text-field": IfxTextField;
         "ifx-textarea": IfxTextarea;
         "ifx-tooltip": IfxTooltip;
@@ -2346,6 +2393,8 @@ declare module "@stencil/core" {
             "ifx-table": LocalJSX.IfxTable & JSXBase.HTMLAttributes<HTMLIfxTableElement>;
             "ifx-tabs": LocalJSX.IfxTabs & JSXBase.HTMLAttributes<HTMLIfxTabsElement>;
             "ifx-tag": LocalJSX.IfxTag & JSXBase.HTMLAttributes<HTMLIfxTagElement>;
+            "ifx-template": LocalJSX.IfxTemplate & JSXBase.HTMLAttributes<HTMLIfxTemplateElement>;
+            "ifx-templates-ui": LocalJSX.IfxTemplatesUi & JSXBase.HTMLAttributes<HTMLIfxTemplatesUiElement>;
             "ifx-text-field": LocalJSX.IfxTextField & JSXBase.HTMLAttributes<HTMLIfxTextFieldElement>;
             "ifx-textarea": LocalJSX.IfxTextarea & JSXBase.HTMLAttributes<HTMLIfxTextareaElement>;
             "ifx-tooltip": LocalJSX.IfxTooltip & JSXBase.HTMLAttributes<HTMLIfxTooltipElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "31.0.0--canary.1640.e80c846ce332e4ddd95d97b8ad01c8da2d639e74.0",
+  "version": "31.0.1--canary.1496.8c737dd1d967a94232501b111e63ebeb3fc3923f.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

package/dist/cjs/ifx-alert.cjs.entry.js

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

package/dist/cjs/ifx-alert.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"ifx-alert.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,soFAAsoF,CAAC;AACxpF,uBAAe,QAAQ;;MCMV,KAAK;IALlB;;;QAMU,YAAO,GAA0D,SAAS,CAAC;QAG3E,aAAQ,GAAY,IAAI,CAAC;QACzB,aAAQ,GAAG,WAAW,CAAC;QAG/B,yBAAoB,GAAG;YACrB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,QAAQ,EAAE,aAAa;YACvB,SAAS,EAAE,eAAe;YAC1B,MAAM,EAAE,eAAe;SACxB,CAAC;KAqDH;IAnDC,WAAW;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,iBAAiB;QACf,QACEA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,oBAAQ,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAa,eAAe,IACtEA,sBAAU,IAAI,EAAC,UAAU,GAAG,CACrB,CACL,EACN;KACH;IAED,gBAAgB,CAAC,MAAM,GAAG,IAAI;QAC5B,OAAO,GAAG,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;KAClE;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAC5BA,iBAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,eAAY,IAAI,CAAC,QAAQ,sBAAoB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAkB,8BAA8B,IAC/KA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACNA,iBAAK,EAAE,EAAE,qBAAqB,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAC,2BAA2B,IAC9EA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,KAENA,iBAAK,KAAK,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC9C,IAAI,CAAC,IAAI,KACRA,iBAAK,KAAK,EAAC,cAAc,IACvBA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB,CACP,EACDA,iBAAK,KAAK,EAAC,YAAY,EAAC,EAAE,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE,IACvDA,qBAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAC5C,CACP,CAAC;KACH;;;;;;","names":["h"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family);\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-multiselect_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"ifx-multiselect.ifx-text-field.entry.cjs.js","mappings":"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","names":["index","h"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.ifx-multiselect-container {\n  position: relative;\n  box-sizing: border-box;\n  font-family: var(--ifx-font-family);\n\n  &.small-select {\n    height: 36px;\n  }\n\n  &.medium-select {\n    height: 40px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n\n  .ifx-label-wrapper {\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-error-message-wrapper {\n    color: #CD002F;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n    max-width: 100%;\n  }\n\n  .ifx-multiselect-wrapper {\n    background-color: tokens.$ifxColorBaseWhite;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadius12;\n    width: 100%;\n    font-weight: 400;\n    font-style: normal;\n\n\n    &.small-select {\n      height: 36px;\n      padding: 8px 12px;\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n    }\n\n    &.medium-select {\n      height: 40px;\n      padding: 8px 16px;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n    }\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &:focus-visible:not(.active):not(:active) {\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: 2px;\n\n      }\n    }\n\n    &.disabled {\n      background: tokens.$ifxColorEngineering200;\n      color: #575352;\n      border-color: #575352;\n      cursor: default;\n      -webkit-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n\n    &.error {\n      border-color: #CD002F;\n    }\n\n    &:hover:not(.focus, :focus) {\n      border-color: tokens.$ifxColorEngineering500;\n    }\n\n    &.active {\n      border-color: tokens.$ifxColorOcean500 !important; // Active border color\n\n      & .icon-wrapper-up {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: tokens.$ifxSpace100;\n      }\n\n      & .icon-wrapper-down {\n        display: none\n      }\n    }\n\n\n    & .icon-wrapper-up {\n      display: none;\n    }\n\n    & .icon-wrapper-down {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding-left: tokens.$ifxSpace100;\n    }\n\n    &.is-flipped {\n      .ifx-multiselect-dropdown-menu {\n        top: auto;\n        bottom: 100%;\n      }\n    }\n  }\n\n  .ifx-multiselect-input {\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &.placeholder {\n      opacity: 0.5;\n    }\n\n  }\n\n\n  .ifx-multiselect-icon-container {\n    margin-left: auto;\n    align-items: center;\n    display: flex;\n  }\n\n\n  .ifx-clear-button {\n    display: flex;\n  }\n\n  .ifx-multiselect-dropdown-menu {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    margin-top: 2px;\n    background-color: #fff;\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.10);\n    max-height: 300px;\n    /* Adjust based on your design */\n    overflow-y: auto;\n    z-index: var(--dynamic-z-index, 1); // Fallback to 1\n\n    .search-input {\n      position: sticky;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      width: 100%;\n      padding: 8px 16px;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      font-style: normal;\n      font-weight: 400;\n      box-sizing: border-box;\n      background-color: tokens.$ifxColorBaseWhite;\n      border: none;\n      border-bottom: 1px solid tokens.$ifxColorEngineering400;\n\n      &:focus {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      // Optional: Placeholder style\n      &::placeholder {\n        color: #999;\n      }\n    }\n  }\n\n  .option {\n    position: relative;\n    padding: 8px 16px;\n    gap: 8px;\n    align-items: center;\n    display: flex;\n    font-style: normal;\n    font-weight: 400;\n\n    &.small-select {\n      font-size: tokens.$ifxFontSizeS;\n      line-height: tokens.$ifxLineHeightS;\n    }\n\n    &.medium-select {\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n\n    &:focus:not(.disabled) {\n      background-color: tokens.$ifxColorEngineering300;\n      outline: none;\n    }\n\n    &.is-highlighted {\n      background-color: tokens.$ifxColorEngineering200;\n      ;\n    }\n\n    &.selected {\n      // color: #0A8276;\n    }\n\n    &.sub-option {\n      padding-left: 30px;\n      /* or however much indentation you want */\n    }\n\n    &.disabled {\n      &:hover {\n        cursor: default;\n      }\n    }\n\n    label {\n      cursor: inherit;\n    }\n  }\n\n\n\n}\n\n.select-all-wrapper {\n  padding-top: 8px;\n}","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals } from '@stencil/core';\nimport { Option } from './interfaces';\n\n// Debounce function\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () => {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n};\n\n@Component({\n  tag: 'ifx-multiselect',\n  styleUrl: 'multiselect.scss',\n  shadow: true,\n  formAssociated: true\n})\n\n\n\nexport class Multiselect {\n\n  @Prop() name: string;\n  @Prop() options: any[] | string;\n  @Prop() batchSize: number = 50;\n  @Prop() size: string = 'medium (40px)';\n  @Prop() disabled: boolean = false;\n  @Prop() error: boolean = false;\n  @State() internalError: boolean = false;\n  @Prop() errorMessage: string = \"Error\";\n  @State() internalErrorMessage: string;\n  @Prop() label: string = \"\";\n  @State()  persistentSelectedOptions: Option[] = [];\n  @Prop() placeholder: string = \"\";\n  @State() dropdownOpen = false;\n  @State() dropdownFlipped: boolean;\n  @Prop() maxItemCount: number;\n  @State() zIndex: number = 1; // default z-index value\n  static globalZIndex = 1; // This will be shared among all instances of the component.\n  private currentIndex: number = 0; //needed for option selection using keyboard\n  @State() isLoading: boolean = false;\n  @State() loadedOptions: Option[] = [];\n  @State() filteredOptions: Option[] = [];\n  @Prop() showSearch: boolean = true;\n  @Prop() showSelectAll: boolean = true;\n  @State() optionCount: number = 0; // number of all options (leaves of the tree)\n  @State() optionsProcessed: boolean = false; // flag whether options have already been counted, intial selections saved\n\n\n  @Event() ifxSelect: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n\n  @Element() el: HTMLElement;\n  dropdownElement!: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('options')\n  updateOptions() { \n    this.loadedOptions = [];\n    this.filteredOptions = [];\n    this.optionCount = 0;\n    this.optionsProcessed = false;\n    this.persistentSelectedOptions = [];\n\n    this.loadInitialOptions();\n  }\n\n\n  async loadInitialOptions() {\n    this.isLoading = true;\n    this.internalError = this.error;\n    this.internalErrorMessage = this.errorMessage;\n    // Load the first batch of options (e.g., first 20)\n    this.loadedOptions = await this.fetchOptions(0, this.batchSize);\n    this.isLoading = false;\n  }\n\n  async fetchMoreOptions() {\n    this.isLoading = true;\n    const moreOptions = await this.fetchOptions(this.loadedOptions.length, this.batchSize);\n    this.loadedOptions = [...this.loadedOptions, ...moreOptions];\n    this.isLoading = false;\n  }\n\n\n  handleScroll(event: UIEvent) {\n    const element = event.target as HTMLElement;\n    const halfwayPoint = Math.floor((element.scrollHeight - element.clientHeight) / 2); //loading more options when the user has scrolled halfway through the current list\n\n    if (element.scrollTop >= halfwayPoint) {\n      this.fetchMoreOptions();\n    }\n  }\n\n\n\n\n  async fetchOptions(startIndex: number, count: number): Promise<Option[]> {\n    let allOptions: Option[] = [];\n\n    // Parse options if it's a string, or use directly if it's an array\n    if (typeof this.options === 'string') {\n      try {\n        allOptions = JSON.parse(this.options);\n       \n      } catch (err) {\n        console.error('Failed to parse options:', err);\n      }\n    } else if (Array.isArray(this.options)) {\n      allOptions = this.options;\n    } else {\n      console.error('Unexpected value for options:', this.options);\n    }\n\n    if (!this.optionsProcessed) {\n      this.optionCount = this.countOptions(allOptions);\n      const initiallySelected = this.collectSelectedOptions(allOptions);\n      const initallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallySelectedNotInState];\n      this.optionsProcessed = true;\n    }\n    // Slice the options array based on startIndex and count\n    const slicedOptions = allOptions.slice(startIndex, startIndex + count);\n    return slicedOptions;\n  }\n\n  /**\n   * Collects and returns all options that are selected.\n   * When the parent is selected, then the value of the children will be overriden with selected as well.\n   * It will only collect the leaves of the tree.\n   * \n   * @param options A list of options.\n   * @returns A list with all selected options\n   */\n  private collectSelectedOptions(options: Option[]): Option[] {\n    let selectedOptions: Option[] = [];\n  \n    for (const option of options) {\n      if (option.selected) {\n        if (option.children && option.children.length > 0) {\n          // if parent is selected, then select all child options\n          selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\n        } else {\n          if (!selectedOptions.some(existingOption => existingOption.value === option.value)) {\n            selectedOptions.push(option);\n          }\n        }\n      } else {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\n        }\n      }\n    }\n\n    return selectedOptions;\n  }\n\n  /**\n   * Collects all leaf children options.\n   * \n   * @param option A list with all leaf-children.\n   */\n  private collectLeafOptions(children: Option[]): Option[] {\n    let leafOptions = [];\n  \n    for (const child of children) {\n      if (child.children && child.children.length > 0) {\n        leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\n      } else {\n        leafOptions.push(child);\n      }\n    }  \n    return leafOptions;\n  }\n\n  /**\n   * Count the number of options. Only counts the leaves of the options tree.\n   */\n  countOptions(options: Option[]): number {\n    let count = 0;\n    for (const option of options) {\n      if (option.children && option.children.length >= 0) {\n        count += this.countOptions(option.children);\n      } else {\n        count++;\n      }\n    }\n    return count;\n  }\n\n\n  handleSearch = debounce((targetElement: HTMLInputElement) => {\n    const searchTerm = targetElement.value.toLowerCase();\n    if (searchTerm === '') {\n      this.filteredOptions = this.loadedOptions;\n    } else {\n      this.filteredOptions = this.loadedOptions.filter(option => {\n        const matchesSearchTerm = option.label.toLowerCase().includes(searchTerm);\n        if (option.children) {\n          const childrenMatch = option.children.some(child => {\n            return child.label.toLowerCase().includes(searchTerm);\n          });\n          return matchesSearchTerm || childrenMatch;\n        }\n        return matchesSearchTerm;\n      });\n    }\n  }, 300);\n\n  componentDidLoad() {\n    setTimeout(() => {\n      this.positionDropdown();\n    }, 500);\n\n    // setInterval(this.handleScroll, 5000); // Runs every 5 seconds (5000 milliseconds)\n  }\n\n  componentWillLoad() {\n    this.loadInitialOptions();\n    this.filteredOptions = [...this.loadedOptions];\n  }\n\n  @Watch('error')\n  updateInternalError() {\n    this.internalError = this.error;\n  }\n\n  @Watch('errorMessage')\n  updateInternalErrorMessage() {\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  @Watch('loadedOptions')\n  loadedOptionsChanged() {\n    this.filteredOptions = [...this.loadedOptions];\n  }\n\n  @Watch('persistentSelectedOptions')\n  onSelectionChange(newValue: Option[], _: Option[]) {\n    const formData = new FormData();\n    newValue.forEach(option => formData.append(this.name, option.value));\n    this.internals.setFormValue(formData);\n  }\n\n  handleOptionClick(option: Option) {\n    this.internalError = false;\n\n    if (!option.selected && this.isSelectionLimitReached(option)) {\n      option.checkboxRef.toggleCheckedState(false)\n      this.internalError = true;\n      this.internalErrorMessage = \"Please consider the maximum number of items to choose from\";\n      return;\n    }\n    \n    this.updateSelection(option);\n    this.ifxSelect.emit(this.persistentSelectedOptions);\n  }\n\n\n  isSelectionLimitReached(option: Option): boolean {\n    let newOptionsLength = option.children ? option.children.length : 1;\n    return this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount &&\n      !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)\n  }\n\n  updateSelection(option: Option) {\n    const wasSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n\n    if (option.children && option.children.length > 0) {\n      this.handleParentOptionClick(option);\n    } else {\n      this.handleChildOptionClick(option, wasSelected);\n    }\n  }\n\n  async selectAll() {\n    const allOptions = await this.fetchOptions(0, this.optionCount);\n    this.selectAllRecursive(allOptions);\n    \n    this.ifxSelect.emit(this.persistentSelectedOptions);\n  }\n\n  private selectAllRecursive(options: Option[]) {\n    for (const opt of options) {\n      if (opt.children && opt.children.length > 0) {\n        this.selectAllRecursive(opt.children);\n      } else {\n        if (!this.persistentSelectedOptions.some((some) => some.value === opt.value )) {\n          opt.selected = true;\n          this.persistentSelectedOptions = [...this.persistentSelectedOptions, opt];\n          this.optionCount = this.countOptions( this.persistentSelectedOptions)\n        }\n      }\n    }\n\n  }\n\n  handleParentOptionClick(option: Option) {\n    const allChildrenSelected = option.children.every(child =>\n      this.persistentSelectedOptions.some(selectedOption => selectedOption.value === child.value)\n    );\n\n    if (allChildrenSelected) {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(\n        selectedOption => !option.children.some(child => child.value === selectedOption.value)\n      )];\n\n      option.selected = false;\n      option.children.forEach(child => {\n        child.selected = false;\n      })\n\n    } else {\n      const newChildren = [...option.children.filter(childOption =>\n            !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === childOption.value)\n      )];\n      option.selected = true;\n      option.children.forEach(child => {\n        child.selected = true;\n      })\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...newChildren];\n    }\n  }\n\n  handleChildOptionClick(option: Option, wasSelected: boolean) {\n    if (wasSelected) {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions.filter(selectedOption => selectedOption.value !== option.value)];\n      option.selected = false;\n    } else {\n      this.persistentSelectedOptions = [...this.persistentSelectedOptions, option];\n      option.selected = true;\n    }\n    this.updateParentSelectedState();\n  }\n\n  updateParentSelectedState() {\n    this.loadedOptions.forEach(option => {\n      if(option.children?.length > 0) {\n        if(option.children.every(child => child.selected === true)) option.selected = true;\n        else {\n          option.selected = false;\n          if(this.isOptionIndeterminate(option)) {\n            option.indeterminate = true;\n          }else{\n            option.indeterminate = false;\n          }\n        }\n      }\n    });\n  }\n\n\n\n  handleDocumentClick = (event: Event) => {\n    const path = event.composedPath();\n    if (!path.includes(this.dropdownElement)) {\n      this.dropdownOpen = false;\n      document.removeEventListener('click', this.handleDocumentClick);\n      this.filteredOptions = this.loadedOptions;\n      // Dispatch the ifxMultiselectIsOpen event\n      this.ifxOpen.emit(this.dropdownOpen);\n    }\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"small-select\"\n      : \"medium-select\";\n  }\n\n  toggleDropdown() {\n    this.dropdownOpen = !this.dropdownOpen;\n    setTimeout(() => {\n      if (this.dropdownOpen) {\n        document.addEventListener('click', this.handleDocumentClick);\n      }\n      // Dispatch the ifxOpen event\n      this.ifxOpen.emit(this.dropdownOpen);\n    }, 0);\n    this.zIndex = Multiselect.globalZIndex++;\n  }\n\n\n  waitForElement(querySelectorFunc: Function, callback: Function, maxTries = 50) {\n    let tries = 0;\n    function request() {\n      requestAnimationFrame(() => {\n        const elements = querySelectorFunc();\n        if (elements.length > 0 || tries > maxTries) {\n          callback(elements);\n        } else {\n          tries++;\n          request();\n        }\n      });\n    }\n    request();\n  }\n\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return; // If it's disabled, don't do anything.\n\n    const options = this.dropdownElement.querySelectorAll('.option');\n    \n    switch (event.code) {\n      case 'Enter':\n        this.toggleDropdown();\n        // Wait a bit for the dropdown to finish rendering\n        this.waitForElement(() => {\n          return this.dropdownElement.querySelectorAll('.option');\n        }, (options) => {\n            this.updateHighlightedOption(options);\n        });\n        break;\n      case 'Space': \n        this.toggleDropdown();\n        // Wait a bit for the dropdown to finish rendering\n        this.waitForElement(() => {\n          return this.dropdownElement.querySelectorAll('.option');\n        }, (options) => {\n            this.updateHighlightedOption(options);\n        });\n        break;\n      case 'ArrowDown':\n        this.handleArrowDown(options);\n        if (this.dropdownOpen) {\n          this.updateHighlightedOption(options);\n        }\n        break;\n      case 'ArrowUp':\n        this.handleArrowUp(options);\n        if (this.dropdownOpen) {\n          this.updateHighlightedOption(options);\n        }\n        break;\n    }\n  }\n\n  handleWrapperClick(event: MouseEvent) {\n    // This is your existing logic for positioning the dropdown\n    this.positionDropdown();\n\n    // Check if the event target is the wrapper itself and not a child element.\n    if (event.currentTarget === event.target) {\n      this.toggleDropdown();\n    }\n  }\n\n  clearSelection() {\n    this.persistentSelectedOptions = [];\n    this.ifxSelect.emit(this.persistentSelectedOptions); // if you want to emit empty selection after clearing\n  }\n\n  positionDropdown() {\n    const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - wrapperRect.bottom;\n    const spaceAbove = wrapperRect.top;\n\n    // If there's more space above than below the trigger and the dropdown doesn't fit below\n    if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || (wrapperRect.bottom > window.innerHeight)) {\n      this.dropdownFlipped = true;\n    } else {\n      this.dropdownFlipped = false;\n    }\n  }\n\n\n\n  // Helper function to update highlighted option based on currentIndex\n  private updateHighlightedOption(options: NodeList) {\n    // Clear all highlights\n    options.forEach((option: Element) => option.classList.remove('is-highlighted'));\n\n    // Apply highlight to the current option\n    if (this.currentIndex >= 0 && this.currentIndex < options.length) {\n      (options[this.currentIndex] as Element).classList.add('is-highlighted');\n      (options[this.currentIndex] as HTMLElement).focus();\n    }\n  }\n\n  // Helper function to handle arrow down navigation\n  private handleArrowDown(options: NodeList) {\n    if (this.currentIndex < options.length - 1) {\n      this.currentIndex++;\n    } else {\n      this.currentIndex = 0; // Wrap to the beginning.\n    }\n  }\n\n  // Helper function to handle arrow up navigation\n  private handleArrowUp(options: NodeList) {\n    if (this.currentIndex > 0) {\n      this.currentIndex--;\n    } else {\n      this.currentIndex = options.length - 1; // Wrap to the end.\n    }\n  }\n  \n  handleOptionKeyDown(e: KeyboardEvent, option: Option) {\n    if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n    if(e.key === 'Enter' || e.key === ' ') {\n      this.handleOptionClick(option);\n    }\n  }\n\n  renderOption(option: Option, index: number) {\n    const isIndeterminate = this.isOptionIndeterminate(option);\n    const isSelected = option.children ? isIndeterminate || this.isOptionSelected(option) : this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n    const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index\n   \n    return (\n      <div class=\"option-wrapper\">\n        <div class={`option ${isSelected ? 'selected' : ''} ${disableCheckbox ? 'disabled' : ''} \n        ${this.getSizeClass()}`}\n          data-value={option.value}\n          onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n          onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n          tabindex=\"0\"\n          role={`${option.children?.length > 0 ? \"treeitem\" : \"option\"}`}>\n          <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>\n          <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n        </div>\n        {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}\n      </div>\n    );\n  }\n\n  isOptionSelected(option: Option): boolean {\n    if (!option.children) return false;\n\n    return option.children.every(child =>\n      this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n    );\n  }\n\n\n  isOptionIndeterminate(option: Option): boolean {\n    if (!option.children) return false;\n\n    const selectedChildren = option.children.filter(child =>\n      this.persistentSelectedOptions.some(persistentOption => persistentOption.value === child.value)\n    ).length;\n\n    return selectedChildren > 0 && selectedChildren < option.children.length;\n  }\n\n\n  findInOptions(options: Option[], searchTerm: string): Option | null {\n    for (const option of options) {\n      if (option.value === searchTerm) {\n        return option;\n      }\n      if (option.children) {\n        const foundInChildren = this.findInOptions(option.children, searchTerm);\n        if (foundInChildren) {\n          return foundInChildren;\n        }\n      }\n    }\n    return null;\n  }\n\n\n  renderSubOption(option: Option, index: string) {\n    const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);\n    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;\n    const uniqueId = `checkbox-${option.value}-${index}`;\n\n    return (\n      <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()} ${disableCheckbox ? 'disabled' : ''}`}\n        data-value={option.value}\n        role={`${option.children?.length > 0 ? \"option\" : \"treeitem\"}`}\n        onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}\n        onClick={() => !disableCheckbox && this.handleOptionClick(option)}\n        tabindex=\"0\">\n        <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size=\"s\" checked={isSelected} disabled={disableCheckbox}></ifx-checkbox>\n        <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>\n      </div>\n    );\n  }\n\n  private renderSelectAll() {\n    const allSelected = this.persistentSelectedOptions.length === this.optionCount;\n    const noneSelected = this.persistentSelectedOptions.length === 0;\n    const indeterminate = this.optionCount > 0 && !noneSelected && !allSelected;\n\n    const that = this;\n    function toggleSelectAll() {\n      if (allSelected) {\n        that.clearSelection();\n      } else {\n        that.selectAll();\n      }\n    }\n\n    function handleSelectAllKeydown(e: KeyboardEvent) {\n      if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') e.stopPropagation();\n      if(e.key === 'Enter' || e.key === ' ') {\n        toggleSelectAll();\n      }\n    }\n\n    return <div class=\"select-all-wrapper\">\n      <div class={`option ${this.getSizeClass()}`} tabindex='0' onKeyDown={(e) => handleSelectAllKeydown(e)} onClick={toggleSelectAll}>\n        <ifx-checkbox tabIndex={-1} id='selectAll' checked={allSelected} indeterminate={indeterminate} size=\"s\"></ifx-checkbox>\n        <label htmlFor='selectAll'>Select all</label>\n      </div>\n      <ifx-dropdown-separator></ifx-dropdown-separator>\n    </div>;\n  }\n\n\n  render() {\n    // Create a label for the selected options\n    const selectedOptionsLabels = this.persistentSelectedOptions\n      .filter(option => {\n        // check if option is a child and its parent is selected\n        const isChildSelectedWithParent = this.persistentSelectedOptions.some(parentOption =>\n          parentOption.children &&\n          parentOption.children.some(child => child.value === option.value) &&\n          parentOption.selected\n        );\n        return !isChildSelectedWithParent;\n      })\n      .map(option => option.label)\n      .join(', ');\n\n    return (\n      <div class={`ifx-multiselect-container`} ref={el => this.dropdownElement = el as HTMLElement}>\n        {\n          this.label ?\n            <div class=\"ifx-label-wrapper\">\n              <span>{this.label}</span>\n            </div> : null\n        }\n        <div class={`ifx-multiselect-wrapper \n        ${this.getSizeClass()} \n        ${this.dropdownOpen ? 'active' : ''} \n        ${this.dropdownFlipped ? 'is-flipped' : ''}\n        ${this.internalError ? 'error' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n          tabindex=\"0\"\n          onClick={this.disabled ? undefined : (event) => this.handleWrapperClick(event)}\n          onKeyDown={this.disabled ? undefined : (event) => this.handleKeyDown(event)} >\n          <div class={`ifx-multiselect-input \n          ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : \"\"}\n          `}\n            onClick={this.disabled ? undefined : () => this.toggleDropdown()}\n          >\n            {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : this.placeholder}\n          </div>\n          {this.dropdownOpen && (\n            <div class=\"ifx-multiselect-dropdown-menu\"\n              onScroll={(event) => this.handleScroll(event)}\n              style={{ '--dynamic-z-index': this.zIndex.toString() }}>\n              {this.showSearch && <input type=\"text\" role=\"textbox\" class=\"search-input\" onKeyDown={(e) => { e.stopPropagation() }} onInput={(event) => this.handleSearch(event.target)} placeholder=\"Search...\"></input>}\n              {this.showSelectAll && this.renderSelectAll()}\n              {this.filteredOptions.map((option, index) => this.renderOption(option, index))}\n              {this.isLoading && <div>Loading more options...</div>}\n            </div>\n          )}\n          <div class=\"ifx-multiselect-icon-container\">\n\n            {/* Clear Button - will show only if there's a selection */}\n            {this.persistentSelectedOptions.length > 0 && (   \n              <div class=\"ifx-clear-button\" onClick={this.disabled ? undefined : () => this.clearSelection()}>\n                <ifx-icon icon=\"cremove16\"></ifx-icon>\n              </div>\n            )}\n            <div class=\"icon-wrapper-up\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-up'\n                icon='chevronup-16'></ifx-icon>\n            </div>\n            <div class=\"icon-wrapper-down\" onClick={this.disabled ? undefined : () => this.toggleDropdown()}>\n              <ifx-icon\n                key='icon-down'\n                icon='chevron-down-16'></ifx-icon>\n            </div>\n          </div>\n\n        </div>\n        {\n          this.internalError ?\n            <div class=\"ifx-error-message-wrapper\">\n              <span>{this.internalErrorMessage}</span>\n            </div> : null\n        }\n      </div>\n    );\n  }\n\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family);\n\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: tokens.$ifxFontFamilyBody;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid #CD002F;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid #4CA460;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: #8D8786;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      letter-spacing: 0.2px;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: #CD002F;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor=\"text-field\">\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              type=\"text\"\n              id='text-field'\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cremove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-spinner.cjs.entry.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-051c2b85.js');
-const index$1 = require('./index-5b0b9d4c.js');
-
-const spinnerCss = ":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#FFFFFF;border-left-color:#FFFFFF;border-right-color:#FFFFFF}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0A8276}.semiconductor.inverted svg{fill:#FFFFFF}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
-const IfxSpinnerStyle0 = spinnerCss;
-
-const Spinner = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.inverted = false;
-    }
-    render() {
-        return (index.h("div", { key: '6db48f54c2484025c92300c3c63698d4f16965ff', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, index.h("div", { key: '85f604c1cae6f9e290f5a07cdab730cb4ce445c1', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && index.h("div", { key: '6a3132d2ebb933fbd4007dbf9cfb2943078939ed', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, index.h("svg", { key: '22f7f2edd61e25e6c73c2fa18738f4c2f9c67e44', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '4d72092059485d2bb662cc2451f20953afcf5200', id: "spinner/conductor" }, index.h("path", { key: '9cbec7c69604cd24de46bd63b336f224a386c23b', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
-    }
-    getSizeClass() {
-        return `${this.size}` === "s"
-            ? "s"
-            : "";
-    }
-    getClassNames() {
-        return index$1.classNames('spinner', this.size && `spinner ${this.getSizeClass()}`);
-    }
-};
-Spinner.style = IfxSpinnerStyle0;
-
-exports.ifx_spinner = Spinner;
-
-//# sourceMappingURL=ifx-spinner.cjs.entry.js.map

package/dist/cjs/ifx-spinner.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"ifx-spinner.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB,CAAC;AACvwB,yBAAe,UAAU;;MCQZ,OAAO;IALpB;;QAQU,aAAQ,GAAY,KAAK,CAAC;KA+BnC;IA5BC,MAAM;QACJ,QACEA,gFAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAChFA,kEAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAQ,EACnG,IAAI,CAAC,OAAO,KAAK,OAAO;eACpBA,kEAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,IACtFA,kEAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5FA,gEAAG,EAAE,EAAC,mBAAmB,IACvBA,mEAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,EACN;KACH;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;cACzB,GAAG;cACH,EAAE,CAAC;KACR;IAED,aAAa;QACX,OAAOC,kBAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;KACH;;;;;;","names":["h","classNames"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n"],"version":3}