import { h, proxyCustomElement, HTMLElement, createEvent, 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 { s as stopEventBubbling } from './form-input.js';
import { m as rIC, i as isDescendant, w as waitForComponent, e as waitAfterIdleCallback } from './helpers.js';
import { L as Logger } from './log.js';
import { B as BalScrollHandler } from './scroll.js';
import { s as sanitizeSvg } from './svg.js';
import { e as isTabKey } from './keyboard.helpers.js';
import { d as defineCustomElement$v } from './bal-badge2.js';
import { d as defineCustomElement$u } from './bal-button2.js';
import { d as defineCustomElement$t } from './bal-check2.js';
import { d as defineCustomElement$s } from './bal-checkbox2.js';
import { d as defineCustomElement$r } from './bal-close2.js';
import { d as defineCustomElement$q } from './bal-heading2.js';
import { d as defineCustomElement$p } from './bal-icon2.js';
import { d as defineCustomElement$o } from './bal-list2.js';
import { d as defineCustomElement$n } from './bal-list-item2.js';
import { d as defineCustomElement$m } from './bal-list-item-accordion-body2.js';
import { d as defineCustomElement$l } from './bal-list-item-accordion-head2.js';
import { d as defineCustomElement$k } from './bal-list-item-content2.js';
import { d as defineCustomElement$j } from './bal-list-item-icon2.js';
import { d as defineCustomElement$i } from './bal-list-item-title2.js';
import { d as defineCustomElement$h } from './bal-logo2.js';
import { d as defineCustomElement$g } from './bal-nav-link2.js';
import { d as defineCustomElement$f } from './bal-nav-link-grid2.js';
import { d as defineCustomElement$e } from './bal-nav-link-grid-col2.js';
import { d as defineCustomElement$d } from './bal-nav-menu-bar2.js';
import { d as defineCustomElement$c } from './bal-nav-menu-flyout2.js';
import { d as defineCustomElement$b } from './bal-nav-meta-bar2.js';
import { d as defineCustomElement$a } from './bal-popover2.js';
import { d as defineCustomElement$9 } from './bal-popover-content2.js';
import { d as defineCustomElement$8 } from './bal-select2.js';
import { d as defineCustomElement$7 } from './bal-select-option2.js';
import { d as defineCustomElement$6 } from './bal-spinner2.js';
import { d as defineCustomElement$5 } from './bal-stack2.js';
import { d as defineCustomElement$4 } from './bal-switch2.js';
import { d as defineCustomElement$3 } from './bal-tabs2.js';
import { d as defineCustomElement$2 } from './bal-tag2.js';
import { b as balBreakpoints } from './breakpoints.subject.js';
import { d as defaultConfig } from './config.default.js';
import { L as ListenToMutation } from './mutation.decorator.js';
import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
import { L as ListenToConfig } from './config.decorator.js';

/**
 * Gathers information about the tabs in the navigation.
 * This information are shared for the tab key down handling and the flyout focus out handling.
 */
const gatherTabInformation = (detail) => {
    var _a;
    const links = (_a = detail.linkItems.find(item => item.value === detail.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems;
    // the selected tab in the main navigation
    const indexOfActiveTab = links === null || links === void 0 ? void 0 : links.findIndex(link => link.value === detail.activeMenuLinkValue);
    const indexOfNextTab = indexOfActiveTab + 1;
    const indexOfPreviousTab = indexOfActiveTab - 1;
    return {
        tabs: links || [],
        indexOfActiveTab,
        indexOfNextTab,
        indexOfPreviousTab,
    };
};
const handleTabKeyDown = ({ tabs, indexOfNextTab, indexOfActiveTab }, detail) => {
    // the current focused tab in the main navigation
    const indexOfFocusedTab = tabs === null || tabs === void 0 ? void 0 : tabs.findIndex(link => link.value === detail.item.value);
    // if last tab is focused and would leave the tab navigation, close the flyout
    if (!detail.isBackwards && indexOfFocusedTab === tabs.length - 1) {
        detail.stopEventBubbling();
        detail.closeFlyout();
        rIC(() => {
            focusNextElement(document.activeElement, detail.el);
        });
        return;
    }
    // only change focus to the first link in the flyout when navigating from active tab to next tab
    if (!detail.isBackwards && indexOfFocusedTab === indexOfActiveTab) {
        const flyout = detail.el.querySelector(`#${detail.navId}-menu-flyout`);
        if (flyout) {
            const firstLink = flyout.querySelector('a, button, [tabindex="0"]');
            if (firstLink) {
                detail.stopEventBubbling();
                firstLink.focus({ preventScroll: true });
            }
        }
    }
    // only change focus to the last link in the flyout when navigating back from
    // next tab (from the active tab) to active tab (has flyout open)
    if (detail.isBackwards && indexOfFocusedTab === indexOfNextTab) {
        const flyout = detail.el.querySelector(`#${detail.navId}-menu-flyout`);
        if (flyout) {
            const flyoutLinks = flyout.querySelectorAll('a, button, [tabindex="0"]');
            const lastLink = flyoutLinks[flyoutLinks.length - 1];
            if (lastLink) {
                detail.stopEventBubbling();
                lastLink.focus({ preventScroll: true });
            }
        }
    }
};
const handleFlyoutFocusOut = (info, detail) => {
    const targetItem = detail.isBackwards ? info.tabs[info.indexOfActiveTab] : info.tabs[info.indexOfNextTab];
    if (targetItem) {
        const tab = detail.el.querySelector(`button[data-value="${targetItem.value}"], a[data-value="${targetItem.value}"]`);
        if (tab) {
            tab.focus({ preventScroll: true });
        }
    }
};
/**
 * Focuses the next focusable element after the current element outside of the bal-nav element.
 */
const focusNextElement = (current, balNavEl) => {
    const focusableSelectors = [
        'a[href]',
        'button:not([disabled])',
        'input:not([disabled]):not([type="hidden"])',
        'select:not([disabled])',
        'textarea:not([disabled])',
        '[tabindex]:not([tabindex="-1"])',
    ];
    const focusableElements = Array.from(document.querySelectorAll(focusableSelectors.join(',')))
        // visible elements only
        .filter(el => el.offsetParent !== null)
        // exclude elements inside the bal-nav
        .filter(el => !isDescendant(balNavEl, el));
    const index = focusableElements.indexOf(current);
    const next = focusableElements[index + 1];
    if (next)
        next.focus();
};

const i18nNavBars = {
    de: {
        mainNavigation: 'Hauptnavigation',
        navigation: 'Navigation',
        subNavigation: 'Subnavigation',
        open: 'Menü öffnen',
        close: 'Menü schliessen',
    },
    en: {
        mainNavigation: 'Main navigation',
        navigation: 'Navigation',
        subNavigation: 'Sub navigation',
        open: 'Open Menu',
        close: 'Close Menu',
    },
    fr: {
        mainNavigation: 'Navigation principale',
        navigation: 'Navigation',
        subNavigation: 'Sous-navigation',
        open: 'Ouvrir le menu',
        close: 'Fermer le menu',
    },
    it: {
        mainNavigation: 'Navigazione principale',
        navigation: 'Navigazione',
        subNavigation: 'Sottonavigazione',
        open: 'Apri Menù',
        close: 'Chiudi menù',
    },
    nl: {
        mainNavigation: 'Hoofdnavigatie',
        navigation: 'Navigatie',
        subNavigation: 'Subnavigatie',
        open: 'Menu openen',
        close: 'Menu sluiten',
    },
    es: {
        mainNavigation: 'Navegación principal',
        navigation: 'Navegación',
        subNavigation: 'Subnavegación',
        open: 'Menú abierto',
        close: 'Cerrar menú',
    },
    pl: {
        mainNavigation: 'Nawigacja główna',
        navigation: 'Nawigacja',
        subNavigation: 'Nawigacja podrzędna',
        open: 'Otwórz menu',
        close: 'Zamknij menu',
    },
    pt: {
        mainNavigation: 'Navegação principal',
        navigation: 'Navegação',
        subNavigation: 'Subnavegação',
        open: 'Menu aberto',
        close: 'Fechar menu',
    },
    sv: {
        mainNavigation: 'Huvudnavigering',
        navigation: 'Navigering',
        subNavigation: 'Undernavigering',
        open: 'Öppna menyn',
        close: 'Stäng menyn',
    },
    fi: {
        mainNavigation: 'Päänavigaatio',
        navigation: 'Navigaatio',
        subNavigation: 'Alinavigaatio',
        open: 'Avaa valikko',
        close: 'Sulje valikko',
    },
};

class NavLinkItem {
    constructor(item, observer) {
        this.observer = observer;
        this.clickable = false;
        this.active = false;
        this.data = undefined;
        this.label = item.label;
        this.id = `nav-link-item-${NavLinkItemIDs++}`;
        this.value = item.value || this.id;
        this.href = item.href;
        this.rel = item.rel;
        this.target = item.target;
        this.active = !!item.active;
        this.clickable = !!item.clickable;
        this.data = item.data;
        this.onClick = (ev) => {
            this.observer.linkItemClickListener(this);
            if (item.onClick) {
                item.onClick(ev);
            }
        };
        this.onAccordionClick = (ev) => {
            this.observer.accordionClickListener(this);
            if (item.onAccordionClick) {
                item.onAccordionClick(ev);
            }
        };
    }
    get type() {
        return 'NavLinkItem';
    }
    get isLink() {
        return this.href !== undefined && this.href !== null && this.href !== '';
    }
    toJson() {
        return {
            label: this.label,
            value: this.value,
            href: this.href,
            rel: this.rel,
            target: this.target,
            data: this.data,
        };
    }
    renderTouch(_context) {
        const block = BEM.block('nav');
        return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
    }
    render(_context) {
        return (h("bal-nav-link", { role: "listitem", href: this.href, rel: this.rel, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
    }
}
let NavLinkItemIDs = 0;

class NavMetaButton extends NavLinkItem {
    constructor(item, observer) {
        super(item, observer);
        this.touchPlacement = 'top';
        this.id = `nav-meta-button-${NavMetaButtonIDs++}`;
        this.touchPlacement = item.touchPlacement || 'top';
        this.value = item.value || this.id;
        this.icon = item.icon;
        this.popoverId = item.popupId;
        this.ariaLabel = item.ariaLabel;
        this.htmlTitle = item.htmlTitle;
        this.href = item.href || '';
        this.target = item.target || '_self';
    }
    get type() {
        return 'NavMetaButton';
    }
    get isLink() {
        return !!this.href;
    }
    renderAtMetaBar() {
        if (this.isLink) {
            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label }, this.label));
        }
        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
    }
    renderAtTouchTopMetaBar() {
        if (this.touchPlacement === 'top') {
            if (this.isLink) {
                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label }, this.icon ? '' : this.label));
            }
            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": this.getOffset() }, this.icon ? '' : this.label));
        }
    }
    renderAtTouchBottomMetaBar() {
        if (this.touchPlacement === 'bottom') {
            if (this.isLink) {
                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, href: this.href, target: this.target }, this.label));
            }
            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": this.getOffset() }, this.label));
        }
    }
    resetTouchBottomMetaBar() {
        if (balBrowser.hasDocument && this.touchPlacement === 'bottom') {
            const button = document.getElementById(this.value);
            if (button && button.balPopupVariant === 'drawer') {
                button.color = 'info';
            }
        }
    }
    resetDesktopMetaBar() {
        if (balBrowser.hasDocument) {
            const button = document.getElementById(this.value);
            if (button && button.balPopupVariant === 'popover') {
                button.color = 'info';
            }
        }
    }
    getOffset() {
        const baseOffset = 64;
        const value = getComputedStyle(document.documentElement).getPropertyValue('--bal-nav-top').trim();
        // If the value is already in px, return it directly
        if (value.endsWith('px')) {
            return parseFloat(value) + baseOffset;
        }
        // If the value is in rem, convert it to px
        if (value.endsWith('rem')) {
            const remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
            return parseFloat(value) * remInPx + baseOffset;
        }
        // Default fallback
        return baseOffset;
    }
}
let NavMetaButtonIDs = 0;

