import { __decorate, __metadata } from "tslib";
import { h, Host } from "@stencil/core";
import { deepReady } from "../../../utils/helpers";
import { BEM } from "../../../utils/bem";
import { ListenToBreakpoints, balBreakpoints } from "../../../utils/breakpoints";
export class NavbarMenu {
    constructor() {
        this.isMenuActive = false;
        this.isTouch = balBreakpoints.isTouch;
        /**
         * @internal
         * Defines the type of navbar. App is used for almost every web applications
         * like the portal app. For our sales funnel we recommend to use the simple navbar.
         * Meta and main are used for the website.
         */
        this.interface = 'app';
    }
    breakpointListener(breakpoints) {
        this.isTouch = breakpoints.touch;
    }
    /**
     * @internal - If the menu is open it closes it and the other way around.
     */
    async toggle(isMenuActive) {
        this.isMenuActive = isMenuActive;
        const tabsElement = this.element.querySelector('bal-tabs');
        if (tabsElement) {
            await deepReady(tabsElement);
            tabsElement.renderLine();
        }
    }
    render() {
        const menuEl = BEM.block('navbar').element('menu');
        let container = '';
        if (this.isTouch) {
            const navbarEl = this.element.closest('bal-navbar');
            if (navbarEl) {
                container = navbarEl.container;
            }
        }
        return (h(Host, { key: 'e3632d31af2bf0bbd0bc416c40ff17ed7cd3a74f', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: '63897a0b6c61e222fc3f87051c1f4cf89d27be5a' })));
    }
    static get is() { return "bal-navbar-menu"; }
    static get properties() {
        return {
            "interface": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalNavbarInterface",
                    "resolved": "\"app\" | \"simple\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Defines the type of navbar. App is used for almost every web applications\nlike the portal app. For our sales funnel we recommend to use the simple navbar.\nMeta and main are used for the website."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "interface",
                "defaultValue": "'app'"
            }
        };
    }
    static get states() {
        return {
            "isMenuActive": {},
            "isTouch": {}
        };
    }
    static get methods() {
        return {
            "toggle": {
                "complexType": {
                    "signature": "(isMenuActive: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "isMenuActive",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "- If the menu is open it closes it and the other way around."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "element"; }
}
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], NavbarMenu.prototype, "breakpointListener", null);
