@spartan-ng/brain 0.0.1-alpha.373 → 0.0.1-alpha.379

package/fesm2022/spartan-ng-brain-tabs.mjs

@@ -0,0 +1,748 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, effect, Directive, model, output, signal, Input, contentChildren, booleanAttribute, Injector, ChangeDetectorRef, NgZone, ANIMATION_MODULE_TYPE, afterNextRender, NgModule } from '@angular/core';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { fromEvent, take, Subject, of, merge, EMPTY, Observable, timer } from 'rxjs';
+import { Directionality } from '@angular/cdk/bidi';
+import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
+import { SharedResizeObserver } from '@angular/cdk/observers/private';
+import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
+import { ViewportRuler } from '@angular/cdk/scrolling';
+import { takeUntil, debounceTime, startWith, switchMap, skip, filter } from 'rxjs/operators';
+
+class BrnTabsContentDirective {
+    _root = inject(BrnTabsDirective);
+    _elementRef = inject(ElementRef);
+    contentFor = input.required({ alias: 'brnTabsContent' });
+    _isSelected = computed(() => this._root.$activeTab() === this.contentFor());
+    contentId = computed(() => `brn-tabs-content-${this.contentFor()}`);
+    labelId = computed(() => `brn-tabs-label-${this.contentFor()}`);
+    constructor() {
+        effect(() => {
+            this._root.registerContent(this.contentFor(), this);
+        }, { allowSignalWrites: true });
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: BrnTabsContentDirective, isStandalone: true, selector: "[brnTabsContent]", inputs: { contentFor: { classPropertyName: "contentFor", publicName: "brnTabsContent", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tabpanel", "tabindex": "0" }, properties: { "id": "contentId()", "attr.aria-labelledby": "labelId()", "hidden": "_isSelected() === false" } }, exportAs: ["brnTabsContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnTabsContent]',
+                    standalone: true,
+                    host: {
+                        role: 'tabpanel',
+                        tabindex: '0',
+                        '[id]': 'contentId()',
+                        '[attr.aria-labelledby]': 'labelId()',
+                        '[hidden]': '_isSelected() === false',
+                    },
+                    exportAs: 'brnTabsContent',
+                }]
+        }], ctorParameters: () => [] });
+class BrnTabsDirective {
+    orientation = input('horizontal');
+    /** internal **/
+    $orientation = this.orientation;
+    direction = input('ltr');
+    /** internal **/
+    $direction = this.direction;
+    _activeTab = model(undefined, { alias: 'brnTabs' });
+    /** internal **/
+    $activeTab = this._activeTab.asReadonly();
+    activationMode = input('automatic');
+    /** internal **/
+    $activationMode = this.activationMode;
+    tabActivated = output();
+    _tabs = signal({});
+    $tabs = this._tabs.asReadonly();
+    registerTrigger(key, trigger) {
+        this._tabs.update((tabs) => ({ ...tabs, [key]: { trigger, content: tabs[key]?.content } }));
+    }
+    registerContent(key, content) {
+        this._tabs.update((tabs) => ({ ...tabs, [key]: { trigger: tabs[key]?.trigger, content } }));
+    }
+    emitTabActivated(key) {
+        this.tabActivated.emit(key);
+    }
+    setActiveTab(key) {
+        this._activeTab.set(key);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: BrnTabsDirective, isStandalone: true, selector: "[brnTabs]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, _activeTab: { classPropertyName: "_activeTab", publicName: "brnTabs", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _activeTab: "brnTabsChange", tabActivated: "tabActivated" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.dir": "direction()" } }, exportAs: ["brnTabs"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnTabs]',
+                    standalone: true,
+                    host: {
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.dir]': 'direction()',
+                    },
+                    exportAs: 'brnTabs',
+                }]
+        }] });
+class BrnTabsTriggerDirective {
+    elementRef = inject(ElementRef);
+    _root = inject(BrnTabsDirective);
+    _orientation = this._root.$orientation;
+    triggerFor = input.required({ alias: 'brnTabsTrigger' });
+    selected = computed(() => this._root.$activeTab() === this.triggerFor());
+    contentId = computed(() => `brn-tabs-content-${this.triggerFor()}`);
+    labelId = computed(() => `brn-tabs-label-${this.triggerFor()}`);
+    // leaving this as an @input to be compatible with the `FocusKeyManager` used in the `BrnTabsListDirective`
+    disabled = false;
+    constructor() {
+        effect(() => {
+            this._root.registerTrigger(this.triggerFor(), this);
+        }, { allowSignalWrites: true });
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+        if (this._root.$activationMode() === 'automatic') {
+            this.activate();
+        }
+    }
+    activate() {
+        if (!this.triggerFor())
+            return;
+        this._root.setActiveTab(this.triggerFor());
+        this._root.emitTabActivated(this.triggerFor());
+    }
+    get key() {
+        return this.triggerFor();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: BrnTabsTriggerDirective, isStandalone: true, selector: "button[brnTabsTrigger]", inputs: { triggerFor: { classPropertyName: "triggerFor", publicName: "brnTabsTrigger", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "role": "tab" }, listeners: { "click": "activate()" }, properties: { "id": "labelId()", "tabindex": "selected() ? \"0\": \"-1\"", "attr.aria-selected": "selected()", "attr.aria-controls": "contentId()", "attr.data-state": "selected() ? 'active' : 'inactive'", "attr.data-orientation": "_orientation()", "attr.data-disabled": "disabled ? '' : undefined" } }, exportAs: ["brnTabsTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[brnTabsTrigger]',
+                    standalone: true,
+                    host: {
+                        '[id]': 'labelId()',
+                        type: 'button',
+                        role: 'tab',
+                        '[tabindex]': 'selected() ? "0": "-1"',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.aria-controls]': 'contentId()',
+                        '[attr.data-state]': "selected() ? 'active' : 'inactive'",
+                        '[attr.data-orientation]': '_orientation()',
+                        '[attr.data-disabled]': "disabled ? '' : undefined",
+                        '(click)': 'activate()',
+                    },
+                    exportAs: 'brnTabsTrigger',
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
+class BrnTabsListDirective {
+    _root = inject(BrnTabsDirective);
+    _orientation = this._root.$orientation;
+    _direction = this._root.$direction;
+    _activeTab = this._root.$activeTab;
+    _tabs = this._root.$tabs;
+    _elementRef = inject(ElementRef);
+    _keyDownListener = fromEvent(this._elementRef.nativeElement, 'keydown');
+    _keyManager;
+    triggers = contentChildren(BrnTabsTriggerDirective, { descendants: true });
+    ngAfterContentInit() {
+        this._keyManager = new FocusKeyManager(this.triggers())
+            .withHorizontalOrientation(this._direction())
+            .withHomeAndEnd()
+            .withPageUpDown()
+            .withWrap();
+        // needed because by default the index is set to -1, which means first interaction is skipped
+        this._keyDownListener.pipe(take(1)).subscribe(() => {
+            const currentTabKey = this._activeTab();
+            const tabs = this._tabs();
+            let activeIndex = 0;
+            if (currentTabKey) {
+                const currentTab = tabs[currentTabKey];
+                if (currentTab) {
+                    activeIndex = this.triggers().indexOf(currentTab.trigger);
+                }
+            }
+            this._keyManager?.setActiveItem(activeIndex);
+        });
+        this._keyDownListener.subscribe((event) => {
+            if ('key' in event) {
+                if (this._orientation() === 'horizontal') {
+                    if (event.key === 'ArrowUp' || event.key === 'ArrowDown')
+                        return;
+                }
+                if (this._orientation() === 'vertical') {
+                    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
+                        return;
+                }
+            }
+            this._keyManager?.onKeydown(event);
+        });
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.5", type: BrnTabsListDirective, isStandalone: true, selector: "[brnTabsList]", host: { attributes: { "role": "tablist" }, properties: { "attr.aria-orientation": "_orientation()", "attr.data-orientation": "_orientation()" } }, queries: [{ propertyName: "triggers", predicate: BrnTabsTriggerDirective, descendants: true, isSignal: true }], exportAs: ["brnTabsList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnTabsList]',
+                    standalone: true,
+                    host: {
+                        role: 'tablist',
+                        '[attr.aria-orientation]': '_orientation()',
+                        '[attr.data-orientation]': '_orientation()',
+                    },
+                    exportAs: 'brnTabsList',
+                }]
+        }] });
+
+/**
+ * We are building on shoulders of giants here and adapt the implementation provided by the incredible Angular
+ * team: https://github.com/angular/components/blob/main/src/material/tabs/paginated-tab-header.ts
+ * Check them out! Give them a try! Leave a star! Their work is incredible!
+ */
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/** Config used to bind passive event listeners */
+const passiveEventListenerOptions = normalizePassiveListenerOptions({
+    passive: true,
+});
+/**
+ * Amount of milliseconds to wait before starting to scroll the header automatically.
+ * Set a little conservatively in order to handle fake events dispatched on touch devices.
+ */
+const HEADER_SCROLL_DELAY = 650;
+/**
+ * Interval in milliseconds at which to scroll the header
+ * while the user is holding their pointer.
+ */
+const HEADER_SCROLL_INTERVAL = 100;
+/**
+ * Base class for a tab header that supported pagination.
+ * @docs-private
+ */
+class BrnTabsPaginatedListDirective {
+    /** The distance in pixels that the tab labels should be translated to the left. */
+    _scrollDistance = 0;
+    /** Whether the header should scroll to the selected index after the view has been checked. */
+    _selectedIndexChanged = false;
+    _root = inject(BrnTabsDirective);
+    _activeTab = this._root.$activeTab;
+    _tabs = this._root.$tabs;
+    /** Emits when the component is destroyed. */
+    _destroyed = new Subject();
+    /** Whether the controls for pagination should be displayed */
+    _showPaginationControls = signal(false);
+    /** Whether the tab list can be scrolled more towards the end of the tab label list. */
+    _disableScrollAfter = true;
+    /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
+    _disableScrollBefore = true;
+    /**
+     * The number of tab labels that are displayed on the header. When this changes, the header
+     * should re-evaluate the scroll position.
+     */
+    _tabLabelCount;
+    /** Whether the scroll distance has changed and should be applied after the view is checked. */
+    _scrollDistanceChanged;
+    /** Used to manage focus between the tabs. */
+    _keyManager;
+    /** Cached text content of the header. */
+    _currentTextContent;
+    /** Stream that will stop the automated scrolling. */
+    _stopScrolling = new Subject();
+    /**
+     * Whether pagination should be disabled. This can be used to avoid unnecessary
+     * layout recalculations if it's known that pagination won't be required.
+     */
+    disablePagination = input(false, { transform: booleanAttribute });
+    /** The index of the active tab. */
+    _selectedIndex = computed(() => {
+        const currentTabKey = this._activeTab();
+        const tabs = this._tabs();
+        let activeIndex = 0;
+        if (currentTabKey && this._items()) {
+            const currentTab = tabs[currentTabKey];
+            if (currentTab) {
+                activeIndex = this._items().indexOf(currentTab.trigger);
+            }
+        }
+        return activeIndex;
+    });
+    /** Event emitted when the option is selected. */
+    selectFocusedIndex = output();
+    /** Event emitted when a label is focused. */
+    indexFocused = output();
+    _sharedResizeObserver = inject(SharedResizeObserver);
+    _injector = inject(Injector);
+    _elementRef = inject(ElementRef);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _viewportRuler = inject(ViewportRuler);
+    _dir = inject(Directionality, { optional: true });
+    _ngZone = inject(NgZone);
+    _platform = inject(Platform);
+    _animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
+    constructor() {
+        // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._elementRef.nativeElement, 'mouseleave')
+                .pipe(takeUntil(this._destroyed))
+                .subscribe(() => {
+                this._stopInterval();
+            });
+        });
+        effect(() => {
+            const selectedIndex = this._selectedIndex();
+            if (selectedIndex !== 0) {
+                this._selectedIndexChanged = true;
+                if (this._keyManager) {
+                    this._keyManager.updateActiveItem(selectedIndex);
+                }
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // We need to handle these events manually, because we want to bind passive event listeners.
+        fromEvent(this._previousPaginator().nativeElement, 'touchstart', passiveEventListenerOptions)
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => {
+            this._handlePaginatorPress('before');
+        });
+        fromEvent(this._nextPaginator().nativeElement, 'touchstart', passiveEventListenerOptions)
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => {
+            this._handlePaginatorPress('after');
+        });
+    }
+    ngAfterContentInit() {
+        const dirChange = this._dir ? this._dir.change : of('ltr');
+        // We need to debounce resize events because the alignment logic is expensive.
+        // If someone animates the width of tabs, we don't want to realign on every animation frame.
+        // Once we haven't seen any more resize events in the last 32ms (~2 animaion frames) we can
+        // re-align.
+        const resize = this._sharedResizeObserver
+            .observe(this._elementRef.nativeElement)
+            .pipe(debounceTime(32), takeUntil(this._destroyed));
+        // Note: We do not actually need to watch these events for proper functioning of the tabs,
+        // the resize events above should capture any viewport resize that we care about. However,
+        // removing this is fairly breaking for screenshot tests, so we're leaving it here for now.
+        const viewportResize = this._viewportRuler.change(150).pipe(takeUntil(this._destroyed));
+        const realign = () => {
+            this.updatePagination();
+        };
+        this._keyManager = new FocusKeyManager(this._items())
+            .withHorizontalOrientation(this._getLayoutDirection())
+            .withHomeAndEnd()
+            .withWrap()
+            // Allow focus to land on disabled tabs, as per https://w3c.github.io/aria-practices/#kbd_disabled_controls
+            .skipPredicate(() => false);
+        this._keyManager.updateActiveItem(this._selectedIndex());
+        // Note: We do not need to realign after the first render for proper functioning of the tabs
+        // the resize events above should fire when we first start observing the element. However,
+        // removing this is fairly breaking for screenshot tests, so we're leaving it here for now.
+        afterNextRender(realign, { injector: this._injector });
+        // On dir change or resize, realign the ink bar and update the orientation of
+        // the key manager if the direction has changed.
+        merge(dirChange, viewportResize, resize, this._itemsChanges, this._itemsResized())
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => {
+            // We need to defer this to give the browser some time to recalculate
+            // the element dimensions. The call has to be wrapped in `NgZone.run`,
+            // because the viewport change handler runs outside of Angular.
+            this._ngZone.run(() => {
+                Promise.resolve().then(() => {
+                    // Clamp the scroll distance, because it can change with the number of tabs.
+                    this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), this._scrollDistance));
+                    realign();
+                });
+            });
+            this._keyManager.withHorizontalOrientation(this._getLayoutDirection());
+        });
+        // If there is a change in the focus key manager we need to emit the `indexFocused`
+        // event in order to provide a public event that notifies about focus changes. Also we realign
+        // the tabs container by scrolling the new focused tab into the visible section.
+        this._keyManager.change.subscribe((newFocusIndex) => {
+            this.indexFocused.emit(newFocusIndex);
+            this._setTabFocus(newFocusIndex);
+        });
+    }
+    /** Sends any changes that could affect the layout of the items. */
+    _itemsResized() {
+        if (typeof ResizeObserver !== 'function') {
+            return EMPTY;
+        }
+        return this._itemsChanges.pipe(startWith(this._items()), switchMap((tabItems) => new Observable((observer) => this._ngZone.runOutsideAngular(() => {
+            const resizeObserver = new ResizeObserver((entries) => observer.next(entries));
+            for (const tabItem of tabItems) {
+                resizeObserver.observe(tabItem.elementRef.nativeElement);
+            }
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }))), 
+        // Skip the first emit since the resize observer emits when an item
+        // is observed for new items when the tab is already inserted
+        skip(1), 
+        // Skip emissions where all the elements are invisible since we don't want
+        // the header to try and re-render with invalid measurements. See #25574.
+        filter((entries) => entries.some((e) => e.contentRect.width > 0 && e.contentRect.height > 0)));
+    }
+    ngAfterContentChecked() {
+        // If the number of tab labels have changed, check if scrolling should be enabled
+        if (this._tabLabelCount !== this._items().length) {
+            this.updatePagination();
+            this._tabLabelCount = this._items().length;
+            this._changeDetectorRef.markForCheck();
+        }
+        // If the selected index has changed, scroll to the label and check if the scrolling controls
+        // should be disabled.
+        if (this._selectedIndexChanged) {
+            this._scrollToLabel(this._selectedIndex());
+            this._checkScrollingControls();
+            this._selectedIndexChanged = false;
+            this._changeDetectorRef.markForCheck();
+        }
+        // If the scroll distance has been changed (tab selected, focused, scroll controls activated),
+        // then translate the header to reflect this.
+        if (this._scrollDistanceChanged) {
+            this._updateTabScrollPosition();
+            this._scrollDistanceChanged = false;
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this._keyManager?.destroy();
+        this._destroyed.next();
+        this._destroyed.complete();
+        this._stopScrolling.complete();
+    }
+    /** Handles keyboard events on the header. */
+    _handleKeydown(event) {
+        // We don't handle any key bindings with a modifier key.
+        if (hasModifierKey(event)) {
+            return;
+        }
+        switch (event.keyCode) {
+            case ENTER:
+            case SPACE:
+                if (this.focusIndex !== this._selectedIndex()) {
+                    const item = this._items()[this.focusIndex];
+                    if (item && !item.disabled) {
+                        this.selectFocusedIndex.emit(this.focusIndex);
+                        this._itemSelected(event);
+                    }
+                }
+                break;
+            default:
+                this._keyManager.onKeydown(event);
+        }
+    }
+    /**
+     * Callback for when the MutationObserver detects that the content has changed.
+     */
+    _onContentChanges() {
+        const textContent = this._elementRef.nativeElement.textContent;
+        // We need to diff the text content of the header, because the MutationObserver callback
+        // will fire even if the text content didn't change which is inefficient and is prone
+        // to infinite loops if a poorly constructed expression is passed in (see #14249).
+        if (textContent !== this._currentTextContent) {
+            this._currentTextContent = textContent || '';
+            // The content observer runs outside the `NgZone` by default, which
+            // means that we need to bring the callback back in ourselves.
+            this._ngZone.run(() => {
+                this.updatePagination();
+                this._changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    /**
+     * Updates the view whether pagination should be enabled or not.
+     *
+     * WARNING: Calling this method can be very costly in terms of performance. It should be called
+     * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
+     * page.
+     */
+    updatePagination() {
+        this._checkPaginationEnabled();
+        this._checkScrollingControls();
+        this._updateTabScrollPosition();
+    }
+    /** Tracks which element has focus; used for keyboard navigation */
+    get focusIndex() {
+        return this._keyManager ? (this._keyManager.activeItemIndex ?? 0) : 0;
+    }
+    /** When the focus index is set, we must manually send focus to the correct label */
+    set focusIndex(value) {
+        if (!this._isValidIndex(value) || this.focusIndex === value || !this._keyManager) {
+            return;
+        }
+        this._keyManager.setActiveItem(value);
+    }
+    /**
+     * Determines if an index is valid.  If the tabs are not ready yet, we assume that the user is
+     * providing a valid index and return true.
+     */
+    _isValidIndex(index) {
+        return this._items() ? !!this._items()[index] : true;
+    }
+    /**
+     * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
+     * scrolling is enabled.
+     */
+    _setTabFocus(tabIndex) {
+        if (this._showPaginationControls()) {
+            this._scrollToLabel(tabIndex);
+        }
+        if (this._items()?.length) {
+            this._items()[tabIndex].focus();
+            // Do not let the browser manage scrolling to focus the element, this will be handled
+            // by using translation. In LTR, the scroll left should be 0. In RTL, the scroll width
+            // should be the full width minus the offset width.
+            const containerEl = this._tabListContainer().nativeElement;
+            const dir = this._getLayoutDirection();
+            if (dir === 'ltr') {
+                containerEl.scrollLeft = 0;
+            }
+            else {
+                containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth;
+            }
+        }
+    }
+    /** The layout direction of the containing app. */
+    _getLayoutDirection() {
+        return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
+    }
+    /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
+    _updateTabScrollPosition() {
+        if (this.disablePagination()) {
+            return;
+        }
+        const scrollDistance = this.scrollDistance;
+        const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;
+        // Don't use `translate3d` here because we don't want to create a new layer. A new layer
+        // seems to cause flickering and overflow in Internet Explorer. For example, the ink bar
+        // and ripples will exceed the boundaries of the visible tab bar.
+        // See: https://github.com/angular/components/issues/10276
+        // We round the `transform` here, because transforms with sub-pixel precision cause some
+        // browsers to blur the content of the element.
+        this._tabList().nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;
+        // Setting the `transform` on IE will change the scroll offset of the parent, causing the
+        // position to be thrown off in some cases. We have to reset it ourselves to ensure that
+        // it doesn't get thrown off. Note that we scope it only to IE and Edge, because messing
+        // with the scroll position throws off Chrome 71+ in RTL mode (see #14689).
+        if (this._platform.TRIDENT || this._platform.EDGE) {
+            this._tabListContainer().nativeElement.scrollLeft = 0;
+        }
+    }
+    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
+    get scrollDistance() {
+        return this._scrollDistance;
+    }
+    set scrollDistance(value) {
+        this._scrollTo(value);
+    }
+    /**
+     * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
+     * the end of the list, respectively). The distance to scroll is computed to be a third of the
+     * length of the tab list view window.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    _scrollHeader(direction) {
+        const viewLength = this._tabListContainer().nativeElement.offsetWidth;
+        // Move the scroll distance one-third the length of the tab list's viewport.
+        const scrollAmount = ((direction === 'before' ? -1 : 1) * viewLength) / 3;
+        return this._scrollTo(this._scrollDistance + scrollAmount);
+    }
+    /** Handles click events on the pagination arrows. */
+    _handlePaginatorClick(direction) {
+        this._stopInterval();
+        this._scrollHeader(direction);
+    }
+    /**
+     * Moves the tab list such that the desired tab label (marked by index) is moved into view.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    _scrollToLabel(labelIndex) {
+        if (this.disablePagination()) {
+            return;
+        }
+        const selectedLabel = this._items() ? this._items()[labelIndex] : null;
+        if (!selectedLabel) {
+            return;
+        }
+        // The view length is the visible width of the tab labels.
+        const viewLength = this._tabListContainer().nativeElement.offsetWidth;
+        const { offsetLeft, offsetWidth } = selectedLabel.elementRef.nativeElement;
+        let labelBeforePos;
+        let labelAfterPos;
+        if (this._getLayoutDirection() === 'ltr') {
+            labelBeforePos = offsetLeft;
+            labelAfterPos = labelBeforePos + offsetWidth;
+        }
+        else {
+            labelAfterPos = this._tabListInner().nativeElement.offsetWidth - offsetLeft;
+            labelBeforePos = labelAfterPos - offsetWidth;
+        }
+        const beforeVisiblePos = this.scrollDistance;
+        const afterVisiblePos = this.scrollDistance + viewLength;
+        if (labelBeforePos < beforeVisiblePos) {
+            // Scroll header to move label to the before direction
+            this.scrollDistance -= beforeVisiblePos - labelBeforePos;
+        }
+        else if (labelAfterPos > afterVisiblePos) {
+            // Scroll header to move label to the after direction
+            this.scrollDistance += Math.min(labelAfterPos - afterVisiblePos, labelBeforePos - beforeVisiblePos);
+        }
+    }
+    /**
+     * Evaluate whether the pagination controls should be displayed. If the scroll width of the
+     * tab list is wider than the size of the header container, then the pagination controls should
+     * be shown.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    _checkPaginationEnabled() {
+        if (this.disablePagination()) {
+            this._showPaginationControls.set(false);
+        }
+        else {
+            const isEnabled = this._tabListInner().nativeElement.scrollWidth > this._elementRef.nativeElement.offsetWidth;
+            if (!isEnabled) {
+                this.scrollDistance = 0;
+            }
+            if (isEnabled !== this._showPaginationControls()) {
+                this._changeDetectorRef.markForCheck();
+            }
+            this._showPaginationControls.set(isEnabled);
+        }
+    }
+    /**
+     * Evaluate whether the before and after controls should be enabled or disabled.
+     * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
+     * before button. If the header is at the end of the list (scroll distance is equal to the
+     * maximum distance we can scroll), then disable the after button.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    _checkScrollingControls() {
+        if (this.disablePagination()) {
+            this._disableScrollAfter = this._disableScrollBefore = true;
+        }
+        else {
+            // Check if the pagination arrows should be activated.
+            this._disableScrollBefore = this.scrollDistance === 0;
+            this._disableScrollAfter = this.scrollDistance === this._getMaxScrollDistance();
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    /**
+     * Determines what is the maximum length in pixels that can be set for the scroll distance. This
+     * is equal to the difference in width between the tab list container and tab header container.
+     *
+     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
+     * should be called sparingly.
+     */
+    _getMaxScrollDistance() {
+        const lengthOfTabList = this._tabListInner().nativeElement.scrollWidth;
+        const viewLength = this._tabListContainer().nativeElement.offsetWidth;
+        return lengthOfTabList - viewLength || 0;
+    }
+    /** Stops the currently-running paginator interval.  */
+    _stopInterval() {
+        this._stopScrolling.next();
+    }
+    /**
+     * Handles the user pressing down on one of the paginators.
+     * Starts scrolling the header after a certain amount of time.
+     * @param direction In which direction the paginator should be scrolled.
+     */
+    _handlePaginatorPress(direction, mouseEvent) {
+        // Don't start auto scrolling for right mouse button clicks. Note that we shouldn't have to
+        // null check the `button`, but we do it so we don't break tests that use fake events.
+        if (mouseEvent && mouseEvent.button !== null && mouseEvent.button !== 0) {
+            return;
+        }
+        // Avoid overlapping timers.
+        this._stopInterval();
+        // Start a timer after the delay and keep firing based on the interval.
+        timer(HEADER_SCROLL_DELAY, HEADER_SCROLL_INTERVAL)
+            // Keep the timer going until something tells it to stop or the component is destroyed.
+            .pipe(takeUntil(merge(this._stopScrolling, this._destroyed)))
+            .subscribe(() => {
+            const { maxScrollDistance, distance } = this._scrollHeader(direction);
+            // Stop the timer if we've reached the start or the end.
+            if (distance === 0 || distance >= maxScrollDistance) {
+                this._stopInterval();
+            }
+        });
+    }
+    /**
+     * Scrolls the header to a given position.
+     * @param position Position to which to scroll.
+     * @returns Information on the current scroll distance and the maximum.
+     */
+    _scrollTo(position) {
+        if (this.disablePagination()) {
+            return { maxScrollDistance: 0, distance: 0 };
+        }
+        const maxScrollDistance = this._getMaxScrollDistance();
+        this._scrollDistance = Math.max(0, Math.min(maxScrollDistance, position));
+        // Mark that the scroll distance has changed so that after the view is checked, the CSS
+        // transformation can move the header.
+        this._scrollDistanceChanged = true;
+        this._checkScrollingControls();
+        return { maxScrollDistance, distance: this._scrollDistance };
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsPaginatedListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: BrnTabsPaginatedListDirective, inputs: { disablePagination: { classPropertyName: "disablePagination", publicName: "disablePagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsPaginatedListDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+const BrnTabsImports = [
+    BrnTabsDirective,
+    BrnTabsListDirective,
+    BrnTabsTriggerDirective,
+    BrnTabsContentDirective,
+];
+class BrnTabsModule {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsModule, imports: [BrnTabsDirective,
+            BrnTabsListDirective,
+            BrnTabsTriggerDirective,
+            BrnTabsContentDirective], exports: [BrnTabsDirective,
+            BrnTabsListDirective,
+            BrnTabsTriggerDirective,
+            BrnTabsContentDirective] });
+    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...BrnTabsImports],
+                    exports: [...BrnTabsImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BrnTabsContentDirective, BrnTabsDirective, BrnTabsImports, BrnTabsListDirective, BrnTabsModule, BrnTabsPaginatedListDirective, BrnTabsTriggerDirective };
+//# sourceMappingURL=spartan-ng-brain-tabs.mjs.map