@infineon/infineon-design-system-stencil 30.9.3--canary.1496.9fc4de9852ba9ec2e36ce3e0ff89d8fddb5acdc5.0 → 30.9.3--canary.1677.79bde5cb960ca0ee87364cb0899d078b69a61f7b.0

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as s}from"./p-6b122987.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.ifx-multiselect-container{position:relative;box-sizing:border-box;font-family:var(--ifx-font-family)}.ifx-multiselect-container.small-select{height:36px}.ifx-multiselect-container.medium-select{height:40px}.ifx-multiselect-container:hover{cursor:pointer}.ifx-multiselect-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}.ifx-multiselect-container .ifx-multiselect-wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;width:100%;font-weight:400;font-style:normal}.ifx-multiselect-container .ifx-multiselect-wrapper.small-select{height:36px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .ifx-multiselect-wrapper.medium-select{height:40px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible{outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-multiselect-container .ifx-multiselect-wrapper:focus-visible:not(.active):not(:active)::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-multiselect-container .ifx-multiselect-wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-multiselect-container .ifx-multiselect-wrapper.error{border-color:#CD002F}.ifx-multiselect-container .ifx-multiselect-wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-multiselect-container .ifx-multiselect-wrapper.active{border-color:#0A8276 !important}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.active .icon-wrapper-down{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-up{display:none}.ifx-multiselect-container .ifx-multiselect-wrapper .icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-multiselect-container .ifx-multiselect-wrapper.is-flipped .ifx-multiselect-dropdown-menu{top:auto;bottom:100%}.ifx-multiselect-container .ifx-multiselect-input{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-multiselect-container .ifx-multiselect-input.placeholder{opacity:0.5}.ifx-multiselect-container .ifx-multiselect-icon-container{margin-left:auto;align-items:center;display:flex}.ifx-multiselect-container .ifx-clear-button{display:flex}.ifx-multiselect-container .ifx-multiselect-dropdown-menu{position:absolute;top:100%;left:0;width:100%;margin-top:2px;background-color:#fff;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1);max-height:300px;overflow-y:auto;z-index:var(--dynamic-z-index, 1)}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input{position:sticky;top:0;left:0;z-index:1;width:100%;padding:8px 16px;font-size:1rem;line-height:1.5rem;font-style:normal;font-weight:400;box-sizing:border-box;background-color:#FFFFFF;border:none;border-bottom:1px solid #8D8786}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input:focus{outline:none;border:1px solid #0A8276}.ifx-multiselect-container .ifx-multiselect-dropdown-menu .search-input::placeholder{color:#999}.ifx-multiselect-container .option{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;font-style:normal;font-weight:400}.ifx-multiselect-container .option.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-multiselect-container .option.medium-select{font-size:1rem;line-height:1.5rem}.ifx-multiselect-container .option:hover{background-color:#EEEDED}.ifx-multiselect-container .option:focus:not(.disabled){background-color:#BFBBBB;outline:none}.ifx-multiselect-container .option.is-highlighted{background-color:#EEEDED}.ifx-multiselect-container .option.sub-option{padding-left:30px;}.ifx-multiselect-container .option.disabled:hover{cursor:default}.ifx-multiselect-container .option label{cursor:inherit}.select-all-wrapper{padding-top:8px}';const o=n;function r(t,e){let i;return function s(...n){const o=()=>{clearTimeout(i);t(...n)};clearTimeout(i);i=setTimeout(o,e)}}const l=class{constructor(i){t(this,i);this.ifxSelect=e(this,"ifxSelect",7);this.ifxMultiselectIsOpen=e(this,"ifxMultiselectIsOpen",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.currentIndex=0;this.handleSearch=r((t=>{const e=t.value.toLowerCase();if(e===""){this.filteredOptions=this.loadedOptions}else{this.filteredOptions=this.loadedOptions.filter((t=>t.label.toLowerCase().includes(e)))}}),300);this.handleDocumentClick=t=>{const e=t.composedPath();if(!e.includes(this.dropdownElement)){this.dropdownOpen=false;document.removeEventListener("click",this.handleDocumentClick);this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}};this.name=undefined;this.options=undefined;this.batchSize=50;this.size="medium (40px)";this.disabled=false;this.error=false;this.internalError=false;this.errorMessage="Error";this.internalErrorMessage=undefined;this.label="";this.persistentSelectedOptions=[];this.placeholder="";this.dropdownOpen=false;this.dropdownFlipped=undefined;this.maxItemCount=undefined;this.zIndex=1;this.isLoading=false;this.loadedOptions=[];this.filteredOptions=[];this.showSearch=true;this.showSelectAll=true;this.optionCount=0;this.optionsProcessed=false}updateOptions(){this.loadedOptions=[];this.filteredOptions=[];this.optionCount=0;this.optionsProcessed=false;this.persistentSelectedOptions=[];this.loadInitialOptions()}async loadInitialOptions(){this.isLoading=true;this.internalError=this.error;this.internalErrorMessage=this.errorMessage;this.loadedOptions=await this.fetchOptions(0,this.batchSize);this.isLoading=false}async fetchMoreOptions(){this.isLoading=true;const t=await this.fetchOptions(this.loadedOptions.length,this.batchSize);this.loadedOptions=[...this.loadedOptions,...t];this.isLoading=false}handleScroll(t){const e=t.target;const i=Math.floor((e.scrollHeight-e.clientHeight)/2);if(e.scrollTop>=i){this.fetchMoreOptions()}}async fetchOptions(t,e){let i=[];if(typeof this.options==="string"){try{i=JSON.parse(this.options)}catch(t){console.error("Failed to parse options:",t)}}else if(Array.isArray(this.options)){i=this.options}else{console.error("Unexpected value for options:",this.options)}if(!this.optionsProcessed){this.optionCount=this.countOptions(i);const t=this.collectSelectedOptions(i);const e=t.filter((t=>!this.persistentSelectedOptions.some((e=>e.value==t.value))));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...e];this.optionsProcessed=true}const s=i.slice(t,t+e);return s}collectSelectedOptions(t){let e=[];for(const i of t){if(i.selected){if(i.children&&i.children.length>0){e=e.concat(this.collectLeafOptions(i.children))}else{e.push(i)}}else{if(i.children&&i.children.length>0){e=e.concat(this.collectSelectedOptions(i.children))}}}return e}collectLeafOptions(t){let e=[];for(const i of t){if(i.children&&i.children.length>0){e=e.concat(this.collectLeafOptions(i.children))}else{e.push(i)}}return e}countOptions(t){let e=0;for(const i of t){if(i.children&&i.children.length>=0){e+=this.countOptions(i.children)}else{e++}}return e}componentDidLoad(){setTimeout((()=>{this.positionDropdown()}),500)}componentWillLoad(){this.loadInitialOptions();this.filteredOptions=[...this.loadedOptions]}updateInternalError(){this.internalError=this.error}updateInternalErrorMessage(){this.internalErrorMessage=this.errorMessage}loadedOptionsChanged(){this.filteredOptions=[...this.loadedOptions]}onSelectionChange(t,e){const i=new FormData;t.forEach((t=>i.append(this.name,t.value)));this.internals.setFormValue(i)}handleOptionClick(t){this.internalError=false;if(!t.selected&&this.isSelectionLimitReached(t)){t.checkboxRef.toggleCheckedState(false);this.internalError=true;this.internalErrorMessage="Please consider the maximum number of items to choose from";return}this.updateSelection(t);this.ifxSelect.emit(this.persistentSelectedOptions)}isSelectionLimitReached(t){let e=t.children?t.children.length:1;return this.maxItemCount&&this.persistentSelectedOptions.length+e>this.maxItemCount&&!this.persistentSelectedOptions.some((e=>e.value===t.value))}updateSelection(t){const e=this.persistentSelectedOptions.some((e=>e.value===t.value));if(t.children&&t.children.length>0){this.handleParentOptionClick(t)}else{this.handleChildOptionClick(t,e)}}async selectAll(){const t=await this.fetchOptions(0,this.optionCount);this.selectAllRecursive(t);this.ifxSelect.emit(this.persistentSelectedOptions)}selectAllRecursive(t){for(const e of t){if(e.children&&e.children.length>0){this.selectAllRecursive(e.children)}else{if(!this.persistentSelectedOptions.some((t=>t.value===e.value))){e.selected=true;this.persistentSelectedOptions=[...this.persistentSelectedOptions,e]}}}}handleParentOptionClick(t){const e=t.children.every((t=>this.persistentSelectedOptions.some((e=>e.value===t.value))));if(e){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((e=>!t.children.some((t=>t.value===e.value))))];t.selected=false;t.children.forEach((t=>{t.selected=false}))}else{const e=[...t.children.filter((t=>!this.persistentSelectedOptions.some((e=>e.value===t.value))))];t.selected=true;t.children.forEach((t=>{t.selected=true}));this.persistentSelectedOptions=[...this.persistentSelectedOptions,...e]}}handleChildOptionClick(t,e){if(e){this.persistentSelectedOptions=[...this.persistentSelectedOptions.filter((e=>e.value!==t.value))];t.selected=false}else{this.persistentSelectedOptions=[...this.persistentSelectedOptions,t];t.selected=true}this.updateParentSelectedState()}updateParentSelectedState(){this.loadedOptions.forEach((t=>{var e;if(((e=t.children)===null||e===void 0?void 0:e.length)>0){if(t.children.every((t=>t.selected===true)))t.selected=true;else{t.selected=false;if(this.isOptionIndeterminate(t)){t.indeterminate=true}else{t.indeterminate=false}}}}))}getSizeClass(){return`${this.size}`==="s"?"small-select":"medium-select"}toggleDropdown(){this.dropdownOpen=!this.dropdownOpen;setTimeout((()=>{if(this.dropdownOpen){document.addEventListener("click",this.handleDocumentClick)}this.ifxMultiselectIsOpen.emit(this.dropdownOpen)}),0);this.zIndex=l.globalZIndex++}waitForElement(t,e,i=50){let s=0;function n(){requestAnimationFrame((()=>{const o=t();if(o.length>0||s>i){e(o)}else{s++;n()}}))}n()}handleKeyDown(t){if(this.disabled)return;const e=this.dropdownElement.querySelectorAll(".option");switch(t.code){case"Enter":this.toggleDropdown();this.waitForElement((()=>this.dropdownElement.querySelectorAll(".option")),(t=>{this.updateHighlightedOption(t)}));break;case"Space":this.toggleDropdown();this.waitForElement((()=>this.dropdownElement.querySelectorAll(".option")),(t=>{this.updateHighlightedOption(t)}));break;case"ArrowDown":this.handleArrowDown(e);if(this.dropdownOpen){this.updateHighlightedOption(e)}break;case"ArrowUp":this.handleArrowUp(e);if(this.dropdownOpen){this.updateHighlightedOption(e)}break}}handleWrapperClick(t){this.positionDropdown();if(t.currentTarget===t.target){this.toggleDropdown()}}clearSelection(){this.persistentSelectedOptions=[];this.ifxSelect.emit(this.persistentSelectedOptions)}positionDropdown(){var t;const e=(t=this.el.shadowRoot.querySelector(".ifx-multiselect-wrapper"))===null||t===void 0?void 0:t.getBoundingClientRect();const i=window.innerHeight-e.bottom;const s=e.top;if(s>i&&e.height>i||e.bottom>window.innerHeight){this.dropdownFlipped=true}else{this.dropdownFlipped=false}}updateHighlightedOption(t){t.forEach((t=>t.classList.remove("is-highlighted")));if(this.currentIndex>=0&&this.currentIndex<t.length){t[this.currentIndex].classList.add("is-highlighted");t[this.currentIndex].focus()}}handleArrowDown(t){if(this.currentIndex<t.length-1){this.currentIndex++}else{this.currentIndex=0}}handleArrowUp(t){if(this.currentIndex>0){this.currentIndex--}else{this.currentIndex=t.length-1}}handleOptionKeyDown(t,e){if(t.key!=="ArrowUp"&&t.key!=="ArrowDown")t.stopPropagation();if(t.key==="Enter"||t.key===" "){this.handleOptionClick(e)}}renderOption(t,e){var s;const n=this.isOptionIndeterminate(t);const o=t.children?n||this.isOptionSelected(t):this.persistentSelectedOptions.some((e=>e.value===t.value));const r=!o&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const l=`checkbox-${t.value}-${e}`;return i("div",{class:"option-wrapper"},i("div",{class:`option ${o?"selected":""} ${r?"disabled":""} \n        ${this.getSizeClass()}`,"data-value":t.value,onKeyDown:e=>!r&&this.handleOptionKeyDown(e,t),onClick:()=>!r&&this.handleOptionClick(t),tabindex:"0",role:`${((s=t.children)===null||s===void 0?void 0:s.length)>0?"treeitem":"option"}`},i("ifx-checkbox",{tabIndex:-1,ref:e=>t.checkboxRef=e,id:l,size:"s",checked:n?false:o,indeterminate:n,disabled:r}),i("label",{htmlFor:l,onClick:t=>t.stopPropagation()},t.label)),t.children&&t.children.map(((t,i)=>this.renderSubOption(t,`${e}-${i}`))))}isOptionSelected(t){if(!t.children)return false;return t.children.every((t=>this.persistentSelectedOptions.some((e=>e.value===t.value))))}isOptionIndeterminate(t){if(!t.children)return false;const e=t.children.filter((t=>this.persistentSelectedOptions.some((e=>e.value===t.value)))).length;return e>0&&e<t.children.length}findInOptions(t,e){for(const i of t){if(i.value===e){return i}if(i.children){const t=this.findInOptions(i.children,e);if(t){return t}}}return null}renderSubOption(t,e){var s;const n=this.persistentSelectedOptions.some((e=>e.value===t.value));const o=!n&&this.maxItemCount&&this.persistentSelectedOptions.length>=this.maxItemCount;const r=`checkbox-${t.value}-${e}`;return i("div",{class:`option sub-option ${n?"selected":""} ${this.getSizeClass()} ${o?"disabled":""}`,"data-value":t.value,role:`${((s=t.children)===null||s===void 0?void 0:s.length)>0?"option":"treeitem"}`,onKeyDown:e=>!o&&this.handleOptionKeyDown(e,t),onClick:()=>!o&&this.handleOptionClick(t),tabindex:"0"},i("ifx-checkbox",{tabIndex:-1,ref:e=>t.checkboxRef=e,id:r,size:"s",checked:n,disabled:o}),i("label",{htmlFor:r,onClick:t=>t.stopPropagation()},t.label))}renderSelectAll(){const t=this.persistentSelectedOptions.length===this.optionCount;const e=this.persistentSelectedOptions.length===0;const s=this.optionCount>0&&!e&&!t;const n=this;function o(){if(t){n.clearSelection()}else{n.selectAll()}}function r(t){if(t.key!=="ArrowUp"&&t.key!=="ArrowDown")t.stopPropagation();if(t.key==="Enter"||t.key===" "){o()}}return i("div",{class:"select-all-wrapper"},i("div",{class:`option ${this.getSizeClass()}`,tabindex:"0",onKeyDown:t=>r(t),onClick:o},i("ifx-checkbox",{tabIndex:-1,id:"selectAll",checked:t,indeterminate:s,size:"s"}),i("label",{htmlFor:"selectAll"},"Select all")),i("ifx-dropdown-separator",null))}render(){const t=this.persistentSelectedOptions.filter((t=>{const e=this.persistentSelectedOptions.some((e=>e.children&&e.children.some((e=>e.value===t.value))&&e.selected));return!e})).map((t=>t.label)).join(", ");return i("div",{class:`ifx-multiselect-container`,ref:t=>this.dropdownElement=t},this.label?i("div",{class:"ifx-label-wrapper"},i("span",null,this.label)):null,i("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":""}`,tabindex:"0",onClick:this.disabled?undefined:t=>this.handleWrapperClick(t),onKeyDown:this.disabled?undefined:t=>this.handleKeyDown(t)},i("div",{class:`ifx-multiselect-input \n          ${this.persistentSelectedOptions.length===0?"placeholder":""}\n          `,onClick:this.disabled?undefined:()=>this.toggleDropdown()},this.persistentSelectedOptions.length>0?t:this.placeholder),this.dropdownOpen&&i("div",{class:"ifx-multiselect-dropdown-menu",onScroll:t=>this.handleScroll(t),style:{"--dynamic-z-index":this.zIndex.toString()}},this.showSearch&&i("input",{type:"text",role:"textbox",class:"search-input",onKeyDown:t=>{t.stopPropagation()},onInput:t=>this.handleSearch(t.target),placeholder:"Search..."}),this.showSelectAll&&this.renderSelectAll(),this.filteredOptions.map(((t,e)=>this.renderOption(t,e))),this.isLoading&&i("div",null,"Loading more options...")),i("div",{class:"ifx-multiselect-icon-container"},this.persistentSelectedOptions.length>0&&i("div",{class:"ifx-clear-button",onClick:this.disabled?undefined:()=>this.clearSelection()},i("ifx-icon",{icon:"cremove16"})),i("div",{class:"icon-wrapper-up",onClick:this.disabled?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-up",icon:"chevronup-16"})),i("div",{class:"icon-wrapper-down",onClick:this.disabled?undefined:()=>this.toggleDropdown()},i("ifx-icon",{key:"icon-down",icon:"chevron-down-16"})))),this.internalError?i("div",{class:"ifx-error-message-wrapper"},i("span",null,this.internalErrorMessage)):null)}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{options:["updateOptions"],error:["updateInternalError"],errorMessage:["updateInternalErrorMessage"],loadedOptions:["loadedOptionsChanged"],persistentSelectedOptions:["onSelectionChange"]}}};l.globalZIndex=1;l.style=o;const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:"Source Sans 3";font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}';const c=a;const p=class{constructor(i){t(this,i);this.ifxInput=e(this,"ifxInput",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.placeholder="Placeholder";this.value="";this.error=false;this.label="";this.icon="";this.caption="";this.size="m";this.required=false;this.optional=false;this.success=false;this.disabled=false;this.maxlength=undefined;this.showDeleteIcon=false}valueWatcher(t){if(t!==this.inputElement.value){this.inputElement.value=t}}async reset(){this.value="";this.inputElement.value=""}handleDeleteContent(){this.reset();this.ifxInput.emit(this.value)}handleInput(){const t=this.inputElement.value;this.value=t;this.internals.setFormValue(t);this.ifxInput.emit(this.value)}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}render(){return i("div",{key:"8d742d3a60998d4648040fab5d5d50853b12c7b4","aria-label":"a text field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`textInput__container ${this.disabled?"disabled":""}`},i("div",{key:"4965d888690874e8775bfc83602340b6b83d3e5e",class:"textInput__top-wrapper"},i("label",{key:"d5224921d5c26fc62d551bf10dd1207d8ff5e67f",htmlFor:"text-field"},i("slot",{key:"eb5758011376ace0664b074fd4e755b1920fa7f4"}),this.optional&&this.required?i("span",{class:"optional-required"},"(optional) *"):this.optional?i("span",{class:"optional"},"(optional)"):this.required?i("span",{class:`required ${this.error?"error":""}`},"*"):null)),i("div",{key:"ec295037f306f2cd6ee6c3ba3310dc858c4a74f6",class:"textInput__bottom-wrapper"},i("div",{key:"bfb3f3e2c47c6f57f29f3fb16cc5e5b50a5e11f4",class:"input-container"},this.icon&&i("ifx-icon",{key:"e94e39b0426900264b834b79e9b7667563311b3c",class:"input-icon",icon:this.icon}),i("input",{key:"08ba76dbe8ac6ab62ffbcb4d0aa44437f8c6b057",ref:t=>this.inputElement=t,disabled:this.disabled,type:"text",id:"text-field",value:this.value,onInput:()=>this.handleInput(),placeholder:this.placeholder,maxlength:this.maxlength,class:`${this.icon?"icon":""}\n                ${this.error?"error":""} \n              ${this.size==="s"?"input-s":""}\n              ${this.success?"success":""}`}),this.showDeleteIcon&&this.value&&i("ifx-icon",{key:"f0df7c42fe70e05928e2db93017db15d1f8c659c",class:"delete-icon",icon:"cremove16",onClick:()=>this.handleDeleteContent()})),this.caption&&!this.error&&i("div",{key:"ac6811a80b1728eb7ecea350a2821990d3e49b40",class:`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""`},this.caption),this.error&&i("div",{key:"deba470325e740fc058a67bfcf056af34ab4d8ef",class:"textInput__bottom-wrapper-caption error"},this.caption)))}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{value:["valueWatcher"]}}};p.style=c;export{l as ifx_multiselect,p as ifx_text_field};
+//# sourceMappingURL=p-dc7deb14.entry.js.map

