@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,812 @@
+import { h, } from "@stencil/core";
+import { sanitizeHref } from "../../../shared/utils/url-utils";
+export class NavbarItem {
+    el;
+    /** 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" }), " "))));
+    }
+    static get is() { return "ifx-navbar-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["navbar-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["navbar-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the label text next to the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display for this navigation item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "\"\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL the navigation item should navigate to when clicked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "\"\""
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to open the link (same tab, new tab, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "\"_self\""
+            },
+            "hideOnMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, hides this item on mobile viewports."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-on-mobile",
+                "defaultValue": "true"
+            },
+            "numberIndicator": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number badge shown as an indicator on the item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number-indicator"
+            },
+            "dotIndicator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows a simple dot indicator instead of a number."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot-indicator",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalHref": {},
+            "isMenuItem": {},
+            "hasChildNavItems": {},
+            "isSidebarMenuItem": {},
+            "itemPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxNavItem",
+                "name": "ifxNavItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the navigation item is activated or clicked."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hideComponent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides this navigation item component.",
+                    "tags": []
+                }
+            },
+            "showComponent": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows this navigation item component.",
+                    "tags": []
+                }
+            },
+            "toggleChildren": {
+                "complexType": {
+                    "signature": "(action: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "action",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles visibility of the child menu and its arrow icon.",
+                    "tags": []
+                }
+            },
+            "moveChildComponentsIntoSubLayerMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLIfxNavbarItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLIfxNavbarItemElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Moves child nav items into the sub-layer menu (e.g. for mobile view).",
+                    "tags": []
+                }
+            },
+            "toggleFirstLayerItem": {
+                "complexType": {
+                    "signature": "(actionOne: any, actionTwo: any) => Promise<void>",
+                    "parameters": [{
+                            "name": "actionOne",
+                            "type": "any",
+                            "docs": ""
+                        }, {
+                            "name": "actionTwo",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles visibility between the first layer item and its second-layer menu.",
+                    "tags": []
+                }
+            },
+            "addMenuItemClass": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Marks this item as a menu entry and shows the right-arrow icon if needed.",
+                    "tags": []
+                }
+            },
+            "moveChildComponentsBackIntoNavbar": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLIfxNavbarItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLIfxNavbarItemElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Moves child components back into the main navbar from the sub-layer menu.",
+                    "tags": []
+                }
+            },
+            "returnToFirstLayer": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Returns this item from a deeper layer back to its first-layer state.",
+                    "tags": []
+                }
+            },
+            "setMenuItemPosition": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the menu item position (left or right) based on its menu placement.",
+                    "tags": []
+                }
+            },
+            "setItemSideSpecifications": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Applies side-specific classes when the item is placed on the right side.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mousedown",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}