@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,436 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CY4s4b6R.js';
+import { s as sanitizeHref } from './url-utils-QgsB_-OM.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}.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:0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);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) {
+        registerInstance(this, hostRef);
+        this.ifxNavItem = createEvent(this, "ifxNavItem", 7);
+    }
+    get el() { return getElement(this); }
+    /** Whether to show the label text next to the icon. */
+    showLabel = true;
+    /** Icon to display for this navigation item. */
+    icon = "";
+    /** URL the navigation item should navigate to when clicked. */
+    href = "";
+    /** Where to open the link (same tab, new tab, etc.). */
+    target = "_self";
+    /** If true, hides this item on mobile viewports. */
+    hideOnMobile = true;
+    internalHref = "";
+    isMenuItem = false;
+    hasChildNavItems = false;
+    isSidebarMenuItem = false;
+    itemPosition;
+    /** Fired when the navigation item is activated or clicked. */
+    ifxNavItem;
+    /** Number badge shown as an indicator on the item. */
+    numberIndicator;
+    /** If true, shows a simple dot indicator instead of a number. */
+    dotIndicator = false;
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        const itemMenu = this.getItemMenu();
+        if (itemMenu) {
+            if (itemMenu.classList.contains("open")) {
+                if (!path.includes(this.el)) {
+                    this.closeItemMenu();
+                }
+            }
+        }
+    }
+    /** Hides this navigation item component. */
+    async hideComponent() {
+        this.el.style.display = "none";
+    }
+    /** Shows this navigation item component. */
+    async showComponent() {
+        this.el.style.display = "";
+    }
+    /** Toggles visibility of the child menu and its arrow icon. */
+    async toggleChildren(action) {
+        const itemMenu = this.getItemMenu();
+        const arrowIcon = this.getChevronDownIconWrapper();
+        if (itemMenu) {
+            this.handleClassList(arrowIcon, action, "hide");
+            this.handleClassList(itemMenu, action, "itemInMobileMenu");
+        }
+    }
+    /** Moves child nav items into the sub-layer menu (e.g. for mobile view). */
+    async moveChildComponentsIntoSubLayerMenu() {
+        const subLayerMenu = this.getItemMenu();
+        if (subLayerMenu) {
+            const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, "contains", "open");
+            if (subLayerMenuIsOpened) {
+                const navbarItem = this.getNavBarItem();
+                const subLayerBackButton = this.getSubLayerBackButton();
+                this.handleClassList(navbarItem, "add", "layer__item-parent");
+                this.handleClassList(subLayerBackButton, "add", "show");
+                this.ifxNavItem.emit({ component: this.el, action: "hideFirstLayer" });
+            }
+        }
+        const navItems = this.el.querySelectorAll('[slot="first__layer"]');
+        this.isSidebarMenuItem = true;
+        for (let i = 0; i < navItems.length; i++) {
+            if (navItems[i].tagName === "IFX-NAVBAR-ITEM") {
+                const navItem = navItems[i];
+                navItem.setAttribute("slot", "second__layer");
+                navItem.moveChildComponentsIntoSubLayerMenu();
+            }
+        }
+    }
+    getSubLayerBackButton() {
+        const sublayerBackButton = this.el.shadowRoot.querySelector(".sub__layer-back-button");
+        return sublayerBackButton;
+    }
+    /** Toggles visibility between the first layer item and its second-layer menu. */
+    async toggleFirstLayerItem(actionOne, actionTwo) {
+        const navbarItem = this.getNavBarItem();
+        const secondLayerMenu = this.getSubLayerMenu();
+        const subLayerBackButton = this.getSubLayerBackButton();
+        this.handleClassList(subLayerBackButton, [actionOne], "show");
+        this.handleClassList(navbarItem, [actionTwo], "hide");
+        this.handleClassList(secondLayerMenu, [actionTwo], "remove__margin");
+    }
+    openSubLayerMenu() {
+        if (this.hasChildNavItems) {
+            const subLayerBackButton = this.getSubLayerBackButton();
+            const rightArrowIcon = this.getRightArrowIcon();
+            const navbarItem = this.getNavBarItem();
+            const subLayerMenu = this.getSubLayerMenu();
+            const slotName = this.el.getAttribute("slot");
+            this.handleClassList(subLayerBackButton, "add", "show");
+            this.handleClassList(rightArrowIcon, "add", "hide");
+            this.handleClassList(navbarItem, "add", "layer__item-parent");
+            this.handleClassList(subLayerMenu, "add", "open");
+            if (slotName.toLowerCase() === "second__layer") {
+                this.ifxNavItem.emit({
+                    component: this.el,
+                    parent: this.el.parentElement,
+                    action: "hideSecondLayer",
+                });
+                this.handleClassList(navbarItem, "remove", "menuItem");
+            }
+            else {
+                this.ifxNavItem.emit({ component: this.el, action: "hideFirstLayer" });
+            }
+        }
+    }
+    /** Marks this item as a menu entry and shows the right-arrow icon if needed. */
+    async addMenuItemClass() {
+        const navbarItem = this.getNavBarItem();
+        this.handleClassList(navbarItem, "add", "menuItem");
+        const rightArrowIcon = this.getRightArrowIcon();
+        if (this.hasChildNavItems) {
+            this.handleClassList(rightArrowIcon, "remove", "hide");
+        }
+    }
+    /** Moves child components back into the main navbar from the sub-layer menu. */
+    async moveChildComponentsBackIntoNavbar() {
+        const subLayerBackButton = this.getSubLayerBackButton();
+        const navbarItem = this.getNavBarItem();
+        const secondLayerMenu = this.getSubLayerMenu();
+        this.handleClassList(subLayerBackButton, "remove", "show");
+        this.handleClassList(navbarItem, "remove", "layer__item-parent");
+        this.handleClassList(secondLayerMenu, "remove", "remove__margin");
+        this.ifxNavItem.emit({ component: this.el, action: "show" });
+        const navItems = this.el.querySelectorAll('[slot="second__layer"]');
+        this.isSidebarMenuItem = false;
+        this.showComponent();
+        this.handleClassList(navbarItem, "remove", "hide");
+        for (let i = 0; i < navItems.length; i++) {
+            if (navItems[i].tagName === "IFX-NAVBAR-ITEM") {
+                const navItem = navItems[i];
+                navItem.setAttribute("slot", "first__layer");
+                navItem.moveChildComponentsBackIntoNavbar();
+                navItem.addMenuItemClass();
+                navItem.returnToFirstLayer();
+            }
+        }
+    }
+    getRightArrowIcon() {
+        const menuItemRightIconWrapper = this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");
+        return menuItemRightIconWrapper;
+    }
+    getChevronDownIconWrapper() {
+        const arrowIcon = this.el.shadowRoot.querySelector(".navItemIconWrapper");
+        return arrowIcon;
+    }
+    /** Returns this item from a deeper layer back to its first-layer state. */
+    async returnToFirstLayer() {
+        const subLayerBackButton = this.getSubLayerBackButton();
+        const navbarItem = this.getNavBarItem();
+        const rightArrowIcon = this.getRightArrowIcon();
+        const subLayerMenu = this.getSubLayerMenu();
+        const slotName = this.el.getAttribute("slot");
+        this.handleClassList(subLayerBackButton, "remove", "show");
+        this.handleClassList(navbarItem, "remove", "layer__item-parent");
+        this.handleClassList(subLayerMenu, "remove", "open");
+        if (this.hasChildNavItems) {
+            this.handleClassList(rightArrowIcon, "remove", "hide");
+        }
+        if (slotName.toLowerCase() === "second__layer") {
+            this.ifxNavItem.emit({
+                component: this.el,
+                parent: this.el.parentElement,
+                action: "returnToSecondLayer",
+            });
+            this.handleClassList(navbarItem, "add", "menuItem");
+        }
+        else {
+            this.ifxNavItem.emit({ component: this.el, action: "return" });
+        }
+    }
+    componentWillLoad() {
+        this.setHref();
+        this.checkIfItemIsNested();
+        this.checkIfItemHasChildren();
+        this.removeEmptyItem();
+    }
+    componentDidLoad() {
+        this.handleItemGap();
+        this.handleLabelWrapper();
+        if (this.hasChildNavItems) {
+            const navItems = this.getNavbarItems();
+            this.relocateItemsToFirstlayer(navItems);
+        }
+    }
+    componentDidUpdate() {
+        const navbarItem = this.getNavBarItem();
+        const isLayerItemParent = this.handleClassList(navbarItem, "contains", "layer__item-parent");
+        if (this.isSidebarMenuItem && isLayerItemParent) {
+            const rightArrowIcon = this.getRightArrowIcon();
+            this.handleClassList(rightArrowIcon, "add", "hide");
+        }
+    }
+    /** Sets the menu item position (left or right) based on its menu placement. */
+    async setMenuItemPosition() {
+        if (this.isMenuItem && this.hasChildNavItems) {
+            const menuPosition = this.getItemMenuPosition();
+            if (menuPosition === "left") {
+                this.itemPosition = "left";
+            }
+            else if (menuPosition === "right") {
+                this.itemPosition = "right";
+            }
+        }
+    }
+    handleClassList(el, type, className) {
+        if (!el)
+            return false;
+        el.classList[type](className);
+        if (type === "contains") {
+            return el.classList.contains(className);
+        }
+    }
+    getNavbarItems() {
+        const navItems = this.el.querySelectorAll("ifx-navbar-item");
+        return navItems;
+    }
+    getNavBarItem() {
+        const navItem = this.el.shadowRoot.querySelector(".navbar__item");
+        return navItem;
+    }
+    getSubLayerMenu() {
+        const subLayerMenu = this.el.shadowRoot.querySelector(".sub__layer-menu");
+        return subLayerMenu;
+    }
+    relocateItemsToFirstlayer(navItems) {
+        navItems.forEach((item) => {
+            item.setAttribute("slot", "first__layer");
+        });
+    }
+    setHref() {
+        if (this.href.toLowerCase().trim() === "") {
+            this.internalHref = undefined;
+        }
+        else
+            this.internalHref = this.href;
+    }
+    checkIfItemIsNested() {
+        const parentElement = this.el.parentElement;
+        if (parentElement.tagName.toUpperCase() === "IFX-NAVBAR-ITEM" ||
+            parentElement.tagName.toUpperCase() === "IFX-NAVBAR-PROFILE") {
+            this.isMenuItem = true;
+            return;
+        }
+        else {
+            this.isMenuItem = false;
+        }
+    }
+    checkIfItemHasChildren() {
+        const sidebarItems = this.getNavbarItems();
+        if (sidebarItems.length !== 0) {
+            this.hasChildNavItems = true;
+        }
+        else {
+            this.hasChildNavItems = false;
+        }
+    }
+    /** Applies side-specific classes when the item is placed on the right side. */
+    async setItemSideSpecifications() {
+        const menuItem = this.el;
+        const itemMenu = this.getItemMenu();
+        const slotValue = menuItem.getAttribute("slot");
+        if (slotValue.toLowerCase().trim() === "right-item") {
+            this.handleClassList(itemMenu, "add", "rightSideItemMenu");
+        }
+        return true;
+    }
+    getItemMenu() {
+        const menu = this.el.shadowRoot.querySelector(".navbar-menu");
+        return menu;
+    }
+    getParentItemMenu() {
+        return this.el.parentElement?.shadowRoot.querySelector(".navbar-menu");
+    }
+    closeItemMenu() {
+        const itemMenu = this.getItemMenu();
+        const menuItem = this.getNavBarItem();
+        if (itemMenu) {
+            this.handleClassList(itemMenu, "remove", "open");
+            this.handleClassList(menuItem, "remove", "open");
+        }
+    }
+    getItemMenuPosition() {
+        let parentElement = this.el;
+        while (parentElement) {
+            if (parentElement.tagName === "IFX-NAVBAR-PROFILE" ||
+                (parentElement instanceof HTMLElement &&
+                    parentElement.slot === "right-item")) {
+                return "left";
+            }
+            const rootNode = parentElement.getRootNode();
+            parentElement =
+                parentElement.parentElement ||
+                    (rootNode instanceof ShadowRoot ? rootNode.host : null);
+        }
+        return "right";
+    }
+    toggleItemMenu() {
+        const slotName = this.el.getAttribute("slot").toLowerCase();
+        if (slotName === "mobile-menu-top" || slotName === "second__layer") {
+            this.openSubLayerMenu();
+        }
+        else if (!this.internalHref) {
+            if (this.hasChildNavItems) {
+                const itemMenu = this.getItemMenu();
+                const menuItem = this.getNavBarItem();
+                this.handleClassList(itemMenu, "toggle", "open");
+                this.handleClassList(menuItem, "toggle", "open");
+                if (this.isMenuItem &&
+                    !this.isSidebarMenuItem &&
+                    itemMenu.classList.contains("open")) {
+                    this.handleNestedLayerMenu({ type: "mouseenter" });
+                }
+            }
+            else {
+                const parentItemMenu = this.getParentItemMenu();
+                if (parentItemMenu) {
+                    this.handleClassList(parentItemMenu, "toggle", "open");
+                }
+            }
+        }
+    }
+    handleNestedLayerMenu(e) {
+        if (this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) {
+            const itemMenu = this.getItemMenu();
+            const menuPosition = this.getItemMenuPosition();
+            const type = e.type.toUpperCase();
+            if (type === "MOUSEENTER") {
+                this.handleClassList(itemMenu, "add", "open");
+                if (menuPosition === "left") {
+                    this.handleClassList(itemMenu, "add", "left");
+                }
+                else if (menuPosition === "right") {
+                    this.handleClassList(itemMenu, "add", "right");
+                }
+            }
+            if (type === "MOUSELEAVE") {
+                this.handleClassList(itemMenu, "remove", "open");
+                if (menuPosition === "left") {
+                    this.handleClassList(itemMenu, "remove", "left");
+                }
+                else if (menuPosition === "right") {
+                    this.handleClassList(itemMenu, "remove", "right");
+                }
+            }
+            if (type === "FOCUSOUT") {
+                const isStillInComponent = this.isFocusWithinComponent(e.relatedTarget);
+                if (!isStillInComponent) {
+                    this.handleClassList(itemMenu, "remove", "open");
+                    if (menuPosition === "left") {
+                        this.handleClassList(itemMenu, "remove", "left");
+                    }
+                    else if (menuPosition === "right") {
+                        this.handleClassList(itemMenu, "remove", "right");
+                    }
+                }
+            }
+        }
+    }
+    isFocusWithinComponent(relatedTarget) {
+        if (!relatedTarget)
+            return false;
+        const target = relatedTarget;
+        const isInLightDOM = this.el.contains(target);
+        const isInShadowDOM = this.el.shadowRoot?.contains(target);
+        const rootNode = target.getRootNode();
+        if (rootNode instanceof ShadowRoot) {
+            const shadowRoot = rootNode;
+            if (this.el.contains(shadowRoot.host)) {
+                return true;
+            }
+        }
+        return isInLightDOM || isInShadowDOM;
+    }
+    handleLabelWrapper() {
+        const labelWrapper = this.el.shadowRoot.querySelector(".label__wrapper");
+        const navItem = this.getNavBarItem();
+        const slot = labelWrapper.querySelector("slot");
+        if (!slot.assignedNodes().length) {
+            navItem.classList.add("removeLabel");
+        }
+        else if (this.showLabel && navItem.classList.contains("removeLabel")) {
+            navItem.classList.remove("removeLabel");
+        }
+    }
+    handleItemGap() {
+        const innerContentWrapper = this.el.shadowRoot.querySelector(".navbar__item");
+        const numberIndicatorWrapper = innerContentWrapper.querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");
+        if (this.numberIndicator || this.dotIndicator) {
+            this.handleClassList(numberIndicatorWrapper, "add", "no-gap");
+        }
+        else {
+            this.handleClassList(numberIndicatorWrapper, "remove", "no-gap");
+        }
+    }
+    removeEmptyItem() {
+        const hostElement = this.el.shadowRoot.host;
+        if (!this.showLabel && !this.icon) {
+            this.handleClassList(hostElement, "add", "hidden");
+        }
+    }
+    handleKeyDown(event) {
+        if (event.key === "Enter") {
+            event.stopPropagation();
+            event.preventDefault();
+            this.toggleItemMenu();
+        }
+    }
+    render() {
+        return (h("div", { key: '2bcccf240e9ce0308d281cfbfc5d22a8677a7830', tabIndex: 1, class: "container", onMouseLeave: (e) => this.handleNestedLayerMenu(e), onKeyDown: (e) => this.handleKeyDown(e), onMouseEnter: (e) => this.handleNestedLayerMenu(e) }, h("div", { key: '99a92987a40dd38c6c9da8b04d8ae6edcec46e04', class: "sub__layer-back-button" }, h("div", { key: 'e67038880035a8bafc1d89f803931ee00f590eea', class: "back__button-wrapper", onClick: () => this.returnToFirstLayer() }, h("ifx-icon", { key: '435b42c5d628b83275013c823208778c58cf898e', icon: "arrow-left-16" }), h("span", { key: '2cfb159f89758d20d88a52d3281c9e66ef2bab9a' }, "Back"))), h("a", { key: '87abc9ea447a554e7784cd2cb74a8a3f021f4356', tabindex: -1, href: sanitizeHref(this.internalHref), target: this.target, onClick: () => this.toggleItemMenu(), class: `navbar__item ${this.isSidebarMenuItem ? "sidebarMenuItem" : ""} ${!this.showLabel ? "removeLabel" : ""} ${this.isMenuItem ? "menuItem" : ""} ${this.hasChildNavItems ? "isParent" : ""}` }, h("div", { key: '29225ad8810ae3ee038092f76bd04db72fa881b4', class: "inner__content-wrapper" }, h("div", { key: '92d4d1c1997b86658e43d53d1309a6c05f7849e3', class: `navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? "removeWrapper" : ""}` }, this.icon && h("ifx-icon", { key: 'cef01aff96847ef6d4b2ba74023eff5b82b4131d', icon: this.icon }), this.icon && !this.showLabel && !isNaN(this.numberIndicator) && (h("div", { key: '240c1b0a600a6ab634581250f56e44eebb0d54e4', class: "number__indicator-wrapper" }, h("ifx-indicator", { key: '3cbc6efb5172864f35b3224c1b921b3bb8181997', variant: "number", number: this.numberIndicator }))), this.icon &&
+            !this.showLabel &&
+            !this.numberIndicator &&
+            this.dotIndicator && h("div", { key: 'd0f16c2893859b939b2316e7ba9a4f7126fc7de2', class: "dot__indicator-wrapper" })), this.itemPosition === "left" &&
+            this.hasChildNavItems &&
+            this.isMenuItem && (h("div", { key: '4dcd566c358e6285bf8a275eac56a5de0cf1197c', class: "menuItemLeftIconWrapper" }, h("ifx-icon", { key: '37069b757fdc25495bb5aca81a434104fec35311', icon: "chevron-left-16" }))), h("span", { key: '8516b603d6ee8ad6796f6aaa94a4cd92a03fb46c', class: "label__wrapper" }, h("slot", { key: '2d7ba632941a8e0d8b8b68813e2752a59f937f6d' }))), this.showLabel &&
+            this.numberIndicator &&
+            !isNaN(this.numberIndicator) ? (h("div", { class: "number__indicator-wrapper" }, h("ifx-indicator", { variant: "number", number: this.numberIndicator }))) : (""), this.showLabel && !this.numberIndicator && this.dotIndicator ? (h("ifx-indicator", { variant: "dot" })) : (""), h("div", { key: 'a5251b1e58e7c0c4c61ed35926eb12841f565364', class: `navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? "" : "hide"}` }, h("ifx-icon", { key: '5ec54e3b9f3eb13d16baf3e6f6367681e5484ecf', icon: "chevron-down-16" })), h("div", { key: '722ace4f339c04989f2bfa0f91002e0b01a21c9f', class: `menuItemRightIconWrapper ${(this.itemPosition === "right" && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems) ? "" : "hide"}` }, h("ifx-icon", { key: '8c47300d572afa572f7130cbf52ab22af35be438', icon: "chevron-right-16" }))), this.hasChildNavItems && !this.isSidebarMenuItem && (h("ul", { key: '9f9daf6b2d146c5656946d7f83ab14d8349e118a', class: "navbar-menu" }, " ", h("slot", { key: '6f6501179142ab94aa847a2cf0064f1ad1c706d5', name: "first__layer" }), " ")), this.isSidebarMenuItem && (h("ul", { key: '9a237b5234425f66559982cfcc7c13f742864769', class: "sub__layer-menu" }, " ", h("slot", { key: 'fb11deed83a5acf3559c94516e21d1bc26496c54', name: "second__layer" }), " "))));
+    }
+};
+NavbarItem.style = navbarItemCss();
+
+export { NavbarItem as ifx_navbar_item };

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

