@tylertech/forge 2.16.6 → 3.0.0-next.10

package/esm/tabs/tab-bar/tab-bar-foundation.js

@@ -3,383 +3,322 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { Platform, isNumber } from '@tylertech/forge-core';
-import { TAB_BAR_CONSTANTS, ACCEPTABLE_KEYS, KEYCODE_MAP } from './tab-bar-constants';
+import { NAVIGATION_KEYS, TAB_BAR_CONSTANTS } from './tab-bar-constants';
 import { TAB_CONSTANTS } from '../tab/tab-constants';
 export class TabBarFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
+        // State
         this._isInitialized = false;
-        this._activeTab = -1;
-        this._layoutMode = 'fixed';
-        this._layoutAlign = 'start';
-        this._underline = false;
-        this._autoActivate = false;
+        this._disabled = false;
+        this._vertical = false;
+        this._clustered = false;
         this._stacked = false;
-        this._scrollButtons = true;
-        this._forceScrollButtons = false;
-        this._tabsChangedListener = evt => this._onTabsChanged(evt);
-        this._tabInteractedListener = evt => this._onTabInteracted(evt);
-        this._keydownListener = evt => this._onKeydown(evt);
-        this._scrollPrevClickListener = evt => this._onScrollPrevious(evt);
-        this._scrollPrevMousedownListener = evt => evt.preventDefault();
-        this._scrollNextClickListener = evt => this._onScrollNext(evt);
-        this._scrollNextMousedownListener = evt => evt.preventDefault();
-        this._scrollListener = evt => this._onScroll(evt);
+        this._secondary = false;
+        this._inverted = false;
+        this._autoActivate = false;
+        this._scrollButtons = false;
+        this._tabs = [];
+        this._scrollButtonsVisible = false;
+        this._tabsChangedListener = () => this._onTabsChanged();
+        this._tabSelectedListener = (evt) => this._onTabSelected(evt);
+        this._keydownListener = (evt) => this._onKeydown(evt);
+        this._resizeListener = () => this._onResize();
+        this._scrollListener = () => this._onScroll();
+        this._scrollBackwardButtonListener = () => this._onScrollBackward();
+        this._scrollForwardButtonListener = () => this._onScrollForward();
     }
     initialize() {
-        this._adapter.initializeTabs(this._activeTab, this._isFixed);
-        this._adapter.initializeTabScroller();
-        this._adapter.initializeAccessibility();
-        this._adapter.addTabChangeListener(this._tabsChangedListener);
-        this._adapter.addScrollPreviousListener('click', this._scrollPrevClickListener);
-        this._adapter.addScrollPreviousListener('mousedown', this._scrollPrevMousedownListener);
-        this._adapter.addScrollNextListener('click', this._scrollNextClickListener);
-        this._adapter.addScrollNextListener('mousedown', this._scrollNextMousedownListener);
-        this._adapter.addHostListener(TAB_CONSTANTS.events.INTERACTED, this._tabInteractedListener);
+        this._adapter.addSlotListener(this._tabsChangedListener);
+        this._adapter.addHostListener(TAB_CONSTANTS.events.SELECT, this._tabSelectedListener);
         this._adapter.addHostListener('keydown', this._keydownListener);
-        this._adapter.addScrollListener(this._scrollListener);
-        this._adapter.setUnderline(this._underline);
-        this._adapter.setLayoutMode(this._layoutMode);
-        this._adapter.setLayoutAlign(this._layoutAlign);
-        window.requestAnimationFrame(() => {
-            this._syncScrollButtons();
-            this._adapter.ensureFocusableTab();
-        });
+        this._adapter.setVertical(this._vertical);
+        if (this._scrollButtons) {
+            this._adapter.initializeContainerSizeObserver(this._resizeListener);
+            this._adapter.initializeScrollObserver(this._scrollListener);
+            this._updateScrollState();
+        }
+        this._tryScrollActiveTabIntoView();
         this._isInitialized = true;
     }
