[6a3a178] | 1 | /**
|
---|
| 2 | * @license
|
---|
| 3 | * Copyright Google LLC All Rights Reserved.
|
---|
| 4 | *
|
---|
| 5 | * Use of this source code is governed by an MIT-style license that can be
|
---|
| 6 | * found in the LICENSE file at https://angular.io/license
|
---|
| 7 | */
|
---|
| 8 | import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
|
---|
| 9 | import { AfterContentChecked, AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
|
---|
| 10 | import { FocusOrigin } from '@angular/cdk/a11y';
|
---|
| 11 | import { CanColor, CanDisableRipple, ThemePalette } from '@angular/material/core';
|
---|
| 12 | import { MatTab } from './tab';
|
---|
| 13 | import { MatTabsConfig } from './tab-config';
|
---|
| 14 | /** A simple change event emitted on focus or selection changes. */
|
---|
| 15 | import * as ɵngcc0 from '@angular/core';
|
---|
| 16 | export declare class MatTabChangeEvent {
|
---|
| 17 | /** Index of the currently-selected tab. */
|
---|
| 18 | index: number;
|
---|
| 19 | /** Reference to the currently-selected tab. */
|
---|
| 20 | tab: MatTab;
|
---|
| 21 | }
|
---|
| 22 | /** Possible positions for the tab header. */
|
---|
| 23 | export declare type MatTabHeaderPosition = 'above' | 'below';
|
---|
| 24 | /** @docs-private */
|
---|
| 25 | declare const _MatTabGroupMixinBase: import("@angular/material/core/common-behaviors/constructor").Constructor<CanColor> & import("@angular/material/core/common-behaviors/constructor").AbstractConstructor<CanColor> & import("@angular/material/core/common-behaviors/constructor").Constructor<CanDisableRipple> & import("@angular/material/core/common-behaviors/constructor").AbstractConstructor<CanDisableRipple> & {
|
---|
| 26 | new (_elementRef: ElementRef): {
|
---|
| 27 | _elementRef: ElementRef;
|
---|
| 28 | };
|
---|
| 29 | };
|
---|
| 30 | interface MatTabGroupBaseHeader {
|
---|
| 31 | _alignInkBarToSelectedTab: () => void;
|
---|
| 32 | focusIndex: number;
|
---|
| 33 | }
|
---|
| 34 | /**
|
---|
| 35 | * Base class with all of the `MatTabGroupBase` functionality.
|
---|
| 36 | * @docs-private
|
---|
| 37 | */
|
---|
| 38 | export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements AfterContentInit, AfterContentChecked, OnDestroy, CanColor, CanDisableRipple {
|
---|
| 39 | protected _changeDetectorRef: ChangeDetectorRef;
|
---|
| 40 | _animationMode?: string | undefined;
|
---|
| 41 | /**
|
---|
| 42 | * All tabs inside the tab group. This includes tabs that belong to groups that are nested
|
---|
| 43 | * inside the current one. We filter out only the tabs that belong to this group in `_tabs`.
|
---|
| 44 | */
|
---|
| 45 | abstract _allTabs: QueryList<MatTab>;
|
---|
| 46 | abstract _tabBodyWrapper: ElementRef;
|
---|
| 47 | abstract _tabHeader: MatTabGroupBaseHeader;
|
---|
| 48 | /** All of the tabs that belong to the group. */
|
---|
| 49 | _tabs: QueryList<MatTab>;
|
---|
| 50 | /** The tab index that should be selected after the content has been checked. */
|
---|
| 51 | private _indexToSelect;
|
---|
| 52 | /** Snapshot of the height of the tab body wrapper before another tab is activated. */
|
---|
| 53 | private _tabBodyWrapperHeight;
|
---|
| 54 | /** Subscription to tabs being added/removed. */
|
---|
| 55 | private _tabsSubscription;
|
---|
| 56 | /** Subscription to changes in the tab labels. */
|
---|
| 57 | private _tabLabelSubscription;
|
---|
| 58 | /** Whether the tab group should grow to the size of the active tab. */
|
---|
| 59 | get dynamicHeight(): boolean;
|
---|
| 60 | set dynamicHeight(value: boolean);
|
---|
| 61 | private _dynamicHeight;
|
---|
| 62 | /** The index of the active tab. */
|
---|
| 63 | get selectedIndex(): number | null;
|
---|
| 64 | set selectedIndex(value: number | null);
|
---|
| 65 | private _selectedIndex;
|
---|
| 66 | /** Position of the tab header. */
|
---|
| 67 | headerPosition: MatTabHeaderPosition;
|
---|
| 68 | /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
|
---|
| 69 | get animationDuration(): string;
|
---|
| 70 | set animationDuration(value: string);
|
---|
| 71 | private _animationDuration;
|
---|
| 72 | /**
|
---|
| 73 | * `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
|
---|
| 74 | * accessibility when the tab does not have focusable elements or if it has scrollable content.
|
---|
| 75 | * The `tabindex` will be removed automatically for inactive tabs.
|
---|
| 76 | * Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html
|
---|
| 77 | */
|
---|
| 78 | get contentTabIndex(): number | null;
|
---|
| 79 | set contentTabIndex(value: number | null);
|
---|
| 80 | private _contentTabIndex;
|
---|
| 81 | /**
|
---|
| 82 | * Whether pagination should be disabled. This can be used to avoid unnecessary
|
---|
| 83 | * layout recalculations if it's known that pagination won't be required.
|
---|
| 84 | */
|
---|
| 85 | disablePagination: boolean;
|
---|
| 86 | /** Background color of the tab group. */
|
---|
| 87 | get backgroundColor(): ThemePalette;
|
---|
| 88 | set backgroundColor(value: ThemePalette);
|
---|
| 89 | private _backgroundColor;
|
---|
| 90 | /** Output to enable support for two-way binding on `[(selectedIndex)]` */
|
---|
| 91 | readonly selectedIndexChange: EventEmitter<number>;
|
---|
| 92 | /** Event emitted when focus has changed within a tab group. */
|
---|
| 93 | readonly focusChange: EventEmitter<MatTabChangeEvent>;
|
---|
| 94 | /** Event emitted when the body animation has completed */
|
---|
| 95 | readonly animationDone: EventEmitter<void>;
|
---|
| 96 | /** Event emitted when the tab selection has changed. */
|
---|
| 97 | readonly selectedTabChange: EventEmitter<MatTabChangeEvent>;
|
---|
| 98 | private _groupId;
|
---|
| 99 | constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, _animationMode?: string | undefined);
|
---|
| 100 | /**
|
---|
| 101 | * After the content is checked, this component knows what tabs have been defined
|
---|
| 102 | * and what the selected index should be. This is where we can know exactly what position
|
---|
| 103 | * each tab should be in according to the new selected index, and additionally we know how
|
---|
| 104 | * a new selected tab should transition in (from the left or right).
|
---|
| 105 | */
|
---|
| 106 | ngAfterContentChecked(): void;
|
---|
| 107 | ngAfterContentInit(): void;
|
---|
| 108 | /** Listens to changes in all of the tabs. */
|
---|
| 109 | private _subscribeToAllTabChanges;
|
---|
| 110 | ngOnDestroy(): void;
|
---|
| 111 | /** Re-aligns the ink bar to the selected tab element. */
|
---|
| 112 | realignInkBar(): void;
|
---|
| 113 | /**
|
---|
| 114 | * Sets focus to a particular tab.
|
---|
| 115 | * @param index Index of the tab to be focused.
|
---|
| 116 | */
|
---|
| 117 | focusTab(index: number): void;
|
---|
| 118 | _focusChanged(index: number): void;
|
---|
| 119 | private _createChangeEvent;
|
---|
| 120 | /**
|
---|
| 121 | * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
|
---|
| 122 | * on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the
|
---|
| 123 | * binding to be updated, we need to subscribe to changes in it and trigger change detection
|
---|
| 124 | * manually.
|
---|
| 125 | */
|
---|
| 126 | private _subscribeToTabLabels;
|
---|
| 127 | /** Clamps the given index to the bounds of 0 and the tabs length. */
|
---|
| 128 | private _clampTabIndex;
|
---|
| 129 | /** Returns a unique id for each tab label element */
|
---|
| 130 | _getTabLabelId(i: number): string;
|
---|
| 131 | /** Returns a unique id for each tab content element */
|
---|
| 132 | _getTabContentId(i: number): string;
|
---|
| 133 | /**
|
---|
| 134 | * Sets the height of the body wrapper to the height of the activating tab if dynamic
|
---|
| 135 | * height property is true.
|
---|
| 136 | */
|
---|
| 137 | _setTabBodyWrapperHeight(tabHeight: number): void;
|
---|
| 138 | /** Removes the height of the tab body wrapper. */
|
---|
| 139 | _removeTabBodyWrapperHeight(): void;
|
---|
| 140 | /** Handle click events, setting new selected index if appropriate. */
|
---|
| 141 | _handleClick(tab: MatTab, tabHeader: MatTabGroupBaseHeader, index: number): void;
|
---|
| 142 | /** Retrieves the tabindex for the tab. */
|
---|
| 143 | _getTabIndex(tab: MatTab, idx: number): number | null;
|
---|
| 144 | /** Callback for when the focused state of a tab has changed. */
|
---|
| 145 | _tabFocusChanged(focusOrigin: FocusOrigin, index: number): void;
|
---|
| 146 | static ngAcceptInputType_dynamicHeight: BooleanInput;
|
---|
| 147 | static ngAcceptInputType_animationDuration: NumberInput;
|
---|
| 148 | static ngAcceptInputType_selectedIndex: NumberInput;
|
---|
| 149 | static ngAcceptInputType_disableRipple: BooleanInput;
|
---|
| 150 | static ngAcceptInputType_contentTabIndex: NumberInput;
|
---|
| 151 | static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<_MatTabGroupBase, [null, null, { optional: true; }, { optional: true; }]>;
|
---|
| 152 | static ɵdir: ɵngcc0.ɵɵDirectiveDeclaration<_MatTabGroupBase, never, never, { "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; "disablePagination": "disablePagination"; "dynamicHeight": "dynamicHeight"; "contentTabIndex": "contentTabIndex"; "selectedIndex": "selectedIndex"; "backgroundColor": "backgroundColor"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, never>;
|
---|
| 153 | }
|
---|
| 154 | /**
|
---|
| 155 | * Material design tab-group component. Supports basic tab pairs (label + content) and includes
|
---|
| 156 | * animated ink-bar, keyboard navigation, and screen reader.
|
---|
| 157 | * See: https://material.io/design/components/tabs.html
|
---|
| 158 | */
|
---|
| 159 | export declare class MatTabGroup extends _MatTabGroupBase {
|
---|
| 160 | _allTabs: QueryList<MatTab>;
|
---|
| 161 | _tabBodyWrapper: ElementRef;
|
---|
| 162 | _tabHeader: MatTabGroupBaseHeader;
|
---|
| 163 | constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, animationMode?: string);
|
---|
| 164 | static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<MatTabGroup, [null, null, { optional: true; }, { optional: true; }]>;
|
---|
| 165 | static ɵcmp: ɵngcc0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": "color"; "disableRipple": "disableRipple"; }, {}, ["_allTabs"], never>;
|
---|
| 166 | }
|
---|
| 167 | export {};
|
---|
| 168 |
|
---|
| 169 | //# sourceMappingURL=tab-group.d.ts.map |
---|