const AccordionButton = ({ id, label, level, open, link, href, rel, target, onClick, }) => {
    const block = BEM.block('nav');
    return link ? (h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, rel: rel, target: target, onClick: ev => onClick(ev) }, h("span", null, label))) : (h("button", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), onClick: ev => onClick(ev) }, h("span", null, label), h("bal-icon", { name: "nav-go-down", size: "small", turn: open })));
};

const OverviewLink = ({ item, isMenu, onClick, isVisible }) => {
    const block = BEM.block('nav');
    if (!item) {
        return '';
    }
    return (h("a", { class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-overview-link').class()), block.element('mobile-overview-link').modifier('menu').class(!!isMenu)), block
            .element('mobile-overview-link')
            .modifier('invisible')
            .class(isVisible === false)), href: item.href, rel: item.rel, target: item.target, onClick: ev => onClick(ev) }, item.label, " ", item.label ? '➞' : ''));
};

class NavSectionLinkItem extends NavLinkItem {
    constructor(item, observer) {
        super(item, observer);
        this.linkItems = [];
        this.htmlTitle = item.htmlTitle;
        this.label = item.label;
        this.href = item.href;
        this.target = item.target;
        this.id = `nav-section-link-item-${NavSectionLinkItemIDs++}`;
        this.value = item.value || this.id;
        this.linkItems = (item.linkItems || []).map(item => new NavLinkItem(item, observer));
    }
    get type() {
        return 'NavSectionLinkItem';
    }
    renderTouch(_context) {
        const block = BEM.block('nav');
        const hasItems = this.linkItems && this.linkItems.length > 0;
        return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-section-item').class()), block.element('mobile-section-item').modifier('selected').class(this.active)), block.element('mobile-section-item').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
    }
    render(_context) {
        return (h("bal-nav-link-group", { role: "list" }, h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label), this.linkItems.map(item => item.render())));
    }
}
let NavSectionLinkItemIDs = 0;

