import { __decorate } from "tslib";
import { observable } from '@ni/fast-element';
import { DesignSystem, Tabs as FoundationTabs } from '@ni/fast-foundation';
import { styles } from './styles';
import { template } from '../patterns/tabs/template';
/**
 * A nimble-styled tabs control
 */
export class Tabs extends FoundationTabs {
    constructor() {
        super();
        /**
         * @internal
         */
        this.showScrollButtons = false;
        /**
         * @internal
         */
        this.tabSlotName = 'tab';
        // We disable the built-in active indicator so that we can implement our own
        this.activeindicator = false;
        this.tabListResizeObserver = new ResizeObserver(entries => {
            let tabListVisibleWidth = entries[0]?.contentRect.width;
            if (tabListVisibleWidth !== undefined) {
                const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;
                tabListVisibleWidth = Math.ceil(tabListVisibleWidth);
                if (this.showScrollButtons) {
                    tabListVisibleWidth += buttonWidth * 2;
                }
                this.showScrollButtons = tabListVisibleWidth < this.tablist.scrollWidth;
            }
        });
    }
    /**
     * @internal
     */
    connectedCallback() {
        super.connectedCallback();
        this.tabListResizeObserver.observe(this.tablist);
    }
    /**
     * @internal
     */
    disconnectedCallback() {
        super.disconnectedCallback();
        this.tabListResizeObserver.disconnect();
    }
    /**
     * @internal
     */
    activeidChanged(oldValue, newValue) {
        super.activeidChanged(oldValue, newValue);
        this.activetab?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
    }
    /**
     * @internal
     */
    onScrollLeftClick() {
        this.tablist.scrollBy({
            left: -this.tablist.clientWidth,
            behavior: 'smooth'
        });
    }
    /**
     * @internal
     */
    onScrollRightClick() {
        this.tablist.scrollBy({
            left: this.tablist.clientWidth,
            behavior: 'smooth'
        });
    }
}
__decorate([
    observable
], Tabs.prototype, "showScrollButtons", void 0);
const nimbleTabs = Tabs.compose({
    baseName: 'tabs',
    baseClass: FoundationTabs,
    template,
    styles
});
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
export const tabsTag = 'nimble-tabs';
//# sourceMappingURL=index.js.map