index.d.ts 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, TemplateRef, OnInit, OnChanges, OnDestroy, SimpleChanges, QueryList, ElementRef, AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
  3. import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
  4. import { CdkPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
  5. import { Subject, BehaviorSubject } from 'rxjs';
  6. import { FocusKeyManager, FocusableOption, FocusOrigin } from '@angular/cdk/a11y';
  7. import { Direction } from '@angular/cdk/bidi';
  8. import { T as ThemePalette } from '../palette.d-BSSFKjO6.js';
  9. import { b as RippleTarget, f as RippleConfig, R as RippleGlobalOptions } from '../ripple.d-BxTUZJt7.js';
  10. import '@angular/cdk/platform';
  11. /**
  12. * Injection token that can be used to reference instances of `MatTabContent`. It serves as
  13. * alternative token to the actual `MatTabContent` class which could cause unnecessary
  14. * retention of the class and its directive metadata.
  15. */
  16. declare const MAT_TAB_CONTENT: InjectionToken<MatTabContent>;
  17. /** Decorates the `ng-template` tags and reads out the template from it. */
  18. declare class MatTabContent {
  19. template: TemplateRef<any>;
  20. constructor(...args: unknown[]);
  21. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabContent, never>;
  22. static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabContent, "[matTabContent]", never, {}, {}, never, never, true, never>;
  23. }
  24. /**
  25. * Injection token that can be used to reference instances of `MatTabLabel`. It serves as
  26. * alternative token to the actual `MatTabLabel` class which could cause unnecessary
  27. * retention of the class and its directive metadata.
  28. */
  29. declare const MAT_TAB_LABEL: InjectionToken<MatTabLabel>;
  30. /**
  31. * Used to provide a tab label to a tab without causing a circular dependency.
  32. * @docs-private
  33. */
  34. declare const MAT_TAB: InjectionToken<any>;
  35. /** Used to flag tab labels for use with the portal directive */
  36. declare class MatTabLabel extends CdkPortal {
  37. _closestTab: any;
  38. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLabel, never>;
  39. static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabLabel, "[mat-tab-label], [matTabLabel]", never, {}, {}, never, never, true, never>;
  40. }
  41. /**
  42. * Used to provide a tab group to a tab without causing a circular dependency.
  43. * @docs-private
  44. */
  45. declare const MAT_TAB_GROUP: InjectionToken<any>;
  46. declare class MatTab implements OnInit, OnChanges, OnDestroy {
  47. private _viewContainerRef;
  48. _closestTabGroup: any;
  49. /** whether the tab is disabled. */
  50. disabled: boolean;
  51. /** Content for the tab label given by `<ng-template mat-tab-label>`. */
  52. get templateLabel(): MatTabLabel;
  53. set templateLabel(value: MatTabLabel);
  54. private _templateLabel;
  55. /**
  56. * Template provided in the tab content that will be used if present, used to enable lazy-loading
  57. */
  58. private _explicitContent;
  59. /** Template inside the MatTab view that contains an `<ng-content>`. */
  60. _implicitContent: TemplateRef<any>;
  61. /** Plain text label for the tab, used when there is no template label. */
  62. textLabel: string;
  63. /** Aria label for the tab. */
  64. ariaLabel: string;
  65. /**
  66. * Reference to the element that the tab is labelled by.
  67. * Will be cleared if `aria-label` is set at the same time.
  68. */
  69. ariaLabelledby: string;
  70. /** Classes to be passed to the tab label inside the mat-tab-header container. */
  71. labelClass: string | string[];
  72. /** Classes to be passed to the tab mat-tab-body container. */
  73. bodyClass: string | string[];
  74. /**
  75. * Custom ID for the tab, overriding the auto-generated one by Material.
  76. * Note that when using this input, it's your responsibility to ensure that the ID is unique.
  77. */
  78. id: string | null;
  79. /** Portal that will be the hosted content of the tab */
  80. private _contentPortal;
  81. /** @docs-private */
  82. get content(): TemplatePortal | null;
  83. /** Emits whenever the internal state of the tab changes. */
  84. readonly _stateChanges: Subject<void>;
  85. /**
  86. * The relatively indexed position where 0 represents the center, negative is left, and positive
  87. * represents the right.
  88. */
  89. position: number | null;
  90. /**
  91. * The initial relatively index origin of the tab if it was created and selected after there
  92. * was already a selected tab. Provides context of what position the tab should originate from.
  93. */
  94. origin: number | null;
  95. /**
  96. * Whether the tab is currently active.
  97. */
  98. isActive: boolean;
  99. constructor(...args: unknown[]);
  100. ngOnChanges(changes: SimpleChanges): void;
  101. ngOnDestroy(): void;
  102. ngOnInit(): void;
  103. /**
  104. * This has been extracted to a util because of TS 4 and VE.
  105. * View Engine doesn't support property rename inheritance.
  106. * TS 4.0 doesn't allow properties to override accessors or vice-versa.
  107. * @docs-private
  108. */
  109. private _setTemplateLabelInput;
  110. static ɵfac: i0.ɵɵFactoryDeclaration<MatTab, never>;
  111. static ɵcmp: i0.ɵɵComponentDeclaration<MatTab, "mat-tab", ["matTab"], { "disabled": { "alias": "disabled"; "required": false; }; "textLabel": { "alias": "label"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "labelClass": { "alias": "labelClass"; "required": false; }; "bodyClass": { "alias": "bodyClass"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, ["templateLabel", "_explicitContent"], ["*"], true, never>;
  112. static ngAcceptInputType_disabled: unknown;
  113. }
  114. /**
  115. * Item inside a tab header relative to which the ink bar can be aligned.
  116. * @docs-private
  117. */
  118. interface MatInkBarItem extends OnInit, OnDestroy {
  119. elementRef: ElementRef<HTMLElement>;
  120. activateInkBar(previousIndicatorClientRect?: DOMRect): void;
  121. deactivateInkBar(): void;
  122. fitInkBarToContent: boolean;
  123. }
  124. /**
  125. * Abstraction around the MDC tab indicator that acts as the tab header's ink bar.
  126. * @docs-private
  127. */
  128. declare class MatInkBar {
  129. private _items;
  130. /** Item to which the ink bar is aligned currently. */
  131. private _currentItem;
  132. constructor(_items: QueryList<MatInkBarItem>);
  133. /** Hides the ink bar. */
  134. hide(): void;
  135. /** Aligns the ink bar to a DOM node. */
  136. alignToElement(element: HTMLElement): void;
  137. }
  138. declare abstract class InkBarItem implements OnInit, OnDestroy {
  139. private _elementRef;
  140. private _inkBarElement;
  141. private _inkBarContentElement;
  142. private _fitToContent;
  143. /** Whether the ink bar should fit to the entire tab or just its content. */
  144. get fitInkBarToContent(): boolean;
  145. set fitInkBarToContent(newValue: boolean);
  146. /** Aligns the ink bar to the current item. */
  147. activateInkBar(previousIndicatorClientRect?: DOMRect): void;
  148. /** Removes the ink bar from the current item. */
  149. deactivateInkBar(): void;
  150. /** Initializes the foundation. */
  151. ngOnInit(): void;
  152. /** Destroys the foundation. */
  153. ngOnDestroy(): void;
  154. /** Creates and appends the ink bar element. */
  155. private _createInkBarElement;
  156. /**
  157. * Appends the ink bar to the tab host element or content, depending on whether
  158. * the ink bar should fit to content.
  159. */
  160. private _appendInkBarElement;
  161. static ɵfac: i0.ɵɵFactoryDeclaration<InkBarItem, never>;
  162. static ɵdir: i0.ɵɵDirectiveDeclaration<InkBarItem, never, never, { "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; }, {}, never, never, true, never>;
  163. static ngAcceptInputType_fitInkBarToContent: unknown;
  164. }
  165. /**
  166. * Interface for a MatInkBar positioner method, defining the positioning and width of the ink
  167. * bar in a set of tabs.
  168. */
  169. interface _MatInkBarPositioner {
  170. (element: HTMLElement): {
  171. left: string;
  172. width: string;
  173. };
  174. }
  175. /**
  176. * The default positioner function for the MatInkBar.
  177. * @docs-private
  178. * @deprecated No longer used, will be removed.
  179. * @breaking-change 21.0.0
  180. */
  181. declare function _MAT_INK_BAR_POSITIONER_FACTORY(): _MatInkBarPositioner;
  182. /** Injection token for the MatInkBar's Positioner. */
  183. declare const _MAT_INK_BAR_POSITIONER: InjectionToken<_MatInkBarPositioner>;
  184. /**
  185. * Used in the `mat-tab-group` view to display tab labels.
  186. * @docs-private
  187. */
  188. declare class MatTabLabelWrapper extends InkBarItem {
  189. elementRef: ElementRef<any>;
  190. /** Whether the tab is disabled. */
  191. disabled: boolean;
  192. /** Sets focus on the wrapper element */
  193. focus(): void;
  194. getOffsetLeft(): number;
  195. getOffsetWidth(): number;
  196. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLabelWrapper, never>;
  197. static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabLabelWrapper, "[matTabLabelWrapper]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
  198. static ngAcceptInputType_disabled: unknown;
  199. }
  200. /**
  201. * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
  202. * will scroll the header towards the end of the tabs list and 'before' will scroll towards the
  203. * beginning of the list.
  204. */
  205. type ScrollDirection = 'after' | 'before';
  206. /** Item inside a paginated tab header. */
  207. type MatPaginatedTabHeaderItem = FocusableOption & {
  208. elementRef: ElementRef;
  209. };
  210. /**
  211. * Base class for a tab header that supported pagination.
  212. * @docs-private
  213. */
  214. declare abstract class MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
  215. protected _elementRef: ElementRef<HTMLElement>;
  216. protected _changeDetectorRef: ChangeDetectorRef;
  217. private _viewportRuler;
  218. private _dir;
  219. private _ngZone;
  220. private _platform;
  221. private _sharedResizeObserver;
  222. private _injector;
  223. private _renderer;
  224. _animationMode: "NoopAnimations" | "BrowserAnimations" | null;
  225. private _eventCleanups;
  226. abstract _items: QueryList<MatPaginatedTabHeaderItem>;
  227. abstract _inkBar: {
  228. hide: () => void;
  229. alignToElement: (element: HTMLElement) => void;
  230. };
  231. abstract _tabListContainer: ElementRef<HTMLElement>;
  232. abstract _tabList: ElementRef<HTMLElement>;
  233. abstract _tabListInner: ElementRef<HTMLElement>;
  234. abstract _nextPaginator: ElementRef<HTMLElement>;
  235. abstract _previousPaginator: ElementRef<HTMLElement>;
  236. /** The distance in pixels that the tab labels should be translated to the left. */
  237. private _scrollDistance;
  238. /** Whether the header should scroll to the selected index after the view has been checked. */
  239. private _selectedIndexChanged;
  240. /** Emits when the component is destroyed. */
  241. protected readonly _destroyed: Subject<void>;
  242. /** Whether the controls for pagination should be displayed */
  243. _showPaginationControls: boolean;
  244. /** Whether the tab list can be scrolled more towards the end of the tab label list. */
  245. _disableScrollAfter: boolean;
  246. /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
  247. _disableScrollBefore: boolean;
  248. /**
  249. * The number of tab labels that are displayed on the header. When this changes, the header
  250. * should re-evaluate the scroll position.
  251. */
  252. private _tabLabelCount;
  253. /** Whether the scroll distance has changed and should be applied after the view is checked. */
  254. private _scrollDistanceChanged;
  255. /** Used to manage focus between the tabs. */
  256. protected _keyManager: FocusKeyManager<MatPaginatedTabHeaderItem> | undefined;
  257. /** Cached text content of the header. */
  258. private _currentTextContent;
  259. /** Stream that will stop the automated scrolling. */
  260. private _stopScrolling;
  261. /**
  262. * Whether pagination should be disabled. This can be used to avoid unnecessary
  263. * layout recalculations if it's known that pagination won't be required.
  264. */
  265. disablePagination: boolean;
  266. /** The index of the active tab. */
  267. get selectedIndex(): number;
  268. set selectedIndex(v: number);
  269. private _selectedIndex;
  270. /** Event emitted when the option is selected. */
  271. readonly selectFocusedIndex: EventEmitter<number>;
  272. /** Event emitted when a label is focused. */
  273. readonly indexFocused: EventEmitter<number>;
  274. constructor(...args: unknown[]);
  275. /** Called when the user has selected an item via the keyboard. */
  276. protected abstract _itemSelected(event: KeyboardEvent): void;
  277. ngAfterViewInit(): void;
  278. ngAfterContentInit(): void;
  279. /** Sends any changes that could affect the layout of the items. */
  280. private _itemsResized;
  281. ngAfterContentChecked(): void;
  282. ngOnDestroy(): void;
  283. /** Handles keyboard events on the header. */
  284. _handleKeydown(event: KeyboardEvent): void;
  285. /**
  286. * Callback for when the MutationObserver detects that the content has changed.
  287. */
  288. _onContentChanges(): void;
  289. /**
  290. * Updates the view whether pagination should be enabled or not.
  291. *
  292. * WARNING: Calling this method can be very costly in terms of performance. It should be called
  293. * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
  294. * page.
  295. */
  296. updatePagination(): void;
  297. /** Tracks which element has focus; used for keyboard navigation */
  298. get focusIndex(): number;
  299. /** When the focus index is set, we must manually send focus to the correct label */
  300. set focusIndex(value: number);
  301. /**
  302. * Determines if an index is valid. If the tabs are not ready yet, we assume that the user is
  303. * providing a valid index and return true.
  304. */
  305. _isValidIndex(index: number): boolean;
  306. /**
  307. * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
  308. * scrolling is enabled.
  309. */
  310. _setTabFocus(tabIndex: number): void;
  311. /** The layout direction of the containing app. */
  312. _getLayoutDirection(): Direction;
  313. /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
  314. _updateTabScrollPosition(): void;
  315. /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
  316. get scrollDistance(): number;
  317. set scrollDistance(value: number);
  318. /**
  319. * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
  320. * the end of the list, respectively). The distance to scroll is computed to be a third of the
  321. * length of the tab list view window.
  322. *
  323. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  324. * should be called sparingly.
  325. */
  326. _scrollHeader(direction: ScrollDirection): {
  327. maxScrollDistance: number;
  328. distance: number;
  329. };
  330. /** Handles click events on the pagination arrows. */
  331. _handlePaginatorClick(direction: ScrollDirection): void;
  332. /**
  333. * Moves the tab list such that the desired tab label (marked by index) is moved into view.
  334. *
  335. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  336. * should be called sparingly.
  337. */
  338. _scrollToLabel(labelIndex: number): void;
  339. /**
  340. * Evaluate whether the pagination controls should be displayed. If the scroll width of the
  341. * tab list is wider than the size of the header container, then the pagination controls should
  342. * be shown.
  343. *
  344. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  345. * should be called sparingly.
  346. */
  347. _checkPaginationEnabled(): void;
  348. /**
  349. * Evaluate whether the before and after controls should be enabled or disabled.
  350. * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
  351. * before button. If the header is at the end of the list (scroll distance is equal to the
  352. * maximum distance we can scroll), then disable the after button.
  353. *
  354. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  355. * should be called sparingly.
  356. */
  357. _checkScrollingControls(): void;
  358. /**
  359. * Determines what is the maximum length in pixels that can be set for the scroll distance. This
  360. * is equal to the difference in width between the tab list container and tab header container.
  361. *
  362. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  363. * should be called sparingly.
  364. */
  365. _getMaxScrollDistance(): number;
  366. /** Tells the ink-bar to align itself to the current label wrapper */
  367. _alignInkBarToSelectedTab(): void;
  368. /** Stops the currently-running paginator interval. */
  369. _stopInterval(): void;
  370. /**
  371. * Handles the user pressing down on one of the paginators.
  372. * Starts scrolling the header after a certain amount of time.
  373. * @param direction In which direction the paginator should be scrolled.
  374. */
  375. _handlePaginatorPress(direction: ScrollDirection, mouseEvent?: MouseEvent): void;
  376. /**
  377. * Scrolls the header to a given position.
  378. * @param position Position to which to scroll.
  379. * @returns Information on the current scroll distance and the maximum.
  380. */
  381. private _scrollTo;
  382. static ɵfac: i0.ɵɵFactoryDeclaration<MatPaginatedTabHeader, never>;
  383. static ɵdir: i0.ɵɵDirectiveDeclaration<MatPaginatedTabHeader, never, never, { "disablePagination": { "alias": "disablePagination"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, never, never, true, never>;
  384. static ngAcceptInputType_disablePagination: unknown;
  385. static ngAcceptInputType_selectedIndex: unknown;
  386. }
  387. /**
  388. * The header of the tab group which displays a list of all the tabs in the tab group. Includes
  389. * an ink bar that follows the currently selected tab. When the tabs list's width exceeds the
  390. * width of the header container, then arrows will be displayed to allow the user to scroll
  391. * left and right across the header.
  392. * @docs-private
  393. */
  394. declare class MatTabHeader extends MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
  395. _items: QueryList<MatTabLabelWrapper>;
  396. _tabListContainer: ElementRef;
  397. _tabList: ElementRef;
  398. _tabListInner: ElementRef;
  399. _nextPaginator: ElementRef<HTMLElement>;
  400. _previousPaginator: ElementRef<HTMLElement>;
  401. _inkBar: MatInkBar;
  402. /** Aria label of the header. */
  403. ariaLabel: string;
  404. /** Sets the `aria-labelledby` of the header. */
  405. ariaLabelledby: string;
  406. /** Whether the ripple effect is disabled or not. */
  407. disableRipple: boolean;
  408. ngAfterContentInit(): void;
  409. protected _itemSelected(event: KeyboardEvent): void;
  410. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabHeader, never>;
  411. static ɵcmp: i0.ɵɵComponentDeclaration<MatTabHeader, "mat-tab-header", never, { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, ["_items"], ["*"], true, never>;
  412. static ngAcceptInputType_disableRipple: unknown;
  413. }
  414. /**
  415. * The portal host directive for the contents of the tab.
  416. * @docs-private
  417. */
  418. declare class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
  419. private _host;
  420. /** Subscription to events for when the tab body begins centering. */
  421. private _centeringSub;
  422. /** Subscription to events for when the tab body finishes leaving from center position. */
  423. private _leavingSub;
  424. constructor(...args: unknown[]);
  425. /** Set initial visibility or set up subscription for changing visibility. */
  426. ngOnInit(): void;
  427. /** Clean up centering subscription. */
  428. ngOnDestroy(): void;
  429. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabBodyPortal, never>;
  430. static ɵdir: i0.ɵɵDirectiveDeclaration<MatTabBodyPortal, "[matTabBodyHost]", never, {}, {}, never, never, true, never>;
  431. }
  432. /**
  433. * These position states are used internally as animation states for the tab body. Setting the
  434. * position state to left, right, or center will transition the tab body from its current
  435. * position to its respective state. If there is not current position (void, in the case of a new
  436. * tab body), then there will be no transition animation to its state.
  437. *
  438. * In the case of a new tab body that should immediately be centered with an animating transition,
  439. * then left-origin-center or right-origin-center can be used, which will use left or right as its
  440. * pseudo-prior state.
  441. *
  442. * @deprecated Will stop being exported.
  443. * @breaking-change 21.0.0
  444. */
  445. type MatTabBodyPositionState = 'left' | 'center' | 'right';
  446. /**
  447. * The origin state is an internally used state that is set on a new tab body indicating if it
  448. * began to the left or right of the prior selected index. For example, if the selected index was
  449. * set to 1, and a new tab is created and selected at index 2, then the tab body would have an
  450. * origin of right because its index was greater than the prior selected index.
  451. *
  452. * @deprecated No longer being used. Will be removed.
  453. * @breaking-change 21.0.0
  454. */
  455. type MatTabBodyOriginState = 'left' | 'right';
  456. /**
  457. * Wrapper for the contents of a tab.
  458. * @docs-private
  459. */
  460. declare class MatTabBody implements OnInit, OnDestroy {
  461. private _elementRef;
  462. private _dir;
  463. private _ngZone;
  464. private _injector;
  465. private _renderer;
  466. private _animationsModule;
  467. private _eventCleanups?;
  468. private _initialized;
  469. private _fallbackTimer;
  470. /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
  471. private _positionIndex;
  472. /** Subscription to the directionality change observable. */
  473. private _dirChangeSubscription;
  474. /** Current position of the body within the tab group. */
  475. _position: MatTabBodyPositionState;
  476. /** Previous position of the body. */
  477. protected _previousPosition: MatTabBodyPositionState | undefined;
  478. /** Event emitted when the tab begins to animate towards the center as the active tab. */
  479. readonly _onCentering: EventEmitter<number>;
  480. /** Event emitted before the centering of the tab begins. */
  481. readonly _beforeCentering: EventEmitter<boolean>;
  482. /** Event emitted before the centering of the tab begins. */
  483. readonly _afterLeavingCenter: EventEmitter<void>;
  484. /** Event emitted when the tab completes its animation towards the center. */
  485. readonly _onCentered: EventEmitter<void>;
  486. /** The portal host inside of this container into which the tab body content will be loaded. */
  487. _portalHost: MatTabBodyPortal;
  488. /** Element in which the content is rendered. */
  489. _contentElement: ElementRef<HTMLElement> | undefined;
  490. /** The tab body content to display. */
  491. _content: TemplatePortal;
  492. /** Duration for the tab's animation. */
  493. animationDuration: string;
  494. /** Whether the tab's content should be kept in the DOM while it's off-screen. */
  495. preserveContent: boolean;
  496. /** The shifted index position of the tab body, where zero represents the active center tab. */
  497. set position(position: number);
  498. constructor(...args: unknown[]);
  499. ngOnInit(): void;
  500. ngOnDestroy(): void;
  501. /** Sets up the transition events. */
  502. private _bindTransitionEvents;
  503. /** Called when a transition has started. */
  504. private _transitionStarted;
  505. /** Called when a transition is done. */
  506. private _transitionDone;
  507. /** Sets the active styling on the tab body based on its current position. */
  508. _setActiveClass(isActive: boolean): void;
  509. /** The text direction of the containing app. */
  510. _getLayoutDirection(): Direction;
  511. /** Whether the provided position state is considered center, regardless of origin. */
  512. _isCenterPosition(): boolean;
  513. /** Computes the position state that will be used for the tab-body animation trigger. */
  514. private _computePositionAnimationState;
  515. /** Simulates the body's transition events in an environment where they might not fire. */
  516. private _simulateTransitionEvents;
  517. /** Whether animations are disabled for the tab group. */
  518. private _animationsDisabled;
  519. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabBody, never>;
  520. static ɵcmp: i0.ɵɵComponentDeclaration<MatTabBody, "mat-tab-body", never, { "_content": { "alias": "content"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "preserveContent": { "alias": "preserveContent"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, { "_onCentering": "_onCentering"; "_beforeCentering": "_beforeCentering"; "_onCentered": "_onCentered"; }, never, never, true, never>;
  521. }
  522. /** @docs-private */
  523. interface MatTabGroupBaseHeader {
  524. _alignInkBarToSelectedTab(): void;
  525. updatePagination(): void;
  526. focusIndex: number;
  527. }
  528. /** Possible positions for the tab header. */
  529. type MatTabHeaderPosition = 'above' | 'below';
  530. /**
  531. * Material design tab-group component. Supports basic tab pairs (label + content) and includes
  532. * animated ink-bar, keyboard navigation, and screen reader.
  533. * See: https://material.io/design/components/tabs.html
  534. */
  535. declare class MatTabGroup implements AfterViewInit, AfterContentInit, AfterContentChecked, OnDestroy {
  536. readonly _elementRef: ElementRef<any>;
  537. private _changeDetectorRef;
  538. private _ngZone;
  539. private _tabsSubscription;
  540. private _tabLabelSubscription;
  541. private _tabBodySubscription;
  542. private _diAnimationsDisabled;
  543. /**
  544. * All tabs inside the tab group. This includes tabs that belong to groups that are nested
  545. * inside the current one. We filter out only the tabs that belong to this group in `_tabs`.
  546. */
  547. _allTabs: QueryList<MatTab>;
  548. _tabBodies: QueryList<MatTabBody> | undefined;
  549. _tabBodyWrapper: ElementRef;
  550. _tabHeader: MatTabHeader;
  551. /** All of the tabs that belong to the group. */
  552. _tabs: QueryList<MatTab>;
  553. /** The tab index that should be selected after the content has been checked. */
  554. private _indexToSelect;
  555. /** Index of the tab that was focused last. */
  556. private _lastFocusedTabIndex;
  557. /** Snapshot of the height of the tab body wrapper before another tab is activated. */
  558. private _tabBodyWrapperHeight;
  559. /**
  560. * Theme color of the tab group. This API is supported in M2 themes only, it
  561. * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
  562. *
  563. * For information on applying color variants in M3, see
  564. * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
  565. */
  566. color: ThemePalette;
  567. /** Whether the ink bar should fit its width to the size of the tab label content. */
  568. get fitInkBarToContent(): boolean;
  569. set fitInkBarToContent(value: boolean);
  570. private _fitInkBarToContent;
  571. /** Whether tabs should be stretched to fill the header. */
  572. stretchTabs: boolean;
  573. /** Alignment for tabs label. */
  574. alignTabs: string | null;
  575. /** Whether the tab group should grow to the size of the active tab. */
  576. dynamicHeight: boolean;
  577. /** The index of the active tab. */
  578. get selectedIndex(): number | null;
  579. set selectedIndex(value: number);
  580. private _selectedIndex;
  581. /** Position of the tab header. */
  582. headerPosition: MatTabHeaderPosition;
  583. /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
  584. get animationDuration(): string;
  585. set animationDuration(value: string | number);
  586. private _animationDuration;
  587. /**
  588. * `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
  589. * accessibility when the tab does not have focusable elements or if it has scrollable content.
  590. * The `tabindex` will be removed automatically for inactive tabs.
  591. * Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html
  592. */
  593. get contentTabIndex(): number | null;
  594. set contentTabIndex(value: number);
  595. private _contentTabIndex;
  596. /**
  597. * Whether pagination should be disabled. This can be used to avoid unnecessary
  598. * layout recalculations if it's known that pagination won't be required.
  599. */
  600. disablePagination: boolean;
  601. /** Whether ripples in the tab group are disabled. */
  602. disableRipple: boolean;
  603. /**
  604. * By default tabs remove their content from the DOM while it's off-screen.
  605. * Setting this to `true` will keep it in the DOM which will prevent elements
  606. * like iframes and videos from reloading next time it comes back into the view.
  607. */
  608. preserveContent: boolean;
  609. /**
  610. * Theme color of the background of the tab group. This API is supported in M2 themes only, it
  611. * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
  612. *
  613. * For information on applying color variants in M3, see
  614. * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
  615. *
  616. * @deprecated The background color should be customized through Sass theming APIs.
  617. * @breaking-change 20.0.0 Remove this input
  618. */
  619. get backgroundColor(): ThemePalette;
  620. set backgroundColor(value: ThemePalette);
  621. private _backgroundColor;
  622. /** Aria label of the inner `tablist` of the group. */
  623. ariaLabel: string;
  624. /** Sets the `aria-labelledby` of the inner `tablist` of the group. */
  625. ariaLabelledby: string;
  626. /** Output to enable support for two-way binding on `[(selectedIndex)]` */
  627. readonly selectedIndexChange: EventEmitter<number>;
  628. /** Event emitted when focus has changed within a tab group. */
  629. readonly focusChange: EventEmitter<MatTabChangeEvent>;
  630. /** Event emitted when the body animation has completed */
  631. readonly animationDone: EventEmitter<void>;
  632. /** Event emitted when the tab selection has changed. */
  633. readonly selectedTabChange: EventEmitter<MatTabChangeEvent>;
  634. private _groupId;
  635. /** Whether the tab group is rendered on the server. */
  636. protected _isServer: boolean;
  637. constructor(...args: unknown[]);
  638. /**
  639. * After the content is checked, this component knows what tabs have been defined
  640. * and what the selected index should be. This is where we can know exactly what position
  641. * each tab should be in according to the new selected index, and additionally we know how
  642. * a new selected tab should transition in (from the left or right).
  643. */
  644. ngAfterContentChecked(): void;
  645. ngAfterContentInit(): void;
  646. ngAfterViewInit(): void;
  647. /** Listens to changes in all of the tabs. */
  648. private _subscribeToAllTabChanges;
  649. ngOnDestroy(): void;
  650. /** Re-aligns the ink bar to the selected tab element. */
  651. realignInkBar(): void;
  652. /**
  653. * Recalculates the tab group's pagination dimensions.
  654. *
  655. * WARNING: Calling this method can be very costly in terms of performance. It should be called
  656. * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
  657. * page.
  658. */
  659. updatePagination(): void;
  660. /**
  661. * Sets focus to a particular tab.
  662. * @param index Index of the tab to be focused.
  663. */
  664. focusTab(index: number): void;
  665. _focusChanged(index: number): void;
  666. private _createChangeEvent;
  667. /**
  668. * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is
  669. * on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the
  670. * binding to be updated, we need to subscribe to changes in it and trigger change detection
  671. * manually.
  672. */
  673. private _subscribeToTabLabels;
  674. /** Clamps the given index to the bounds of 0 and the tabs length. */
  675. private _clampTabIndex;
  676. /** Returns a unique id for each tab label element */
  677. _getTabLabelId(tab: MatTab, index: number): string;
  678. /** Returns a unique id for each tab content element */
  679. _getTabContentId(index: number): string;
  680. /**
  681. * Sets the height of the body wrapper to the height of the activating tab if dynamic
  682. * height property is true.
  683. */
  684. _setTabBodyWrapperHeight(tabHeight: number): void;
  685. /** Removes the height of the tab body wrapper. */
  686. _removeTabBodyWrapperHeight(): void;
  687. /** Handle click events, setting new selected index if appropriate. */
  688. _handleClick(tab: MatTab, tabHeader: MatTabGroupBaseHeader, index: number): void;
  689. /** Retrieves the tabindex for the tab. */
  690. _getTabIndex(index: number): number;
  691. /** Callback for when the focused state of a tab has changed. */
  692. _tabFocusChanged(focusOrigin: FocusOrigin, index: number): void;
  693. /**
  694. * Callback invoked when the centered state of a tab body changes.
  695. * @param isCenter Whether the tab will be in the center.
  696. */
  697. protected _bodyCentered(isCenter: boolean): void;
  698. protected _animationsDisabled(): boolean;
  699. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabGroup, never>;
  700. static ɵcmp: i0.ɵɵComponentDeclaration<MatTabGroup, "mat-tab-group", ["matTabGroup"], { "color": { "alias": "color"; "required": false; }; "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; "stretchTabs": { "alias": "mat-stretch-tabs"; "required": false; }; "alignTabs": { "alias": "mat-align-tabs"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "contentTabIndex": { "alias": "contentTabIndex"; "required": false; }; "disablePagination": { "alias": "disablePagination"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "preserveContent": { "alias": "preserveContent"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["_allTabs"], ["*"], true, never>;
  701. static ngAcceptInputType_fitInkBarToContent: unknown;
  702. static ngAcceptInputType_stretchTabs: unknown;
  703. static ngAcceptInputType_dynamicHeight: unknown;
  704. static ngAcceptInputType_selectedIndex: unknown;
  705. static ngAcceptInputType_contentTabIndex: unknown;
  706. static ngAcceptInputType_disablePagination: unknown;
  707. static ngAcceptInputType_disableRipple: unknown;
  708. static ngAcceptInputType_preserveContent: unknown;
  709. }
  710. /** A simple change event emitted on focus or selection changes. */
  711. declare class MatTabChangeEvent {
  712. /** Index of the currently-selected tab. */
  713. index: number;
  714. /** Reference to the currently-selected tab. */
  715. tab: MatTab;
  716. }
  717. /**
  718. * Navigation component matching the styles of the tab group header.
  719. * Provides anchored navigation with animated ink bar.
  720. */
  721. declare class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit, AfterViewInit {
  722. _focusedItem: i0.WritableSignal<MatPaginatedTabHeaderItem | null>;
  723. /** Whether the ink bar should fit its width to the size of the tab label content. */
  724. get fitInkBarToContent(): boolean;
  725. set fitInkBarToContent(value: boolean);
  726. _fitInkBarToContent: BehaviorSubject<boolean>;
  727. /** Whether tabs should be stretched to fill the header. */
  728. stretchTabs: boolean;
  729. get animationDuration(): string;
  730. set animationDuration(value: string | number);
  731. private _animationDuration;
  732. /** Query list of all tab links of the tab navigation. */
  733. _items: QueryList<MatTabLink>;
  734. /**
  735. * Theme color of the background of the tab nav. This API is supported in M2 themes only, it
  736. * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
  737. *
  738. * For information on applying color variants in M3, see
  739. * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
  740. */
  741. get backgroundColor(): ThemePalette;
  742. set backgroundColor(value: ThemePalette);
  743. private _backgroundColor;
  744. /** Whether the ripple effect is disabled or not. */
  745. disableRipple: boolean;
  746. /**
  747. * Theme color of the nav bar. This API is supported in M2 themes only, it has
  748. * no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/tabs/styling.
  749. *
  750. * For information on applying color variants in M3, see
  751. * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
  752. */
  753. color: ThemePalette;
  754. /**
  755. * Associated tab panel controlled by the nav bar. If not provided, then the nav bar
  756. * follows the ARIA link / navigation landmark pattern. If provided, it follows the
  757. * ARIA tabs design pattern.
  758. */
  759. tabPanel?: MatTabNavPanel;
  760. _tabListContainer: ElementRef;
  761. _tabList: ElementRef;
  762. _tabListInner: ElementRef;
  763. _nextPaginator: ElementRef<HTMLElement>;
  764. _previousPaginator: ElementRef<HTMLElement>;
  765. _inkBar: MatInkBar;
  766. constructor(...args: unknown[]);
  767. protected _itemSelected(): void;
  768. ngAfterContentInit(): void;
  769. ngAfterViewInit(): void;
  770. /** Notifies the component that the active link has been changed. */
  771. updateActiveLink(): void;
  772. _getRole(): string | null;
  773. _hasFocus(link: MatTabLink): boolean;
  774. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNav, never>;
  775. static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNav, "[mat-tab-nav-bar]", ["matTabNavBar", "matTabNav"], { "fitInkBarToContent": { "alias": "fitInkBarToContent"; "required": false; }; "stretchTabs": { "alias": "mat-stretch-tabs"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "tabPanel": { "alias": "tabPanel"; "required": false; }; }, {}, ["_items"], ["*"], true, never>;
  776. static ngAcceptInputType_fitInkBarToContent: unknown;
  777. static ngAcceptInputType_stretchTabs: unknown;
  778. static ngAcceptInputType_disableRipple: unknown;
  779. }
  780. /**
  781. * Link inside a `mat-tab-nav-bar`.
  782. */
  783. declare class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy, RippleTarget, FocusableOption {
  784. private _tabNavBar;
  785. elementRef: ElementRef<any>;
  786. private _focusMonitor;
  787. private readonly _destroyed;
  788. /** Whether the tab link is active or not. */
  789. protected _isActive: boolean;
  790. protected _tabIndex: i0.Signal<number>;
  791. /** Whether the link is active. */
  792. get active(): boolean;
  793. set active(value: boolean);
  794. /** Whether the tab link is disabled. */
  795. disabled: boolean;
  796. /** Whether ripples are disabled on the tab link. */
  797. disableRipple: boolean;
  798. tabIndex: number;
  799. /**
  800. * Ripple configuration for ripples that are launched on pointer down. The ripple config
  801. * is set to the global ripple options since we don't have any configurable options for
  802. * the tab link ripples.
  803. * @docs-private
  804. */
  805. rippleConfig: RippleConfig & RippleGlobalOptions;
  806. /**
  807. * Whether ripples are disabled on interaction.
  808. * @docs-private
  809. */
  810. get rippleDisabled(): boolean;
  811. /** Unique id for the tab. */
  812. id: string;
  813. constructor(...args: unknown[]);
  814. /** Focuses the tab link. */
  815. focus(): void;
  816. ngAfterViewInit(): void;
  817. ngOnDestroy(): void;
  818. _handleFocus(): void;
  819. _handleKeydown(event: KeyboardEvent): void;
  820. _getAriaControls(): string | null;
  821. _getAriaSelected(): string | null;
  822. _getAriaCurrent(): string | null;
  823. _getRole(): string | null;
  824. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabLink, never>;
  825. static ɵcmp: i0.ɵɵComponentDeclaration<MatTabLink, "[mat-tab-link], [matTabLink]", ["matTabLink"], { "active": { "alias": "active"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, never>;
  826. static ngAcceptInputType_active: unknown;
  827. static ngAcceptInputType_disabled: unknown;
  828. static ngAcceptInputType_disableRipple: unknown;
  829. static ngAcceptInputType_tabIndex: unknown;
  830. }
  831. /**
  832. * Tab panel component associated with MatTabNav.
  833. */
  834. declare class MatTabNavPanel {
  835. /** Unique id for the tab panel. */
  836. id: string;
  837. /** Id of the active tab in the nav bar. */
  838. _activeTabId?: string;
  839. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNavPanel, never>;
  840. static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNavPanel, "mat-tab-nav-panel", ["matTabNavPanel"], { "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], true, never>;
  841. }
  842. declare class MatTabsModule {
  843. static ɵfac: i0.ɵɵFactoryDeclaration<MatTabsModule, never>;
  844. static ɵmod: i0.ɵɵNgModuleDeclaration<MatTabsModule, never, [typeof MatCommonModule, typeof MatTabContent, typeof MatTabLabel, typeof MatTab, typeof MatTabGroup, typeof MatTabNav, typeof MatTabNavPanel, typeof MatTabLink], [typeof MatCommonModule, typeof MatTabContent, typeof MatTabLabel, typeof MatTab, typeof MatTabGroup, typeof MatTabNav, typeof MatTabNavPanel, typeof MatTabLink]>;
  845. static ɵinj: i0.ɵɵInjectorDeclaration<MatTabsModule>;
  846. }
  847. /** Object that can be used to configure the default options for the tabs module. */
  848. interface MatTabsConfig {
  849. /** Duration for the tab animation. Must be a valid CSS value (e.g. 600ms). */
  850. animationDuration?: string;
  851. /**
  852. * Whether pagination should be disabled. This can be used to avoid unnecessary
  853. * layout recalculations if it's known that pagination won't be required.
  854. */
  855. disablePagination?: boolean;
  856. /**
  857. * Whether the ink bar should fit its width to the size of the tab label content.
  858. * This only applies to the MDC-based tabs.
  859. */
  860. fitInkBarToContent?: boolean;
  861. /** Whether the tab group should grow to the size of the active tab. */
  862. dynamicHeight?: boolean;
  863. /** `tabindex` to be set on the inner element that wraps the tab content. */
  864. contentTabIndex?: number;
  865. /**
  866. * By default tabs remove their content from the DOM while it's off-screen.
  867. * Setting this to `true` will keep it in the DOM which will prevent elements
  868. * like iframes and videos from reloading next time it comes back into the view.
  869. */
  870. preserveContent?: boolean;
  871. /** Whether tabs should be stretched to fill the header. */
  872. stretchTabs?: boolean;
  873. /** Alignment for the tabs label. */
  874. alignTabs?: 'start' | 'center' | 'end';
  875. }
  876. /** Injection token that can be used to provide the default options the tabs module. */
  877. declare const MAT_TABS_CONFIG: InjectionToken<MatTabsConfig>;
  878. /**
  879. * Animations used by the Material tabs.
  880. * @docs-private
  881. * @deprecated No longer used, will be removed.
  882. * @breaking-change 21.0.0.
  883. */
  884. declare const matTabsAnimations: {
  885. readonly translateTab: any;
  886. };
  887. export { MAT_TAB, MAT_TABS_CONFIG, MAT_TAB_CONTENT, MAT_TAB_GROUP, MAT_TAB_LABEL, MatInkBar, MatPaginatedTabHeader, MatTab, MatTabBody, MatTabBodyPortal, MatTabChangeEvent, MatTabContent, MatTabGroup, MatTabHeader, MatTabLabel, MatTabLabelWrapper, MatTabLink, MatTabNav, MatTabNavPanel, MatTabsModule, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, matTabsAnimations };
  888. export type { MatTabBodyOriginState, MatTabBodyPositionState, MatTabGroupBaseHeader, MatTabHeaderPosition, MatTabsConfig, ScrollDirection, _MatInkBarPositioner };