class NavServiceLinkItem extends NavLinkItem {
    constructor(item, observer) {
        super(item, observer);
        this.color = 'grey';
        this.linkItems = [];
        this.id = `nav-service-link-item-${NavServiceLinkItemIDs++}`;
        this.value = item.value || this.id;
        this.color = item.color || 'grey';
        this.linkItems = (item.linkItems || []).map(item => new NavLinkItem(item, observer));
    }
    get type() {
        return 'NavServiceLinkItem';
    }
    renderTouch(_context) {
        const block = BEM.block('nav');
        const hasItems = this.linkItems && this.linkItems.length > 0;
        return (h("li", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('mobile-service-item').class()), block.element('mobile-service-item').modifier(`color-${this.color}`).class()), block.element('mobile-service-item').modifier('selected').class(this.active)), block.element('mobile-service-item').modifier('clickable').class(this.clickable)) }, h("a", { id: this.id, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
    }
    render(_context) {
        return (h("bal-nav-link-group", { color: this.color, role: "list" }, h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label), this.linkItems.map(item => item.render())));
    }
}
let NavServiceLinkItemIDs = 0;

class NavMenuLinkItem extends NavLinkItem {
    constructor(item, observer) {
        super(item, observer);
        this.sectionLinkItems = [];
        this.serviceLinkItems = [];
        this.id = `nav-menu-link-item-${NavMenuLinkItemIDs++}`;
        this.value = item.value || this.id;
        this.sectionLinkItems = (item.sectionLinkItems || []).map(item => new NavSectionLinkItem(item, observer));
        this.serviceLinkItems = (item.serviceLinkItems || []).map(item => new NavServiceLinkItem(item, observer));
        this.overviewLink = item.overviewLink ? new NavLinkItem(item.overviewLink, observer) : undefined;
    }
    get type() {
        return 'NavMenuLinkItem';
    }
    renderTouch(context) {
        const block = BEM.block('nav');
        const hasSectionLinkItems = this.sectionLinkItems && this.sectionLinkItems.length > 0;
        const hasServiceLinkItems = this.serviceLinkItems && this.serviceLinkItems.length > 0;
        const isSelected = (context === null || context === void 0 ? void 0 : context.activeMenuLinkValue) === this.value;
        return (h("li", null, h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, rel: this.rel, target: this.target, link: hasSectionLinkItems || hasServiceLinkItems ? false : this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }), h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true, isVisible: isSelected }), hasSectionLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-section-list').class()), block
                .element('mobile-section-list')
                .modifier('invisible')
                .class(isSelected === false)) }, this.sectionLinkItems.map(item => item.renderTouch()))) : (''), hasServiceLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-service-list').class()), block
                .element('mobile-service-list')
                .modifier('invisible')
                .class(isSelected === false)) }, this.serviceLinkItems.map(item => item.renderTouch()))) : ('')));
    }
    render(context) {
        const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
        if (!hasChildren && this.isLink) {
            return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), "no-panel": true }));
        }
        return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, "no-panel": true, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), onBalNavigate: ev => {
                context === null || context === void 0 ? void 0 : context.onClick();
                if (this.onClick) {
                    this.onClick(ev.detail);
                }
            } }));
    }
}
let NavMenuLinkItemIDs = 0;

