import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, OnDestroy, QueryList } from '@angular/core'; import { Subject } from 'rxjs'; import { KbqTabHeader } from './tab-header.component'; import { KbqTab } from './tab.component'; import * as i0 from "@angular/core"; export declare class KbqAlignTabsCenterCssStyler { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } export declare class KbqAlignTabsEndCssStyler { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } export declare class KbqStretchTabsCssStyler { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } export declare class KbqVerticalTabsCssStyler { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** A simple change event emitted on focus or selection changes. */ export declare class KbqTabChangeEvent { /** Index of the currently-selected tab. */ index: number; /** Reference to the currently-selected tab. */ tab: KbqTab; } /** Possible positions for the tab header. */ export type KbqTabHeaderPosition = 'above' | 'below'; /** Object that can be used to configure the default options for the tabs module. */ export interface KbqTabsConfig { /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */ animationDuration?: string; } /** Injection token that can be used to provide the default options the tabs module. */ export declare const KBQ_TABS_CONFIG: InjectionToken; export type KbqTabSelectBy = string | number | ((tabs: KbqTab[]) => KbqTab | null); /** * Tab-group component. Supports basic tab pairs (label + content) and includes keyboard navigation. */ export declare class KbqTabGroup implements AfterContentInit, AfterViewInit, AfterContentChecked, OnDestroy { private readonly changeDetectorRef; readonly resizeStream: Subject; tabs: QueryList; tabBodyWrapper: ElementRef; tabHeader: KbqTabHeader; transparent: boolean; onSurface: boolean; underlined: boolean; vertical: boolean; /** Whether the tab group should grow to the size of the active tab. */ dynamicHeight: boolean; /** The index of the active tab. */ get selectedIndex(): number; set selectedIndex(value: number); private _selectedIndex; get activeTab(): KbqTab | null; set activeTab(value: KbqTabSelectBy | null); /** Position of the tab header. */ headerPosition: KbqTabHeaderPosition; /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */ animationDuration: string; get disabled(): boolean; set disabled(value: boolean); private _disabled; /** Output to enable support for two-way binding on `[(selectedIndex)]` */ readonly selectedIndexChange: EventEmitter; /** Event emitted when the tab selection has changed. */ readonly activeTabChange: EventEmitter; /** Event emitted when focus has changed within a tab group. */ readonly focusChange: EventEmitter; /** Event emitted when the body animation has completed */ readonly animationDone: EventEmitter; /** Event emitted when the tab selection has changed. */ readonly selectedTabChange: EventEmitter; private attributeToSelectBy; /** Snapshot of the height of the tab body wrapper before another tab is activated. */ private tabBodyWrapperHeight; /** Subscription to tabs being added/removed. */ private tabsSubscription; /** Subscription to changes in the tab labels. */ private tabLabelSubscription; private resizeSubscription; private readonly groupId; private readonly resizeDebounceInterval; constructor(changeDetectorRef: ChangeDetectorRef, defaultConfig?: KbqTabsConfig); ngAfterContentInit(): void; /** * After the content is checked, this component knows what tabs have been defined * and what the selected index should be. This is where we can know exactly what position * each tab should be in according to the new selected index, and additionally we know how * a new selected tab should transition in (from the left or right). */ ngAfterContentChecked(): void; ngAfterViewInit(): void; ngOnDestroy(): void; focusChanged(index: number): void; /** Returns a unique id for each tab label element */ getTabLabelId(i: number): string; /** Returns a unique id for each tab content element */ getTabContentId(i: number): string; /** * Sets the height of the body wrapper to the height of the activating tab if dynamic * height property is true. */ setTabBodyWrapperHeight(tabHeight: number): void; /** Removes the height of the tab body wrapper. */ removeTabBodyWrapperHeight(): void; /** Handle click events, setting new selected index if appropriate. */ handleClick(tab: KbqTab, tabHeader: KbqTabHeader, index: number): void; /** Retrieves the tabindex for the tab. */ getTabIndex(tab: KbqTab, index: number): number | null; onSelectFocusedIndex($event: number): void; private checkOverflow; private createChangeEvent; /** * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is * on the KbqTab component, whereas the data binding is inside the KbqTabGroup. In order for the * binding to be updated, we need to subscribe to changes in it and trigger change detection * manually. */ private subscribeToTabLabels; private subscribeToResize; /** Clamps the given index to the bounds of 0 and the tabs length. */ private clampTabIndex; private getTabIndexToSelect; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_transparent: unknown; static ngAcceptInputType_onSurface: unknown; static ngAcceptInputType_underlined: unknown; static ngAcceptInputType_vertical: unknown; static ngAcceptInputType_dynamicHeight: unknown; static ngAcceptInputType_selectedIndex: unknown; static ngAcceptInputType_disabled: unknown; }