@infineon/infineon-design-system-stencil 30.9.2--canary.1640.8926aa040c1241b80b9d12b6600d721691845221.0 → 30.9.2--canary.1640.70fa3eaef8e23b3cce71878a1e99bd63e614a640.0

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,g as r}from"./p-6b122987.js";const a=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}';const o=a;const n=class{constructor(t){e(this,t)}componentDidLoad(){const e=this.el.shadowRoot.firstChild;this.validateBreadcrumbItemStructure(e)}validateBreadcrumbItemStructure(e){if(!e){console.error("element not found");return}const t=e.querySelector("slot");if(t){const e=t.assignedNodes();for(let t=0;t<e.length;t++){const r=e[t];if(r.nodeName==="IFX-BREADCRUMB-ITEM"){const e=r;const t=e.querySelector("ifx-breadcrumb-item-label");const a=e.querySelector("ifx-dropdown-menu");if(t.hasAttribute("url")&&a){throw new Error("ifx-breadcrumb-item cannot have both a url and a dropdown menu.")}}}}}render(){return t("nav",{key:"82aec60bebf9a71d7cdcfc2916f91c0e36dee868","aria-label":"Page navigation breadcrumb"},t("ol",{key:"70bae75b26b5df4c509f16c0ab8e2b10333de8ac",class:"breadcrumb"},t("slot",{key:"1cb28e3640f20319349b4f6d3cb1568508d3b1ba"})))}get el(){return r(this)}};n.style=o;export{n as ifx_breadcrumb};
-//# sourceMappingURL=p-28fb795b.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as a}from"./p-6b122987.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem "Source Sans 3"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}';const l=s;const n=class{constructor(t){e(this,t);this.ifxChipChange=i(this,"ifxChipChange",7);this.placeholder="";this.size="large";this.value=undefined;this.variant="single";this.readOnly=false;this.AriaLabel=undefined;this.opened=false;this.selectedOptions=[]}handleValueChange(e){this.syncSelectedOptionsWithProp(e)}handleReadOnlyChange(e){if(e){this.opened=false}}closeDropdownOnOutsideClick(e){const i=e.composedPath();const t=this.chip.shadowRoot.querySelector(".chip__wrapper");const a=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(a)&&!i.includes(t)&&this.opened){this.toggleDropdownMenu()}}handleKeyDown(e){if(e.code!=="Tab"){e.preventDefault()}if(e.target.tagName==="IFX-CHIP"){this.handleWrapperKeyDown(e)}else if(e.target.tagName==="IFX-CHIP-ITEM"){this.handleDropdownKeyDown(e)}}updateSelectedOptions(e){const i=e.detail;const t=[...this.selectedOptions];if(this.variant!=="multi"){if(i.selected){this.opened=false;const t=this.getChipItems();t.forEach((i=>{if(i.selected&&i!==e.target){i.chipState=Object.assign(Object.assign({},i.chipState),{emitIfxChipItemSelect:false});i.selected=false}}));this.selectedOptions=[i]}else{this.selectedOptions=[]}this.value=this.selectedOptions[0]?this.selectedOptions[0].value:undefined}else{if(i.selected){if(!this.selectedOptions.find((e=>e.value===i.value))){this.selectedOptions=[...this.selectedOptions,i]}}else{this.selectedOptions=this.selectedOptions.filter((e=>e.key!==i.key))}this.value=this.selectedOptions.map((e=>e.value))}if(i.emitIfxChipChange){this.ifxChipChange.emit({previousSelection:t,currentSelection:this.selectedOptions,name:this.placeholder})}}getChipItems(){return this.chip.querySelectorAll("ifx-chip-item")}getSelectedOptions(){if(this.variant!=="multi"){return this.selectedOptions.map((e=>e.label)).join("")}return this.selectedOptions.slice(0,2).map((e=>e.label)).join(", ")}toggleDropdownMenu(){if(this.readOnly)return;this.opened=!this.opened}focusChipItemAt(e=0){this.opened=true;const i=this.getChipItems();let t;if(e===-1){t=i.item(i.length-1)}else if(e>=0&&e<i.length){t=i.item(e)}else{console.error(`Invalid index: ${e}`);return}const a=t.shadowRoot.querySelector(".chip-item");if(a){setTimeout((()=>{a.focus()}),1)}}focusChip(){const e=this.chip.shadowRoot.querySelector(".chip__wrapper");e.focus()}handleUnselectButtonClick(e){e.stopPropagation();this.opened=false;let i=false;const t=this.getChipItems();t.forEach((e=>{if(e.selected){i=true;e.chipState=Object.assign(Object.assign({},e.chipState),{emitIfxChipItemSelect:false});e.selected=false}}));if(i){const e=this.selectedOptions;this.selectedOptions=[];this.value=[];this.ifxChipChange.emit({previousSelection:e,currentSelection:[],name:this.placeholder})}}handleWrapperClick(){if(!this.readOnly){this.toggleDropdownMenu()}}handleWrapperKeyDown(e){if(this.readOnly)return;if(!this.opened){switch(e.code){case"Space":case"Enter":case"ArrowDown":this.focusChipItemAt(0);break;case"ArrowUp":this.focusChipItemAt(-1);break}}else{switch(e.code){case"Escape":this.opened=false;this.focusChip();break}}}handleDropdownKeyDown(e){let i=this.getChipItems();let t=Array.from(i).indexOf(e.target);if(t===-1){console.error("Target not found in chip items");return}switch(e.code){case"ArrowDown":if(t===i.length-1)break;this.focusChipItemAt(t+1);break;case"ArrowUp":if(t===0)break;this.focusChipItemAt(t-1);break;case"Escape":this.opened=false;this.focusChip();break;case"Space":if(this.variant==="single"){this.opened=false;this.focusChip()}break;case"Enter":this.opened=false;this.focusChip();break}}syncChipState(){const e=this.getChipItems();let i=0;e.forEach((e=>{e.chipState={emitIfxChipItemSelect:true,size:this.size==="small"?"small":"large",variant:this.variant==="multi"?"multi":"single",key:i++}}))}syncSelectedOptionsWithProp(e){this.selectedOptions=[];const i=(()=>{let e=0;return()=>e++})();if(Array.isArray(e)){this.selectedOptions=e.map((e=>({value:e,label:e,selected:true,key:i(),emitIfxChipChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChipChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}render(){return t("div",{key:"0ea9f8bc1e504d9a9b121b4b37fb04da775a28b3",class:"chip"},t("div",{key:"cbdb74df0885c675763cbd1fc9493283b5a95a8c",class:`chip__wrapper chip__wrapper--${this.size==="small"?"small":"large"}\n                  chip__wrapper--${this.variant==="multi"?"multi":"single"}\n                  ${this.opened&&!this.readOnly?"chip__wrapper--opened":""}\n                  ${this.selectedOptions.length?"chip__wrapper--selected":""}`,tabIndex:0,onClick:!this.readOnly?()=>{this.handleWrapperClick()}:undefined,role:"combobox","aria-label":this.AriaLabel,"aria-value":this.getSelectedOptions(),"aria-haspopup":!this.readOnly?"listbox":undefined,"aria-expanded":!this.readOnly?this.opened.toString():undefined,"aria-controls":!this.readOnly?"dropdown":undefined,"aria-readonly":this.readOnly?"true":undefined,"aria-multiselectable":this.variant==="multi"?"true":undefined},t("div",{key:"1f93a1f27efaa044100c5f1fe3ed720232112232",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&(this.variant==="multi"||this.readOnly)&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"216a7663b96a48f44d79802763d6ea8000d03cc5",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-number-indicator",{key:"ac04bcbf6f5789522efa21185d4dcc17684985c9"},"  ",`+${this.selectedOptions.length-2}`," ")),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"03fc2724de22f23fa9537bd1b14e975575f664b6",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevrondown16`})),this.variant!=="multi"&&this.readOnly!==false&&this.selectedOptions.length>0&&t("div",{key:"6f70aa5b6c60ef934cf8c79f662fea4e30e00255",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"1abb95276478647b1b3da79b71e157433bb41a15",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"aa9ab179da64d1d0977ed10f72a04fda828335b5",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"4d66e458a164782487bc052cb9eb66f7443836d1"})))}get chip(){return a(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};n.style=l;const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}';const c=r;const h=class{constructor(t){e(this,t);this.ifxChipItemSelect=i(this,"ifxChipItemSelect",5);this.value=undefined;this.chipState={emitIfxChipItemSelect:true,variant:"multi",size:"large"};this.selected=false}updateItemSelection(e){if(this.chipState.variant==="single"){const i=e.target;if(this.chipItem!==i&&this.chipItem.parentElement===i.parentElement){this.selected=false}}}validateSelected(e,i){if(e!==i){if(this.chipState.emitIfxChipItemSelect){this.emitIfxChipItemSelectEvent()}else{this.chipState.emitIfxChipItemSelect=true}}}getItemLabel(){return this.chipItem.innerText}toggleItemSelection(){this.selected=!this.selected}emitIfxChipItemSelectEvent(e=true){this.ifxChipItemSelect.emit({emitIfxChipChange:e,key:this.chipState.key,label:this.getItemLabel(),selected:this.selected,value:this.value})}handleItemClick(){this.toggleItemSelection()}handleItemKeyDown(e){if(e.code==="Enter"||e.code==="Space"){this.toggleItemSelection()}}handleSelectedState(){if(this.selected){this.emitIfxChipItemSelectEvent(false)}}componentWillLoad(){this.handleSelectedState()}render(){return t("div",{key:"493fe2e521f96fbe65792b4364c32a3010a4ae86",class:`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected&&this.chipState.variant)==="single"?"selected":""}`,tabIndex:0,onClick:()=>{this.handleItemClick()},onKeyDown:e=>{this.handleItemKeyDown(e)},role:"option","aria-selected":this.selected.toString()},this.chipState.variant==="multi"&&t("ifx-checkbox",{key:"3f65da6457afbeca9e5e803f2569263b499fe839",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"02a710f81308419623960d15270f719c45f5fd11",class:"chip-item__label"}," ",t("slot",{key:"ad971a10884b08cf3775f7296a44c7aff1769a0b"})," "),t("div",{key:"2ba702249a7fc67ded010890181f5b35494df843",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"887b43ff1b8c6539b01c0fc620f51d9bc04a05d9",icon:`check${this.chipState.size==="small"?"12":"16"}`}," ")))}get chipItem(){return a(this)}static get watchers(){return{selected:["validateSelected"]}}};h.style=c;const o='@charset "UTF-8";:root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const p=o;const d=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.ifxNextPage=i(this,"ifxNextPage",7);this.ifxPrevPage=i(this,"ifxPrevPage",7);this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.CLASS_SIBLING_ACTIVE="active-sibling";this.DATA_KEY="pagination";this.currentPage=0;this.internalPage=1;this.itemsPerPage=10;this.numberOfPages=[];this.total=1}setItemsPerPage(e){if(e.detail){this.itemsPerPage=parseInt(e.detail.label)}else{this.itemsPerPage=10}}componentDidLoad(){this.calculateVisiblePageIndices();var e=this.el.shadowRoot.querySelector(".pagination");let i=e.querySelector(".prev");this.navigateSinglePage(i,true)}calculateNumberOfPages(){if(isNaN(this.currentPage)){this.currentPage=1}const e=this.total<=this.itemsPerPage?this.itemsPerPage:this.total;const i=this.itemsPerPage;const t=Math.ceil(e/i);if(this.currentPage<=0){this.internalPage=1}else if(this.currentPage>t){this.internalPage=t}else this.internalPage=this.currentPage;this.numberOfPages=Array.from({length:t},((e,i)=>i+1))}componentWillLoad(){this.calculateNumberOfPages()}componentDidUpdate(){var e=this.el.shadowRoot.querySelector(".pagination");var i=e.querySelectorAll("li");this.addEventListenersToPageItems(i,e);if(e.dataset[this.DATA_KEY]<this.numberOfPages){e.dataset[this.DATA_KEY]=e.dataset[this.DATA_KEY]}else e.dataset[this.DATA_KEY]=0;this.changePage(e,false)}componentWillUpdate(){this.calculateNumberOfPages()}handleEventEmission(e){let i=e+1;let t=this.numberOfPages.length;let a=e===0?null:e;let s=e+2>t?null:e+2;let l=this.itemsPerPage;this.ifxPageChange.emit({currentPage:i,totalPages:t,prevPage:a,nextPage:s,itemsPerPage:l})}addEventListenersToPageItems(e,i){e.forEach((e=>{e.addEventListener("click",(e=>{var t=i;let a=t.querySelectorAll("li");t.dataset[this.DATA_KEY]=Array.from(a).indexOf(e.currentTarget);this.changePage(t,false)}))}))}initPagination(e){var i=e.querySelectorAll("li");e.dataset[this.DATA_KEY]=Array.from(i).indexOf(e.querySelector(".active"));e.querySelector(".prev").addEventListener("click",(e=>this.navigateSinglePage(e,false)));e.querySelector(".next").addEventListener("click",(e=>this.navigateSinglePage(e,false)));this.addEventListenersToPageItems(i,e)}navigateSinglePage(e,i){let t=e;if(typeof e.target==="object"){t=e.target}if(!t.classList.contains(this.CLASS_DISABLED)){var a=t.closest(".pagination");var s=parseInt(a.dataset[this.DATA_KEY],10);s+=1*(t.classList.contains("prev")?-1:1);if(s===-1){s=0}a.dataset[this.DATA_KEY]=s;this.changePage(a,i)}}changePage(e,i){const t=e;var a=t.querySelectorAll("li");var s=parseInt(t.dataset[this.DATA_KEY],10);a.forEach((e=>{e.classList.remove(this.CLASS_ACTIVE);e.classList.remove(this.CLASS_SIBLING_ACTIVE)}));if(i&&this.internalPage>1){s=Math.floor(this.internalPage-1);t.dataset[this.DATA_KEY]=s}this.handleEventEmission(s);a[s].classList.add(this.CLASS_ACTIVE);if(s===0){t.querySelector(".prev").classList.add(this.CLASS_DISABLED);t.querySelector(".prev").disabled=true}else{a[s-1].classList.add(this.CLASS_SIBLING_ACTIVE);t.querySelector(".prev").classList.remove(this.CLASS_DISABLED);t.querySelector(".prev").disabled=false}if(s===a.length-1){t.querySelector(".next").classList.add(this.CLASS_DISABLED);t.querySelector(".next").disabled=true}else{t.querySelector(".next").classList.remove(this.CLASS_DISABLED);t.querySelector(".next").disabled=false}}calculateVisiblePageIndices(){var e=this.el.shadowRoot.querySelector(".pagination");this.initPagination(e)}render(){return t("div",{key:"b9e1b525f3a20354d409c93a1aa0faa9d9d17019","aria-label":"a pagination","aria-value":this.currentPage,class:"container"},t("div",{key:"fc932c8e4114f39e5df86007d3595f72fac6384a",class:"items__per-page-wrapper"},t("div",{key:"93816bd9264a8cd32d782cc78df9052ab93f76a7",class:"items__per-page-label"},"Results per Page"),t("div",{key:"3432585bf8ce77786657f676fdaca27aba34b413",class:"items__per-page-field"},t("ifx-select",{key:"a6def492e7db12fb2d9245a6655aaecb99282ceb",value:"undefined",size:"s",placeholder:"false","show-search":"false","search-placeholder-value":"Search...",disabled:false,error:false,"error-message":"Error",label:"","placeholder-value":"Placeholder",options:'[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'}))),t("div",{key:"275104906a9d0e733644e2b5efbab477ecfc95ca",class:"items__total-wrapper"},t("div",{key:"75528c52f8be0724c332daf2f292c1ec852f6e53",class:"page__numbers-wrapper"},t("div",{key:"4e350e7002b1de2e5fc2c16d10b4a035a3bdedad",class:"pagination"},t("ifx-icon-button",{key:"42a3fe966d4bae2bc90b24709293237a5b57c413",variant:"secondary",class:"prev",color:"primary",icon:"arrow-left-24"}),t("ol",{key:"5d5f20215e988d2adc10f842be5b9300f30b1fd1"},this.numberOfPages.map((e=>t("li",{class:`${this.internalPage===e?"active":""}`},t("a",{href:undefined},e))))),t("ifx-icon-button",{key:"ebb0d3ef295477810891b41ca03ae42cdb634cf7",class:"next",variant:"secondary",color:"primary",icon:"arrow-right-24"})))))}get el(){return a(this)}};d.style=p;export{n as ifx_chip,h as ifx_chip_item,d as ifx_pagination};
-//# sourceMappingURL=p-72d804fb.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["chipCss","IfxChipStyle0","Chip","undefined","handleValueChange","newValue","this","syncSelectedOptionsWithProp","handleReadOnlyChange","opened","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selectedOptions","variant","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","value","find","option","filter","key","map","emitIfxChipChange","ifxChipChange","emit","currentSelection","name","placeholder","querySelectorAll","getSelectedOptions","label","join","slice","readOnly","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","size","generateKey","count","isArray","componentWillLoad","render","h","class","tabIndex","onClick","role","AriaLabel","toString","icon","e","id","chipItemCss","IfxChipItemStyle0","ChipItem","updateItemSelection","parentElement","validateSelected","oldValue","emitIfxChipItemSelectEvent","getItemLabel","innerText","toggleItemSelection","ifxChipItemSelect","handleItemClick","handleItemKeyDown","handleSelectedState","onKeyDown","checked","paginationCss","IfxPaginationStyle0","Pagination","CLASS_DISABLED","CLASS_ACTIVE","CLASS_SIBLING_ACTIVE","DATA_KEY","setItemsPerPage","itemsPerPage","parseInt","componentDidLoad","calculateVisiblePageIndices","paginationElement","el","leftArrow","navigateSinglePage","calculateNumberOfPages","isNaN","currentPage","total","totalPageNumber","Math","ceil","internalPage","numberOfPages","_","componentDidUpdate","listItems","addEventListenersToPageItems","dataset","changePage","componentWillUpdate","handleEventEmission","currActive","totalPages","prevPage","nextPage","ifxPageChange","paginationContainer","addEventListener","parent","currentTarget","initPagination","initialValue","classList","contains","closest","pagination","remove","floor","add","disabled","options","color","href"],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx","src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx","src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n\n    box-sizing: border-box;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    \n    background: tokens.$ifxColorBaseWhite;\n    \n    cursor: pointer;  \n    \n    transition: border 100ms ease;\n\n    font: tokens.$ifxBodyBody04;\n    \n    &:hover, &:focus-visible {\n        outline: none;\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n\n    &:focus {\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    }\n    \n    &.chip__wrapper--opened {\n        border: 1px solid tokens.$ifxColorOcean500;\n        \n        .wrapper__open-button {\n            transform: rotate(-180deg);\n        }\n    }\n    \n    &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        outline-offset: -3px;\n        \n        color: tokens.$ifxColorOcean500;\n        \n        &:hover, &:focus-visible {\n            outline: 3px solid tokens.$ifxColorOcean600;\n            \n            color: tokens.$ifxColorOcean600;\n        }\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    font: tokens.$ifxBodyBody04;\n    \n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n    \n    transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n\n    min-width: 222px;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChipChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'large' = 'large';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() readOnly: boolean = false;\n  @Prop() AriaLabel: string;\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.key !== eventDetail.key);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChipChange) {\n      this.ifxChipChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChipChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: (this.size === 'small' ? 'small' : 'large'),\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChipChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChipChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n          tabIndex={0}\n          onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.AriaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-number-indicator>  {`+${this.selectedOptions.length - 2}`} </ifx-number-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevrondown16`} />\n            </div>\n          }\n\n\n          { \n            (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family);\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el;\n  @Event() ifxPageChange: EventEmitter;\n  @Event() ifxNextPage: EventEmitter;\n  @Event() ifxPrevPage: EventEmitter;\n  @Prop() currentPage: number = 0;\n  @State() internalPage: number = 1;\n  @State() itemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n\n  private CLASS_DISABLED = \"disabled\"\n  private CLASS_ACTIVE = \"active\"\n  private CLASS_SIBLING_ACTIVE = \"active-sibling\"\n  private DATA_KEY = \"pagination\";\n\n  @Listen('ifxSelect')\n  setItemsPerPage(e) {\n    if(e.detail) {\n      this.itemsPerPage = parseInt(e.detail.label)\n    } else { \n      this.itemsPerPage = 10;\n    }\n  }\n\n  componentDidLoad() {\n    this.calculateVisiblePageIndices()\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    let leftArrow = paginationElement.querySelector('.prev')\n    this.navigateSinglePage(leftArrow, true)\n\n  }\n\n  calculateNumberOfPages() {\n    if (isNaN(this.currentPage)) {\n      this.currentPage = 1;\n    }\n    const total = this.total <= this.itemsPerPage ? this.itemsPerPage : this.total;\n    const itemsPerPage = this.itemsPerPage;\n    const totalPageNumber = Math.ceil(total / itemsPerPage);\n\n    if (this.currentPage <= 0) {\n      this.internalPage = 1;\n    } else if (this.currentPage > totalPageNumber) {\n      this.internalPage = totalPageNumber;\n    } else this.internalPage = this.currentPage;\n\n    this.numberOfPages = Array.from({ length: totalPageNumber }, (_, index) => index + 1);\n  }\n\n  componentWillLoad() {\n    this.calculateNumberOfPages()\n  }\n\n  componentDidUpdate() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    var listItems = paginationElement.querySelectorAll(\"li\");\n    this.addEventListenersToPageItems(listItems, paginationElement)\n\n    if (paginationElement.dataset[this.DATA_KEY] < this.numberOfPages) {\n      paginationElement.dataset[this.DATA_KEY] = paginationElement.dataset[this.DATA_KEY];\n    } else paginationElement.dataset[this.DATA_KEY] = 0;\n\n    this.changePage(paginationElement, false)\n  }\n\n  componentWillUpdate() {\n    this.calculateNumberOfPages()\n  }\n\n  handleEventEmission(currActive) {\n    let currentPage = currActive + 1;\n    let totalPages = this.numberOfPages.length;\n    let prevPage = currActive === 0 ? null : currActive;\n    let nextPage = currActive + 2 > totalPages ? null : currActive + 2;\n    let itemsPerPage = this.itemsPerPage\n    this.ifxPageChange.emit({ currentPage, totalPages, prevPage, nextPage, itemsPerPage })\n  }\n\n  addEventListenersToPageItems(listItems, paginationContainer) {\n    listItems.forEach((item) => {\n      item.addEventListener(\"click\", (e) => {\n        var parent = paginationContainer;\n        let listItems = parent.querySelectorAll(\"li\");\n        parent.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(e.currentTarget)\n        this.changePage(parent, false)\n      });\n    });\n  }\n\n  initPagination(paginationContainer) {\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n\n    paginationContainer.dataset[this.DATA_KEY] = Array.from(listItems).indexOf(paginationContainer.querySelector(\".active\"));\n\n    paginationContainer.querySelector(\".prev\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n    paginationContainer.querySelector(\".next\").addEventListener(\"click\", (e) => this.navigateSinglePage(e, false));\n\n    this.addEventListenersToPageItems(listItems, paginationContainer)\n  }\n\n  navigateSinglePage(e, initialValue) {\n    let el = e;\n    if (typeof e.target === 'object') {\n      el = e.target\n    }\n\n    if (!el.classList.contains(this.CLASS_DISABLED)) {\n      var parent = el.closest(\".pagination\");\n      var currActive = parseInt(parent.dataset[this.DATA_KEY], 10);\n      currActive += 1 * (el.classList.contains(\"prev\") ? -1 : 1);\n\n      if (currActive === -1) {\n        currActive = 0;\n      }\n\n      parent.dataset[this.DATA_KEY] = currActive;\n      this.changePage(parent, initialValue)\n    }\n  }\n\n  changePage(pagination, initialValue) {\n    const paginationContainer = pagination;\n    var listItems = paginationContainer.querySelectorAll(\"li\");\n    var currActive = parseInt(paginationContainer.dataset[this.DATA_KEY], 10);\n\n    listItems.forEach((item) => {\n      item.classList.remove(this.CLASS_ACTIVE);\n      item.classList.remove(this.CLASS_SIBLING_ACTIVE);\n    });\n\n    if (initialValue && this.internalPage > 1) {\n      currActive = Math.floor(this.internalPage - 1);\n      paginationContainer.dataset[this.DATA_KEY] = currActive;\n    }\n\n    this.handleEventEmission(currActive)\n\n    listItems[currActive].classList.add(this.CLASS_ACTIVE);\n\n    if (currActive === 0) {\n      paginationContainer.querySelector(\".prev\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = true;\n\n    } else {\n      listItems[currActive - 1].classList.add(this.CLASS_SIBLING_ACTIVE);\n      paginationContainer.querySelector(\".prev\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".prev\").disabled = false;\n    }\n\n    if (currActive === (listItems.length - 1)) {\n      paginationContainer.querySelector(\".next\").classList.add(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = true;\n\n    } else {\n      paginationContainer.querySelector(\".next\").classList.remove(this.CLASS_DISABLED);\n      paginationContainer.querySelector(\".next\").disabled = false;\n    }\n  }\n\n  calculateVisiblePageIndices() {\n    var paginationElement = this.el.shadowRoot.querySelector(\".pagination\");\n    this.initPagination(paginationElement)\n  }\n\n  render() {\n    return (\n      <div aria-label='a pagination' aria-value={this.currentPage} class=\"container\">\n        <div class='items__per-page-wrapper'>\n          <div class='items__per-page-label'>Results per Page</div>\n          <div class='items__per-page-field'>\n            <ifx-select\n              value='undefined'\n              size='s'\n              placeholder='false'\n              show-search='false'\n              search-placeholder-value='Search...'\n              disabled={false}\n              error={false}\n              error-message='Error'\n              label=''\n              placeholder-value='Placeholder'\n              options='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]' >\n            </ifx-select>\n          </div>\n        </div>\n        <div class='items__total-wrapper'>\n          <div class='page__numbers-wrapper'>\n            <div class=\"pagination\">\n              <ifx-icon-button variant='secondary' class=\"prev\" color='primary' icon='arrow-left-24'></ifx-icon-button>\n              <ol>\n                {this.numberOfPages.map((item) =>\n                  <li class={`${this.internalPage === item ? 'active' : \"\"}`}><a href={undefined}>{item}</a></li>)}\n              </ol>\n              <ifx-icon-button class=\"next\" variant='secondary' color='primary' icon='arrow-right-24'></ifx-icon-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as a,h as n,g as i}from"./p-6b122987.js";const r=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}';const t=r;const c=class{constructor(n){e(this,n);this.breadcrumbMenuIconWrapper=a(this,"breadcrumbMenuIconWrapper",7);this.icon=undefined;this.url=undefined;this.target="_self"}componentDidLoad(){const e=this.el.shadowRoot.querySelector(".breadcrumb-item-label-container");const a=e.querySelector(".menu-icon-wrapper");this.breadcrumbMenuIconWrapper.emit(a)}render(){return n("a",{key:"16ddbc6dfce781d06c5e852423d1646426c6fb04",href:this.url,target:this.target,class:"breadcrumb-item-label-container",role:"link"},n("ifx-icon",{key:"6d62e4f854b7ea735c46a3849a92c09a8d222e54",icon:this.icon,"aria-hidden":"true"}),n("span",{key:"452dc64f08a93f4872f0f033b0b7016073818aab",class:"label-wrapper"},n("slot",{key:"0a522ff8d13c3133367e62b50480af2dc970961d"})),n("span",{key:"7f5d3a5305ad187e312ae20a59610c9cfe4b13cf",class:"menu-icon-wrapper","aria-hiden":"true"},n("ifx-icon",{key:"07dc7f9912e3d87f286273e5758490f39df31d0d",icon:"chevron-down-12"})))}get el(){return i(this)}};c.style=t;export{c as ifx_breadcrumb_item_label};
-//# sourceMappingURL=p-7bef9272.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbItemLabelCss","IfxBreadcrumbItemLabelStyle0","BreadcrumbItemLabel","componentDidLoad","container","this","el","shadowRoot","querySelector","menuWrapper","breadcrumbMenuIconWrapper","emit","render","h","key","href","url","target","class","role","icon"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() url: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.url} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAyB,qwBAC/B,MAAAC,EAAeD,E,MCMFE,EAAmB,M,iJAGL,O,CAIzB,gBAAAC,GACE,MAAMC,EAAYC,KAAKC,GAAGC,WAAWC,cAAc,oCACnD,MAAMC,EAAcL,EAAUI,cAAc,sBAC5CH,KAAKK,0BAA0BC,KAAKF,E,CAGtC,MAAAG,GACE,OACEC,EAAA,KAAAC,IAAA,2CAAGC,KAAMV,KAAKW,IAAKC,OAAQZ,KAAKY,OAAQC,MAAM,kCAAkCC,KAAK,QACnFN,EAAA,YAAAC,IAAA,2CAAUM,KAAMf,KAAKe,KAAI,cAAc,SACvCP,EAAA,QAAAC,IAAA,2CAAMI,MAAM,iBACVL,EAAA,QAAAC,IAAA,8CAEHD,EAAA,QAAAC,IAAA,2CAAMI,MAAM,oBAAmB,aAAY,QAC1CL,EAAA,YAAAC,IAAA,2CAAUM,KAAK,qB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-6b122987.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{position:relative}.sidebar__nav-item:focus,.sidebar__nav-item.header__section:focus{outline:none}.sidebar__nav-item:focus .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:focus .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-label,.sidebar__nav-item.header__section:focus .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:focus .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item:hover,.sidebar__nav-item.header__section:hover{outline:none}.sidebar__nav-item:hover .sidebar__nav-item-icon-wrapper,.sidebar__nav-item.header__section:hover .sidebar__nav-item-icon-wrapper{color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-label,.sidebar__nav-item.header__section:hover .sidebar__nav-item-label{outline:none;color:#08665C}.sidebar__nav-item:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon,.sidebar__nav-item.header__section:hover .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{color:#08665C}.sidebar__nav-item{display:flex;flex-direction:row;align-items:center;width:100%;padding:8px 0px;gap:4px;flex:none;order:0;flex-grow:0;text-decoration:none;color:#1D1D1D;cursor:pointer;font-family:var(--ifx-font-family)}.sidebar__nav-item.extra-padding__bottom{padding:8px 0px 16px 0px}.sidebar__nav-item.active{color:#0A8276}.sidebar__nav-item.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.open{padding:8px 0px}.sidebar__nav-item.open .sidebar__nav-item-label{font-size:16px;font-style:normal;font-weight:400;line-height:24px}.sidebar__nav-item.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section{box-sizing:padding-box;border-top:1px solid #EEEDED;padding:16px 0px;display:-webkit-flex;-webkit-line-clamp:1;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.sidebar__nav-item.header__section.no-top-border{border-top:none}.sidebar__nav-item.header__section.active-section::before{content:"";position:absolute;left:-32px;height:40px;width:2px;background:#0A8276}.sidebar__nav-item.header__section.open{padding:16px 0px 8px 0px}.sidebar__nav-item.header__section.open .sidebar__nav-item-indicator .item__arrow-wrapper ifx-icon{transform:rotate(-180deg)}.sidebar__nav-item.header__section .sidebar__nav-item-label{color:#1D1D1D;font-family:Source Sans 3;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.sidebar__nav-item.submenu__item{padding:4px 0px}.sidebar__nav-item.submenu__item.extra-padding__bottom{padding:4px 0px 16px 0px}.sidebar__nav-item .sidebar__nav-item-icon-wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;gap:8px;flex-shrink:0}.sidebar__nav-item .sidebar__nav-item-icon-wrapper.noIcon{display:none}.sidebar__nav-item .sidebar__nav-item-icon-wrapper ifx-icon{width:16px;height:16px}.sidebar__nav-item .sidebar__nav-item-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;flex:none;order:1;flex-grow:1;cursor:pointer}.sidebar__nav-item .sidebar__nav-item-indicator{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px 4px;flex:none;order:2;flex-grow:0}.expandable__submenu{display:none;list-style-type:none;flex-direction:column;padding:0;margin:0;padding-left:40px}.expandable__submenu.open{display:flex}.header__section+.expandable__submenu{padding-left:0}';const a=n;const r=class{constructor(t){e(this,t);this.ifxSidebarMenu=i(this,"ifxSidebarMenu",7);this.ifxSidebarNavigationItem=i(this,"ifxSidebarNavigationItem",7);this.ifxSidebarActionItem=i(this,"ifxSidebarActionItem",7);this.icon="";this.showIcon=true;this.showIconWrapper=false;this.href="";this.internalHref="";this.target="_self";this.isExpandable=false;this.isNested=true;this.isSubMenuItem=false;this.numberIndicator=undefined;this.active=false;this.isActionItem=false;this.internalActiveState=false;this.value="";this.handleItemClick=undefined}handleActiveChange(e,i){if(this.isActionItem){this.internalActiveState=false;return}this.internalActiveState=e;if(e!==i){let i=this.getNavItem(this.el.shadowRoot);if(!this.isExpandable&&!e){this.handleClassList(i,"remove","active")}if(!this.isExpandable&&e){this.handleClassList(i,"add","active")}}}handleConsoleError(e){if(e.detail){this.showIcon=false}else{this.showIcon=true}}handleEventEmission(){this.ifxSidebarMenu.emit(this.el)}handleClassList(e,i,t){e.classList[i](t);if(i==="contains"){return e.classList.contains(t)}}getExpandableMenu(){const e=this.el.shadowRoot.querySelector(".expandable__submenu");return e}getNavItem(e){return e===null||e===void 0?void 0:e.querySelector(".sidebar__nav-item")}getSidebarMenuItems(e=this.el){const i=e.querySelectorAll("ifx-sidebar-item");if(i.length===0){return e.shadowRoot.querySelectorAll("ifx-sidebar-item")}return i}getSidebarMenuItem(){const e=this.el.shadowRoot.querySelector(".sidebar__nav-item");return e}toggleSubmenu(){if(this.isExpandable){const e=this.getSidebarMenuItem();const i=this.getExpandableMenu();this.handleClassList(i,"toggle","open");this.handleClassList(e,"toggle","open");this.handleEventEmission()}else{if(this.isActionItem){this.ifxSidebarActionItem.emit(this.el);return}else{this.handleActiveChange(true,this.internalActiveState);this.ifxSidebarNavigationItem.emit(this.el)}if(this.handleItemClick){this.handleItemClick(this.el)}}}handleExpandableMenu(e){const i=this.getExpandableMenu();e.forEach((e=>{const t=document.createElement("li");t.appendChild(e);i.appendChild(t)}))}parentElementIsSidebar(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-SIDEBAR"){return true}else return false}checkIfMenuItemIsNested(){const e=this.parentElementIsSidebar();if(e){this.isNested=false}}checkIfMenuItemIsSubMenu(){const e=this.el.parentElement;const i=this.getNavItem(e.shadowRoot);if(e.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"&&!this.handleClassList(i,"contains","header__section")){this.isSubMenuItem=true}else{this.isSubMenuItem=false}}isActive(e){const i=e.getAttribute("active");const t=i==="true";return t}getParentSection(e){let i=e.parentElement;while(i&&i.tagName.toUpperCase()!=="IFX-SIDEBAR"){if(i.tagName.toUpperCase()==="IFX-SIDEBAR-ITEM"){return i}i=i.parentElement}return null}handleBorderIndicatorDisplacement(e){const i=(e,t)=>{const s=this.isActive(e);if(s){const e=this.handleClassList(t,"contains","open");const i=this.getActiveItemSection();if(!e){this.handleClassList(i,"add","active-section")}else{this.handleClassList(i,"remove","active-section")}}const n=this.getSidebarMenuItems(e);n.forEach((e=>i(e,t)))};const t=this.getSidebarMenuItems();t.forEach((t=>i(t,e)))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}getActiveItemSection(){const e=this.parentElementIsSidebar();if(e){const e=this.getNavItem(this.el.shadowRoot);return e}else{const e=this.getNavItem(this.el.shadowRoot);return e}}async setActiveClasses(){const e=this.getNavItem(this.el.shadowRoot);this.handleClassList(e,"add","active")}async expandMenu(e){const i=this.getSidebarMenuItem();const t=this.getExpandableMenu();this.handleClassList(t,"add","open");this.handleClassList(i,"add","open");if(e){this.handleClassList(t,"remove","active-section");this.handleClassList(i,"remove","active-section")}}async isItemExpandable(){return this.isExpandable}handleActiveState(){if(this.internalActiveState){this.setActiveClasses()}}handleKeyDown(e){if(e.key==="Enter"){this.toggleSubmenu()}}componentDidLoad(){this.handleActiveState();if(this.isExpandable){const e=this.getSidebarMenuItems();this.handleExpandableMenu(e)}}componentWillLoad(){this.internalActiveState=this.active;this.checkIfMenuItemIsNested();this.checkIfMenuItemIsSubMenu();this.setHref();const e=this.getSidebarMenuItems();if(e.length!==0){this.isExpandable=true}else{this.isExpandable=false}}componentWillUpdate(){if(this.active&&!this.internalActiveState){this.internalActiveState=this.active;this.ifxSidebarNavigationItem.emit(this.el)}}render(){var e,i;return t("div",{key:"03c8e60e4e8ce63615cd5c4f0d54cbcc47d99998"},t("a",{key:"c0d56dff397166717925d49593e879f1beb8e2b2",tabIndex:1,onKeyDown:e=>this.handleKeyDown(e),href:this.internalHref,onClick:()=>this.toggleSubmenu(),target:this.target,class:`sidebar__nav-item ${!this.isNested&&this.isExpandable?"header__section":""} ${this.isSubMenuItem?"submenu__item":""}`},this.icon&&t("div",{key:"ed1f4499796d54626da063fc49655985ffe8d407",class:`sidebar__nav-item-icon-wrapper ${!this.showIcon?"noIcon":""}`},t("ifx-icon",{key:"44900dc9b7effc98c77730326b161484de3d6436",icon:this.icon})),t("div",{key:"5de25537fb558b01512a7dd002efa57a109a5fa7",class:"sidebar__nav-item-label"},t("slot",{key:"053de1892d27e6ce01ab8e5f8eb16d7b695b4de3"})),(this.isExpandable||((e=this.numberIndicator)===null||e===void 0?void 0:e.trim()))&&t("div",{key:"d5c4deb42f7ab7bc915cd428bedf2c81907544a8",class:"sidebar__nav-item-indicator"},this.isExpandable&&t("span",{key:"bc0e3196d081f70d0341fbff92375741708343fb",class:"item__arrow-wrapper"},t("ifx-icon",{key:"e02c07b3fad5dca7392a7161702c6ef7578ae8c1",icon:"chevron-down-12"})),((i=this.numberIndicator)===null||i===void 0?void 0:i.trim())&&!this.isExpandable&&!this.isNested&&t("span",{key:"feafb5a73b78bfb04c6951f3d209ed372591909b",class:"item__number-indicator"},t("ifx-number-indicator",{key:"80828a8d2f66ed0efa4e8eba00a42ffb49cb4dd6"},this.numberIndicator)))),this.isExpandable&&t("ul",{key:"ca766f86f738918e2556d8069c34c2a08e31e1f9",class:"expandable__submenu"}))}get el(){return s(this)}static get watchers(){return{active:["handleActiveChange"]}}};r.style=a;export{r as ifx_sidebar_item};
-//# sourceMappingURL=p-c3e3eda9.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sidebarItemCss","IfxSidebarItemStyle0","SidebarItem","handleActiveChange","newValue","oldValue","this","isActionItem","internalActiveState","labelElement","getNavItem","el","shadowRoot","isExpandable","handleClassList","handleConsoleError","event","detail","showIcon","handleEventEmission","ifxSidebarMenu","emit","type","className","classList","contains","getExpandableMenu","expandableSubmenu","querySelector","getSidebarMenuItems","sidebarItems","querySelectorAll","length","getSidebarMenuItem","sidebarItem","toggleSubmenu","menuItem","expandableMenu","ifxSidebarActionItem","ifxSidebarNavigationItem","handleItemClick","handleExpandableMenu","sidebarExpandableMenu","forEach","li","document","createElement","appendChild","parentElementIsSidebar","parentElement","tagName","toUpperCase","checkIfMenuItemIsNested","parentIsSidebar","isNested","checkIfMenuItemIsSubMenu","navItem","isSubMenuItem","isActive","iteratedComponent","activeAttributeValue","getAttribute","getParentSection","handleBorderIndicatorDisplacement","handleItem","item","isOpen","activeMenuItemSection","getActiveItemSection","children","child","topLevelItems","setHref","href","toLowerCase","trim","internalHref","undefined","setActiveClasses","activeMenuItem","expandMenu","ac","isItemExpandable","handleActiveState","handleKeyDown","key","componentDidLoad","componentWillLoad","active","componentWillUpdate","render","h","tabIndex","onKeyDown","onClick","target","class","icon","_a","numberIndicator","_b"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  position: relative;\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n  &:focus {\n    outline: none;\n\n    & .sidebar__nav-item-icon-wrapper {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-label {\n      outline: none;\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          color: tokens.$ifxColorOcean600;\n        }\n      }\n    }\n  }\n\n  &:hover {\n    outline: none;\n\n    & .sidebar__nav-item-icon-wrapper {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-label {\n      outline: none;\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          color: tokens.$ifxColorOcean600;\n        }\n      }\n    }\n  }\n}\n\n.sidebar__nav-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  padding: 8px 0px;\n  gap: 4px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  cursor: pointer;\n  font-family: var(--ifx-font-family);\n\n  &.extra-padding__bottom {\n    padding: 8px 0px 16px 0px;\n  }\n\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &.active-section {\n    &::before {\n      content: \"\";\n      position: absolute;\n      left: -32px;\n      height: 40px;\n      width: 2px;\n      background: tokens.$ifxColorOcean500;\n    }\n  }\n\n\n  &.open {\n    padding: 8px 0px;\n\n    & .sidebar__nav-item-label {\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          transform: rotate(-180deg);\n        }\n      }\n    }\n  }\n\n  &.header__section {\n    box-sizing: padding-box;\n    border-top: 1px solid tokens.$ifxColorEngineering200;\n    padding: 16px 0px;\n    display: -webkit-flex;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: horizontal;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    \n    &.no-top-border {\n      border-top: none;\n    }\n\n    &.active-section {\n      &::before {\n        content: \"\";\n        position: absolute;\n        left: -32px;\n        height: 40px;\n        width: 2px;\n        background: tokens.$ifxColorOcean500;\n      }\n    }\n\n    &.open {\n      \n      padding: 16px 0px 8px 0px;\n\n      & .sidebar__nav-item-indicator {\n        & .item__arrow-wrapper {\n          & ifx-icon {\n            transform: rotate(-180deg);\n          }\n        }\n      }\n    }\n\n    & .sidebar__nav-item-label {\n      color: tokens.$ifxColorBaseBlack;\n      font-family: Source Sans 3;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n    }\n  }\n\n  &.submenu__item {\n    padding: 4px 0px;\n    \n    &.extra-padding__bottom {\n      padding: 4px 0px 16px 0px;\n    }\n  }\n\n  & .sidebar__nav-item-icon-wrapper {\n    display: flex;\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    justify-content: center;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    flex-shrink: 0;\n\n    &.noIcon {\n      display: none;\n    }\n\n    & ifx-icon {\n      width: tokens.$ifxSize200;\n      height: tokens.$ifxSize200;\n    }\n  }\n\n  & .sidebar__nav-item-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    flex: none;\n    order: 1;\n    flex-grow: 1;\n    cursor: pointer;\n  }\n\n  & .sidebar__nav-item-indicator {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px 4px;\n    flex: none;\n    order: 2;\n    flex-grow: 0;\n  }\n}\n\n.expandable__submenu {\n  display: none;\n  list-style-type: none;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  padding-left: 40px;\n\n  &.open {\n    display: flex;\n  }\n}\n\n.header__section + .expandable__submenu{\n  padding-left: 0;\n}\n","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-sidebar-item',\n  styleUrl: 'sidebar-item.scss',\n  shadow: true\n})\nexport class SidebarItem {\n  @Element() el;\n  @Prop() icon: string = \"\"\n  @State() showIcon: boolean = true;\n  @State() showIconWrapper: boolean = false;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\";\n  @Prop() target: string = \"_self\";\n  @State() isExpandable: boolean = false;\n  @State() isNested: boolean = true;\n  @State() isSubMenuItem: boolean = false;\n  @Prop() numberIndicator: string;\n  @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n  @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n\n  @State() internalActiveState: boolean = false;\n\n  @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n\n  @Prop() value: string = \"\"\n  @Prop() handleItemClick: (item: HTMLElement) => void;\n\n\n  @Watch('active')\n  handleActiveChange(newValue: boolean, oldValue: boolean) {\n    // If the item is an action item, ignore the active prop\n    if (this.isActionItem) {\n      this.internalActiveState = false;\n      return;\n    }\n    this.internalActiveState = newValue;\n    if (newValue !== oldValue) {\n      let labelElement = this.getNavItem(this.el.shadowRoot)\n      if (!this.isExpandable && !newValue) {\n        this.handleClassList(labelElement, 'remove', 'active');\n      }\n      if (!this.isExpandable && newValue) {\n        this.handleClassList(labelElement, 'add', 'active');\n      }\n    }\n  }\n\n\n\n  @Listen('consoleError')\n  handleConsoleError(event: CustomEvent<boolean>) {\n    if (event.detail) {\n      this.showIcon = false;\n    } else {\n      this.showIcon = true;\n    }\n  }\n\n  handleEventEmission() {\n    // Get the active item section\n    this.ifxSidebarMenu.emit(this.el)\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getExpandableMenu() {\n    const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n    return expandableSubmenu\n  }\n\n  getNavItem(el) {\n    return el?.querySelector('.sidebar__nav-item')\n  }\n\n\n\n  getSidebarMenuItems(el = this.el) {\n    const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n    if (sidebarItems.length === 0) {\n      return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n    }\n    return sidebarItems;\n  }\n\n  getSidebarMenuItem() {\n    const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n    return sidebarItem;\n  }\n\n\n  toggleSubmenu() {\n    if (this.isExpandable) {\n      const menuItem = this.getSidebarMenuItem();\n      const expandableMenu = this.getExpandableMenu();\n      this.handleClassList(expandableMenu, 'toggle', 'open');\n      this.handleClassList(menuItem, 'toggle', 'open');\n      // Emit an event with the current component\n      this.handleEventEmission();\n    } else {\n      // If the sidebar item is not expandable, it's a leaf item without a submenu.\n      // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n      if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n        this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n        return;\n      } else { //its a navigation item which becomes active after clicking it\n        this.handleActiveChange(true, this.internalActiveState)\n        this.ifxSidebarNavigationItem.emit(this.el);\n      }\n      // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n      if (this.handleItemClick) {\n        this.handleItemClick(this.el);\n      }\n    }\n    // // Emit an event with the current component\n    // this.handleEventEmission();\n  }\n\n\n\n  handleExpandableMenu(sidebarItems) {\n    const sidebarExpandableMenu = this.getExpandableMenu();\n    sidebarItems.forEach((el: HTMLElement) => {\n      const li = document.createElement('li')\n      li.appendChild(el)\n      sidebarExpandableMenu.appendChild(li)\n    })\n  }\n\n  parentElementIsSidebar() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n      return true;\n    } else return false;\n  }\n\n  checkIfMenuItemIsNested() {\n    const parentIsSidebar = this.parentElementIsSidebar()\n    if (parentIsSidebar) {\n      this.isNested = false;\n    }\n  }\n\n  checkIfMenuItemIsSubMenu() {\n    const parentElement = this.el.parentElement;\n    const navItem = this.getNavItem(parentElement.shadowRoot);\n    if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n      this.isSubMenuItem = true;\n    }else {\n      this.isSubMenuItem = false;\n    }\n  }\n\n  isActive(iteratedComponent) {\n    const activeAttributeValue = iteratedComponent.getAttribute('active');\n    const isActive = activeAttributeValue === 'true';\n    return isActive\n  }\n\n  getParentSection(el: HTMLElement) {\n    let parentElement = el.parentElement;\n\n    while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n      if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n        return parentElement;\n      }\n      parentElement = parentElement.parentElement;\n    }\n\n    return null;\n  }\n\n\n\n  handleBorderIndicatorDisplacement(menuItem) {\n    // Recursive function to handle each item\n    const handleItem = (item, menuItem) => {\n      const isActive = this.isActive(item);\n      if (isActive) {\n        const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n        const activeMenuItemSection = this.getActiveItemSection();\n        if (!isOpen) {\n          this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n        } else {\n          this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n        }\n      }\n\n      // Process each child item\n      const children = this.getSidebarMenuItems(item);\n      children.forEach((child) => handleItem(child, menuItem));\n    }\n\n    // Start with the top-level items\n    const topLevelItems = this.getSidebarMenuItems();\n    topLevelItems.forEach((item) => handleItem(item, menuItem));\n  }\n\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  getActiveItemSection() {\n    const parentIsSidebar = this.parentElementIsSidebar()\n    if (parentIsSidebar) {\n      const labelElement = this.getNavItem(this.el.shadowRoot)\n      return labelElement;\n    } else {\n      const labelElement = this.getNavItem(this.el.shadowRoot)\n      return labelElement;\n    }\n  }\n\n  @Method()\n  async setActiveClasses() {\n    const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n    this.handleClassList(activeMenuItem, 'add', 'active')\n  }\n\n  @Method()\n  async expandMenu(ac: boolean){\n      const menuItem = this.getSidebarMenuItem();\n      const expandableMenu = this.getExpandableMenu();\n      this.handleClassList(expandableMenu, 'add', 'open');\n      this.handleClassList(menuItem, 'add', 'open');\n      if(ac){\n        this.handleClassList(expandableMenu, 'remove', 'active-section')\n        this.handleClassList(menuItem, 'remove', 'active-section')\n      }\n  }\n  \n  @Method()\n  async isItemExpandable(){\n    return this.isExpandable;\n  }\n\n  handleActiveState() {\n    if (this.internalActiveState) {\n      this.setActiveClasses()\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.toggleSubmenu()\n    }\n  }\n\n  componentDidLoad() {\n    this.handleActiveState();\n    if (this.isExpandable) {\n      const sidebarItems = this.getSidebarMenuItems();\n      this.handleExpandableMenu(sidebarItems)\n    }\n  }\n  \n  componentWillLoad() {\n    this.internalActiveState = this.active;\n    this.checkIfMenuItemIsNested();\n    this.checkIfMenuItemIsSubMenu();\n    this.setHref()\n    const sidebarItems = this.getSidebarMenuItems();\n    if (sidebarItems.length !== 0) {\n      this.isExpandable = true;\n    } else {\n      this.isExpandable = false;\n    }\n  }\n\n  componentWillUpdate() {\n    // If the active prop has been set to true and the internalActiveState has not been set to true yet\n    if (this.active && !this.internalActiveState) {\n      // Set the internal active state to true\n      this.internalActiveState = this.active;\n\n      // Emit the event to notify the parent Sidebar\n      this.ifxSidebarNavigationItem.emit(this.el);\n    }\n  }\n\n\n  render() {\n    return (\n      <div>\n        <a tabIndex={1} onKeyDown={(event) => this.handleKeyDown(event)} href={this.internalHref} onClick={() => this.toggleSubmenu()} target={this.target} class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}>\n          {this.icon &&\n            <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon ? 'noIcon' : \"\"}`}>\n              <ifx-icon icon={this.icon}></ifx-icon>\n            </div>}\n          <div class=\"sidebar__nav-item-label\">\n            <slot />\n          </div>\n          {\n          (this.isExpandable || this.numberIndicator?.trim()) && \n            <div class=\"sidebar__nav-item-indicator\">\n              {this.isExpandable &&\n                <span class='item__arrow-wrapper'>\n                  <ifx-icon icon=\"chevron-down-12\" />\n                </span>\n              }\n\n              {this.numberIndicator?.trim() && !this.isExpandable && !this.isNested &&\n                <span class='item__number-indicator'>\n                  <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n                </span>}\n\n            </div>\n          }\n        </a>\n        {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

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