import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { d as deepReady } from './helpers.js';
import { B as BEM } from './bem.js';
import { b as balBreakpoints } from './breakpoints.subject.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator.js';

const NavbarMenu = /*@__PURE__*/ proxyCustomElement(class NavbarMenu extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        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' })));
    }
    get element() { return this; }
}, [260, "bal-navbar-menu", {
        "interface": [1],
        "isMenuActive": [32],
        "isTouch": [32],
        "toggle": [64]
    }]);
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], NavbarMenu.prototype, "breakpointListener", null);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-navbar-menu"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-navbar-menu":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NavbarMenu);
            }
            break;
    } });
}

const BalNavbarMenu = NavbarMenu;
const defineCustomElement = defineCustomElement$1;

export { BalNavbarMenu, defineCustomElement };
