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

package/dist/cjs/bal-tab-item_2.cjs.entry.js

@@ -1,988 +0,0 @@
-'use strict';
-
-var index = require('./index-feA4skrY.js');
-var attributes = require('./attributes-Cp0kpySW.js');
-var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
-var array = require('./array-Db63Hhl1.js');
-var bem = require('./bem-p0PWVN8n.js');
-var formInput = require('./form-input-BwFB4Rej.js');
-var helpers = require('./helpers-HuaiWXrB.js');
-var log = require('./log-CXDMiw7o.js');
-var string = require('./string-CKS6CsMi.js');
-var balTab_util = require('./bal-tab.util-DFGwGbfr.js');
-var aria = require('./aria-BzkqcV7W.js');
-var browser = require('./browser-BwmkTmm8.js');
-var breakpoints_subject = require('./breakpoints.subject-C1p-ePFH.js');
-var config_default = require('./config.default-Cko-wpRU.js');
-var mutation_decorator = require('./mutation.decorator-BolUYaKD.js');
-var visibility_decorator = require('./visibility.decorator-DTARY-5M.js');
-var breakpoints_decorator = require('./breakpoints.decorator-DPrGtqtk.js');
-var resize_decorator = require('./resize.decorator-ChuFQ8x3.js');
-var swipe_decorator = require('./swipe.decorator-C_jX7Il5.js');
-var animation_decorator = require('./animation.decorator-B4NJvcMF.js');
-var config_decorator = require('./config.decorator-CUe4yCTd.js');
-require('./index-BZ67Dcnb.js');
-require('./_commonjsHelpers-BJu3ubxk.js');
-require('./index-BobQkZjn.js');
-require('./config.utils-Civnz2jT.js');
-require('./keyboard.helpers-BkZpVT-9.js');
-require('./device-CoogBamh.js');
-require('./listener-DspXpqzY.js');
-require('./tokens.esm-BWWYqtq4.js');
-require('./swipe.subject-iyL-XVHG.js');
-
-const TabItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.balNavigate = index.createEvent(this, "balNavigate");
-        this.balKeyDown = index.createEvent(this, "balKeyDown");
-        this.inheritAttributes = {};
-        this.tabPanelID = `bal-tab-panel-id-${panelID++}`;
-        this.isActive = false;
-        this.tabsId = undefined;
-        /**
-         * Tells if this route is active and overrides the bal-tabs value property.
-         */
-        this.active = false;
-        /**
-         * This is the key of the tab.
-         */
-        this.value = '';
-        /**
-         * Label for the tab.
-         */
-        this.label = '';
-        /**
-         * Link to path.
-         */
-        this.href = undefined;
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
-        this.target = '_self';
-        /**
-         * If `true` a small red bubble is added to the tab.
-         */
-        this.bubble = false;
-        /**
-         * If `true` the tab is disabled.
-         */
-        this.disabled = false;
-        /**
-         * If `true` the step is hidden.
-         */
-        this.invisible = false;
-        /**
-         * Tell's if the linking is done by a router.
-         */
-        this.prevent = false;
-        /**
-         * Tab icon not available for the steps.
-         */
-        this.icon = undefined;
-        /**
-         * If `true` the tab does not have a panel
-         */
-        this.noPanel = false;
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yControls = undefined;
-        /**
-         * Sub label for the tab.
-         */
-        this.subLabel = '';
-        /**
-         * source for the svg icon
-         */
-        this.svg = '';
-    }
-    componentWillLoad() {
-        this.inheritAttributes = attributes.inheritTrackingAttributes(this.el);
-    }
-    /**
-     * @internal
-     */
-    async setTabId(tabsId) {
-        this.tabsId = tabsId;
-    }
-    /**
-     * Options of the tab like label, value etc.
-     */
-    async getOptions() {
-        return this.options;
-    }
-    /**
-     * Sets the tab active.
-     */
-    async setActive(active) {
-        this.isActive = active;
-    }
-    get options() {
-        return {
-            tabPanelID: this.tabPanelID,
-            value: this.value,
-            icon: this.icon,
-            label: this.label,
-            href: this.href,
-            rel: this.rel,
-            target: this.target,
-            active: this.active,
-            disabled: this.disabled,
-            invisible: this.invisible,
-            bubble: this.bubble,
-            passed: false,
-            prevent: this.prevent,
-            navigate: this.balNavigate,
-            keyDown: this.balKeyDown,
-            trackingData: this.inheritAttributes,
-            noPanel: this.noPanel,
-            a11yControls: this.a11yControls,
-            subLabel: this.subLabel,
-            svg: this.svg,
-        };
-    }
-    render() {
-        const hasPanel = !this.noPanel;
-        const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (index.h(index.Host, { key: 'a7ebf68e3c2fed0d2068d33afe86cb642e1f111d', id: this.tabPanelID, class: {
-                'bal-tab-item': true,
-                'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, index.h("slot", { key: 'cfa012ad2c5f2a14a762e8a65872d99100602c3a' })));
-    }
-    get el() { return index.getElement(this); }
-};
-let panelID = 0;
-
-const TabIcon = ({ item, inverted, accordion, isAccordionOpen, isMobile, hasBubble, }) => {
-    const bemEl = bem.BEM.block('tabs').element('nav').element('item').element('icon');
-    let iconColor = item.disabled ? 'grey' : 'primary';
-    if (inverted) {
-        iconColor = item.disabled ? 'primary-light' : 'white';
-    }
-    return (index.h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('display-svg').class(item.svg !== undefined)) }, item.svg ? (index.h("bal-icon", { svg: item.svg, size: "large", color: "auto" })) : (index.h("bal-icon", { size: isMobile || accordion ? 'small' : '', name: accordion ? 'nav-go-down' : item.icon, color: iconColor, turn: accordion && isAccordionOpen === true && item.active })), hasBubble ? (index.h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
-};
-
-const TabLabel = ({ item, inverted, hasBubble, isExpanded, isVertical, context, }) => {
-    const bemEl = bem.BEM.block('tabs').element('nav').element('item').element('label');
-    return (index.h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier('with-svg').class(item.svg && item.svg.length > 0)), "data-testid": "bal-tabs-item-label" }, item.label, item.subLabel && index.h("span", { class: bemEl.element('sub-label').class() }, item.subLabel), hasBubble ? (index.h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
-};
-
-const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, isExpanded, spaceless, clickable, iconPosition, context, onSelectTab, hasSubLabelInGroup, dimInactiveElements, }) => {
-    var _a;
-    const bemEl = bem.BEM.block('tabs').element('nav').element('item');
-    if (item.invisible) {
-        return;
-    }
-    const hasBubble = item.bubble !== false;
-    const hasIcon = item.icon !== undefined;
-    const hasIconBubble = (hasIcon && hasBubble && iconPosition !== 'horizontal' && !accordion) ||
-        (isMobile && hasIcon && hasBubble && !isVertical && !accordion);
-    const hasAccordionIconBubble = (accordion && hasBubble) || (accordion && isMobile && hasIcon && hasBubble && !isVertical);
-    const hasLabelBubble = (!hasIcon && hasBubble && !accordion) ||
-        (hasBubble && !isMobile && iconPosition === 'horizontal' && !accordion) ||
-        (hasBubble && isVertical && !accordion);
-    const isTabButton = item.href === undefined || item.href === '';
-    const TagType = isTabButton ? 'button' : 'a';
-    const attrs = isTabButton
-        ? {
-            'type': 'button',
-            'role': 'tab',
-            'aria-controls': ((_a = item.aria) === null || _a === void 0 ? void 0 : _a.controls) || item.tabPanelID || undefined,
-            'aria-expanded': aria.ariaBooleanToString(item.active),
-            'aria-disabled': aria.ariaBooleanToString(item.disabled),
-            'aria-label': item.label,
-        }
-        : {
-            role: 'listitem',
-            href: item.href,
-            rel: item.rel,
-            target: item.target,
-        };
-    if (!isLinkList) {
-        attrs['tabindex'] = item.active ? '0' : '-1';
-    }
-    const renderButton = () => (index.h(TagType, Object.assign({ id: `${tabsId}-button-${string.toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item), onKeyDown: (ev) => {
-            var _a;
-            (_a = item.keyDown) === null || _a === void 0 ? void 0 : _a.emit(ev);
-        } }), item.icon || item.svg ? (index.h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), index.h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, isExpanded: isExpanded, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (index.h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
-    if (isLinkList) {
-        return index.h("li", null, renderButton());
-    }
-    else {
-        return renderButton();
-    }
-};
-
-const TabNav = ({ swiper, items, tabsId, isVertical, inNavbar, isMobile, isTouch, ariaLabel, lineActive, lineHidden, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, showSwiperControls, iconPosition, context, onSelectTab, dimInactiveElements, }) => {
-    const bemEl = bem.BEM.block('tabs').element('nav');
-    const navInnerEl = bemEl.element('inner');
-    const navContainerEl = bemEl.element('container');
-    const navLineEl = bemEl.element('line');
-    const navBorderEl = bemEl.element('border');
-    const tabs = items.filter(tab => !tab.invisible);
-    const isFullHeight = inNavbar && !isTouch;
-    const hasSubLabelInGroup = items.some(item => {
-        return item.subLabel && item.subLabel.length > 0;
-    });
-    const Button = ({ item, index: index$1 }) => (index.h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index$1 === 0, isLast: index$1 === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, isExpanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab, hasSubLabelInGroup: hasSubLabelInGroup, dimInactiveElements: dimInactiveElements }));
-    const NavOrDiv = isLinkList ? 'nav' : 'div';
-    const DivOrList = isLinkList ? 'ul' : 'div';
-    return (index.h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('full-height').class(isFullHeight)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)), swiper.cssSwiper()) }, index.h(NavOrDiv, { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign({}, swiper.cssInnerSwiper()), navInnerEl.class()), navInnerEl.modifier(`full-height`).class(isFullHeight)), ref: el => {
-            if (el) {
-                swiper.innerEl = el;
-            }
-        }, "aria-label": isLinkList ? ariaLabel : undefined }, index.h(DivOrList, { id: swiper.containerId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, swiper.cssSwiperContainer()), navContainerEl.class()), navContainerEl.modifier(`vertical`).class(isVertical)), navContainerEl.modifier(`expanded`).class(expanded && !isVertical)), role: isLinkList ? undefined : 'tablist', "aria-label": isLinkList ? undefined : ariaLabel, ref: el => {
-            if (el) {
-                swiper.containerEl = el;
-            }
-        } }, tabs.map((tab, index$1) => (index.h(Button, { item: tab, index: index$1 }))), index.h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, navLineEl.class()), navLineEl.modifier(`active`).class(lineActive)), navLineEl.modifier(`inverted`).class(inverted)), navLineEl.modifier(`animated`).class(animated)), navLineEl.modifier(`vertical`).class(isVertical)), navLineEl.modifier(`hidden`).class(lineHidden)) }), border ? (index.h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, navBorderEl.class()), navBorderEl.modifier(`inverted`).class(inverted)), navBorderEl.modifier(`vertical`).class(isVertical)) })) : (''))), showSwiperControls ? swiper.renderControls() : ''));
-};
-
-const TabSelect = ({ items, value, onSelectTab }) => {
-    const bemEl = bem.BEM.block('tabs').element('select');
-    const onChange = (ev) => {
-        const selectedTabs = items.filter(tab => tab.value === ev.detail);
-        if (selectedTabs.length > 0) {
-            const selectedTab = selectedTabs[0];
-            if (selectedTab.href !== '' && selectedTab.href !== undefined) {
-                if (browser.balBrowser.hasWindow) {
-                    window.open(selectedTab.href, selectedTab.target);
-                }
-            }
-            onSelectTab(ev, selectedTab);
-        }
-    };
-    return (index.h("bal-select", { class: Object.assign({}, bemEl.class()), value: value, onBalChange: event => onChange(event) }, items
-        .filter(tab => !tab.disabled && !tab.invisible)
-        .map(tab => (index.h("bal-select-option", { key: tab.value, label: tab.label, value: tab.value }, tab.label)))));
-};
-
-const balTabsCss = "@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__line{position:absolute;background:var(--bal-tabs-tab-nav-line-background);border-radius:var(--bal-tabs-tab-nav-line-radius);left:1px;z-index:1}.bal-tabs__nav__line--hidden{display:none}.bal-tabs__nav__line--vertical{top:0;min-height:2.5rem}.bal-tabs__nav__line--vertical.bal-tabs__nav__line--active{width:var(--bal-border-width-normal)}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical){bottom:0;min-width:5rem}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical).bal-tabs__nav__line--active{height:var(--bal-border-width-normal)}.bal-tabs__nav__line--animated{will-change:min-width,width,min-height,height,transform;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-tabs__nav__line--inverted{background:var(--bal-tabs-tab-nav-line-background-inverted)}.bal-tabs__nav__container{position:relative}@media screen and (min-width: 769px),print{.bal-tabs__nav--vertical-col-one-third{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-half{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-two-thirds{-ms-flex:none;flex:none;width:66.6666%}.bal-tabs__nav--vertical-col-three-quarters{-ms-flex:none;flex:none;width:75%}.bal-tabs__nav--vertical-col-full{-ms-flex:none;flex:none;width:100%}}.bal-tabs__nav__container--expanded{position:relative;display:-ms-flexbox;display:flex;width:100%;min-width:100%;-ms-flex:1;flex:1}.bal-tabs__nav__container--vertical{overflow:hidden}.bal-tabs__nav__item{display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;cursor:default;gap:.5rem;padding:.25rem .75rem;border-radius:var(--bal-tabs-tab-button-radius);min-width:3rem;min-height:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;background-color:rgba(0,0,0,0);border:unset;width:auto}@media screen and (min-width: 769px),print{.bal-tabs__nav__item{-ms-flex-direction:row;flex-direction:row;min-height:3.5rem}}@media screen and (max-width: 768px){.bal-tabs__nav__item--group-has-sub-label{height:5rem}}.bal-tabs__nav__item--dim-inactive-elements:not(.bal-tabs__nav__item--active){opacity:.6}.bal-tabs__nav__item--display-svg{-ms-flex-direction:row;flex-direction:row}@media screen and (max-width: 768px){.bal-tabs__nav__item--display-svg:not(.bal-tabs__nav__item--display-svg.bal-tabs__nav__item--active){-ms-flex:0 0 auto;flex:0 0 auto;min-width:3rem;width:6rem;padding:.25rem}}.bal-tabs__nav__item--accordion{-ms-flex-direction:row;flex-direction:row}.bal-tabs__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-tabs__nav__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__item--icon-position-vertical{-ms-flex-direction:column;flex-direction:column}.bal-tabs__nav__item--clickable{cursor:pointer;pointer-events:all}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-active)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-active)}.bal-tabs__nav__item--vertical{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;min-height:2.5rem;padding:.5rem 1rem}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--first{padding-left:0}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--last{padding-right:0}.bal-tabs__nav__item--context-meta{min-height:3rem;height:3rem}.bal-tabs__nav__item--context-navigation{min-height:3rem;height:3rem}@media screen and (min-width: 1024px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1280px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1440px){.bal-tabs__nav__item--context-navigation{min-height:5rem;height:5rem}}.bal-tabs__nav__item__icon{position:relative}.bal-tabs__nav__item__icon__bubble{position:absolute;right:-0.75rem;top:-0.25rem}@media screen and (min-width: 769px),print{.bal-tabs__nav__item__icon__bubble{right:-0.625rem;top:-0.25rem}}.bal-tabs__nav__item__label{display:block;position:relative;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);text-align:center;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-tabs-tab-label-text-color)}.bal-tabs__nav__item__label--with-svg{text-align:left;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-small)}@media screen and (max-width: 768px){.bal-tabs__nav__item__label--with-svg:not(.bal-tabs__nav__item__label--active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0}}.bal-tabs__nav__item__label--active{color:var(--bal-tabs-tab-label-text-color-active)}.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-disabled)}.bal-tabs__nav__item__label--inverted{font-family:var(--bal-font-family-text);color:var(--bal-tabs-tab-label-text-color-inverted)}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-inverted-disabled)}.bal-tabs__nav__item__label--inverted{font-weight:var(--bal-font-weight-regular);letter-spacing:.1085px}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--active{font-weight:var(--bal-font-weight-bold);letter-spacing:0}.bal-tabs__nav__item__label__bubble{position:absolute;right:-0.5rem;top:-0.5rem}.bal-tabs__nav__item__label--vertical{text-align:left;width:auto;white-space:normal}.bal-tabs__nav__item__label--expanded{white-space:normal}.bal-tabs__nav__item__label--context-meta{font-size:var(--bal-text-size-small)}.bal-tabs__nav__item__label__sub-label{font-size:var(--bal-text-size-small)}:root{--bal-tabs-tab-nav-border-background:var(--bal-color-border);--bal-tabs-tab-nav-border-background-inverted:var(--bal-color-border-inverted);--bal-tabs-tab-nav-line-background:var(--bal-color-border-primary);--bal-tabs-tab-nav-line-background-inverted:var(--bal-color-border-inverted);--bal-tabs-tab-button-radius:var(--bal-radius-normal);--bal-tabs-tab-nav-border-radius:var(--bal-radius-rounded);--bal-tabs-tab-nav-line-radius:var(--bal-radius-rounded);--bal-tabs-tab-button-label-text-color-hover:var(--bal-color-light-blue-5);--bal-tabs-tab-button-icon-text-color-hover:var(--bal-color-light-blue-5);--bal-tabs-tab-button-label-text-color-active:var(--bal-color-primary-6);--bal-tabs-tab-button-icon-text-color-active:var(--bal-color-primary-6);--bal-tabs-tab-button-label-text-color-inverted-hover:var(--bal-color-light-blue-2);--bal-tabs-tab-button-icon-text-color-inverted-hover:var(--bal-color-light-blue-2);--bal-tabs-tab-button-label-text-color-inverted-active:var(--bal-color-text-info);--bal-tabs-tab-button-icon-text-color-inverted-active:var(--bal-color-text-info);--bal-tabs-tab-label-text-color:var(--bal-color-text-primary);--bal-tabs-tab-label-text-color-active:var(--bal-color-text-primary);--bal-tabs-tab-label-text-color-disabled:var(--bal-color-text-grey);--bal-tabs-tab-label-text-color-inverted:var(--bal-color-text-white);--bal-tabs-tab-label-text-color-inverted-disabled:var(--bal-color-text-primary-light)}.bal-swiper{position:relative;display:block}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;overflow:clip;list-style:none;padding:0;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-swiper__container--gap-none{gap:0}.bal-swiper__container--gap-normal{gap:1rem}.bal-swiper__container--gap-medium{gap:1.5rem}.bal-swiper__controls{width:100%}.bal-swiper__controls--dots{position:relative}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large{position:absolute;top:calc(50% - 1.5rem)}.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small{position:absolute;top:calc(50% - 1rem)}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:\"\";left:0;background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:\"\";right:0;background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-inverted-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-inverted-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0}.bal-tabs--fullwidth{width:100%}.bal-tabs--vertical{-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-tabs--vertical{-ms-flex-direction:row;flex-direction:row;gap:var(--bal-space-normal)}}@media screen and (min-width: 769px),print{.bal-tabs--navbar{height:100%}}.bal-tab-item{width:100%;display:none}.bal-tab-item--active{display:block}.bal-tabs--accordion .bal-tabs__content{overflow:hidden}.bal-tabs--accordion.bal-tabs--collapsed .bal-tabs__content{display:none}.bal-tabs__content{width:100%}.bal-tabs__content--vertical{width:auto;-ms-flex:1;flex:1}.bal-tabs__content--hidden{display:none}.bal-tabs__nav--full-height,.bal-tabs__nav__inner--full-height{height:100%}.bal-tabs__nav__border{position:absolute;background:var(--bal-tabs-tab-nav-border-background);border-radius:var(--bal-tabs-tab-nav-border-radius);height:var(--bal-border-width-normal);left:1px;right:1px;bottom:0;min-width:100%}.bal-tabs__nav__border--hidden{display:none}.bal-tabs__nav__border--vertical{min-width:var(--bal-border-width-normal);max-width:var(--bal-border-width-normal);width:var(--bal-border-width-normal);height:100%;top:0;right:auto}.bal-tabs__nav__border--inverted{background:var(--bal-tabs-tab-nav-border-background-inverted)}";
-
-const Tabs = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.balChange = index.createEvent(this, "balChange");
-        this.balWillAnimate = index.createEvent(this, "balWillAnimate");
-        this.balDidAnimate = index.createEvent(this, "balDidAnimate");
-        this.tabsId = `bal-tabs-${TabsIds++}`;
-        this.inheritAttributes = {};
-        this.swiper = new string.SwiperUtil();
-        this.isAccordionOpen = false;
-        this.accordionState = 1 /* AccordionState.Collapsed */;
-        this.isNavbarOpen = false;
-        this.inNavbar = false;
-        this.inNavbarLight = false;
-        this.enableLineRender = false;
-        this.hasAnimated = false;
-        this.index = 0;
-        this.isMobile = breakpoints_subject.balBreakpoints.isMobile;
-        this.isTablet = breakpoints_subject.balBreakpoints.isTablet;
-        this.language = config_default.defaultConfig.language;
-        this.store = [];
-        this.animated = true;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * @deprecated Defines the layout of the tabs. Right only works from the breakpoint
-         * high-definition and beyond.
-         */
-        this.float = 'left';
-        /**
-         * If `true` the tabs is a block element and uses 100% of the width
-         */
-        this.fullwidth = false;
-        /**
-         * If `true` the tab items can be open and closed
-         */
-        this.accordion = false;
-        /**
-         * If `true` the tabs have a carousel if they need more space than provided.
-         */
-        this.overflow = true;
-        /**
-         * Tabs can be passed as a property or through HTML markup.
-         */
-        this.options = [];
-        /**
-         * Defines the layout of the tabs.
-         */
-        this.iconPosition = 'horizontal';
-        /**
-         * If `true` the field expands over the whole width.
-         */
-        this.expanded = false;
-        /**
-         * If `true` the tabs container does not have a padding left or right.
-         */
-        this.spaceless = false;
-        /**
-         * If `true` the tabs or tabs can be clicked.
-         */
-        this.clickable = true;
-        /**
-         * If `true` a light border is shown for the tabs.
-         */
-        this.border = false;
-        /**
-         * If `true` the tabs can be uses on dark background
-         */
-        this.inverted = false;
-        /**
-         * If `true` the tabs selected line is optional
-         */
-        this.optionalTabSelection = false;
-        /**
-         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
-         */
-        this.debounce = 0;
-        /**
-         * If `true` tabs are align vertically.
-         */
-        this.vertical = false;
-        /**
-         * The col size of the tabs on vertical mode.
-         */
-        this.verticalColSize = 'one-third';
-        /**
-         * If `true` the tabs are shown as a select component on mobile
-         */
-        this.selectOnMobile = false;
-        this.value = undefined;
-        /**
-         * if true, inactive elements will have their opacity reduced
-         */
-        this.dimInactiveElements = false;
-        /**
-         * If `true` then  isTabList becomes true even if there is a link in the list.
-         */
-        this.handleAsTabList = false;
-        /**
-         * LISTENERS
-         * ------------------------------------------------------
-         */
-        this.mutationObserverActive = true;
-        this.getOptions = () => {
-            if (this.options.length > 0) {
-                return [...this.options.map(balTab_util.newBalTabOption)];
-            }
-            else {
-                return Promise.all(this.items.map(value => value.getOptions()));
-            }
-        };
-        this.updateStore = (newStore) => {
-            if (!array.areArraysEqual(this.store, newStore)) {
-                this.store = newStore;
-            }
-            else if (!this.optionalTabSelection && !this.accordion && this.value === undefined && this.store.length > 0) {
-                const firstTab = this.store[0];
-                this.value = firstTab.value;
-            }
-        };
-        this.setActiveItem = () => {
-            const activeTabs = this.store.filter(t => t.active);
-            if (activeTabs.length > 0) {
-                const firstActiveTab = activeTabs[0];
-                this.value = firstActiveTab.value;
-            }
-        };
-        this.setActiveContent = () => {
-            if (this.options.length === 0) {
-                this.items.forEach(item => item.setActive(this.isTabActive(item)));
-            }
-        };
-        this.getLineSize = (element, padding) => {
-            if (element) {
-                const isVertical = this.isVertical();
-                if (isVertical) {
-                    return element.clientHeight;
-                }
-                else {
-                    const clientWidth = element.clientWidth;
-                    if (this.expanded) {
-                        return clientWidth;
-                    }
-                    const paddingX = padding.left + padding.right;
-                    return clientWidth - paddingX;
-                }
-            }
-            return 0;
-        };
-        this.getOffset = (element, padding) => {
-            const isVertical = this.isVertical();
-            if (isVertical) {
-                if (element.offsetTop) {
-                    return element.offsetTop;
-                }
-            }
-            else {
-                if (element.offsetLeft !== undefined && element.offsetLeft !== null) {
-                    if (this.expanded) {
-                        return element.offsetLeft;
-                    }
-                    return element.offsetLeft + padding.left;
-                }
-                const item = element.closest('.bal-tabs__nav__item');
-                if (item) {
-                    if (this.expanded) {
-                        return item.offsetLeft;
-                    }
-                    return item.offsetLeft + padding.left;
-                }
-            }
-            return 0;
-        };
-        this.animateLine = async (initial = false) => {
-            if (!this.enableLineRender) {
-                return;
-            }
-            if (!this.shouldAnimate()) {
-                return;
-            }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
-            helpers.raf(async () => {
-                await helpers.deepReady(this.el, true);
-                this.currentRaf = helpers.raf(async () => {
-                    const target = this.getTargetElement(this.value);
-                    if (!target) {
-                        return;
-                    }
-                    if (target.getAttribute('target') === '_blank') {
-                        return;
-                    }
-                    const padding = string.getComputedPadding(target);
-                    const size = this.getLineSize(target, padding);
-                    const offset = this.getOffset(target, padding);
-                    const lineElement = this.getLineElement();
-                    if (lineElement) {
-                        const isVertical = this.isVertical();
-                        this.balWillAnimate.emit(this.value);
-                        const waitForTransition = helpers.transitionEndAsync(lineElement, 300);
-                        if (isVertical) {
-                            lineElement.style.setProperty('transform', `translateY(${offset}px)`);
-                            lineElement.style.setProperty('min-height', `${size}px`);
-                            lineElement.style.setProperty('height', `${size}px`);
-                            lineElement.style.removeProperty('min-width');
-                            lineElement.style.removeProperty('width');
-                        }
-                        else {
-                            lineElement.style.setProperty('transform', `translateX(${offset}px)`);
-                            lineElement.style.setProperty('min-width', `${size}px`);
-                            lineElement.style.setProperty('width', `${size}px`);
-                            lineElement.style.removeProperty('min-height');
-                            lineElement.style.removeProperty('height');
-                            const borderElement = this.getBorderElement();
-                            const carouselElement = this.getCarouselElement();
-                            if (borderElement && carouselElement) {
-                                if (this.expanded) {
-                                    borderElement.style.setProperty('width', `100%`);
-                                }
-                                else {
-                                    const containerMaxWidth = string.getWidthOfOverflowingChildren(carouselElement);
-                                    borderElement.style.setProperty('width', `${containerMaxWidth}px`);
-                                }
-                            }
-                            await waitForTransition;
-                            this.balDidAnimate.emit(this.value);
-                        }
-                    }
-                });
-            });
-        };
-        this.toggleAccordionState = (initialUpdate = false) => {
-            if (this.accordion) {
-                if (this.isAccordionOpen) {
-                    this.collapseAccordion(initialUpdate);
-                }
-                else {
-                    this.expandAccordion(initialUpdate);
-                }
-            }
-        };
-        this.expandAccordion = (initialUpdate = false) => {
-            this.isAccordionOpen = true;
-            if (this.accordionState === 4 /* AccordionState.Expanded */) {
-                return;
-            }
-            this.accordionState = 4 /* AccordionState.Expanded */;
-            this.balWillAnimate.emit(this.value);
-            this.balDidAnimate.emit(this.value);
-        };
-        this.collapseAccordion = (initialUpdate = false) => {
-            this.isAccordionOpen = false;
-            if (this.accordionState === 1 /* AccordionState.Collapsed */) {
-                return;
-            }
-            this.accordionState = 1 /* AccordionState.Collapsed */;
-            this.balWillAnimate.emit(this.value);
-            this.balDidAnimate.emit(this.value);
-        };
-        this.shouldAnimate = () => {
-            if (typeof window === 'undefined') {
-                return false;
-            }
-            return this.animated;
-        };
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onOptionChange = helpers.debounce(() => this.onOptionChangeInternal(), 100);
-        this.onOptionChangeInternal = async () => {
-            try {
-                const options = await this.getOptions();
-                this.updateStore(options);
-                this.setActiveItem();
-                this.setActiveContent();
-                this.animateLine();
-            }
-            catch (e) {
-                console.warn('[WARN] - Could not read tab options');
-            }
-        };
-        this.onSelectTab = async (ev, tab) => {
-            if (tab.prevent || tab.disabled || !this.clickable) {
-                formInput.stopEventBubbling(ev);
-            }
-            if (!tab.disabled && this.clickable) {
-                if (this.accordion) {
-                    if (tab.value === this.value) {
-                        this.toggleAccordionState();
-                    }
-                    else {
-                        this.expandAccordion();
-                    }
-                }
-                if (tab.navigate) {
-                    tab.navigate.emit(ev);
-                }
-                if (tab.value !== this.value) {
-                    this.balChange.emit(tab.value);
-                    await this.select(tab);
-                    await this.focus(tab);
-                }
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    async optionChanged() {
-        this.onOptionChange();
-        this.mutationObserverActive = this.options === undefined;
-    }
-    expandedChanged() {
-        this.updateSwiper();
-    }
-    debounceChanged() {
-        this.balChange = helpers.debounceEvent(this.balChange, this.debounce);
-    }
-    verticalChanged() {
-        this.updateSwiper();
-    }
-    async valueChanged(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this.onOptionChange();
-        }
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        this.swiper.connectedCallback(this);
-        this.swiper.controls = 'small';
-        this.updateSwiper();
-        this.inNavbar = helpers.hasParent('bal-navbar', this.el);
-        if (this.inNavbar) {
-            const parentNavbar = this.el.closest('bal-navbar');
-            if (parentNavbar) {
-                this.inNavbarLight = parentNavbar.light;
-            }
-        }
-        this.debounceChanged();
-        this.mutationObserverActive = this.options === undefined || this.options.length < 1;
-        if (this.accordion) {
-            const inNavMenuBar = helpers.hasParent('bal-nav-menu-bar', this.el);
-            if (inNavMenuBar) {
-                this.isAccordionOpen = false;
-            }
-            else {
-                const isAccordionOpen = this.value !== undefined && this.value.length > 0;
-                if (isAccordionOpen) {
-                    this.expandAccordion(true);
-                }
-                else {
-                    this.collapseAccordion(true);
-                }
-            }
-        }
-    }
-    componentDidRender() {
-        this.animateLine();
-    }
-    componentWillRender() {
-        this.updateSwiper();
-    }
-    componentDidLoad() {
-        this.onOptionChange();
-        this.items.forEach(item => {
-            item.setTabId(this.tabsId);
-        });
-        helpers.rOnLoad(() => {
-            this.enableLineRender = true;
-            this.animateLine(true);
-        });
-    }
-    componentWillLoad() {
-        this.inheritAttributes = attributes.inheritAttributes(this.el, ['aria-label']);
-    }
-    disconnectedCallback() {
-        this.swiper.disconnectedCallback();
-    }
-    mutationListener() {
-        this.onOptionChange();
-        this.swiper.notifyChange();
-    }
-    visibilityListener() {
-        this.swiper.notifyChange();
-    }
-    breakpointListener(breakpoints) {
-        this.isMobile = breakpoints.mobile;
-        this.isTablet = breakpoints.tablet;
-        this.swiper.notifyChange();
-    }
-    resizeListener(info) {
-        this.swiper.notifyChange();
-        if ((!this.isVertical() && info.width) || (this.isVertical() && info.height)) {
-            this.animateLine();
-        }
-    }
-    swipeListener({ left, right }) {
-        if (left) {
-            this.swiper.next();
-        }
-        else if (right) {
-            this.swiper.previous();
-        }
-    }
-    animationListener(info) {
-        this.isUsedInNavbar(info.target);
-        this.animateLine();
-    }
-    listenToKeyDown(ev) {
-        if (this.isTabList) {
-            if (this.vertical !== false) {
-                if (ev.code === 'ArrowDown') {
-                    this.tabListSelectNext(ev);
-                }
-                else if (ev.code === 'ArrowUp') {
-                    this.tabListSelectPrevious(ev);
-                }
-            }
-            else {
-                if (ev.code === 'ArrowRight') {
-                    this.tabListSelectNext(ev);
-                }
-                else if (ev.code === 'ArrowLeft') {
-                    this.tabListSelectPrevious(ev);
-                }
-            }
-        }
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.animated = state.animated;
-    }
-    /**
-     * Go to tab with the given value
-     */
-    async select(tab) {
-        this.value = tab.value;
-    }
-    /**
-     * Find the options properties by its value
-     */
-    async getOptionByValue(value) {
-        const options = this.store;
-        return options.find(option => option.value === value);
-    }
-    /**
-     * @internal
-     * Rerenders the line to mark the active tab.
-     */
-    async renderLine() {
-        this.animateLine();
-    }
-    /**
-     * @internal
-     * Closes the accordion
-     */
-    async closeAccordion() {
-        if (this.isAccordionOpen) {
-            this.collapseAccordion();
-        }
-    }
-    swiperOnChange(index) {
-        this.index = index;
-    }
-    /**
-     * GETTERS
-     * ------------------------------------------------------
-     */
-    swiperGetAllChildrenElements() {
-        return Array.from(this.el.querySelectorAll('.bal-tabs__nav__item'));
-    }
-    /**
-     * Tells if the component acts as a tab or link list.
-     * If only one link is in the list and handleAsTabList has been set to false it will be a link list
-     */
-    get isTabList() {
-        return this.store.filter(tab => !!tab.href).length === 0 || this.handleAsTabList;
-    }
-    get items() {
-        return Array.from(this.el.querySelectorAll(`#${this.tabsId} > bal-tab-item`));
-    }
-    getTargetElement(value) {
-        const selector = `[data-tabs="${this.tabsId}"]`;
-        const elements = Array.from(this.el.querySelectorAll(selector));
-        return elements.filter(element => element.getAttribute('data-value') == value)[0];
-    }
-    getLineElement() {
-        return this.el.querySelector(`#${this.tabsId}-line`);
-    }
-    getBorderElement() {
-        return this.el.querySelector(`#${this.tabsId}-border`);
-    }
-    getCarouselElement() {
-        return this.el.querySelector(`#${this.swiper.containerId}`);
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    updateSwiper() {
-        if (this.overflow) {
-            if (this.expanded || this.isVertical()) {
-                this.swiper.disable();
-            }
-            else {
-                this.swiper.activate();
-            }
-        }
-        else {
-            this.swiper.disable();
-        }
-    }
-    isUsedInNavbar(target) {
-        const parentNavbar = target.closest('bal-navbar');
-        const isNavbarOpen = target;
-        if (parentNavbar && helpers.isDescendant(parentNavbar, this.el)) {
-            this.isNavbarOpen = isNavbarOpen;
-        }
-    }
-    isTabActive(tab) {
-        return tab.value === this.value;
-    }
-    isTabVisible(tab) {
-        return !tab.hidden;
-    }
-    parseVertical() {
-        if (this.vertical === 'true' || this.vertical === '') {
-            return true;
-        }
-        if (this.vertical === 'false' || this.vertical === undefined) {
-            return false;
-        }
-        if (this.vertical === 'mobile') {
-            return this.isMobile;
-        }
-        if (this.vertical === 'tablet') {
-            return this.isTablet || this.isMobile;
-        }
-        return this.vertical;
-    }
-    isVertical() {
-        const isVertical = this.parseVertical();
-        const isMobile = this.isMobile;
-        const isTablet = this.isTablet;
-        const isTouch = isMobile || isTablet;
-        return isVertical || (isTouch && this.inNavbar);
-    }
-    /**
-     * PRIVATE Tab Navigation with Arrow Keys
-     * ------------------------------------------------------
-     */
-    findNextTab(previous = false) {
-        const indexOfActive = this.store.findIndex(t => this.isTabActive(t));
-        let tabs = this.store.map((tab, index) => ({
-            index,
-            visible: !tab.hidden && !tab.disabled,
-        }));
-        if (previous) {
-            tabs = tabs.reverse();
-        }
-        const visibleTabs = tabs.filter(t => t.visible).map(t => t.index);
-        const findNextTabReducer = (acc, index) => {
-            // found a new higher index need to break out
-            if (acc > indexOfActive) {
-                return acc;
-            }
-            if (index <= acc) {
-                return acc;
-            }
-            else {
-                return index;
-            }
-        };
-        const findPreviousTabReducer = (acc, index) => {
-            // found a new lower index need to break out
-            if (acc < indexOfActive) {
-                return acc;
-            }
-            if (index >= acc) {
-                return acc;
-            }
-            else {
-                return index;
-            }
-        };
-        const reducer = previous ? findPreviousTabReducer : findNextTabReducer;
-        const nextIndex = visibleTabs.reduce((acc, value) => reducer(acc, value), indexOfActive);
-        return this.store[nextIndex];
-    }
-    findPreviousTab() {
-        return this.findNextTab(true);
-    }
-    tabListSelectNext(ev) {
-        const nextTab = this.findNextTab();
-        if (nextTab) {
-            this.onSelectTab(ev, nextTab);
-        }
-    }
-    tabListSelectPrevious(ev) {
-        const previousTab = this.findPreviousTab();
-        if (previousTab) {
-            this.onSelectTab(ev, previousTab);
-        }
-    }
-    async focus(tab) {
-        const hasKeyboardFocus = this.el.querySelector(`button.bal-focused, a.bal-focused`) !== null;
-        if (this.swiper.isActive()) {
-            const options = await this.getOptions();
-            const index = options.findIndex(option => option.value === tab.value);
-            this.swiper.updateIndex(index);
-        }
-        await helpers.waitAfterFramePaint();
-        if (hasKeyboardFocus) {
-            const tabEl = this.el.querySelector(`#${this.tabsId}-button-${string.toKebabCase(tab.value)}`);
-            if (tabEl) {
-                tabEl.focus({ preventScroll: true });
-            }
-        }
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = bem.BEM.block('tabs');
-        const contentEl = block.element('content');
-        const isMobile = this.isMobile;
-        const isTablet = this.isTablet;
-        const isTouch = isMobile || isTablet;
-        const isInverted = (this.inNavbar && !isTouch && !this.inNavbarLight) || (!this.inNavbar && this.inverted);
-        const isVertical = this.isVertical();
-        const hasBorder = this.border || (this.inNavbar && isTouch);
-        const isSelect = isMobile && this.selectOnMobile;
-        const tabs = this.store.map(tab => (Object.assign(Object.assign({}, tab), { active: tab.value === this.value })));
-        const expanded = this.accordionState === 4 /* AccordionState.Expanded */ || this.accordionState === 8 /* AccordionState.Expanding */;
-        const contentPart = expanded ? 'content expanded' : 'content';
-        const valueExists = this.value !== undefined && !!this.store.find(o => o.value === this.value);
-        const isLinkList = !this.isTabList;
-        const dataValue = this.store
-            .filter(t => this.isTabActive(t))
-            .map(t => t.value)
-            .join(',');
-        const dataLabel = this.store
-            .filter(t => this.isTabActive(t))
-            .map(t => t.label)
-            .join(',');
-        return (index.h(index.Host, { key: 'df9259a96b0763c4eae688a54a657ceaea8b39a2', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated && this.isTabList)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (index.h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (index.h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, ariaLabel: this.inheritAttributes['aria-label'], accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated && this.isTabList, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), index.h("div", { key: '47ff9e0e5e38a7361a928de8dc6a42aad8ab1cb8', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
-                .modifier('hidden')
-                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, index.h("div", { key: 'f7068bbf0aa5fb282d0ab93e3b3ffc740b8b998e', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, index.h("slot", { key: '12e2c4813faa77f774b5400501d114b0e9a57535' })))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "options": ["optionChanged"],
-        "expanded": ["expandedChanged"],
-        "debounce": ["debounceChanged"],
-        "vertical": ["verticalChanged"],
-        "value": ["valueChanged"]
-    }; }
-};
-tslib_es6.__decorate([
-    log.Logger('bal-tabs'),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Function]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Tabs.prototype, "createLogger", null);
-tslib_es6.__decorate([
-    mutation_decorator.ListenToMutation({ tags: ['bal-tabs', 'bal-tab-item'] }),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", []),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Tabs.prototype, "mutationListener", null);
-tslib_es6.__decorate([
-    visibility_decorator.ListenToVisibility(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", []),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Tabs.prototype, "visibilityListener", 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)
-], Tabs.prototype, "breakpointListener", null);
-tslib_es6.__decorate([
-    resize_decorator.ListenToResize(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Object]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Tabs.prototype, "resizeListener", null);
-tslib_es6.__decorate([
-    swipe_decorator.ListenToSwipe(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Object]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Tabs.prototype, "swipeListener", null);
-tslib_es6.__decorate([
-    animation_decorator.ListenToAnimation(),
-    tslib_es6.__metadata("design:type", Function),
-    tslib_es6.__metadata("design:paramtypes", [Object]),
-    tslib_es6.__metadata("design:returntype", void 0)
-], Tabs.prototype, "animationListener", 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)
-], Tabs.prototype, "configChanged", null);
-let TabsIds = 0;
-Tabs.style = balTabsCss;
-
-exports.bal_tab_item = TabItem;
-exports.bal_tabs = Tabs;