class NavMetaLinkItem extends NavLinkItem {
    constructor(item, observer) {
        super(item, observer);
        this.mainLinkItems = [];
        this.id = `nav-meta-link-item-${NavMetaLinkItemIDs++}`;
        this.value = item.value || this.id;
        this.mainLinkItems = (item.mainLinkItems || []).map(item => new NavMenuLinkItem(item, observer));
        this.overviewLink = item.overviewLink ? new NavLinkItem(item.overviewLink, observer) : undefined;
    }
    get type() {
        return 'NavMetaLinkItem';
    }
    renderTouch(context) {
        const block = BEM.block('nav');
        const isSelected = (context === null || context === void 0 ? void 0 : context.activeMetaLinkValue) === this.value;
        return (h("li", null, h(AccordionButton, { id: this.id, level: "meta", label: this.label, open: isSelected, link: this.mainLinkItems.length > 0 ? false : this.isLink, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onAccordionClick(ev) }), isSelected ? h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev) }) : '', isSelected ? (h("hr", { class: Object.assign(Object.assign({}, block.element('line').class()), block.element('line').modifier('up').class()) })) : (''), isSelected && this.mainLinkItems && this.mainLinkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-menu-list').class()) }, this.mainLinkItems.map(item => item.renderTouch({
            activeMetaLinkValue: context.activeMetaLinkValue,
            activeMenuLinkValue: context.activeMenuLinkValue,
        })))) : (''), h("hr", { class: Object.assign({}, block.element('line').class()) })));
    }
    render(context) {
        if (this.isLink) {
            return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, rel: this.rel, href: this.href, target: this.target, "no-panel": true }));
        }
        return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                if (this.onClick) {
                    this.onClick(ev.detail);
                }
            } }));
    }
}
let NavMetaLinkItemIDs = 0;

