@alauda/ui/tabs/tab-header.component.d.ts

Angular UI components by Alauda Frontend Team.

import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
import { Bem } from '../internal/utils';
import { TabHeaderAddonDirective, TabLabelWrapperDirective, TabTitleDirective } from './tab-body.component';
import { TabHeaderActiveIndicatorComponent } from './tab-header-active-indicator.component';
import { TabSize, TabType } from './tabs.types';
import * as i0 from "@angular/core";
/**
 * 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 type ScrollDirection = 'after' | 'before';
export declare class TabHeaderComponent implements OnDestroy, AfterContentChecked, AfterContentInit {
    private readonly _changeDetectorRef;
    bem: Bem;
    _showAddon: boolean;
    /** Whether the controls for pagination should be displayed */
    _showPaginationControls: boolean;
    /** 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;
    /** 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;
    /** The distance in pixels that the tab labels should be translated to the left. */
    private _scrollDistance;
    private _selectedIndex;
    /** Emits when the component is destroyed. */
    private readonly _destroyed;
    /** Used to manage focus between the tabs. */
    private _keyManager;
    type: TabType;
    size: TabSize;
    /** The index of the active tab. */
    get selectedIndex(): number;
    set selectedIndex(value: number);
    /** Event emitted when the option is selected. */
    readonly selectFocusedIndex: EventEmitter<number>;
    /** Event emitted when a label is focused. */
    readonly indexFocused: EventEmitter<number>;
    _headerAddon: TabHeaderAddonDirective;
    _title: TabTitleDirective;
    /**
     * workaround for @link https://github.com/microsoft/TypeScript/pull/42425
     */
    _labelWrappers: QueryList<TabLabelWrapperDirective & {
        disabled?: boolean;
    }>;
    _tabListContainer: ElementRef<HTMLElement>;
    _tabList: ElementRef<HTMLElement>;
    _paginationWrapper: ElementRef<HTMLElement>;
    _activeIndicator: TabHeaderActiveIndicatorComponent;
    ngOnDestroy(): void;
    ngAfterContentChecked(): void;
    /**
     * Aligns the ink bar to the selected tab on load.
     */
    ngAfterContentInit(): void;
    /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
    get scrollDistance(): number;
    set scrollDistance(v: number);
    /** Tracks which element has focus; used for keyboard navigation */
    get focusIndex(): number;
    /** When the focus index is set, we must manually send focus to the correct label */
    set focusIndex(value: number);
    /**
     * 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: number): boolean;
    _handleKeydown(event: KeyboardEvent): void;
    /**
     * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
     * scrolling is enabled.
     */
    _setTabFocus(tabIndex: number): void;
    /**
     * 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: number): void;
    /**
     * 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(scrollDir: ScrollDirection): void;
    /**
     * Callback for when the MutationObserver detects that the content has changed.
     */
    _onContentChanges(): void;
    /**
     * Updating the view whether pagination should be enabled or not
     */
    _updatePagination(): void;
    /**
     * 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(): 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.
     *
     * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
     * should be called sparingly.
     */
    _checkScrollingControls(): void;
    /**
     * 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(): number;
    /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
    _updateTabScrollPosition(): void;
    /** Tells the active indicator to align itself to the current label wrapper */
    _alignActiveIndicatorToSelectedTab(): void;
    constructor(_changeDetectorRef: ChangeDetectorRef);
    static ɵfac: i0.ɵɵFactoryDeclaration<TabHeaderComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TabHeaderComponent, "aui-tab-header", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["_headerAddon", "_title", "_labelWrappers"], ["*"], true, never>;
}