import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { B as BEM } from './bem.js';
import { b as balBrowser } from './browser.js';
import { a as wait } from './helpers.js';
import { B as BalScrollHandler } from './scroll.js';
import { d as defineCustomElement$5 } from './bal-button2.js';
import { d as defineCustomElement$4 } from './bal-icon2.js';
import { d as defineCustomElement$3 } from './bal-logo2.js';
import { d as defineCustomElement$2 } from './bal-spinner2.js';
import { d as defaultConfig } from './config.default.js';
import { L as ListenToConfig } from './config.decorator.js';

const i18nBalNavbarBrand = {
    en: {
        logoButtonLabel: 'To Homepage',
    },
    fr: {
        logoButtonLabel: 'Vers la page d’accueil',
    },
    it: {
        logoButtonLabel: 'Alla pagina principale',
    },
    nl: {
        logoButtonLabel: 'Naar de startpagina',
    },
    es: {
        logoButtonLabel: 'A la página principal',
    },
    pt: {
        logoButtonLabel: 'Para a página inicial',
    },
    sv: {
        logoButtonLabel: 'Till startsidan',
    },
    fi: {
        logoButtonLabel: 'Etusivulle',
    },
    de: {
        logoButtonLabel: 'Zur Startseite',
    },
    pl: {
        logoButtonLabel: 'Na stronę główną',
    },
};

const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.balNavigate = createEvent(this, "balNavigate", 7);
        this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
        this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
        this.bodyScrollHandler = new BalScrollHandler();
        this.language = defaultConfig.language;
        this.isMenuActive = false;
        /**
         * Link of the logo / title.
         */
        this.href = '';
        /**
         * If `true` the logo is rendered as a button
         */
        this.logoClickable = false;
        /**
         * Specifies where to display the linked URL.
         * Only applies when an `href` is provided.
         */
        this.target = '_self';
        /**
         * @deprecated Use interface on bal-navbar instead.
         * If `true` the navbar does not have a mobil version. Only shows logo and an app title.
         */
        this.simple = false;
        /**
         * Size of the logo SVG
         */
        this.logoSize = '';
        /**
         * Defines if the logo animation should be active
         */
        this.animated = true;
        /**
         * @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';
    }
    connectedCallback() {
        this.bodyScrollHandler.connect();
    }
    componentWillLoad() {
        if (balBrowser.hasWindow && window.matchMedia) {
            window.matchMedia('(min-width: 960px)').addEventListener('change', this.resetIsMenuActive.bind(this));
        }
    }
    disconnectedCallback() {
        this.bodyScrollHandler.disconnect();
    }
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
    }
    async resetIsMenuActive(ev) {
        if (ev.matches && !this.simple) {
            this.setIsMenuActiveAndAnimate(false);
        }
    }
    /**
     * @internal
     */
    async toggle() {
        await this.setIsMenuActiveAndAnimate(!this.isMenuActive);
    }
    async setIsMenuActiveAndAnimate(isMenuActive = this.isMenuActive) {
        this.isMenuActive = isMenuActive;
        this.balWillAnimate.emit(this.isMenuActive);
        if (balBrowser.hasWindow && window.scrollY > 0) {
            window.scrollTo(0, 0);
        }
        if (this.isMenuActive) {
            this.bodyScrollHandler.disable();
        }
        else {
            this.bodyScrollHandler.enable();
        }
        const navbar = this.el.closest('bal-navbar');
        if (navbar) {
            const navbarMenuElement = navbar.querySelector('bal-navbar-menu');
            if (navbarMenuElement && !this.simple) {
                await navbarMenuElement.toggle(this.isMenuActive);
            }
        }
        // wait for the default animation time to ensure
        // the line of the tabs is at the correct position
        await wait(300);
        this.balDidAnimate.emit(this.isMenuActive);
    }
    async onClick() {
        this.toggle();
    }
    render() {
        const navbarBrandEl = BEM.block('navbar').element('brand');
        const logoTemplate = this.logo ? (h("img", { class: Object.assign(Object.assign({}, navbarBrandEl.element('logo').class()), navbarBrandEl
                .element('logo')
                .modifier('small')
                .class(this.logoSize === 'small')), src: this.logo, alt: "Logo" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
        const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
        return (h(Host, { key: 'a15da2fb97dbef0b32324709d548fe38af7fa84b', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '9c70804fe300d6f0b17bee14bb356078db7b587d', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '53e5729ff4823597e8407a0f7dbacc86696d34aa' })), h("bal-button", { key: '5b0d8585d122add66365aef3f9f0a6f27e72212f', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                .element('burger')
                .modifier('hidden')
                .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));
    }
    get el() { return this; }
}, [260, "bal-navbar-brand", {
        "href": [1],
        "rel": [1],
        "logoClickable": [4, "logo-clickable"],
        "logoLabel": [1, "logo-label"],
        "target": [1],
        "simple": [4],
        "logo": [1],
        "logoSize": [1, "logo-size"],
        "animated": [4],
        "interface": [1],
        "language": [32],
        "isMenuActive": [32],
        "configChanged": [64],
        "toggle": [64]
    }]);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], NavbarBrand.prototype, "configChanged", null);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-navbar-brand", "bal-button", "bal-icon", "bal-logo", "bal-spinner"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-navbar-brand":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NavbarBrand);
            }
            break;
        case "bal-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "bal-logo":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalNavbarBrand = NavbarBrand;
const defineCustomElement = defineCustomElement$1;

export { BalNavbarBrand, defineCustomElement };
