@infineon/infineon-design-system-stencil 34.4.1 → 34.4.2

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

@@ -0,0 +1,2 @@
+import{r as n,c as a,h as e,g as t}from"./p-b7a462e5.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{width:100%;display:block}.navbar__wrapper{font-family:var(--ifx-font-family);height:63px;position:sticky;z-index:1030;border-bottom:1px solid #EEEDED}.navbar__wrapper.fixed{border-bottom:none}.navbar__main-container{position:absolute;top:0;width:100%;transition:all 1s;z-index:1020}.navbar__main-container.fixed{position:fixed}.navbar__main-container.fixed .navbar__container{border-bottom:1px solid #EEEDED}.navbar__main-container.show{height:100vh;bottom:0;background-color:rgba(29, 29, 29, 0.2);transition:1s;z-index:1}.navbar__sidebar{box-sizing:border-box;position:fixed;right:-100%;top:64px;display:flex;flex-direction:column;align-items:flex-start;width:375px;height:calc(100vh - 64px);background-color:#FFFFFF;transition:right 1s;z-index:1030}.navbar__sidebar.show{right:0;transition:right 1s}.navbar__sidebar .navbar__sidebar-top-row{display:flex;padding:var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);flex-direction:column;align-items:flex-start;gap:var(--space-200, 16px);flex:1 0 0;align-self:stretch;overflow-y:auto}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper{display:flex;padding-top:var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;gap:16px}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper.expand{align-items:initial}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item{display:flex;padding:var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;align-items:center;gap:var(--space-100, 8px);align-self:stretch;justify-content:space-between}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-icon-wrapper ifx-icon{vertical-align:middle}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item:hover{cursor:pointer}.navbar__sidebar .navbar__sidebar-top-row .navbar__sidebar-top-row-wrapper .navbar__sidebar-top-row-item .navbar__sidebar-top-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row{display:none;padding:var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);flex-direction:column;align-items:flex-start;align-self:stretch;background:var(--color-engineering-100, #F7F7F7);border-top:1px solid var(--color-engineering-200, #EEEDED);gap:10px;max-height:160px;overflow-y:auto}.navbar__sidebar .navbar__sidebar-bottom-row.show{display:flex}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item{display:flex;height:40px;padding-right:var(--space-50, 4px);align-items:center;gap:var(--space-100, 8px);flex:1 0 0}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-label{color:var(--color-base-black, #1D1D1D);font-family:"Source Sans 3";font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__sidebar .navbar__sidebar-bottom-row .navbar__sidebar-bottom-row-item .navbar__sidebar-bottom-row-item-icon-wrapper{display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products,.navbar__sidebar .navbar__sidebar-content-main{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:24px;flex:none;order:0;align-self:stretch;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;align-self:stretch;flex-grow:0;color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-about-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-header span,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-about-header span{color:#1D1D1D;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:16px;flex:none;order:1;flex-grow:0;width:100%}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{display:flex;flex-direction:row;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-products-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{text-decoration:none;font-style:normal;font-weight:400;font-size:16px;line-height:24px;display:flex;align-items:center;color:#1D1D1D}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item{color:#BFBBBB}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-products-menu .navbar__sidebar-content-main-menu-item a,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu .navbar__sidebar-content-main-menu-item a{font-style:normal;font-weight:600;font-size:18px;line-height:28px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:1}.navbar__sidebar .navbar__sidebar-content-products .navbar__sidebar-content-main-menu,.navbar__sidebar .navbar__sidebar-content-main .navbar__sidebar-content-main-menu{align-items:normal}.navbar__container{display:flex;justify-content:space-between;align-items:center;padding:8px 40px;gap:16px;background-color:#FFFFFF;font-family:var(--ifx-font-family)}.navbar__container.expanded{justify-content:initial}.navbar__container .navbar__container-search-field-wrapper{display:none}.navbar__container .navbar__container-search-field-wrapper.show{display:flex}.navbar__container .navbar__container-left{display:flex;flex-direction:row;align-items:center;padding:0;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left.hide{display:none}.navbar__container .navbar__container-left.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content{align-items:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-left.expand .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-left .navbar__container-left-logo{display:flex;flex-direction:row;align-items:center;padding:0px;gap:16px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo.hide{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo h6{position:relative;margin:0;padding:0;font-style:normal;font-weight:600;font-size:16px;display:flex;align-items:center;color:#1D1D1D;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-default svg{width:91px;height:40px;flex:none;order:0;flex-grow:0;vertical-align:bottom}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{width:1px;height:32px;background:#EEEDED;flex:none;order:2;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;padding:0px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group{display:flex;flex-direction:row;align-items:center;padding:0px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:5;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-left .navbar__container-left-content .navbar__container-left-content-navigation-group .navbar__container-left-content-navigation-item a{display:flex;align-items:center;font-weight:400;font-size:16px;line-height:24px;color:#1D1D1D;text-decoration:none;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;padding:0;gap:8px;flex:none;order:1;flex-grow:0}.navbar__container .navbar__container-right.hide{display:none}.navbar__container .navbar__container-right.expand{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content{align-items:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group{justify-content:initial;flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{flex:1}.navbar__container .navbar__container-right.expand .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{flex:1}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:4px 0px 4px 16px;border-left:1px solid #BFBBBB;gap:16px;flex:none;order:1;flex-grow:0;width:41px;height:40px}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper.hide{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon{display:flex;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__burger-icon.close{display:none}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon{display:none;align-items:center}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show{display:flex}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper .navbar__cross-icon.show:hover{cursor:pointer}.navbar__container .navbar__container-right .navbar__container-right-content{display:flex;flex-direction:column;align-items:flex-start;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group{position:relative;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar{display:flex;flex-direction:row;align-items:center;padding:0px 8px;gap:4px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-search-bar-icon-wrapper.isOpen{position:absolute;top:10px}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile{position:relative;width:24px;height:24px;background:#0A8276;border-radius:100px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-navigation-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-navigation-profile a{position:absolute;width:22px;height:20px;left:calc(50% - 11px);top:calc(50% - 10px);font-style:normal;font-weight:600;font-size:14px;line-height:20px;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;color:#FFFFFF}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile .navbar__container-right-content-navigation-item-icon-wrapper,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar .navbar__container-right-content-navigation-item-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-profile a,.navbar__container .navbar__container-right .navbar__container-right-content .navbar__container-right-content-navigation-group .navbar__container-right-content-navigation-item-search-bar a{font-style:normal;font-weight:400;font-size:14px;line-height:20px;color:#1D1D1D;text-decoration:none;display:flex;align-items:center;flex:none;order:1;flex-grow:0}@media screen and (max-width: 800px){.navbar__container{padding:0px 16px;height:64px;gap:initial}.navbar__container.expanded .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__container .navbar__container-left .navbar__container-left-content{display:none}.navbar__container .navbar__container-left .navbar__container-left-logo .navbar__container-left-logo-divider{display:none}.navbar__container .navbar__container-right{flex:1}.navbar__sidebar{width:0;transition:1s}}@media screen and (max-width: 500px){.navbar__sidebar.show{width:100%}}@media screen and (min-width: 500px){.navbar__sidebar.show{width:50%}}@media screen and (min-width: 800px){.navbar__wrapper{height:63px}.navbar__container{padding:0px 16px;height:63px;gap:initial}.navbar__container .navbar__container-right .navbar__burger-icon-wrapper{display:none}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}.navbar__sidebar{width:0;transition:1s}.navbar__sidebar.show{right:-100%}}@media screen and (min-width: 1024px){.navbar__wrapper{height:72px}.navbar__container{padding:0px 24px;height:72px}.navbar__container .navbar__container-left{gap:12px;display:flex}.navbar__container .navbar__container-left .navbar__container-left-content{display:flex}.navbar__container .navbar__container-left .navbar__container-left-logo-default svg{width:72.8px;height:32px}.navbar__main-container.show{height:auto;background-color:inherit;transition:none}}@media screen and (min-width: 1200px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 32px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:inherit}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}@media screen and (min-width: 1440px){.navbar__wrapper{height:80px}.navbar__container{padding:0px 40px;height:80px}.navbar__container .navbar__container-left .navbar__container-left-content{justify-content:center}.navbar__container .navbar__container-right .navbar__container-right-content{justify-content:inherit}}';const i=r;const o=class{constructor(e){n(this,e);this.ifxNavbarMobileMenuIsOpen=a(this,"ifxNavbarMobileMenuIsOpen",7);this.main=true;this.products=false;this.applications=false;this.design=false;this.support=false;this.about=false;this.applicationName="";this.hasLeftMenuItems=true;this.fixed=true;this.showLogoAndAppname=true;this.logoHref="";this.internalLogoHref="";this.logoHrefTarget="_self";this.internalLogoHrefTarget="_self"}addEventListenersToHandleCustomFocusState(){const n=this.el.shadowRoot.firstChild;if(!n){console.error("element not found");return}n.tabIndex=-1;const a=n.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}const e=n.querySelector("slot");if(e){const n=e.assignedNodes();for(let a=0;a<n.length;a++){const e=n[a];if(e.nodeName==="IFX-NAVBAR-ITEM"){const n=e;const a=n===null||n===void 0?void 0:n.shadowRoot.querySelectorAll("a");for(let n=0;n<a.length;n++){a[n].tabIndex=-1}}}}}clearFirstLayerMenu(n){if(n.detail.action==="hideFirstLayer"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].hideComponent()}}}if(n.detail.action==="hideSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("remove","add");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].hideComponent()}}}if(n.detail.action==="returnToSecondLayer"){const a=n.detail.parent;const e=a.children;a.toggleFirstLayerItem("add","remove");for(let a=0;a<e.length;a++){if(!e[a].isSameNode(n.detail.component)){e[a].showComponent()}}}if(n.detail.action==="show"){const a=this.el.querySelectorAll('[slot="left-item"]');for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}if(n.detail.action==="return"){const a=this.getMobileMenuTop();for(let e=0;e<a.length;e++){if(!a[e].isSameNode(n.detail.component)){a[e].showComponent()}}}}getWrappers(){const n=this.el.shadowRoot.querySelector(".navbar__container-right-content-navigation-group");const a=this.el.shadowRoot.querySelector(".navbar__container-right-content-navigation-item-search-bar-icon-wrapper");const e=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");const t=n.querySelector('slot[name="right-item"]');const r=a.querySelector("slot");const i=e.querySelector("slot");const o=r.assignedNodes();const _=i.assignedNodes();const c=this.el.querySelector("ifx-navbar-profile");const b=this.el.querySelectorAll('[slot="left-item"]');const s=this.el.querySelectorAll('[slot="right-item"]');const d=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");return{rightSideItemSlot:t,rightSideSlot:r,leftSideSlot:i,rightAssignedNodes:o,leftAssignedNodes:_,navbarProfile:c,leftMenuItems:b,rightMenuItems:s,topRowWrapper:d}}hideNavItems(){const{rightAssignedNodes:n,leftAssignedNodes:a,navbarProfile:e,leftMenuItems:t,rightMenuItems:r,topRowWrapper:i}=this.getWrappers();if(n.length!==0){this.searchBarIsOpen="right"}else if(a.length!==0){this.searchBarIsOpen="left"}if(e){e.hideComponent()}for(let n=0;n<t.length;n++){if(!i.classList.contains("expand")){t[n].hideComponent()}}for(let n=0;n<r.length;n++){if(i.classList.contains("expand")){if(!r[n].hideOnMobile){r[n].hideComponent()}}else{r[n].hideComponent()}}}showNavItems(){const{navbarProfile:n,leftMenuItems:a,rightMenuItems:e,topRowWrapper:t}=this.getWrappers();this.searchBarIsOpen=undefined;if(n){n.showComponent()}for(let n=0;n<a.length;n++){if(!t.classList.contains("expand")){a[n].showComponent()}}for(let n=0;n<e.length;n++){if(t.classList.contains("expand")){if(!e[n].hideOnMobile){e[n].showComponent()}}else{e[n].showComponent()}}}handleSearchBarToggle(n){if(n.detail){this.hideNavItems()}else if(!n.detail){this.showNavItems()}}toggleClass(n,a){n.classList.toggle(a)}handleSidebar(n){const a=n.currentTarget.closest(".navbar__burger-icon-wrapper");const e=a.querySelector(".navbar__burger-icon");const t=a.querySelector(".navbar__cross-icon");const r=n.currentTarget.closest(".navbar__main-container");const i=n.currentTarget.closest(".navbar__wrapper");const o=i.querySelector(".navbar__sidebar");this.toggleClass(i,"show");this.toggleClass(r,"show");this.toggleClass(o,"show");this.toggleClass(e,"close");this.toggleClass(t,"show");if(t.classList.contains("show")){this.handleBodyScroll("hide")}else{this.handleBodyScroll("show")}}handleBodyScroll(n){const a=this.el.closest("body");if(!this.fixed&&n==="hide"){a.style.overflow="hidden"}else if(n==="show"){a.style.overflow="visible"}}handleDropdownMenu(n){const a=n.currentTarget.querySelector(".navbar__dropdown-wrapper");a.classList.toggle("open");const e=n.currentTarget.querySelector("a");e.classList.toggle("open")}async setItemMenuPosition(){const n=this.el.querySelectorAll("ifx-navbar-item");const a=this.el.querySelector("ifx-navbar-profile");if(a){const n=a.querySelectorAll("ifx-navbar-item");if(n.length!==0){n.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}if(n.length!==0){for(let a=0;a<n.length;a++){const e=n[a];const t=e.querySelectorAll("ifx-navbar-item");if(t.length!==0){const n=await e.setItemSideSpecifications();if(n){t.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}}}}setMenuItemChildrenPosition(n){const a=n.querySelectorAll("ifx-navbar-item");if(a.length!==0){a.forEach((n=>{n.setMenuItemPosition();this.setMenuItemChildrenPosition(n)}))}}getMediaQueryList(){const n=window.matchMedia("(max-width: 800px)");return n}componentDidLoad(){this.setItemMenuPosition();this.addEventListenersToHandleCustomFocusState();const n=this.getMediaQueryList();if(n.matches){this.moveNavItemsToSidebar()}}handleMobileMenuBottom(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-bottom-row");const e=n.target;const t=e.assignedNodes();if(t.length>0){a.classList.add("show")}else{a.classList.remove("show")}}handleLogoHrefAndTarget(){if(this.logoHref.trim()===""){this.internalLogoHref=undefined}else{this.internalLogoHref=this.logoHref}if(["_self","_blank","_parent"].includes(this.logoHrefTarget.trim())){this.internalLogoHrefTarget=this.logoHrefTarget}else{this.internalLogoHrefTarget="_self"}}componentWillLoad(){this.RemoveSpaceOnStorybookSnippet();const n=this.el.querySelector("ifx-navbar-menu");const a=this.el.querySelectorAll('[slot="left-item"]');if(!a.length&&!n){this.hasLeftMenuItems=false}this.handleLogoHrefAndTarget();const e=window.matchMedia("(max-width: 800px)");e.addEventListener("change",(n=>this.moveNavItemsToSidebar(n)))}getSearchBarLeftWrapper(){const n=this.el.shadowRoot.querySelector(".navbar__container-left-content-navigation-item-search-bar");return n}getMobileMenuTop(){const n=this.el.querySelectorAll('[slot="mobile-menu-top"]');return n}getMobileMenuBottom(){const n=this.el.querySelectorAll('[slot="mobile-menu-bottom"]');return n}handleBurgerIcon(){const n=this.getMobileMenuTop();const a=this.getMobileMenuBottom();if(!n.length&&!a.length){const n=this.el.shadowRoot.querySelector(".navbar__burger-icon-wrapper");this.toggleClass(n,"hide")}}moveNavItemsToSidebar(n){const a=this.el.shadowRoot.querySelector(".navbar__sidebar-top-row-wrapper");const e=this.getMediaQueryList();const t=n?n.matches:e.matches;if(t){a.classList.add("expand");const n=this.el.shadowRoot.querySelector(".navbar__cross-icon");if(n.classList.contains("show")){this.handleBodyScroll("hide")}const e=this.el.querySelector('[slot="search-bar-left"]');if(e){if(this.searchBarIsOpen){e.onNavbarMobile()}const n=this.getSearchBarLeftWrapper();n.classList.add("initial");e.setAttribute("slot","search-bar-right")}const t=this.el.querySelectorAll('[slot="left-item"]');for(let n=0;n<t.length;n++){t[n].setAttribute("slot","mobile-menu-top");t[n].moveChildComponentsIntoSubLayerMenu();if(this.searchBarIsOpen){t[n].showComponent()}}const r=this.el.querySelectorAll('[slot="right-item"]');for(let n=0;n<r.length;n++){if(r[n].tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){r[n].showLabel=false}else{if(r[n].hideOnMobile){r[n].setAttribute("slot","mobile-menu-bottom");r[n].toggleChildren("add");r[n].showLabel=true;if(this.searchBarIsOpen){r[n].showComponent()}}}}this.handleBurgerIcon()}else{a.classList.remove("expand");this.handleBodyScroll("show");const n=this.getSearchBarLeftWrapper();const e=n.classList.contains("initial");const t=this.el.querySelector('[slot="search-bar-right"]');if(e){if(this.searchBarIsOpen){t.onNavbarMobile()}if(t){t.setAttribute("slot","search-bar-left")}}const r=this.getMobileMenuTop();for(let n=0;n<r.length;n++){r[n].setAttribute("slot","left-item");r[n].moveChildComponentsBackIntoNavbar()}const i=this.getMobileMenuBottom();const o=this.el.querySelector("ifx-navbar-profile");if(o){const n=o.getAttribute("show-label");o.setAttribute("show-label",n)}for(let n=0;n<i.length;n++){i[n].setAttribute("slot","right-item");i[n].toggleChildren("remove");const a=i[n].getAttribute("show-label");i[n].setAttribute("show-label",a);if(this.searchBarIsOpen){i[n].hideComponent()}}}}RemoveSpaceOnStorybookSnippet(){let n=this.el.parentElement;if(n){let a=n.closest(".css-xzp052");if(a){a.style.overflow="visible"}}}render(){return e("div",{key:"c60214f6729e9db963d1cb09430b550a13055be9","aria-label":"a navigation navbar",class:`navbar__wrapper ${this.fixed?"fixed":""}`},e("div",{key:"8740ce00c10cb2a5b8baabc0c52516848dc9d6bd",class:`navbar__main-container ${this.fixed?"fixed":""}`},e("div",{key:"ff83335db63d00ef71c2d8f877ad4aa10cf2ca16",class:`navbar__container ${this.searchBarIsOpen?"expanded":""}`},e("div",{key:"07da05ccdb75c2c94d625b1b149065b2bbce7352",class:`navbar__container-left ${this.searchBarIsOpen==="left"?"expand":this.searchBarIsOpen==="right"?"hide":""}`},this.showLogoAndAppname&&e("div",{key:"39c28e9231593e745baaaa7d711523df8917f5a6",class:`navbar__container-left-logo ${this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"8e4e8e661015932c541f03c510e1045726cf4d0e",class:"navbar__container-left-logo-default"},e("a",{key:"5b9e4e1d9b4cbc2fb2f71e42e6aafef51c96fb58",href:this.internalLogoHref,target:this.internalLogoHrefTarget},e("svg",{key:"9d57c866b2dfd028097f084aa12076e919441d46",width:"91",height:"40",viewBox:"0 0 91 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"64d6954a02eb6fbba7109805e12db4cceddbcf54","clip-path":"url(#clip0_2396_2480)"},e("path",{key:"3667b001ad0a43354f7e93e46fa5da6bf05085c7",d:"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z",fill:"#005DA9"}),e("path",{key:"57effe7597fd5331cf2c030add87c2b6c3a466da",d:"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z",fill:"#E30034"})),e("defs",{key:"2e27247cab0f1c8a4495cc6880643100e1ecf44a"},e("clipPath",{key:"8cf59ab2070f15078452eb633c189eacaa67ce68",id:"clip0_2396_2480"},e("rect",{key:"689cd9fd2122490bd14507571ca622ffc92e22ab",width:"91",height:"40",fill:"white"})))))),this.applicationName&&e("h6",{key:"5010dbc0cfdbb087b6f3de0a4ee409ead26a5240"},this.applicationName),this.applicationName&&this.hasLeftMenuItems&&e("div",{key:"99a8ca12ee869130d809763d7ebab4663a2c0e68",class:"navbar__container-left-logo-divider"})),e("div",{key:"cdd64c826dbc60490b5ef4ebbc8f1871b15713d3",class:"navbar__container-left-content"},e("div",{key:"b3ce9c86c90ca4c45d5200d2f80805b9ad571c0d",class:"navbar__container-left-content-navigation-group"},e("slot",{key:"9a0484ce0727bc4a961e78ccd9ed3bf07dbd7084",name:"left-item"}),e("div",{key:"d93f5e5e2f6705635141a2d489f4e484867d87da",class:"navbar__container-left-content-navigation-item-search-bar"},e("slot",{key:"5c3da10222a64de3e468ad9ebc34328b3a2d3d5b",name:"search-bar-left"}))))),e("div",{key:"83a5cccc6028ce430bc00b885dc4e3eab740d334",class:`navbar__container-right ${this.searchBarIsOpen==="right"?"expand":this.searchBarIsOpen==="left"?"hide":""}`},e("div",{key:"8313e16ba2d9a8a8b6877e37d24d7c9ebd46a4aa",class:"navbar__container-right-content"},e("div",{key:"8a151357d4940b721da2c65dd0ed7e67b2f578f2",class:"navbar__container-right-content-navigation-group"},e("div",{key:"e64ce228855a7ade4a0ee924167c6c45e8403a98",class:"navbar__container-right-content-navigation-item-search-bar"},e("div",{key:"6dd8e6409f9ce39ba7ebb0281ab3997ee8ea1f40",class:`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`},e("slot",{key:"0453896b2b039192d2d5eab09a2063c7a0b2f690",name:"search-bar-right"}))),e("slot",{key:"c6b6cc8768e602dbc5f8953bd1e4e7066a53f886",name:"right-item"}))),e("div",{key:"eef99509f2eff6d1a4fe134fe8e3a59256675348",class:`navbar__burger-icon-wrapper`,onClick:this.handleSidebar.bind(this)},e("div",{key:"03add88ec4bc48e3b591114ca1923c37556961b8",class:"navbar__burger-icon"},e("ifx-icon",{key:"c3ce6ca52457012e5a1b70a7ae00aee26f58464a",icon:"menu-right-24"})),e("div",{key:"5c2fdebba2170b07c314a75d176402fd3bcbe933",class:"navbar__cross-icon"},e("ifx-icon",{key:"26bc8f4cfaffba110c31075cdd83c5225c78d0a6",icon:"cross-24"})))))),e("div",{key:"0d9eea3cf7580831cbac2a1159fdc84ed028a178",class:"navbar__sidebar"},e("div",{key:"f12549392fa6f53c140fe0f4d779c72d7ee8b685",class:"navbar__sidebar-top-row"},e("div",{key:"bafa42ee6bff02772a617e4984bdfb5b8f535e84",class:"navbar__sidebar-top-row-wrapper"},e("slot",{key:"6f5192de7715192453e2d1f01dae9307d74d0ac3",name:"mobile-menu-top"}))),e("div",{key:"7db0ee145004e655190c185fb61535d555d4cf3b",class:"navbar__sidebar-bottom-row"},e("slot",{key:"f33ab07c748ffd56f21ede5a91109d686baafa70",name:"mobile-menu-bottom",onSlotchange:n=>this.handleMobileMenuBottom(n)}))))}get el(){return t(this)}};o.style=i;export{o as ifx_navbar};
+//# sourceMappingURL=p-be87a774.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["navbarCss","IfxNavbarStyle0","Navbar","constructor","hostRef","this","main","products","applications","design","support","about","applicationName","hasLeftMenuItems","fixed","showLogoAndAppname","logoHref","internalLogoHref","logoHrefTarget","internalLogoHrefTarget","addEventListenersToHandleCustomFocusState","element","el","shadowRoot","firstChild","console","error","tabIndex","aElements","querySelectorAll","i","length","slot","querySelector","assignedNodes","node","nodeName","navbarItem","clearFirstLayerMenu","event","detail","action","leftMenuItems","getMobileMenuTop","isSameNode","component","hideComponent","parent","children","toggleFirstLayerItem","showComponent","getWrappers","rightContentNavigationGroup","searchBarRightWrapper","searchBarLeftWrapper","rightSideItemSlot","rightSideSlot","leftSideSlot","rightAssignedNodes","leftAssignedNodes","navbarProfile","rightMenuItems","topRowWrapper","hideNavItems","searchBarIsOpen","l","classList","contains","r","hideOnMobile","showNavItems","undefined","handleSearchBarToggle","toggleClass","className","toggle","handleSidebar","sidebarIconWrapper","currentTarget","closest","sidebarIconOpen","sidebarIconClose","mainContainer","navbarWrapper","sidebarWrapper","handleBodyScroll","body","style","overflow","handleDropdownMenu","dropdownWrapper","iconWrapper","setItemMenuPosition","navbarItems","itemChildren","forEach","item","setMenuItemPosition","setMenuItemChildrenPosition","hasNestedItems","setItemSideSpecifications","subItem","getMediaQueryList","mediaQueryList","window","matchMedia","componentDidLoad","matches","moveNavItemsToSidebar","handleMobileMenuBottom","e","mobileMenuBottomWrapper","slotElement","target","nodes","add","remove","handleLogoHrefAndTarget","trim","includes","componentWillLoad","RemoveSpaceOnStorybookSnippet","dropdownMenu","addEventListener","getSearchBarLeftWrapper","getMobileMenuBottom","handleBurgerIcon","burgerIconWrapper","crossIcon","searchBarLeft","onNavbarMobile","setAttribute","moveChildComponentsIntoSubLayerMenu","tagName","toUpperCase","showLabel","toggleChildren","leftIsInitial","searchBarRight","moveChildComponentsBackIntoNavbar","navbarProfileItem","showProfileItemLabel","getAttribute","parentElement","storybookWrapper","render","h","key","class","href","width","height","viewBox","fill","xmlns","d","id","name","onClick","bind","icon","onSlotchange"],"sources":["src/components/navigation/navbar/navbar.scss?tag=ifx-navbar&encapsulation=shadow","src/components/navigation/navbar/navbar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  width: 100%;\n  display: block;\n}\n\n\n.navbar__wrapper {\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  height: 63px;\n  position: sticky;\n  //overflow: hidden;\n  z-index: 1030;\n  border-bottom: 1px solid #EEEDED;\n\n  &.fixed {\n    border-bottom: none;\n  }\n\n  // border-bottom: 1px solid #EEEDED; //when fixed is false\n}\n\n.navbar__main-container {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  //overflow: hidden;\n  transition: all 1s;\n  z-index: 1020;\n\n  &.fixed {\n    position: fixed;\n\n    & .navbar__container {\n      border-bottom: 1px solid #EEEDED;\n    }\n  }\n\n  &.show {\n    height: 100vh;\n    bottom: 0;\n    background-color: tokens.$ifxColorOverlayDark;\n    transition: 1s;\n    z-index: 1;\n  }\n}\n\n.navbar__sidebar {\n  box-sizing: border-box;\n  position: fixed;\n  right: -100%;\n  top: 64px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  // padding: 32px;\n  width: 375px;\n  height: calc(100vh - 64px);\n  background-color: tokens.$ifxColorBaseWhite;\n  transition: right 1s;\n  z-index: 1030;\n\n  &.show {\n    right: 0;\n    transition: right 1s;\n  }\n\n  & .navbar__sidebar-top-row { \n    display: flex;\n    padding: var(--borderRadius-none, 0px) var(--space-300, 24px) 30px var(--space-300, 24px);\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-200, 16px);\n    flex: 1 0 0;\n    align-self: stretch;\n\n    overflow-y: auto;\n\n    & .navbar__sidebar-top-row-wrapper { \n      display: flex;\n      padding-top: var(--space-200, 16px);\n      flex-direction: column;\n      align-items: flex-start;\n      align-self: stretch;\n      gap: 16px;\n\n      &.expand { \n        align-items: initial;\n      }\n\n      & .navbar__sidebar-top-row-item { \n        display: flex;\n        padding: var(--space-200, 0px) var(--space-50, 4px) var(--space-200, 0px) 0px;\n        align-items: center;\n        gap: var(--space-100, 8px);\n        align-self: stretch;\n        justify-content: space-between;\n\n        & .navbar__sidebar-top-row-item-icon-wrapper { \n          & ifx-icon { \n            vertical-align: middle;\n          }\n        }\n  \n  \n        &:hover { \n          cursor: pointer;\n        }\n  \n        & .navbar__sidebar-top-row-item-label { \n          color: var(--color-base-black, #1D1D1D);\n          font-family: \"Source Sans 3\";\n          font-size: 16px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 24px; \n        }\n  \n      }\n    }\n\n  }\n\n  & .navbar__sidebar-bottom-row { \n    //display: flex;\n    display: none;\n    padding: var(--space-150, 12px) var(--space-300, 24px) var(--space-150, 12px) var(--space-200, 16px);\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: stretch;\n    background: var(--color-engineering-100, #F7F7F7);\n    border-top: 1px solid var(--color-engineering-200, #EEEDED);\n    gap: 10px;\n\n    max-height: 160px;\n    overflow-y: auto;\n\n    &.show { \n      display: flex;\n    }\n   \n\n    & .navbar__sidebar-bottom-row-item { \n      display: flex;\n      height: 40px;\n      padding-right: var(--space-50, 4px);\n      align-items: center;\n      gap: var(--space-100, 8px);\n      flex: 1 0 0;\n \n      & .navbar__sidebar-bottom-row-item-label {\n        color: var(--color-base-black, #1D1D1D);\n        font-family: \"Source Sans 3\";\n        font-size: 16px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 24px; \n      }\n\n      & .navbar__sidebar-bottom-row-item-icon-wrapper { \n       display: flex;\n       align-items: center;\n      }\n    }\n\n  }\n\n\n  & .navbar__sidebar-content-products,\n  & .navbar__sidebar-content-main {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 24px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & .navbar__sidebar-content-products-header,\n    & .navbar__sidebar-content-about-header {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: 0px;\n      gap: 16px;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      color: #BFBBBB;\n\n      & span {\n        color: tokens.$ifxColorBaseBlack;\n        font-weight: 600;\n        font-size: 18px;\n        line-height: 28px;\n        display: flex;\n        align-items: center;\n      }\n    }\n\n    & .navbar__sidebar-content-products-menu,\n    & .navbar__sidebar-content-main-menu {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 0px;\n      gap: 16px;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n      width: 100%;\n\n      & .navbar__sidebar-content-products-menu-item,\n      & .navbar__sidebar-content-main-menu-item {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & a {\n          text-decoration: none;\n          font-style: normal;\n          font-weight: 400;\n          font-size: 16px;\n          line-height: 24px;\n          display: flex;\n          align-items: center;\n          color: tokens.$ifxColorBaseBlack;\n        }\n      }\n\n      & .navbar__sidebar-content-main-menu-item {\n        color: tokens.$ifxColorEngineering300;\n\n        & a {\n          font-style: normal;\n          font-weight: 600;\n          font-size: 18px;\n          line-height: 28px;\n          display: flex;\n          align-items: center;\n          color: tokens.$ifxColorBaseBlack;\n          flex: none;\n          order: 0;\n          flex-grow: 1;\n        }\n      }\n    }\n\n    & .navbar__sidebar-content-main-menu {\n      align-items: normal;\n    }\n  }\n}\n\n.navbar__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 40px;\n  gap: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.expanded { \n    justify-content: initial;\n  }\n\n  // &.fixed { \n  //   border-bottom: 1px solid #EEEDED; //when fixed is true\n  // }\n\n  & .navbar__container-search-field-wrapper { \n    display: none;\n\n    &.show { \n      display: flex;\n    }\n  }\n\n  & .navbar__container-left {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n    gap: 16px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n\n    &.hide {\n      display: none;\n    }\n\n    &.expand { \n      justify-content: initial;\n      flex: 1;\n        & .navbar__container-left-content { \n          align-items: initial;\n          flex: 1;\n          & .navbar__container-left-content-navigation-group { \n            justify-content: initial;\n            flex: 1;\n            & .navbar__container-left-content-navigation-item-search-bar { \n              flex: 1;\n            }\n          }\n        }\n      \n    }\n\n    & .navbar__container-left-logo {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: 0px;\n      gap: 16px;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      &.hide { \n        display: none;\n      }\n\n      & h6 {\n        position: relative;\n        margin: 0;\n        padding: 0;\n        font-style: normal;\n        font-weight: 600;\n        font-size: 16px;\n        //line-height: 24px;\n        display: flex;\n        align-items: center;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n      }\n\n      & .navbar__container-left-logo-default {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        padding: 12px 0px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & svg {\n          width: 91px;\n          height: 40px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n          vertical-align: bottom;\n        }\n      }\n\n      & .navbar__container-left-logo-divider {\n        width: 1px;\n        height: 32px;\n        background: tokens.$ifxColorEngineering200;\n        flex: none;\n        order: 2;\n        flex-grow: 0;\n      }\n    }\n\n    & .navbar__container-left-content {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: flex-start;\n      padding: 0px;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n\n      & .navbar__container-left-content-navigation-group {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        padding: 0px;\n        gap: 4px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & .navbar__container-left-content-navigation-item-search-bar {\n          display: flex; //none\n          flex-direction: row;\n          align-items: center;\n          padding: 0px 8px;\n          flex: none;\n          order: 5;\n          flex-grow: 0;\n          //width: 256px;\n          //height: 40px;\n        }\n\n        & .navbar__container-left-content-navigation-item {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          padding: 0px 8px;\n          gap: 8px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n\n          & a {\n            display: flex;\n            align-items: center;\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 24px;\n            color: tokens.$ifxColorBaseBlack;\n            text-decoration: none;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n          }\n        }\n      }\n    }\n  }\n\n  & .navbar__container-right {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0;\n    gap: 8px;\n    flex: none;\n    order: 1;\n    flex-grow: 0;\n\n    &.hide { \n      display: none;\n    }\n\n    &.expand { \n      justify-content: initial;\n      flex: 1;\n        & .navbar__container-right-content { \n          align-items: initial;\n          flex: 1;\n          & .navbar__container-right-content-navigation-group { \n            justify-content: initial;\n            flex: 1;\n            & .navbar__container-right-content-navigation-item-search-bar { \n              flex: 1;\n              & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper { \n                flex: 1;\n              }\n            }\n          }\n        }\n      \n    }\n\n    & .navbar__burger-icon-wrapper {\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      padding: 4px 0px 4px 16px;\n      border-left: 1px solid tokens.$ifxColorEngineering300;\n      gap: 16px;\n      flex: none;\n      order: 1;\n      flex-grow: 0;\n      width: 41px;\n      height: 40px;\n\n      &.hide { \n        display: none;\n      }\n\n      & .navbar__burger-icon {\n        display: flex;\n        align-items: center;\n\n        &:hover { \n          cursor: pointer;\n        }\n\n        &.close {\n          display: none;\n        }\n      }\n\n      & .navbar__cross-icon {\n        display: none;\n        align-items: center;\n\n        &.show {\n          display: flex;\n\n          &:hover { \n            cursor: pointer;\n          }\n        }\n      }\n    }\n\n    & .navbar__container-right-content {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      padding: 0px;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .navbar__container-right-content-navigation-group {\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-end;\n        align-items: center;\n        padding: 0px;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n\n        & .navbar__container-right-content-navigation-item,\n        & .navbar__container-right-content-navigation-item-profile,\n        & .navbar__container-right-content-navigation-item-search-bar {\n          display: flex;\n          flex-direction: row;\n          align-items: center;\n          padding: 0px 8px;\n          gap: 4px;\n          flex: none;\n          order: 0;\n          flex-grow: 0;\n\n          & .navbar__container-right-content-navigation-item-search-bar-icon-wrapper {\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            padding: 0px;\n            gap: 8px;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            //width: 24px;\n            //height: 24px;\n            //max-width: 200px;\n\n            &.isOpen { \n              position: absolute;\n              top: 10px;\n            }\n          }\n\n          & .navbar__container-right-content-navigation-item-navigation-profile {\n            position: relative;\n            width: 24px;\n            height: 24px;\n            background: tokens.$ifxColorOcean500;\n            border-radius: 100px;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n\n            & a {\n              position: absolute;\n              width: 22px;\n              height: 20px;\n              left: calc(50% - 22px/2);\n              top: calc(50% - 20px/2);\n              font-style: normal;\n              font-weight: 600;\n              font-size: 14px;\n              line-height: 20px;\n              text-decoration: none;\n              display: flex;\n              align-items: center;\n              justify-content: center;\n              text-align: center;\n              color: tokens.$ifxColorBaseWhite;\n            }\n          }\n\n          & .navbar__container-right-content-navigation-item-icon-wrapper {\n            display: flex;\n            flex-direction: row;\n            justify-content: center;\n            align-items: center;\n            padding: 0px;\n            gap: 8px;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n          }\n\n          & a {\n            font-style: normal;\n            font-weight: 400;\n            font-size: 14px;\n            line-height: 20px;\n            color: tokens.$ifxColorBaseBlack;\n            text-decoration: none;\n            display: flex;\n            align-items: center;\n            flex: none;\n            order: 1;\n            flex-grow: 0;\n          }\n        }\n      }\n    }\n  }\n}\n\n//burger icon exist, and left container is gone\n@media screen and (max-width: 800px) {\n  .navbar__container {\n    padding: 0px 16px;\n    height: 64px;\n    gap: initial;\n\n    &.expanded { \n      & .navbar__container-right {\n        & .navbar__burger-icon-wrapper {\n          display: none;\n        }\n      }\n    }\n\n    & .navbar__container-left {\n      & .navbar__container-left-content {\n        display: none;\n      }\n\n      & .navbar__container-left-logo {\n        & .navbar__container-left-logo-divider {\n          display: none;\n        }\n      }\n    }\n\n    & .navbar__container-right {\n      flex: 1;\n    }\n  }\n\n  .navbar__sidebar {\n    width: 0;\n    transition: 1s;\n\n    // &.show {\n    //   width: 100%;\n    // }\n\n  }\n}\n\n@media screen and (max-width: 500px) {\n  .navbar__sidebar {\n    &.show {\n      width: 100%;  // 100% of viewport width\n    }\n  }\n}\n\n@media screen and (min-width: 500px) {\n  .navbar__sidebar {\n    &.show {\n      width: 50%;  // 100% of viewport width\n    }\n  }\n}\n\n//burger icon disappears\n@media screen and (min-width: 800px) {\n  .navbar__wrapper {\n    height: 63px;\n  }\n\n  .navbar__container {\n    padding: 0px 16px;\n    height: 63px;\n    gap: initial;\n\n    & .navbar__container-right {\n      & .navbar__burger-icon-wrapper {\n        display: none;\n      }\n    }\n  }\n\n  .navbar__main-container {\n    &.show {\n      height: auto;\n      background-color: inherit;\n      transition: none;\n    }\n  }\n\n  .navbar__sidebar {\n    width: 0;\n    transition: 1s;\n    &.show { \n      right: -100%;\n    }\n  }\n\n}\n\n//left container appears\n@media screen and (min-width: 1024px) {\n  .navbar__wrapper {\n    height: 72px;\n  }\n\n  .navbar__container {\n    padding: 0px 24px;\n    height: 72px;\n\n    & .navbar__container-left {\n      gap: 12px;\n      display: flex;\n\n      & .navbar__container-left-content {\n        display: flex;\n      }\n\n      & .navbar__container-left-logo-default {\n        & svg {\n          width: 72.8px;\n          height: 32px;\n        }\n      }\n    }\n  }\n\n  .navbar__main-container {\n    &.show {\n      height: auto;\n      background-color: inherit;\n      transition: none;\n    }\n  }\n}\n\n@media screen and (min-width: 1200px) {\n  .navbar__wrapper {\n    height: 80px\n  }\n\n  .navbar__container {\n    padding: 0px 32px;\n    height: 80px;\n\n    & .navbar__container-left {\n      & .navbar__container-left-content {\n        justify-content: inherit;\n      }\n    }\n\n    & .navbar__container-right {\n      & .navbar__container-right-content {\n        justify-content: inherit;\n      }\n    }\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  .navbar__wrapper {\n    height: 80px;\n  }\n\n  .navbar__container {\n    padding: 0px 40px;\n    height: 80px;\n\n    & .navbar__container-left {\n      & .navbar__container-left-content {\n        justify-content: center;\n      }\n    }\n\n    & .navbar__container-right {\n      & .navbar__container-right-content {\n        justify-content: inherit;\n      }\n    }\n  }\n}","import { Component, h, Element, State, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-navbar',\n  styleUrl: 'navbar.scss',\n  shadow: true,\n})\n\nexport class Navbar {\n  @Element() el;\n  @State() main: boolean = true\n  @State() products: boolean = false\n  @State() applications: boolean = false\n  @State() design: boolean = false\n  @State() support: boolean = false\n  @State() about: boolean = false\n  @Prop() applicationName: string = \"\"\n  @State() hasLeftMenuItems: boolean = true;\n  @Prop() fixed: boolean = true;\n  @Prop() showLogoAndAppname: boolean = true;\n  @State() searchBarIsOpen: string;\n  @Prop() logoHref: string = \"\";\n  @State() internalLogoHref: string = \"\"\n  @Prop() logoHrefTarget: string = '_self';\n  @State() internalLogoHrefTarget: string = '_self';\n  @Event() ifxNavbarMobileMenuIsOpen: EventEmitter;\n\n  private addEventListenersToHandleCustomFocusState() {\n    const element = this.el.shadowRoot.firstChild;\n\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n    element.tabIndex = -1;\n\n    // Select all a elements in the navbar and set their tabIndex to -1 to make them non-focusable\n    const aElements = element.querySelectorAll('a');\n    for (let i = 0; i < aElements.length; i++) {\n      aElements[i].tabIndex = -1;\n    }\n\n    const slot = element.querySelector('slot');\n    if (slot) {\n      const assignedNodes = slot.assignedNodes();\n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i] as HTMLElement;\n        if (node.nodeName === 'IFX-NAVBAR-ITEM') {\n          const navbarItem = node as HTMLIfxNavbarItemElement;\n\n          // Get all navigation items\n          const aElements = navbarItem?.shadowRoot.querySelectorAll('a');\n          for (let i = 0; i < aElements.length; i++) {\n            aElements[i].tabIndex = -1;\n          }\n        }\n      }\n    }\n  }\n\n  @Listen('ifxNavItem') \n  clearFirstLayerMenu(event: CustomEvent) { \n    if(event.detail.action === 'hideFirstLayer') { \n      const leftMenuItems = this.getMobileMenuTop()\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n          leftMenuItems[i].hideComponent()\n        }\n      }\n    }\n\n    if(event.detail.action === 'hideSecondLayer') { \n      const parent = event.detail.parent;\n      const children = parent.children;\n      parent.toggleFirstLayerItem('remove', 'add')\n      for(let i = 0; i < children.length; i++) { \n        if(!children[i].isSameNode(event.detail.component)) {\n          children[i].hideComponent()\n        }\n      }\n    }\n\n    if(event.detail.action === 'returnToSecondLayer') { \n      const parent = event.detail.parent;\n      const children = parent.children;\n      parent.toggleFirstLayerItem('add', 'remove')\n      for(let i = 0; i < children.length; i++) { \n        if(!children[i].isSameNode(event.detail.component)) {\n          children[i].showComponent()\n        }\n      }\n    }\n\n    if(event.detail.action === 'show') { \n      const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n          leftMenuItems[i].showComponent()\n        }\n      }\n    }\n\n    if(event.detail.action === 'return') { \n      const leftMenuItems = this.getMobileMenuTop()\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        if(!leftMenuItems[i].isSameNode(event.detail.component)) {\n          leftMenuItems[i].showComponent()\n        }\n      }\n    }\n  }\n\n  getWrappers() {\n    const rightContentNavigationGroup = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-group')\n    const searchBarRightWrapper = this.el.shadowRoot.querySelector('.navbar__container-right-content-navigation-item-search-bar-icon-wrapper')\n    const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n    const rightSideItemSlot = rightContentNavigationGroup.querySelector('slot[name=\"right-item\"]');\n    const rightSideSlot = searchBarRightWrapper.querySelector('slot');\n    const leftSideSlot = searchBarLeftWrapper.querySelector('slot');\n    const rightAssignedNodes = rightSideSlot.assignedNodes();\n    const leftAssignedNodes = leftSideSlot.assignedNodes();\n    const navbarProfile = this.el.querySelector('ifx-navbar-profile');\n    const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]');\n    const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]');\n    const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n    \n    return {rightSideItemSlot, rightSideSlot, leftSideSlot, rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper};\n  }\n\n  hideNavItems() {\n    const { rightAssignedNodes, leftAssignedNodes, navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n    \n    if(rightAssignedNodes.length !== 0) { \n      this.searchBarIsOpen = 'right'\n    } else if(leftAssignedNodes.length !== 0) {\n      this.searchBarIsOpen = 'left'\n    }\n\n    if(navbarProfile) { \n      navbarProfile.hideComponent()\n    }\n    \n    for(let l = 0; l < leftMenuItems.length; l++) { \n      if(!topRowWrapper.classList.contains('expand')) {\n        leftMenuItems[l].hideComponent()\n      }\n    }\n  \n    for(let r = 0; r < rightMenuItems.length; r++) { \n      if(topRowWrapper.classList.contains('expand')) {\n        if(!rightMenuItems[r].hideOnMobile) { \n          rightMenuItems[r].hideComponent()\n        }\n      } else { \n        rightMenuItems[r].hideComponent()\n      }\n    }\n  }\n\n  showNavItems() {\n    const { navbarProfile, leftMenuItems, rightMenuItems, topRowWrapper } = this.getWrappers();\n    this.searchBarIsOpen = undefined;\n    \n    if(navbarProfile) {\n      navbarProfile.showComponent()\n    }\n    \n    for(let l = 0; l < leftMenuItems.length; l++) { \n      if(!topRowWrapper.classList.contains('expand')) {\n        leftMenuItems[l].showComponent()\n      }\n    }\n  \n    for(let r = 0; r < rightMenuItems.length; r++) { \n      if(topRowWrapper.classList.contains('expand')) {\n        if(!rightMenuItems[r].hideOnMobile) { \n          rightMenuItems[r].showComponent()\n        }\n      } else { \n        rightMenuItems[r].showComponent()\n      }\n    }\n  }\n  \n  \n  @Listen('ifxOpen')\n  handleSearchBarToggle(event: CustomEvent) {\n   \n    if(event.detail) { \n      this.hideNavItems();\n    } else if(!event.detail) {\n      this.showNavItems();\n    }\n  }\n\n  toggleClass(el, className) {\n    el.classList.toggle(className)\n  }\n\n  handleSidebar(el) {\n    const sidebarIconWrapper = el.currentTarget.closest('.navbar__burger-icon-wrapper');\n    const sidebarIconOpen = sidebarIconWrapper.querySelector('.navbar__burger-icon')\n    const sidebarIconClose = sidebarIconWrapper.querySelector('.navbar__cross-icon')\n    const mainContainer = el.currentTarget.closest('.navbar__main-container');\n    const navbarWrapper = el.currentTarget.closest('.navbar__wrapper')\n    const sidebarWrapper = navbarWrapper.querySelector('.navbar__sidebar');\n    this.toggleClass(navbarWrapper, 'show')\n    this.toggleClass(mainContainer, 'show')\n    this.toggleClass(sidebarWrapper, 'show')\n    this.toggleClass(sidebarIconOpen, 'close')\n    this.toggleClass(sidebarIconClose, 'show')\n\n    if(sidebarIconClose.classList.contains('show')) { \n      this.handleBodyScroll('hide')\n    } else { \n      this.handleBodyScroll('show')\n    }\n  }\n\n  handleBodyScroll(action) { \n    const body = this.el.closest('body')\n    if(!this.fixed && action === 'hide') { \n      body.style.overflow = 'hidden'\n    } else if(action === 'show') { \n      body.style.overflow = 'visible'\n    }\n  }\n\n  handleDropdownMenu(el) {\n    const dropdownWrapper = el.currentTarget.querySelector('.navbar__dropdown-wrapper')\n    dropdownWrapper.classList.toggle('open')\n    const iconWrapper = el.currentTarget.querySelector('a')\n    iconWrapper.classList.toggle('open')\n  }\n\n  async setItemMenuPosition() { \n    const navbarItems = this.el.querySelectorAll('ifx-navbar-item')\n    const navbarProfile = this.el.querySelector('ifx-navbar-profile')\n\n    if(navbarProfile) {\n      const itemChildren = navbarProfile.querySelectorAll('ifx-navbar-item')\n      if (itemChildren.length !== 0) {\n        itemChildren.forEach(item => { \n          item.setMenuItemPosition()\n          this.setMenuItemChildrenPosition(item)\n        })\n      }\n    }\n   \n    if(navbarItems.length !== 0) { \n      for(let i = 0; i < navbarItems.length; i++) { \n        const item = navbarItems[i];\n        const itemChildren = item.querySelectorAll('ifx-navbar-item')\n        if (itemChildren.length !== 0) {\n         const hasNestedItems = await item.setItemSideSpecifications()\n         if(hasNestedItems) { \n          itemChildren.forEach(item => { \n            item.setMenuItemPosition()\n            this.setMenuItemChildrenPosition(item)\n          })\n         }\n        }\n      }\n    }\n  }\n\n  setMenuItemChildrenPosition(item) {\n    const itemChildren = item.querySelectorAll('ifx-navbar-item');\n    if (itemChildren.length !== 0) {\n        itemChildren.forEach(subItem => { \n          subItem.setMenuItemPosition()\n          this.setMenuItemChildrenPosition(subItem)\n        })\n    }\n  }\n\n  getMediaQueryList() { \n    const mediaQueryList = window.matchMedia('(max-width: 800px)');\n    return mediaQueryList;\n  }\n\n  componentDidLoad() {\n    this.setItemMenuPosition()\n    this.addEventListenersToHandleCustomFocusState();\n \n    const mediaQueryList = this.getMediaQueryList()\n\n    if (mediaQueryList.matches) {\n      this.moveNavItemsToSidebar();\n    }\n\n  }\n\n  handleMobileMenuBottom(e) { \n    const mobileMenuBottomWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-bottom-row')\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    if(nodes.length > 0) { \n      mobileMenuBottomWrapper.classList.add('show')\n    } else { \n      mobileMenuBottomWrapper.classList.remove('show')\n    }\n  }\n\n  handleLogoHrefAndTarget(){\n    if(this.logoHref.trim() === \"\") {\n      this.internalLogoHref = undefined;\n    }else{\n      this.internalLogoHref = this.logoHref;\n    }\n\n    if(['_self', '_blank', '_parent'].includes(this.logoHrefTarget.trim())){\n      this.internalLogoHrefTarget = this.logoHrefTarget;\n    }else{\n      this.internalLogoHrefTarget = '_self';\n    }\n  }\n\n \n  componentWillLoad() {\n    this.RemoveSpaceOnStorybookSnippet()\n    const dropdownMenu = this.el.querySelector('ifx-navbar-menu')\n    const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n    if (!leftMenuItems.length && !dropdownMenu) {\n      this.hasLeftMenuItems = false;\n    }\n    this.handleLogoHrefAndTarget();\n\n    const mediaQueryList = window.matchMedia('(max-width: 800px)');\n    mediaQueryList.addEventListener('change', (e) => this.moveNavItemsToSidebar(e));\n  }\n\n \n\n  getSearchBarLeftWrapper() { \n    const searchBarLeftWrapper = this.el.shadowRoot.querySelector('.navbar__container-left-content-navigation-item-search-bar')\n    return searchBarLeftWrapper;\n  }\n\n  getMobileMenuTop() { \n    const leftMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-top\"]');\n    return leftMenuItems;\n  }\n\n  getMobileMenuBottom() { \n    const rightMenuItems = this.el.querySelectorAll('[slot=\"mobile-menu-bottom\"]');\n    return rightMenuItems;\n  }\n\n  handleBurgerIcon() { \n    const leftMenuItems = this.getMobileMenuTop()\n    const rightMenuItems = this.getMobileMenuBottom()\n    if(!leftMenuItems.length && !rightMenuItems.length) { \n     const burgerIconWrapper = this.el.shadowRoot.querySelector('.navbar__burger-icon-wrapper')\n     this.toggleClass(burgerIconWrapper, 'hide')\n    }\n  }\n  \n  moveNavItemsToSidebar(e?: MediaQueryListEvent) {\n    const topRowWrapper = this.el.shadowRoot.querySelector('.navbar__sidebar-top-row-wrapper')\n    const mediaQueryList = this.getMediaQueryList();\n    const matches = e ? e.matches : mediaQueryList.matches;\n  \n    if (matches) {\n      /* The viewport is 800px wide or less */\n      topRowWrapper.classList.add('expand')\n      \n      //hide body scroll if sidebar was opened\n      const crossIcon = this.el.shadowRoot.querySelector('.navbar__cross-icon')\n      if(crossIcon.classList.contains('show')) { \n        this.handleBodyScroll('hide')\n      }\n      \n      //move search bar to right-side\n      const searchBarLeft = this.el.querySelector('[slot=\"search-bar-left\"]')\n      if(searchBarLeft) { \n        if(this.searchBarIsOpen) { \n          searchBarLeft.onNavbarMobile()\n        }\n        const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n        searchBarLeftWrapper.classList.add('initial')\n        searchBarLeft.setAttribute('slot', 'search-bar-right')\n      }\n      \n      //left-side\n      const leftMenuItems = this.el.querySelectorAll('[slot=\"left-item\"]')\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        leftMenuItems[i].setAttribute('slot', 'mobile-menu-top')\n        leftMenuItems[i].moveChildComponentsIntoSubLayerMenu()\n        if(this.searchBarIsOpen) { \n          leftMenuItems[i].showComponent()\n        }\n      }\n      \n      //right-side\n      const rightMenuItems = this.el.querySelectorAll('[slot=\"right-item\"]')\n      for(let i = 0; i < rightMenuItems.length; i++) { \n        if(rightMenuItems[i].tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') { \n          rightMenuItems[i].showLabel = false;\n        } else { \n          if(rightMenuItems[i].hideOnMobile) { \n            rightMenuItems[i].setAttribute('slot', 'mobile-menu-bottom')\n            \n            rightMenuItems[i].toggleChildren('add')\n            \n            rightMenuItems[i].showLabel = true;\n            if(this.searchBarIsOpen) { \n              rightMenuItems[i].showComponent()\n            }\n          }\n        }\n      }\n      \n      this.handleBurgerIcon()\n\n    } else {\n      /* The viewport is more than 800px wide */\n      topRowWrapper.classList.remove('expand')\n\n      //show body scroll \n      this.handleBodyScroll('show')\n\n      //return search bar to its original position\n      const searchBarLeftWrapper = this.getSearchBarLeftWrapper()\n      const leftIsInitial = searchBarLeftWrapper.classList.contains('initial')\n      const searchBarRight = this.el.querySelector('[slot=\"search-bar-right\"]')\n      if(leftIsInitial) { \n        if(this.searchBarIsOpen) { \n          searchBarRight.onNavbarMobile()\n        }\n        if(searchBarRight) { \n          searchBarRight.setAttribute('slot', 'search-bar-left')\n        }\n      }\n\n      //left-side\n      const leftMenuItems = this.getMobileMenuTop()\n      for(let i = 0; i < leftMenuItems.length; i++) { \n        leftMenuItems[i].setAttribute('slot', 'left-item')\n        leftMenuItems[i].moveChildComponentsBackIntoNavbar()\n      }\n\n      //right-side\n      const rightMenuItems = this.getMobileMenuBottom()\n      const navbarProfileItem = this.el.querySelector('ifx-navbar-profile')\n      if(navbarProfileItem) { \n        const showProfileItemLabel = navbarProfileItem.getAttribute('show-label');\n        navbarProfileItem.setAttribute('show-label', showProfileItemLabel)\n      }\n\n      for(let i = 0; i < rightMenuItems.length; i++) { \n        rightMenuItems[i].setAttribute('slot', 'right-item')\n\n          rightMenuItems[i].toggleChildren('remove')\n          \n          const showLabel = rightMenuItems[i].getAttribute('show-label');\n          rightMenuItems[i].setAttribute('show-label', showLabel)\n          if(this.searchBarIsOpen) { \n            rightMenuItems[i].hideComponent()\n          }\n        }\n      }\n    }\n\n  RemoveSpaceOnStorybookSnippet() { \n    let parent = this.el.parentElement;\n    if(parent) { \n      let storybookWrapper = parent.closest('.css-xzp052');\n      if(storybookWrapper) { \n        storybookWrapper.style.overflow = 'visible'\n      }\n    }\n  }\n\n\n  \n  render() {\n    return (\n      <div aria-label='a navigation navbar' class={`navbar__wrapper ${this.fixed ? 'fixed' : \"\"}`}>\n        <div class={`navbar__main-container ${this.fixed ? 'fixed' : \"\"}`}>\n          <div class={`navbar__container ${this.searchBarIsOpen ? \"expanded\" : \"\"}`}>\n            <div class={`navbar__container-left ${this.searchBarIsOpen === 'left' ? \"expand\" : this.searchBarIsOpen === 'right' ? 'hide' : \"\"}`}>\n              {this.showLogoAndAppname &&\n                <div class={`navbar__container-left-logo ${this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n                  <div class=\"navbar__container-left-logo-default\">\n                    <a href={this.internalLogoHref} target = {this.internalLogoHrefTarget}>\n                      <svg width=\"91\" height=\"40\" viewBox=\"0 0 91 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g clip-path=\"url(#clip0_2396_2480)\">\n                          <path d=\"M67.691 26.7766C71.0884 26.7766 72.1461 23.1841 72.1461 19.8802C72.1461 15.4536 70.2871 13.1441 67.691 13.1441C64.4219 13.1441 63.2681 16.7367 63.3001 19.9443C63.3322 23.1199 64.2296 26.7766 67.691 26.7766ZM66.0244 19.8481C66.0244 18.533 66.0244 15.4536 67.691 15.4536C69.4859 15.4536 69.4218 18.5009 69.4218 19.9123C69.4218 21.2595 69.4218 24.5313 67.7551 24.5313C65.9603 24.4992 66.0244 21.2274 66.0244 19.8481ZM57.8195 26.7766C59.1976 26.7766 60.3835 26.2313 61.5053 25.0445L60.5117 23.1841C59.7425 24.018 58.9733 24.4671 58.0438 24.4671C57.2746 24.4671 56.6336 24.018 56.249 23.2482C55.9285 22.5746 55.8644 21.8048 55.8644 20.9708V20.7142H61.6335V20.1368C61.6335 17.282 61.2809 15.7102 60.3835 14.5234C59.7104 13.6253 58.7169 13.1441 57.499 13.1441C56.2169 13.1441 55.1593 13.7215 54.39 14.8442C53.5567 16.0631 53.2042 17.699 53.2042 19.9443C53.1721 24.2426 54.8708 26.7766 57.8195 26.7766ZM57.531 15.2612C58.172 15.2612 58.5566 15.614 58.813 16.1914C59.0053 16.7046 59.1015 17.5707 59.1015 18.5971H55.8644C55.8964 16.3197 56.3772 15.2612 57.531 15.2612ZM74.2614 26.4559H76.7614V16.8329C77.3703 16.0952 78.0754 15.6782 78.5882 15.6782C78.9087 15.6782 79.2292 15.7423 79.4215 15.9989C79.6138 16.2876 79.71 16.7046 79.71 17.699V26.4559H82.21V16.5442C82.21 15.6782 82.1138 14.8121 81.601 14.1706C81.1523 13.5932 80.4472 13.2404 79.5497 13.2404C78.3959 13.2404 77.2101 13.914 76.569 14.6838C76.537 14.0102 76.3126 13.3687 76.2485 13.1441L73.9089 13.7536C74.0371 14.4593 74.2294 15.3253 74.2294 16.8971V26.4559H74.2614ZM45.2236 14.6838C45.1915 14.0102 44.9672 13.3687 44.9031 13.1441L42.5634 13.7536C42.6916 14.4593 42.8839 15.3253 42.8839 16.8971V26.4238H45.3838V16.8008C45.9928 16.0631 46.6979 15.6461 47.2107 15.6461C47.5312 15.6461 47.8517 15.7102 48.044 15.9669C48.2363 16.2555 48.3325 16.6725 48.3325 17.6669V26.4238H50.8324V16.5442C50.8324 15.6782 50.7363 14.8121 50.2235 14.1706C49.7748 13.5932 49.0696 13.2404 48.1722 13.2404C47.0505 13.2404 45.8646 13.914 45.2236 14.6838ZM14.6473 9.07042C16.1216 9.07042 17.3075 7.88359 17.3075 6.40807C17.3075 4.93256 16.1216 3.74573 14.6473 3.74573C13.173 3.74573 11.9871 4.93256 11.9871 6.40807C11.9871 7.88359 13.173 9.07042 14.6473 9.07042ZM26.9227 26.4559V16.5442C26.9227 15.6782 26.8265 14.8121 26.3137 14.1706C25.865 13.5932 25.1599 13.2404 24.2625 13.2404C23.1087 13.2404 21.9228 13.914 21.2818 14.6838C21.2497 14.0102 21.0254 13.3687 20.9613 13.1441L18.6536 13.7857C18.7818 14.4913 18.9741 15.3574 18.9741 16.9291V26.4559H21.4741V16.8329C22.0831 16.0952 22.7882 15.6782 23.301 15.6782C23.6215 15.6782 23.942 15.7423 24.1343 15.9989C24.3266 16.2876 24.4227 16.7046 24.4227 17.699V26.4559H26.9227ZM38.4289 8.36474C37.4994 8.36474 36.7622 9.10249 36.7622 10.0327C36.7622 10.9629 37.4994 11.7007 38.3968 11.7007C39.3263 11.7007 40.0634 10.9629 40.0634 10.0327C40.0634 9.10249 39.3263 8.36474 38.4289 8.36474ZM13.4614 26.4559H15.9614V10.8346L13.4614 11.1554V26.4559ZM33.8777 9.90441C34.3264 9.90441 34.7751 10.0648 35.0635 10.2893L35.7687 8.33266C35.0956 7.85151 34.3584 7.62698 33.429 7.62698C32.788 7.62698 32.1149 7.78736 31.5059 8.26851C30.897 8.78173 30.256 9.80818 30.256 11.7328C30.256 12.5667 30.288 13.4328 30.288 13.4328H29.4226V15.6461H30.288V26.4238H32.8521V15.6782H34.743L35.2238 13.4649H32.8841V11.4762C32.8841 10.5139 33.2687 9.90441 33.8777 9.90441ZM37.1468 26.4559H39.6788V13.2404L37.1468 13.5611V26.4559Z\" fill=\"#005DA9\" />\n                          <path d=\"M77.0816 33.5126C68.6203 36.0146 58.3321 37.1052 48.2682 37.1052C22.7239 37.1052 6.24986 29.5993 5.09604 19.6877C4.67938 15.9668 7.59599 12.3422 12.4677 9.26285C11.6023 8.62132 11.0575 7.59488 11.0254 6.44012C3.97427 10.161 0 15.0366 0 19.9764C0 30.9145 19.5188 40.1525 48.5246 39.7676C58.6205 39.6393 67.0498 38.1958 74.6778 35.6939C83.7482 32.7428 89.4532 28.5087 90.8313 26.6483C89.1968 28.1238 85.3186 31.0748 77.0816 33.5126ZM23.2687 4.38723C24.9674 3.80985 27.3712 3.0721 27.3712 3.0721C34.1339 1.21166 41.6017 0.121063 48.5566 0.185215C40.544 -0.295931 33.2365 0.185215 26.8584 1.33997C26.8584 1.33997 24.743 1.69281 22.4675 2.27018C22.4675 2.27018 21.3777 2.55887 20.7047 2.75133C20.0316 2.94379 19.1021 3.2004 19.1021 3.2004C18.4611 3.39286 17.8201 3.6174 17.1791 3.84193C17.8201 4.48346 18.2047 5.31745 18.2368 6.27974C19.3586 5.76652 21.5059 4.99668 23.2687 4.38723Z\" fill=\"#E30034\" />\n                        </g>\n                        <defs>\n                          <clipPath id=\"clip0_2396_2480\">\n                            <rect width=\"91\" height=\"40\" fill=\"white\" />\n                          </clipPath>\n                        </defs>\n                      </svg>\n                    </a>\n                  </div>\n                  {this.applicationName && <h6>{this.applicationName}</h6>}\n                  {this.applicationName && this.hasLeftMenuItems &&\n                    <div class=\"navbar__container-left-logo-divider\"></div>}\n                </div>}\n              <div class=\"navbar__container-left-content\">\n                <div class=\"navbar__container-left-content-navigation-group\">\n                  <slot name='left-item' />\n                  <div class=\"navbar__container-left-content-navigation-item-search-bar\">\n                    <slot name='search-bar-left' />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class={`navbar__container-right ${this.searchBarIsOpen === 'right' ? \"expand\" : this.searchBarIsOpen === 'left' ? 'hide' : \"\"}`}>\n              <div class=\"navbar__container-right-content\">\n                <div class=\"navbar__container-right-content-navigation-group\">\n                  <div class=\"navbar__container-right-content-navigation-item-search-bar\">\n                  <div class={`navbar__container-right-content-navigation-item-search-bar-icon-wrapper`}>\n                      <slot name='search-bar-right' />\n                    </div>\n                  </div>\n                  <slot name='right-item' />\n                </div>\n              </div>\n\n              {/* MOBILE MENU BUTTON */}\n              <div class={`navbar__burger-icon-wrapper`} onClick={this.handleSidebar.bind(this)}>\n                <div class=\"navbar__burger-icon\">\n                  <ifx-icon icon=\"menu-right-24\"></ifx-icon>\n                </div>\n                <div class=\"navbar__cross-icon\">\n                  <ifx-icon icon=\"cross-24\"></ifx-icon>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* SIDEBAR */}\n        <div class=\"navbar__sidebar\">\n          {/* left side ifx-navbar-item  */}\n          <div class=\"navbar__sidebar-top-row\">\n            <div class=\"navbar__sidebar-top-row-wrapper\">\n              <slot name='mobile-menu-top' />\n            </div>\n          </div>\n\n          {/* right side ifx-navbar-item  */}\n          <div class=\"navbar__sidebar-bottom-row\">\n            <slot name='mobile-menu-bottom' onSlotchange={(e) => this.handleMobileMenuBottom(e)} />\n          </div>\n          \n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{r as t,h as n,a as o,g as e}from"./p-b7a462e5.js";import{c as i}from"./p-5cdc6210.js";const r=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const s=r;const a=class{constructor(n){t(this,n);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}}render(){return n(o,{key:"76ee6d778296f5334121e83a5a15a15025c3dd13","aria-disabled":this.disabled,"aria-label":this.ariaLabel},this.href?n("a",{ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.icon})):n("button",{class:this.getClassNames(),type:"button",disabled:this.disabled},n("ifx-icon",{icon:this.icon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return i("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return e(this)}};a.style=s;export{a as ifx_icon_button};
+//# sourceMappingURL=p-c49207b6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconButtonCss","IfxIconButtonStyle0","IconButton","constructor","hostRef","this","target","shape","handleClick","event","disabled","stopImmediatePropagation","setFocus","focusableElement","focus","componentWillLoad","render","h","Host","key","ariaLabel","href","ref","el","class","getClassNames","undefined","rel","icon","type","getVariantClass","variant","getSizeClass","size","classNames"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Prop() ariaLabel: string | null;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  \n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n  }\n\n  render() {\n    return (\n      <Host \n        aria-disabled={this.disabled}\n        aria-label={this.ariaLabel}> \n        {this.href ? (\n          <a\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined} \n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            disabled={this.disabled}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAgB,y4EACtB,MAAAC,EAAeD,E,MCQFE,EAAU,MANvB,WAAAC,CAAAC,G,UAYUC,KAAAC,OAAiB,QACjBD,KAAAE,MAAgB,O,CAOxB,WAAAC,CAAYC,GACV,GAAIJ,KAAKK,SAAU,CACjBD,EAAME,0B,EAKV,cAAMC,GACJP,KAAKQ,iBAAiBC,O,CAGxB,iBAAAC,GACE,GAAIV,KAAKE,QAAU,GAAI,CACrBF,KAAKE,MAAQ,O,EAIjB,MAAAS,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYd,KAAKK,SAAQ,aAChBL,KAAKe,WAChBf,KAAKgB,KACJJ,EAAA,KACEK,IAAMC,GAAQlB,KAAKQ,iBAAmBU,EACtCC,MAAOnB,KAAKoB,gBACZJ,MAAOhB,KAAKK,SAAWL,KAAKgB,KAAOK,UACnCpB,OAAQD,KAAKC,OACbqB,IAAKtB,KAAKC,SAAW,SAAW,sBAAwBoB,WAExDT,EAAA,YAAUW,KAAMvB,KAAKuB,QAGvBX,EAAA,UACEO,MAAOnB,KAAKoB,gBACZI,KAAK,SACLnB,SAAUL,KAAKK,UAEfO,EAAA,YAAUW,KAAMvB,KAAKuB,Q,CAO/B,eAAAE,GACE,MAAO,GAAGzB,KAAK0B,YAAc,YACzB,YACA,GAAG1B,KAAK0B,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAG3B,KAAK4B,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAG5B,KAAK4B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAG5B,KAAK4B,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAR,GACE,OAAOS,EACL,kBACA,OAAO7B,KAAKE,QACZF,KAAK4B,MAAQ,OAAO5B,KAAK2B,iBACzB,OAAO3B,KAAKyB,oBACZzB,KAAKK,SAAW,WAAa,G","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as i,h as o,a as f}from"./p-b7a462e5.js";const t=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}';const e=t;const n=class{constructor(o){i(this,o);this.variant="success";this.linkTarget="_blank"}getClassName(){switch(this.variant){case"success":return"ifx-notification__wrapper--success";case"locked":return"ifx-notification__wrapper--locked";case"error":return"ifx-notification__wrapper--error";case"neutral":return"ifx-notification__wrapper--neutral";default:return"ifx-notification__wrapper--success"}}render(){return o(f,{key:"b9dadad41cad910e7e21650aceb29d5af6643c51"},o("div",{key:"cd41ee1636de78a194ef95f9e2bd06b694e11a6b",class:"ifx-notification__wrapper "+this.getClassName()},o("div",{key:"776d12dbdd3507d2eeffae5acb43d0cc7bb38522",class:"ifx-notification__icon"},o("ifx-icon",{key:"a76019027824d778f963e35141a7fd11cdded756",icon:this.icon})),o("div",{key:"53d4f45a00e2fafe215763e92f5d93b197b6fa48",class:"ifx-notification__body"},o("div",{key:"805f47c98958592fbeb012bf63692a5209006bb9",class:"ifx-notification__slot"},o("slot",{key:"f197bced5fd1ba1251f0ba0f2391e05d2d55ce7c"})),this.linkText&&this.linkHref&&o("div",{key:"132c845a13e2eebcbf77fb8388c0f6f215f8f5d6",class:"ifx-notification__link"},o("ifx-link",{key:"f9ff3ec9dfa037606be40ee682b7b99003be14ae",href:this.linkHref,target:this.linkTarget},this.linkText,o("ifx-icon",{key:"aa3c3662121113ed8c0d695bf10a2a9574be6df0",icon:"arrow-right-16"}))))))}};n.style=e;export{n as ifx_notification};
+//# sourceMappingURL=p-cd85bddb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["notificationCss","IfxNotificationStyle0","Notification","constructor","hostRef","this","variant","linkTarget","getClassName","render","h","Host","key","class","icon","linkText","linkHref","href","target"],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--locked {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.ifx-notification__wrapper--neutral{\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: center;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n    font-size: tokens.$ifxFontSizeS;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  & .ifx-notification__link {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'locked':\n        return 'ifx-notification__wrapper--locked';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      case 'neutral':\n        return 'ifx-notification__wrapper--neutral';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"kDAAA,MAAMA,EAAkB,ooDACxB,MAAAC,EAAeD,E,MCQFE,EAAY,MALzB,WAAAC,CAAAC,G,UAOUC,KAAAC,QAA+B,UAG/BD,KAAAE,WAAqB,Q,CAGrB,YAAAC,GACN,OAAQH,KAAKC,SACX,IAAK,UACH,MAAO,qCACT,IAAK,SACH,MAAO,oCACT,IAAK,QACH,MAAO,mCACT,IAAK,UACH,MAAO,qCACT,QACE,MAAO,qC,CAIb,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,6BAA+BR,KAAKG,gBAC9CE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUE,KAAMT,KAAKS,QAEvBJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,QAAAE,IAAA,8CAEAP,KAAKU,UAAYV,KAAKW,UACxBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,YAAAE,IAAA,2CAAUK,KAAMZ,KAAKW,SAAUE,OAAQb,KAAKE,YACzCF,KAAKU,SAASL,EAAA,YAAAE,IAAA,2CAAUE,KAAK,uB","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as t,h as e,c as i,g as r}from"./p-b7a462e5.js";import{c as n}from"./p-5cdc6210.js";const o=":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#FFFFFF;border-left-color:#FFFFFF;border-right-color:#FFFFFF}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0A8276}.semiconductor.inverted svg{fill:#FFFFFF}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";const s=o;const a=class{constructor(e){t(this,e);this.inverted=false}render(){return e("div",{key:"cfbff2813b981725dae76ed251f6563010d64d80","aria-label":"spinner indicating a loading process",class:this.getClassNames()},e("div",{key:"e6a6ca1b543a3aeb1b02226fdb40e0be12aeba34",class:`${this.variant!=="brand"?"border":""} ${this.inverted?"inverted":""}`}),this.variant==="brand"&&e("div",{key:"f34ec6a5f1c48482e79a4a440d771409ae3cc0e2",class:`semiconductor ${this.inverted?"inverted":""} ${this.getSizeClass()}`},e("svg",{key:"2b09b17e99618ed8464251116d4c256b05c4a0e5",width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"370a105dbf227bb1c19d9fce65b636e7c9b85c4f",id:"spinner/conductor"},e("path",{key:"b9aa2d8a68857c9c013950680af81c231f43cfd6",id:"Vector",d:"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z"})))))}getSizeClass(){return`${this.size}`==="s"?"s":""}getClassNames(){return n("spinner",this.size&&`spinner ${this.getSizeClass()}`)}};a.style=s;const p=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}';const l=p;const c=class{constructor(e){t(this,e);this.ifxInput=i(this,"ifxInput",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.placeholder="Placeholder";this.value="";this.error=false;this.label="";this.icon="";this.caption="";this.size="m";this.required=false;this.optional=false;this.success=false;this.disabled=false;this.showDeleteIcon=false;this.autocomplete="on";this.type="text";this.internalId="text-field"}valueWatcher(t){if(t!==this.inputElement.value){this.inputElement.value=t}}async reset(){this.value="";this.inputElement.value=""}handleDeleteContent(){this.reset();this.ifxInput.emit(this.value)}handleInput(){const t=this.inputElement.value;this.value=t;this.internals.setFormValue(t);this.ifxInput.emit(this.value)}handleTypeProp(){this.internalType=this.type==="text"||this.type==="password"?this.type:"text"}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){this.handleTypeProp()}render(){return e("div",{key:"a7e11de99939dfedbc4048fdaacb3a543a7c199a","aria-label":"a text field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`textInput__container ${this.disabled?"disabled":""}`},e("div",{key:"f06e2fa62b60a9e7b1fc5ad043ec82b0e70a91bd",class:"textInput__top-wrapper"},e("label",{key:"ccb61bfdf7249d091a315ba44e2172f1bbe6a567",htmlFor:this.internalId},e("slot",{key:"935be543d95be08188600ec85e363af902587f58"}),this.optional&&this.required?e("span",{class:"optional-required"},"(optional) *"):this.optional?e("span",{class:"optional"},"(optional)"):this.required?e("span",{class:`required ${this.error?"error":""}`},"*"):null)),e("div",{key:"a810ad0bcdd3b503df1c17e805bec11de84a142f",class:"textInput__bottom-wrapper"},e("div",{key:"80a1ea5f90796c5284018e875aadcbd7f49177eb",class:"input-container"},this.icon&&e("ifx-icon",{key:"f5ee155afa4d624ba7ebcb9308f76fc1071393db",class:"input-icon",icon:this.icon}),e("input",{key:"7d927675d0e33cdc265ac5fe9909ccb2228cb15a",ref:t=>this.inputElement=t,disabled:this.disabled,autocomplete:this.autocomplete,type:this.internalType,id:this.internalId,value:this.value,onInput:()=>this.handleInput(),placeholder:this.placeholder,maxlength:this.maxlength,class:`${this.icon?"icon":""}\n                ${this.error?"error":""} \n              ${this.size==="s"?"input-s":""}\n              ${this.success?"success":""}`}),this.showDeleteIcon&&this.value&&e("ifx-icon",{key:"6214dd96307b46c8fa2b921f5f4f91284006b697",class:"delete-icon",icon:"cremove16",onClick:()=>this.handleDeleteContent()})),this.caption&&!this.error&&e("div",{key:"957a563bc1f8b70347afb0c56f7e886f5c9d66a2",class:`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""`},this.caption),this.error&&e("div",{key:"0cd0a783e3e53c4d5041ce05f508bdfdebefc991",class:"textInput__bottom-wrapper-caption error"},this.caption)))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{value:["valueWatcher"]}}};c.style=l;export{a as ifx_spinner,c as ifx_text_field};
+//# sourceMappingURL=p-d17282e3.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["spinnerCss","IfxSpinnerStyle0","Spinner","constructor","hostRef","this","inverted","render","h","key","class","getClassNames","variant","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames","textFieldCss","IfxTextFieldStyle0","TextField","placeholder","value","error","label","icon","caption","required","optional","success","disabled","showDeleteIcon","autocomplete","type","internalId","valueWatcher","newValue","inputElement","reset","handleDeleteContent","ifxInput","emit","handleInput","query","internals","setFormValue","handleTypeProp","internalType","formResetCallback","setValidity","componentWillLoad","htmlFor","ref","el","onInput","maxlength","onClick"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-block;\n\n}\n\n.spinner {\n  position: relative;\n  width: tokens.$ifxSize500;\n  height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n  width: tokens.$ifxSize300;\n  height: tokens.$ifxSize300;\n}\n\n.border {\n  box-sizing: border-box;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 4px solid transparent;\n  border-top-color: tokens.$ifxColorOcean500;\n  border-left-color: tokens.$ifxColorOcean500;\n  border-right-color: tokens.$ifxColorOcean500;\n  border-top-left-radius: 1px;\n  border-top-right-radius: 1px;\n  border-radius: 50%;\n  animation: spin 2s linear infinite;\n\n  &.inverted {\n    border-top-color: tokens.$ifxColorBaseWhite;\n    border-left-color: tokens.$ifxColorBaseWhite;\n    border-right-color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.semiconductor {\n  width: 100%;\n  height: 100%;\n  animation: spin 2s linear infinite;\n\n  & svg {\n    fill: tokens.$ifxColorOcean500;\n  }\n\n  &.inverted {\n    & svg {\n      fill: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.s {\n    & svg {\n      width: tokens.$ifxSize300;\n      height: tokens.$ifxSize300;\n    }\n  }\n}\n\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}","import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.textInput__container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n  width: 100%;\n  flex: none;\n  order: 0;\n  align-self: stretch;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  &.disabled {\n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering500;\n        background-color: tokens.$ifxColorEngineering200;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          color: tokens.$ifxColorEngineering500;\n        }\n      }\n    }\n  }\n\n  & .textInput__top-wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & label {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      display: flex;\n      align-items: center;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 0;\n      flex-grow: 0;\n\n      & .optional-required {\n        margin-left: 4px;\n      }\n\n      & .optional {\n        margin-left: 4px;\n      }\n\n      & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n  }\n\n  .input-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n  }\n\n\n  & .textInput__bottom-wrapper {\n    flex-grow: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    padding: 0px;\n    gap: 4px;\n    flex: none;\n    order: 1;\n    align-self: stretch;\n    flex-grow: 0;\n\n    & input {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n      gap: tokens.$ifxSpace100;\n      height: tokens.$ifxSize500;\n      background-color: tokens.$ifxColorBaseWhite;\n      color: tokens.$ifxColorBaseBlack;\n      font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n      font-size: tokens.$ifxFontSizeM;\n      line-height: tokens.$ifxLineHeightM;\n      border: 1px solid tokens.$ifxColorEngineering400;\n      border-radius: tokens.$ifxBorderRadius12;\n      flex: none;\n      order: 0;\n      align-self: stretch;\n      flex-grow: 0;\n      text-overflow: ellipsis;\n\n      &.input-s {\n        height: tokens.$ifxSize450;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeS;\n          line-height: tokens.$ifxLineHeightS;\n        }\n\n      }\n\n      &.icon {\n        padding-left: tokens.$ifxSpace500;\n      }\n\n      &.error {\n        border: 1px solid #CD002F;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &.success {\n        border: 1px solid #4CA460;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n\n      &:focus:not(.error, .success) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success) {\n        border: 1px solid tokens.$ifxColorEngineering500;\n      }\n\n      &::placeholder {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeM;\n        line-height: tokens.$ifxLineHeightM;\n        color: #8D8786;\n        flex: none;\n        order: 1;\n        flex-grow: 1;\n      }\n    }\n\n    & .input-icon {\n      // Position the icon within the icon container\n      // Adjust the positioning as needed\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: tokens.$ifxSpace200;\n      /* Adjust this value to control the icon's left offset */\n      transition: .3s;\n      color: tokens.$ifxColorEngineering400;\n    }\n\n    & .textInput__bottom-wrapper-caption {\n      font-style: normal;\n      font-weight: 400;\n      font-size: tokens.$ifxFontSizeXs;\n      line-height: tokens.$ifxLineHeightXs;\n      letter-spacing: 0.2px;\n      color: tokens.$ifxColorBaseBlack;\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      &.error {\n        color: #CD002F;\n\n      }\n\n      &.disabled {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    \n  }\n  .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class TextField {\n  private inputElement: HTMLInputElement;\n  @Element() el;\n  @Prop() placeholder: string = \"Placeholder\"\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() error: boolean = false;\n  @Prop() label: string = \"\";\n  @Prop() icon: string = \"\";\n  @Prop() caption: string = \"\";\n  @Prop() size: string = 'm';\n  @Prop() required: boolean = false;\n  @Prop() optional: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxlength?: number;\n  @Prop() showDeleteIcon: boolean = false;\n  @Prop() autocomplete: string = 'on'\n  @Prop() type: 'text' | 'password' = 'text';\n  @Prop() internalId: string = \"text-field\"\n  @State() internalType: string;\n  @Event() ifxInput: EventEmitter<String>;\n  // @Prop({ reflect: true })\n  // resetOnSubmit: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.value = '';\n    this.inputElement.value = '';\n  }\n\n  handleDeleteContent() {\n    this.reset();\n    this.ifxInput.emit(this.value);\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.internals.setFormValue(query) // update form value\n    this.ifxInput.emit(this.value);\n  }\n\n  handleTypeProp() { \n   this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  componentWillLoad() { \n    this.handleTypeProp()\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n        <div class=\"textInput__top-wrapper\">\n          <label htmlFor={this.internalId}>\n            <slot></slot>\n            {this.optional && this.required ? (\n              <span class=\"optional-required\">(optional) *</span>\n            ) : this.optional ? (\n              <span class=\"optional\">(optional)</span>\n            ) : this.required ? (\n              <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n            ) : null}\n          </label>\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && (\n              <ifx-icon class='input-icon' icon={this.icon} />\n            )}\n            <input\n              ref={(el) => (this.inputElement = el)}\n              disabled={this.disabled}\n              autocomplete={this.autocomplete}\n              type={this.internalType}\n              id={this.internalId}\n              value={this.value}\n              onInput={() => this.handleInput()}\n              placeholder={this.placeholder}\n              maxlength={this.maxlength}\n              class={\n                `${this.icon ? 'icon' : \"\"}\n                ${this.error ? 'error' : \"\"} \n              ${this.size === \"s\" ? \"input-s\" : \"\"}\n              ${this.success ? \"success\" : \"\"}`} />\n\n              { (this.showDeleteIcon && this.value) && (\n                <ifx-icon class=\"delete-icon\" icon=\"cremove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n              )}\n          </div>\n          {this.caption && !this.error &&\n            <div class={`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : \"\"`}>\n              {this.caption}\n            </div>}\n          {this.error &&\n            <div class=\"textInput__bottom-wrapper-caption error\">\n              {this.caption}\n            </div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

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