const balNavCss = "@media (hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-top:0rem;--bal-nav-background:var(--bal-color-primary);--bal-nav-service-background-grey:var(--bal-color-grey);--bal-nav-service-background-purple:var(--bal-color-purple);--bal-nav-service-background-red:var(--bal-color-red);--bal-nav-service-background-yellow:var(--bal-color-yellow);--bal-nav-service-background-green:var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{position:relative;background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem - var(--bal-nav-top, 0rem));overflow-y:auto;z-index:calc(var(--bal-z-index-navigation) - 1)}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";

const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.balNavItemClick = createEvent(this, "balNavItemClick", 7);
        this.navId = `bal-nav-${NavIds++}`;
        this.bodyScrollHandler = new BalScrollHandler();
        this.isTouch = balBreakpoints.isTouch;
        this.isDesktop = balBreakpoints.isDesktop;
        this.language = defaultConfig.language;
        this.region = defaultConfig.region;
        this.isFlyoutActive = false;
        this.hasRenderedWithFlyoutActive = false;
        /**
         * Link level structure.
         */
        this.options = [];
        this.linkItems = [];
        /**
         * Link level structure.
         */
        this.buttons = [];
        this.metaButtons = [];
        this.mutationObserverActive = true;
        /**
         * EVENT BINDING
         * ------------------------------------------------------
         */
        this.onOptionChange = async () => {
            this.activeMetaLinkValue = undefined;
            this.activeMenuLinkValue = undefined;
            this.linkItems = this.options.map(option => new NavMetaLinkItem(option, this));
        };
        this.onMetaButtonChange = async () => {
            this.metaButtons = this.buttons.map(button => new NavMetaButton(button, this));
        };
        this.onTouchToggleFlyout = (_ev) => {
            this.closeAllPopups();
            this.toggleFlyout();
            if (balBrowser.hasWindow && window.scrollY > 0) {
                window.scrollTo(0, 0);
            }
            if (this.isFlyoutActive) {
                this.bodyScrollHandler.disable();
            }
            else {
                this.bodyScrollHandler.enable();
            }
        };
        this.onPopupOpen = (triggers) => {
            if (this.isTouch) {
                if (balBrowser.hasWindow && window.scrollY > 0) {
                    window.scrollTo(0, 0);
                }
            }
            triggers.forEach(trigger => {
                if (trigger.classList.contains('bal-nav__popup--desktop')) {
                    trigger.inverted = false;
                }
                else if (trigger.classList.contains('bal-nav__popup--touch-bottom')) {
                    trigger.color = 'primary';
                }
                else if (trigger.classList.contains('bal-nav__popup--touch-top')) {
                    trigger.color = 'primary';
                }
            });
            this.bodyScrollHandler.disable();
        };
        this.onPopupClose = (triggers) => {
            if (!this.isFlyoutActive) {
                this.bodyScrollHandler.enable();
            }
            triggers.forEach(trigger => {
                if (trigger.classList.contains('bal-nav__popup--desktop')) {
                    trigger.inverted = true;
                }
                else if (trigger.classList.contains('bal-nav__popup--touch-bottom')) {
                    trigger.color = 'info';
                }
                else if (trigger.classList.contains('bal-nav__popup--touch-top')) {
                    trigger.color = 'light';
                }
            });
        };
        this.onMetaBarTabChange = (ev) => {
            if (ev.detail !== this.activeMetaLinkValue) {
                this.activeMetaLinkValue = ev.detail;
                const activeMetaItem = this.linkItems.find(item => item.value === this.activeMetaLinkValue);
                if (activeMetaItem && activeMetaItem.mainLinkItems.length > 0) {
                    this.activeMenuLinkValue = activeMetaItem.mainLinkItems[0].value;
                }
            }
        };
        this.onMenuBarTabChange = (value) => {
            if (this.activeMenuLinkValue === value) {
                this.toggleFlyout();
            }
            else {
                this.openFlyout();
            }
            this.activeMenuLinkValue = value;
        };
    }
    createLogger(log) {
        this.log = log;
    }
    async optionChanged() {
        this.onOptionChange();
        this.updateTabs();
    }
    async buttonChanged() {
        this.onMetaButtonChange();
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.bodyScrollHandler.connect();
    }
    componentWillLoad() {
        this.onOptionChange();
        this.onMetaButtonChange();
        this.updateTabs();
    }
    disconnectedCallback() {
        this.bodyScrollHandler.disconnect();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    listenToPopupChanges(event) {
        const target = event.target;
        if (target && target.nodeName === 'BAL-POPUP') {
            const id = target.id;
            const triggers = Array.from(this.el.querySelectorAll(`[bal-popup="${id}"]`));
            if (event.detail === true) {
                this.onPopupOpen(triggers);
                const isTouchMetaTopButtonClicked = triggers.some(triggerEl => triggerEl.classList.contains('bal-nav__popup--touch-top'));
                if (isTouchMetaTopButtonClicked) {
                    this.closeFlyout();
                }
            }
            else {
                this.onPopupClose(triggers);
            }
        }
    }
    async clickOnOutside(ev) {
        var _a, _b, _c, _d, _e;
        if (this.isDesktop) {
            if (this.hasRenderedWithFlyoutActive) {
                const targetIsInMetaBar = (_b = (_a = this.metaBarEl) === null || _a === void 0 ? void 0 : _a.querySelector('.bal-nav-meta-bar__container')) === null || _b === void 0 ? void 0 : _b.contains(ev.target);
                const targetIsInMenuBar = (_d = (_c = this.menuBarEl) === null || _c === void 0 ? void 0 : _c.querySelector('.bal-nav-menu-bar__container')) === null || _d === void 0 ? void 0 : _d.contains(ev.target);
                if (!targetIsInMetaBar && !targetIsInMenuBar) {
                    this.closeFlyout();
                    const tabs = (_e = this.menuBarEl) === null || _e === void 0 ? void 0 : _e.querySelector('.bal-tabs');
                    tabs.closeAccordion();
                }
            }
        }
    }
    mutationListener() {
        this.onMetaButtonChange();
    }
    breakpointListener(breakpoints) {
        if (this.isTouch !== breakpoints.touch) {
            this.isTouch = breakpoints.touch;
            this.isDesktop = breakpoints.desktop;
            this.closeAllPopups();
            this.closeFlyout();
        }
        if (this.isTouch) {
            this.updateTabs();
        }
    }
    linkItemClickListener(item) {
        if (item && item.toJson) {
            this.balNavItemClick.emit(item.toJson());
        }
    }
    accordionClickListener(item) {
        if (this.isTouch && item) {
            this.updateActiveItem(item);
        }
    }
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
        this.region = state.region;
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    get activeMenuLinkItems() {
        const foundLinkItem = this.linkItems.find(item => item.value === this.activeMetaLinkValue);
        if (foundLinkItem) {
            return foundLinkItem.mainLinkItems;
        }
        return [];
    }
    get activeMenuLinkItem() {
        const foundLinkItem = this.activeMenuLinkItems.find(item => item.value === this.activeMenuLinkValue);
        return foundLinkItem ? foundLinkItem : undefined;
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    toggleFlyout() {
        if (this.isFlyoutActive) {
            this.closeFlyout();
        }
        else {
            this.openFlyout();
        }
    }
    closeFlyout() {
        this.isFlyoutActive = false;
    }
    openFlyout() {
        this.isFlyoutActive = true;
    }
    async updateActiveItem(item) {
        if ('NavMetaLinkItem' === item.type) {
            this.activeMetaLinkValue = this.activeMetaLinkValue === item.value ? undefined : item.value;
            this.activeMenuLinkValue = undefined;
        }
        if ('NavMenuLinkItem' === item.type) {
            this.activeMenuLinkValue = this.activeMenuLinkValue === item.value ? undefined : item.value;
        }
        await waitForComponent(this.el);
        await waitAfterIdleCallback();
        const elementToScroll = this.el.querySelector(`#${item.id}`);
        if (elementToScroll) {
            elementToScroll.scrollIntoView({
                behavior: 'smooth',
            });
            // location.href = '#'
            // location.href = `#${item.id}`
        }
    }
    updateTabs() {
        var _a, _b;
        const previousActiveMetaLinkValue = this.activeMetaLinkValue;
        const newActiveMetaLinkValue = ((_a = this.linkItems.find(item => item.active)) === null || _a === void 0 ? void 0 : _a.value) || previousActiveMetaLinkValue;
        if (previousActiveMetaLinkValue !== newActiveMetaLinkValue) {
            this.activeMetaLinkValue = newActiveMetaLinkValue;
        }
        const previousActiveMenuLinkValue = this.activeMenuLinkValue;
        const newActiveMenuLinkValue = ((_b = this.activeMenuLinkItems.find(item => item.active)) === null || _b === void 0 ? void 0 : _b.value) || previousActiveMenuLinkValue;
        if (previousActiveMenuLinkValue !== newActiveMenuLinkValue) {
            this.activeMenuLinkValue = newActiveMenuLinkValue;
        }
    }
    closeAllPopups() {
        const popups = Array.from(this.el.querySelectorAll('bal-popup'));
        popups.forEach(popup => popup.dismiss());
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
        const block = BEM.block('nav');
        const flyoutBlock = block.element('flyout');
        this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
        return (h(Host, { key: '68752269e49bc046d352536ca5ae29761bae5769', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'b19421bedd6da29673adddbe3511439936cf76e1', class: {
                'bal-nav-meta-bar-transform': true,
                'bal-nav-meta-bar-transform-touch': this.isTouch,
            } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { inverted: true, context: "meta", value: this.activeMetaLinkValue, "aria-label": i18nNavBars[this.language].mainNavigation, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
            flyoutId: `${this.navId}-menu-flyout`,
        })))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, value: this.activeMenuLinkValue, "aria-label": i18nNavBars[this.language].navigation }, (_a = this.linkItems
            .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map((item, index) => item.render({
            flyoutId: `${this.navId}-menu-flyout`,
            onClick: () => this.onMenuBarTabChange(item.value),
            onTabPress: (ev) => {
                if (this.isFlyoutActive) {
                    const isBackwards = ev.shiftKey;
                    const info = gatherTabInformation({
                        activeMetaLinkValue: this.activeMetaLinkValue,
                        activeMenuLinkValue: this.activeMenuLinkValue,
                        linkItems: this.linkItems,
                    });
                    handleTabKeyDown(info, {
                        el: this.el,
                        navId: this.navId,
                        isFlyoutActive: this.isFlyoutActive,
                        isBackwards,
                        item,
                        stopEventBubbling: () => stopEventBubbling(ev),
                        closeFlyout: () => this.closeFlyout(),
                    });
                }
            },
        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId, "aria-label": i18nNavBars[this.language].subNavigation, onBalFocusOut: (ev) => {
                if (this.isFlyoutActive) {
                    stopEventBubbling(ev);
                    const info = gatherTabInformation({
                        activeMetaLinkValue: this.activeMetaLinkValue,
                        activeMenuLinkValue: this.activeMenuLinkValue,
                        linkItems: this.linkItems,
                    });
                    const isBackwards = isDescendant(this.el, ev.detail.relatedTarget);
                    handleFlyoutFocusOut(info, {
                        el: this.el,
                        isBackwards,
                    });
                }
            } }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: 'a13bae3ec1ab7881bb6448bab61d2f8c34ca7141' }, h("slot", { key: 'd231a2fca50d45089ec4e1dc7467085b273a2488' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
            activeMetaLinkValue: this.activeMetaLinkValue,
            activeMenuLinkValue: this.activeMenuLinkValue,
        })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { stayOnTopOfBackdrop: true, variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
    }
    renderGridLinks(linkItem) {
        var _a, _b;
        if (!linkItem) {
            return '';
        }
        return (h("bal-nav-link-grid", null, h("bal-nav-link-grid-col", null, (_a = linkItem.sectionLinkItems) === null || _a === void 0 ? void 0 : _a.map(itemGroup => itemGroup.render())), h("bal-nav-link-grid-col", { "static-col": true }, (_b = linkItem.serviceLinkItems) === null || _b === void 0 ? void 0 : _b.map(itemGroup => itemGroup.render()))));
    }
    renderTouchMenuAccordions(metaItem) {
        return (h("bal-list", { "accordion-one-level": true, class: "pt-xxx-small pb-normal" }, metaItem.mainLinkItems.map(menuItem => {
            var _a, _b, _c;
            return menuItem.isLink ? (h("bal-list-item", { key: menuItem.label, "sub-accordion-item": true, href: menuItem.href, target: menuItem.target }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label)))) : (h("bal-list-item", { key: menuItem.label, accordion: true, "sub-accordion-item": true }, h("bal-list-item-accordion-head", { icon: "nav-go-down", "accordion-open": menuItem.active }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label))), h("bal-list-item-accordion-body", null, h("div", { style: { width: '100%' } }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_a = menuItem.overviewLink) === null || _a === void 0 ? void 0 : _a.href, target: (_b = menuItem.overviewLink) === null || _b === void 0 ? void 0 : _b.target, onClick: () => this.linkItemClickListener(menuItem.overviewLink) }, (_c = menuItem.overviewLink) === null || _c === void 0 ? void 0 : _c.label), h("div", { class: "pt-normal" }, this.renderGridLinks(menuItem))))));
        })));
    }
    renderLogo() {
        var _a, _b, _c, _d, _e, _f, _g, _h;
        const Link = ((_a = this.logo) === null || _a === void 0 ? void 0 : _a.href) ? 'a' : ((_b = this.logo) === null || _b === void 0 ? void 0 : _b.clickable) ? 'button' : 'div';
        let Logo = h("bal-logo", { animated: true });
        const logoImageUrl = (_c = this.logo) === null || _c === void 0 ? void 0 : _c.url;
        const logoSvg = sanitizeSvg((_d = this.logo) === null || _d === void 0 ? void 0 : _d.svg);
        if (logoImageUrl) {
            Logo = h("img", { height: 32, style: { maxHeight: '32px' }, src: logoImageUrl, alt: "Logo" });
        }
        if (logoSvg) {
            Logo = (h("div", { innerHTML: logoSvg, role: "img", "aria-label": "Logo", style: { display: 'flex', height: '32px', maxHeight: '32px', minWidth: '32px' } }));
        }
        return (h(Link, { class: "bal-nav__logo", "aria-label": (_e = this.logo) === null || _e === void 0 ? void 0 : _e.ariaLabel, title: (_f = this.logo) === null || _f === void 0 ? void 0 : _f.htmlTitle, href: (_g = this.logo) === null || _g === void 0 ? void 0 : _g.href, target: (_h = this.logo) === null || _h === void 0 ? void 0 : _h.target, onClick: () => {
                var _a, _b;
                return this.balNavItemClick.emit({
                    value: 'logo',
                    label: 'Logo',
                    href: (_a = this.logo) === null || _a === void 0 ? void 0 : _a.href,
                    target: (_b = this.logo) === null || _b === void 0 ? void 0 : _b.target,
                });
            } }, Logo));
    }
    get el() { return this; }
    static get watchers() { return {
        "options": ["optionChanged"],
        "buttons": ["buttonChanged"]
    }; }
    static get style() { return balNavCss; }
}, [260, "bal-nav", {
        "logo": [16],
        "options": [16],
        "buttons": [16],
        "isTouch": [32],
        "isDesktop": [32],
        "language": [32],
        "region": [32],
        "isFlyoutActive": [32],
        "activeMetaLinkValue": [32],
        "activeMenuLinkValue": [32],
        "linkItems": [32],
        "metaButtons": [32],
        "configChanged": [64]
    }, [[0, "balChange", "listenToPopupChanges"], [5, "click", "clickOnOutside"]], {
        "options": ["optionChanged"],
        "buttons": ["buttonChanged"]
    }]);
