@baloise/ds-core 17.2.1 → 17.2.2-nightly.20250109

package/dist/collection/components/bal-tabs/bal-tabs.js

@@ -1,23 +1,25 @@
 import { __decorate, __metadata } from "tslib";
 import { Host, h, } from "@stencil/core";
 import { areArraysEqual } from "../../utils/array";
-import { debounce, debounceEvent, deepReady, hasParent, isChildOfEventTarget, isDescendant, raf, rLCP, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
-import { ListenToConfig } from "../../utils/config";
+import { debounce, debounceEvent, deepReady, hasParent, isChildOfEventTarget, isDescendant, raf, rOnLoad, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
+import { defaultConfig, ListenToConfig } from "../../utils/config";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 import { newBalTabOption } from "./bal-tab.util";
 import { stopEventBubbling } from "../../utils/form-input";
 import { TabSelect } from "./components/tab-select";
-import { getComputedPadding } from "../../utils/style";
+import { getComputedPadding, getWidthOfOverflowingChildren } from "../../utils/style";
 import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
 import { ListenToMutation } from "../../utils/mutation";
 import { ListenToResize } from "../../utils/resize";
 import { TabNav } from "./components/tab-nav";
 import { toKebabCase } from "../../utils/string";
-import { ListenTo } from "../../utils/listen";
+import { SwiperUtil } from "../../utils/swiper";
+import { ListenToSwipe } from "../../utils/swipe";
 export class Tabs {
     constructor() {
         this.tabsId = `bal-tabs-${TabsIds++}`;
+        this.swiper = new SwiperUtil();
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -77,23 +79,26 @@ export class Tabs {
                 }
             }
             else {
-                if (element.offsetLeft) {
+                if (element.offsetLeft !== undefined && element.offsetLeft !== null) {
                     if (this.expanded) {
                         return element.offsetLeft;
                     }
                     return element.offsetLeft + padding.left;
                 }
-                const carouselItem = element.closest('bal-carousel-item');
-                if (carouselItem) {
+                const item = element.closest('.bal-tabs__nav__item');
+                if (item) {
                     if (this.expanded) {
-                        return carouselItem.offsetLeft;
+                        return item.offsetLeft;
                     }
-                    return carouselItem.offsetLeft + padding.left;
+                    return item.offsetLeft + padding.left;
                 }
             }
             return 0;
         };
-        this.animateLine = async () => {
+        this.animateLine = async (initial = false) => {
+            if (!this.enableLineRender) {
+                return;
+            }
             if (!this.shouldAnimate()) {
                 return;
             }
@@ -134,7 +139,7 @@ export class Tabs {
                             const borderElement = this.getBorderElement();
                             const carouselElement = this.getCarouselElement();
                             if (borderElement && carouselElement) {
-                                const containerMaxWidth = carouselElement.clientWidth;
+                                const containerMaxWidth = getWidthOfOverflowingChildren(carouselElement);
                                 borderElement.style.setProperty('width', `${containerMaxWidth}px`);
                             }
                             await waitForTransition;
@@ -156,71 +161,21 @@ export class Tabs {
         };
         this.expandAccordion = (initialUpdate = false) => {
             this.isAccordionOpen = true;
-            const { contentEl, contentElWrapper } = this;
-            if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
-                this.accordionState = 4 /* AccordionState.Expanded */;
-                return;
-            }
             if (this.accordionState === 4 /* AccordionState.Expanded */) {
                 return;
             }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
-            if (this.shouldAnimate()) {
-                raf(() => {
-                    this.accordionState = 8 /* AccordionState.Expanding */;
-                    this.currentRaf = raf(async () => {
-                        const contentHeight = contentElWrapper.offsetHeight;
-                        const waitForTransition = transitionEndAsync(contentEl, 300);
-                        contentEl.style.setProperty('max-height', `${contentHeight}px`);
-                        this.balWillAnimate.emit(this.value);
-                        await waitForTransition;
-                        this.accordionState = 4 /* AccordionState.Expanded */;
-                        contentEl.style.removeProperty('max-height');
-                        this.balDidAnimate.emit(this.value);
-                    });
-                });
-            }
-            else {
-                this.accordionState = 4 /* AccordionState.Expanded */;
-                this.balWillAnimate.emit(this.value);
-                this.balDidAnimate.emit(this.value);
-            }
+            this.accordionState = 4 /* AccordionState.Expanded */;
+            this.balWillAnimate.emit(this.value);
+            this.balDidAnimate.emit(this.value);
         };
         this.collapseAccordion = (initialUpdate = false) => {
             this.isAccordionOpen = false;
-            const { contentEl } = this;
-            if (initialUpdate || contentEl === undefined) {
-                this.accordionState = 1 /* AccordionState.Collapsed */;
-                return;
-            }
             if (this.accordionState === 1 /* AccordionState.Collapsed */) {
                 return;
             }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
-            if (this.shouldAnimate()) {
-                this.currentRaf = raf(async () => {
-                    const contentHeight = contentEl.offsetHeight;
-                    contentEl.style.setProperty('max-height', `${contentHeight}px`);
-                    raf(async () => {
-                        const waitForTransition = transitionEndAsync(contentEl, 300);
-                        this.accordionState = 2 /* AccordionState.Collapsing */;
-                        this.balWillAnimate.emit(this.value);
-                        await waitForTransition;
-                        this.accordionState = 1 /* AccordionState.Collapsed */;
-                        contentEl.style.removeProperty('max-height');
-                        this.balDidAnimate.emit(this.value);
-                    });
-                });
-            }
-            else {
-                this.accordionState = 1 /* AccordionState.Collapsed */;
-                this.balWillAnimate.emit(this.value);
-                this.balDidAnimate.emit(this.value);
-            }
+            this.accordionState = 1 /* AccordionState.Collapsed */;
+            this.balWillAnimate.emit(this.value);
+            this.balDidAnimate.emit(this.value);
         };
         this.shouldAnimate = () => {
             if (typeof window === 'undefined') {
@@ -273,9 +228,12 @@ export class Tabs {
         this.isNavbarOpen = false;
         this.inNavbar = false;
         this.inNavbarLight = false;
-        this.isLargestContentfulPaintDone = 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;
         this.float = 'left';
@@ -305,9 +263,15 @@ export class Tabs {
         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();
@@ -318,6 +282,9 @@ export class Tabs {
      * ------------------------------------------------------
      */
     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');
@@ -343,29 +310,53 @@ export class Tabs {
             }
         }
     }
+    componentDidRender() {
+        this.animateLine();
+    }
+    componentWillRender() {
+        this.updateSwiper();
+    }
     componentDidLoad() {
         this.onOptionChange();
-        rLCP(() => {
-            this.isLargestContentfulPaintDone = true;
+        rOnLoad(() => {
+            this.enableLineRender = true;
+            this.animateLine(true);
         });
     }
+    disconnectedCallback() {
+        this.swiper.disconnectedCallback();
+    }
     mutationListener() {
         this.onOptionChange();
+        this.swiper.notifyChange();
     }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
         this.isTablet = breakpoints.tablet;
-        this.animateLine();
+        this.swiper.notifyChange();
     }
-    resizeListener() {
-        this.animateLine();
+    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();
+        }
     }
     listenToWillAnimate(ev) {
         isChildOfEventTarget(ev, this.el, () => this.animateLine());
     }
     listenToDidAnimate(ev) {
-        isChildOfEventTarget(ev, this.el, () => this.animateLine());
-        this.isUsedInNavbar(ev);
+        isChildOfEventTarget(ev, this.el, () => {
+            this.isUsedInNavbar(ev);
+            this.animateLine();
+        });
     }
     listenToKeyDown(ev) {
         if (this.isTabList) {
@@ -387,14 +378,6 @@ export class Tabs {
             }
         }
     }
-    isUsedInNavbar(ev) {
-        const target = ev.target;
-        const parentNavbar = target.closest('bal-navbar');
-        const isNavbarOpen = ev.target;
-        if (parentNavbar && isDescendant(parentNavbar, this.el)) {
-            this.isNavbarOpen = isNavbarOpen;
-        }
-    }
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------
@@ -434,16 +417,62 @@ export class Tabs {
             this.collapseAccordion();
         }
     }
+    swiperOnChange(index) {
+        this.index = index;
+    }
     /**
-     * PRIVATE METHODS
+     * GETTERS
      * ------------------------------------------------------
      */
+    swiperGetAllChildrenElements() {
+        return Array.from(this.el.querySelectorAll('.bal-tabs__nav__item'));
+    }
     get isTabList() {
         return this.store.filter(tab => !!tab.href).length === 0;
     }
     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.tabsId}-carousel`)
+        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(ev) {
+        const target = ev.target;
+        const parentNavbar = target.closest('bal-navbar');
+        const isNavbarOpen = ev.target;
+        if (parentNavbar && isDescendant(parentNavbar, this.el)) {
+            this.isNavbarOpen = isNavbarOpen;
+        }
+    }
     isTabActive(tab) {
         return tab.value === this.value;
     }
@@ -472,20 +501,6 @@ export class Tabs {
         const isTouch = isMobile || isTablet;
         return isVertical || (isTouch && this.inNavbar);
     }
-    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.tabsId}-carousel`);
-    }
     /**
      * PRIVATE Tab Navigation with Arrow Keys
      * ------------------------------------------------------
@@ -544,8 +559,13 @@ export class Tabs {
         }
     }
     async focus(tab) {
-        await waitAfterFramePaint();
         const hasKeyboardFocus = this.el.querySelector(`button.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) {
@@ -559,25 +579,30 @@ export class Tabs {
      */
     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 hasCarousel = this.isLargestContentfulPaintDone && !isVertical && this.overflow && !this.expanded;
-        const isSelect = this.isLargestContentfulPaintDone && isMobile && this.selectOnMobile;
+        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;
-        return (h(Host, { key: 'dfe8fd6f11b4d884bf8e7605653b637526412382', 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)), 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": this.store
-                .filter(t => this.isTabActive(t))
-                .map(t => t.value)
-                .join(','), "data-label": this.store
-                .filter(t => this.isTabActive(t))
-                .map(t => t.label)
-                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: '0aac73b494d835402ac6654a6a281593917c355a', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { key: '77c68b5ce4d763f99bacff6e8395f9cd4c03e430', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '822c8efa61f9e44fc42e6f8ba31b5286967d7181' })))));
+        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: 'cf91cfa4c30b4501c3cd47f997d2e8556f5036f4', 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)), 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, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated, 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: '89cda7dd3a5b8d75d57e504576ef887d2d514989', 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: '36543cb85d8b5cc83f49c4e5a0a3ce25f58ebf71', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'd702ea7e556ae03dfdcab0d48542f7e5c1563fe5' })))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {
@@ -614,6 +639,8 @@ export class Tabs {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "float",
                 "reflect": false,
                 "defaultValue": "'left'"
@@ -632,6 +659,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the tabs is a block element and uses 100% of the width"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "fullwidth",
                 "reflect": false,
                 "defaultValue": "false"
@@ -650,6 +679,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the tab items can be open and closed"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accordion",
                 "reflect": false,
                 "defaultValue": "false"
@@ -668,6 +699,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the tabs have a carousel if they need more space than provided."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "overflow",
                 "reflect": false,
                 "defaultValue": "true"
@@ -692,6 +725,8 @@ export class Tabs {
                     "tags": [],
                     "text": "Tabs can be passed as a property or through HTML markup."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "context": {
@@ -713,6 +748,8 @@ export class Tabs {
                     "tags": [],
                     "text": "Defines the layout of the tabs."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "context",
                 "reflect": false
             },
@@ -735,6 +772,8 @@ export class Tabs {
                     "tags": [],
                     "text": "Defines the layout of the tabs."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon-position",
                 "reflect": false,
                 "defaultValue": "'horizontal'"
@@ -753,6 +792,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the field expands over the whole width."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
@@ -771,6 +812,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the tabs container does not have a padding left or right."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spaceless",
                 "reflect": false,
                 "defaultValue": "false"
@@ -789,6 +832,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the tabs or tabs can be clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "clickable",
                 "reflect": false,
                 "defaultValue": "true"
@@ -807,6 +852,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` a light border is shown for the tabs."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "border",
                 "reflect": false,
                 "defaultValue": "false"
@@ -825,6 +872,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the tabs can be uses on dark background"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
@@ -843,6 +892,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the tabs selected line is optional"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "optional-tab-selection",
                 "reflect": false,
                 "defaultValue": "false"
@@ -861,6 +912,8 @@ export class Tabs {
                     "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,
                 "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
@@ -884,6 +937,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` tabs are align vertically."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "vertical",
                 "reflect": false,
                 "defaultValue": "false"
@@ -907,6 +962,8 @@ export class Tabs {
                     "tags": [],
                     "text": "The col size of the tabs on vertical mode."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "vertical-col-size",
                 "reflect": false,
                 "defaultValue": "'one-third'"
@@ -925,6 +982,8 @@ export class Tabs {
                     "tags": [],
                     "text": "If `true` the tabs are shown as a select component on mobile"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "select-on-mobile",
                 "reflect": false,
                 "defaultValue": "false"
@@ -943,6 +1002,8 @@ export class Tabs {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -961,6 +1022,8 @@ export class Tabs {
                     "tags": [],
                     "text": "if true, inactive elements will have their opacity reduced"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dim-inactive-elements",
                 "reflect": false,
                 "defaultValue": "false"
@@ -974,9 +1037,12 @@ export class Tabs {
             "isNavbarOpen": {},
             "inNavbar": {},
             "inNavbarLight": {},
-            "isLargestContentfulPaintDone": {},
+            "enableLineRender": {},
+            "hasAnimated": {},
+            "index": {},
             "isMobile": {},
             "isTablet": {},
+            "language": {},
             "store": {},
             "animated": {}
         };
@@ -1174,14 +1240,41 @@ export class Tabs {
         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": "balWillAnimate",
+                "method": "listenToWillAnimate",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "balDidAnimate",
+                "method": "listenToDidAnimate",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "listenToKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     Logger('bal-tabs'),
@@ -1204,27 +1297,15 @@ __decorate([
 __decorate([
     ListenToResize(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], Tabs.prototype, "resizeListener", null);
 __decorate([
-    ListenTo('balWillAnimate', { target: 'window' }),
+    ListenToSwipe(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Tabs.prototype, "listenToWillAnimate", null);
-__decorate([
-    ListenTo('balDidAnimate', { target: 'window' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Tabs.prototype, "listenToDidAnimate", null);
-__decorate([
-    ListenTo('keydown'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
-], Tabs.prototype, "listenToKeyDown", null);
+], Tabs.prototype, "swipeListener", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),