paginated-tab-header.d.ts 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  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 { ChangeDetectorRef, ElementRef, NgZone, QueryList, EventEmitter, AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy } from '@angular/core';
  9. import { Direction, Directionality } from '@angular/cdk/bidi';
  10. import { ViewportRuler } from '@angular/cdk/scrolling';
  11. import { FocusableOption } from '@angular/cdk/a11y';
  12. import { MatInkBar } from './ink-bar';
  13. import { Platform } from '@angular/cdk/platform';
  14. /**
  15. * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'
  16. * will scroll the header towards the end of the tabs list and 'before' will scroll towards the
  17. * beginning of the list.
  18. */
  19. export declare type ScrollDirection = 'after' | 'before';
  20. /** Item inside a paginated tab header. */
  21. declare type MatPaginatedTabHeaderItem = FocusableOption & {
  22. elementRef: ElementRef;
  23. };
  24. /**
  25. * Base class for a tab header that supported pagination.
  26. */
  27. export declare abstract class MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
  28. protected _elementRef: ElementRef<HTMLElement>;
  29. protected _changeDetectorRef: ChangeDetectorRef;
  30. private _viewportRuler;
  31. private _dir;
  32. private _ngZone;
  33. /**
  34. * @deprecated @breaking-change 9.0.0 `_platform` and `_animationMode`
  35. * parameters to become required.
  36. */
  37. private _platform?;
  38. _animationMode?: string | undefined;
  39. abstract _items: QueryList<MatPaginatedTabHeaderItem>;
  40. abstract _inkBar: MatInkBar;
  41. abstract _tabListContainer: ElementRef<HTMLElement>;
  42. abstract _tabList: ElementRef<HTMLElement>;
  43. abstract _nextPaginator: ElementRef<HTMLElement>;
  44. abstract _previousPaginator: ElementRef<HTMLElement>;
  45. /** The distance in pixels that the tab labels should be translated to the left. */
  46. private _scrollDistance;
  47. /** Whether the header should scroll to the selected index after the view has been checked. */
  48. private _selectedIndexChanged;
  49. /** Emits when the component is destroyed. */
  50. private readonly _destroyed;
  51. /** Whether the controls for pagination should be displayed */
  52. _showPaginationControls: boolean;
  53. /** Whether the tab list can be scrolled more towards the end of the tab label list. */
  54. _disableScrollAfter: boolean;
  55. /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
  56. _disableScrollBefore: boolean;
  57. /**
  58. * The number of tab labels that are displayed on the header. When this changes, the header
  59. * should re-evaluate the scroll position.
  60. */
  61. private _tabLabelCount;
  62. /** Whether the scroll distance has changed and should be applied after the view is checked. */
  63. private _scrollDistanceChanged;
  64. /** Used to manage focus between the tabs. */
  65. private _keyManager;
  66. /** Cached text content of the header. */
  67. private _currentTextContent;
  68. /** Stream that will stop the automated scrolling. */
  69. private _stopScrolling;
  70. /** The index of the active tab. */
  71. selectedIndex: number;
  72. private _selectedIndex;
  73. /** Event emitted when the option is selected. */
  74. readonly selectFocusedIndex: EventEmitter<number>;
  75. /** Event emitted when a label is focused. */
  76. readonly indexFocused: EventEmitter<number>;
  77. constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _viewportRuler: ViewportRuler, _dir: Directionality, _ngZone: NgZone,
  78. /**
  79. * @deprecated @breaking-change 9.0.0 `_platform` and `_animationMode`
  80. * parameters to become required.
  81. */
  82. _platform?: Platform | undefined, _animationMode?: string | undefined);
  83. /** Called when the user has selected an item via the keyboard. */
  84. protected abstract _itemSelected(event: KeyboardEvent): void;
  85. ngAfterViewInit(): void;
  86. ngAfterContentInit(): void;
  87. ngAfterContentChecked(): void;
  88. ngOnDestroy(): void;
  89. /** Handles keyboard events on the header. */
  90. _handleKeydown(event: KeyboardEvent): void;
  91. /**
  92. * Callback for when the MutationObserver detects that the content has changed.
  93. */
  94. _onContentChanges(): void;
  95. /**
  96. * Updates the view whether pagination should be enabled or not.
  97. *
  98. * WARNING: Calling this method can be very costly in terms of performance. It should be called
  99. * as infrequently as possible from outside of the Tabs component as it causes a reflow of the
  100. * page.
  101. */
  102. updatePagination(): void;
  103. /** Tracks which element has focus; used for keyboard navigation */
  104. /** When the focus index is set, we must manually send focus to the correct label */
  105. focusIndex: number;
  106. /**
  107. * Determines if an index is valid. If the tabs are not ready yet, we assume that the user is
  108. * providing a valid index and return true.
  109. */
  110. _isValidIndex(index: number): boolean;
  111. /**
  112. * Sets focus on the HTML element for the label wrapper and scrolls it into the view if
  113. * scrolling is enabled.
  114. */
  115. _setTabFocus(tabIndex: number): void;
  116. /** The layout direction of the containing app. */
  117. _getLayoutDirection(): Direction;
  118. /** Performs the CSS transformation on the tab list that will cause the list to scroll. */
  119. _updateTabScrollPosition(): void;
  120. /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */
  121. scrollDistance: number;
  122. /**
  123. * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or
  124. * the end of the list, respectively). The distance to scroll is computed to be a third of the
  125. * length of the tab list view window.
  126. *
  127. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  128. * should be called sparingly.
  129. */
  130. _scrollHeader(direction: ScrollDirection): {
  131. maxScrollDistance: number;
  132. distance: number;
  133. };
  134. /** Handles click events on the pagination arrows. */
  135. _handlePaginatorClick(direction: ScrollDirection): void;
  136. /**
  137. * Moves the tab list such that the desired tab label (marked by index) is moved into view.
  138. *
  139. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  140. * should be called sparingly.
  141. */
  142. _scrollToLabel(labelIndex: number): void;
  143. /**
  144. * Evaluate whether the pagination controls should be displayed. If the scroll width of the
  145. * tab list is wider than the size of the header container, then the pagination controls should
  146. * be shown.
  147. *
  148. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  149. * should be called sparingly.
  150. */
  151. _checkPaginationEnabled(): void;
  152. /**
  153. * Evaluate whether the before and after controls should be enabled or disabled.
  154. * If the header is at the beginning of the list (scroll distance is equal to 0) then disable the
  155. * before button. If the header is at the end of the list (scroll distance is equal to the
  156. * maximum distance we can scroll), then disable the after button.
  157. *
  158. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  159. * should be called sparingly.
  160. */
  161. _checkScrollingControls(): void;
  162. /**
  163. * Determines what is the maximum length in pixels that can be set for the scroll distance. This
  164. * is equal to the difference in width between the tab list container and tab header container.
  165. *
  166. * This is an expensive call that forces a layout reflow to compute box and scroll metrics and
  167. * should be called sparingly.
  168. */
  169. _getMaxScrollDistance(): number;
  170. /** Tells the ink-bar to align itself to the current label wrapper */
  171. _alignInkBarToSelectedTab(): void;
  172. /** Stops the currently-running paginator interval. */
  173. _stopInterval(): void;
  174. /**
  175. * Handles the user pressing down on one of the paginators.
  176. * Starts scrolling the header after a certain amount of time.
  177. * @param direction In which direction the paginator should be scrolled.
  178. */
  179. _handlePaginatorPress(direction: ScrollDirection): void;
  180. /**
  181. * Scrolls the header to a given position.
  182. * @param position Position to which to scroll.
  183. * @returns Information on the current scroll distance and the maximum.
  184. */
  185. private _scrollTo;
  186. }
  187. export {};