UNPKG

@angular/material

Version:
1,009 lines (954 loc) 46.8 kB
import { _AbstractConstructor } from '@angular/material/core'; import { AfterContentChecked } from '@angular/core'; import { AfterContentInit } from '@angular/core'; import { AfterViewInit } from '@angular/core'; import { AnimationEvent as AnimationEvent_2 } from '@angular/animations'; import { AnimationTriggerMetadata } from '@angular/animations'; import { BehaviorSubject } from 'rxjs'; import { BooleanInput } from '@angular/cdk/coercion'; import { CanColor } from '@angular/material/core'; import { CanDisable } from '@angular/material/core'; import { CanDisableRipple } from '@angular/material/core'; import { CdkPortal } from '@angular/cdk/portal'; import { CdkPortalOutlet } from '@angular/cdk/portal'; import { ChangeDetectorRef } from '@angular/core'; import { ComponentFactoryResolver } from '@angular/core'; import { _Constructor } from '@angular/material/core'; import { Direction } from '@angular/cdk/bidi'; import { Directionality } from '@angular/cdk/bidi'; import { ElementRef } from '@angular/core'; import { EventEmitter } from '@angular/core'; import { FocusableOption } from '@angular/cdk/a11y'; import { FocusMonitor } from '@angular/cdk/a11y'; import { FocusOrigin } from '@angular/cdk/a11y'; import { HasTabIndex } from '@angular/material/core'; import * as i0 from '@angular/core'; import * as i10 from '@angular/material/core'; import * as i11 from '@angular/cdk/portal'; import * as i12 from '@angular/cdk/observers'; import * as i13 from '@angular/cdk/a11y'; import * as i9 from '@angular/common'; import { InjectionToken } from '@angular/core'; import { NgZone } from '@angular/core'; import { NumberInput } from '@angular/cdk/coercion'; import { OnChanges } from '@angular/core'; import { OnDestroy } from '@angular/core'; import { OnInit } from '@angular/core'; import { Platform } from '@angular/cdk/platform'; import { QueryList } from '@angular/core'; import { RippleConfig } from '@angular/material/core'; import { RippleGlobalOptions } from '@angular/material/core'; import { RippleTarget } from '@angular/material/core'; import { SimpleChanges } from '@angular/core'; import { Subject } from 'rxjs'; import { TemplatePortal } from '@angular/cdk/portal'; import { TemplateRef } from '@angular/core'; import { ThemePalette } from '@angular/material/core'; import { ViewContainerRef } from '@angular/core'; import { ViewportRuler } from '@angular/cdk/scrolling'; declare namespace i1 { export { MAT_TAB_CONTENT, MatTabContent } } declare namespace i2 { export { MAT_TAB_LABEL, MAT_TAB, MatTabLabel } } declare namespace i3 { export { MAT_TAB_GROUP, _MatTabBase, MatTab } } declare namespace i4 { export { MatTabGroupBaseHeader, MatTabHeaderPosition, _MatTabGroupBase, MatTabGroup, MatTabChangeEvent } } declare namespace i5 { export { _MatTabNavBase, _MatTabLinkBase, MatTabNav, MatTabLink, MatTabNavPanel } } declare namespace i6 { export { MatTabBodyPortal, MatTabBodyPositionState, _MatTabBodyBase, MatTabBody, MatTabBodyOriginState } } declare namespace i7 { export { _MatTabLabelWrapperBase, MatTabLabelWrapper } } declare namespace i8 { export { _MatTabHeaderBase, MatTabHeader } } /** Injection token for the MatInkBar's Positioner. */ export declare const _MAT_INK_BAR_POSITIONER: InjectionToken<_MatInkBarPositioner>; /** * The default positioner function for the MatInkBar. * @docs-private */ export declare function _MAT_INK_BAR_POSITIONER_FACTORY(): _MatInkBarPositioner; /** * Used to provide a tab label to a tab without causing a circular dependency. * @docs-private */ export declare const MAT_TAB: InjectionToken<any>; /** * Injection token that can be used to reference instances of `MatTabContent`. It serves as * alternative token to the actual `MatTabContent` class which could cause unnecessary * retention of the class and its directive metadata. */ export declare const MAT_TAB_CONTENT: InjectionToken<MatTabContent>; /** * Used to provide a tab group to a tab without causing a circular dependency. * @docs-private */ export declare const MAT_TAB_GROUP: InjectionToken<any>; /** * Injection token that can be used to reference instances of `MatTabLabel`. It serves as * alternative token to the actual `MatTabLabel` class which could cause unnecessary * retention of the class and its directive metadata. */ export declare const MAT_TAB_LABEL: InjectionToken<MatTabLabel>; /** Injection token that can be used to provide the default options the tabs module. */ export declare const MAT_TABS_CONFIG: InjectionToken<MatTabsConfig>; /** * Abstraction around the MDC tab indicator that acts as the tab header's ink bar. * @docs-private */ export declare class MatInkBar { private _items; /** Item to which the ink bar is aligned currently. */ private _currentItem; constructor(_items: QueryList<MatInkBarItem>); /** Hides the ink bar. */ hide(): void; /** Aligns the ink bar to a DOM node. */ alignToElement(element: HTMLElement): void; } /** * Item inside a tab header relative to which the ink bar can be aligned. * @docs-private */ declare interface MatInkBarItem extends OnInit, OnDestroy { elementRef: ElementRef<HTMLElement>; activateInkBar(previousIndicatorClientRect?: ClientRect): void; deactivateInkBar(): void; fitInkBarToContent: boolean; } /** * Interface for a a MatInkBar positioner method, defining the positioning and width of the ink * bar in a set of tabs. */ export declare interface _MatInkBarPositioner { (element: HTMLElement): { left: string; width: string; }; } /** * Base class for a tab header that supported pagination. * @docs-private */ export declare abstract class MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy { protected _elementRef: ElementRef<HTMLElement>; protected _changeDetectorRef: ChangeDetectorRef; private _viewportRuler; private _dir; private _ngZone; private _platform; _animationMode?: string | undefined; abstract _items: QueryList<MatPaginatedTabHeaderItem>; abstract _inkBar: { hide: () => void; alignToElement: (element: HTMLElement) => void; }; abstract _tabListContainer: ElementRef<HTMLElement>; abstract _tabList: ElementRef<HTMLElement>; abstract _tabListInner: ElementRef<HTMLElement>; abstract _nextPaginator: ElementRef<HTMLElement>; abstract _previousPaginator: ElementRef<HTMLElement>; /** The distance in pixels that the tab labels should be translated to the left. */ private _scrollDistance; /** Whether the header should scroll to the selected index after the view has been checked. */ private _selectedIndexChanged; /** Emits when the component is destroyed. */ protected readonly _destroyed: Subject<void>; /** 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; /** * The number of tab labels that are displayed on the header. When this changes, the header * should re-evaluate the scroll position. */ private _tabLabelCount; /** Whether the scroll distance has changed and should be applied after the view is checked. */ private _scrollDistanceChanged; /** Used to manage focus between the tabs. */ private _keyManager; /** Cached text content of the header. */ private _currentTextContent; /** Stream that will stop the automated scrolling. */ private _stopScrolling; /** * Whether pagination should be disabled. This can be used to avoid unnecessary * layout recalculations if it's known that pagination won't be required. */ get disablePagination(): boolean; set disablePagination(value: BooleanInput); private _disablePagination; /** The index of the active tab. */ get selectedIndex(): number; set selectedIndex(value: NumberInput); private _selectedIndex; /** Event emitted when the option is selected. */ readonly selectFocusedIndex: EventEmitter<number>; /** Event emitted when a label is focused. */ readonly indexFocused: EventEmitter<number>; constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _viewportRuler: ViewportRuler, _dir: Directionality, _ngZone: NgZone, _platform: Platform, _animationMode?: string | undefined); /** Called when the user has selected an item via the keyboard. */ protected abstract _itemSelected(event: KeyboardEvent): void; ngAfterViewInit(): void; ngAfterContentInit(): void; /** Sends any changes that could affect the layout of the items. */ private _itemsResized; ngAfterContentChecked(): void; ngOnDestroy(): void; /** Handles keyboard events on the header. */ _handleKeydown(event: KeyboardEvent): void; /** * Callback for when the MutationObserver detects that the content has changed. */ _onContentChanges(): void; /** * 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(): void; /** 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; /** * Sets focus on the HTML element for the label wrapper and scrolls it into the view if * scrolling is enabled. */ _setTabFocus(tabIndex: number): void; /** The layout direction of the containing app. */ _getLayoutDirection(): Direction; /** Performs the CSS transformation on the tab list that will cause the list to scroll. */ _updateTabScrollPosition(): void; /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */ get scrollDistance(): number; set scrollDistance(value: number); /** * 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: ScrollDirection): { maxScrollDistance: number; distance: number; }; /** Handles click events on the pagination arrows. */ _handlePaginatorClick(direction: ScrollDirection): 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; /** * 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; /** Tells the ink-bar to align itself to the current label wrapper */ _alignInkBarToSelectedTab(): void; /** Stops 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 In which direction the paginator should be scrolled. */ _handlePaginatorPress(direction: ScrollDirection, mouseEvent?: MouseEvent): void; /** * Scrolls the header to a given position. * @param position Position to which to scroll. * @returns Information on the current scroll distance and the maximum. */ private _scrollTo; static ɵfac: i0.ɵɵFactoryDeclaration<MatPaginatedTabHeader, [null, null, null, { optional: true; }, null, null, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<MatPaginatedTabHeader, never, never, { "disablePagination": "disablePagination"; }, {}, never, never, false, never>; } /** Item inside a paginated tab header. */ declare type MatPaginatedTabHeaderItem = FocusableOption & { elementRef: ElementRef; }; export declare class MatTab extends _MatTabBase { /** * Template provided in the tab content that will be used if present, used to enable lazy-loading */ _explicitContent: TemplateRef<any>; /** Content for the tab label given by `<ng-template mat-tab-label>`. */ get templateLabel(): MatTabLabel; set templateLabel(value: MatTabLabel); static ɵfac: i0.ɵɵFactoryDeclaration<MatTab, never>; static ɵcmp: i0.ɵɵComponentDeclaration<MatTab, "mat-tab", ["matTab"], { "disabled": "disabled"; }, {}, ["_explicitContent", "templateLabel"], ["*"], false, never>; } /** @docs-private */ export declare class _MatTabBase extends _MatTabMixinBase implements CanDisable, OnInit, OnChanges, OnDestroy { private _viewContainerRef; _closestTabGroup: any; /** Content for the tab label given by `<ng-template mat-tab-label>`. */ protected _templateLabel: MatTabLabel; /** * Template provided in the tab content that will be used if present, used to enable lazy-loading */ _explicitContent: TemplateRef<any>; /** Template inside the MatTab view that contains an `<ng-content>`. */ _implicitContent: TemplateRef<any>; /** Plain text label for the tab, used when there is no template label. */ textLabel: string; /** Aria label for the tab. */ ariaLabel: string; /** * Reference to the element that the tab is labelled by. * Will be cleared if `aria-label` is set at the same time. */ ariaLabelledby: string; /** * Classes to be passed to the tab label inside the mat-tab-header container. * Supports string and string array values, same as `ngClass`. */ labelClass: string | string[]; /** * Classes to be passed to the tab mat-tab-body container. * Supports string and string array values, same as `ngClass`. */ bodyClass: string | string[]; /** Portal that will be the hosted content of the tab */ private _contentPortal; /** @docs-private */ get content(): TemplatePortal | null; /** Emits whenever the internal state of the tab changes. */ readonly _stateChanges: Subject<void>; /** * The relatively indexed position where 0 represents the center, negative is left, and positive * represents the right. */ position: number | null; /** * The initial relatively index origin of the tab if it was created and selected after there * was already a selected tab. Provides context of what position the tab should originate from. */ origin: number | null; /** * Whether the tab is currently active. */ isActive: boolean; constructor(_viewContainerRef: ViewContainerRef, _closestTabGroup: any); ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; ngOnInit(): void; /** * This has been extracted to a util because of TS 4 and VE. * View Engine doesn't support property rename inheritance. * TS 4.0 doesn't allow properties to override accessors or vice-versa. * @docs-private */ protected _setTemplateLabelInput(value: MatTabLabel | undefined): void; static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabBase, [null, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabBase, never, never, { "textLabel": "label"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "labelClass": "labelClass"; "bodyClass": "bodyClass"; }, {}, never, never, false, never>; } /** * Wrapper for the contents of a tab. * @docs-private */ export declare class MatTabBody extends _MatTabBodyBase { _portalHost: CdkPortalOutlet; constructor(elementRef: ElementRef<HTMLElement>, dir: Directionality, changeDetectorRef: ChangeDetectorRef); static ɵfac: i0.ɵɵFactoryDeclaration<MatTabBody, [null, { optional: true; }, null]>; static ɵcmp: i0.ɵɵComponentDeclaration<MatTabBody, "mat-tab-body", never, {}, {}, never, never, false, never>; } /** * Base class with all of the `MatTabBody` functionality. * @docs-private */ export declare abstract class _MatTabBodyBase implements OnInit, OnDestroy { private _elementRef; private _dir; /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */ private _positionIndex; /** Subscription to the directionality change observable. */ private _dirChangeSubscription; /** Tab body position state. Used by the animation trigger for the current state. */ _position: MatTabBodyPositionState; /** Emits when an animation on the tab is complete. */ readonly _translateTabComplete: Subject<AnimationEvent_2>; /** Event emitted when the tab begins to animate towards the center as the active tab. */ readonly _onCentering: EventEmitter<number>; /** Event emitted before the centering of the tab begins. */ readonly _beforeCentering: EventEmitter<boolean>; /** Event emitted before the centering of the tab begins. */ readonly _afterLeavingCenter: EventEmitter<void>; /** Event emitted when the tab completes its animation towards the center. */ readonly _onCentered: EventEmitter<void>; /** The portal host inside of this container into which the tab body content will be loaded. */ abstract _portalHost: CdkPortalOutlet; /** The tab body content to display. */ _content: TemplatePortal; /** Position that will be used when the tab is immediately becoming visible after creation. */ origin: number | null; /** Duration for the tab's animation. */ animationDuration: string; /** Whether the tab's content should be kept in the DOM while it's off-screen. */ preserveContent: boolean; /** The shifted index position of the tab body, where zero represents the active center tab. */ set position(position: number); constructor(_elementRef: ElementRef<HTMLElement>, _dir: Directionality, changeDetectorRef: ChangeDetectorRef); /** * After initialized, check if the content is centered and has an origin. If so, set the * special position states that transition the tab from the left or right before centering. */ ngOnInit(): void; ngOnDestroy(): void; _onTranslateTabStarted(event: AnimationEvent_2): void; /** The text direction of the containing app. */ _getLayoutDirection(): Direction; /** Whether the provided position state is considered center, regardless of origin. */ _isCenterPosition(position: MatTabBodyPositionState | string): boolean; /** Computes the position state that will be used for the tab-body animation trigger. */ private _computePositionAnimationState; /** * Computes the position state based on the specified origin position. This is used if the * tab is becoming visible immediately after creation. */ private _computePositionFromOrigin; static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabBodyBase, [null, { optional: true; }, null]>; static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabBodyBase, never, never, { "_content": "content"; "origin": "origin"; "animationDuration": "animationDuration"; "preserveContent": "preserveContent"; "position": "position"; }, { "_onCentering": "_onCentering"; "_beforeCentering": "_beforeCentering"; "_afterLeavingCenter": "_afterLeavingCenter"; "_onCentered": "_onCentered"; }, never, never, false, never>; } /** * The origin state is an internally used state that is set on a new tab body indicating if it * began to the left or right of the prior selected index. For example, if the selected index was * set to 1, and a new tab is created and selected at index 2, then the tab body would have an * origin of right because its index was greater than the prior selected index. */ export declare type MatTabBodyOriginState = 'left' | 'right'; /** * The portal host directive for the contents of the tab. * @docs-private */ export declare class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy { private _host; /** Subscription to events for when the tab body begins centering. */ private _centeringSub; /** Subscription to events for when the tab body finishes leaving from center position. */ private _leavingSub; constructor(componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef, _host: MatTabBody, _document: any); /** Set initial visibility or set up subscription for changing visibility. */ ngOnInit(): void; /** Clean up centering subscription. */ ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<MatTabBodyPortal, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabBodyPortal, "[matTabBodyHost]", never, {}, {}, never, never, false, never>; } /** * These position states are used internally as animation states for the tab body. Setting the * position state to left, right, or center will transition the tab body from its current * position to its respective state. If there is not current position (void, in the case of a new * tab body), then there will be no transition animation to its state. * * In the case of a new tab body that should immediately be centered with an animating transition, * then left-origin-center or right-origin-center can be used, which will use left or right as its * pseudo-prior state. */ export declare type MatTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center'; /** A simple change event emitted on focus or selection changes. */ export declare class MatTabChangeEvent { /** Index of the currently-selected tab. */ index: number; /** Reference to the currently-selected tab. */ tab: MatTab; } /** Decorates the `ng-template` tags and reads out the template from it. */ export declare class MatTabContent { template: TemplateRef<any>; constructor(/** Content for the tab. */ template: TemplateRef<any>); static ɵfac: i0.ɵɵFactoryDeclaration<MatTabContent, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabContent, "[matTabContent]", never, {}, {}, never, never, false, never>; } /** * Material design tab-group component. Supports basic tab pairs (label + content) and includes * animated ink-bar, keyboard navigation, and screen reader. * See: https://material.io/design/components/tabs.html */ export declare class MatTabGroup extends _MatTabGroupBase { _allTabs: QueryList<MatTab>; _tabBodyWrapper: ElementRef; _tabHeader: MatTabHeader; /** Whether the ink bar should fit its width to the size of the tab label content. */ get fitInkBarToContent(): boolean; set fitInkBarToContent(v: BooleanInput); private _fitInkBarToContent; /** Whether tabs should be stretched to fill the header. */ get stretchTabs(): boolean; set stretchTabs(v: BooleanInput); private _stretchTabs; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, animationMode?: string); static ɵfac: i0.ɵɵFactoryDeclaration<MatTabGroup, [null, null, { optional: true; }, { optional: true; }]>; static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": "color"; "disableRipple": "disableRipple"; "fitInkBarToContent": "fitInkBarToContent"; "stretchTabs": "mat-stretch-tabs"; }, {}, ["_allTabs"], never, false, never>; } /** * Base class with all of the `MatTabGroupBase` functionality. * @docs-private */ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements AfterContentInit, AfterContentChecked, OnDestroy, CanColor, CanDisableRipple { protected _changeDetectorRef: ChangeDetectorRef; _animationMode?: string | undefined; /** * All tabs inside the tab group. This includes tabs that belong to groups that are nested * inside the current one. We filter out only the tabs that belong to this group in `_tabs`. */ abstract _allTabs: QueryList<MatTab>; abstract _tabBodyWrapper: ElementRef; abstract _tabHeader: MatTabGroupBaseHeader; /** All of the tabs that belong to the group. */ _tabs: QueryList<MatTab>; /** The tab index that should be selected after the content has been checked. */ private _indexToSelect; /** Index of the tab that was focused last. */ private _lastFocusedTabIndex; /** 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; /** Whether the tab group should grow to the size of the active tab. */ get dynamicHeight(): boolean; set dynamicHeight(value: BooleanInput); private _dynamicHeight; /** The index of the active tab. */ get selectedIndex(): number | null; set selectedIndex(value: NumberInput); private _selectedIndex; /** Position of the tab header. */ headerPosition: MatTabHeaderPosition; /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */ get animationDuration(): string; set animationDuration(value: NumberInput); private _animationDuration; /** * `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved * accessibility when the tab does not have focusable elements or if it has scrollable content. * The `tabindex` will be removed automatically for inactive tabs. * Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html */ get contentTabIndex(): number | null; set contentTabIndex(value: NumberInput); private _contentTabIndex; /** * Whether pagination should be disabled. This can be used to avoid unnecessary * layout recalculations if it's known that pagination won't be required. */ get disablePagination(): boolean; set disablePagination(value: BooleanInput); private _disablePagination; /** * By default tabs remove their content from the DOM while it's off-screen. * Setting this to `true` will keep it in the DOM which will prevent elements * like iframes and videos from reloading next time it comes back into the view. */ get preserveContent(): boolean; set preserveContent(value: BooleanInput); private _preserveContent; /** Background color of the tab group. */ get backgroundColor(): ThemePalette; set backgroundColor(value: ThemePalette); private _backgroundColor; /** Output to enable support for two-way binding on `[(selectedIndex)]` */ readonly selectedIndexChange: EventEmitter<number>; /** Event emitted when focus has changed within a tab group. */ readonly focusChange: EventEmitter<MatTabChangeEvent>; /** Event emitted when the body animation has completed */ readonly animationDone: EventEmitter<void>; /** Event emitted when the tab selection has changed. */ readonly selectedTabChange: EventEmitter<MatTabChangeEvent>; private _groupId; constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, _animationMode?: string | undefined); /** * 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; ngAfterContentInit(): void; /** Listens to changes in all of the tabs. */ private _subscribeToAllTabChanges; ngOnDestroy(): void; /** Re-aligns the ink bar to the selected tab element. */ realignInkBar(): void; /** * Recalculates the tab group's pagination dimensions. * * 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(): void; /** * Sets focus to a particular tab. * @param index Index of the tab to be focused. */ focusTab(index: number): void; _focusChanged(index: number): void; private _createChangeEvent; /** * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is * on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the * binding to be updated, we need to subscribe to changes in it and trigger change detection * manually. */ private _subscribeToTabLabels; /** Clamps the given index to the bounds of 0 and the tabs length. */ private _clampTabIndex; /** 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: MatTab, tabHeader: MatTabGroupBaseHeader, index: number): void; /** Retrieves the tabindex for the tab. */ _getTabIndex(index: number): number; /** Callback for when the focused state of a tab has changed. */ _tabFocusChanged(focusOrigin: FocusOrigin, index: number): void; static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabGroupBase, [null, null, { optional: true; }, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabGroupBase, never, never, { "dynamicHeight": "dynamicHeight"; "selectedIndex": "selectedIndex"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; "contentTabIndex": "contentTabIndex"; "disablePagination": "disablePagination"; "preserveContent": "preserveContent"; "backgroundColor": "backgroundColor"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, never, never, false, never>; } /** @docs-private */ export declare interface MatTabGroupBaseHeader { _alignInkBarToSelectedTab(): void; updatePagination(): void; focusIndex: number; } /** @docs-private */ declare const _MatTabGroupMixinBase: _Constructor<CanColor> & _AbstractConstructor<CanColor> & _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & { new (_elementRef: ElementRef): { _elementRef: ElementRef; }; }; /** * The header of the tab group which displays a list of all the tabs in the tab group. 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. * @docs-private */ export declare class MatTabHeader extends _MatTabHeaderBase implements AfterContentInit { _items: QueryList<MatTabLabelWrapper>; _tabListContainer: ElementRef; _tabList: ElementRef; _tabListInner: ElementRef; _nextPaginator: ElementRef<HTMLElement>; _previousPaginator: ElementRef<HTMLElement>; _inkBar: MatInkBar; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, dir: Directionality, ngZone: NgZone, platform: Platform, animationMode?: string); ngAfterContentInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration<MatTabHeader, [null, null, null, { optional: true; }, null, null, { optional: true; }]>; static ɵcmp: i0.ɵɵComponentDeclaration<MatTabHeader, "mat-tab-header", never, { "selectedIndex": "selectedIndex"; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["_items"], ["*"], false, never>; } /** * Base class with all of the `MatTabHeader` functionality. * @docs-private */ export declare abstract class _MatTabHeaderBase extends MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy { /** Whether the ripple effect is disabled or not. */ get disableRipple(): boolean; set disableRipple(value: BooleanInput); private _disableRipple; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, dir: Directionality, ngZone: NgZone, platform: Platform, animationMode?: string); protected _itemSelected(event: KeyboardEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabHeaderBase, [null, null, null, { optional: true; }, null, null, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabHeaderBase, never, never, { "disableRipple": "disableRipple"; }, {}, never, never, false, never>; } /** Possible positions for the tab header. */ export declare type MatTabHeaderPosition = 'above' | 'below'; /** Used to flag tab labels for use with the portal directive */ export declare class MatTabLabel extends CdkPortal { _closestTab: any; constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef, _closestTab: any); static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLabel, [null, null, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabLabel, "[mat-tab-label], [matTabLabel]", never, {}, {}, never, never, false, never>; } /** * Used in the `mat-tab-group` view to display tab labels. * @docs-private */ export declare class MatTabLabelWrapper extends _MatTabLabelWrapperBaseWithInkBarItem implements MatInkBarItem { static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLabelWrapper, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabLabelWrapper, "[matTabLabelWrapper]", never, { "disabled": "disabled"; "fitInkBarToContent": "fitInkBarToContent"; }, {}, never, never, false, never>; } /** * Used in the `mat-tab-group` view to display tab labels. * @docs-private */ export declare class _MatTabLabelWrapperBase extends _MatTabLabelWrapperMixinBase implements CanDisable { elementRef: ElementRef; constructor(elementRef: ElementRef); /** Sets focus on the wrapper element */ focus(): void; getOffsetLeft(): number; getOffsetWidth(): number; static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabLabelWrapperBase, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabLabelWrapperBase, never, never, {}, {}, never, never, false, never>; } declare const _MatTabLabelWrapperBaseWithInkBarItem: typeof _MatTabLabelWrapperBase & (new (...args: any[]) => MatInkBarItem); /** @docs-private */ declare const _MatTabLabelWrapperMixinBase: _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & { new (): {}; }; /** * Link inside of a `mat-tab-nav-bar`. */ export declare class MatTabLink extends _MatTabLinkBaseWithInkBarItem implements MatInkBarItem, OnDestroy { private readonly _destroyed; constructor(tabNavBar: MatTabNav, elementRef: ElementRef, globalRippleOptions: RippleGlobalOptions | null, tabIndex: string, focusMonitor: FocusMonitor, animationMode?: string); ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLink, [null, null, { optional: true; }, { attribute: "tabindex"; }, null, { optional: true; }]>; static ɵcmp: i0.ɵɵComponentDeclaration<MatTabLink, "[mat-tab-link], [matTabLink]", ["matTabLink"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "tabIndex": "tabIndex"; "active": "active"; "id": "id"; }, {}, never, ["*"], false, never>; } /** Base class with all of the `MatTabLink` functionality. */ export declare class _MatTabLinkBase extends _MatTabLinkMixinBase implements AfterViewInit, OnDestroy, CanDisable, CanDisableRipple, HasTabIndex, RippleTarget, FocusableOption { private _tabNavBar; /** @docs-private */ elementRef: ElementRef; private _focusMonitor; /** Whether the tab link is active or not. */ protected _isActive: boolean; /** Whether the link is active. */ get active(): boolean; set active(value: BooleanInput); /** * Ripple configuration for ripples that are launched on pointer down. The ripple config * is set to the global ripple options since we don't have any configurable options for * the tab link ripples. * @docs-private */ rippleConfig: RippleConfig & RippleGlobalOptions; /** * Whether ripples are disabled on interaction. * @docs-private */ get rippleDisabled(): boolean; /** Unique id for the tab. */ id: string; constructor(_tabNavBar: _MatTabNavBase, /** @docs-private */ elementRef: ElementRef, globalRippleOptions: RippleGlobalOptions | null, tabIndex: string, _focusMonitor: FocusMonitor, animationMode?: string); /** Focuses the tab link. */ focus(): void; ngAfterViewInit(): void; ngOnDestroy(): void; _handleFocus(): void; _handleKeydown(event: KeyboardEvent): void; _getAriaControls(): string | null; _getAriaSelected(): string | null; _getAriaCurrent(): string | null; _getRole(): string | null; _getTabIndex(): number; static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabLinkBase, [null, null, { optional: true; }, { attribute: "tabindex"; }, null, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabLinkBase, never, never, { "active": "active"; "id": "id"; }, {}, never, never, false, never>; } declare const _MatTabLinkBaseWithInkBarItem: typeof _MatTabLinkBase & (new (...args: any[]) => MatInkBarItem); declare const _MatTabLinkMixinBase: _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & { new (): {}; }; /** @docs-private */ declare const _MatTabMixinBase: _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & { new (): {}; }; /** * Navigation component matching the styles of the tab group header. * Provides anchored navigation with animated ink bar. */ export declare class MatTabNav extends _MatTabNavBase implements AfterContentInit, AfterViewInit { /** Whether the ink bar should fit its width to the size of the tab label content. */ get fitInkBarToContent(): boolean; set fitInkBarToContent(v: BooleanInput); _fitInkBarToContent: BehaviorSubject<boolean>; /** Whether tabs should be stretched to fill the header. */ get stretchTabs(): boolean; set stretchTabs(v: BooleanInput); private _stretchTabs; _items: QueryList<MatTabLink>; _tabListContainer: ElementRef; _tabList: ElementRef; _tabListInner: ElementRef; _nextPaginator: ElementRef<HTMLElement>; _previousPaginator: ElementRef<HTMLElement>; _inkBar: MatInkBar; constructor(elementRef: ElementRef, dir: Directionality, ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, platform: Platform, animationMode?: string, defaultConfig?: MatTabsConfig); ngAfterContentInit(): void; ngAfterViewInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNav, [null, { optional: true; }, null, null, null, null, { optional: true; }, { optional: true; }]>; static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "color": "color"; "fitInkBarToContent": "fitInkBarToContent"; "stretchTabs": "mat-stretch-tabs"; }, {}, ["_items"], ["*"], false, never>; } /** * Base class with all of the `MatTabNav` functionality. * @docs-private */ export declare abstract class _MatTabNavBase extends MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, OnDestroy { /** Query list of all tab links of the tab navigation. */ abstract _items: QueryList<MatPaginatedTabHeaderItem & { active: boolean; id: string; }>; /** Background color of the tab nav. */ get backgroundColor(): ThemePalette; set backgroundColor(value: ThemePalette); private _backgroundColor; /** Whether the ripple effect is disabled or not. */ get disableRipple(): boolean; set disableRipple(value: BooleanInput); private _disableRipple; /** Theme color of the nav bar. */ color: ThemePalette; /** * Associated tab panel controlled by the nav bar. If not provided, then the nav bar * follows the ARIA link / navigation landmark pattern. If provided, it follows the * ARIA tabs design pattern. */ tabPanel?: MatTabNavPanel; constructor(elementRef: ElementRef, dir: Directionality, ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, platform: Platform, animationMode?: string); protected _itemSelected(): void; ngAfterContentInit(): void; /** Notifies the component that the active link has been changed. */ updateActiveLink(): void; _getRole(): string | null; static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabNavBase, [null, { optional: true; }, null, null, null, null, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabNavBase, never, never, { "backgroundColor": "backgroundColor"; "disableRipple": "disableRipple"; "color": "color"; "tabPanel": "tabPanel"; }, {}, never, never, false, never>; } /** * Tab panel component associated with MatTabNav. */ export declare class MatTabNavPanel { /** Unique id for the tab panel. */ id: string; /** Id of the active tab in the nav bar. */ _activeTabId?: string; static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNavPanel, never>; static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNavPanel, "mat-tab-nav-panel", ["matTabNavPanel"], { "id": "id"; }, {}, never, ["*"], false, never>; } /** * Animations used by the Material tabs. * @docs-private */ export declare const matTabsAnimations: { readonly translateTab: AnimationTriggerMetadata; }; /** Object that can be used to configure the default options for the tabs module. */ export declare interface MatTabsConfig { /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */ animationDuration?: string; /** * 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?: boolean; /** * Whether the ink bar should fit its width to the size of the tab label content. * This only applies to the MDC-based tabs. */ fitInkBarToContent?: boolean; /** Whether the tab group should grow to the size of the active tab. */ dynamicHeight?: boolean; /** `tabindex` to be set on the inner element that wraps the tab content. */ contentTabIndex?: number; /** * By default tabs remove their content from the DOM while it's off-screen. * Setting this to `true` will keep it in the DOM which will prevent elements * like iframes and videos from reloading next time it comes back into the view. */ preserveContent?: boolean; } export declare class MatTabsModule { static ɵfac: i0.ɵɵFactoryDeclaration<MatTabsModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<MatTabsModule, [typeof i1.MatTabContent, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatTabGroup, typeof i5.MatTabNav, typeof i5.MatTabNavPanel, typeof i5.MatTabLink, typeof i6.MatTabBody, typeof i6.MatTabBodyPortal, typeof i7.MatTabLabelWrapper, typeof i8.MatTabHeader], [typeof i9.CommonModule, typeof i10.MatCommonModule, typeof i11.PortalModule, typeof i10.MatRippleModule, typeof i12.ObserversModule, typeof i13.A11yModule], [typeof i10.MatCommonModule, typeof i1.MatTabContent, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatTabGroup, typeof i5.MatTabNav, typeof i5.MatTabNavPanel, typeof i5.MatTabLink]>; static ɵinj: i0.ɵɵInjectorDeclaration<MatTabsModule>; } /** * 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 ScrollDirection = 'after' | 'before'; export { }