@infineon/infineon-design-system-stencil 34.5.1--canary.1894.b80986dcee23b53bd4c7cfb7bf6a88f099b4592a.0 → 34.5.2--canary.1896.28ee335d7d855df73698902ddd02bf1664ff7992.0

package/dist/infineon-design-system-stencil/{p-e83be7d9.entry.js → p-59d2355e.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as i,g as n}from"./p-b7a462e5.js";const a=':host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=a;const o=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.dotIndicator=false}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren();this.removeEmptyItem()}componentDidLoad(){this.handleItemGap();this.handleLabelWrapper();if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot");if(e.toLowerCase()==="mobile-menu-top"||e.toLowerCase()==="second__layer"){this.openSubLayerMenu()}if(!this.internalHref&&e.toLowerCase()!=="mobile-menu-top"&&e.toLowerCase()!=="second__layer"){const e=this.getItemMenu();if(this.hasChildNavItems){const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();if(e.type.toUpperCase()==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(e.type.toUpperCase()==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}handleLabelWrapper(){const e=this.el.shadowRoot.querySelector(".label__wrapper");const t=this.getNavBarItem();const i=e.querySelector("slot");if(!i.assignedNodes().length){t.classList.add("removeLabel")}else if(this.showLabel&&t.classList.contains("removeLabel")){t.classList.remove("removeLabel")}}handleItemGap(){const e=this.el.shadowRoot.querySelector(".navbar__item");const t=e.querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");if(this.numberIndicator||this.dotIndicator){this.handleClassList(t,"add","no-gap")}else{this.handleClassList(t,"remove","no-gap")}}removeEmptyItem(){const e=this.el.shadowRoot.host;if(!this.showLabel&&!this.icon){this.handleClassList(e,"add","hidden")}}render(){return i("div",{key:"e2601a0327ccc31f2451fcc2490191eb582a0016",class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"3ec0353eb436ea0adc828f56b508624f525264ec",class:"sub__layer-back-button"},i("div",{key:"39284ea8b7f17a83084f948c7ea3b12c1d2fac2a",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"2d6e46c606579b12ba9680039e2f88c5dc31a4eb",icon:"arrow-left-16"}),i("span",{key:"a5fd3d1d8551b6be567f608568b97ca2c4c5348e"},"Back"))),i("a",{key:"fea66a4b956ec1671a7e9fcf7441a5bf676a200e",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"29e17c7b770251a917a4c84c08fa013693d22a60",class:"inner__content-wrapper"},i("div",{key:"5e35323bc544eeacdf08d985fc59dfccbf5d17f7",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"7572d24b3f914d43f98ff551de9a27d323a2a791",icon:this.icon}),this.icon&&!this.showLabel&&!isNaN(this.numberIndicator)&&i("div",{key:"93a14b1b3ecec23fbed6c57295eceb42bf71f729",class:"number__indicator-wrapper"},i("ifx-indicator",{key:"8d199195005806e77a66610619ea4941999e6b04",variant:"number",number:this.numberIndicator})),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&i("div",{key:"ca4d41d281c7d812ffd79d2ecebf98206509c11e",class:"dot__indicator-wrapper"})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"112b20051b5ffab13d9d0c0bcd66a1828735a5e2",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"0294d7fa95431d7485807ab9825de32cb7cc1c96",icon:"chevron-left-12"})),i("span",{key:"45eb2664782d473678ffdf1ffd243d18bf721d1b",class:"label__wrapper"},i("slot",{key:"c3fdf303fb5eb539c64a6c1f8905f773e184efe8"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?i("div",{class:"number__indicator-wrapper"},i("ifx-indicator",{variant:"number",number:this.numberIndicator})):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?i("ifx-indicator",{variant:"dot"}):"",i("div",{key:"62555991fa617ac0dddaa347086245214da42a68",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"788a12f3719f1c4f43d1532dcca232867b5cbe91",icon:"chevron-down-12"})),i("div",{key:"68d2677b612fb670930c41b5e22c3b7521ecf07a",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"9caf7fcdfc151e631daa735c26fbd0e51ac89a95",icon:"chevron-right-12"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"7f86354e5c3db42d1d2a6ca3227fce444ca8b1e1",class:"navbar-menu"}," ",i("slot",{key:"6dd2300504349618730ccf50c133b97d9d7e6993",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"0035b465e812546856240dea531d4a0e4d443ec0",class:"sub__layer-menu"}," ",i("slot",{key:"b61eeb9d819b6691d1c3cfa99b27b304d612dd0f",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
-//# sourceMappingURL=p-e83be7d9.entry.js.map
+import{r as e,c as t,h as i,g as n}from"./p-b7a462e5.js";const a=':host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const s=a;const o=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.dotIndicator=false}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren();this.removeEmptyItem()}componentDidLoad(){this.handleItemGap();this.handleLabelWrapper();if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot");if(e.toLowerCase()==="mobile-menu-top"||e.toLowerCase()==="second__layer"){this.openSubLayerMenu()}if(!this.internalHref&&e.toLowerCase()!=="mobile-menu-top"&&e.toLowerCase()!=="second__layer"){const e=this.getItemMenu();if(this.hasChildNavItems){const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();if(e.type.toUpperCase()==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(e.type.toUpperCase()==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}handleLabelWrapper(){const e=this.el.shadowRoot.querySelector(".label__wrapper");const t=this.getNavBarItem();const i=e.querySelector("slot");if(!i.assignedNodes().length){t.classList.add("removeLabel")}else if(this.showLabel&&t.classList.contains("removeLabel")){t.classList.remove("removeLabel")}}handleItemGap(){const e=this.el.shadowRoot.querySelector(".navbar__item");const t=e.querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");if(this.numberIndicator||this.dotIndicator){this.handleClassList(t,"add","no-gap")}else{this.handleClassList(t,"remove","no-gap")}}removeEmptyItem(){const e=this.el.shadowRoot.host;if(!this.showLabel&&!this.icon){this.handleClassList(e,"add","hidden")}}render(){return i("div",{key:"e2601a0327ccc31f2451fcc2490191eb582a0016",class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"3ec0353eb436ea0adc828f56b508624f525264ec",class:"sub__layer-back-button"},i("div",{key:"39284ea8b7f17a83084f948c7ea3b12c1d2fac2a",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"2d6e46c606579b12ba9680039e2f88c5dc31a4eb",icon:"arrow-left-16"}),i("span",{key:"a5fd3d1d8551b6be567f608568b97ca2c4c5348e"},"Back"))),i("a",{key:"fea66a4b956ec1671a7e9fcf7441a5bf676a200e",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"29e17c7b770251a917a4c84c08fa013693d22a60",class:"inner__content-wrapper"},i("div",{key:"5e35323bc544eeacdf08d985fc59dfccbf5d17f7",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"7572d24b3f914d43f98ff551de9a27d323a2a791",icon:this.icon}),this.icon&&!this.showLabel&&!isNaN(this.numberIndicator)&&i("div",{key:"93a14b1b3ecec23fbed6c57295eceb42bf71f729",class:"number__indicator-wrapper"},i("ifx-indicator",{key:"8d199195005806e77a66610619ea4941999e6b04",variant:"number",number:this.numberIndicator})),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&i("div",{key:"ca4d41d281c7d812ffd79d2ecebf98206509c11e",class:"dot__indicator-wrapper"})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"112b20051b5ffab13d9d0c0bcd66a1828735a5e2",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"0294d7fa95431d7485807ab9825de32cb7cc1c96",icon:"chevron-left-16"})),i("span",{key:"45eb2664782d473678ffdf1ffd243d18bf721d1b",class:"label__wrapper"},i("slot",{key:"c3fdf303fb5eb539c64a6c1f8905f773e184efe8"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?i("div",{class:"number__indicator-wrapper"},i("ifx-indicator",{variant:"number",number:this.numberIndicator})):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?i("ifx-indicator",{variant:"dot"}):"",i("div",{key:"62555991fa617ac0dddaa347086245214da42a68",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"788a12f3719f1c4f43d1532dcca232867b5cbe91",icon:"chevron-down-16"})),i("div",{key:"68d2677b612fb670930c41b5e22c3b7521ecf07a",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"9caf7fcdfc151e631daa735c26fbd0e51ac89a95",icon:"chevron-right-16"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"7f86354e5c3db42d1d2a6ca3227fce444ca8b1e1",class:"navbar-menu"}," ",i("slot",{key:"6dd2300504349618730ccf50c133b97d9d7e6993",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"0035b465e812546856240dea531d4a0e4d443ec0",class:"sub__layer-menu"}," ",i("slot",{key:"b61eeb9d819b6691d1c3cfa99b27b304d612dd0f",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
+//# sourceMappingURL=p-59d2355e.entry.js.map

