@infineon/infineon-design-system-stencil 40.7.0 → 40.8.0

package/dist/cjs/ifx-navbar-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CDIAJY4X.js');
 
-const navbarItemCss = () => `:host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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 navbarItemCss = () => `:host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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}.navbar__item:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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 NavbarItem = class {
     constructor(hostRef) {

package/dist/cjs/ifx-navbar-profile.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CDIAJY4X.js');
 
-const navbarItemCss = () => `:host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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 navbarItemCss = () => `:host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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}.navbar__item:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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 NavbarProfile = class {
     constructor(hostRef) {
@@ -154,10 +154,16 @@ const NavbarProfile = class {
             }
         }
     }
+    handleProfileMenuKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.toggleItemMenu();
+        }
+    };
     render() {
-        return (index.h("div", { key: '619d6c358dda79bd7e2c56127580ff802c3d0977', class: "container" }, index.h("a", { key: 'f685e59b4aea2f7e9900883c417e5ea9aaa20e12', href: this.internalHref, target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${!this.showLabel ? "removeLabel" : ""} ${this.hasChildNavItems ? "isParent" : ""}` }, index.h("div", { key: 'c1fd9c1513835af1859973447d4ed9b87c6b7f52', class: "inner__content-wrapper" }, index.h("div", { key: 'c2ec58d87c0790c2b4e73cf1bfb3f30fdecdda33', class: `navbar__container-right-content-navigation-item-icon-wrapper` }, this.userName.trim() !== "" && (index.h("div", { key: '482fede1b40b8142708675847312bf44f2a27387', class: "username__tooltip" }, this.userName)), this.internalImageUrl.type !== "initials" && (index.h("img", { key: '505906aa5b41ccb914ad3197b7bd8cd163b90a88', src: this.internalImageUrl.type === "url"
+        return (index.h("div", { key: '65c194d8c0ee3cb91e82c2ceacc4b1aa005f2e58', class: "container" }, index.h("a", { key: '81e7ebc98ae005f2a4956fb6dfe4de9c8c5b4482', href: this.internalHref, target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${!this.showLabel ? "removeLabel" : ""} ${this.hasChildNavItems ? "isParent" : ""}`, role: "button", tabindex: "0", "aria-label": "Open profile menu", onKeyDown: this.handleProfileMenuKeyDown }, index.h("div", { key: 'b894f65f4f59c8f147178c0184430575967695cf', class: "inner__content-wrapper" }, index.h("div", { key: '8b64aea92528437223554adeb7ce67a3c514c6fb', class: `navbar__container-right-content-navigation-item-icon-wrapper` }, this.userName.trim() !== "" && (index.h("div", { key: 'dec359be57f69d2fab07fa02509331e68ce02c7b', class: "username__tooltip" }, this.userName)), this.internalImageUrl.type !== "initials" && (index.h("img", { key: '3a591645bfca9d9fa1994c72e6e60b12a29dea88', src: this.internalImageUrl.type === "url"
                 ? this.internalImageUrl.value
-                : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`, alt: this.alt })), this.internalImageUrl.type === "initials" && (index.h("div", { key: 'ee6b2de7b68aff96938b717fd1d6092a742650f2', class: "initials__wrapper" }, index.h("span", { key: '5005ce862c9835ada188f2d80323a1a37f996e1a', class: "initials" }, this.internalImageUrl.value)))), index.h("span", { key: 'a8fd9da78eaaeee28f87810259c508ea30fa7370', class: "label__wrapper" }, index.h("slot", { key: '97fd88a6f1f423f7faed3e6418d327ec4014713a', onSlotchange: () => this.setProfileGap() })))), this.hasChildNavItems && (index.h("ul", { key: 'b9ae3aadb463eca8038cbb7b2e8ae2bdf3230c37', class: "navbar-menu rightSideItemMenu" }, " ", index.h("slot", { key: 'b442877b367ccfb89e8cb21cdd2f7157a1cd609a', name: "first__layer" }), " "))));
+                : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`, alt: this.alt })), this.internalImageUrl.type === "initials" && (index.h("div", { key: 'c8eb6e657158f408f35690b34658ff25f1feae33', class: "initials__wrapper" }, index.h("span", { key: '3abd9694bd2014e506721888f263b72b38578220', class: "initials" }, this.internalImageUrl.value)))), index.h("span", { key: 'c0e600372f2614bcea7fabb7214ba1b960c3d5f3', class: "label__wrapper" }, index.h("slot", { key: '3889b92a57e1b98002051ec6ad0c6fa3e214b855', onSlotchange: () => this.setProfileGap() })))), this.hasChildNavItems && (index.h("ul", { key: 'f967d9949de245049cb35a20393d7fe9f89b2b88', class: "navbar-menu rightSideItemMenu" }, " ", index.h("slot", { key: 'cefa3e1be59c4725d369ac66dea94b6fe0ea69a5', name: "first__layer" }), " "))));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/cjs/ifx-search-bar.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-CDIAJY4X.js');
 var domUtils = require('./dom-utils-BdvOgC2b.js');
 var tracking = require('./tracking-BPjaTlNR.js');
 
-const searchBarCss = () => `:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#ffffff;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0a8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}`;
+const searchBarCss = () => `:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#ffffff;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0a8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar .search-bar__icon-wrapper:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}`;
 
 const SearchBar = class {
     constructor(hostRef) {
@@ -101,9 +101,15 @@ const SearchBar = class {
     handleInput(event) {
         this.value = event.detail;
     }
+    handleOpenSearchKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.handleCloseButton();
+        }
+    };
     render() {
-        return (index.h("div", { key: '9d91f8c19dd67660c653ec7965c9725315aa5d1f', role: "search", "aria-label": "a search field for user input", "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? "open" : "closed"}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
-            index.h("a", { "aria-label": "Close button", href: "javascript:void(0)", onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
+        return (index.h("div", { key: 'cf189b6c8705daa73abff5b4de765b39977673a4', role: "search", "aria-label": "a search field for user input", "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? "open" : "closed"}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
+            index.h("a", { "aria-label": "Close button", href: "javascript:void(0)", onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton, role: "button", tabindex: "0", "aria-label": "Open search bar", onKeyDown: this.handleOpenSearchKeyDown }, index.h("ifx-icon", { icon: "search-16" })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/collection/components/navigation/navbar/navbar-item.css

@@ -115,6 +115,10 @@
 .navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide {
   display: none;
 }
+.navbar__item:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
 
 .container {
   position: relative;

package/dist/collection/components/navigation/navbar/navbar-profile.js

@@ -146,10 +146,16 @@ export class NavbarProfile {
             }
         }
     }
+    handleProfileMenuKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.toggleItemMenu();
+        }
+    };
     render() {
-        return (h("div", { key: '619d6c358dda79bd7e2c56127580ff802c3d0977', class: "container" }, h("a", { key: 'f685e59b4aea2f7e9900883c417e5ea9aaa20e12', href: this.internalHref, target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${!this.showLabel ? "removeLabel" : ""} ${this.hasChildNavItems ? "isParent" : ""}` }, h("div", { key: 'c1fd9c1513835af1859973447d4ed9b87c6b7f52', class: "inner__content-wrapper" }, h("div", { key: 'c2ec58d87c0790c2b4e73cf1bfb3f30fdecdda33', class: `navbar__container-right-content-navigation-item-icon-wrapper` }, this.userName.trim() !== "" && (h("div", { key: '482fede1b40b8142708675847312bf44f2a27387', class: "username__tooltip" }, this.userName)), this.internalImageUrl.type !== "initials" && (h("img", { key: '505906aa5b41ccb914ad3197b7bd8cd163b90a88', src: this.internalImageUrl.type === "url"
+        return (h("div", { key: '65c194d8c0ee3cb91e82c2ceacc4b1aa005f2e58', class: "container" }, h("a", { key: '81e7ebc98ae005f2a4956fb6dfe4de9c8c5b4482', href: this.internalHref, target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${!this.showLabel ? "removeLabel" : ""} ${this.hasChildNavItems ? "isParent" : ""}`, role: "button", tabindex: "0", "aria-label": "Open profile menu", onKeyDown: this.handleProfileMenuKeyDown }, h("div", { key: 'b894f65f4f59c8f147178c0184430575967695cf', class: "inner__content-wrapper" }, h("div", { key: '8b64aea92528437223554adeb7ce67a3c514c6fb', class: `navbar__container-right-content-navigation-item-icon-wrapper` }, this.userName.trim() !== "" && (h("div", { key: 'dec359be57f69d2fab07fa02509331e68ce02c7b', class: "username__tooltip" }, this.userName)), this.internalImageUrl.type !== "initials" && (h("img", { key: '3a591645bfca9d9fa1994c72e6e60b12a29dea88', src: this.internalImageUrl.type === "url"
                 ? this.internalImageUrl.value
-                : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`, alt: this.alt })), this.internalImageUrl.type === "initials" && (h("div", { key: 'ee6b2de7b68aff96938b717fd1d6092a742650f2', class: "initials__wrapper" }, h("span", { key: '5005ce862c9835ada188f2d80323a1a37f996e1a', class: "initials" }, this.internalImageUrl.value)))), h("span", { key: 'a8fd9da78eaaeee28f87810259c508ea30fa7370', class: "label__wrapper" }, h("slot", { key: '97fd88a6f1f423f7faed3e6418d327ec4014713a', onSlotchange: () => this.setProfileGap() })))), this.hasChildNavItems && (h("ul", { key: 'b9ae3aadb463eca8038cbb7b2e8ae2bdf3230c37', class: "navbar-menu rightSideItemMenu" }, " ", h("slot", { key: 'b442877b367ccfb89e8cb21cdd2f7157a1cd609a', name: "first__layer" }), " "))));
+                : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`, alt: this.alt })), this.internalImageUrl.type === "initials" && (h("div", { key: 'c8eb6e657158f408f35690b34658ff25f1feae33', class: "initials__wrapper" }, h("span", { key: '3abd9694bd2014e506721888f263b72b38578220', class: "initials" }, this.internalImageUrl.value)))), h("span", { key: 'c0e600372f2614bcea7fabb7214ba1b960c3d5f3', class: "label__wrapper" }, h("slot", { key: '3889b92a57e1b98002051ec6ad0c6fa3e214b855', onSlotchange: () => this.setProfileGap() })))), this.hasChildNavItems && (h("ul", { key: 'f967d9949de245049cb35a20393d7fe9f89b2b88', class: "navbar-menu rightSideItemMenu" }, " ", h("slot", { key: 'cefa3e1be59c4725d369ac66dea94b6fe0ea69a5', name: "first__layer" }), " "))));
     }
     static get is() { return "ifx-navbar-profile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/search-bar/search-bar.css

@@ -48,6 +48,10 @@
 .search-bar .search-bar__icon-wrapper ifx-icon:hover {
   cursor: pointer;
 }
+.search-bar .search-bar__icon-wrapper:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0a8276;
+}
 .search-bar.closed .search-bar__icon-wrapper {
   display: flex;
 }

package/dist/collection/components/search-bar/search-bar.js

@@ -92,9 +92,15 @@ export class SearchBar {
     handleInput(event) {
         this.value = event.detail;
     }
+    handleOpenSearchKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.handleCloseButton();
+        }
+    };
     render() {
-        return (h("div", { key: '9d91f8c19dd67660c653ec7965c9725315aa5d1f', role: "search", "aria-label": "a search field for user input", "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? "open" : "closed"}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
-            h("a", { "aria-label": "Close button", href: "javascript:void(0)", onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: 'cf189b6c8705daa73abff5b4de765b39977673a4', role: "search", "aria-label": "a search field for user input", "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? "open" : "closed"}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
+            h("a", { "aria-label": "Close button", href: "javascript:void(0)", onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton, role: "button", tabindex: "0", "aria-label": "Open search bar", onKeyDown: this.handleOpenSearchKeyDown }, h("ifx-icon", { icon: "search-16" })))));
     }
     static get is() { return "ifx-search-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ifx-navbar-item.js

@@ -1 +1 @@
-import{p as e,H as t,c as i,h as n,t as a}from"./p-CzOHCG_b.js";import{d as o}from"./p-elQKbU8r.js";import{d as r}from"./p-DrWl7jFt.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ifxNavItem=i(this,"ifxNavItem",7)}get el(){return this}showLabel=!0;icon="";href="";target="_self";hideOnMobile=!0;internalHref="";isMenuItem=!1;hasChildNavItems=!1;isSidebarMenuItem=!1;itemPosition;ifxNavItem;numberIndicator;dotIndicator=!1;handleOutsideClick(e){const t=e.composedPath(),i=this.getItemMenu();i&&i.classList.contains("open")&&(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(),i=this.getChevronDownIconWrapper();t&&(this.handleClassList(i,e,"hide"),this.handleClassList(t,e,"itemInMobileMenu"))}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e&&this.handleClassList(e,"contains","open")){const e=this.getNavBarItem(),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=!0;for(let e=0;e<t.length;e++)if("IFX-NAVBAR-ITEM"===t[e].tagName){const i=t[e];i.setAttribute("slot","second__layer"),i.moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){return this.el.shadowRoot.querySelector(".sub__layer-back-button")}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem(),n=this.getSubLayerMenu(),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(),t=this.getRightArrowIcon(),i=this.getNavBarItem(),n=this.getSubLayerMenu(),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"),"second__layer"===a.toLowerCase()?(this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"}),this.handleClassList(i,"remove","menuItem")):this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();this.hasChildNavItems&&this.handleClassList(t,"remove","hide")}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton(),t=this.getNavBarItem(),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=!1,this.showComponent(),this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++)if("IFX-NAVBAR-ITEM"===n[e].tagName){const t=n[e];t.setAttribute("slot","first__layer"),t.moveChildComponentsBackIntoNavbar(),t.addMenuItemClass(),t.returnToFirstLayer()}}getRightArrowIcon(){return this.el.shadowRoot.querySelector(".menuItemRightIconWrapper")}getChevronDownIconWrapper(){return this.el.shadowRoot.querySelector(".navItemIconWrapper")}async returnToFirstLayer(){const e=this.getSubLayerBackButton(),t=this.getNavBarItem(),i=this.getRightArrowIcon(),n=this.getSubLayerMenu(),a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show"),this.handleClassList(t,"remove","layer__item-parent"),this.handleClassList(n,"remove","open"),this.hasChildNavItems&&this.handleClassList(i,"remove","hide"),"second__layer"===a.toLowerCase()?(this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"}),this.handleClassList(t,"add","menuItem")):this.ifxNavItem.emit({component:this.el,action:"return"})}componentWillLoad(){this.setHref(),this.checkIfItemIsNested(),this.checkIfItemHasChildren(),this.removeEmptyItem()}componentDidLoad(){if(this.handleItemGap(),this.handleLabelWrapper(),this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem(),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();"left"===e?this.itemPosition="left":"right"===e&&(this.itemPosition="right")}}handleClassList(e,t,i){return!!e&&(e.classList[t](i),"contains"===t?e.classList.contains(i):void 0)}getNavbarItems(){return this.el.querySelectorAll("ifx-navbar-item")}getNavBarItem(){return this.el.shadowRoot.querySelector(".navbar__item")}getSubLayerMenu(){return this.el.shadowRoot.querySelector(".sub__layer-menu")}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){this.internalHref=""===this.href.toLowerCase().trim()?void 0:this.href}checkIfItemIsNested(){const e=this.el.parentElement;this.isMenuItem="IFX-NAVBAR-ITEM"===e.tagName.toUpperCase()||"IFX-NAVBAR-PROFILE"===e.tagName.toUpperCase()}checkIfItemHasChildren(){const e=this.getNavbarItems();this.hasChildNavItems=0!==e.length}async setItemSideSpecifications(){const e=this.el,t=this.getItemMenu();return"right-item"===e.getAttribute("slot").toLowerCase().trim()&&this.handleClassList(t,"add","rightSideItemMenu"),!0}getItemMenu(){return this.el.shadowRoot.querySelector(".navbar-menu")}getParentItemMenu(){return this.el.parentElement?.shadowRoot.querySelector(".navbar-menu")}closeItemMenu(){const e=this.getItemMenu(),t=this.getNavBarItem();e&&(this.handleClassList(e,"remove","open"),this.handleClassList(t,"remove","open"))}getItemMenuPosition(){let e=this.el;for(;e;){if("IFX-NAVBAR-PROFILE"===e.tagName||e instanceof t&&"right-item"===e.slot)return"left";const i=e.getRootNode();e=e.parentElement||(i instanceof ShadowRoot?i.host:null)}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot").toLowerCase();if("mobile-menu-top"===e||"second__layer"===e)this.openSubLayerMenu();else if(!this.internalHref)if(this.hasChildNavItems){const e=this.getItemMenu(),t=this.getNavBarItem();this.handleClassList(e,"toggle","open"),this.handleClassList(t,"toggle","open"),this.isMenuItem&&!this.isSidebarMenuItem&&e.classList.contains("open")&&this.handleNestedLayerMenu({type:"mouseenter"})}else{const e=this.getParentItemMenu();e&&this.handleClassList(e,"toggle","open")}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu(),i=this.getItemMenuPosition(),n=e.type.toUpperCase();"MOUSEENTER"===n&&(this.handleClassList(t,"add","open"),"left"===i?this.handleClassList(t,"add","left"):"right"===i&&this.handleClassList(t,"add","right")),"MOUSELEAVE"===n&&(this.handleClassList(t,"remove","open"),"left"===i?this.handleClassList(t,"remove","left"):"right"===i&&this.handleClassList(t,"remove","right")),"FOCUSOUT"===n&&(this.isFocusWithinComponent(e.relatedTarget)||(this.handleClassList(t,"remove","open"),"left"===i?this.handleClassList(t,"remove","left"):"right"===i&&this.handleClassList(t,"remove","right")))}}isFocusWithinComponent(e){if(!e)return!1;const t=e,i=this.el.contains(t),n=this.el.shadowRoot?.contains(t),a=t.getRootNode();return!!(a instanceof ShadowRoot&&this.el.contains(a.host))||(i||n)}handleLabelWrapper(){const e=this.el.shadowRoot.querySelector(".label__wrapper"),t=this.getNavBarItem();e.querySelector("slot").assignedNodes().length?this.showLabel&&t.classList.contains("removeLabel")&&t.classList.remove("removeLabel"):t.classList.add("removeLabel")}handleItemGap(){const e=this.el.shadowRoot.querySelector(".navbar__item").querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");this.handleClassList(e,this.numberIndicator||this.dotIndicator?"add":"remove","no-gap")}removeEmptyItem(){this.showLabel||this.icon||this.handleClassList(this.el.shadowRoot.host,"add","hidden")}handleKeyDown(e){"Enter"===e.key&&(e.stopPropagation(),e.preventDefault(),this.toggleItemMenu())}render(){return n("div",{key:"35a6c282de2ba7197e8581db0ce63bb196e27661",tabIndex:1,class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onKeyDown:e=>this.handleKeyDown(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},n("div",{key:"520db5fd1e68bdf804955ed0b3a808c1355f540f",class:"sub__layer-back-button"},n("div",{key:"fa71e6de02358bf3b1e3e6006eae021e3ab09533",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},n("ifx-icon",{key:"f1469b0da3595f8e9f4bca5f60d73f153e8d0593",icon:"arrow-left-16"}),n("span",{key:"505b4f9f3e55fbd741e5b790d54ed36320f712ad"},"Back"))),n("a",{key:"73ace8e7147e5a3c5b8162c613bebabb427b8407",tabindex:-1,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",{key:"0794e6c212ee4d69e0cfd24e2a1295724b513e99",class:"inner__content-wrapper"},n("div",{key:"f39f9dbc0642a7758d0ca4eef35b4b955fbc1bd5",class:"navbar__container-right-content-navigation-item-icon-wrapper "+(this.icon?"":"removeWrapper")},this.icon&&n("ifx-icon",{key:"93da8c58e5207d964e6a36168a52b735103c7bdc",icon:this.icon}),this.icon&&!this.showLabel&&!isNaN(this.numberIndicator)&&n("div",{key:"554a00a9be4f6e6bcb1356b9082aa45731acfc78",class:"number__indicator-wrapper"},n("ifx-indicator",{key:"699b65e66a2fe8610ce177fb432cbb6dfbb3cdf3",variant:"number",number:this.numberIndicator})),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&n("div",{key:"916ad873172b1a50e5ac8e0e73a22187b6d18581",class:"dot__indicator-wrapper"})),"left"===this.itemPosition&&this.hasChildNavItems&&this.isMenuItem&&n("div",{key:"bc3032ed98450a5a65d3688758e8efb20b02bc50",class:"menuItemLeftIconWrapper"},n("ifx-icon",{key:"b2cce7cc1d653343e8f71f5394f7cfe7d05c4eed",icon:"chevron-left-16"})),n("span",{key:"1ff703811a7891a2566a1fdb2f164be669ad1e5a",class:"label__wrapper"},n("slot",{key:"c2da114d876fd62a2af2b49ba4b811b817b95a04"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?n("div",{class:"number__indicator-wrapper"},n("ifx-indicator",{variant:"number",number:this.numberIndicator})):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?n("ifx-indicator",{variant:"dot"}):"",n("div",{key:"2fa0a514c684c214df2e3b15e867c56ef912a969",class:"navItemIconWrapper "+(!this.hasChildNavItems||this.isMenuItem||this.isSidebarMenuItem?"hide":"")},n("ifx-icon",{key:"761737ed82fce7453f5e7c2c467f873f6e1269c7",icon:"chevron-down-16"})),n("div",{key:"d1452548910f1cbefd4d8d75ec7f92f25bcf9940",class:"menuItemRightIconWrapper "+("right"===this.itemPosition&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide")},n("ifx-icon",{key:"e1995d00043f0b7585fc1c6ab5ff5ae3c3f06927",icon:"chevron-right-16"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&n("ul",{key:"36cb48967584c46c07c5f417a9ac08bcc2549725",class:"navbar-menu"}," ",n("slot",{key:"7705e6ce641da65bd5a3e707283278ac4a18e321",name:"first__layer"})," "),this.isSidebarMenuItem&&n("ul",{key:"314bddf56b2ac2f68aaa0c56e4cb93330bedd9f1",class:"sub__layer-menu"}," ",n("slot",{key:"53b3470dc344b3bd80febb35728aee35d730e0db",name:"second__layer"})," "))}static get style(){return":host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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}"}},[769,"ifx-navbar-item",{showLabel:[4,"show-label"],icon:[1],href:[1],target:[1],hideOnMobile:[4,"hide-on-mobile"],numberIndicator:[2,"number-indicator"],dotIndicator:[4,"dot-indicator"],internalHref:[32],isMenuItem:[32],hasChildNavItems:[32],isSidebarMenuItem:[32],itemPosition:[32],hideComponent:[64],showComponent:[64],toggleChildren:[64],moveChildComponentsIntoSubLayerMenu:[64],toggleFirstLayerItem:[64],addMenuItemClass:[64],moveChildComponentsBackIntoNavbar:[64],returnToFirstLayer:[64],setMenuItemPosition:[64],setItemSideSpecifications:[64]},[[5,"mousedown","handleOutsideClick"]]]),c=s,h=function(){"undefined"!=typeof customElements&&["ifx-navbar-item","ifx-icon","ifx-indicator"].forEach((e=>{switch(e){case"ifx-navbar-item":customElements.get(a(e))||customElements.define(a(e),s);break;case"ifx-icon":customElements.get(a(e))||o();break;case"ifx-indicator":customElements.get(a(e))||r()}}))};export{c as IfxNavbarItem,h as defineCustomElement}
+import{p as e,H as t,c as i,h as n,t as a}from"./p-CzOHCG_b.js";import{d as o}from"./p-elQKbU8r.js";import{d as r}from"./p-DrWl7jFt.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ifxNavItem=i(this,"ifxNavItem",7)}get el(){return this}showLabel=!0;icon="";href="";target="_self";hideOnMobile=!0;internalHref="";isMenuItem=!1;hasChildNavItems=!1;isSidebarMenuItem=!1;itemPosition;ifxNavItem;numberIndicator;dotIndicator=!1;handleOutsideClick(e){const t=e.composedPath(),i=this.getItemMenu();i&&i.classList.contains("open")&&(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(),i=this.getChevronDownIconWrapper();t&&(this.handleClassList(i,e,"hide"),this.handleClassList(t,e,"itemInMobileMenu"))}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e&&this.handleClassList(e,"contains","open")){const e=this.getNavBarItem(),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=!0;for(let e=0;e<t.length;e++)if("IFX-NAVBAR-ITEM"===t[e].tagName){const i=t[e];i.setAttribute("slot","second__layer"),i.moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){return this.el.shadowRoot.querySelector(".sub__layer-back-button")}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem(),n=this.getSubLayerMenu(),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(),t=this.getRightArrowIcon(),i=this.getNavBarItem(),n=this.getSubLayerMenu(),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"),"second__layer"===a.toLowerCase()?(this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"}),this.handleClassList(i,"remove","menuItem")):this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();this.hasChildNavItems&&this.handleClassList(t,"remove","hide")}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton(),t=this.getNavBarItem(),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=!1,this.showComponent(),this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++)if("IFX-NAVBAR-ITEM"===n[e].tagName){const t=n[e];t.setAttribute("slot","first__layer"),t.moveChildComponentsBackIntoNavbar(),t.addMenuItemClass(),t.returnToFirstLayer()}}getRightArrowIcon(){return this.el.shadowRoot.querySelector(".menuItemRightIconWrapper")}getChevronDownIconWrapper(){return this.el.shadowRoot.querySelector(".navItemIconWrapper")}async returnToFirstLayer(){const e=this.getSubLayerBackButton(),t=this.getNavBarItem(),i=this.getRightArrowIcon(),n=this.getSubLayerMenu(),a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show"),this.handleClassList(t,"remove","layer__item-parent"),this.handleClassList(n,"remove","open"),this.hasChildNavItems&&this.handleClassList(i,"remove","hide"),"second__layer"===a.toLowerCase()?(this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"}),this.handleClassList(t,"add","menuItem")):this.ifxNavItem.emit({component:this.el,action:"return"})}componentWillLoad(){this.setHref(),this.checkIfItemIsNested(),this.checkIfItemHasChildren(),this.removeEmptyItem()}componentDidLoad(){if(this.handleItemGap(),this.handleLabelWrapper(),this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem(),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();"left"===e?this.itemPosition="left":"right"===e&&(this.itemPosition="right")}}handleClassList(e,t,i){return!!e&&(e.classList[t](i),"contains"===t?e.classList.contains(i):void 0)}getNavbarItems(){return this.el.querySelectorAll("ifx-navbar-item")}getNavBarItem(){return this.el.shadowRoot.querySelector(".navbar__item")}getSubLayerMenu(){return this.el.shadowRoot.querySelector(".sub__layer-menu")}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){this.internalHref=""===this.href.toLowerCase().trim()?void 0:this.href}checkIfItemIsNested(){const e=this.el.parentElement;this.isMenuItem="IFX-NAVBAR-ITEM"===e.tagName.toUpperCase()||"IFX-NAVBAR-PROFILE"===e.tagName.toUpperCase()}checkIfItemHasChildren(){const e=this.getNavbarItems();this.hasChildNavItems=0!==e.length}async setItemSideSpecifications(){const e=this.el,t=this.getItemMenu();return"right-item"===e.getAttribute("slot").toLowerCase().trim()&&this.handleClassList(t,"add","rightSideItemMenu"),!0}getItemMenu(){return this.el.shadowRoot.querySelector(".navbar-menu")}getParentItemMenu(){return this.el.parentElement?.shadowRoot.querySelector(".navbar-menu")}closeItemMenu(){const e=this.getItemMenu(),t=this.getNavBarItem();e&&(this.handleClassList(e,"remove","open"),this.handleClassList(t,"remove","open"))}getItemMenuPosition(){let e=this.el;for(;e;){if("IFX-NAVBAR-PROFILE"===e.tagName||e instanceof t&&"right-item"===e.slot)return"left";const i=e.getRootNode();e=e.parentElement||(i instanceof ShadowRoot?i.host:null)}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot").toLowerCase();if("mobile-menu-top"===e||"second__layer"===e)this.openSubLayerMenu();else if(!this.internalHref)if(this.hasChildNavItems){const e=this.getItemMenu(),t=this.getNavBarItem();this.handleClassList(e,"toggle","open"),this.handleClassList(t,"toggle","open"),this.isMenuItem&&!this.isSidebarMenuItem&&e.classList.contains("open")&&this.handleNestedLayerMenu({type:"mouseenter"})}else{const e=this.getParentItemMenu();e&&this.handleClassList(e,"toggle","open")}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu(),i=this.getItemMenuPosition(),n=e.type.toUpperCase();"MOUSEENTER"===n&&(this.handleClassList(t,"add","open"),"left"===i?this.handleClassList(t,"add","left"):"right"===i&&this.handleClassList(t,"add","right")),"MOUSELEAVE"===n&&(this.handleClassList(t,"remove","open"),"left"===i?this.handleClassList(t,"remove","left"):"right"===i&&this.handleClassList(t,"remove","right")),"FOCUSOUT"===n&&(this.isFocusWithinComponent(e.relatedTarget)||(this.handleClassList(t,"remove","open"),"left"===i?this.handleClassList(t,"remove","left"):"right"===i&&this.handleClassList(t,"remove","right")))}}isFocusWithinComponent(e){if(!e)return!1;const t=e,i=this.el.contains(t),n=this.el.shadowRoot?.contains(t),a=t.getRootNode();return!!(a instanceof ShadowRoot&&this.el.contains(a.host))||(i||n)}handleLabelWrapper(){const e=this.el.shadowRoot.querySelector(".label__wrapper"),t=this.getNavBarItem();e.querySelector("slot").assignedNodes().length?this.showLabel&&t.classList.contains("removeLabel")&&t.classList.remove("removeLabel"):t.classList.add("removeLabel")}handleItemGap(){const e=this.el.shadowRoot.querySelector(".navbar__item").querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");this.handleClassList(e,this.numberIndicator||this.dotIndicator?"add":"remove","no-gap")}removeEmptyItem(){this.showLabel||this.icon||this.handleClassList(this.el.shadowRoot.host,"add","hidden")}handleKeyDown(e){"Enter"===e.key&&(e.stopPropagation(),e.preventDefault(),this.toggleItemMenu())}render(){return n("div",{key:"35a6c282de2ba7197e8581db0ce63bb196e27661",tabIndex:1,class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onKeyDown:e=>this.handleKeyDown(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},n("div",{key:"520db5fd1e68bdf804955ed0b3a808c1355f540f",class:"sub__layer-back-button"},n("div",{key:"fa71e6de02358bf3b1e3e6006eae021e3ab09533",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},n("ifx-icon",{key:"f1469b0da3595f8e9f4bca5f60d73f153e8d0593",icon:"arrow-left-16"}),n("span",{key:"505b4f9f3e55fbd741e5b790d54ed36320f712ad"},"Back"))),n("a",{key:"73ace8e7147e5a3c5b8162c613bebabb427b8407",tabindex:-1,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",{key:"0794e6c212ee4d69e0cfd24e2a1295724b513e99",class:"inner__content-wrapper"},n("div",{key:"f39f9dbc0642a7758d0ca4eef35b4b955fbc1bd5",class:"navbar__container-right-content-navigation-item-icon-wrapper "+(this.icon?"":"removeWrapper")},this.icon&&n("ifx-icon",{key:"93da8c58e5207d964e6a36168a52b735103c7bdc",icon:this.icon}),this.icon&&!this.showLabel&&!isNaN(this.numberIndicator)&&n("div",{key:"554a00a9be4f6e6bcb1356b9082aa45731acfc78",class:"number__indicator-wrapper"},n("ifx-indicator",{key:"699b65e66a2fe8610ce177fb432cbb6dfbb3cdf3",variant:"number",number:this.numberIndicator})),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&n("div",{key:"916ad873172b1a50e5ac8e0e73a22187b6d18581",class:"dot__indicator-wrapper"})),"left"===this.itemPosition&&this.hasChildNavItems&&this.isMenuItem&&n("div",{key:"bc3032ed98450a5a65d3688758e8efb20b02bc50",class:"menuItemLeftIconWrapper"},n("ifx-icon",{key:"b2cce7cc1d653343e8f71f5394f7cfe7d05c4eed",icon:"chevron-left-16"})),n("span",{key:"1ff703811a7891a2566a1fdb2f164be669ad1e5a",class:"label__wrapper"},n("slot",{key:"c2da114d876fd62a2af2b49ba4b811b817b95a04"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?n("div",{class:"number__indicator-wrapper"},n("ifx-indicator",{variant:"number",number:this.numberIndicator})):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?n("ifx-indicator",{variant:"dot"}):"",n("div",{key:"2fa0a514c684c214df2e3b15e867c56ef912a969",class:"navItemIconWrapper "+(!this.hasChildNavItems||this.isMenuItem||this.isSidebarMenuItem?"hide":"")},n("ifx-icon",{key:"761737ed82fce7453f5e7c2c467f873f6e1269c7",icon:"chevron-down-16"})),n("div",{key:"d1452548910f1cbefd4d8d75ec7f92f25bcf9940",class:"menuItemRightIconWrapper "+("right"===this.itemPosition&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide")},n("ifx-icon",{key:"e1995d00043f0b7585fc1c6ab5ff5ae3c3f06927",icon:"chevron-right-16"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&n("ul",{key:"36cb48967584c46c07c5f417a9ac08bcc2549725",class:"navbar-menu"}," ",n("slot",{key:"7705e6ce641da65bd5a3e707283278ac4a18e321",name:"first__layer"})," "),this.isSidebarMenuItem&&n("ul",{key:"314bddf56b2ac2f68aaa0c56e4cb93330bedd9f1",class:"sub__layer-menu"}," ",n("slot",{key:"53b3470dc344b3bd80febb35728aee35d730e0db",name:"second__layer"})," "))}static get style(){return":host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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}.navbar__item:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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}"}},[769,"ifx-navbar-item",{showLabel:[4,"show-label"],icon:[1],href:[1],target:[1],hideOnMobile:[4,"hide-on-mobile"],numberIndicator:[2,"number-indicator"],dotIndicator:[4,"dot-indicator"],internalHref:[32],isMenuItem:[32],hasChildNavItems:[32],isSidebarMenuItem:[32],itemPosition:[32],hideComponent:[64],showComponent:[64],toggleChildren:[64],moveChildComponentsIntoSubLayerMenu:[64],toggleFirstLayerItem:[64],addMenuItemClass:[64],moveChildComponentsBackIntoNavbar:[64],returnToFirstLayer:[64],setMenuItemPosition:[64],setItemSideSpecifications:[64]},[[5,"mousedown","handleOutsideClick"]]]),c=s,h=function(){"undefined"!=typeof customElements&&["ifx-navbar-item","ifx-icon","ifx-indicator"].forEach((e=>{switch(e){case"ifx-navbar-item":customElements.get(a(e))||customElements.define(a(e),s);break;case"ifx-icon":customElements.get(a(e))||o();break;case"ifx-indicator":customElements.get(a(e))||r()}}))};export{c as IfxNavbarItem,h as defineCustomElement}

package/dist/components/ifx-navbar-profile.js

@@ -1 +1 @@
-import{p as e,H as n,h as t,t as i}from"./p-CzOHCG_b.js";const a=e(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}showLabel=!0;href="";imageUrl="";target="_self";alt="";userName="";internalHref="";isMenuItem=!1;hasChildNavItems=!1;internalImageUrl={type:"",value:""};defaultProfileImage='<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="48" height="48" fill="#0A8276"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z" fill="white"/>\n</svg>';handleOutsideClick(e){const n=e.composedPath(),t=this.getItemMenu();t&&t.classList.contains("open")&&(n.includes(this.el)||this.closeItemMenu())}componentWillLoad(){this.setHref(),this.setImage();const e=this.getNavbarItems();this.hasChildNavItems=0!==e.length}componentDidLoad(){if(this.setProfileGap(),this.hasChildNavItems){const e=this.getNavbarItems();this.appendNavItemToMenu(e)}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}handleClassList(e,n,t){if(e.classList[n](t),"contains"===n)return e.classList.contains(t)}getNavbarItems(){return this.el.querySelectorAll("ifx-navbar-item")}getNavBarItem(){return this.el.shadowRoot.querySelector(".navbar__item")}relocateUsingSlot(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}appendNavItemToMenu(e){this.relocateUsingSlot(e)}isValidHttpUrl(e){let n;try{n=new URL(e)}catch(e){return!1}return"http:"===n.protocol||"https:"===n.protocol}setImage(){this.internalImageUrl=""===this.imageUrl.toLowerCase().trim()?{type:void 0,value:""}:this.isValidHttpUrl(this.imageUrl)?{type:"url",value:this.imageUrl}:{type:"initials",value:this.imageUrl}}setHref(){this.internalHref=""===this.href.toLowerCase().trim()?void 0:this.href}setProfileGap(){const e=this.el.shadowRoot.querySelector(".inner__content-wrapper"),n=this.el.shadowRoot.querySelector(".label__wrapper").querySelector("slot").assignedNodes();this.handleClassList(e,n.length?"remove":"add","no-gap")}getItemMenu(){return this.el.shadowRoot.querySelector(".navbar-menu")}closeItemMenu(){const e=this.getItemMenu(),n=this.getNavBarItem();e&&(this.handleClassList(e,"remove","open"),this.handleClassList(n,"remove","open"))}toggleItemMenu(){if(!this.internalHref){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenu();this.handleClassList(e,"add","right")}if(this.hasChildNavItems){const e=this.getItemMenu(),n=this.getNavBarItem();this.handleClassList(e,"toggle","open"),this.handleClassList(n,"toggle","open")}}}render(){return t("div",{key:"619d6c358dda79bd7e2c56127580ff802c3d0977",class:"container"},t("a",{key:"f685e59b4aea2f7e9900883c417e5ea9aaa20e12",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.showLabel?"":"removeLabel"} ${this.hasChildNavItems?"isParent":""}`},t("div",{key:"c1fd9c1513835af1859973447d4ed9b87c6b7f52",class:"inner__content-wrapper"},t("div",{key:"c2ec58d87c0790c2b4e73cf1bfb3f30fdecdda33",class:"navbar__container-right-content-navigation-item-icon-wrapper"},""!==this.userName.trim()&&t("div",{key:"482fede1b40b8142708675847312bf44f2a27387",class:"username__tooltip"},this.userName),"initials"!==this.internalImageUrl.type&&t("img",{key:"505906aa5b41ccb914ad3197b7bd8cd163b90a88",src:"url"===this.internalImageUrl.type?this.internalImageUrl.value:"data:image/svg+xml,"+encodeURIComponent(this.defaultProfileImage),alt:this.alt}),"initials"===this.internalImageUrl.type&&t("div",{key:"ee6b2de7b68aff96938b717fd1d6092a742650f2",class:"initials__wrapper"},t("span",{key:"5005ce862c9835ada188f2d80323a1a37f996e1a",class:"initials"},this.internalImageUrl.value))),t("span",{key:"a8fd9da78eaaeee28f87810259c508ea30fa7370",class:"label__wrapper"},t("slot",{key:"97fd88a6f1f423f7faed3e6418d327ec4014713a",onSlotchange:()=>this.setProfileGap()})))),this.hasChildNavItems&&t("ul",{key:"b9ae3aadb463eca8038cbb7b2e8ae2bdf3230c37",class:"navbar-menu rightSideItemMenu"}," ",t("slot",{key:"b442877b367ccfb89e8cb21cdd2f7157a1cd609a",name:"first__layer"})," "))}static get assetsDirs(){return["assets"]}static get style(){return":host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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}"}},[769,"ifx-navbar-profile",{showLabel:[4,"show-label"],href:[1],imageUrl:[1,"image-url"],target:[1],alt:[1],userName:[1,"user-name"],internalHref:[32],isMenuItem:[32],hasChildNavItems:[32],internalImageUrl:[32],hideComponent:[64],showComponent:[64]},[[5,"mousedown","handleOutsideClick"]]]),r=a,o=function(){"undefined"!=typeof customElements&&["ifx-navbar-profile"].forEach((e=>{"ifx-navbar-profile"===e&&(customElements.get(i(e))||customElements.define(i(e),a))}))};export{r as IfxNavbarProfile,o as defineCustomElement}
+import{p as e,H as n,h as t,t as i}from"./p-CzOHCG_b.js";const a=e(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get el(){return this}showLabel=!0;href="";imageUrl="";target="_self";alt="";userName="";internalHref="";isMenuItem=!1;hasChildNavItems=!1;internalImageUrl={type:"",value:""};defaultProfileImage='<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="48" height="48" fill="#0A8276"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z" fill="white"/>\n</svg>';handleOutsideClick(e){const n=e.composedPath(),t=this.getItemMenu();t&&t.classList.contains("open")&&(n.includes(this.el)||this.closeItemMenu())}componentWillLoad(){this.setHref(),this.setImage();const e=this.getNavbarItems();this.hasChildNavItems=0!==e.length}componentDidLoad(){if(this.setProfileGap(),this.hasChildNavItems){const e=this.getNavbarItems();this.appendNavItemToMenu(e)}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}handleClassList(e,n,t){if(e.classList[n](t),"contains"===n)return e.classList.contains(t)}getNavbarItems(){return this.el.querySelectorAll("ifx-navbar-item")}getNavBarItem(){return this.el.shadowRoot.querySelector(".navbar__item")}relocateUsingSlot(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}appendNavItemToMenu(e){this.relocateUsingSlot(e)}isValidHttpUrl(e){let n;try{n=new URL(e)}catch(e){return!1}return"http:"===n.protocol||"https:"===n.protocol}setImage(){this.internalImageUrl=""===this.imageUrl.toLowerCase().trim()?{type:void 0,value:""}:this.isValidHttpUrl(this.imageUrl)?{type:"url",value:this.imageUrl}:{type:"initials",value:this.imageUrl}}setHref(){this.internalHref=""===this.href.toLowerCase().trim()?void 0:this.href}setProfileGap(){const e=this.el.shadowRoot.querySelector(".inner__content-wrapper"),n=this.el.shadowRoot.querySelector(".label__wrapper").querySelector("slot").assignedNodes();this.handleClassList(e,n.length?"remove":"add","no-gap")}getItemMenu(){return this.el.shadowRoot.querySelector(".navbar-menu")}closeItemMenu(){const e=this.getItemMenu(),n=this.getNavBarItem();e&&(this.handleClassList(e,"remove","open"),this.handleClassList(n,"remove","open"))}toggleItemMenu(){if(!this.internalHref){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenu();this.handleClassList(e,"add","right")}if(this.hasChildNavItems){const e=this.getItemMenu(),n=this.getNavBarItem();this.handleClassList(e,"toggle","open"),this.handleClassList(n,"toggle","open")}}}handleProfileMenuKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.toggleItemMenu())};render(){return t("div",{key:"65c194d8c0ee3cb91e82c2ceacc4b1aa005f2e58",class:"container"},t("a",{key:"81e7ebc98ae005f2a4956fb6dfe4de9c8c5b4482",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.showLabel?"":"removeLabel"} ${this.hasChildNavItems?"isParent":""}`,role:"button",tabindex:"0","aria-label":"Open profile menu",onKeyDown:this.handleProfileMenuKeyDown},t("div",{key:"b894f65f4f59c8f147178c0184430575967695cf",class:"inner__content-wrapper"},t("div",{key:"8b64aea92528437223554adeb7ce67a3c514c6fb",class:"navbar__container-right-content-navigation-item-icon-wrapper"},""!==this.userName.trim()&&t("div",{key:"dec359be57f69d2fab07fa02509331e68ce02c7b",class:"username__tooltip"},this.userName),"initials"!==this.internalImageUrl.type&&t("img",{key:"3a591645bfca9d9fa1994c72e6e60b12a29dea88",src:"url"===this.internalImageUrl.type?this.internalImageUrl.value:"data:image/svg+xml,"+encodeURIComponent(this.defaultProfileImage),alt:this.alt}),"initials"===this.internalImageUrl.type&&t("div",{key:"c8eb6e657158f408f35690b34658ff25f1feae33",class:"initials__wrapper"},t("span",{key:"3abd9694bd2014e506721888f263b72b38578220",class:"initials"},this.internalImageUrl.value))),t("span",{key:"c0e600372f2614bcea7fabb7214ba1b960c3d5f3",class:"label__wrapper"},t("slot",{key:"3889b92a57e1b98002051ec6ad0c6fa3e214b855",onSlotchange:()=>this.setProfileGap()})))),this.hasChildNavItems&&t("ul",{key:"f967d9949de245049cb35a20393d7fe9f89b2b88",class:"navbar-menu rightSideItemMenu"}," ",t("slot",{key:"cefa3e1be59c4725d369ac66dea94b6fe0ea69a5",name:"first__layer"})," "))}static get assetsDirs(){return["assets"]}static get style(){return":host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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}.navbar__item:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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}"}},[769,"ifx-navbar-profile",{showLabel:[4,"show-label"],href:[1],imageUrl:[1,"image-url"],target:[1],alt:[1],userName:[1,"user-name"],internalHref:[32],isMenuItem:[32],hasChildNavItems:[32],internalImageUrl:[32],hideComponent:[64],showComponent:[64]},[[5,"mousedown","handleOutsideClick"]]]),r=a,o=function(){"undefined"!=typeof customElements&&["ifx-navbar-profile"].forEach((e=>{"ifx-navbar-profile"===e&&(customElements.get(i(e))||customElements.define(i(e),a))}))};export{r as IfxNavbarProfile,o as defineCustomElement}

package/dist/components/ifx-search-bar.js

@@ -1 +1 @@
-import{p as e,H as s,c as a,h as t,t as i}from"./p-CzOHCG_b.js";import{i as r,d as o,t as n}from"./p-94ZtGp9D.js";import{d as c}from"./p-elQKbU8r.js";import{d as h}from"./p-X-DP1wiv.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ifxInput=a(this,"ifxInput",7),this.ifxOpen=a(this,"ifxOpen",7)}get el(){return this}isOpen=!0;disabled=!1;value;maxlength;autocomplete="on";showCloseButton=!0;ifxInput;ifxOpen;internalState;pendingFocus=!1;async open(){this.pendingFocus=!0,this.internalState=!0}async close(){this.internalState=!1,this.ifxOpen.emit(!1)}handlePropChange(){this.internalState=this.isOpen}handleCloseButton=()=>{const e=!this.internalState;e&&(this.pendingFocus=!0),this.internalState=e,this.ifxOpen.emit(e)};setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState()}componentDidUpdate(){if(this.pendingFocus){this.pendingFocus=!1;const e=this.el.shadowRoot?.querySelector("ifx-search-field");"function"==typeof e?.setFocus&&e.setFocus()}}async componentDidLoad(){if(!r(this.el)){const e=o();n("ifx-search-bar",await e)}}handleInput(e){this.value=e.detail}render(){return t("div",{key:"9d91f8c19dd67660c653ec7965c9725315aa5d1f",role:"search","aria-label":"a search field for user input","aria-disabled":this.disabled,class:"search-bar "+(this.internalState?"open":"closed")},this.internalState?t("div",{class:"search-bar-wrapper"},t("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},t("ifx-icon",{icon:"search-16",slot:"search-icon"})),this.showCloseButton&&t("a",{"aria-label":"Close button",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):t("div",{class:"search-bar__icon-wrapper",onClick:this.handleCloseButton},t("ifx-icon",{icon:"search-16"})))}static get watchers(){return{isOpen:[{handlePropChange:0}]}}static get style(){return":host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#ffffff;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0a8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}"}},[513,"ifx-search-bar",{isOpen:[4,"is-open"],disabled:[4],value:[1025],maxlength:[2],autocomplete:[1],showCloseButton:[4,"show-close-button"],internalState:[32],open:[64],close:[64]},void 0,{isOpen:[{handlePropChange:0}]}]),p=l,f=function(){"undefined"!=typeof customElements&&["ifx-search-bar","ifx-icon","ifx-search-field"].forEach((e=>{switch(e){case"ifx-search-bar":customElements.get(i(e))||customElements.define(i(e),l);break;case"ifx-icon":customElements.get(i(e))||c();break;case"ifx-search-field":customElements.get(i(e))||h()}}))};export{p as IfxSearchBar,f as defineCustomElement}
+import{p as e,H as a,c as s,h as t,t as i}from"./p-CzOHCG_b.js";import{i as r,d as o,t as n}from"./p-94ZtGp9D.js";import{d as c}from"./p-elQKbU8r.js";import{d as h}from"./p-X-DP1wiv.js";const l=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ifxInput=s(this,"ifxInput",7),this.ifxOpen=s(this,"ifxOpen",7)}get el(){return this}isOpen=!0;disabled=!1;value;maxlength;autocomplete="on";showCloseButton=!0;ifxInput;ifxOpen;internalState;pendingFocus=!1;async open(){this.pendingFocus=!0,this.internalState=!0}async close(){this.internalState=!1,this.ifxOpen.emit(!1)}handlePropChange(){this.internalState=this.isOpen}handleCloseButton=()=>{const e=!this.internalState;e&&(this.pendingFocus=!0),this.internalState=e,this.ifxOpen.emit(e)};setInitialState(){this.internalState=this.isOpen}componentWillLoad(){this.setInitialState()}componentDidUpdate(){if(this.pendingFocus){this.pendingFocus=!1;const e=this.el.shadowRoot?.querySelector("ifx-search-field");"function"==typeof e?.setFocus&&e.setFocus()}}async componentDidLoad(){if(!r(this.el)){const e=o();n("ifx-search-bar",await e)}}handleInput(e){this.value=e.detail}handleOpenSearchKeyDown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleCloseButton())};render(){return t("div",{key:"cf189b6c8705daa73abff5b4de765b39977673a4",role:"search","aria-label":"a search field for user input","aria-disabled":this.disabled,class:"search-bar "+(this.internalState?"open":"closed")},this.internalState?t("div",{class:"search-bar-wrapper"},t("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},t("ifx-icon",{icon:"search-16",slot:"search-icon"})),this.showCloseButton&&t("a",{"aria-label":"Close button",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):t("div",{class:"search-bar__icon-wrapper",onClick:this.handleCloseButton,role:"button",tabindex:"0","aria-label":"Open search bar",onKeyDown:this.handleOpenSearchKeyDown},t("ifx-icon",{icon:"search-16"})))}static get watchers(){return{isOpen:[{handlePropChange:0}]}}static get style(){return":host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#ffffff;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0a8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar .search-bar__icon-wrapper:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}"}},[513,"ifx-search-bar",{isOpen:[4,"is-open"],disabled:[4],value:[1025],maxlength:[2],autocomplete:[1],showCloseButton:[4,"show-close-button"],internalState:[32],open:[64],close:[64]},void 0,{isOpen:[{handlePropChange:0}]}]),p=l,f=function(){"undefined"!=typeof customElements&&["ifx-search-bar","ifx-icon","ifx-search-field"].forEach((e=>{switch(e){case"ifx-search-bar":customElements.get(i(e))||customElements.define(i(e),l);break;case"ifx-icon":customElements.get(i(e))||c();break;case"ifx-search-field":customElements.get(i(e))||h()}}))};export{p as IfxSearchBar,f as defineCustomElement}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-09-11T13:08:34",
+  "timestamp": "2026-09-11T14:15:06",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.44.2",

package/dist/esm/ifx-navbar-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, a as getElement, h } from './index-C_-j3mlf.js';
 
-const navbarItemCss = () => `:host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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 navbarItemCss = () => `:host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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}.navbar__item:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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 NavbarItem = class {
     constructor(hostRef) {

package/dist/esm/ifx-navbar-profile.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as getElement, h } from './index-C_-j3mlf.js';
 
-const navbarItemCss = () => `:host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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 navbarItemCss = () => `:host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:1rem;color:#1d1d1d}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.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:0;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:var(--ifx-font-family);background-color:#1d1d1d;color:#ffffff;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:#ffffff;text-align:center;font-family:var(--ifx-font-family);font-size:0.875rem;font-style:normal;font-weight:600;line-height:1.25rem;-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}.navbar__item:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.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:1rem;font-style:normal;font-weight:600;line-height:1.5rem}.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:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper{display:flex}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper:has(:not(.navbar__container-right-content-navigation-item-icon-wrapper:has(:not(ifx-icon)))){display:none}.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 0;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:0}.navbar__item.layer__item-parent{color:#1d1d1d;font-size:1.5rem;font-style:normal;font-weight:600;line-height:2rem;letter-spacing:-0.01em;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:1rem;font-style:normal;font-weight:400;line-height:1.5rem}.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 NavbarProfile = class {
     constructor(hostRef) {
@@ -152,10 +152,16 @@ const NavbarProfile = class {
             }
         }
     }
+    handleProfileMenuKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.toggleItemMenu();
+        }
+    };
     render() {
-        return (h("div", { key: '619d6c358dda79bd7e2c56127580ff802c3d0977', class: "container" }, h("a", { key: 'f685e59b4aea2f7e9900883c417e5ea9aaa20e12', href: this.internalHref, target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${!this.showLabel ? "removeLabel" : ""} ${this.hasChildNavItems ? "isParent" : ""}` }, h("div", { key: 'c1fd9c1513835af1859973447d4ed9b87c6b7f52', class: "inner__content-wrapper" }, h("div", { key: 'c2ec58d87c0790c2b4e73cf1bfb3f30fdecdda33', class: `navbar__container-right-content-navigation-item-icon-wrapper` }, this.userName.trim() !== "" && (h("div", { key: '482fede1b40b8142708675847312bf44f2a27387', class: "username__tooltip" }, this.userName)), this.internalImageUrl.type !== "initials" && (h("img", { key: '505906aa5b41ccb914ad3197b7bd8cd163b90a88', src: this.internalImageUrl.type === "url"
+        return (h("div", { key: '65c194d8c0ee3cb91e82c2ceacc4b1aa005f2e58', class: "container" }, h("a", { key: '81e7ebc98ae005f2a4956fb6dfe4de9c8c5b4482', href: this.internalHref, target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${!this.showLabel ? "removeLabel" : ""} ${this.hasChildNavItems ? "isParent" : ""}`, role: "button", tabindex: "0", "aria-label": "Open profile menu", onKeyDown: this.handleProfileMenuKeyDown }, h("div", { key: 'b894f65f4f59c8f147178c0184430575967695cf', class: "inner__content-wrapper" }, h("div", { key: '8b64aea92528437223554adeb7ce67a3c514c6fb', class: `navbar__container-right-content-navigation-item-icon-wrapper` }, this.userName.trim() !== "" && (h("div", { key: 'dec359be57f69d2fab07fa02509331e68ce02c7b', class: "username__tooltip" }, this.userName)), this.internalImageUrl.type !== "initials" && (h("img", { key: '3a591645bfca9d9fa1994c72e6e60b12a29dea88', src: this.internalImageUrl.type === "url"
                 ? this.internalImageUrl.value
-                : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`, alt: this.alt })), this.internalImageUrl.type === "initials" && (h("div", { key: 'ee6b2de7b68aff96938b717fd1d6092a742650f2', class: "initials__wrapper" }, h("span", { key: '5005ce862c9835ada188f2d80323a1a37f996e1a', class: "initials" }, this.internalImageUrl.value)))), h("span", { key: 'a8fd9da78eaaeee28f87810259c508ea30fa7370', class: "label__wrapper" }, h("slot", { key: '97fd88a6f1f423f7faed3e6418d327ec4014713a', onSlotchange: () => this.setProfileGap() })))), this.hasChildNavItems && (h("ul", { key: 'b9ae3aadb463eca8038cbb7b2e8ae2bdf3230c37', class: "navbar-menu rightSideItemMenu" }, " ", h("slot", { key: 'b442877b367ccfb89e8cb21cdd2f7157a1cd609a', name: "first__layer" }), " "))));
+                : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`, alt: this.alt })), this.internalImageUrl.type === "initials" && (h("div", { key: 'c8eb6e657158f408f35690b34658ff25f1feae33', class: "initials__wrapper" }, h("span", { key: '3abd9694bd2014e506721888f263b72b38578220', class: "initials" }, this.internalImageUrl.value)))), h("span", { key: 'c0e600372f2614bcea7fabb7214ba1b960c3d5f3', class: "label__wrapper" }, h("slot", { key: '3889b92a57e1b98002051ec6ad0c6fa3e214b855', onSlotchange: () => this.setProfileGap() })))), this.hasChildNavItems && (h("ul", { key: 'f967d9949de245049cb35a20393d7fe9f89b2b88', class: "navbar-menu rightSideItemMenu" }, " ", h("slot", { key: 'cefa3e1be59c4725d369ac66dea94b6fe0ea69a5', name: "first__layer" }), " "))));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/esm/ifx-search-bar.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, a as getElement, h } from './i
 import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
 import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
 
-const searchBarCss = () => `:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#ffffff;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0a8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}`;
+const searchBarCss = () => `:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#ffffff;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0a8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar .search-bar__icon-wrapper:focus{outline:none;box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #0a8276}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}`;
 
 const SearchBar = class {
     constructor(hostRef) {
@@ -99,9 +99,15 @@ const SearchBar = class {
     handleInput(event) {
         this.value = event.detail;
     }
+    handleOpenSearchKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.handleCloseButton();
+        }
+    };
     render() {
-        return (h("div", { key: '9d91f8c19dd67660c653ec7965c9725315aa5d1f', role: "search", "aria-label": "a search field for user input", "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? "open" : "closed"}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
-            h("a", { "aria-label": "Close button", href: "javascript:void(0)", onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: 'cf189b6c8705daa73abff5b4de765b39977673a4', role: "search", "aria-label": "a search field for user input", "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? "open" : "closed"}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), this.showCloseButton &&
+            h("a", { "aria-label": "Close button", href: "javascript:void(0)", onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton, role: "button", tabindex: "0", "aria-label": "Open search bar", onKeyDown: this.handleOpenSearchKeyDown }, h("ifx-icon", { icon: "search-16" })))));
     }
     static get watchers() { return {
         "isOpen": [{