@baloise/ds-core 19.9.4 → 20.0.0-next.4

package/dist/cjs/bal-nav_8.cjs.entry.js

@@ -1,1227 +0,0 @@
-'use strict';
-
-var index = require('./index-feA4skrY.js');
-var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
-var bem = require('./bem-p0PWVN8n.js');
-var browser = require('./browser-BwmkTmm8.js');
-var formInput = require('./form-input-BwFB4Rej.js');
-var helpers = require('./helpers-HuaiWXrB.js');
-var log = require('./log-CXDMiw7o.js');
-var scroll = require('./scroll-B_kvfDui.js');
-var svg = require('./svg-qEvvK3mS.js');
-var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
-var breakpoints_subject = require('./breakpoints.subject-YppJaklV.js');
-var config_default = require('./config.default-Cko-wpRU.js');
-var mutation_decorator = require('./mutation.decorator-BolUYaKD.js');
-var breakpoints_decorator = require('./breakpoints.decorator-DIeNdkiK.js');
-var config_decorator = require('./config.decorator-CUe4yCTd.js');
-var resize_decorator = require('./resize.decorator-ChuFQ8x3.js');
-require('./config.utils-Civnz2jT.js');
-require('./_commonjsHelpers-BJu3ubxk.js');
-require('./device-CoogBamh.js');
-require('./listener-DspXpqzY.js');
-require('./tokens.esm-CGjXTIYw.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();
-        helpers.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 => !helpers.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.BEM.block('nav');
-        return (index.h("li", null, index.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 (index.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 (index.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 (index.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 (index.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 (index.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 (index.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 (index.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 (browser.balBrowser.hasDocument && this.touchPlacement === 'bottom') {
-            const button = document.getElementById(this.value);
-            if (button && button.balPopupVariant === 'drawer') {
-                button.color = 'info';
-            }
-        }
-    }
-    resetDesktopMetaBar() {
-        if (browser.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.BEM.block('nav');
-    return link ? (index.h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, rel: rel, target: target, onClick: ev => onClick(ev) }, index.h("span", null, label))) : (index.h("button", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), onClick: ev => onClick(ev) }, index.h("span", null, label), index.h("bal-icon", { name: "nav-go-down", size: "small", turn: open })));
-};
-
-const OverviewLink = ({ item, isMenu, onClick, isVisible }) => {
-    const block = bem.BEM.block('nav');
-    if (!item) {
-        return '';
-    }
-    return (index.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.BEM.block('nav');
-        const hasItems = this.linkItems && this.linkItems.length > 0;
-        return (index.h("li", null, index.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 ? (index.h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
-    }
-    render(_context) {
-        return (index.h("bal-nav-link-group", { role: "list" }, index.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.BEM.block('nav');
-        const hasItems = this.linkItems && this.linkItems.length > 0;
-        return (index.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)) }, index.h("a", { id: this.id, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (index.h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
-    }
-    render(_context) {
-        return (index.h("bal-nav-link-group", { color: this.color, role: "list" }, index.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.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 (index.h("li", null, index.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) }), index.h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true, isVisible: isSelected }), hasSectionLinkItems ? (index.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 ? (index.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 (index.h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, onBalKeyDown: ev => keyboard_helpers.isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), "no-panel": true }));
-        }
-        return (index.h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, "no-panel": true, onBalKeyDown: ev => keyboard_helpers.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.BEM.block('nav');
-        const isSelected = (context === null || context === void 0 ? void 0 : context.activeMetaLinkValue) === this.value;
-        return (index.h("li", null, index.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 ? index.h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev) }) : '', isSelected ? (index.h("hr", { class: Object.assign(Object.assign({}, block.element('line').class()), block.element('line').modifier('up').class()) })) : (''), isSelected && this.mainLinkItems && this.mainLinkItems.length > 0 ? (index.h("ul", { class: Object.assign({}, block.element('mobile-menu-list').class()) }, this.mainLinkItems.map(item => item.renderTouch({
-            activeMetaLinkValue: context.activeMetaLinkValue,
-            activeMenuLinkValue: context.activeMenuLinkValue,
-        })))) : (''), index.h("hr", { class: Object.assign({}, block.element('line').class()) })));
-    }
-    render(context) {
-        if (this.isLink) {
-            return (index.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 (index.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 = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.balNavItemClick = index.createEvent(this, "balNavItemClick");
-        this.navId = `bal-nav-${NavIds++}`;
-        this.bodyScrollHandler = new scroll.BalScrollHandler();
-        this.isTouch = breakpoints_subject.balBreakpoints.isTouch;
-        this.isDesktop = breakpoints_subject.balBreakpoints.isDesktop;
-        this.language = config_default.defaultConfig.language;
-        this.region = config_default.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 (browser.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 (browser.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 helpers.waitForComponent(this.el);
-        await helpers.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.BEM.block('nav');
-        const flyoutBlock = block.element('flyout');
-        this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (index.h(index.Host, { key: '68752269e49bc046d352536ca5ae29761bae5769', id: this.navId, class: Object.assign({}, block.class()) }, index.h("div", { key: 'b19421bedd6da29673adddbe3511439936cf76e1', class: {
-                'bal-nav-meta-bar-transform': true,
-                'bal-nav-meta-bar-transform-touch': this.isTouch,
-            } }, this.isDesktop ? (index.h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, index.h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (index.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`,
-        })))) : (index.h("span", null)), index.h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (index.h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, index.h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), index.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: () => formInput.stopEventBubbling(ev),
-                        closeFlyout: () => this.closeFlyout(),
-                    });
-                }
-            },
-        })))), this.isFlyoutActive ? (index.h("bal-nav-menu-flyout", { navId: this.navId, "aria-label": i18nNavBars[this.language].subNavigation, onBalFocusOut: (ev) => {
-                if (this.isFlyoutActive) {
-                    formInput.stopEventBubbling(ev);
-                    const info = gatherTabInformation({
-                        activeMetaLinkValue: this.activeMetaLinkValue,
-                        activeMenuLinkValue: this.activeMenuLinkValue,
-                        linkItems: this.linkItems,
-                    });
-                    const isBackwards = helpers.isDescendant(this.el, ev.detail.relatedTarget);
-                    handleFlyoutFocusOut(info, {
-                        el: this.el,
-                        isBackwards,
-                    });
-                }
-            } }, index.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))) : (''))) : (''), index.h("div", { key: 'a13bae3ec1ab7881bb6448bab61d2f8c34ca7141' }, index.h("slot", { key: 'd231a2fca50d45089ec4e1dc7467085b273a2488' }))), this.isTouch ? (index.h("bal-nav-meta-bar", { variant: "white", size: "normal" }, index.h("bal-stack", { space: "auto" }, this.renderLogo(), index.h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), index.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 ? (index.h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, index.h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, index.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 ? (index.h("bal-nav-meta-bar", { stayOnTopOfBackdrop: true, variant: "grey", size: "normal" }, index.h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
-    }
-    renderGridLinks(linkItem) {
-        var _a, _b;
-        if (!linkItem) {
-            return '';
-        }
-        return (index.h("bal-nav-link-grid", null, index.h("bal-nav-link-grid-col", null, (_a = linkItem.sectionLinkItems) === null || _a === void 0 ? void 0 : _a.map(itemGroup => itemGroup.render())), index.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 (index.h("bal-list", { "accordion-one-level": true, class: "pt-xxx-small pb-normal" }, metaItem.mainLinkItems.map(menuItem => {
-            var _a, _b, _c;
-            return menuItem.isLink ? (index.h("bal-list-item", { key: menuItem.label, "sub-accordion-item": true, href: menuItem.href, target: menuItem.target }, index.h("bal-list-item-content", null, index.h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label)))) : (index.h("bal-list-item", { key: menuItem.label, accordion: true, "sub-accordion-item": true }, index.h("bal-list-item-accordion-head", { icon: "nav-go-down", "accordion-open": menuItem.active }, index.h("bal-list-item-content", null, index.h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label))), index.h("bal-list-item-accordion-body", null, index.h("div", { style: { width: '100%' } }, index.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), index.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 = index.h("bal-logo", { animated: true });
-        const logoImageUrl = (_c = this.logo) === null || _c === void 0 ? void 0 : _c.url;
-        const logoSvg = svg.sanitizeSvg((_d = this.logo) === null || _d === void 0 ? void 0 : _d.svg);
-        if (logoImageUrl) {
-            Logo = index.h("img", { height: 32, style: { maxHeight: '32px' }, src: logoImageUrl, alt: "Logo" });
-        }
-        if (logoSvg) {
-            Logo = (index.h("div", { innerHTML: logoSvg, role: "img", "aria-label": "Logo", style: { display: 'flex', height: '32px', maxHeight: '32px', minWidth: '32px' } }));
-        }
-        return (index.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 index.getElement(this); }
-    static get watchers() { return {
-        "options": ["optionChanged"],
-        "buttons": ["buttonChanged"]
-    }; }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-nav'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Nav.prototype, "createLogger", null);
-tslib_es6.__decorate([
-    mutation_decorator.ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", []),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Nav.prototype, "mutationListener", null);
-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)
-], Nav.prototype, "breakpointListener", null);
-tslib_es6.__decorate([
-    config_decorator.ListenToConfig(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Object]),
-    tslib_es6.__metadata("design:returntype", Promise)
-], Nav.prototype, "configChanged", null);
-let NavIds = 0;
-Nav.style = balNavCss;
-
-const balNavLinkCss = "@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-link-text-color:var(--bal-link-color);--bal-nav-link-text-color-hover:var(--bal-link-color-hover);--bal-nav-link-text-color-active:var(--bal-link-color-active)}.bal-nav-link{display:block}.bal-nav-link:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-nav-link--variant-title:not(:last-child){margin-bottom:var(--bal-space-normal) !important}.bal-nav-link--variant-overview:not(:last-child){margin-bottom:0 !important}@media screen and (min-width: 1024px){.bal-nav-link--variant-overview:not(:last-child){margin-bottom:var(--bal-space-normal) !important}}.bal-nav-link__native{display:inline;color:var(--bal-nav-link-text-color);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);font-family:var(--bal-font-family-text);text-align:left;padding:0;border:none;background:none}.bal-nav-link__native--variant-title{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);text-decoration:none;margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link__native--variant-title{font-size:var(--bal-text-size-xx-large)}}.bal-nav-link__native--variant-overview{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-nav-link__native--selected{-webkit-text-decoration:var(--bal-link-text-decoration) !important;text-decoration:var(--bal-link-text-decoration) !important;text-decoration-thickness:1px !important;text-underline-offset:2px !important}button.bal-nav-link__native,a.bal-nav-link__native{cursor:pointer}@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:hover,a.bal-nav-link__native:hover{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-hover);text-underline-offset:2px}}button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{border-radius:var(--bal-radius-normal)}button.bal-nav-link__native:active,a.bal-nav-link__native:active{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-active);text-underline-offset:2px}";
-
-const NavLink = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the variant of the link
-         */
-        this.variant = '';
-        /**
-         * If `true` the link gets selected with a underline
-         */
-        this.selected = false;
-        /**
-         * If `true` the link can be clickable
-         */
-        this.clickable = false;
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
-        this.target = '_self';
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = bem.BEM.block('nav-link');
-        const { href, target, rel } = this;
-        const hasLink = href !== undefined && href !== '';
-        const hasVariant = this.variant !== '';
-        const Link = hasLink ? 'a' : this.clickable ? 'button' : 'span';
-        let linkAttributes = {};
-        if (hasLink) {
-            linkAttributes = { href, target, rel };
-        }
-        return (index.h(index.Host, { key: 'fe011833d71cd4fc35585f27ee3cb8fe11dadfb8', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, index.h(Link, Object.assign({ key: 'ea4ba1bd04867399453d2e4cc2141c250862950f', "data-testid": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
-                .element('native')
-                .modifier('selected')
-                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), index.h("slot", { key: '1889dedfa23b00eb2eaf3aca568e313845482875' }))));
-    }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-nav-link'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], NavLink.prototype, "createLogger", null);
-NavLink.style = balNavLinkCss;
-
-const balNavLinkGridCss = ".bal-nav-link-grid{--bal-column-gap:0}@media screen and (min-width: 1024px){.bal-nav-link-grid{--bal-column-gap:1.5rem}}.bal-nav-link-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:0;margin-left:calc(var(--bal-column-gap)*-1);margin-right:calc(var(--bal-column-gap)*-1)}.bal-nav-link-grid:last-child{margin-bottom:calc(var(--bal-column-gap)*-1)}.bal-nav-link-grid .bal-nav-link-grid-col:not(:last-child){margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-grid .bal-nav-link-grid-col:not(:last-child){margin-bottom:0}}";
-
-const NavLinkGrid = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = bem.BEM.block('nav-link-grid');
-        return (index.h(index.Host, { key: '7e58a9b6c677d60837d56404af5f6b03a7d96073', class: Object.assign({}, block.class()) }, index.h("slot", { key: '4e7abb8d92056b3f99b42ebad4c1d7752cffca4e' })));
-    }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-nav-link-grid'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], NavLinkGrid.prototype, "createLogger", null);
-NavLinkGrid.style = balNavLinkGridCss;
-
-const balNavLinkGridColCss = ".bal-nav-link-grid-col{display:block;padding:0;-ms-flex:none;flex:none;width:100%}.bal-nav-link-grid-col:not(:last-child){margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-grid-col{-ms-flex:none;flex:none;width:50%;padding-top:0;padding-bottom:0;padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}.bal-nav-link-grid-col:not(:last-child){margin-bottom:0}}.bal-nav-link-grid-col .bal-nav-link-group{margin-bottom:var(--bal-space-normal);padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}.bal-nav-link-grid-col.bal-nav-link-grid-col--is-static{padding-left:0}@media screen and (min-width: 1440px){.bal-nav-link-grid-col.bal-nav-link-grid-col--is-static{-ms-flex:none;flex:none;width:33.3333%}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static){-ms-flex:none;flex:none;width:66.6666%}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-large)}}.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{margin:0;width:100%}@media screen and (min-width: 1024px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{padding-left:0;padding-right:0}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{width:calc(50% - var(--bal-space-large)/2)}}";
-
-const NavLinkGridCol = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the static column which is always aligned to the right
-         */
-        this.staticCol = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = bem.BEM.block('nav-link-grid-col');
-        const innerEl = block.element('inner');
-        return (index.h(index.Host, { key: 'b4cba3fc9a569b19d2921f0f728d8865b97ccd55', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, index.h("div", { key: '36c2d569a02ea2dc1adb8ecedaab21576f61c0dc', class: Object.assign({}, innerEl.class()) }, index.h("slot", { key: 'c99e184492ca2665cdebad028cd3ab3e97d3249a' }))));
-    }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-nav-link-grid-col'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], NavLinkGridCol.prototype, "createLogger", null);
-NavLinkGridCol.style = balNavLinkGridColCss;
-
-const balNavLinkGroupCss = ":root{--bal-nav-link-group-background:transparent;--bal-nav-link-group-background-grey:var(--bal-color-grey);--bal-nav-link-group-background-purple:var(--bal-color-purple);--bal-nav-link-group-background-red:var(--bal-color-red);--bal-nav-link-group-background-yellow:var(--bal-color-yellow);--bal-nav-link-group-background-green:var(--bal-color-green);--bal-nav-link-group-radius:var(--bal-radius-large)}.bal-nav-link-group{display:block;background:var(--bal-nav-link-group-background);border-radius:var(--bal-nav-link-group-radius);padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal);padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-group{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}}.bal-nav-link-group--is-grey{background:var(--bal-nav-link-group-background-grey)}.bal-nav-link-group--is-purple{background:var(--bal-nav-link-group-background-purple)}.bal-nav-link-group--is-red{background:var(--bal-nav-link-group-background-red)}.bal-nav-link-group--is-yellow{background:var(--bal-nav-link-group-background-yellow)}.bal-nav-link-group--is-green{background:var(--bal-nav-link-group-background-green)}";
-
-const NavLinkGroup = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the color of the group
-         */
-        this.color = '';
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = bem.BEM.block('nav-link-group');
-        const hasColor = this.color !== '';
-        return (index.h(index.Host, { key: '12c1c4d22dc3827a4c186c6591b7b043f1dd378b', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, index.h("slot", { key: '0c503bfaa7b2587f50936cc3d699e5a1bd9995a7' })));
-    }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-nav-link-group'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], NavLinkGroup.prototype, "createLogger", null);
-NavLinkGroup.style = balNavLinkGroupCss;
-
-const balNavMenuBarCss = ":root{--bal-nav-menu-bar-background:var(--bal-color-white);--bal-nav-menu-bar-radius:var(--bal-radius-large);--bal-nav-menu-bar-shadow:0 5px 15px rgba(0,0,0,.1)}.bal-nav-menu-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-menu-bar__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-menu-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-mobile{display:hidden;visibility:hidden}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 1440px){.bal-nav-menu-bar{position:fixed;margin-top:1rem}}.bal-nav-menu-bar--position-fixed-top{position:fixed}.bal-nav-menu-bar__inner{background:var(--bal-nav-menu-bar-background);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none}}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{min-height:64px}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow);min-height:80px}}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;min-height:80px}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container::before{position:absolute;content:\"\";height:100%;top:0;left:1rem;right:1rem;background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{-ms-flex-item-align:start;align-self:flex-start;z-index:1;height:auto;margin-top:.8em}@media screen and (min-width: 1024px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1rem}}@media screen and (min-width: 1440px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1.5rem}}.bal-nav-menu-bar-body-padding{padding-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-padding{padding-top:7rem}}.bal-nav-menu-bar-body-margin{margin-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-margin{margin-top:7rem}}.bal-nav-menu-bar-fixed-body-padding{padding-top:8rem}.bal-nav-menu-bar-fixed-body-margin{margin-top:8rem}";
-
-const NavMenuBar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.navMenuBarId = `bal-nav-menu-bar-${NavMenuBarIds++}`;
-        this.isHidden = false;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Tells when to hide the bar
-         */
-        this.invisible = 'none';
-        /**
-         * Defines the position of the bar
-         */
-        this.position = 'none';
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    get flyoutElement() {
-        return this.el.querySelector('bal-nav-menu-flyout');
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = bem.BEM.block('nav-menu-bar');
-        const innerBlock = block.element('inner');
-        return (index.h(index.Host, { key: 'b640ec27088cbff1fefcd079a84ac42505aff646', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, index.h("div", { key: '390e0f6e814ebe41e163650eb3a4e92cad9cbd8e', class: Object.assign({}, innerBlock.class()) }, index.h("div", { key: '72c9ae70c27cfe8717358e0effcc210d76573146', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: 'b195f883a809c0e65513a81bb33715da46e1bfa1' })))));
-    }
-    get el() { return index.getElement(this); }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-nav-menu-bar'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], NavMenuBar.prototype, "createLogger", null);
-let NavMenuBarIds = 0;
-NavMenuBar.style = balNavMenuBarCss;
-
-const balNavMenuFlyoutCss = ":root{--bal-nav-menu-flyout-border-background:var(--bal-color-grey)}.bal-nav-menu-flyout{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;padding-bottom:2.5rem;overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 90px - 48px - 16px);width:calc(100% + 1rem + 1rem);margin-left:-1rem;margin-right:-1rem}.bal-nav-menu-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-menu-flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-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-menu-flyout .bal-nav-menu-flyout__line{position:-webkit-sticky;position:sticky;width:100%;left:0;top:0;height:1px;background-color:var(--bal-color-grey);margin-bottom:2.5rem}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-flyout .bal-nav-menu-flyout__line{width:calc(100% - 2rem);left:1rem}}@media screen and (min-width: 769px),print{.bal-nav-menu-flyout{width:calc(100% + 2.5rem + 2.5rem);margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1024px){.bal-nav-menu-flyout{width:calc(100% + 3rem + 3rem);margin-left:-3rem;margin-right:-3rem}}@media screen and (min-width: 1440px){.bal-nav-menu-flyout{max-height:calc(var(--bal-app-height, 100%) - 96px - 48px - 16px)}}";
-
-const NavMenuFlyout = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.balFocusOut = index.createEvent(this, "balFocusOut");
-        this.bodyScrollHandler = new scroll.BalScrollHandler();
-        this.isHidden = false;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * This is used to connect the flyout to the aria controls
-         * */
-        this.navId = `bal-nav-x${NavMenuFlyOutIds++}`;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.bodyScrollHandler.connect();
-    }
-    disconnectedCallback() {
-        this.bodyScrollHandler.disconnect();
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    onFocusLeave(event) {
-        if (this.el && event.relatedTarget && !helpers.isDescendant(this.el, event.relatedTarget)) {
-            this.balFocusOut.emit(event);
-        }
-    }
-    resizeListener() {
-        if (this.isFlyoutScrollable()) {
-            this.bodyScrollHandler.disable();
-        }
-        else {
-            this.bodyScrollHandler.enable();
-        }
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    isFlyoutScrollable() {
-        var _a, _b;
-        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.scrollHeight) > ((_b = this.el) === null || _b === void 0 ? void 0 : _b.clientHeight);
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = bem.BEM.block('nav-menu-flyout');
-        const line = block.element('line');
-        return (index.h(index.Host, { key: '0ade6170ce034d4820781f4c990d3635bb0dfe79', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, index.h("div", { key: 'a76e5c0918a3b972fee334a7d9262fae315b85c9', class: Object.assign({}, line.class()) }), index.h("div", { key: 'd71930bf624ee077c46cf7139f012c7116dc1dc7', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: 'ff98f9f52e602ec787230b9a91a64920531e1152' }))));
-    }
-    get el() { return index.getElement(this); }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-nav-menu-flyout'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], NavMenuFlyout.prototype, "createLogger", null);
-tslib_es6.__decorate([
-    resize_decorator.ListenToResize(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", []),
-    tslib_es6.__metadata("design:returntype", void 0)
-], NavMenuFlyout.prototype, "resizeListener", null);
-let NavMenuFlyOutIds = 0;
-NavMenuFlyout.style = balNavMenuFlyoutCss;
-
-const balNavMetaBarCss = ":root{--bal-nav-meta-bar-variant-primary-background:var(--bal-color-primary);--bal-nav-meta-bar-variant-primary-shadow:none;--bal-nav-meta-bar-variant-white-background:var(--bal-color-white);--bal-nav-meta-bar-variant-white-shadow:0 5px 15px rgba(0,0,0,.1);--bal-nav-meta-bar-variant-grey-background:var(--bal-color-grey-2);--bal-nav-meta-bar-variant-grey-shadow:none}.bal-nav-meta-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%}.bal-nav-meta-bar__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-meta-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-meta-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-meta-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-meta-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav-meta-bar--size-normal{padding-top:.5rem;padding-bottom:.5rem;height:4rem;max-height:4rem}.bal-nav-meta-bar--size-small{min-height:3rem}.bal-nav-meta-bar--position-fixed-top{position:fixed;top:0;left:0;width:100%}.bal-nav-meta-bar--position-fixed-bottom{position:fixed;bottom:0;left:0;width:100%}.bal-nav-meta-bar--variant-primary{background:var(--bal-nav-meta-bar-variant-primary-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow);box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow)}.bal-nav-meta-bar--variant-grey{background:var(--bal-nav-meta-bar-variant-grey-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow);box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow)}.bal-nav-meta-bar--variant-white{background:var(--bal-nav-meta-bar-variant-white-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-white-shadow);box-shadow:var(--bal-nav-meta-bar-variant-white-shadow)}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-mobile{display:hidden !important;visibility:hidden !important}}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-tablet{display:hidden !important;visibility:hidden !important}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-meta-bar--hidden-tablet{display:hidden !important;visibility:hidden !important}}@media screen and (max-width: 1023px){.bal-nav>.bal-nav-meta-bar{z-index:calc(var(--bal-z-index-popup) + 1) !important}}.bal-nav-meta-bar .button-label{word-break:keep-all !important}.bal-nav-meta-bar-transform{will-change:transition;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out;position:fixed;display:block;width:100%;top:var(--bal-nav-top, 0rem);z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar-transform-small{-webkit-transform:translateY(calc(-1 * (var(--bal-nav-top, 0rem) + 3rem)));transform:translateY(calc(-1 * (var(--bal-nav-top, 0rem) + 3rem)))}.bal-nav-meta-bar-transform-normal{-webkit-transform:translateY(calc(-1 * (var(--bal-nav-top, 0rem) + 5rem)));transform:translateY(calc(-1 * (var(--bal-nav-top, 0rem) + 5rem)))}";
-
-const NavMetaBar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.navMetaBarId = `bal-nav-meta-bar-${NavMetaBarIds++}`;
-        this.previousY = 0;
-        this.isHidden = false;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines if the bar should stay on top of the backdrop
-         */
-        this.stayOnTopOfBackdrop = false;
-        /**
-         * Defines the color variant
-         */
-        this.variant = 'primary';
-        /**
-         * Defines the height of the bar
-         */
-        this.size = 'normal';
-        /**
-         * Tells when to hide the bar
-         */
-        this.invisible = 'none';
-        /**
-         * Defines the position of the bar
-         */
-        this.position = 'none';
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    handleScroll() {
-        if (browser.balBrowser.hasWindow && browser.balBrowser.hasDocument && this.position === 'sticky-top') {
-            const maxScrollHeight = document.body.scrollHeight - document.body.clientHeight;
-            const isOnTop = 0 >= window.scrollY;
-            const isOverViewportTop = 0 > window.scrollY;
-            const isOverViewportBottom = maxScrollHeight <= window.scrollY;
-            const didMoveDownwards = window.scrollY > this.previousY;
-            this.isHidden = !isOnTop && (didMoveDownwards || isOverViewportBottom || isOverViewportTop);
-            this.previousY = window.scrollY;
-            const transformElements = Array.from(document.querySelectorAll('.bal-nav-meta-bar-transform'));
-            if (transformElements.length > 0) {
-                for (let index = 0; index < transformElements.length; index++) {
-                    const transformElement = transformElements[index];
-                    if (this.isHidden) {
-                        if (this.size === 'small') {
-                            transformElement.classList.remove(`bal-nav-meta-bar-transform-normal`);
-                            transformElement.classList.add(`bal-nav-meta-bar-transform-small`);
-                        }
-                        else {
-                            transformElement.classList.remove(`bal-nav-meta-bar-transform-small`);
-                            transformElement.classList.add(`bal-nav-meta-bar-transform-normal`);
-                        }
-                    }
-                    else {
-                        transformElement.classList.remove(`bal-nav-meta-bar-transform-small`);
-                        transformElement.classList.remove(`bal-nav-meta-bar-transform-normal`);
-                    }
-                }
-            }
-        }
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = bem.BEM.block('nav-meta-bar');
-        return (index.h(index.Host, { key: '9d2cee16f0b6f542d42085aca4e263d727707849', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`stay-on-top`).class(this.stayOnTopOfBackdrop)) }, index.h("div", { key: '6b581e5abc62a58085a57cdf74346290130fe807', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: '75bdbcc78e502814264e1548697a987df10af720' }))));
-    }
-    get el() { return index.getElement(this); }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-meta-bar'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "createLogger", null);
-let NavMetaBarIds = 0;
-NavMetaBar.style = balNavMetaBarCss;
-
-exports.bal_nav = Nav;
-exports.bal_nav_link = NavLink;
-exports.bal_nav_link_grid = NavLinkGrid;
-exports.bal_nav_link_grid_col = NavLinkGridCol;
-exports.bal_nav_link_group = NavLinkGroup;
-exports.bal_nav_menu_bar = NavMenuBar;
-exports.bal_nav_menu_flyout = NavMenuFlyout;
-exports.bal_nav_meta_bar = NavMetaBar;