__decorate([
    Logger('bal-nav'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Nav.prototype, "createLogger", null);
__decorate([
    ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], Nav.prototype, "mutationListener", null);
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Nav.prototype, "breakpointListener", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Nav.prototype, "configChanged", null);
let NavIds = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-nav", "bal-badge", "bal-button", "bal-check", "bal-checkbox", "bal-close", "bal-heading", "bal-icon", "bal-list", "bal-list-item", "bal-list-item-accordion-body", "bal-list-item-accordion-head", "bal-list-item-content", "bal-list-item-icon", "bal-list-item-title", "bal-logo", "bal-nav-link", "bal-nav-link-grid", "bal-nav-link-grid-col", "bal-nav-menu-bar", "bal-nav-menu-flyout", "bal-nav-meta-bar", "bal-popover", "bal-popover-content", "bal-select", "bal-select-option", "bal-spinner", "bal-stack", "bal-switch", "bal-tabs", "bal-tag"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-nav":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Nav);
            }
            break;
        case "bal-badge":
            if (!customElements.get(tagName)) {
                defineCustomElement$v();
            }
            break;
        case "bal-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$u();
            }
            break;
        case "bal-check":
            if (!customElements.get(tagName)) {
                defineCustomElement$t();
            }
            break;
        case "bal-checkbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$s();
            }
            break;
        case "bal-close":
            if (!customElements.get(tagName)) {
                defineCustomElement$r();
            }
            break;
        case "bal-heading":
            if (!customElements.get(tagName)) {
                defineCustomElement$q();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$p();
            }
            break;
        case "bal-list":
            if (!customElements.get(tagName)) {
                defineCustomElement$o();
            }
            break;
        case "bal-list-item":
            if (!customElements.get(tagName)) {
                defineCustomElement$n();
            }
            break;
        case "bal-list-item-accordion-body":
            if (!customElements.get(tagName)) {
                defineCustomElement$m();
            }
            break;
        case "bal-list-item-accordion-head":
            if (!customElements.get(tagName)) {
                defineCustomElement$l();
            }
            break;
        case "bal-list-item-content":
            if (!customElements.get(tagName)) {
                defineCustomElement$k();
            }
            break;
        case "bal-list-item-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$j();
            }
            break;
        case "bal-list-item-title":
            if (!customElements.get(tagName)) {
                defineCustomElement$i();
            }
            break;
        case "bal-logo":
            if (!customElements.get(tagName)) {
                defineCustomElement$h();
            }
            break;
        case "bal-nav-link":
            if (!customElements.get(tagName)) {
                defineCustomElement$g();
            }
            break;
        case "bal-nav-link-grid":
            if (!customElements.get(tagName)) {
                defineCustomElement$f();
            }
            break;
        case "bal-nav-link-grid-col":
            if (!customElements.get(tagName)) {
                defineCustomElement$e();
            }
            break;
        case "bal-nav-menu-bar":
            if (!customElements.get(tagName)) {
                defineCustomElement$d();
            }
            break;
        case "bal-nav-menu-flyout":
            if (!customElements.get(tagName)) {
                defineCustomElement$c();
            }
            break;
        case "bal-nav-meta-bar":
            if (!customElements.get(tagName)) {
                defineCustomElement$b();
            }
            break;
        case "bal-popover":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "bal-popover-content":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "bal-select":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "bal-select-option":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "bal-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "bal-stack":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "bal-switch":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "bal-tabs":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-tag":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalNav = Nav;
const defineCustomElement = defineCustomElement$1;

export { BalNav, defineCustomElement };