package/dist/{esm/ifx-multiselect.entry.js.map → infineon-design-system-stencil/p-dc7deb14.entry.js.map}

@@ -1 +1 @@
-{"file":"ifx-multiselect.entry.js","mappings":"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","names":[],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.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() ifxMultiselectIsOpen: 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    \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          selectedOptions.push(option);\n        }\n      } else {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\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 => option.label.toLowerCase().includes(searchTerm))\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        }\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\n      // Dispatch the ifxMultiselectIsOpen event\n      this.ifxMultiselectIsOpen.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 ifxMultiselectIsOpen event\n      this.ifxMultiselectIsOpen.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"],"version":3}
+{"version":3,"names":["multiselectCss","IfxMultiselectStyle0","debounce","func","wait","timeout","executedFunction","args","later","clearTimeout","setTimeout","Multiselect","this","currentIndex","handleSearch","targetElement","searchTerm","value","toLowerCase","filteredOptions","loadedOptions","filter","option","label","includes","handleDocumentClick","event","path","composedPath","dropdownElement","dropdownOpen","document","removeEventListener","ifxMultiselectIsOpen","emit","updateOptions","optionCount","optionsProcessed","persistentSelectedOptions","loadInitialOptions","isLoading","internalError","error","internalErrorMessage","errorMessage","fetchOptions","batchSize","fetchMoreOptions","moreOptions","length","handleScroll","element","target","halfwayPoint","Math","floor","scrollHeight","clientHeight","scrollTop","startIndex","count","allOptions","options","JSON","parse","err","console","Array","isArray","countOptions","initiallySelected","collectSelectedOptions","initallySelectedNotInState","init","some","opt","slicedOptions","slice","selectedOptions","selected","children","concat","collectLeafOptions","push","leafOptions","child","componentDidLoad","positionDropdown","componentWillLoad","updateInternalError","updateInternalErrorMessage","loadedOptionsChanged","onSelectionChange","newValue","_","formData","FormData","forEach","append","name","internals","setFormValue","handleOptionClick","isSelectionLimitReached","checkboxRef","toggleCheckedState","updateSelection","ifxSelect","newOptionsLength","maxItemCount","selectedOption","wasSelected","handleParentOptionClick","handleChildOptionClick","selectAll","selectAllRecursive","allChildrenSelected","every","newChildren","childOption","updateParentSelectedState","_a","isOptionIndeterminate","indeterminate","getSizeClass","size","toggleDropdown","addEventListener","zIndex","globalZIndex","waitForElement","querySelectorFunc","callback","maxTries","tries","request","requestAnimationFrame","elements","handleKeyDown","disabled","querySelectorAll","code","updateHighlightedOption","handleArrowDown","handleArrowUp","handleWrapperClick","currentTarget","clearSelection","wrapperRect","el","shadowRoot","querySelector","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","spaceAbove","top","height","dropdownFlipped","classList","remove","add","focus","handleOptionKeyDown","e","key","stopPropagation","renderOption","index","isIndeterminate","isSelected","isOptionSelected","disableCheckbox","uniqueId","h","class","onKeyDown","onClick","tabindex","role","tabIndex","ref","id","checked","htmlFor","map","childIndex","renderSubOption","persistentOption","selectedChildren","findInOptions","foundInChildren","renderSelectAll","allSelected","noneSelected","that","toggleSelectAll","handleSelectAllKeydown","render","selectedOptionsLabels","isChildSelectedWithParent","parentOption","join","undefined","placeholder","onScroll","style","toString","showSearch","type","onInput","showSelectAll","icon","textFieldCss","IfxTextFieldStyle0","TextField","valueWatcher","inputElement","reset","handleDeleteContent","ifxInput","handleInput","query","formResetCallback","setValidity","optional","required","maxlength","success","showDeleteIcon","caption"],"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() ifxMultiselectIsOpen: 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    \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          selectedOptions.push(option);\n        }\n      } else {\n        if (option.children && option.children.length > 0) {\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\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 => option.label.toLowerCase().includes(searchTerm))\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        }\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\n      // Dispatch the ifxMultiselectIsOpen event\n      this.ifxMultiselectIsOpen.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 ifxMultiselectIsOpen event\n      this.ifxMultiselectIsOpen.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"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as i}from"./p-6b122987.js";import{c as n}from"./p-5cdc6210.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.link{display:inline-flex;align-items:center;font-weight:400;font-size:1rem;text-decoration:none;color:#0A8276;gap:8px;line-height:1.6;font-family:var(--ifx-font-family)}.link:focus{outline-width:2px;outline-style:solid;outline-color:#0A8276;outline-offset:4px;border-radius:3px}.link.bold{font-weight:600}.link.bold:hover{text-decoration:underline}.link.bold:active{color:#08665C;font-style:normal;font-weight:600;text-decoration:underline}.link.underlined{text-decoration:underline;text-decoration-color:#0A8276;color:#1D1D1D;text-underline-offset:8px}.link.underlined:hover{color:#0A8276}.link.underlined:active{color:#0A8276}.link.underlined:disabled,.link.underlined.disabled{text-decoration-color:#BFBBBB}.link.title{text-decoration:none;font-weight:600;color:#1D1D1D}.link.title:hover{color:#0A8276}.link.title:active{color:#08665C}.link.menu{font-weight:400;font-style:normal;line-height:26px;color:#1D1D1D}.link.menu:hover{color:#0A8276}.link.menu:active{color:#08665C}.link.small{font-size:0.875rem}.link.medium{font-size:1rem}.link.large{font-size:1.125rem}.link.extraLarge{font-size:1.25rem}.link.underline{text-decoration:underline}.link:disabled,.link.disabled{color:#BFBBBB;cursor:default;pointer-events:none}';const l=t;const o=class{constructor(i){e(this,i);this.href=undefined;this.target="_self";this.variant="bold";this.size=undefined;this.disabled=false;this.internalHref="";this.internalTarget="";this.internalVariant=""}setInternalStates(){if(this.href){this.internalHref=this.href.trim()}else{this.internalHref=undefined}this.internalTarget=this.target.trim();this.internalVariant=this.variant.trim().toLowerCase()}componentWillRender(){this.setInternalStates()}render(){return i("a",{key:"13fc06640399624a0e11f2b60ff335b0b1dff82c","aria-label":"a navigation link button",href:this.internalHref,target:this.internalTarget,class:this.linkClassNames()},i("slot",{key:"1304bfe3e670a2918fac007362217c7e5d70dd4b"}))}getSizeClass(){const e=this.size==="s"?"small":null;const i=this.size==="m"?"medium":null;const n=this.size==="l"?"large":null;const t=this.size==="xl"?"extraLarge":null;if(e){return e}else if(i){return i}else if(n){return n}else if(t&&this.internalVariant==="underlined"){return"large"}else if(t&&this.internalVariant!=="underlined"){return t}else return""}getVariantClass(){const e=this.internalVariant==="bold"?"bold":null;const i=this.internalVariant==="title"?"title":null;const n=this.internalVariant==="underlined"?"underlined":null;const t=this.internalVariant==="menu"?"menu":null;if(e){return e}else if(i){return i}else if(n){return n}else if(t){return t}else return e}linkClassNames(){return n("link","primary",this.getVariantClass(),this.getSizeClass(),this.disabled?"disabled":"")}};o.style=l;export{o as ifx_link};
+//# sourceMappingURL=p-e66c33ea.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["linkCss","IfxLinkStyle0","Link","undefined","setInternalStates","this","href","internalHref","trim","internalTarget","target","internalVariant","variant","toLowerCase","componentWillRender","render","h","key","class","linkClassNames","getSizeClass","small","size","medium","large","extraLarge","getVariantClass","bold","title","underlined","menu","classNames","disabled"],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.link {\n  display: inline-flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  text-decoration: none;\n  color: tokens.$ifxColorOcean500;\n  gap: tokens.$ifxSpace100;\n  line-height: 1.6;\n  font-family: var(--ifx-font-family);\n\n  &:focus {\n    outline-width: 2px;\n    outline-style: solid;\n    outline-color: #0A8276;\n    outline-offset: 4px;\n    border-radius: 3px;\n  }\n\n  &.bold {\n    font-weight: tokens.$ifxFontWeightSemibold;\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: #08665C;\n      font-style: normal;\n      font-weight: 600;\n      text-decoration: underline;\n    }\n\n  }\n\n  &.underlined {\n    text-decoration: underline;\n    text-decoration-color: tokens.$ifxColorOcean500;\n    color: #1D1D1D;\n    text-underline-offset: 8px;\n    \n    &:hover {\n      color: tokens.$ifxColorOcean500;;\n    }\n    \n    &:active {\n      color: #0A8276;\n    }\n\n    &:disabled,\n    &.disabled {\n      text-decoration-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.title {\n    text-decoration: none;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.menu {\n    font-weight: 400;\n    font-style: normal;\n    line-height: 26px;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n\n\n  &.small {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  &.medium {\n    font-size: tokens.$ifxFontSizeM;\n  }\n\n  &.large {\n    font-size: tokens.$ifxFontSizeL;\n  }\n\n  &.extraLarge {\n    font-size: tokens.$ifxFontSizeXl;\n  }\n\n  // &.bold {\n  //   font-weight: tokens.$ifxFontWeightSemibold;\n  // }\n\n  // &.primary {\n  //   color: tokens.$ifxColorOcean500;\n  // }\n\n  // &.secondary {\n  //   color: tokens.$ifxColorBerry500;\n  // }\n\n  // &.warning {\n  //   color: tokens.$ifxColorOrange500;\n  // }\n\n  // &.danger {\n  //   color: tokens.$ifxColorRed500;\n  // }\n\n  // &.success {\n  //   color: tokens.$ifxColorGreen500;\n  // }\n\n  &.underline {\n    text-decoration: underline;\n  }\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    cursor: default;\n    pointer-events:  none;\n  }\n\n}","import { Component, Prop, h, State } from \"@stencil/core\";\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Prop() href: string = undefined;\n  @Prop() target: string = '_self';\n  @Prop() variant: string = 'bold';\n  @Prop() size: string;\n  @Prop() disabled: boolean = false;\n  @State() internalHref: string ='';\n  @State() internalTarget: string = '';\n  @State() internalVariant: string = '';\n\n  setInternalStates() {\n    if(this.href){\n      this.internalHref = this.href.trim();\n    }else{\n      this.internalHref = undefined;\n    }\n    this.internalTarget = this.target.trim();\n    this.internalVariant = this.variant.trim().toLowerCase();\n  }\n\n  componentWillRender(){\n    this.setInternalStates();\n  }\n\n\n  render() {\n    return (\n      <a aria-label='a navigation link button' href={this.internalHref} target={this.internalTarget} class={this.linkClassNames()}>\n        <slot></slot>\n      </a>\n    )\n  }\n\n  getSizeClass() {\n    const small = this.size === 's' ? 'small' : null;\n    const medium = this.size === 'm' ? 'medium' : null;\n    const large = this.size === 'l' ? 'large' : null;\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n    if (small) {\n      return small;\n    } else if (medium) {\n      return medium;\n    } else if (large) {\n      return large;\n    } else if (extraLarge && this.internalVariant === 'underlined') {\n      return 'large';\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\n      return extraLarge;\n    } else return \"\";\n  }\n\n  getVariantClass() {\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\n    const title = this.internalVariant === 'title' ? 'title' : null;\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n    if (bold) {\n      return bold\n    } else if (title) {\n      return title;\n    } else if (underlined) {\n      return underlined;\n    } else if (menu) {\n      return menu;\n    } else return bold;\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      'primary',\n      this.getVariantClass(),\n      this.getSizeClass(),\n      this.disabled ? 'disabled' : '',\n    );\n  }\n}\n\n"],"mappings":"+EAAA,MAAMA,EAAU,4zCAChB,MAAAC,EAAeD,E,MCSFE,EAAI,M,mCACQC,U,YACE,Q,aACC,O,kCAEE,M,kBACG,G,oBACG,G,qBACC,E,CAEnC,iBAAAC,GACE,GAAGC,KAAKC,KAAK,CACXD,KAAKE,aAAeF,KAAKC,KAAKE,M,KAC3B,CACHH,KAAKE,aAAeJ,S,CAEtBE,KAAKI,eAAiBJ,KAAKK,OAAOF,OAClCH,KAAKM,gBAAkBN,KAAKO,QAAQJ,OAAOK,a,CAG7C,mBAAAC,GACET,KAAKD,mB,CAIP,MAAAW,GACE,OACEC,EAAA,KAAAC,IAAA,wDAAc,2BAA2BX,KAAMD,KAAKE,aAAcG,OAAQL,KAAKI,eAAgBS,MAAOb,KAAKc,kBACzGH,EAAA,QAAAC,IAAA,6C,CAKN,YAAAG,GACE,MAAMC,EAAQhB,KAAKiB,OAAS,IAAM,QAAU,KAC5C,MAAMC,EAASlB,KAAKiB,OAAS,IAAM,SAAW,KAC9C,MAAME,EAAQnB,KAAKiB,OAAS,IAAM,QAAU,KAC5C,MAAMG,EAAapB,KAAKiB,OAAS,KAAO,aAAe,KAEvD,GAAID,EAAO,CACT,OAAOA,C,MACF,GAAIE,EAAQ,CACjB,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,GAAcpB,KAAKM,kBAAoB,aAAc,CAC9D,MAAO,O,MACF,GAAIc,GAAcpB,KAAKM,kBAAoB,aAAc,CAC9D,OAAOc,C,MACF,MAAO,E,CAGhB,eAAAC,GACE,MAAMC,EAAOtB,KAAKM,kBAAoB,OAAS,OAAS,KACxD,MAAMiB,EAAQvB,KAAKM,kBAAoB,QAAU,QAAU,KAC3D,MAAMkB,EAAaxB,KAAKM,kBAAoB,aAAe,aAAe,KAC1E,MAAMmB,EAAOzB,KAAKM,kBAAoB,OAAS,OAAS,KAExD,GAAIgB,EAAM,CACR,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,EAAY,CACrB,OAAOA,C,MACF,GAAIC,EAAM,CACf,OAAOA,C,MACF,OAAOH,C,CAGhB,cAAAR,GACE,OAAOY,EACL,OACA,UACA1B,KAAKqB,kBACLrB,KAAKe,eACLf,KAAK2B,SAAW,WAAa,G","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as s,g as h}from"./p-6b122987.js";import{c as e}from"./p-e459974a.js";const n=":host{display:inline-block}";const l=n;const a=class{constructor(s){i(this,s);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.ifxDropdown=t(this,"ifxDropdown",7);this.placement="bottom-start";this.defaultOpen=false;this.internalIsOpen=false;this.noAppendToBody=false;this.disabled=undefined;this.noCloseOnOutsideClick=false;this.noCloseOnMenuClick=false;this.trigger=undefined;this.menu=undefined}componentWillLoad(){this.updateSlotContent();this.watchHandlerIsOpen(this.defaultOpen,this.internalIsOpen)}watchHandlerIsOpen(i,t){if(i!==t&&i!==this.internalIsOpen){if(i){this.openDropdown()}else{this.closeDropdown()}}}watchHandlerDisabled(i){if(this.trigger){this.trigger.disabled=i}}watchHandlerSlot(){this.updateSlotContent()}updateSlotContent(){this.trigger=this.el.querySelector("ifx-dropdown-trigger-button, ifx-dropdown-trigger");if(this.trigger){this.trigger.disabled=this.disabled;this.trigger.removeEventListener("click",this.triggerClickHandler.bind(this));this.trigger.addEventListener("click",this.triggerClickHandler.bind(this))}if(!this.noAppendToBody){if(this.menu){this.menu.remove()}this.menu=this.el.querySelector("ifx-dropdown-menu");document.body.append(this.menu)}else{this.menu=this.el.querySelector("ifx-dropdown-menu")}this.menu.removeEventListener("click",this.menuClickHandler.bind(this));this.menu.addEventListener("click",this.menuClickHandler.bind(this))}menuClickHandler(){if(!this.noCloseOnMenuClick){this.closeDropdown()}}triggerClickHandler(){if(!this.internalIsOpen){this.openDropdown()}else{this.closeDropdown()}}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.menu){this.menu.remove()}}async isOpen(){return this.internalIsOpen}async closeDropdown(){if(this.internalIsOpen){this.internalIsOpen=false;this.trigger.isOpen=false;this.menu.isOpen=false;this.ifxClose.emit()}if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}async openDropdown(){if(!this.internalIsOpen&&!this.disabled){this.internalIsOpen=true;this.trigger.isOpen=true;this.menu.isOpen=true;this.popperInstance=e(this.el,this.menu,{placement:this.placement});this.ifxOpen.emit()}}handleOutsideClick(i){const t=i.target;if(!this.noCloseOnOutsideClick&&!this.el.contains(t)&&!this.menu.contains(t)){this.closeDropdown()}}render(){return s("div",{key:"219177f6d008120f92de56d6e3a0b135b1150fa3","aria-label":"dropdown menu",class:"dropdown"},s("slot",{key:"c914c9bbf3476b569d90db5418c35cb0e5645a4e"}))}get el(){return h(this)}static get watchers(){return{defaultOpen:["watchHandlerIsOpen"],disabled:["watchHandlerDisabled"]}}};a.style=l;export{a as ifx_dropdown};
+//# sourceMappingURL=p-eb8ba37f.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","IfxDropdownStyle0","Dropdown","componentWillLoad","this","updateSlotContent","watchHandlerIsOpen","defaultOpen","internalIsOpen","newValue","oldValue","openDropdown","closeDropdown","watchHandlerDisabled","trigger","disabled","watchHandlerSlot","el","querySelector","removeEventListener","triggerClickHandler","bind","addEventListener","noAppendToBody","menu","remove","document","body","append","menuClickHandler","noCloseOnMenuClick","disconnectedCallback","popperInstance","destroy","isOpen","ifxClose","emit","createPopper","placement","ifxOpen","handleOutsideClick","event","target","noCloseOnOutsideClick","contains","render","h","key","class"],"sources":["src/components/dropdown/dropdown.scss?tag=ifx-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-block;\n}","//dropdown.tsx\nimport { Component, Prop, h, Element, Listen, Method, Watch, State, EventEmitter, Event } from \"@stencil/core\";\nimport { createPopper } from '@popperjs/core';\n \n\nimport { IOpenable } from './IOpenable';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\n@Component({\n  tag: 'ifx-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true\n})\n\nexport class Dropdown {\n  @Prop() placement: Placement = 'bottom-start';\n\n  // isOpen prop\n  @Prop() defaultOpen: boolean = false;\n  // internal state for isOpen prop\n  @State() internalIsOpen: boolean = false;\n\n  // isOpen prop\n  @Prop() noAppendToBody: boolean = false;\n\n  // Custom events for opening and closing dropdown\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  @Event() ifxDropdown: EventEmitter;\n\n  // determine if dropdown is disabled\n  @Prop() disabled: boolean;\n\n  @Prop() noCloseOnOutsideClick: boolean = false;\n  @Prop() noCloseOnMenuClick: boolean = false;\n\n  // Reference to host element\n  @Element() el;\n  // Dropdown trigger and menu\n  @State() trigger: HTMLElement;\n  @State() menu: HTMLElement\n  // Popper instance for positioning\n  popperInstance: any;\n\n\n\n  componentWillLoad() {\n    //maybe not needed\n    this.updateSlotContent();\n    this.watchHandlerIsOpen(this.defaultOpen, this.internalIsOpen);\n  }\n\n\n\n  @Watch('defaultOpen')\n  watchHandlerIsOpen(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue && newValue !== this.internalIsOpen) {\n      if (newValue) {\n        this.openDropdown();\n      } else {\n        this.closeDropdown();\n      }\n    }\n  }\n\n  @Watch('disabled')\n  watchHandlerDisabled(newValue: boolean) {\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = newValue;\n    }\n  }\n\n\n  @Listen('slotchange')\n  watchHandlerSlot() {\n    this.updateSlotContent();\n  }\n\n\n\n  // handling assignment of trigger and menu\n  updateSlotContent() {\n    // Get dropdown trigger. name has to start with ifx-dropdown-trigger\n    this.trigger = this.el.querySelector('ifx-dropdown-trigger-button, ifx-dropdown-trigger');\n    if (this.trigger) {\n      (this.trigger as undefined as HTMLIfxDropdownTriggerButtonElement).disabled = this.disabled;\n      this.trigger.removeEventListener('click', this.triggerClickHandler.bind(this));\n      this.trigger.addEventListener('click', this.triggerClickHandler.bind(this));\n    }\n    // Remove menu if exists from body\n    if (!this.noAppendToBody) {\n      if (this.menu) {\n        this.menu.remove();\n      }\n      // Get new menu and add to body\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n      // event handler for closing dropdown on menu click\n      document.body.append(this.menu);\n    } else {\n      this.menu = this.el.querySelector('ifx-dropdown-menu');\n\n    }\n    this.menu.removeEventListener('click', this.menuClickHandler.bind(this));\n    this.menu.addEventListener('click', this.menuClickHandler.bind(this));\n\n  }\n\n  menuClickHandler() {\n    if (!this.noCloseOnMenuClick) {\n      this.closeDropdown();\n    }\n  }\n\n  triggerClickHandler() {\n    if (!this.internalIsOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  disconnectedCallback() {\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n    // Remove menu if exists\n    if (this.menu) {\n      this.menu.remove();\n    }\n  }\n\n  @Method()\n  async isOpen() {\n    return this.internalIsOpen;\n  }\n\n  @Method()\n  async closeDropdown() {\n    if (this.internalIsOpen) {\n      this.internalIsOpen = false;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = false;\n      (this.menu as unknown as IOpenable).isOpen = false;\n      // Emit close event\n      this.ifxClose.emit();\n    }\n    // Destroy popper instance if exists\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  @Method()\n  async openDropdown() {\n    if (!this.internalIsOpen && !this.disabled) {\n      this.internalIsOpen = true;\n      // sets isOpen prop on trigger and menu\n      (this.trigger as unknown as IOpenable).isOpen = true;\n      (this.menu as unknown as IOpenable).isOpen = true;\n      // Create popper instance for positioning\n      this.popperInstance = createPopper(\n        this.el,\n        this.menu,\n        { placement: this.placement });\n\n      this.ifxOpen.emit();\n    }\n  }\n\n  //emitted by and listening to it from the dropdown menu right now\n  // @Listen('ifxDropdownMenu')\n  // handleDropdownMenuEvents(event: CustomEvent) {\n  //   this.ifxDropdown.emit(event.detail)\n  //   console.log('Selected item received in higher-level parent:');\n  // }\n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    // Close dropdown if outside click\n    if (!this.noCloseOnOutsideClick && !this.el.contains(target) && !this.menu.contains(target)) {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    return (\n      <div aria-label='dropdown menu' class='dropdown'>\n        <slot />\n      </div>\n    )\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAc,8BACpB,MAAAC,EAAeD,E,MC6BFE,EAAQ,M,qJACY,e,iBAGA,M,oBAEI,M,oBAGD,M,mDAUO,M,wBACH,M,2CAYtC,iBAAAC,GAEEC,KAAKC,oBACLD,KAAKE,mBAAmBF,KAAKG,YAAaH,KAAKI,e,CAMjD,kBAAAF,CAAmBG,EAAmBC,GACpC,GAAID,IAAaC,GAAYD,IAAaL,KAAKI,eAAgB,CAC7D,GAAIC,EAAU,CACZL,KAAKO,c,KACA,CACLP,KAAKQ,e,GAMX,oBAAAC,CAAqBJ,GACnB,GAAIL,KAAKU,QAAS,CACfV,KAAKU,QAA6DC,SAAWN,C,EAMlF,gBAAAO,GACEZ,KAAKC,mB,CAMP,iBAAAA,GAEED,KAAKU,QAAUV,KAAKa,GAAGC,cAAc,qDACrC,GAAId,KAAKU,QAAS,CACfV,KAAKU,QAA6DC,SAAWX,KAAKW,SACnFX,KAAKU,QAAQK,oBAAoB,QAASf,KAAKgB,oBAAoBC,KAAKjB,OACxEA,KAAKU,QAAQQ,iBAAiB,QAASlB,KAAKgB,oBAAoBC,KAAKjB,M,CAGvE,IAAKA,KAAKmB,eAAgB,CACxB,GAAInB,KAAKoB,KAAM,CACbpB,KAAKoB,KAAKC,Q,CAGZrB,KAAKoB,KAAOpB,KAAKa,GAAGC,cAAc,qBAGlCQ,SAASC,KAAKC,OAAOxB,KAAKoB,K,KACrB,CACLpB,KAAKoB,KAAOpB,KAAKa,GAAGC,cAAc,oB,CAGpCd,KAAKoB,KAAKL,oBAAoB,QAASf,KAAKyB,iBAAiBR,KAAKjB,OAClEA,KAAKoB,KAAKF,iBAAiB,QAASlB,KAAKyB,iBAAiBR,KAAKjB,M,CAIjE,gBAAAyB,GACE,IAAKzB,KAAK0B,mBAAoB,CAC5B1B,KAAKQ,e,EAIT,mBAAAQ,GACE,IAAKhB,KAAKI,eAAgB,CACxBJ,KAAKO,c,KACA,CACLP,KAAKQ,e,EAIT,oBAAAmB,GAEE,GAAI3B,KAAK4B,eAAgB,CACvB5B,KAAK4B,eAAeC,UACpB7B,KAAK4B,eAAiB,I,CAGxB,GAAI5B,KAAKoB,KAAM,CACbpB,KAAKoB,KAAKC,Q,EAKd,YAAMS,GACJ,OAAO9B,KAAKI,c,CAId,mBAAMI,GACJ,GAAIR,KAAKI,eAAgB,CACvBJ,KAAKI,eAAiB,MAErBJ,KAAKU,QAAiCoB,OAAS,MAC/C9B,KAAKoB,KAA8BU,OAAS,MAE7C9B,KAAK+B,SAASC,M,CAGhB,GAAIhC,KAAK4B,eAAgB,CACvB5B,KAAK4B,eAAeC,UACpB7B,KAAK4B,eAAiB,I,EAK1B,kBAAMrB,GACJ,IAAKP,KAAKI,iBAAmBJ,KAAKW,SAAU,CAC1CX,KAAKI,eAAiB,KAErBJ,KAAKU,QAAiCoB,OAAS,KAC/C9B,KAAKoB,KAA8BU,OAAS,KAE7C9B,KAAK4B,eAAiBK,EACpBjC,KAAKa,GACLb,KAAKoB,KACL,CAAEc,UAAWlC,KAAKkC,YAEpBlC,KAAKmC,QAAQH,M,EAYjB,kBAAAI,CAAmBC,GACjB,MAAMC,EAASD,EAAMC,OAErB,IAAKtC,KAAKuC,wBAA0BvC,KAAKa,GAAG2B,SAASF,KAAYtC,KAAKoB,KAAKoB,SAASF,GAAS,CAC3FtC,KAAKQ,e,EAIT,MAAAiC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gBAAgBC,MAAM,YACpCF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-5a863742.entry.js → p-ee39e4ce.entry.js}