-    disconnect() {
-        this._adapter.destroyTabScroller();
-        this._adapter.removeTabChangeListener(this._tabsChangedListener);
-        this._adapter.removeHostListener(TAB_CONSTANTS.events.INTERACTED, this._tabInteractedListener);
-        this._adapter.removeHostListener('keydown', this._keydownListener);
+    destroy() {
+        this._adapter.destroyContainerSizeObserver();
+        this._adapter.destroyScrollObserver(this._scrollListener);
         this._isInitialized = false;
     }
-    _onTabsChanged(evt) {
-        this._adapter.initializeTabs(this._activeTab, this._isFixed);
-        this._adapter.ensureFocusableTab();
-        // We need to wait a full cycle to scroll the active tab into view
-        window.setTimeout(() => {
-            window.requestAnimationFrame(() => {
-                this.scrollIntoView(this._activeTab);
-                this._syncScrollButtons();
-            });
-        });
+    async _onTabsChanged() {
+        this._tabs = this._adapter.getTabs();
+        this._syncTabState();
+        this._tryScrollActiveTabIntoView();
+    }
+    _onTabSelected(evt) {
+        this._selectTab(evt.target);
     }
-    _onTabInteracted(evt) {
-        const activatedTab = evt.target;
-        const activatedTabIndex = this._adapter.getTabIndex(activatedTab);
-        // Check if the event and requested tab index is valid
-        const isTabEvent = activatedTab.tagName.toLowerCase() === TAB_CONSTANTS.elementName;
-        const isValidTabIndex = activatedTabIndex !== this._activeTab && this._indexIsInRange(activatedTabIndex);
-        if (!isTabEvent || !isValidTabIndex) {
+    async _onKeydown(evt) {
+        var _a, _b;
+        const orientation = this._vertical ? 'vertical' : 'horizontal';
+        const isNavigationKey = ((_a = NAVIGATION_KEYS.get('default')) === null || _a === void 0 ? void 0 : _a.has(evt.key)) ||
+            ((_b = NAVIGATION_KEYS.get(orientation)) === null || _b === void 0 ? void 0 : _b.has(evt.key));
+        if (!isNavigationKey) {
             return;
         }
-        // Emit the activate event
-        const activateEventData = { index: activatedTabIndex };
-        const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
-        // Check if listener prevented default on the activate event, and stop now if so
-        if (!canActivate) {
-            return;
+        evt.preventDefault();
+        let index = -1;
+        if (evt.key === 'Home') {
+            // Locate the first non-disabled tab
+            index = this._tabs.findIndex(tab => !tab.disabled);
         }
-        this.activateTab(activatedTabIndex);
-        this._adapter.focusTabAtIndex(activatedTabIndex);
-    }
-    _onKeydown(evt) {
-        const key = this._getKeyFromEvent(evt);
-        // Early exit if the event key isn't one of the keyboard navigation keys
-        if (!key) {
-            return;
+        else if (evt.key === 'End') {
+            // Locate the last non-disabled tab
+            index = this._tabs.reduceRight((acc, tab, i) => !tab.disabled && acc === -1 ? i : acc, -1);
+        }
+        else {
+            // Locate the next or previous tab based on the key that was pressed
+            const currentIndex = this._tabs.findIndex(tab => tab.matches(':focus'));
+            const isPrevKey = evt.key === 'ArrowLeft' || evt.key === 'ArrowUp';
+            const calcIndex = (startIndex) => {
+                var _a;
+                index = startIndex + (isPrevKey ? -1 : 1);
+                index = index < 0 ? this._tabs.length - 1 : index % this._tabs.length;
+                // Try to recurse until we find a non-disabled tab (unless all tabs are disabled already)
+                const isAllTabsDisabled = this._tabs.every(tab => tab.disabled);
+                if (!isAllTabsDisabled && ((_a = this._tabs[index]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                    calcIndex(index);
+                }
+            };
+            calcIndex(currentIndex);
         }
-        // Prevent default behavior for movement keys, but not for activation keys, since :active is used to apply ripple
-        if (!this._isActivationKey(key)) {
-            evt.preventDefault();
+        if (index === -1) {
+            return;
         }
         if (this._autoActivate) {
-            if (this._isActivationKey(key)) {
-                return;
-            }
-            const index = this._determineTargetFromKey(this._activeTab, key);
-            if (this._activeTab === index) {
-                return;
-            }
-            const activateEventData = { index };
-            const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
-            if (canActivate) {
-                this.activateTab(index);
-                this._adapter.focusTabAtIndex(index);
-            }
+            this._selectTab(this._tabs[index]);
         }
         else {
-            const focusedTabIndex = this._adapter.getFocusedTabIndex();
-            if (focusedTabIndex === -1) {
-                return;
-            }
-            if (this._isActivationKey(key)) {
-                const activateEventData = { index: focusedTabIndex };
-                const canActivate = this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.ACTIVATE, activateEventData, true, true);
-                if (canActivate) {
-                    this.activateTab(focusedTabIndex);
-                }
-            }
-            else {
-                const index = this._determineTargetFromKey(focusedTabIndex, key);
-                if (focusedTabIndex === index) {
-                    return;
-                }
-                this._adapter.focusTabAtIndex(index);
-                this.scrollIntoView(index);
-            }
+            this._tabs[index].focus({ preventScroll: true });
+            await this._adapter.tryScrollTabIntoView(this._tabs[index]);
         }
     }
-    _onScrollPrevious(evt) {
-        const scrollAmount = -this._adapter.getOffsetWidth();
-        this._adapter.incrementScroll(scrollAmount);
-        this._syncScrollButtons();
-    }
-    _onScrollNext(evt) {
-        const scrollAmount = this._adapter.getOffsetWidth();
-        this._adapter.incrementScroll(scrollAmount);
-        this._syncScrollButtons();
-    }
-    _onScroll(evt) {
-        this._syncScrollButtons();
-    }
-    _syncScrollButtons() {
-        const isScrollable = this._isScrollable();
-        this._adapter.setPreviousButtonVisibility(isScrollable);
-        this._adapter.setNextButtonVisibility(isScrollable);
-        if (isScrollable) {
-            this._adapter.setPreviousButtonEnabled(this._adapter.isScrolled());
-            this._adapter.setNextButtonEnabled(!this._adapter.isScrolledEnd());
+    async _selectTab(tab, emitEvent = true) {
+        if (!tab || tab.disabled) {
+            return;
         }
-    }
-    /**
-     * Determines the index of the adjacent tab closest to either edge of the Tab Bar
-     * @param index The index of the tab
-     * @param tabDimensions The dimensions of the tab
-     * @param scrollPosition The current scroll position
-     * @param barWidth The width of the tab bar
-     */
-    _findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
-        const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
-        const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
-        const relativeRootDelta = relativeRootLeft + relativeRootRight;
-        const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
-        const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
-        if (leftEdgeIsCloser) {
-            return index - 1;
+        const currentSelectedTab = this._tabs.find(t => t.selected);
+        if (currentSelectedTab === tab) {
+            return;
         }
-        if (rightEdgeIsCloser) {
-            return index + 1;
+        if (emitEvent) {
+            const index = this._tabs.indexOf(tab);
+            const cancelled = !this._adapter.emitHostEvent(TAB_BAR_CONSTANTS.events.CHANGE, index, true, true);
+            if (cancelled) {
+                return;
+            }
         }
-        return -1;
-    }
-    /**
-     * Calculates the scroll increment that will make the tab at the given index visible
-     * @param index The index of the tab
-     * @param nextIndex The index of the next tab
-     * @param scrollPosition The current scroll position
-     * @param barWidth The width of the tab-bar
-     */
-    _calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
-        const nextTabDimensions = this._adapter.getTabDimensionsAtIndex(nextIndex);
-        const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
-        const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
-        const leftIncrement = relativeContentRight - TAB_BAR_CONSTANTS.numbers.EXTRA_SCROLL_AMOUNT;
-        const rightIncrement = relativeContentLeft + TAB_BAR_CONSTANTS.numbers.EXTRA_SCROLL_AMOUNT;
-        if (nextIndex < index) {
-            return Math.min(leftIncrement, 0);
+        // Selecting a tab causes an animation of the indicator to start relative to the currently selected tab
+        tab.selected = true;
+        tab.focus({ preventScroll: true });
+        await this._adapter.tryScrollTabIntoView(tab);
+        // Always deselect the currently selected tab after selecting a new tab to allow
+        // for the tab indicator animation to run properly (the newly selected tab attempts
+        // to locate the current selected tab for its calculations)
+        if (currentSelectedTab) {
+            currentSelectedTab.selected = false;
         }
-        return Math.max(rightIncrement, 0);
+        this._activeTab = this._tabs.indexOf(tab);
     }
     /**
-     * Private method for determining the index of the destination tab based on what key was pressed
-     * @param origin The original index from which to determine the destination
-     * @param key The name of the key
+     * Ensures that all tabs have the correct state based on the tab bar state.
+     *
+     * This is called whenever a child tab is added to the DOM.
      */
-    _determineTargetFromKey(origin, key, nextIndex) {
-        if (origin === nextIndex) {
-            return origin;
-        }
-        const maxIndex = this._adapter.getTabCount() - 1;
-        const shouldGoToEnd = key === TAB_BAR_CONSTANTS.strings.END_KEY;
-        const shouldDecrement = key === TAB_BAR_CONSTANTS.strings.ARROW_LEFT_KEY;
-        const shouldIncrement = key === TAB_BAR_CONSTANTS.strings.ARROW_RIGHT_KEY;
-        let index = nextIndex !== undefined ? nextIndex : origin;
-        if (shouldGoToEnd) {
-            index = maxIndex;
-        }
-        else if (shouldDecrement) {
-            index -= 1;
-        }
-        else if (shouldIncrement) {
-            index += 1;
-        }
-        else {
-            index = 0;
-        }
-        if (index < 0) {
-            index = maxIndex;
-        }
-        else if (index > maxIndex) {
-            index = 0;
-        }
-        // If this tab is disabled, then we'll try again...
-        if (this._adapter.isTabDisabled(index)) {
-            return this._determineTargetFromKey(origin, key, index);
-        }
-        return index;
-    }
-    _isScrollable() {
-        return this._forceScrollButtons ||
-            (this._scrollButtons &&
-                !Platform.isMobile &&
-                !this._isFixed &&
-                this._adapter.getScrollContentWidth() > this._adapter.getOffsetWidth());
-    }
-    _getKeyFromEvent(evt) {
-        if (ACCEPTABLE_KEYS.includes(evt.key)) {
-            return evt.key;
-        }
-        return KEYCODE_MAP[evt.keyCode];
+    _syncTabState() {
+        this._tabs.forEach((tab, index) => {
+            tab.selected = index === this._activeTab;
+            tab.disabled = this._disabled;
+            tab.vertical = this._vertical;
+            tab.stacked = this._stacked;
+            tab.secondary = this._secondary;
+            tab.inverted = this._inverted;
+        });
     }
-    _isActivationKey(key) {
-        return key === TAB_BAR_CONSTANTS.strings.SPACE_KEY || key === TAB_BAR_CONSTANTS.strings.ENTER_KEY;
+    /** Called when the container size changes, but only if scroll buttons are enabled. */
+    _onResize() {
+        this._detectScrollableStatus();
     }
-    _indexIsInRange(index) {
-        return index >= 0 && index < this._adapter.getTabCount();
+    /** Called when the scroll container scrolls, but only if scroll buttons are enabled. */
+    _onScroll() {
+        this._updateScrollState();
     }
-    activateTab(index) {
-        if (!isNumber(index)) {
-            index = -1;
-        }
-        // If we have a currently selected tab we need to deactivate that now
-        if (this._activeTab !== -1) {
-            this._adapter.deactivateTab(this._activeTab);
-        }
-        // Activate the requested tab
-        const previousTabBounds = this._adapter.getTabBounds(this._activeTab);
-        this._adapter.activateTab(index, previousTabBounds);
-        this._adapter.syncTabIndex(index);
-        this._adapter.ensureFocusableTab();
-        this.scrollIntoView(index);
-        this._activeTab = index;
-        this._syncScrollButtons();
-        this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, this._activeTab.toString());
-    }
-    scrollIntoView(index) {
-        if (!this._indexIsInRange(index)) {
+    /** Handles clicking the scroll backward button. */
+    _onScrollBackward() {
+        this._adapter.scroll('backward');
+    }
+    /** Handles clicking the scroll forward button. */
+    _onScrollForward() {
+        this._adapter.scroll('forward');
+    }
+    /** Determines whether scroll buttons should be displayed based on the size of the container. */
+    _detectScrollableStatus() {
+        const scrollable = this._adapter.isScrollable();
+        if (this._scrollButtonsVisible === scrollable) {
             return;
         }
-        if (index === 0) {
-            return this._adapter.scrollTo(0);
+        this._adapter.setScrollButtons(scrollable);
+        if (scrollable) {
+            this._adapter.initializeScrollObserver(this._scrollListener);
+            this._updateScrollState();
+            this._adapter.setScrollBackwardButtonListener(this._scrollBackwardButtonListener);
+            this._adapter.setScrollForwardButtonListener(this._scrollForwardButtonListener);
         }
-        if (index === this._adapter.getTabCount() - 1) {
-            return this._adapter.scrollTo(this._adapter.getScrollContentWidth());
-        }
-        const scrollPosition = this._adapter.getScrollPosition();
-        const barWidth = this._adapter.getOffsetWidth();
-        const tabDimensions = this._adapter.getTabDimensionsAtIndex(index);
-        const nextIndex = this._findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
-        if (!this._indexIsInRange(nextIndex)) {
-            return;
+        else {
+            this._adapter.destroyScrollObserver(this._scrollListener);
+        }
+        this._scrollButtonsVisible = scrollable;
+    }
+    /** Updates the enabled/disabled state of the scroll buttons. */
+    _updateScrollState() {
+        const { isScrolledEnd, isScrolledStart } = this._adapter.getScrollState();
+        const state = {
+            backwardEnabled: !isScrolledStart,
+            forwardEnabled: !isScrolledEnd
+        };
+        this._adapter.syncScrollButtons(state);
+    }
+    _tryScrollActiveTabIntoView() {
+        if (this._tabScrollAnimationFrame) {
+            window.cancelAnimationFrame(this._tabScrollAnimationFrame);
+        }
+        // We batch the tab scrolling into a single animation frame to unnecessarily scrolling for each tab
+        this._tabScrollAnimationFrame = window.requestAnimationFrame(() => {
+            this._tabScrollAnimationFrame = undefined;
+            if (this._adapter.isScrollable()) {
+                if (typeof this._activeTab === 'number' && this._activeTab >= 0 && this._tabs[this._activeTab]) {
+                    this._adapter.tryScrollTabIntoView(this._tabs[this._activeTab]);
+                }
+            }
+        });
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        value = Boolean(value);
+        if (this._disabled !== value) {
+            this._disabled = value;
+            this._tabs.forEach(tab => tab.disabled = this._disabled);
+            this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.DISABLED, this._disabled);
         }
-        const scrollIncrement = this._calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
-        this._adapter.incrementScroll(scrollIncrement);
     }
-    /** Gets and sets the active tab index. */
     get activeTab() {
         return this._activeTab;
     }
     set activeTab(value) {
         if (this._activeTab !== value) {
-            if (!this._isInitialized) {
-                this._activeTab = value;
-                this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, this._activeTab.toString());
+            this._activeTab = value !== null && value !== void 0 ? value : undefined;
+            if (typeof this._activeTab === 'number') {
+                const newSelectedTab = this._tabs[this._activeTab];
+                this._selectTab(newSelectedTab, false);
+                this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, String(this._activeTab));
             }
             else {
-                this.activateTab(value);
+                this._tabs.forEach(tab => tab.selected = false);
+                this._adapter.removeHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB);
             }
         }
     }
-    get _isFixed() {
-        return this._layoutMode === 'fixed';
-    }
-    get layoutMode() {
-        return this._layoutMode;
-    }
-    set layoutMode(value) {
-        if (this._layoutMode !== value) {
-            this._layoutMode = value;
-            this._adapter.setLayoutMode(this._layoutMode);
-            this._syncScrollButtons();
-        }
+    get vertical() {
+        return this._vertical;
     }
-    get layoutAlign() {
-        return this._layoutAlign;
-    }
-    set layoutAlign(value) {
-        if (this._layoutAlign !== value) {
-            this._layoutAlign = value;
-            this._adapter.setLayoutAlign(this._layoutAlign);
+    set vertical(value) {
+        value = Boolean(value);
+        if (this._vertical !== value) {
+            this._vertical = value;
+            if (this._isInitialized) {
+                this._adapter.setVertical(this._vertical);
+            }
+            this._tabs.forEach(tab => tab.vertical = this._vertical);
+            if (this._scrollButtonsVisible) {
+                this._adapter.updateScrollButtonIcons(this._vertical);
+            }
+            this._adapter.toggleHostAttribute(TAB_CONSTANTS.attributes.VERTICAL, this._vertical);
         }
     }
-    get underline() {
-        return this._underline;
+    get clustered() {
+        return this._clustered;
     }
-    set underline(value) {
-        if (this._underline !== value) {
-            this._underline = value;
-            this._adapter.setUnderline(this._underline);
-            this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.UNDERLINE, this._underline);
+    set clustered(value) {
+        value = Boolean(value);
+        if (this._clustered !== value) {
+            this._clustered = value;
+            this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.CLUSTERED, this._clustered);
         }
     }
     get stacked() {
         return this._stacked;
     }
     set stacked(value) {
+        value = Boolean(value);
         if (this._stacked !== value) {
             this._stacked = value;
-            this._adapter.setStacked(this._stacked);
-            if (this._stacked) {
-                this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED);
-            }
-            else {
-                this._adapter.removeHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED);
-            }
+            this._tabs.forEach(tab => tab.stacked = this._stacked);
+            this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED, this._stacked);
         }
     }
-    get scrollButtons() {
-        return this._scrollButtons;
+    get secondary() {
+        return this._secondary;
     }
-    set scrollButtons(value) {
-        if (this._scrollButtons !== value) {
-            this._scrollButtons = value;
-            this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS, this._scrollButtons.toString());
-            if (this._isInitialized) {
-                this._syncScrollButtons();
-            }
+    set secondary(value) {
+        value = Boolean(value);
+        if (this._secondary !== value) {
+            this._secondary = value;
+            this._tabs.forEach(tab => tab.secondary = this._secondary);
+            this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.SECONDARY, this._secondary);
         }
     }
-    get forceScrollButtons() {
-        return this._forceScrollButtons;
+    get inverted() {
+        return this._inverted;
     }
-    set forceScrollButtons(value) {
-        if (this._forceScrollButtons !== value) {
-            this._forceScrollButtons = value;
-            if (this._isInitialized) {
-                this._syncScrollButtons();
-            }
+    set inverted(value) {
+        value = Boolean(value);
+        if (this._inverted !== value) {
+            this._inverted = value;
+            this._tabs.forEach(tab => tab.inverted = this._inverted);
+            this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.INVERTED, this._inverted);
         }
     }
     get autoActivate() {
         return this._autoActivate;
     }
     set autoActivate(value) {
+        value = Boolean(value);
         if (this._autoActivate !== value) {
             this._autoActivate = value;
-            this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE, this._autoActivate.toString());
+            this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE, this._autoActivate);
+        }
+    }
+    get scrollButtons() {
+        return this._scrollButtons;
+    }
+    set scrollButtons(value) {
+        value = Boolean(value);
+        if (this._scrollButtons !== value) {
+            this._scrollButtons = Boolean(value);
+            if (this._isInitialized) {
+                if (this._scrollButtons) {
+                    this._adapter.initializeContainerSizeObserver(this._resizeListener);
+                    this._adapter.initializeScrollObserver(this._scrollListener);
+                    this._detectScrollableStatus();
+                    this._updateScrollState();
+                    this._tryScrollActiveTabIntoView();
+                }
+                else {
+                    this._adapter.destroyContainerSizeObserver();
+                    this._adapter.destroyScrollObserver(this._scrollListener);
+                    this._adapter.setScrollButtons(this._scrollButtons);
+                    this._scrollButtonsVisible = false;
+                }
+            }
+            this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS, String(this._scrollButtons));
         }
     }
 }