import { h } from "@stencil/core";
export class BreadcrumbItem {
    isLastItem = false;
    el;
    emittedElement;
    uniqueId;
    hasDropdownMenu = false;
    handleOutsideClick(event) {
        const path = event.composedPath();
        if (!path.includes(this.el)) {
            this.closeDropdownMenu();
        }
    }
    handleKeyDown(ev) {
        if (ev.key === "Enter" || ev.key === " ") {
            this.toggleDropdownMenu();
        }
        else if (ev.key === "Escape") {
            this.closeDropdownMenu();
        }
    }
    getDropdownMenu() {
        const dropdownMenu = this.el.shadowRoot.querySelector(".dropdown-menu");
        return dropdownMenu;
    }
    menuWrapperEventReEmitter(event) {
        this.emittedElement = event.detail;
    }
    getMenuIconWrapper() {
        return this.emittedElement;
    }
    handleClassList(el, type, className) {
        el.classList[type](className);
    }
    closeDropdownMenu() {
        if (this.hasDropdownMenu) {
            const dropdownMenu = this.getDropdownMenu();
            const menuWrapper = this.getMenuIconWrapper();
            this.handleClassList(dropdownMenu, "remove", "open");
            this.handleClassList(menuWrapper, "remove", "show");
        }
    }
    toggleDropdownMenu() {
        if (this.hasDropdownMenu) {
            const dropdownMenu = this.getDropdownMenu();
            const menuWrapper = this.getMenuIconWrapper();
            this.handleClassList(dropdownMenu, "toggle", "open");
            this.handleClassList(menuWrapper, "toggle", "show");
        }
    }
    isDropdownMenuOpen() {
        const dropdownMenu = this.getDropdownMenu();
        return (this.hasDropdownMenu &&
            dropdownMenu &&
            dropdownMenu.classList.contains("open"));
    }
    handleLastItem() {
        const breadcrumbItems = this.el
            .closest("ifx-breadcrumb")
            .querySelectorAll("ifx-breadcrumb-item");
        if (this.el === breadcrumbItems[breadcrumbItems.length - 1]) {
            this.isLastItem = true;
        }
        else
            this.isLastItem = false;
    }
    generateUniqueId(prefix = "id") {
        return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
    }
    componentWillLoad() {
        if (!this.uniqueId) {
            this.uniqueId = this.generateUniqueId("breadcrumb-dropdown");
        }
        this.handleLastItem();
    }
    componentDidUpdate() {
        this.handleLastItem();
    }
    componentWillRender() {
        this.setHasDropdownMenuState();
    }
    setHasDropdownMenuState() {
        const dropdownMenu = this.getIfxDropdownMenuComponent();
        if (dropdownMenu) {
            this.hasDropdownMenu = !!dropdownMenu;
        }
    }
    getIfxDropdownMenuComponent() {
        const dropdownMenu = this.el.querySelector("ifx-dropdown-menu");
        return dropdownMenu;
    }
    componentDidLoad() {
        const dropdownMenu = this.getIfxDropdownMenuComponent();
        if (!this.hasDropdownMenu) {
            const iconMenuWrapper = this.getMenuIconWrapper();
            this.handleClassList(iconMenuWrapper, "toggle", "hide");
        }
        else {
            dropdownMenu.isOpen = true;
        }
    }
    render() {
        return (h("li", { key: 'd83d61bd6fb635382acaf91aa77fbdb3770007b6', class: "breadcrumb-parent", "aria-current": `${this.isLastItem ? "page" : ""}` }, h("li", { key: '6a01833263f9a1f2b1c9b2bd85b1f59fff2e1785', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, h("slot", { key: '0c314ea1d2052638555805e2f6c559c8df76840f', name: "label" }), h("div", { key: '31978a0bccaee04b3000458fdf87313f962c78ec', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, h("slot", { key: '8255b900896ab4176143ed6d072316ab66c6c09b' }))), !this.isLastItem && (h("span", { key: '15f98d6e97251204b2b1d7e7a502a994ef32ad1e', class: "breadcrumb-divider", "aria-hidden": "true" }, "/"))));
    }
    static get is() { return "ifx-breadcrumb-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["breadcrumb-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["breadcrumb-item.css"]
        };
    }
    static get states() {
        return {
            "isLastItem": {},
            "uniqueId": {},
            "hasDropdownMenu": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "mousedown",
                "method": "handleOutsideClick",
                "target": "document",
                "capture": false,
                "passive": true
            }, {
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "breadcrumbMenuIconWrapper",
                "method": "menuWrapperEventReEmitter",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=breadcrumb-item.js.map