@@ -1,2 +1,2 @@
-import{r as a,h as o}from"./p-95a83b13.js";const e=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const f=e;const d=class{constructor(o){a(this,o)}render(){return o("div",{key:"b42dc08dabda81dd0e8e604d07c8409686a5f0fd",class:"dropdown-header"},o("span",{key:"9f699e2874688216d23da95c3b96d78caad78695"},o("slot",{key:"f8b69b6e6840fcc1c8f3b877a9361e192a1d76a0"})))}};d.style=f;export{d as ifx_dropdown_header};
-//# sourceMappingURL=p-5a863742.entry.js.map
+import{r as a,h as o}from"./p-6b122987.js";const e=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const f=e;const d=class{constructor(o){a(this,o)}render(){return o("div",{key:"b42dc08dabda81dd0e8e604d07c8409686a5f0fd",class:"dropdown-header"},o("span",{key:"9f699e2874688216d23da95c3b96d78caad78695"},o("slot",{key:"f8b69b6e6840fcc1c8f3b877a9361e192a1d76a0"})))}};d.style=f;export{d as ifx_dropdown_header};
+//# sourceMappingURL=p-ee39e4ce.entry.js.map

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

@@ -0,0 +1,2 @@
+import{r as e,h as i,g as t}from"./p-6b122987.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__headline-wrapper{padding-bottom:16px}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.horizontal{font-size:1.25rem;line-height:28px}';const n=a;const o=class{constructor(i){e(this,i);this.direction=undefined;this.hasDesc=undefined}componentWillLoad(){var e;const i=this.el.closest("ifx-card");if(i){const t=(e=i.shadowRoot.querySelector(".card"))===null||e===void 0?void 0:e.className;if(t&&t.includes("horizontal")){this.direction="horizontal"}const a=i.querySelector("ifx-card-text");if(a){this.hasDesc=true}}}render(){return i("div",{key:"3599127fad1e7dc563064d38df9996bcd7bd9217",class:`card__headline-wrapper ${this.hasDesc?"withDesc":""}`},i("div",{key:"643428271dec2bdf71c7059bf6e28c00cae9438b",class:`card-headline ${this.direction}`},i("slot",{key:"3b7ec4e25a399e96a0db4f03d793109eabf08fff"})))}get el(){return t(this)}};o.style=n;export{o as ifx_card_headline};
+//# sourceMappingURL=p-f0052c72.entry.js.map

