import { __decorate, __metadata } from "tslib";
import { h, Host, } from "@stencil/core";
import { ListenToAnimation } from "../../utils/animation";
import { areArraysEqual } from "../../utils/array";
import { inheritAttributes } from "../../utils/attributes";
import { BEM } from "../../utils/bem";
import { balBreakpoints, ListenToBreakpoints } from "../../utils/breakpoints";
import { defaultConfig, ListenToConfig } from "../../utils/config";
import { stopEventBubbling } from "../../utils/form-input";
import { debounce, debounceEvent, deepReady, hasParent, isDescendant, raf, rOnLoad, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
import { Logger } from "../../utils/log";
import { ListenToMutation } from "../../utils/mutation";
import { ListenToResize } from "../../utils/resize";
import { toKebabCase } from "../../utils/string";
import { getComputedPadding, getWidthOfOverflowingChildren } from "../../utils/style";
import { ListenToSwipe } from "../../utils/swipe";
import { SwiperUtil } from "../../utils/swiper";
import { ListenToVisibility } from "../../utils/visibility";
import { newBalTabOption } from "./bal-tab.util";
import { TabNav } from "./components/tab-nav";
import { TabSelect } from "./components/tab-select";
export class Tabs {
    constructor() {
        this.tabsId = `bal-tabs-${TabsIds++}`;
        this.inheritAttributes = {};
        this.swiper = new 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 = balBreakpoints.isMobile;
        this.isTablet = balBreakpoints.isTablet;
        this.language = 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(newBalTabOption)];
            }
            else {
                return Promise.all(this.items.map(value => value.getOptions()));
            }
        };
        this.updateStore = (newStore) => {
            if (!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);
            }
            raf(async () => {
                await deepReady(this.el, true);
                this.currentRaf = raf(async () => {
                    const target = this.getTargetElement(this.value);
                    if (!target) {
                        return;
                    }
                    if (target.getAttribute('target') === '_blank') {
                        return;
                    }
                    const padding = 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 = 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 = 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 = 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) {
                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 = 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 = 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 = 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);
        });
        rOnLoad(() => {
            this.enableLineRender = true;
            this.animateLine(true);
        });
    }
    componentWillLoad() {
        this.inheritAttributes = 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 && 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 waitAfterFramePaint();
        if (hasKeyboardFocus) {
            const tabEl = this.el.querySelector(`#${this.tabsId}-button-${toKebabCase(tab.value)}`);
            if (tabEl) {
                tabEl.focus({ preventScroll: true });
            }
        }
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = 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 (h(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 ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (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 })), 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')) }, h("div", { key: 'f7068bbf0aa5fb282d0ab93e3b3ffc740b8b998e', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: '12e2c4813faa77f774b5400501d114b0e9a57535' })))));
    }
    static get is() { return "bal-tabs"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-tabs.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-tabs.css"]
        };
    }
    static get properties() {
        return {
            "float": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalTabsFloat",
                    "resolved": "\"left\" | \"right\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Defines the layout of the tabs. Right only works from the breakpoint\nhigh-definition and beyond."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "float",
                "defaultValue": "'left'"
            },
            "fullwidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tabs is a block element and uses 100% of the width"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "fullwidth",
                "defaultValue": "false"
            },
            "accordion": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tab items can be open and closed"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "accordion",
                "defaultValue": "false"
            },
            "overflow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tabs have a carousel if they need more space than provided."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "overflow",
                "defaultValue": "true"
            },
            "options": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "BalTabOption[]",
                    "resolved": "BalTabOption[]",
                    "references": {
                        "BalTabOption": {
                            "location": "import",
                            "path": "./bal-tab.type",
                            "id": "src/components/bal-tabs/bal-tab.type.ts::BalTabOption"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Tabs can be passed as a property or through HTML markup."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "context": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalTabsContext",
                    "resolved": "\"meta\" | \"navbar\" | \"navigation\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the layout of the tabs."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "context"
            },
            "iconPosition": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalTabsIconPosition",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the layout of the tabs."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-position",
                "defaultValue": "'horizontal'"
            },
            "expanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the field expands over the whole width."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expanded",
                "defaultValue": "false"
            },
            "spaceless": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tabs container does not have a padding left or right."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "spaceless",
                "defaultValue": "false"
            },
            "clickable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tabs or tabs can be clicked."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "clickable",
                "defaultValue": "true"
            },
            "border": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` a light border is shown for the tabs."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "border",
                "defaultValue": "false"
            },
            "inverted": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tabs can be uses on dark background"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "inverted",
                "defaultValue": "false"
            },
            "optionalTabSelection": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tabs selected line is optional"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "optional-tab-selection",
                "defaultValue": "false"
            },
            "debounce": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "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`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "debounce",
                "defaultValue": "0"
            },
            "vertical": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalTabsVertical",
                    "resolved": "\"mobile\" | \"tablet\" | boolean",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` tabs are align vertically."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "vertical",
                "defaultValue": "false"
            },
            "verticalColSize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalTabsColSize",
                    "resolved": "\"full\" | \"half\" | \"one-quarter\" | \"one-third\" | \"three-quarters\" | \"two-thirds\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The col size of the tabs on vertical mode."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "vertical-col-size",
                "defaultValue": "'one-third'"
            },
            "selectOnMobile": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the tabs are shown as a select component on mobile"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "select-on-mobile",
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "undefined"
            },
            "dimInactiveElements": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "if true, inactive elements will have their opacity reduced"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "dim-inactive-elements",
                "defaultValue": "false"
            },
            "handleAsTabList": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` then  isTabList becomes true even if there is a link in the list."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "handle-as-tab-list",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isAccordionOpen": {},
            "accordionState": {},
            "isNavbarOpen": {},
            "inNavbar": {},
            "inNavbarLight": {},
            "enableLineRender": {},
            "hasAnimated": {},
            "index": {},
            "isMobile": {},
            "isTablet": {},
            "language": {},
            "store": {},
            "animated": {}
        };
    }
    static get events() {
        return [{
                "method": "balChange",
                "name": "balChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the changes has finished."
                },
                "complexType": {
                    "original": "BalEvents.BalTabsChangeDetail",
                    "resolved": "string",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balWillAnimate",
                "name": "balWillAnimate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted before the animation starts"
                },
                "complexType": {
                    "original": "BalEvents.BalTabsWillAnimateDetail",
                    "resolved": "string",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balDidAnimate",
                "name": "balDidAnimate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted after the animation has finished"
                },
                "complexType": {
                    "original": "BalEvents.BalTabsDidAnimateDetail",
                    "resolved": "string",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "configChanged": {
                "complexType": {
                    "signature": "(state: BalConfigState) => Promise<void>",
                    "parameters": [{
                            "name": "state",
                            "type": "BalConfigState",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalConfigState": {
                            "location": "import",
                            "path": "../../utils/config",
                            "id": "src/utils/config/index.ts::BalConfigState"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "define config for the component"
                        }]
                }
            },
            "select": {
                "complexType": {
                    "signature": "(tab: BalTabOption) => Promise<void>",
                    "parameters": [{
                            "name": "tab",
                            "type": "BalTabOption",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalTabOption": {
                            "location": "import",
                            "path": "./bal-tab.type",
                            "id": "src/components/bal-tabs/bal-tab.type.ts::BalTabOption"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Go to tab with the given value",
                    "tags": []
                }
            },
            "getOptionByValue": {
                "complexType": {
                    "signature": "(value: string) => Promise<BalTabOption>",
                    "parameters": [{
                            "name": "value",
                            "type": "string",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalTabOption": {
                            "location": "import",
                            "path": "./bal-tab.type",
                            "id": "src/components/bal-tabs/bal-tab.type.ts::BalTabOption"
                        }
                    },
                    "return": "Promise<BalTabOption>"
                },
                "docs": {
                    "text": "Find the options properties by its value",
                    "tags": []
                }
            },
            "renderLine": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "Rerenders the line to mark the active tab."
                        }]
                }
            },
            "closeAccordion": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "Closes the accordion"
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "options",
                "methodName": "optionChanged"
            }, {
                "propName": "expanded",
                "methodName": "expandedChanged"
            }, {
                "propName": "debounce",
                "methodName": "debounceChanged"
            }, {
                "propName": "vertical",
                "methodName": "verticalChanged"
            }, {
                "propName": "value",
                "methodName": "valueChanged"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "listenToKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
__decorate([
    Logger('bal-tabs'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Tabs.prototype, "createLogger", null);
__decorate([
    ListenToMutation({ tags: ['bal-tabs', 'bal-tab-item'] }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], Tabs.prototype, "mutationListener", null);
__decorate([
    ListenToVisibility(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], Tabs.prototype, "visibilityListener", null);
__decorate([
    ListenToBreakpoints(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Tabs.prototype, "breakpointListener", null);
__decorate([
    ListenToResize(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Tabs.prototype, "resizeListener", null);
__decorate([
    ListenToSwipe(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Tabs.prototype, "swipeListener", null);
__decorate([
    ListenToAnimation(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Tabs.prototype, "animationListener", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Tabs.prototype, "configChanged", null);
let TabsIds = 0;
