import { h, } from "@stencil/core";
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: '5166c460ec2bf5640b635d746cf93e8f82eca1a5', tabIndex: 1, class: "container", onMouseLeave: (e) => this.handleNestedLayerMenu(e), onKeyDown: (e) => this.handleKeyDown(e), onMouseEnter: (e) => this.handleNestedLayerMenu(e) }, h("div", { key: 'ab69752effe1eae70b0a00420e8652e3163d23c1', class: "sub__layer-back-button" }, h("div", { key: '64409a9e43948d1e7286ba3b15360c7fae3c6e25', class: "back__button-wrapper", onClick: () => this.returnToFirstLayer() }, h("ifx-icon", { key: '2a667c5305d1df5cea2ee668490d8f62968a8d1b', icon: "arrow-left-16" }), h("span", { key: 'b44f4f336340603565ac79d72825e779f9ddb495' }, "Back"))), h("a", { key: '20f0bb06468444dcfb397b3eb4f5bea62734075b', 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" : ""}` }, h("div", { key: '1d6737afb7d3350e74ecd97d32c93dfe382b93a0', class: "inner__content-wrapper" }, h("div", { key: 'e14220c17e89c3b40e39c3efc85ef7cb5ee3c075', class: `navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? "removeWrapper" : ""}` }, this.icon && h("ifx-icon", { key: '51cbec0423b87fee707b7f340e456dea3c7df363', icon: this.icon }), this.icon && !this.showLabel && !isNaN(this.numberIndicator) && (h("div", { key: 'f26960e079b875bba3b375da8ea9c4d9ecc23f12', class: "number__indicator-wrapper" }, h("ifx-indicator", { key: 'bad34c100364af6def53fbd8ed60572826b33156', variant: "number", number: this.numberIndicator }))), this.icon &&
            !this.showLabel &&
            !this.numberIndicator &&
            this.dotIndicator && h("div", { key: 'dadcba72f9a69bfeb23f00cb5b0c3856b43ad93a', class: "dot__indicator-wrapper" })), this.itemPosition === "left" &&
            this.hasChildNavItems &&
            this.isMenuItem && (h("div", { key: 'def0ff9be091510459f20df9bca44d72d8307a99', class: "menuItemLeftIconWrapper" }, h("ifx-icon", { key: 'b2f3995ff4614ce76920179765460af77985fc29', icon: "chevron-left-16" }))), h("span", { key: '9536bf756eb0a8a0408be574f9415630b833eecc', class: "label__wrapper" }, h("slot", { key: '6f7b403514ea175fc5d4c7e307674ea7f77702c9' }))), 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: 'b47f0ba18a717b07236a2539aace37f0d72ca521', class: `navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? "" : "hide"}` }, h("ifx-icon", { key: 'e3ac1db17f1af19e05db4d95b7db7cb8f59db57e', icon: "chevron-down-16" })), h("div", { key: '9b9e5a5432fcb4358841bb7eab81942061416285', class: `menuItemRightIconWrapper ${(this.itemPosition === "right" && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems) ? "" : "hide"}` }, h("ifx-icon", { key: '52c1ed19a44051436d886fce0b88861110353bf3', icon: "chevron-right-16" }))), this.hasChildNavItems && !this.isSidebarMenuItem && (h("ul", { key: '396c62d445e5dd708de489e17da9eb7d2cc23722', class: "navbar-menu" }, " ", h("slot", { key: 'd56cbf3dbc582ab976975a474da445d6b4fe9c78', name: "first__layer" }), " ")), this.isSidebarMenuItem && (h("ul", { key: 'd7b1b01751bde32cc1e52168c7f33223014a930a', class: "sub__layer-menu" }, " ", h("slot", { key: '54cce9619ce29e4c8efb8bcd9a32ac903cce2010', 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
            }];
    }
}