package/dist/infineon-design-system-stencil/{p-e83be7d9.entry.js.map → p-59d2355e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["navbarItemCss","IfxNavbarItemStyle0","NavbarItem","constructor","hostRef","this","showLabel","icon","href","target","hideOnMobile","internalHref","isMenuItem","hasChildNavItems","isSidebarMenuItem","dotIndicator","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","hideComponent","style","display","showComponent","toggleChildren","action","arrowIcon","getChevronDownIconWrapper","handleClassList","moveChildComponentsIntoSubLayerMenu","subLayerMenu","subLayerMenuIsOpened","navbarItem","getNavBarItem","subLayerBackButton","getSubLayerBackButton","ifxNavItem","emit","component","navItems","querySelectorAll","i","length","setAttribute","sublayerBackButton","shadowRoot","querySelector","toggleFirstLayerItem","actionOne","actionTwo","secondLayerMenu","getSubLayerMenu","openSubLayerMenu","rightArrowIcon","getRightArrowIcon","slotName","getAttribute","toLowerCase","parent","parentElement","addMenuItemClass","moveChildComponentsBackIntoNavbar","returnToFirstLayer","menuItemRightIconWrapper","componentWillLoad","setHref","checkIfItemIsNested","checkIfItemHasChildren","removeEmptyItem","componentDidLoad","handleItemGap","handleLabelWrapper","getNavbarItems","relocateItemsToFirstlayer","componentDidUpdate","isLayerItemParent","setMenuItemPosition","menuPosition","getItemMenuPosition","itemPosition","type","className","navItem","forEach","item","trim","undefined","tagName","toUpperCase","sidebarItems","setItemSideSpecifications","menuItem","slotValue","menu","slot","getRootNode","host","toggleItemMenu","handleNestedLayerMenu","e","labelWrapper","assignedNodes","add","remove","innerContentWrapper","numberIndicatorWrapper","numberIndicator","hostElement","render","h","key","class","onMouseLeave","onMouseEnter","onClick","isNaN","variant","number","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host(.hidden) {\n  display: none;\n}\n\n.navbar__item {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px 8px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  text-decoration: none;\n  font-weight: 400;\n  font-size: 16px;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.hide { \n    display: none;\n  }\n\n  &.isParent { \n    gap: 8px;\n  }\n\n  & .navItemIconWrapper { \n    transition: .3s;\n  }\n\n  &.open { \n    & .navItemIconWrapper { \n      transform: rotate(-180deg);\n      transition: .3s;\n    }\n  }\n\n  &:hover {\n    color: tokens.$ifxColorOcean500;\n    cursor: pointer;\n\n    & .username__tooltip { \n      display: block;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper { \n      & .initials__wrapper { \n        cursor: pointer;\n        background-color: tokens.$ifxColorOcean600;\n      }\n    }\n  }\n\n  &.remove {\n    display: none;\n  }\n\n  &.removeLabel {\n    & .label__wrapper {\n      display: none;\n    }\n  }\n\n  & .number__indicator-wrapper { \n    position: relative;\n    top: -11px;\n  }\n\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\n    position: relative;\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    & .username__tooltip { \n      display: none;\n      position: absolute;\n      top: 35px;\n      right: 0;\n      text-wrap: nowrap;\n      padding: 1px 5px;\n      font-size: 13px;\n      font-family: \"Source Sans 3\";\n      background-color: black;\n      color: #fff;\n      z-index: 99;\n    }\n\n    &:hover { \n      & .username__tooltip { \n        display: block;\n      }\n    }\n\n    & .initials__wrapper { \n      display: flex;\n      width: 24px;\n      height: 24px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100%;\n      background-color: tokens.$ifxColorOcean500;\n\n      & .initials { \n        color: #FFF;\n        text-align: center;\n        font-family: \"Source Sans 3\";\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 20px; \n\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -khtml-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      \n      }\n    }\n\n    & img { \n      width: 24px; \n      height: 24px;\n      border-radius: 100%;\n    }\n\n    &.removeWrapper {\n      display: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n}\n\n.container { \n  position: relative;\n\n  & .sub__layer-back-button { \n    display: none;\n    &.show { \n      display: flex;\n      justify-content: flex-start;\n\n      & .back__button-wrapper { \n        display: flex;\n        align-items: center;\n        gap: tokens.$ifxSpace100;\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n        color: tokens.$ifxColorOcean500;\n        font-size: 16px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 24px;\n\n        & span, & ifx-icon { \n          &:hover { \n            cursor: pointer;\n          }\n        }\n\n      }\n    }\n  }\n\n  &.hide { \n    display: none;\n  }\n\n  & .inner__content-wrapper { \n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    &.no-gap { \n      gap: 0px;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper {\n      &.no-gap { \n        gap: 0px;\n      }\n    }\n\n    & .number__indicator-wrapper { \n      position: relative;\n      top: -11px;\n    }\n\n  }\n}\n\n.navbar-menu  {\n  position: absolute;\n  display: none;\n  list-style-type: none;\n  visibility: visible;\n  flex-direction: column;\n  width: 224px;\n  min-width: 224px;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.open:not(.itemInMobileMenu) {\n    display: flex;\n  }\n\n  &.itemInMobileMenu { \n    display: none;\n  }\n\n  &.right { \n    left: 100%;\n    top: -40%;\n  }\n\n  &.left { \n    top: -40%;\n    right: 100%;\n  }\n\n  &.rightSideItemMenu { \n    left: initial;\n    right: 0px;\n  }\n}\n\n.navbar__item { \n    &.layer__item-parent { \n      color: tokens.$ifxColorBaseBlack;\n      font-size: 24px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 32px; \n      letter-spacing: -0.24px;\n      cursor: initial;\n\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \n        & ifx-icon { \n          & svg { \n            width: 24px;\n            height: 24px;\n          }\n        }\n      }\n    }\n\n\n  &.sidebarMenuItem { \n    justify-content: space-between;\n    padding: 0;\n  }\n\n\n  &.menuItem {\n    text-decoration: none;\n    color: tokens.$ifxColorBaseBlack;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    gap: 8px;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  \n    &.hide {\n      display: none;\n    }\n  \n    & .label__wrapper {\n      color: tokens.$ifxColorBaseBlack;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n  \n    &:hover {\n      cursor: pointer;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  \n    &:active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n}\n\n.sub__layer-menu { \n  padding: 5px;\n  display: none;\n\n  &.remove__margin { \n    margin: 0;\n    padding: 0;\n  }\n \n  &.open { \n    display: block;\n  }\n}\n\n.navbar__item { \n  &.hide { \n    display: none;\n  }\n}\n\n.menuItemRightIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n.navItemIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-item',\n  styleUrl: 'navbar-item.scss',\n  shadow: true\n})\n\nexport class NavbarItem {\n\n  @Element() el;\n  @Prop() showLabel: boolean = true;\n  @Prop() icon: string = \"\"\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() hideOnMobile: boolean = true;\n  @State() internalHref: string = \"\"\n  @State() isMenuItem: boolean = false;\n  @State() hasChildNavItems: boolean = false;\n  @State() isSidebarMenuItem: boolean = false;\n  @State() itemPosition: string;\n  @Event() ifxNavItem: EventEmitter;\n  @Prop() numberIndicator: number;\n  @Prop() dotIndicator: boolean = false;\n \n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const itemMenu = this.getItemMenu()\n    if(itemMenu) { \n      if(itemMenu.classList.contains('open')) { \n        if (!path.includes(this.el)) {\n          this.closeItemMenu();\n        }\n      }\n    }\n  }\n\n  @Method()\n  async hideComponent() { \n    this.el.style.display = 'none';\n  }\n\n  @Method()\n  async showComponent() { \n    this.el.style.display = '';\n  }\n\n  @Method()\n  async toggleChildren(action) { \n    const itemMenu = this.getItemMenu()\n    const arrowIcon = this.getChevronDownIconWrapper()\n    if(itemMenu) { \n      this.handleClassList(arrowIcon, action, 'hide')\n      this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsIntoSubLayerMenu() { \n    const subLayerMenu = this.getItemMenu()\n    if(subLayerMenu) { \n      const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n      if(subLayerMenuIsOpened) { \n        const navbarItem = this.getNavBarItem()\n        const subLayerBackButton = this.getSubLayerBackButton()\n        this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n        this.handleClassList(subLayerBackButton, 'add', 'show')\n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n\n    const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n    this.isSidebarMenuItem = true;\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'second__layer')\n      navItems[i].moveChildComponentsIntoSubLayerMenu()\n    }\n  }\n\n  getSubLayerBackButton() { \n    const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n    return sublayerBackButton\n  }\n\n  @Method()\n  async toggleFirstLayerItem(actionOne, actionTwo) { \n   const navbarItem = this.getNavBarItem()\n   const secondLayerMenu = this.getSubLayerMenu()\n   const subLayerBackButton = this.getSubLayerBackButton()\n   this.handleClassList(subLayerBackButton, [actionOne], 'show')\n   this.handleClassList(navbarItem, [actionTwo], 'hide')\n   this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n  }\n\n  openSubLayerMenu() { \n    if(this.hasChildNavItems) { \n      const subLayerBackButton = this.getSubLayerBackButton()\n      const rightArrowIcon = this.getRightArrowIcon()\n      const navbarItem = this.getNavBarItem()\n      const subLayerMenu = this.getSubLayerMenu()\n      const slotName = this.el.getAttribute('slot')\n\n      this.handleClassList(subLayerBackButton, 'add', 'show')\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n      this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n      this.handleClassList(subLayerMenu, 'add', 'open')\n    \n      if(slotName.toLowerCase() === 'second__layer') {\n        this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n        this.handleClassList(navbarItem, 'remove', 'menuItem')\n      } else { \n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n  }\n\n  @Method()\n  async addMenuItemClass() { \n    const navbarItem = this.getNavBarItem()\n    this.handleClassList(navbarItem, 'add', 'menuItem')\n    const rightArrowIcon = this.getRightArrowIcon()\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsBackIntoNavbar() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const secondLayerMenu = this.getSubLayerMenu()\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n    this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n    const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n    this.isSidebarMenuItem = false;\n    this.showComponent()\n    this.handleClassList(navbarItem, 'remove', 'hide')\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'first__layer')\n      navItems[i].moveChildComponentsBackIntoNavbar()\n      navItems[i].addMenuItemClass()\n      navItems[i].returnToFirstLayer()\n    }\n  }\n\n  getRightArrowIcon() { \n    const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n    return menuItemRightIconWrapper;\n  }\n\n  getChevronDownIconWrapper() { \n    const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n    return arrowIcon;\n  }\n\n  @Method()\n  async returnToFirstLayer() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const rightArrowIcon = this.getRightArrowIcon()\n    const subLayerMenu = this.getSubLayerMenu()\n    const slotName = this.el.getAttribute('slot')\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(subLayerMenu, 'remove', 'open')\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n\n    if(slotName.toLowerCase() === 'second__layer') {\n      this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n      this.handleClassList(navbarItem, 'add', 'menuItem')\n    } else { \n      this.ifxNavItem.emit({component: this.el, action: 'return'})\n    }\n  }\n\n  componentWillLoad() {\n    this.setHref()\n    this.checkIfItemIsNested()\n    this.checkIfItemHasChildren()\n    this.removeEmptyItem()\n  }\n\n  componentDidLoad() { \n    this.handleItemGap()\n    this.handleLabelWrapper()\n    if(this.hasChildNavItems) { \n      const navItems = this.getNavbarItems();\n      this.relocateItemsToFirstlayer(navItems)\n    }\n  }\n\n  componentDidUpdate() { \n    const navbarItem = this.getNavBarItem()\n    const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n    if(this.isSidebarMenuItem && isLayerItemParent) {\n      const rightArrowIcon = this.getRightArrowIcon()\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n    }\n  }\n \n  @Method()\n  async setMenuItemPosition() { \n    if(this.isMenuItem && this.hasChildNavItems) { \n      const menuPosition = this.getItemMenuPosition()\n      if(menuPosition === 'left') { \n        this.itemPosition = 'left'\n      } else if(menuPosition === 'right') { \n        this.itemPosition = 'right'\n      }\n    }\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getNavbarItems() {\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\n    return navItems;\n  }\n  \n  getNavBarItem() { \n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n    return navItem;\n  }\n\n  getSubLayerMenu() { \n    const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n    return subLayerMenu;\n  }\n\n  relocateItemsToFirstlayer(navItems) { \n     navItems.forEach(item => {\n      item.setAttribute('slot', 'first__layer')\n    })\n  }\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  checkIfItemIsNested() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n    || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n      this.isMenuItem = true;\n      return;\n    } else {\n      this.isMenuItem = false;\n    }\n  }\n\n  checkIfItemHasChildren() { \n    const sidebarItems = this.getNavbarItems();\n    if (sidebarItems.length !== 0) {\n      this.hasChildNavItems = true;\n    } else {\n      this.hasChildNavItems = false;\n    } \n  }\n\n  @Method()\n  async setItemSideSpecifications() {  \n    const menuItem = this.el;\n    const itemMenu = this.getItemMenu()\n    const slotValue = menuItem.getAttribute('slot')\n \n    if(slotValue.toLowerCase().trim() === \"right-item\") { \n      this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n    }\n\n    return true;\n  }\n\n  getItemMenu() { \n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n    return menu;\n  }\n\n  closeItemMenu() { \n    const itemMenu = this.getItemMenu()\n    const menuItem = this.getNavBarItem()\n    if(itemMenu) { \n      this.handleClassList(itemMenu, 'remove', 'open')\n      this.handleClassList(menuItem, 'remove', 'open')\n    }\n  }\n\n  getItemMenuPosition() {\n    let parentElement = this.el;\n    while(parentElement) {\n      if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {\n        return 'left'\n      }\n      parentElement = parentElement.parentElement || parentElement.getRootNode().host;\n    }\n    return 'right'\n  }\n  \n  toggleItemMenu() {\n    const slotName = this.el.getAttribute('slot')\n\n    if(slotName.toLowerCase() === 'mobile-menu-top' || slotName.toLowerCase() === 'second__layer') { \n      this.openSubLayerMenu()\n    }\n\n    if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) {   \n      const itemMenu = this.getItemMenu()\n    \n      if(this.hasChildNavItems) { \n        const menuItem = this.getNavBarItem()\n        this.handleClassList(itemMenu, 'toggle', 'open');\n        this.handleClassList(menuItem, 'toggle', 'open');\n      } \n    }\n  }\n\n  handleNestedLayerMenu(e) { \n    if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n      const itemMenu = this.getItemMenu()\n      const menuPosition = this.getItemMenuPosition()\n      if(e.type.toUpperCase() === 'MOUSEENTER') { \n        this.handleClassList(itemMenu, 'add', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'add', 'left')\n        } else if(menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'add', 'right')\n        }\n      }\n\n      if(e.type.toUpperCase() === 'MOUSELEAVE') { \n        this.handleClassList(itemMenu, 'remove', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'remove', 'left')\n        } else if (menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'remove', 'right')\n        }\n      }\n    }\n  }\n\n  handleLabelWrapper() { \n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');\n    const navItem = this.getNavBarItem();\n    const slot = labelWrapper.querySelector('slot');\n    if (!slot.assignedNodes().length) {\n      navItem.classList.add('removeLabel')\n    } else if(this.showLabel && navItem.classList.contains('removeLabel')) {\n      navItem.classList.remove('removeLabel')\n    }\n  }\n\n  handleItemGap() { \n    const innerContentWrapper = this.el.shadowRoot.querySelector('.navbar__item')\n    const numberIndicatorWrapper = innerContentWrapper.querySelector('.navbar__container-right-content-navigation-item-icon-wrapper');\n    if(this.numberIndicator || this.dotIndicator) { \n      this.handleClassList(numberIndicatorWrapper, 'add', 'no-gap')\n    } else { \n      this.handleClassList(numberIndicatorWrapper, 'remove', 'no-gap')\n    }\n  }\n\n  removeEmptyItem() { \n    const hostElement = this.el.shadowRoot.host;\n    if(!this.showLabel && !this.icon) { \n      this.handleClassList(hostElement, 'add', 'hidden')\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)}  onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n        <div class=\"sub__layer-back-button\">\n          <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n            <ifx-icon icon=\"arrow-left-16\" />\n            <span>Back</span>\n          </div>\n        </div>\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n          <div class=\"inner__content-wrapper\">\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n              {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n              {this.icon && !this.showLabel && !isNaN(this.numberIndicator) && \n              <div class=\"number__indicator-wrapper\">\n                <ifx-indicator variant=\"number\" number={this.numberIndicator}></ifx-indicator>\n              </div>}\n              {this.icon && !this.showLabel && !this.numberIndicator && this.dotIndicator && \n            <div class=\"dot__indicator-wrapper\"></div>}\n            </div>\n\n            {this.itemPosition === 'left' \n            && this.hasChildNavItems \n            && this.isMenuItem && \n            <div class=\"menuItemLeftIconWrapper\">\n                <ifx-icon icon=\"chevron-left-12\" />\n            </div>}\n\n            <span class=\"label__wrapper\">\n              <slot />\n            </span>\n          </div>\n\n          {this.showLabel && this.numberIndicator && !isNaN(this.numberIndicator) ? \n            <div class=\"number__indicator-wrapper\">\n                <ifx-indicator variant=\"number\" number={this.numberIndicator}></ifx-indicator>\n            </div> : \"\"}\n\n            {this.showLabel && !this.numberIndicator && this.dotIndicator ? \n            <ifx-indicator variant=\"dot\" /> : \"\"}\n\n          <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-down-12\" />\n          </div>\n          \n         {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-right-12\" />\n          </div>}\n        </a>\n        \n        {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n        {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n      </div>\n    )\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAgB,uvJACtB,MAAAC,EAAeD,E,MCOFE,EAAU,MANvB,WAAAC,CAAAC,G,iDASUC,KAAAC,UAAqB,KACrBD,KAAAE,KAAe,GACfF,KAAAG,KAAe,GACfH,KAAAI,OAAiB,QACjBJ,KAAAK,aAAwB,KACvBL,KAAAM,aAAuB,GACvBN,KAAAO,WAAsB,MACtBP,KAAAQ,iBAA4B,MAC5BR,KAAAS,kBAA6B,MAI9BT,KAAAU,aAAwB,K,CAGhC,kBAAAC,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,MAAMC,EAAWf,KAAKgB,cACtB,GAAGD,EAAU,CACX,GAAGA,EAASE,UAAUC,SAAS,QAAS,CACtC,IAAKL,EAAKM,SAASnB,KAAKoB,IAAK,CAC3BpB,KAAKqB,e,IAOb,mBAAMC,GACJtB,KAAKoB,GAAGG,MAAMC,QAAU,M,CAI1B,mBAAMC,GACJzB,KAAKoB,GAAGG,MAAMC,QAAU,E,CAI1B,oBAAME,CAAeC,GACnB,MAAMZ,EAAWf,KAAKgB,cACtB,MAAMY,EAAY5B,KAAK6B,4BACvB,GAAGd,EAAU,CACXf,KAAK8B,gBAAgBF,EAAWD,EAAQ,QACxC3B,KAAK8B,gBAAgBf,EAAUY,EAAQ,mB,EAK3C,yCAAMI,GACJ,MAAMC,EAAehC,KAAKgB,cAC1B,GAAGgB,EAAc,CACf,MAAMC,EAAuBjC,KAAK8B,gBAAgBE,EAAc,WAAY,QAC5E,GAAGC,EAAsB,CACvB,MAAMC,EAAalC,KAAKmC,gBACxB,MAAMC,EAAqBpC,KAAKqC,wBAChCrC,KAAK8B,gBAAgBI,EAAY,MAAO,sBACxClC,KAAK8B,gBAAgBM,EAAoB,MAAO,QAChDpC,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIO,OAAQ,kB,EAItD,MAAMc,EAAWzC,KAAKoB,GAAGsB,iBAAiB,yBAC1C1C,KAAKS,kBAAoB,KAEzB,IAAI,IAAIkC,EAAI,EAAGA,EAAIF,EAASG,OAAQD,IAAK,CACvCF,EAASE,GAAGE,aAAa,OAAQ,iBACjCJ,EAASE,GAAGZ,qC,EAIhB,qBAAAM,GACE,MAAMS,EAAqB9C,KAAKoB,GAAG2B,WAAWC,cAAc,2BAC5D,OAAOF,C,CAIT,0BAAMG,CAAqBC,EAAWC,GACrC,MAAMjB,EAAalC,KAAKmC,gBACxB,MAAMiB,EAAkBpD,KAAKqD,kBAC7B,MAAMjB,EAAqBpC,KAAKqC,wBAChCrC,KAAK8B,gBAAgBM,EAAoB,CAACc,GAAY,QACtDlD,KAAK8B,gBAAgBI,EAAY,CAACiB,GAAY,QAC9CnD,KAAK8B,gBAAgBsB,EAAiB,CAACD,GAAY,iB,CAGpD,gBAAAG,GACE,GAAGtD,KAAKQ,iBAAkB,CACxB,MAAM4B,EAAqBpC,KAAKqC,wBAChC,MAAMkB,EAAiBvD,KAAKwD,oBAC5B,MAAMtB,EAAalC,KAAKmC,gBACxB,MAAMH,EAAehC,KAAKqD,kBAC1B,MAAMI,EAAWzD,KAAKoB,GAAGsC,aAAa,QAEtC1D,KAAK8B,gBAAgBM,EAAoB,MAAO,QAChDpC,KAAK8B,gBAAgByB,EAAgB,MAAO,QAC5CvD,KAAK8B,gBAAgBI,EAAY,MAAO,sBACxClC,KAAK8B,gBAAgBE,EAAc,MAAO,QAE1C,GAAGyB,EAASE,gBAAkB,gBAAiB,CAC7C3D,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIwC,OAAQ5D,KAAKoB,GAAGyC,cAAelC,OAAQ,oBACjF3B,KAAK8B,gBAAgBI,EAAY,SAAU,W,KACtC,CACLlC,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIO,OAAQ,kB,GAMxD,sBAAMmC,GACJ,MAAM5B,EAAalC,KAAKmC,gBACxBnC,KAAK8B,gBAAgBI,EAAY,MAAO,YACxC,MAAMqB,EAAiBvD,KAAKwD,oBAC5B,GAAGxD,KAAKQ,iBAAkB,CACxBR,KAAK8B,gBAAgByB,EAAgB,SAAU,O,EAKnD,uCAAMQ,GACJ,MAAM3B,EAAqBpC,KAAKqC,wBAChC,MAAMH,EAAalC,KAAKmC,gBACxB,MAAMiB,EAAkBpD,KAAKqD,kBAE7BrD,KAAK8B,gBAAgBM,EAAoB,SAAU,QACnDpC,KAAK8B,gBAAgBI,EAAY,SAAU,sBAC3ClC,KAAK8B,gBAAgBsB,EAAiB,SAAU,kBAEhDpD,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIO,OAAQ,SAElD,MAAMc,EAAWzC,KAAKoB,GAAGsB,iBAAiB,0BAC1C1C,KAAKS,kBAAoB,MACzBT,KAAKyB,gBACLzB,KAAK8B,gBAAgBI,EAAY,SAAU,QAE3C,IAAI,IAAIS,EAAI,EAAGA,EAAIF,EAASG,OAAQD,IAAK,CACvCF,EAASE,GAAGE,aAAa,OAAQ,gBACjCJ,EAASE,GAAGoB,oCACZtB,EAASE,GAAGmB,mBACZrB,EAASE,GAAGqB,oB,EAIhB,iBAAAR,GACE,MAAMS,EAA2BjE,KAAKoB,GAAG2B,WAAWC,cAAc,6BAClE,OAAOiB,C,CAGT,yBAAApC,GACE,MAAMD,EAAY5B,KAAKoB,GAAG2B,WAAWC,cAAc,uBACnD,OAAOpB,C,CAIT,wBAAMoC,GACJ,MAAM5B,EAAqBpC,KAAKqC,wBAChC,MAAMH,EAAalC,KAAKmC,gBACxB,MAAMoB,EAAiBvD,KAAKwD,oBAC5B,MAAMxB,EAAehC,KAAKqD,kBAC1B,MAAMI,EAAWzD,KAAKoB,GAAGsC,aAAa,QAEtC1D,KAAK8B,gBAAgBM,EAAoB,SAAU,QACnDpC,KAAK8B,gBAAgBI,EAAY,SAAU,sBAC3ClC,KAAK8B,gBAAgBE,EAAc,SAAU,QAC7C,GAAGhC,KAAKQ,iBAAkB,CACxBR,KAAK8B,gBAAgByB,EAAgB,SAAU,O,CAGjD,GAAGE,EAASE,gBAAkB,gBAAiB,CAC7C3D,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIwC,OAAQ5D,KAAKoB,GAAGyC,cAAelC,OAAQ,wBACjF3B,KAAK8B,gBAAgBI,EAAY,MAAO,W,KACnC,CACLlC,KAAKsC,WAAWC,KAAK,CAACC,UAAWxC,KAAKoB,GAAIO,OAAQ,U,EAItD,iBAAAuC,GACElE,KAAKmE,UACLnE,KAAKoE,sBACLpE,KAAKqE,yBACLrE,KAAKsE,iB,CAGP,gBAAAC,GACEvE,KAAKwE,gBACLxE,KAAKyE,qBACL,GAAGzE,KAAKQ,iBAAkB,CACxB,MAAMiC,EAAWzC,KAAK0E,iBACtB1E,KAAK2E,0BAA0BlC,E,EAInC,kBAAAmC,GACE,MAAM1C,EAAalC,KAAKmC,gBACxB,MAAM0C,EAAoB7E,KAAK8B,gBAAgBI,EAAY,WAAY,sBACvE,GAAGlC,KAAKS,mBAAqBoE,EAAmB,CAC9C,MAAMtB,EAAiBvD,KAAKwD,oBAC5BxD,KAAK8B,gBAAgByB,EAAgB,MAAO,O,EAKhD,yBAAMuB,GACJ,GAAG9E,KAAKO,YAAcP,KAAKQ,iBAAkB,CAC3C,MAAMuE,EAAe/E,KAAKgF,sBAC1B,GAAGD,IAAiB,OAAQ,CAC1B/E,KAAKiF,aAAe,M,MACf,GAAGF,IAAiB,QAAS,CAClC/E,KAAKiF,aAAe,O,GAK1B,eAAAnD,CAAgBV,EAAI8D,EAAMC,GACxB/D,EAAGH,UAAUiE,GAAMC,GACnB,GAAID,IAAS,WAAY,CACvB,OAAO9D,EAAGH,UAAUC,SAASiE,E,EAIjC,cAAAT,GACE,MAAMjC,EAAWzC,KAAKoB,GAAGsB,iBAAiB,mBAC1C,OAAOD,C,CAGT,aAAAN,GACE,MAAMiD,EAAUpF,KAAKoB,GAAG2B,WAAWC,cAAc,iBACjD,OAAOoC,C,CAGT,eAAA/B,GACE,MAAMrB,EAAehC,KAAKoB,GAAG2B,WAAWC,cAAc,oBACtD,OAAOhB,C,CAGT,yBAAA2C,CAA0BlC,GACvBA,EAAS4C,SAAQC,IAChBA,EAAKzC,aAAa,OAAQ,eAAe,G,CAI7C,OAAAsB,GACE,GAAInE,KAAKG,KAAKwD,cAAc4B,SAAW,GAAI,CACzCvF,KAAKM,aAAekF,S,MACfxF,KAAKM,aAAeN,KAAKG,I,CAGlC,mBAAAiE,GACE,MAAMP,EAAgB7D,KAAKoB,GAAGyC,cAC9B,GAAIA,EAAc4B,QAAQC,gBAAkB,mBACzC7B,EAAc4B,QAAQC,gBAAkB,qBAAsB,CAC/D1F,KAAKO,WAAa,KAClB,M,KACK,CACLP,KAAKO,WAAa,K,EAItB,sBAAA8D,GACE,MAAMsB,EAAe3F,KAAK0E,iBAC1B,GAAIiB,EAAa/C,SAAW,EAAG,CAC7B5C,KAAKQ,iBAAmB,I,KACnB,CACLR,KAAKQ,iBAAmB,K,EAK5B,+BAAMoF,GACJ,MAAMC,EAAW7F,KAAKoB,GACtB,MAAML,EAAWf,KAAKgB,cACtB,MAAM8E,EAAYD,EAASnC,aAAa,QAExC,GAAGoC,EAAUnC,cAAc4B,SAAW,aAAc,CAClDvF,KAAK8B,gBAAgBf,EAAU,MAAO,oB,CAGxC,OAAO,I,CAGT,WAAAC,GACE,MAAM+E,EAAO/F,KAAKoB,GAAG2B,WAAWC,cAAc,gBAC9C,OAAO+C,C,CAGT,aAAA1E,GACE,MAAMN,EAAWf,KAAKgB,cACtB,MAAM6E,EAAW7F,KAAKmC,gBACtB,GAAGpB,EAAU,CACXf,KAAK8B,gBAAgBf,EAAU,SAAU,QACzCf,KAAK8B,gBAAgB+D,EAAU,SAAU,O,EAI7C,mBAAAb,GACE,IAAInB,EAAgB7D,KAAKoB,GACzB,MAAMyC,EAAe,CACnB,GAAGA,EAAc4B,UAAY,sBAAwB5B,EAAcmC,OAAS,aAAc,CACxF,MAAO,M,CAETnC,EAAgBA,EAAcA,eAAiBA,EAAcoC,cAAcC,I,CAE7E,MAAO,O,CAGT,cAAAC,GACE,MAAM1C,EAAWzD,KAAKoB,GAAGsC,aAAa,QAEtC,GAAGD,EAASE,gBAAkB,mBAAqBF,EAASE,gBAAkB,gBAAiB,CAC7F3D,KAAKsD,kB,CAGP,IAAItD,KAAKM,cAAgBmD,EAASE,gBAAkB,mBAAqBF,EAASE,gBAAkB,gBAAkB,CACpH,MAAM5C,EAAWf,KAAKgB,cAEtB,GAAGhB,KAAKQ,iBAAkB,CACxB,MAAMqF,EAAW7F,KAAKmC,gBACtBnC,KAAK8B,gBAAgBf,EAAU,SAAU,QACzCf,KAAK8B,gBAAgB+D,EAAU,SAAU,O,GAK/C,qBAAAO,CAAsBC,GACpB,GAAGrG,KAAKO,YAAcP,KAAKQ,mBAAqBR,KAAKS,kBAAmB,CACtE,MAAMM,EAAWf,KAAKgB,cACtB,MAAM+D,EAAe/E,KAAKgF,sBAC1B,GAAGqB,EAAEnB,KAAKQ,gBAAkB,aAAc,CACxC1F,KAAK8B,gBAAgBf,EAAU,MAAO,QACtC,GAAGgE,IAAiB,OAAQ,CAC1B/E,KAAK8B,gBAAgBf,EAAU,MAAO,O,MACjC,GAAGgE,IAAiB,QAAS,CAClC/E,KAAK8B,gBAAgBf,EAAU,MAAO,Q,EAI1C,GAAGsF,EAAEnB,KAAKQ,gBAAkB,aAAc,CACxC1F,KAAK8B,gBAAgBf,EAAU,SAAU,QACzC,GAAGgE,IAAiB,OAAQ,CAC1B/E,KAAK8B,gBAAgBf,EAAU,SAAU,O,MACpC,GAAIgE,IAAiB,QAAS,CACnC/E,KAAK8B,gBAAgBf,EAAU,SAAU,Q,IAMjD,kBAAA0D,GACE,MAAM6B,EAAetG,KAAKoB,GAAG2B,WAAWC,cAAc,mBACtD,MAAMoC,EAAUpF,KAAKmC,gBACrB,MAAM6D,EAAOM,EAAatD,cAAc,QACxC,IAAKgD,EAAKO,gBAAgB3D,OAAQ,CAChCwC,EAAQnE,UAAUuF,IAAI,c,MACjB,GAAGxG,KAAKC,WAAamF,EAAQnE,UAAUC,SAAS,eAAgB,CACrEkE,EAAQnE,UAAUwF,OAAO,c,EAI7B,aAAAjC,GACE,MAAMkC,EAAsB1G,KAAKoB,GAAG2B,WAAWC,cAAc,iBAC7D,MAAM2D,EAAyBD,EAAoB1D,cAAc,iEACjE,GAAGhD,KAAK4G,iBAAmB5G,KAAKU,aAAc,CAC5CV,KAAK8B,gBAAgB6E,EAAwB,MAAO,S,KAC/C,CACL3G,KAAK8B,gBAAgB6E,EAAwB,SAAU,S,EAI3D,eAAArC,GACE,MAAMuC,EAAc7G,KAAKoB,GAAG2B,WAAWmD,KACvC,IAAIlG,KAAKC,YAAcD,KAAKE,KAAM,CAChCF,KAAK8B,gBAAgB+E,EAAa,MAAO,S,EAI7C,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YAAYC,aAAcb,GAAKrG,KAAKoG,sBAAsBC,GAAKc,aAAcd,GAAKrG,KAAKoG,sBAAsBC,IACtHU,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBAAuBG,QAAS,IAAMpH,KAAKgE,sBACpD+C,EAAA,YAAAC,IAAA,2CAAU9G,KAAK,kBACf6G,EAAA,QAAAC,IAAA,sDAGJD,EAAA,KAAAC,IAAA,2CAAG7G,KAAMH,KAAKM,aAAcF,OAAQJ,KAAKI,OAAQgH,QAAS,IAAMpH,KAAKmG,iBAAkBc,MAAU,gBAAgBjH,KAAKS,kBAAoB,kBAAoB,OAAOT,KAAKC,UAAY,cAAgB,MAAMD,KAAKO,WAAa,WAAa,MAAMP,KAAKQ,iBAAmB,WAAa,MACpRuG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0BACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAO,iEAAiEjH,KAAKE,KAAO,gBAAkB,MACxGF,KAAKE,MAAQ6G,EAAA,YAAAC,IAAA,2CAAU9G,KAAMF,KAAKE,OAClCF,KAAKE,OAASF,KAAKC,YAAcoH,MAAMrH,KAAK4G,kBAC7CG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,6BACTF,EAAA,iBAAAC,IAAA,2CAAeM,QAAQ,SAASC,OAAQvH,KAAK4G,mBAE9C5G,KAAKE,OAASF,KAAKC,YAAcD,KAAK4G,iBAAmB5G,KAAKU,cACjEqG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BAGVjH,KAAKiF,eAAiB,QACpBjF,KAAKQ,kBACLR,KAAKO,YACRwG,EAAA,OAAAC,IAAA,2CAAKC,MAAM,2BACPF,EAAA,YAAAC,IAAA,2CAAU9G,KAAK,qBAGnB6G,EAAA,QAAAC,IAAA,2CAAMC,MAAM,kBACVF,EAAA,QAAAC,IAAA,+CAIHhH,KAAKC,WAAaD,KAAK4G,kBAAoBS,MAAMrH,KAAK4G,iBACrDG,EAAA,OAAKE,MAAM,6BACPF,EAAA,iBAAeO,QAAQ,SAASC,OAAQvH,KAAK4G,mBACxC,GAER5G,KAAKC,YAAcD,KAAK4G,iBAAmB5G,KAAKU,aACjDqG,EAAA,iBAAeO,QAAQ,QAAW,GAEpCP,EAAA,OAAAC,IAAA,2CAAKC,MAAO,sBAAsBjH,KAAKQ,mBAAqBR,KAAKO,aAAeP,KAAKS,kBAAoB,GAAK,UAC5GsG,EAAA,YAAAC,IAAA,2CAAU9G,KAAK,qBAGjB6G,EAAA,OAAAC,IAAA,2CAAKC,MAAO,4BAA8BjH,KAAKiF,eAAiB,SAAWjF,KAAKQ,kBAAoBR,KAAKO,YAAgBP,KAAKS,mBAAqBT,KAAKQ,iBAAqB,GAAK,UAChLuG,EAAA,YAAAC,IAAA,2CAAU9G,KAAK,uBAIlBF,KAAKQ,mBAAqBR,KAAKS,mBAAqBsG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,eAAa,IAAEF,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,iBAAiB,KACzGxH,KAAKS,mBAAqBsG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,mBAAiB,IAAEF,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,kBAAkB,K","ignoreList":[]}
+{"version":3,"names":["navbarItemCss","IfxNavbarItemStyle0","NavbarItem","constructor","hostRef","this","showLabel","icon","href","target","hideOnMobile","internalHref","isMenuItem","hasChildNavItems","isSidebarMenuItem","dotIndicator","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","hideComponent","style","display","showComponent","toggleChildren","action","arrowIcon","getChevronDownIconWrapper","handleClassList","moveChildComponentsIntoSubLayerMenu","subLayerMenu","subLayerMenuIsOpened","navbarItem","getNavBarItem","subLayerBackButton","getSubLayerBackButton","ifxNavItem","emit","component","navItems","querySelectorAll","i","length","setAttribute","sublayerBackButton","shadowRoot","querySelector","toggleFirstLayerItem","actionOne","actionTwo","secondLayerMenu","getSubLayerMenu","openSubLayerMenu","rightArrowIcon","getRightArrowIcon","slotName","getAttribute","toLowerCase","parent","parentElement","addMenuItemClass","moveChildComponentsBackIntoNavbar","returnToFirstLayer","menuItemRightIconWrapper","componentWillLoad","setHref","checkIfItemIsNested","checkIfItemHasChildren","removeEmptyItem","componentDidLoad","handleItemGap","handleLabelWrapper","getNavbarItems","relocateItemsToFirstlayer","componentDidUpdate","isLayerItemParent","setMenuItemPosition","menuPosition","getItemMenuPosition","itemPosition","type","className","navItem","forEach","item","trim","undefined","tagName","toUpperCase","sidebarItems","setItemSideSpecifications","menuItem","slotValue","menu","slot","getRootNode","host","toggleItemMenu","handleNestedLayerMenu","e","labelWrapper","assignedNodes","add","remove","innerContentWrapper","numberIndicatorWrapper","numberIndicator","hostElement","render","h","key","class","onMouseLeave","onMouseEnter","onClick","isNaN","variant","number","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host(.hidden) {\n  display: none;\n}\n\n.navbar__item {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px 8px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  text-decoration: none;\n  font-weight: 400;\n  font-size: 16px;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.hide { \n    display: none;\n  }\n\n  &.isParent { \n    gap: 8px;\n  }\n\n  & .navItemIconWrapper { \n    transition: .3s;\n  }\n\n  &.open { \n    & .navItemIconWrapper { \n      transform: rotate(-180deg);\n      transition: .3s;\n    }\n  }\n\n  &:hover {\n    color: tokens.$ifxColorOcean500;\n    cursor: pointer;\n\n    & .username__tooltip { \n      display: block;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper { \n      & .initials__wrapper { \n        cursor: pointer;\n        background-color: tokens.$ifxColorOcean600;\n      }\n    }\n  }\n\n  &.remove {\n    display: none;\n  }\n\n  &.removeLabel {\n    & .label__wrapper {\n      display: none;\n    }\n  }\n\n  & .number__indicator-wrapper { \n    position: relative;\n    top: -11px;\n  }\n\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\n    position: relative;\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    & .username__tooltip { \n      display: none;\n      position: absolute;\n      top: 35px;\n      right: 0;\n      text-wrap: nowrap;\n      padding: 1px 5px;\n      font-size: 13px;\n      font-family: \"Source Sans 3\";\n      background-color: black;\n      color: #fff;\n      z-index: 99;\n    }\n\n    &:hover { \n      & .username__tooltip { \n        display: block;\n      }\n    }\n\n    & .initials__wrapper { \n      display: flex;\n      width: 24px;\n      height: 24px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100%;\n      background-color: tokens.$ifxColorOcean500;\n\n      & .initials { \n        color: #FFF;\n        text-align: center;\n        font-family: \"Source Sans 3\";\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 20px; \n\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -khtml-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      \n      }\n    }\n\n    & img { \n      width: 24px; \n      height: 24px;\n      border-radius: 100%;\n    }\n\n    &.removeWrapper {\n      display: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n}\n\n.container { \n  position: relative;\n\n  & .sub__layer-back-button { \n    display: none;\n    &.show { \n      display: flex;\n      justify-content: flex-start;\n\n      & .back__button-wrapper { \n        display: flex;\n        align-items: center;\n        gap: tokens.$ifxSpace100;\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n        color: tokens.$ifxColorOcean500;\n        font-size: 16px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 24px;\n\n        & span, & ifx-icon { \n          &:hover { \n            cursor: pointer;\n          }\n        }\n\n      }\n    }\n  }\n\n  &.hide { \n    display: none;\n  }\n\n  & .inner__content-wrapper { \n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    &.no-gap { \n      gap: 0px;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper {\n      &.no-gap { \n        gap: 0px;\n      }\n    }\n\n    & .number__indicator-wrapper { \n      position: relative;\n      top: -11px;\n    }\n\n  }\n}\n\n.navbar-menu  {\n  position: absolute;\n  display: none;\n  list-style-type: none;\n  visibility: visible;\n  flex-direction: column;\n  width: 224px;\n  min-width: 224px;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.open:not(.itemInMobileMenu) {\n    display: flex;\n  }\n\n  &.itemInMobileMenu { \n    display: none;\n  }\n\n  &.right { \n    left: 100%;\n    top: -40%;\n  }\n\n  &.left { \n    top: -40%;\n    right: 100%;\n  }\n\n  &.rightSideItemMenu { \n    left: initial;\n    right: 0px;\n  }\n}\n\n.navbar__item { \n    &.layer__item-parent { \n      color: tokens.$ifxColorBaseBlack;\n      font-size: 24px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 32px; \n      letter-spacing: -0.24px;\n      cursor: initial;\n\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \n        & ifx-icon { \n          & svg { \n            width: 24px;\n            height: 24px;\n          }\n        }\n      }\n    }\n\n\n  &.sidebarMenuItem { \n    justify-content: space-between;\n    padding: 0;\n  }\n\n\n  &.menuItem {\n    text-decoration: none;\n    color: tokens.$ifxColorBaseBlack;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    gap: 8px;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  \n    &.hide {\n      display: none;\n    }\n  \n    & .label__wrapper {\n      color: tokens.$ifxColorBaseBlack;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n  \n    &:hover {\n      cursor: pointer;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  \n    &:active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n}\n\n.sub__layer-menu { \n  padding: 5px;\n  display: none;\n\n  &.remove__margin { \n    margin: 0;\n    padding: 0;\n  }\n \n  &.open { \n    display: block;\n  }\n}\n\n.navbar__item { \n  &.hide { \n    display: none;\n  }\n}\n\n.menuItemRightIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n.navItemIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-item',\n  styleUrl: 'navbar-item.scss',\n  shadow: true\n})\n\nexport class NavbarItem {\n\n  @Element() el;\n  @Prop() showLabel: boolean = true;\n  @Prop() icon: string = \"\"\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() hideOnMobile: boolean = true;\n  @State() internalHref: string = \"\"\n  @State() isMenuItem: boolean = false;\n  @State() hasChildNavItems: boolean = false;\n  @State() isSidebarMenuItem: boolean = false;\n  @State() itemPosition: string;\n  @Event() ifxNavItem: EventEmitter;\n  @Prop() numberIndicator: number;\n  @Prop() dotIndicator: boolean = false;\n \n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const itemMenu = this.getItemMenu()\n    if(itemMenu) { \n      if(itemMenu.classList.contains('open')) { \n        if (!path.includes(this.el)) {\n          this.closeItemMenu();\n        }\n      }\n    }\n  }\n\n  @Method()\n  async hideComponent() { \n    this.el.style.display = 'none';\n  }\n\n  @Method()\n  async showComponent() { \n    this.el.style.display = '';\n  }\n\n  @Method()\n  async toggleChildren(action) { \n    const itemMenu = this.getItemMenu()\n    const arrowIcon = this.getChevronDownIconWrapper()\n    if(itemMenu) { \n      this.handleClassList(arrowIcon, action, 'hide')\n      this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsIntoSubLayerMenu() { \n    const subLayerMenu = this.getItemMenu()\n    if(subLayerMenu) { \n      const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n      if(subLayerMenuIsOpened) { \n        const navbarItem = this.getNavBarItem()\n        const subLayerBackButton = this.getSubLayerBackButton()\n        this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n        this.handleClassList(subLayerBackButton, 'add', 'show')\n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n\n    const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n    this.isSidebarMenuItem = true;\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'second__layer')\n      navItems[i].moveChildComponentsIntoSubLayerMenu()\n    }\n  }\n\n  getSubLayerBackButton() { \n    const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n    return sublayerBackButton\n  }\n\n  @Method()\n  async toggleFirstLayerItem(actionOne, actionTwo) { \n   const navbarItem = this.getNavBarItem()\n   const secondLayerMenu = this.getSubLayerMenu()\n   const subLayerBackButton = this.getSubLayerBackButton()\n   this.handleClassList(subLayerBackButton, [actionOne], 'show')\n   this.handleClassList(navbarItem, [actionTwo], 'hide')\n   this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n  }\n\n  openSubLayerMenu() { \n    if(this.hasChildNavItems) { \n      const subLayerBackButton = this.getSubLayerBackButton()\n      const rightArrowIcon = this.getRightArrowIcon()\n      const navbarItem = this.getNavBarItem()\n      const subLayerMenu = this.getSubLayerMenu()\n      const slotName = this.el.getAttribute('slot')\n\n      this.handleClassList(subLayerBackButton, 'add', 'show')\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n      this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n      this.handleClassList(subLayerMenu, 'add', 'open')\n    \n      if(slotName.toLowerCase() === 'second__layer') {\n        this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n        this.handleClassList(navbarItem, 'remove', 'menuItem')\n      } else { \n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n  }\n\n  @Method()\n  async addMenuItemClass() { \n    const navbarItem = this.getNavBarItem()\n    this.handleClassList(navbarItem, 'add', 'menuItem')\n    const rightArrowIcon = this.getRightArrowIcon()\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsBackIntoNavbar() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const secondLayerMenu = this.getSubLayerMenu()\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n    this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n    const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n    this.isSidebarMenuItem = false;\n    this.showComponent()\n    this.handleClassList(navbarItem, 'remove', 'hide')\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'first__layer')\n      navItems[i].moveChildComponentsBackIntoNavbar()\n      navItems[i].addMenuItemClass()\n      navItems[i].returnToFirstLayer()\n    }\n  }\n\n  getRightArrowIcon() { \n    const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n    return menuItemRightIconWrapper;\n  }\n\n  getChevronDownIconWrapper() { \n    const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n    return arrowIcon;\n  }\n\n  @Method()\n  async returnToFirstLayer() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const rightArrowIcon = this.getRightArrowIcon()\n    const subLayerMenu = this.getSubLayerMenu()\n    const slotName = this.el.getAttribute('slot')\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(subLayerMenu, 'remove', 'open')\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n\n    if(slotName.toLowerCase() === 'second__layer') {\n      this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n      this.handleClassList(navbarItem, 'add', 'menuItem')\n    } else { \n      this.ifxNavItem.emit({component: this.el, action: 'return'})\n    }\n  }\n\n  componentWillLoad() {\n    this.setHref()\n    this.checkIfItemIsNested()\n    this.checkIfItemHasChildren()\n    this.removeEmptyItem()\n  }\n\n  componentDidLoad() { \n    this.handleItemGap()\n    this.handleLabelWrapper()\n    if(this.hasChildNavItems) { \n      const navItems = this.getNavbarItems();\n      this.relocateItemsToFirstlayer(navItems)\n    }\n  }\n\n  componentDidUpdate() { \n    const navbarItem = this.getNavBarItem()\n    const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n    if(this.isSidebarMenuItem && isLayerItemParent) {\n      const rightArrowIcon = this.getRightArrowIcon()\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n    }\n  }\n \n  @Method()\n  async setMenuItemPosition() { \n    if(this.isMenuItem && this.hasChildNavItems) { \n      const menuPosition = this.getItemMenuPosition()\n      if(menuPosition === 'left') { \n        this.itemPosition = 'left'\n      } else if(menuPosition === 'right') { \n        this.itemPosition = 'right'\n      }\n    }\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getNavbarItems() {\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\n    return navItems;\n  }\n  \n  getNavBarItem() { \n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n    return navItem;\n  }\n\n  getSubLayerMenu() { \n    const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n    return subLayerMenu;\n  }\n\n  relocateItemsToFirstlayer(navItems) { \n     navItems.forEach(item => {\n      item.setAttribute('slot', 'first__layer')\n    })\n  }\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  checkIfItemIsNested() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n    || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n      this.isMenuItem = true;\n      return;\n    } else {\n      this.isMenuItem = false;\n    }\n  }\n\n  checkIfItemHasChildren() { \n    const sidebarItems = this.getNavbarItems();\n    if (sidebarItems.length !== 0) {\n      this.hasChildNavItems = true;\n    } else {\n      this.hasChildNavItems = false;\n    } \n  }\n\n  @Method()\n  async setItemSideSpecifications() {  \n    const menuItem = this.el;\n    const itemMenu = this.getItemMenu()\n    const slotValue = menuItem.getAttribute('slot')\n \n    if(slotValue.toLowerCase().trim() === \"right-item\") { \n      this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n    }\n\n    return true;\n  }\n\n  getItemMenu() { \n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n    return menu;\n  }\n\n  closeItemMenu() { \n    const itemMenu = this.getItemMenu()\n    const menuItem = this.getNavBarItem()\n    if(itemMenu) { \n      this.handleClassList(itemMenu, 'remove', 'open')\n      this.handleClassList(menuItem, 'remove', 'open')\n    }\n  }\n\n  getItemMenuPosition() {\n    let parentElement = this.el;\n    while(parentElement) {\n      if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {\n        return 'left'\n      }\n      parentElement = parentElement.parentElement || parentElement.getRootNode().host;\n    }\n    return 'right'\n  }\n  \n  toggleItemMenu() {\n    const slotName = this.el.getAttribute('slot')\n\n    if(slotName.toLowerCase() === 'mobile-menu-top' || slotName.toLowerCase() === 'second__layer') { \n      this.openSubLayerMenu()\n    }\n\n    if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) {   \n      const itemMenu = this.getItemMenu()\n    \n      if(this.hasChildNavItems) { \n        const menuItem = this.getNavBarItem()\n        this.handleClassList(itemMenu, 'toggle', 'open');\n        this.handleClassList(menuItem, 'toggle', 'open');\n      } \n    }\n  }\n\n  handleNestedLayerMenu(e) { \n    if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n      const itemMenu = this.getItemMenu()\n      const menuPosition = this.getItemMenuPosition()\n      if(e.type.toUpperCase() === 'MOUSEENTER') { \n        this.handleClassList(itemMenu, 'add', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'add', 'left')\n        } else if(menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'add', 'right')\n        }\n      }\n\n      if(e.type.toUpperCase() === 'MOUSELEAVE') { \n        this.handleClassList(itemMenu, 'remove', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'remove', 'left')\n        } else if (menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'remove', 'right')\n        }\n      }\n    }\n  }\n\n  handleLabelWrapper() { \n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');\n    const navItem = this.getNavBarItem();\n    const slot = labelWrapper.querySelector('slot');\n    if (!slot.assignedNodes().length) {\n      navItem.classList.add('removeLabel')\n    } else if(this.showLabel && navItem.classList.contains('removeLabel')) {\n      navItem.classList.remove('removeLabel')\n    }\n  }\n\n  handleItemGap() { \n    const innerContentWrapper = this.el.shadowRoot.querySelector('.navbar__item')\n    const numberIndicatorWrapper = innerContentWrapper.querySelector('.navbar__container-right-content-navigation-item-icon-wrapper');\n    if(this.numberIndicator || this.dotIndicator) { \n      this.handleClassList(numberIndicatorWrapper, 'add', 'no-gap')\n    } else { \n      this.handleClassList(numberIndicatorWrapper, 'remove', 'no-gap')\n    }\n  }\n\n  removeEmptyItem() { \n    const hostElement = this.el.shadowRoot.host;\n    if(!this.showLabel && !this.icon) { \n      this.handleClassList(hostElement, 'add', 'hidden')\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)}  onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n        <div class=\"sub__layer-back-button\">\n          <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n            <ifx-icon icon=\"arrow-left-16\" />\n            <span>Back</span>\n          </div>\n        </div>\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n          <div class=\"inner__content-wrapper\">\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n              {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n              {this.icon && !this.showLabel && !isNaN(this.numberIndicator) && \n              <div class=\"number__indicator-wrapper\">\n                <ifx-indicator variant=\"number\" number={this.numberIndicator}></ifx-indicator>\n              </div>}\n              {this.icon && !this.showLabel && !this.numberIndicator && this.dotIndicator && \n            <div class=\"dot__indicator-wrapper\"></div>}\n            </div>\n\n            {this.itemPosition === 'left' \n            && this.hasChildNavItems \n            && this.isMenuItem && \n            <div class=\"menuItemLeftIconWrapper\">\n                <ifx-icon icon=\"chevron-left-16\" />\n            </div>}\n\n            <span class=\"label__wrapper\">\n              <slot />\n            </span>\n          </div>\n\n          {this.showLabel && this.numberIndicator && !isNaN(this.numberIndicator) ? \n            <div class=\"number__indicator-wrapper\">\n                <ifx-indicator variant=\"number\" number={this.numberIndicator}></ifx-indicator>\n            </div> : \"\"}\n\n            {this.showLabel && !this.numberIndicator && this.dotIndicator ? \n            <ifx-indicator variant=\"dot\" /> : \"\"}\n\n          <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-down-16\" />\n          </div>\n          \n         {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-right-16\" />\n          </div>}\n        </a>\n        \n        {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n        {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n      </div>\n    )\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-1b7e4296.entry.js → p-7983cccf.entry.js}

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

package/dist/infineon-design-system-stencil/{p-1b7e4296.entry.js.map → p-7983cccf.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["accordionCss","IfxAccordionStyle0","Accordion","constructor","hostRef","this","autoCollapse","onItemOpen","event","items","Array","from","el","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","IfxAccordionItemStyle0","IfxAccordionItem","AriaLevel","internalOpen","componentWillLoad","componentDidLoad","openAccordionItem","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","contentEl","style","maxHeight","scrollHeight","handleSlotChange","e","slotElement","nodes","assignedNodes","length","forEach","node","observer","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","role","onClick","tabindex","ref","String","icon","id","caption","onSlotchange"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if(!path.includes(this.titleEl)) { \n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["accordionCss","IfxAccordionStyle0","Accordion","constructor","hostRef","this","autoCollapse","onItemOpen","event","items","Array","from","el","querySelectorAll","item","itemElement","target","open","render","h","key","class","accordionItemCss","IfxAccordionItemStyle0","IfxAccordionItem","AriaLevel","internalOpen","componentWillLoad","componentDidLoad","openAccordionItem","componentDidUpdate","openChanged","newValue","toggleOpen","ifxOpen","emit","isOpen","ifxClose","isClosed","contentEl","style","maxHeight","scrollHeight","handleSlotChange","e","slotElement","nodes","assignedNodes","length","forEach","node","observer","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleKeydown","ev","path","composedPath","includes","titleEl","preventDefault","role","onClick","tabindex","ref","String","icon","id","caption","onSlotchange"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace300;\n  // white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  align-self: stretch;\n\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if(!path.includes(this.titleEl)) { \n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0' ref={(el) => (this.titleEl = el as HTMLElement)}>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-16\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}