import { ViewportRuler } from '@angular/cdk/overlay'; import { Platform } from '@angular/cdk/platform'; import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, QueryList } from '@angular/core'; import { TsTabInkBarComponent } from '../ink-bar/ink-bar.component'; import { TsTabLabelWrapperDirective } from '../label/tab-label-wrapper.directive'; /** * The directions that scrolling can go in when the header's tabs exceed the header width. 'After' will scroll the header towards the end of * the tabs list and 'before' will scroll towards the beginning of the list. */ export declare type TsScrollDirection = 'after' | 'before'; /** * The header of the tab collection which displays a list of all the tabs in the tab collection. Includes an ink bar that follows the * currently selected tab. When the tabs list's width exceeds the width of the header container, then arrows will be displayed to allow the * user to scroll left and right across the header. * * NOTE: Only used internally. */ export declare class TsTabHeaderComponent implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy { private elementRef; private changeDetectorRef; private viewportRuler; private ngZone; private platform; /** * Cached text content of the header */ private currentTextContent; /** * Whether the tab list can be scrolled more towards the end of the tab label list */ disableScrollAfter: boolean; /** * Whether the tab list can be scrolled more towards the beginning of the tab label list */ disableScrollBefore: boolean; /** * Manually set the focus to the correct label * * @param value */ set focusIndex(value: number); /** * Tracks which element has focus (used for keyboard navigation) */ get focusIndex(): number; /** * Used to manage focus between the tabs */ private keyManager; /** * Sets the distance in pixels that the tab header should be transformed in the X-axis * * @param value */ set scrollDistance(value: number); get scrollDistance(): number; /** * The distance in pixels that the tab labels should be translated to the left */ private _scrollDistance; /** * Whether the scroll distance has changed and should be applied after the view is checked */ private scrollDistanceChanged; /** * Whether the header should scroll to the selected index after the view has been checked */ private selectedIndexChanged; /** * Whether the controls for pagination should be displayed */ showPaginationControls: boolean; /** * Stream that will stop the automated scrolling */ private stopScrolling; /** * The number of tab labels that are displayed on the header * * When this changes, the header should re-evaluate the scroll position. */ private tabLabelCount; /** * Reference to the ink bar (underline element for the selected tab) */ inkBar: TsTabInkBarComponent; /** * Reference to the paginator that reveals tabs at the beginning of the list */ previousPaginator: ElementRef; /** * Reference to the paginator that reveals tabs at the end of the list */ nextPaginator: ElementRef; /** * Reference to the outer container for the list of tabs */ tabListContainer: ElementRef; /** * Reference to the inner container for the list of tabs */ tabList: ElementRef; /** * Reference for the list of individual label wrappers */ labelWrappers: QueryList; /** * The index of the active tab * * @param value */ set selectedIndex(value: number); get selectedIndex(): number; private _selectedIndex; /** * Event emitted when a label is focused */ readonly indexFocused: EventEmitter; /** * Event emitted when the option is selected */ readonly selectFocusedIndex: EventEmitter; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform); /** * After content is checked, update internals as needed */ ngAfterContentChecked(): void; /** * Align the {@link TsTabInkBarComponent} to the selected tab on load */ ngAfterContentInit(): void; /** * Wire up listeners for pagination clicks * NOTE: We need to handle these events manually because we want to bind passive event listeners. */ ngAfterViewInit(): void; /** * Needed for untilComponentDestroyed */ ngOnDestroy(): void; /** * Handle keyboard events on the header * * @param event - The keyboard event */ handleKeydown(event: KeyboardEvent): void; /** * Callback for when the MutationObserver detects that the content has changed. */ onContentChanges(): void; /** * Handle click events on the pagination arrows * * @param direction - The scroll direction */ handlePaginatorClick(direction: TsScrollDirection): void; /** * Tell the {@link TsInkBarComponent} to align itself to the current label wrapper */ alignInkBarToSelectedTab(): void; /** * Stop the currently-running paginator interval */ stopInterval(): void; /** * Handles the user pressing down on one of the paginators. * * Starts scrolling the header after a certain amount of time. * * @param direction - The direction to scroll */ handlePaginatorPress(direction: TsScrollDirection): void; /** * Updates the view whether pagination should be enabled or not * * NOTE: Calling this method can be very costly in terms of performance. It should be called as infrequently as possible from outside * of the {@link TsTabComponent} as it causes a reflow of the page. */ private updatePagination; /** * 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. * * @param index - The index to check */ private isValidIndex; /** * Sets focus on the HTML element for the label wrapper and scrolls it into the view if scrolling is enabled * * @param tabIndex - The index of the tab to focus */ private setTabFocus; /** * Perform the CSS transformation on the tab list that will cause the list to scroll */ private updateTabScrollPosition; /** * Move 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. * * NOTE: This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly. * * @param direction - The scroll direction * @returns An object defining scroll limitations */ private scrollHeader; /** * Move the tab list such that the desired tab label (marked by index) is moved into view * * NOTE: This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly. * * @param labelIndex - The index of the label to scroll into view */ private scrollToLabel; /** * 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. * * NOTE: This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly. */ checkPaginationEnabled(): void; /** * 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. * * NOTE: This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly. */ private checkScrollingControls; /** * Determine 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. * * NOTE: This is an expensive call that forces a layout reflow to compute box and scroll metrics and should be called sparingly. * * @returns The maximum scroll distance */ private getMaxScrollDistance; /** * Scroll the header to a given position * * @param position - The position to scroll to * @returns An object defining the desired scroll position */ private scrollTo; }