'use strict';

var index = require('./index-feA4skrY.js');
var bem = require('./bem-p0PWVN8n.js');
var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
var browser = require('./browser-BwmkTmm8.js');
var helpers = require('./helpers-HuaiWXrB.js');
var scroll = require('./scroll-B_kvfDui.js');
var config_default = require('./config.default-Cko-wpRU.js');
var config_decorator = require('./config.decorator-CUe4yCTd.js');
var breakpoints_subject = require('./breakpoints.subject-CXJYXMpo.js');
var breakpoints_decorator = require('./breakpoints.decorator-C7C_2t01.js');
require('./config.utils-Civnz2jT.js');
require('./log-CXDMiw7o.js');
require('./device-CoogBamh.js');
require('./listener-DspXpqzY.js');
require('./tokens.esm-wVc8fBNC.js');

const balNavbarCss = ":root{--bal-navbar-background:var(--bal-color-primary);--bal-navbar-light-background:var(--bal-color-white);--bal-navbar-active-menu-background:var(--bal-color-white);--bal-navbar-height:4rem;--bal-navbar-height-desktop:5rem;--bal-navbar-brand-title-text-color:var(--bal-color-text-white);--bal-navbar-brand-title-font-size:var(--bal-text-size-medium);--bal-navbar-brand-title-light-text-color:var(--bal-color-text-primary);--bal-navbar-brand-text-color:var(--bal-color-text-white);--bal-navbar-brand-logo-link-color:var(--bal-color-text-white)}.bal-navbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block}.bal-navbar--context-app:not(.bal-navbar--is-light),.bal-navbar--context-simple:not(.bal-navbar--is-light){background:var(--bal-navbar-background)}.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height);max-height:var(--bal-navbar-height)}@media screen and (min-width: 1024px){.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height-desktop);max-height:var(--bal-navbar-height-desktop)}}.bal-navbar__nav{display:-ms-flexbox;display:flex;height:100%;gap:1rem}.bal-navbar__brand{-ms-flex:1;flex:1;gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}@media screen and (min-width: 1024px){.bal-navbar__brand{-ms-flex:initial;flex:initial}}.bal-navbar__brand>a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%}.bal-navbar__brand__logo{height:calc(100% - 1rem);-o-object-fit:contain;object-fit:contain}@media screen and (min-width: 1024px){.bal-navbar__brand__logo{height:calc(100% - 2rem)}}.bal-navbar__brand__logo--small{height:calc(100% - 2.5rem)}@media screen and (min-width: 1024px){.bal-navbar__brand__logo--small{height:calc(100% - 3.5rem)}}.bal-navbar__brand__title{display:none;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-navbar__brand__title>bal-logo{display:none}@media screen and (min-width: 769px),print{.bal-navbar__brand__title{display:inline-block;font-size:var(--bal-navbar-brand-title-font-size);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);color:var(--bal-navbar-brand-title-text-color)}}@media screen and (min-width: 1024px){.bal-navbar__brand__title{font-size:var(--bal-navbar-brand-title-font-size)}}.bal-navbar__brand--context-app,.bal-navbar__brand--context-simple{color:var(--bal-navbar-brand-text-color)}.bal-navbar__brand--context-app>a,.bal-navbar__brand--context-simple>a{color:var(--bal-navbar-brand-logo-link-color)}.bal-navbar__menu{position:static;display:none;z-index:var(--bal-z-index-navigation)}@media screen and (max-width: 1023px){.bal-navbar__menu--active{position:fixed !important;display:block;background:var(--bal-navbar-active-menu-background)}}@media screen and (max-width: 1023px){.bal-navbar__menu--context-app{padding-top:1rem;padding-bottom:1rem;overflow-y:auto;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:4rem;left:0;bottom:0;right:0}}@media screen and (min-width: 1024px){.bal-navbar__menu{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;gap:1rem;padding-right:0 !important}}.bal-navbar__menu--context-simple{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex:1;flex:1;gap:1rem}.bal-navbar__menu__start{display:block;margin-bottom:1rem}@media screen and (min-width: 1024px){.bal-navbar__menu__start{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:.5rem;margin-bottom:0}}.bal-navbar__menu__start--context-simple{display:none}.bal-navbar__menu__start--context-meta{-ms-flex-pack:start;justify-content:flex-start}.bal-navbar__menu__end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;gap:.5rem}.bal-navbar__menu__end .button-label{word-break:keep-all !important}.bal-navbar__menu__end .bal-button-group{width:100%}@media screen and (max-width: 1023px){.bal-navbar__menu__end .bal-button-group{margin-top:2rem}}.bal-navbar__menu__end--context-simple>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}.bal-navbar__menu__end>.field{-ms-flex:1;flex:1}@media screen and (min-width: 1024px){.bal-navbar__menu__end>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}.bal-navbar--is-light{background-color:var(--bal-navbar-light-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal)}.bal-navbar--is-light .bal-navbar__brand__title{color:var(--bal-navbar-brand-title-light-text-color)}.bal-navbar--is-light bal-logo svg svg,.bal-navbar--is-light bal-logo svg g,.bal-navbar--is-light bal-logo svg path,.bal-navbar--is-light bal-logo svg circle{fill:var(--bal-color-primary)}.bal-navbar__brand__burger.bal-button{margin-left:auto}@media screen and (min-width: 1024px){.bal-navbar__brand__burger.bal-button{display:none}}.bal-navbar__brand__burger--hidden.bal-button{display:none !important}";