@@ -0,0 +1,171 @@
+import { r as registerInstance, a as getElement, h } from './index-CY4s4b6R.js';
+import { s as sanitizeHref } from './url-utils-QgsB_-OM.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}.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:0 1px 1px 0 rgba(29, 29, 29, 0.12), 0 0 1px 0 rgba(29, 29, 29, 0.12);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) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Whether to show the user name label next to the avatar. */
+    showLabel = true;
+    /** URL the avatar item should navigate to when clicked. */
+    href = "";
+    /** Image URL used for the avatar. */
+    imageUrl = "";
+    /** Where to open the link (same tab, new tab, etc.). */
+    target = "_self";
+    /** Alternative text for the avatar image. */
+    alt = "";
+    /** Displayed user name associated with the avatar. */
+    userName = "";
+    internalHref = "";
+    isMenuItem = false;
+    hasChildNavItems = false;
+    internalImageUrl = { type: "", value: "" };
+    defaultProfileImage = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="#0A8276"/>
+<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"/>
+</svg>`;
+    handleOutsideClick(event) {
+        const path = event.composedPath();
+        const itemMenu = this.getItemMenu();
+        if (itemMenu) {
+            if (itemMenu.classList.contains("open")) {
+                if (!path.includes(this.el)) {
+                    this.closeItemMenu();
+                }
+            }
+        }
+    }
+    componentWillLoad() {
+        this.setHref();
+        this.setImage();
+        const sidebarItems = this.getNavbarItems();
+        if (sidebarItems.length !== 0) {
+            this.hasChildNavItems = true;
+        }
+        else {
+            this.hasChildNavItems = false;
+        }
+    }
+    componentDidLoad() {
+        this.setProfileGap();
+        if (this.hasChildNavItems) {
+            const navItems = this.getNavbarItems();
+            this.appendNavItemToMenu(navItems);
+        }
+    }
+    /** Hides this avatar item component. */
+    async hideComponent() {
+        this.el.style.display = "none";
+    }
+    /** Shows this avatar item component. */
+    async showComponent() {
+        this.el.style.display = "";
+    }
+    handleClassList(el, type, className) {
+        el.classList[type](className);
+        if (type === "contains") {
+            return el.classList.contains(className);
+        }
+    }
+    getNavbarItems() {
+        const navItems = this.el.querySelectorAll("ifx-navbar-item");
+        return navItems;
+    }
+    getNavBarItem() {
+        const navItem = this.el.shadowRoot.querySelector(".navbar__item");
+        return navItem;
+    }
+    relocateUsingSlot(navItems) {
+        navItems.forEach((item) => {
+            item.setAttribute("slot", "first__layer");
+        });
+    }
+    appendNavItemToMenu(navItems) {
+        this.relocateUsingSlot(navItems);
+    }
+    isValidHttpUrl(string) {
+        let url;
+        try {
+            url = new URL(string);
+        }
+        catch (_) {
+            return false;
+        }
+        return url.protocol === "http:" || url.protocol === "https:";
+    }
+    setImage() {
+        if (this.imageUrl.toLowerCase().trim() === "") {
+            this.internalImageUrl = { type: undefined, value: "" };
+        }
+        else if (this.isValidHttpUrl(this.imageUrl)) {
+            this.internalImageUrl = { type: "url", value: this.imageUrl };
+        }
+        else {
+            this.internalImageUrl = { type: "initials", value: this.imageUrl };
+        }
+    }
+    setHref() {
+        if (this.href.toLowerCase().trim() === "") {
+            this.internalHref = undefined;
+        }
+        else
+            this.internalHref = this.href;
+    }
+    setProfileGap() {
+        const innerContentWrapper = this.el.shadowRoot.querySelector(".inner__content-wrapper");
+        const labelWrapper = this.el.shadowRoot.querySelector(".label__wrapper");
+        const labelSlot = labelWrapper.querySelector("slot");
+        const nodes = labelSlot.assignedNodes();
+        if (!nodes.length) {
+            this.handleClassList(innerContentWrapper, "add", "no-gap");
+        }
+        else {
+            this.handleClassList(innerContentWrapper, "remove", "no-gap");
+        }
+    }
+    getItemMenu() {
+        const menu = this.el.shadowRoot.querySelector(".navbar-menu");
+        return menu;
+    }
+    closeItemMenu() {
+        const itemMenu = this.getItemMenu();
+        const menuItem = this.getNavBarItem();
+        if (itemMenu) {
+            this.handleClassList(itemMenu, "remove", "open");
+            this.handleClassList(menuItem, "remove", "open");
+        }
+    }
+    toggleItemMenu() {
+        if (!this.internalHref) {
+            if (this.isMenuItem && this.hasChildNavItems) {
+                const itemMenu = this.getItemMenu();
+                this.handleClassList(itemMenu, "add", "right");
+            }
+            if (this.hasChildNavItems) {
+                const itemMenu = this.getItemMenu();
+                const menuItem = this.getNavBarItem();
+                this.handleClassList(itemMenu, "toggle", "open");
+                this.handleClassList(menuItem, "toggle", "open");
+            }
+        }
+    }
+    handleProfileMenuKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.toggleItemMenu();
+        }
+    };
+    render() {
+        return (h("div", { key: '9bc7f38063db4841251257ef3646c3c79f41869a', class: "container" }, h("a", { key: 'defc417da894b54dc7e94b810d9b5cb2a3f0c15c', href: sanitizeHref(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: 'd4863e77c74980bf2c7932ac4ae1af1f6e0104a1', class: "inner__content-wrapper" }, h("div", { key: 'a4a859cd5a531a9ec2f57f3b869846e764dc485a', class: `navbar__container-right-content-navigation-item-icon-wrapper` }, this.userName.trim() !== "" && (h("div", { key: '0fd4e968faf1bdf9ef1de69b9aa179406543e1c5', class: "username__tooltip" }, this.userName)), this.internalImageUrl.type !== "initials" && (h("img", { key: 'ad8c108ecfc62de0e6beff5eae6c8c5b91a82df4', 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: 'a3363231180180ef0fd9a04e08bffb36b0359955', class: "initials__wrapper" }, h("span", { key: '1bfa338a7375d027fa15b4e1b7411d3bbae93147', class: "initials" }, this.internalImageUrl.value)))), h("span", { key: 'f46fed15aa2e5f53e0bb704a38b044f61ffedad6', class: "label__wrapper" }, h("slot", { key: 'c76509df2fcce4f255f73f4622ed22b7c87b7501', onSlotchange: () => this.setProfileGap() })))), this.hasChildNavItems && (h("ul", { key: 'd12f6e1dbda4b1f3f00697c0886ecb0d079f619e', class: "navbar-menu rightSideItemMenu" }, " ", h("slot", { key: 'dec68286746ee02021bac70d5b5478e275f86396', name: "first__layer" }), " "))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+NavbarProfile.style = navbarItemCss();
+
+export { NavbarProfile as ifx_navbar_profile };