package/dist/infineon-design-system-stencil/{p-459b20f6.entry.js.map → p-f0052c72.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["cardHeadlineCss","IfxCardHeadlineStyle0","CardHeadline","componentWillLoad","cardElement","this","el","closest","cardClass","_a","shadowRoot","querySelector","className","includes","direction","desc","hasDesc","render","h","key","class"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card__headline-wrapper {\n  padding-bottom: 16px;\n\n  &.withDesc {\n    padding-bottom: 8px;\n  }\n}\n\n.card-headline {\n  margin-top: 0;\n  padding-top: 0;\n  font-family: var(--ifx-font-family);\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSize3xl;\n  line-height: tokens.$ifxLineHeight3xl;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &.horizontal {\n    font-size: tokens.$ifxFontSizeXl;\n    line-height: 28px;\n  }\n\n}","import { Component, h, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-headline',\n  styleUrl: 'card-headline.scss',\n  shadow: true,\n})\n\nexport class CardHeadline {\n  @Element() el;\n  @State() direction: string;\n  @State() hasDesc: boolean;\n\n  componentWillLoad() {\n    const cardElement = this.el.closest('ifx-card');\n\n    if (cardElement) {\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n      if (cardClass && cardClass.includes('horizontal')) {\n        this.direction = 'horizontal'\n      }\n\n      const desc = cardElement.querySelector('ifx-card-text');\n      if (desc) {\n        this.hasDesc = true;\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n        <div class={`card-headline ${this.direction}`}>\n          <slot />\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,4fACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,yBAKvB,iBAAAC,G,MACE,MAAMC,EAAcC,KAAKC,GAAGC,QAAQ,YAEpC,GAAIH,EAAa,CACf,MAAMI,GAAYC,EAAAL,EAAYM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,SAAAA,EAAEG,UAEjE,GAAIJ,GAAaA,EAAUK,SAAS,cAAe,CACjDR,KAAKS,UAAY,Y,CAGnB,MAAMC,EAAOX,EAAYO,cAAc,iBACvC,GAAII,EAAM,CACRV,KAAKW,QAAU,I,GAMrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0Bf,KAAKW,QAAU,WAAa,MAChEE,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBf,KAAKS,aAChCI,EAAA,QAAAC,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["cardHeadlineCss","IfxCardHeadlineStyle0","CardHeadline","componentWillLoad","cardElement","this","el","closest","cardClass","_a","shadowRoot","querySelector","className","includes","direction","desc","hasDesc","render","h","key","class"],"sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card__headline-wrapper {\n  padding-bottom: 16px;\n\n  &.withDesc {\n    padding-bottom: 8px;\n  }\n}\n\n.card-headline {\n  margin-top: 0;\n  padding-top: 0;\n  font-family: var(--ifx-font-family);\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSize3xl;\n  line-height: tokens.$ifxLineHeight3xl;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &.horizontal {\n    font-size: tokens.$ifxFontSizeXl;\n    line-height: 28px;\n  }\n\n}","import { Component, h, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-headline',\n  styleUrl: 'card-headline.scss',\n  shadow: true,\n})\n\nexport class CardHeadline {\n  @Element() el;\n  @State() direction: string;\n  @State() hasDesc: boolean;\n\n  componentWillLoad() {\n    const cardElement = this.el.closest('ifx-card');\n\n    if (cardElement) {\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n      if (cardClass && cardClass.includes('horizontal')) {\n        this.direction = 'horizontal'\n      }\n\n      const desc = cardElement.querySelector('ifx-card-text');\n      if (desc) {\n        this.hasDesc = true;\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n        <div class={`card-headline ${this.direction}`}>\n          <slot />\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,4fACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,yEAKvB,iBAAAC,G,MACE,MAAMC,EAAcC,KAAKC,GAAGC,QAAQ,YAEpC,GAAIH,EAAa,CACf,MAAMI,GAAYC,EAAAL,EAAYM,WAAWC,cAAc,YAAQ,MAAAF,SAAA,SAAAA,EAAEG,UAEjE,GAAIJ,GAAaA,EAAUK,SAAS,cAAe,CACjDR,KAAKS,UAAY,Y,CAGnB,MAAMC,EAAOX,EAAYO,cAAc,iBACvC,GAAII,EAAM,CACRV,KAAKW,QAAU,I,GAMrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0Bf,KAAKW,QAAU,WAAa,MAChEE,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iBAAiBf,KAAKS,aAChCI,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-888eac03.entry.js → p-f8d7bbe2.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as s,g as a}from"./p-95a83b13.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem "Source Sans 3"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem "Source Sans 3"}';const o=i;const n=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.caption="";this.label="";this.size="regular";this.selectedValue=""}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const a=this.getSegments();a.forEach((a=>{if(a.selected){if(a.segmentIndex!==e){a.selected=false;t=a.value}else{s=a.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}));if(!t&&e.length){e[0].selected=true;this.selectedValue=e[0].value}}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}componentDidLoad(){this.setActiveSegment()}render(){return s("div",{key:"2a980fa0fd18e469c2d92c57c80c62b7dfee30e9","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"bf202bd9f2a4967c5a5c0cd24013242ad4752a80",class:"group__label"},this.label.trim()),s("div",{key:"89e974d972a4ad903193459e9a65b47c89114ab8",class:"group__controls"},s("slot",{key:"10a57ab800389b4a7ae482c152817486a28ae96f"})),this.caption.trim()&&s("div",{key:"f63a61eabf58e03cc0c4b5bae031965b82cb4f2c",class:"group__caption"},s("ifx-icon",{key:"b758bb66d96d48e795565dbd662f1a2fc3648bfe",icon:"cinfo16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return a(this)}};n.style=o;export{n as ifx_segmented_control};
-//# sourceMappingURL=p-888eac03.entry.js.map
+import{r as e,c as t,h as s,g as a}from"./p-6b122987.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem "Source Sans 3"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem "Source Sans 3"}';const o=i;const n=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.selectedValue="";this.caption="";this.label="";this.size="regular"}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const a=this.getSegments();a.forEach((a=>{if(a.selected){if(a.segmentIndex!==e){a.selected=false;t=a.value}else{s=a.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}));if(!t&&e.length){e[0].selected=true;this.selectedValue=e[0].value}}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}componentDidLoad(){this.setActiveSegment()}render(){return s("div",{key:"2a980fa0fd18e469c2d92c57c80c62b7dfee30e9","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"bf202bd9f2a4967c5a5c0cd24013242ad4752a80",class:"group__label"},this.label.trim()),s("div",{key:"89e974d972a4ad903193459e9a65b47c89114ab8",class:"group__controls"},s("slot",{key:"10a57ab800389b4a7ae482c152817486a28ae96f"})),this.caption.trim()&&s("div",{key:"f63a61eabf58e03cc0c4b5bae031965b82cb4f2c",class:"group__caption"},s("ifx-icon",{key:"b758bb66d96d48e795565dbd662f1a2fc3648bfe",icon:"cinfo16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return a(this)}};n.style=o;export{n as ifx_segmented_control};
+//# sourceMappingURL=p-f8d7bbe2.entry.js.map

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

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

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

@@ -0,0 +1,2 @@
+import{r as e,h as i,g as t}from"./p-6b122987.js";import{i as o}from"./p-38c8a9b0.js";const a='.container{display:flex;flex-direction:column;gap:10px}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace;position:sticky;top:0;left:0;z-index:99}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:"Nunito Sans";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:"copied!";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}';const n=a;const c=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;this.copiedIndex=undefined;this.htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';this.iconName=`"c-info-24"`}handleCopiedText(){this.isCopied=true;setTimeout((()=>{this.isCopied=false}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}componentWillLoad(){for(let e in o){this.iconsArray.push(e)}}render(){return i("div",{key:"1115df3774a76b620e5a03e11bd3ef59e5ff05fd",class:"container"},i("div",{key:"18a2839c3a492c31215bbbb29cbcd3c0fea50bf0",class:"html-wrapper"},i("span",{key:"488ae76fd009a5fa0c9aaf2727deaa33cae3e3a1",class:"html-tag"},"<"),i("span",{key:"b8e95423cc15694f066d47b29dc03f6b41ff82fe",class:"component-name"},"ifx-icon"),i("span",{key:"7b87f22cbb47743521365708561b9f1eba8cdf32",class:"attribute-name"}," icon"),"=",i("span",{key:"13ec8254b12497b899b8960e26edf219205dbc36",class:"attribute-value"},this.iconName),i("span",{key:"6ae1377d4f1ba39b8e59a86da834e783bc343bb9",class:"html-tag"},">"),i("span",{key:"017d823522230476dded7323580c5e288c75cb47",class:"html-tag"},"</"),i("span",{key:"cd9091d4d3de72c0495c17097d0bcce5a9234441",class:"component-name"},"ifx-icon"),i("span",{key:"408b285174e12b46b9e3c2f8e413f5914c8fa62d",class:"html-tag"},">"),i("button",{key:"ce263f21f91373c8bc2f697fc876c72611297f0f",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy")),i("div",{key:"400251cc2a3dc9aaa646ad631fd37b142aa83381",class:"preview__container"},this.iconsArray.map(((e,t)=>i("div",{class:`preview__container-item ${this.isCopied&&this.copiedIndex===t?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e}))))))}get el(){return t(this)}};c.style=n;export{c as ifx_icons_preview};
+//# sourceMappingURL=p-fbd9e58e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconsPreviewCss","IfxIconsPreviewStyle0","IconsPreview","handleCopiedText","this","isCopied","setTimeout","copyIconText","icon","htmlTag","iconName","copyHtmlString","copiedTag","navigator","clipboard","writeText","componentWillLoad","icons","iconsArray","push","render","h","key","class","onClick","map","index","copiedIndex"],"sources":["src/components/icons-preview/icons-preview.scss?tag=ifx-icons-preview&encapsulation=shadow","src/components/icons-preview/icons-preview.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.html-wrapper {\n  background: rgb(38, 38, 38);\n  padding: 20px;\n  color: white;\n  font-family: monospace;\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 99;\n\n  & button {\n    position: absolute;\n    right: 0px;\n    bottom: 0px;\n    background: rgba(0, 0, 0, 0.85);\n    color: #C9CDCF;\n    border: 0 none;\n    padding: 4px 10px;\n    font-size: tokens.$ifxFontSizeXs;\n    font-family: \"Nunito Sans\";\n    font-weight: 700;\n    border-top: 1px solid rgba(255, 255, 255, .1);\n    border-left: 1px solid rgba(255, 255, 255, .1);\n    margin-left: -1px;\n    border-radius: 4px 0 0 0;\n    cursor: pointer;\n  }\n\n  & .component-name {\n    color: #A8FF60;\n  }\n\n  & .attribute-name {\n    color: rgb(150, 203, 254);\n  }\n\n  & .attribute-value {\n    color: rgb(180, 116, 221);\n  }\n\n\n}\n\n.preview__container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 2px;\n  flex-wrap: wrap;\n  gap: 4px;\n\n  & .preview__container-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid #f1f1f1;\n    padding: 2px;\n    width: 50px;\n    height: 50px;\n    position: relative;\n\n    &:active {\n      border-color: #378375;\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &.copied {\n      &::after {\n        z-index: 50;\n        content: 'copied!';\n        position: absolute;\n        top: 0;\n        left: 50px;\n        background-color: #000;\n        color: white;\n        padding: 3px;\n        border-radius: 4px;\n      }\n    }\n  }\n}","import { Component, h, Element, State } from \"@stencil/core\";\nimport { icons } from '@infineon/infineon-icons';\n\n@Component({\n  tag: 'ifx-icons-preview',\n  styleUrl: './icons-preview.scss',\n  shadow: true\n})\n\nexport class IconsPreview {\n  @State() iconsArray: string[] = [];\n  @State() isCopied: boolean = false;\n  @State() copiedIndex: number;\n  @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\n  @State() iconName: string = `\"c-info-24\"`;\n  @Element() el;\n\n  handleCopiedText() { \n    this.isCopied = true;\n    setTimeout(() => {\n      this.isCopied = false\n    }, 2000);\n  }\n\n  copyIconText(icon) { \n    this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\n    this.iconName = `\"${icon}\"`\n  }\n\n  copyHtmlString() { \n    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\n    navigator.clipboard.writeText(copiedTag);\n    this.handleCopiedText()\n  }\n\n  componentWillLoad() { \n    for(let icon in icons) { \n      this.iconsArray.push(icon)\n    }\n  }\n\n  render() {\n    return (\n      <div class='container'>\n        <div class='html-wrapper'>\n          <span class=\"html-tag\">&lt;</span>\n          <span class=\"component-name\">ifx-icon</span>\n          <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\n          <span class=\"html-tag\">&gt;</span>\n          <span class=\"html-tag\">&lt;/</span>\n          <span class=\"component-name\">ifx-icon</span>\n          <span class=\"html-tag\">&gt;</span>\n          <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\n        </div>\n        <div class=\"preview__container\">\n          {this.iconsArray.map((icon, index) => \n          <div class={`preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : \"\"}`} onClick={() => this.copyIconText(icon)}>\n            <ifx-icon icon={icon}></ifx-icon>\n          </div>)}\n        </div>\n      </div>\n    )\n  }\n}"],"mappings":"sFAAA,MAAMA,EAAkB,kxCACxB,MAAAC,EAAeD,E,MCQFE,EAAY,M,yCACS,G,cACH,M,wCAEF,2C,cACC,a,CAG5B,gBAAAC,GACEC,KAAKC,SAAW,KAChBC,YAAW,KACTF,KAAKC,SAAW,KAAK,GACpB,I,CAGL,YAAAE,CAAaC,GACXJ,KAAKK,QAAU,mBAAmBD,iBAClCJ,KAAKM,SAAW,IAAIF,I,CAGtB,cAAAG,GACE,MAAMC,EAAY,kBAAkBR,KAAKM,uBACzCG,UAAUC,UAAUC,UAAUH,GAC9BR,KAAKD,kB,CAGP,iBAAAa,GACE,IAAI,IAAIR,KAAQS,EAAO,CACrBb,KAAKc,WAAWC,KAAKX,E,EAIzB,MAAAY,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,YAC5BF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,SAAa,IAACF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAmBnB,KAAKM,UAC9EW,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,MACtBF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBAAgB,YAC5BF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,YAAU,KACtBF,EAAA,UAAAC,IAAA,2CAAQE,QAAS,IAAMpB,KAAKO,kBAAmBP,KAAKC,SAAW,SAAW,SAE5EgB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,sBACRnB,KAAKc,WAAWO,KAAI,CAACjB,EAAMkB,IAC5BL,EAAA,OAAKE,MAAO,2BAA2BnB,KAAKC,UAAYD,KAAKuB,cAAgBD,EAAQ,SAAW,KAAMF,QAAS,IAAMpB,KAAKG,aAAaC,IACrIa,EAAA,YAAUb,KAAMA,Q","ignoreList":[]}

package/dist/types/components.d.ts

@@ -512,13 +512,6 @@ 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;
@@ -707,10 +700,6 @@ 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;
@@ -1565,30 +1554,6 @@ 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;
     }
@@ -1701,8 +1666,6 @@ 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;
@@ -2202,14 +2165,6 @@ 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;
@@ -2321,8 +2276,6 @@ 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;
@@ -2403,8 +2356,6 @@ 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>;