const Navbar = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * It `true` the navbar has a white background. Always use the blue header.
         */
        this.light = false;
        /**
         * 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';
        /**
         * Sets the content content width with the regular container classes
         */
        this.container = '';
    }
    interfaceHandler() {
        this.updateProps(['bal-navbar-brand', 'bal-navbar-menu', 'bal-navbar-menu-start', 'bal-navbar-menu-end'], 'interface');
    }
    /**
     * Toggles the menu on request method can be used from outside to open or close the menu
     */
    async toggleMenu() {
        const brand = this.element.querySelector('bal-navbar-brand');
        if (brand) {
            await brand.toggle();
        }
    }
    componentWillLoad() {
        this.interfaceHandler();
    }
    updateProps(selectors, key) {
        const value = this[key];
        if (value !== undefined) {
            this.notifyComponents(selectors, input => (input[key] = value));
        }
    }
    notifyComponents(selectors, callback) {
        const components = this.element.querySelectorAll(selectors.join(', '));
        components.forEach(c => callback(c));
    }
    render() {
        const navbarEl = bem.BEM.block('navbar');
        return (index.h(index.Host, { key: 'd21b6f612b2111ce0a70adb00e62fc7663d1b651', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, index.h("nav", { key: 'c04d357d30be897227259035bd86e2f5a7edc936', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, index.h("slot", { key: '48fba6d236e2dfdbf7d0ae23d76b290f63692ba6' }))));
    }
    get element() { return index.getElement(this); }
    static get watchers() { return {
        "interface": ["interfaceHandler"]
    }; }
};
Navbar.style = balNavbarCss;

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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.balNavigate = index.createEvent(this, "balNavigate");
        this.balWillAnimate = index.createEvent(this, "balWillAnimate");
        this.balDidAnimate = index.createEvent(this, "balDidAnimate");
        this.bodyScrollHandler = new scroll.BalScrollHandler();
        this.language = config_default.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 (browser.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 (browser.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 helpers.wait(300);
        this.balDidAnimate.emit(this.isMenuActive);
    }
    async onClick() {
        this.toggle();
    }
    render() {
        const navbarBrandEl = bem.BEM.block('navbar').element('brand');
        const logoTemplate = this.logo ? (index.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" })) : (index.h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
        const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
        return (index.h(index.Host, { key: 'a15da2fb97dbef0b32324709d548fe38af7fa84b', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (index.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 ? (index.h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), index.h("span", { key: '9c70804fe300d6f0b17bee14bb356078db7b587d', class: Object.assign({}, navbarBrandEl.element('title').class()) }, index.h("slot", { key: '53e5729ff4823597e8407a0f7dbacc86696d34aa' })), index.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 index.getElement(this); }
};
tslib_es6.__decorate([
    config_decorator.ListenToConfig(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", Promise)
], NavbarBrand.prototype, "configChanged", null);

const NavbarMenu = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.isMenuActive = false;
        this.isTouch = breakpoints_subject.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 helpers.deepReady(tabsElement);
            tabsElement.renderLine();
        }
    }
    render() {
        const menuEl = bem.BEM.block('navbar').element('menu');
        let container = '';
        if (this.isTouch) {
            const navbarEl = this.element.closest('bal-navbar');
            if (navbarEl) {
                container = navbarEl.container;
            }
        }
        return (index.h(index.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 !== '' }) }, index.h("slot", { key: '63897a0b6c61e222fc3f87051c1f4cf89d27be5a' })));
    }
    get element() { return index.getElement(this); }
};
tslib_es6.__decorate([
    breakpoints_decorator.ListenToBreakpoints(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", void 0)
], NavbarMenu.prototype, "breakpointListener", null);

const NavbarMenuEnd = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * @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';
    }
    render() {
        const menuEndEl = bem.BEM.block('navbar').element('menu').element('end');
        return (index.h(index.Host, { key: '704fe4c50701625f0160aa39a79a5fc3e2f9debb', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: '05737e744803b4b62906ab835d555d1c9cc6cf98' })));
    }
};

const NavbarMenuStart = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * @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';
    }
    render() {
        const menuStartEl = bem.BEM.block('navbar').element('menu').element('start');
        return (index.h(index.Host, { key: 'b53e1c198366eeca89e5d71bf52af297902307a8', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: '3e123a521d151135d72001d1b3ac703d236a4c8f' })));
    }
};

exports.bal_navbar = Navbar;
exports.bal_navbar_brand = NavbarBrand;
exports.bal_navbar_menu = NavbarMenu;
exports.bal_navbar_menu_end = NavbarMenuEnd;
exports.bal_navbar_menu_start = NavbarMenuStart;
