@angular/material 19.0.0-next.9 → 19.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (232) hide show
  1. package/autocomplete/_autocomplete-theme.scss +8 -4
  2. package/autocomplete/index.d.ts +5 -6
  3. package/badge/_badge-theme.scss +10 -6
  4. package/badge/index.d.ts +1 -2
  5. package/bottom-sheet/_bottom-sheet-theme.scss +8 -4
  6. package/button/_button-theme.scss +10 -6
  7. package/button/_fab-theme.scss +10 -6
  8. package/button/_icon-button-theme.scss +8 -4
  9. package/button/index.d.ts +1 -1
  10. package/button-toggle/_button-toggle-theme.scss +11 -6
  11. package/button-toggle/index.d.ts +2 -1
  12. package/card/_card-theme.scss +8 -4
  13. package/card/index.d.ts +2 -3
  14. package/checkbox/_checkbox-theme.scss +10 -6
  15. package/chips/_chips-theme.scss +10 -6
  16. package/core/_core-theme.scss +4 -7
  17. package/core/_core.scss +2 -5
  18. package/core/m2/_theming.scss +2 -1
  19. package/core/option/_optgroup-theme.scss +8 -4
  20. package/core/option/_option-theme.scss +10 -6
  21. package/core/ripple/_ripple-theme.scss +8 -4
  22. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +10 -6
  23. package/core/theming/_config-validation.scss +4 -4
  24. package/core/theming/_definition.scss +12 -2
  25. package/core/theming/_theming.scss +2 -1
  26. package/core/tokens/_m3-system.scss +55 -39
  27. package/core/tokens/_m3-tokens.scss +3 -3
  28. package/core/tokens/_token-definition.scss +4 -3
  29. package/core/tokens/m2/mat/_badge.scss +1 -1
  30. package/core/tokens/m2/mat/_datepicker.scss +1 -1
  31. package/core/tokens/m2/mat/_menu.scss +5 -3
  32. package/core/tokens/m2/mat/_sort.scss +1 -1
  33. package/core/tokens/m3/mat/_menu.scss +6 -3
  34. package/core/tokens/m3/mdc/_filled-text-field.scss +9 -11
  35. package/datepicker/_datepicker-theme.scss +10 -6
  36. package/datepicker/index.d.ts +36 -37
  37. package/dialog/_dialog-theme.scss +8 -4
  38. package/dialog/index.d.ts +1 -0
  39. package/divider/_divider-theme.scss +8 -4
  40. package/expansion/_expansion-theme.scss +8 -4
  41. package/fesm2022/autocomplete/testing.mjs +2 -5
  42. package/fesm2022/autocomplete/testing.mjs.map +1 -1
  43. package/fesm2022/autocomplete.mjs +225 -151
  44. package/fesm2022/autocomplete.mjs.map +1 -1
  45. package/fesm2022/badge/testing.mjs +2 -5
  46. package/fesm2022/badge/testing.mjs.map +1 -1
  47. package/fesm2022/badge.mjs +45 -36
  48. package/fesm2022/badge.mjs.map +1 -1
  49. package/fesm2022/bottom-sheet/testing.mjs +1 -1
  50. package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
  51. package/fesm2022/bottom-sheet.mjs +79 -57
  52. package/fesm2022/bottom-sheet.mjs.map +1 -1
  53. package/fesm2022/button/testing.mjs +2 -2
  54. package/fesm2022/button/testing.mjs.map +1 -1
  55. package/fesm2022/button-toggle/testing.mjs +4 -7
  56. package/fesm2022/button-toggle/testing.mjs.map +1 -1
  57. package/fesm2022/button-toggle.mjs +84 -47
  58. package/fesm2022/button-toggle.mjs.map +1 -1
  59. package/fesm2022/button.mjs +98 -71
  60. package/fesm2022/button.mjs.map +1 -1
  61. package/fesm2022/card/testing.mjs +3 -6
  62. package/fesm2022/card/testing.mjs.map +1 -1
  63. package/fesm2022/card.mjs +53 -55
  64. package/fesm2022/card.mjs.map +1 -1
  65. package/fesm2022/checkbox/testing.mjs +4 -7
  66. package/fesm2022/checkbox/testing.mjs.map +1 -1
  67. package/fesm2022/checkbox.mjs +105 -63
  68. package/fesm2022/checkbox.mjs.map +1 -1
  69. package/fesm2022/chips/testing.mjs +11 -14
  70. package/fesm2022/chips/testing.mjs.map +1 -1
  71. package/fesm2022/chips.mjs +317 -268
  72. package/fesm2022/chips.mjs.map +1 -1
  73. package/fesm2022/core/testing.mjs +5 -11
  74. package/fesm2022/core/testing.mjs.map +1 -1
  75. package/fesm2022/core.mjs +237 -187
  76. package/fesm2022/core.mjs.map +1 -1
  77. package/fesm2022/datepicker/testing.mjs +13 -22
  78. package/fesm2022/datepicker/testing.mjs.map +1 -1
  79. package/fesm2022/datepicker.mjs +821 -568
  80. package/fesm2022/datepicker.mjs.map +1 -1
  81. package/fesm2022/dialog/testing.mjs +15 -9
  82. package/fesm2022/dialog/testing.mjs.map +1 -1
  83. package/fesm2022/dialog.mjs +221 -153
  84. package/fesm2022/dialog.mjs.map +1 -1
  85. package/fesm2022/divider/testing.mjs +1 -1
  86. package/fesm2022/divider/testing.mjs.map +1 -1
  87. package/fesm2022/divider.mjs +9 -11
  88. package/fesm2022/divider.mjs.map +1 -1
  89. package/fesm2022/expansion/testing.mjs +7 -10
  90. package/fesm2022/expansion/testing.mjs.map +1 -1
  91. package/fesm2022/expansion.mjs +85 -76
  92. package/fesm2022/expansion.mjs.map +1 -1
  93. package/fesm2022/form-field/testing.mjs +12 -15
  94. package/fesm2022/form-field/testing.mjs.map +1 -1
  95. package/fesm2022/form-field.mjs +179 -126
  96. package/fesm2022/form-field.mjs.map +1 -1
  97. package/fesm2022/grid-list/testing.mjs +11 -17
  98. package/fesm2022/grid-list/testing.mjs.map +1 -1
  99. package/fesm2022/grid-list.mjs +72 -50
  100. package/fesm2022/grid-list.mjs.map +1 -1
  101. package/fesm2022/icon/testing.mjs +8 -8
  102. package/fesm2022/icon/testing.mjs.map +1 -1
  103. package/fesm2022/icon.mjs +65 -45
  104. package/fesm2022/icon.mjs.map +1 -1
  105. package/fesm2022/input/testing.mjs +3 -3
  106. package/fesm2022/input/testing.mjs.map +1 -1
  107. package/fesm2022/input.mjs +104 -72
  108. package/fesm2022/input.mjs.map +1 -1
  109. package/fesm2022/list/testing.mjs +21 -38
  110. package/fesm2022/list/testing.mjs.map +1 -1
  111. package/fesm2022/list.mjs +191 -180
  112. package/fesm2022/list.mjs.map +1 -1
  113. package/fesm2022/menu/testing.mjs +3 -6
  114. package/fesm2022/menu/testing.mjs.map +1 -1
  115. package/fesm2022/menu.mjs +178 -168
  116. package/fesm2022/menu.mjs.map +1 -1
  117. package/fesm2022/paginator/testing.mjs +10 -13
  118. package/fesm2022/paginator/testing.mjs.map +1 -1
  119. package/fesm2022/paginator.mjs +84 -59
  120. package/fesm2022/paginator.mjs.map +1 -1
  121. package/fesm2022/progress-bar/testing.mjs +1 -1
  122. package/fesm2022/progress-bar/testing.mjs.map +1 -1
  123. package/fesm2022/progress-bar.mjs +35 -34
  124. package/fesm2022/progress-bar.mjs.map +1 -1
  125. package/fesm2022/progress-spinner/testing.mjs +1 -1
  126. package/fesm2022/progress-spinner/testing.mjs.map +1 -1
  127. package/fesm2022/progress-spinner.mjs +27 -13
  128. package/fesm2022/progress-spinner.mjs.map +1 -1
  129. package/fesm2022/radio/testing.mjs +6 -12
  130. package/fesm2022/radio/testing.mjs.map +1 -1
  131. package/fesm2022/radio.mjs +123 -88
  132. package/fesm2022/radio.mjs.map +1 -1
  133. package/fesm2022/select/testing.mjs +6 -9
  134. package/fesm2022/select/testing.mjs.map +1 -1
  135. package/fesm2022/select.mjs +220 -182
  136. package/fesm2022/select.mjs.map +1 -1
  137. package/fesm2022/sidenav/testing.mjs +6 -6
  138. package/fesm2022/sidenav/testing.mjs.map +1 -1
  139. package/fesm2022/sidenav.mjs +132 -119
  140. package/fesm2022/sidenav.mjs.map +1 -1
  141. package/fesm2022/slide-toggle/testing.mjs +3 -6
  142. package/fesm2022/slide-toggle/testing.mjs.map +1 -1
  143. package/fesm2022/slide-toggle.mjs +78 -49
  144. package/fesm2022/slide-toggle.mjs.map +1 -1
  145. package/fesm2022/slider/testing.mjs +2 -2
  146. package/fesm2022/slider/testing.mjs.map +1 -1
  147. package/fesm2022/slider.mjs +260 -190
  148. package/fesm2022/slider.mjs.map +1 -1
  149. package/fesm2022/snack-bar/testing.mjs +4 -7
  150. package/fesm2022/snack-bar/testing.mjs.map +1 -1
  151. package/fesm2022/snack-bar.mjs +141 -107
  152. package/fesm2022/snack-bar.mjs.map +1 -1
  153. package/fesm2022/sort/testing.mjs +3 -6
  154. package/fesm2022/sort/testing.mjs.map +1 -1
  155. package/fesm2022/sort.mjs +93 -72
  156. package/fesm2022/sort.mjs.map +1 -1
  157. package/fesm2022/stepper/testing.mjs +4 -4
  158. package/fesm2022/stepper/testing.mjs.map +1 -1
  159. package/fesm2022/stepper.mjs +143 -105
  160. package/fesm2022/stepper.mjs.map +1 -1
  161. package/fesm2022/table/testing.mjs +13 -25
  162. package/fesm2022/table/testing.mjs.map +1 -1
  163. package/fesm2022/table.mjs +182 -177
  164. package/fesm2022/table.mjs.map +1 -1
  165. package/fesm2022/tabs/testing.mjs +5 -5
  166. package/fesm2022/tabs/testing.mjs.map +1 -1
  167. package/fesm2022/tabs.mjs +326 -247
  168. package/fesm2022/tabs.mjs.map +1 -1
  169. package/fesm2022/timepicker/testing.mjs +7 -16
  170. package/fesm2022/timepicker/testing.mjs.map +1 -1
  171. package/fesm2022/timepicker.mjs +157 -153
  172. package/fesm2022/timepicker.mjs.map +1 -1
  173. package/fesm2022/toolbar/testing.mjs +2 -5
  174. package/fesm2022/toolbar/testing.mjs.map +1 -1
  175. package/fesm2022/toolbar.mjs +25 -15
  176. package/fesm2022/toolbar.mjs.map +1 -1
  177. package/fesm2022/tooltip/testing.mjs +6 -9
  178. package/fesm2022/tooltip/testing.mjs.map +1 -1
  179. package/fesm2022/tooltip.mjs +96 -72
  180. package/fesm2022/tooltip.mjs.map +1 -1
  181. package/fesm2022/tree/testing.mjs +3 -6
  182. package/fesm2022/tree/testing.mjs.map +1 -1
  183. package/fesm2022/tree.mjs +56 -54
  184. package/fesm2022/tree.mjs.map +1 -1
  185. package/form-field/_form-field-theme.scss +9 -5
  186. package/form-field/index.d.ts +9 -9
  187. package/grid-list/_grid-list-theme.scss +8 -4
  188. package/icon/_icon-theme.scss +10 -6
  189. package/input/_input-theme.scss +8 -4
  190. package/list/_list-theme.scss +8 -4
  191. package/list/index.d.ts +20 -21
  192. package/menu/_menu-theme.scss +8 -4
  193. package/menu/index.d.ts +15 -17
  194. package/package.json +2 -2
  195. package/paginator/_paginator-theme.scss +8 -4
  196. package/prebuilt-themes/azure-blue.css +1 -1
  197. package/prebuilt-themes/cyan-orange.css +1 -1
  198. package/prebuilt-themes/deeppurple-amber.css +1 -1
  199. package/prebuilt-themes/indigo-pink.css +1 -1
  200. package/prebuilt-themes/magenta-violet.css +1 -1
  201. package/prebuilt-themes/pink-bluegrey.css +1 -1
  202. package/prebuilt-themes/purple-green.css +1 -1
  203. package/prebuilt-themes/rose-red.css +1 -1
  204. package/progress-bar/_progress-bar-theme.scss +11 -9
  205. package/progress-spinner/_progress-spinner-theme.scss +11 -9
  206. package/progress-spinner/index.d.ts +3 -4
  207. package/radio/_radio-theme.scss +10 -6
  208. package/radio/index.d.ts +2 -3
  209. package/schematics/ng-add/index.js +1 -1
  210. package/schematics/ng-add/index.mjs +1 -1
  211. package/schematics/ng-add/theming/create-custom-theme.js +1 -6
  212. package/schematics/ng-add/theming/create-custom-theme.mjs +1 -6
  213. package/schematics/ng-generate/theme-color/index_bundled.js +35 -9
  214. package/schematics/ng-generate/theme-color/index_bundled.js.map +2 -2
  215. package/schematics/ng-update/index_bundled.js +6 -1
  216. package/schematics/ng-update/index_bundled.js.map +1 -1
  217. package/select/_select-theme.scss +10 -6
  218. package/select/index.d.ts +7 -7
  219. package/sidenav/_sidenav-theme.scss +8 -4
  220. package/slide-toggle/_slide-toggle-theme.scss +10 -6
  221. package/slider/_slider-theme.scss +10 -6
  222. package/snack-bar/_snack-bar-theme.scss +10 -6
  223. package/sort/_sort-theme.scss +8 -4
  224. package/stepper/_stepper-theme.scss +10 -6
  225. package/stepper/index.d.ts +14 -15
  226. package/table/_table-theme.scss +8 -4
  227. package/tabs/_tabs-theme.scss +10 -6
  228. package/timepicker/_timepicker-theme.scss +10 -6
  229. package/toolbar/_toolbar-theme.scss +10 -6
  230. package/tooltip/_tooltip-theme.scss +8 -4
  231. package/tooltip/index.d.ts +5 -6
  232. package/tree/_tree-theme.scss +8 -4
package/fesm2022/tabs.mjs CHANGED
@@ -4,13 +4,13 @@ import { _StructuralStylesLoader, MatRipple, MAT_RIPPLE_GLOBAL_OPTIONS, MatCommo
4
4
  import { CdkPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
5
5
  import { Subject, fromEvent, of, merge, EMPTY, Observable, timer, Subscription, BehaviorSubject } from 'rxjs';
6
6
  import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
7
- import { FocusKeyManager, CdkMonitorFocus, FocusMonitor } from '@angular/cdk/a11y';
7
+ import { FocusKeyManager, _IdGenerator, CdkMonitorFocus, FocusMonitor } from '@angular/cdk/a11y';
8
8
  import { Directionality } from '@angular/cdk/bidi';
9
9
  import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
10
10
  import { SharedResizeObserver } from '@angular/cdk/observers/private';
11
11
  import { normalizePassiveListenerOptions, Platform } from '@angular/cdk/platform';
12
12
  import { ViewportRuler, CdkScrollable } from '@angular/cdk/scrolling';
13
- import { takeUntil, debounceTime, startWith, switchMap, skip, filter, distinctUntilChanged } from 'rxjs/operators';
13
+ import { takeUntil, debounceTime, startWith, switchMap, skip, filter } from 'rxjs/operators';
14
14
  import { CdkObserveContent } from '@angular/cdk/observers';
15
15
  import { trigger, state, style, transition, animate } from '@angular/animations';
16
16
 
@@ -22,13 +22,12 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
22
22
  const MAT_TAB_CONTENT = new InjectionToken('MatTabContent');
23
23
  /** Decorates the `ng-template` tags and reads out the template from it. */
24
24
  class MatTabContent {
25
- constructor() {
26
- this.template = inject(TemplateRef);
27
- }
28
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
29
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatTabContent, isStandalone: true, selector: "[matTabContent]", providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }], ngImport: i0 }); }
25
+ template = inject(TemplateRef);
26
+ constructor() { }
27
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
28
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabContent, isStandalone: true, selector: "[matTabContent]", providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }], ngImport: i0 });
30
29
  }
31
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabContent, decorators: [{
30
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabContent, decorators: [{
32
31
  type: Directive,
33
32
  args: [{
34
33
  selector: '[matTabContent]',
@@ -49,14 +48,11 @@ const MAT_TAB_LABEL = new InjectionToken('MatTabLabel');
49
48
  const MAT_TAB = new InjectionToken('MAT_TAB');
50
49
  /** Used to flag tab labels for use with the portal directive */
51
50
  class MatTabLabel extends CdkPortal {
52
- constructor() {
53
- super(...arguments);
54
- this._closestTab = inject(MAT_TAB, { optional: true });
55
- }
56
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
57
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatTabLabel, isStandalone: true, selector: "[mat-tab-label], [matTabLabel]", providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }], usesInheritance: true, ngImport: i0 }); }
51
+ _closestTab = inject(MAT_TAB, { optional: true });
52
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
53
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabLabel, isStandalone: true, selector: "[mat-tab-label], [matTabLabel]", providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }], usesInheritance: true, ngImport: i0 });
58
54
  }
59
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLabel, decorators: [{
55
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLabel, decorators: [{
60
56
  type: Directive,
61
57
  args: [{
62
58
  selector: '[mat-tab-label], [matTabLabel]',
@@ -70,6 +66,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
70
66
  */
71
67
  const MAT_TAB_GROUP = new InjectionToken('MAT_TAB_GROUP');
72
68
  class MatTab {
69
+ _viewContainerRef = inject(ViewContainerRef);
70
+ _closestTabGroup = inject(MAT_TAB_GROUP, { optional: true });
71
+ /** whether the tab is disabled. */
72
+ disabled = false;
73
73
  /** Content for the tab label given by `<ng-template mat-tab-label>`. */
74
74
  get templateLabel() {
75
75
  return this._templateLabel;
@@ -77,39 +77,49 @@ class MatTab {
77
77
  set templateLabel(value) {
78
78
  this._setTemplateLabelInput(value);
79
79
  }
80
+ _templateLabel;
81
+ /**
82
+ * Template provided in the tab content that will be used if present, used to enable lazy-loading
83
+ */
84
+ _explicitContent = undefined;
85
+ /** Template inside the MatTab view that contains an `<ng-content>`. */
86
+ _implicitContent;
87
+ /** Plain text label for the tab, used when there is no template label. */
88
+ textLabel = '';
89
+ /** Aria label for the tab. */
90
+ ariaLabel;
91
+ /**
92
+ * Reference to the element that the tab is labelled by.
93
+ * Will be cleared if `aria-label` is set at the same time.
94
+ */
95
+ ariaLabelledby;
96
+ /** Classes to be passed to the tab label inside the mat-tab-header container. */
97
+ labelClass;
98
+ /** Classes to be passed to the tab mat-tab-body container. */
99
+ bodyClass;
100
+ /** Portal that will be the hosted content of the tab */
101
+ _contentPortal = null;
80
102
  /** @docs-private */
81
103
  get content() {
82
104
  return this._contentPortal;
83
105
  }
106
+ /** Emits whenever the internal state of the tab changes. */
107
+ _stateChanges = new Subject();
108
+ /**
109
+ * The relatively indexed position where 0 represents the center, negative is left, and positive
110
+ * represents the right.
111
+ */
112
+ position = null;
113
+ /**
114
+ * The initial relatively index origin of the tab if it was created and selected after there
115
+ * was already a selected tab. Provides context of what position the tab should originate from.
116
+ */
117
+ origin = null;
118
+ /**
119
+ * Whether the tab is currently active.
120
+ */
121
+ isActive = false;
84
122
  constructor() {
85
- this._viewContainerRef = inject(ViewContainerRef);
86
- this._closestTabGroup = inject(MAT_TAB_GROUP, { optional: true });
87
- /** whether the tab is disabled. */
88
- this.disabled = false;
89
- /**
90
- * Template provided in the tab content that will be used if present, used to enable lazy-loading
91
- */
92
- this._explicitContent = undefined;
93
- /** Plain text label for the tab, used when there is no template label. */
94
- this.textLabel = '';
95
- /** Portal that will be the hosted content of the tab */
96
- this._contentPortal = null;
97
- /** Emits whenever the internal state of the tab changes. */
98
- this._stateChanges = new Subject();
99
- /**
100
- * The relatively indexed position where 0 represents the center, negative is left, and positive
101
- * represents the right.
102
- */
103
- this.position = null;
104
- /**
105
- * The initial relatively index origin of the tab if it was created and selected after there
106
- * was already a selected tab. Provides context of what position the tab should originate from.
107
- */
108
- this.origin = null;
109
- /**
110
- * Whether the tab is currently active.
111
- */
112
- this.isActive = false;
113
123
  inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
114
124
  }
115
125
  ngOnChanges(changes) {
@@ -138,10 +148,10 @@ class MatTab {
138
148
  this._templateLabel = value;
139
149
  }
140
150
  }
141
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
142
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatTab, isStandalone: true, selector: "mat-tab", inputs: { disabled: ["disabled", "disabled", booleanAttribute], textLabel: ["label", "textLabel"], ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], labelClass: "labelClass", bodyClass: "bodyClass" }, host: { attributes: { "hidden": "" } }, providers: [{ provide: MAT_TAB, useExisting: MatTab }], queries: [{ propertyName: "templateLabel", first: true, predicate: MatTabLabel, descendants: true }, { propertyName: "_explicitContent", first: true, predicate: MatTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["matTab"], usesOnChanges: true, ngImport: i0, template: "<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template><ng-content></ng-content></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
151
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
152
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatTab, isStandalone: true, selector: "mat-tab", inputs: { disabled: ["disabled", "disabled", booleanAttribute], textLabel: ["label", "textLabel"], ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], labelClass: "labelClass", bodyClass: "bodyClass" }, host: { attributes: { "hidden": "" } }, providers: [{ provide: MAT_TAB, useExisting: MatTab }], queries: [{ propertyName: "templateLabel", first: true, predicate: MatTabLabel, descendants: true }, { propertyName: "_explicitContent", first: true, predicate: MatTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["matTab"], usesOnChanges: true, ngImport: i0, template: "<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template><ng-content></ng-content></ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
143
153
  }
144
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTab, decorators: [{
154
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTab, decorators: [{
145
155
  type: Component,
146
156
  args: [{ selector: 'mat-tab', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, exportAs: 'matTab', providers: [{ provide: MAT_TAB, useExisting: MatTab }], host: {
147
157
  // This element will be rendered on the server in order to support hydration.
@@ -184,6 +194,9 @@ const NO_TRANSITION_CLASS = 'mdc-tab-indicator--no-transition';
184
194
  * @docs-private
185
195
  */
186
196
  class MatInkBar {
197
+ _items;
198
+ /** Item to which the ink bar is aligned currently. */
199
+ _currentItem;
187
200
  constructor(_items) {
188
201
  this._items = _items;
189
202
  }
@@ -208,10 +221,10 @@ class MatInkBar {
208
221
  }
209
222
  }
210
223
  class InkBarItem {
211
- constructor() {
212
- this._elementRef = inject(ElementRef);
213
- this._fitToContent = false;
214
- }
224
+ _elementRef = inject(ElementRef);
225
+ _inkBarElement;
226
+ _inkBarContentElement;
227
+ _fitToContent = false;
215
228
  /** Whether the ink bar should fit to the entire tab or just its content. */
216
229
  get fitInkBarToContent() {
217
230
  return this._fitToContent;
@@ -289,10 +302,10 @@ class InkBarItem {
289
302
  }
290
303
  parentElement.appendChild(this._inkBarElement);
291
304
  }
292
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: InkBarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
293
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.10", type: InkBarItem, isStandalone: true, inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute] }, ngImport: i0 }); }
305
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: InkBarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
306
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: InkBarItem, isStandalone: true, inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute] }, ngImport: i0 });
294
307
  }
295
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: InkBarItem, decorators: [{
308
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: InkBarItem, decorators: [{
296
309
  type: Directive
297
310
  }], propDecorators: { fitInkBarToContent: [{
298
311
  type: Input,
@@ -320,12 +333,9 @@ const _MAT_INK_BAR_POSITIONER = new InjectionToken('MatInkBarPositioner', {
320
333
  * @docs-private
321
334
  */
322
335
  class MatTabLabelWrapper extends InkBarItem {
323
- constructor() {
324
- super(...arguments);
325
- this.elementRef = inject(ElementRef);
326
- /** Whether the tab is disabled. */
327
- this.disabled = false;
328
- }
336
+ elementRef = inject(ElementRef);
337
+ /** Whether the tab is disabled. */
338
+ disabled = false;
329
339
  /** Sets focus on the wrapper element */
330
340
  focus() {
331
341
  this.elementRef.nativeElement.focus();
@@ -336,10 +346,10 @@ class MatTabLabelWrapper extends InkBarItem {
336
346
  getOffsetWidth() {
337
347
  return this.elementRef.nativeElement.offsetWidth;
338
348
  }
339
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLabelWrapper, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
340
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatTabLabelWrapper, isStandalone: true, selector: "[matTabLabelWrapper]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.mat-mdc-tab-disabled": "disabled", "attr.aria-disabled": "!!disabled" } }, usesInheritance: true, ngImport: i0 }); }
349
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLabelWrapper, deps: null, target: i0.ɵɵFactoryTarget.Directive });
350
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatTabLabelWrapper, isStandalone: true, selector: "[matTabLabelWrapper]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.mat-mdc-tab-disabled": "disabled", "attr.aria-disabled": "!!disabled" } }, usesInheritance: true, ngImport: i0 });
341
351
  }
342
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLabelWrapper, decorators: [{
352
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLabelWrapper, decorators: [{
343
353
  type: Directive,
344
354
  args: [{
345
355
  selector: '[matTabLabelWrapper]',
@@ -372,6 +382,43 @@ const HEADER_SCROLL_INTERVAL = 100;
372
382
  * @docs-private
373
383
  */
374
384
  class MatPaginatedTabHeader {
385
+ _elementRef = inject(ElementRef);
386
+ _changeDetectorRef = inject(ChangeDetectorRef);
387
+ _viewportRuler = inject(ViewportRuler);
388
+ _dir = inject(Directionality, { optional: true });
389
+ _ngZone = inject(NgZone);
390
+ _platform = inject(Platform);
391
+ _animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
392
+ /** The distance in pixels that the tab labels should be translated to the left. */
393
+ _scrollDistance = 0;
394
+ /** Whether the header should scroll to the selected index after the view has been checked. */
395
+ _selectedIndexChanged = false;
396
+ /** Emits when the component is destroyed. */
397
+ _destroyed = new Subject();
398
+ /** Whether the controls for pagination should be displayed */
399
+ _showPaginationControls = false;
400
+ /** Whether the tab list can be scrolled more towards the end of the tab label list. */
401
+ _disableScrollAfter = true;
402
+ /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
403
+ _disableScrollBefore = true;
404
+ /**
405
+ * The number of tab labels that are displayed on the header. When this changes, the header
406
+ * should re-evaluate the scroll position.
407
+ */
408
+ _tabLabelCount;
409
+ /** Whether the scroll distance has changed and should be applied after the view is checked. */
410
+ _scrollDistanceChanged;
411
+ /** Used to manage focus between the tabs. */
412
+ _keyManager;
413
+ /** Cached text content of the header. */
414
+ _currentTextContent;
415
+ /** Stream that will stop the automated scrolling. */
416
+ _stopScrolling = new Subject();
417
+ /**
418
+ * Whether pagination should be disabled. This can be used to avoid unnecessary
419
+ * layout recalculations if it's known that pagination won't be required.
420
+ */
421
+ disablePagination = false;
375
422
  /** The index of the active tab. */
376
423
  get selectedIndex() {
377
424
  return this._selectedIndex;
@@ -386,40 +433,14 @@ class MatPaginatedTabHeader {
386
433
  }
387
434
  }
388
435
  }
436
+ _selectedIndex = 0;
437
+ /** Event emitted when the option is selected. */
438
+ selectFocusedIndex = new EventEmitter();
439
+ /** Event emitted when a label is focused. */
440
+ indexFocused = new EventEmitter();
441
+ _sharedResizeObserver = inject(SharedResizeObserver);
442
+ _injector = inject(Injector);
389
443
  constructor() {
390
- this._elementRef = inject(ElementRef);
391
- this._changeDetectorRef = inject(ChangeDetectorRef);
392
- this._viewportRuler = inject(ViewportRuler);
393
- this._dir = inject(Directionality, { optional: true });
394
- this._ngZone = inject(NgZone);
395
- this._platform = inject(Platform);
396
- this._animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
397
- /** The distance in pixels that the tab labels should be translated to the left. */
398
- this._scrollDistance = 0;
399
- /** Whether the header should scroll to the selected index after the view has been checked. */
400
- this._selectedIndexChanged = false;
401
- /** Emits when the component is destroyed. */
402
- this._destroyed = new Subject();
403
- /** Whether the controls for pagination should be displayed */
404
- this._showPaginationControls = false;
405
- /** Whether the tab list can be scrolled more towards the end of the tab label list. */
406
- this._disableScrollAfter = true;
407
- /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */
408
- this._disableScrollBefore = true;
409
- /** Stream that will stop the automated scrolling. */
410
- this._stopScrolling = new Subject();
411
- /**
412
- * Whether pagination should be disabled. This can be used to avoid unnecessary
413
- * layout recalculations if it's known that pagination won't be required.
414
- */
415
- this.disablePagination = false;
416
- this._selectedIndex = 0;
417
- /** Event emitted when the option is selected. */
418
- this.selectFocusedIndex = new EventEmitter();
419
- /** Event emitted when a label is focused. */
420
- this.indexFocused = new EventEmitter();
421
- this._sharedResizeObserver = inject(SharedResizeObserver);
422
- this._injector = inject(Injector);
423
444
  // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
424
445
  this._ngZone.runOutsideAngular(() => {
425
446
  fromEvent(this._elementRef.nativeElement, 'mouseleave')
@@ -846,10 +867,10 @@ class MatPaginatedTabHeader {
846
867
  this._checkScrollingControls();
847
868
  return { maxScrollDistance, distance: this._scrollDistance };
848
869
  }
849
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
850
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatPaginatedTabHeader, isStandalone: true, inputs: { disablePagination: ["disablePagination", "disablePagination", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 }); }
870
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
871
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatPaginatedTabHeader, isStandalone: true, inputs: { disablePagination: ["disablePagination", "disablePagination", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 });
851
872
  }
852
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatPaginatedTabHeader, decorators: [{
873
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatPaginatedTabHeader, decorators: [{
853
874
  type: Directive
854
875
  }], ctorParameters: () => [], propDecorators: { disablePagination: [{
855
876
  type: Input,
@@ -871,11 +892,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
871
892
  * @docs-private
872
893
  */
873
894
  class MatTabHeader extends MatPaginatedTabHeader {
874
- constructor() {
875
- super(...arguments);
876
- /** Whether the ripple effect is disabled or not. */
877
- this.disableRipple = false;
878
- }
895
+ _items;
896
+ _tabListContainer;
897
+ _tabList;
898
+ _tabListInner;
899
+ _nextPaginator;
900
+ _previousPaginator;
901
+ _inkBar;
902
+ /** Aria label of the header. */
903
+ ariaLabel;
904
+ /** Sets the `aria-labelledby` of the header. */
905
+ ariaLabelledby;
906
+ /** Whether the ripple effect is disabled or not. */
907
+ disableRipple = false;
879
908
  ngAfterContentInit() {
880
909
  this._inkBar = new MatInkBar(this._items);
881
910
  super.ngAfterContentInit();
@@ -883,10 +912,10 @@ class MatTabHeader extends MatPaginatedTabHeader {
883
912
  _itemSelected(event) {
884
913
  event.preventDefault();
885
914
  }
886
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
887
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatTabHeader, isStandalone: true, selector: "mat-tab-header", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { properties: { "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'" }, classAttribute: "mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: MatTabLabelWrapper }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div\n class=\"mat-mdc-tab-label-container\"\n #tabListContainer\n (keydown)=\"_handleKeydown($event)\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\">\n <div\n #tabList\n class=\"mat-mdc-tab-list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-labels\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container{border-bottom:none;border-top-style:solid;border-top-width:var(--mat-tab-header-divider-height, 1px);border-top-color:var(--mat-tab-header-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-labels{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-labels,.mat-mdc-tab-labels.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab::before{margin:5px}@media(forced-colors: active){.mat-mdc-tab[aria-disabled=true]{color:GrayText}}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
915
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component });
916
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatTabHeader, isStandalone: true, selector: "mat-tab-header", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { properties: { "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'" }, classAttribute: "mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: MatTabLabelWrapper }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div\n class=\"mat-mdc-tab-label-container\"\n #tabListContainer\n (keydown)=\"_handleKeydown($event)\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\">\n <div\n #tabList\n class=\"mat-mdc-tab-list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-labels\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container{border-bottom:none;border-top-style:solid;border-top-width:var(--mat-tab-header-divider-height, 1px);border-top-color:var(--mat-tab-header-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-labels{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-labels,.mat-mdc-tab-labels.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab::before{margin:5px}@media(forced-colors: active){.mat-mdc-tab[aria-disabled=true]{color:GrayText}}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
888
917
  }
889
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabHeader, decorators: [{
918
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabHeader, decorators: [{
890
919
  type: Component,
891
920
  args: [{ selector: 'mat-tab-header', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, host: {
892
921
  'class': 'mat-mdc-tab-header',
@@ -967,13 +996,13 @@ const matTabsAnimations = {
967
996
  * @docs-private
968
997
  */
969
998
  class MatTabBodyPortal extends CdkPortalOutlet {
999
+ _host = inject(MatTabBody);
1000
+ /** Subscription to events for when the tab body begins centering. */
1001
+ _centeringSub = Subscription.EMPTY;
1002
+ /** Subscription to events for when the tab body finishes leaving from center position. */
1003
+ _leavingSub = Subscription.EMPTY;
970
1004
  constructor() {
971
1005
  super();
972
- this._host = inject(MatTabBody);
973
- /** Subscription to events for when the tab body begins centering. */
974
- this._centeringSub = Subscription.EMPTY;
975
- /** Subscription to events for when the tab body finishes leaving from center position. */
976
- this._leavingSub = Subscription.EMPTY;
977
1006
  }
978
1007
  /** Set initial visibility or set up subscription for changing visibility. */
979
1008
  ngOnInit() {
@@ -997,10 +1026,10 @@ class MatTabBodyPortal extends CdkPortalOutlet {
997
1026
  this._centeringSub.unsubscribe();
998
1027
  this._leavingSub.unsubscribe();
999
1028
  }
1000
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabBodyPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1001
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatTabBodyPortal, isStandalone: true, selector: "[matTabBodyHost]", usesInheritance: true, ngImport: i0 }); }
1029
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabBodyPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1030
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabBodyPortal, isStandalone: true, selector: "[matTabBodyHost]", usesInheritance: true, ngImport: i0 });
1002
1031
  }
1003
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabBodyPortal, decorators: [{
1032
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabBodyPortal, decorators: [{
1004
1033
  type: Directive,
1005
1034
  args: [{
1006
1035
  selector: '[matTabBodyHost]',
@@ -1011,32 +1040,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
1011
1040
  * @docs-private
1012
1041
  */
1013
1042
  class MatTabBody {
1043
+ _elementRef = inject(ElementRef);
1044
+ _dir = inject(Directionality, { optional: true });
1045
+ /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
1046
+ _positionIndex;
1047
+ /** Subscription to the directionality change observable. */
1048
+ _dirChangeSubscription = Subscription.EMPTY;
1049
+ /** Tab body position state. Used by the animation trigger for the current state. */
1050
+ _position;
1051
+ /** Emits when an animation on the tab is complete. */
1052
+ _translateTabComplete = new Subject();
1053
+ /** Event emitted when the tab begins to animate towards the center as the active tab. */
1054
+ _onCentering = new EventEmitter();
1055
+ /** Event emitted before the centering of the tab begins. */
1056
+ _beforeCentering = new EventEmitter();
1057
+ /** Event emitted before the centering of the tab begins. */
1058
+ _afterLeavingCenter = new EventEmitter();
1059
+ /** Event emitted when the tab completes its animation towards the center. */
1060
+ _onCentered = new EventEmitter(true);
1061
+ /** The portal host inside of this container into which the tab body content will be loaded. */
1062
+ _portalHost;
1063
+ /** The tab body content to display. */
1064
+ _content;
1065
+ /** Position that will be used when the tab is immediately becoming visible after creation. */
1066
+ origin;
1067
+ // Note that the default value will always be overwritten by `MatTabBody`, but we need one
1068
+ // anyway to prevent the animations module from throwing an error if the body is used on its own.
1069
+ /** Duration for the tab's animation. */
1070
+ animationDuration = '500ms';
1071
+ /** Whether the tab's content should be kept in the DOM while it's off-screen. */
1072
+ preserveContent = false;
1014
1073
  /** The shifted index position of the tab body, where zero represents the active center tab. */
1015
1074
  set position(position) {
1016
1075
  this._positionIndex = position;
1017
1076
  this._computePositionAnimationState();
1018
1077
  }
1019
1078
  constructor() {
1020
- this._elementRef = inject(ElementRef);
1021
- this._dir = inject(Directionality, { optional: true });
1022
- /** Subscription to the directionality change observable. */
1023
- this._dirChangeSubscription = Subscription.EMPTY;
1024
- /** Emits when an animation on the tab is complete. */
1025
- this._translateTabComplete = new Subject();
1026
- /** Event emitted when the tab begins to animate towards the center as the active tab. */
1027
- this._onCentering = new EventEmitter();
1028
- /** Event emitted before the centering of the tab begins. */
1029
- this._beforeCentering = new EventEmitter();
1030
- /** Event emitted before the centering of the tab begins. */
1031
- this._afterLeavingCenter = new EventEmitter();
1032
- /** Event emitted when the tab completes its animation towards the center. */
1033
- this._onCentered = new EventEmitter(true);
1034
- // Note that the default value will always be overwritten by `MatTabBody`, but we need one
1035
- // anyway to prevent the animations module from throwing an error if the body is used on its own.
1036
- /** Duration for the tab's animation. */
1037
- this.animationDuration = '500ms';
1038
- /** Whether the tab's content should be kept in the DOM while it's off-screen. */
1039
- this.preserveContent = false;
1040
1079
  if (this._dir) {
1041
1080
  const changeDetectorRef = inject(ChangeDetectorRef);
1042
1081
  this._dirChangeSubscription = this._dir.change.subscribe((dir) => {
@@ -1044,13 +1083,7 @@ class MatTabBody {
1044
1083
  changeDetectorRef.markForCheck();
1045
1084
  });
1046
1085
  }
1047
- // Ensure that we get unique animation events, because the `.done` callback can get
1048
- // invoked twice in some browsers. See https://github.com/angular/angular/issues/24084.
1049
- this._translateTabComplete
1050
- .pipe(distinctUntilChanged((x, y) => {
1051
- return x.fromState === y.fromState && x.toState === y.toState;
1052
- }))
1053
- .subscribe(event => {
1086
+ this._translateTabComplete.subscribe(event => {
1054
1087
  // If the transition to the center is complete, emit an event.
1055
1088
  if (this._isCenterPosition(event.toState) && this._isCenterPosition(this._position)) {
1056
1089
  this._onCentered.emit();
@@ -1111,10 +1144,10 @@ class MatTabBody {
1111
1144
  }
1112
1145
  return 'right-origin-center';
1113
1146
  }
1114
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1115
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatTabBody, isStandalone: true, selector: "mat-tab-body", inputs: { _content: ["content", "_content"], origin: "origin", animationDuration: "animationDuration", preserveContent: "preserveContent", position: "position" }, outputs: { _onCentering: "_onCentering", _beforeCentering: "_beforeCentering", _afterLeavingCenter: "_afterLeavingCenter", _onCentered: "_onCentered" }, host: { classAttribute: "mat-mdc-tab-body" }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div class=\"mat-mdc-tab-body-content\" #content\n [@translateTab]=\"{\n value: _position,\n params: {animationDuration: animationDuration}\n }\"\n (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n (@translateTab.done)=\"_translateTabComplete.next($event)\"\n cdkScrollable>\n <ng-template matTabBodyHost></ng-template>\n</div>\n", styles: [".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-mdc-tab-body-content[style*=\"visibility: hidden\"]{display:none}"], dependencies: [{ kind: "directive", type: MatTabBodyPortal, selector: "[matTabBodyHost]" }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [matTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1147
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
1148
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabBody, isStandalone: true, selector: "mat-tab-body", inputs: { _content: ["content", "_content"], origin: "origin", animationDuration: "animationDuration", preserveContent: "preserveContent", position: "position" }, outputs: { _onCentering: "_onCentering", _beforeCentering: "_beforeCentering", _afterLeavingCenter: "_afterLeavingCenter", _onCentered: "_onCentered" }, host: { classAttribute: "mat-mdc-tab-body" }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<div class=\"mat-mdc-tab-body-content\" #content\n [@translateTab]=\"{\n value: _position,\n params: {animationDuration: animationDuration}\n }\"\n (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n (@translateTab.done)=\"_translateTabComplete.next($event)\"\n cdkScrollable>\n <ng-template matTabBodyHost></ng-template>\n</div>\n", styles: [".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-mdc-tab-body-content[style*=\"visibility: hidden\"]{display:none}"], dependencies: [{ kind: "directive", type: MatTabBodyPortal, selector: "[matTabBodyHost]" }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [matTabsAnimations.translateTab], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
1116
1149
  }
1117
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabBody, decorators: [{
1150
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabBody, decorators: [{
1118
1151
  type: Component,
1119
1152
  args: [{ selector: 'mat-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, animations: [matTabsAnimations.translateTab], host: {
1120
1153
  'class': 'mat-mdc-tab-body',
@@ -1143,8 +1176,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
1143
1176
  type: Input
1144
1177
  }] } });
1145
1178
 
1146
- /** Used to generate unique ID's for each tab component */
1147
- let nextId = 0;
1148
1179
  /** Boolean constant that determines whether the tab group supports the `backgroundColor` input */
1149
1180
  const ENABLE_BACKGROUND_INPUT = true;
1150
1181
  /**
@@ -1153,6 +1184,36 @@ const ENABLE_BACKGROUND_INPUT = true;
1153
1184
  * See: https://material.io/design/components/tabs.html
1154
1185
  */
1155
1186
  class MatTabGroup {
1187
+ _elementRef = inject(ElementRef);
1188
+ _changeDetectorRef = inject(ChangeDetectorRef);
1189
+ _animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
1190
+ /**
1191
+ * All tabs inside the tab group. This includes tabs that belong to groups that are nested
1192
+ * inside the current one. We filter out only the tabs that belong to this group in `_tabs`.
1193
+ */
1194
+ _allTabs;
1195
+ _tabBodyWrapper;
1196
+ _tabHeader;
1197
+ /** All of the tabs that belong to the group. */
1198
+ _tabs = new QueryList();
1199
+ /** The tab index that should be selected after the content has been checked. */
1200
+ _indexToSelect = 0;
1201
+ /** Index of the tab that was focused last. */
1202
+ _lastFocusedTabIndex = null;
1203
+ /** Snapshot of the height of the tab body wrapper before another tab is activated. */
1204
+ _tabBodyWrapperHeight = 0;
1205
+ /** Subscription to tabs being added/removed. */
1206
+ _tabsSubscription = Subscription.EMPTY;
1207
+ /** Subscription to changes in the tab labels. */
1208
+ _tabLabelSubscription = Subscription.EMPTY;
1209
+ /**
1210
+ * Theme color of the tab group. This API is supported in M2 themes only, it
1211
+ * has no effect in M3 themes.
1212
+ *
1213
+ * For information on applying color variants in M3, see
1214
+ * https://material.angular.io/guide/theming#using-component-color-variants.
1215
+ */
1216
+ color;
1156
1217
  /** Whether the ink bar should fit its width to the size of the tab label content. */
1157
1218
  get fitInkBarToContent() {
1158
1219
  return this._fitInkBarToContent;
@@ -1161,6 +1222,13 @@ class MatTabGroup {
1161
1222
  this._fitInkBarToContent = value;
1162
1223
  this._changeDetectorRef.markForCheck();
1163
1224
  }
1225
+ _fitInkBarToContent = false;
1226
+ /** Whether tabs should be stretched to fill the header. */
1227
+ stretchTabs = true;
1228
+ /** Alignment for tabs label. */
1229
+ alignTabs = null;
1230
+ /** Whether the tab group should grow to the size of the active tab. */
1231
+ dynamicHeight = false;
1164
1232
  /** The index of the active tab. */
1165
1233
  get selectedIndex() {
1166
1234
  return this._selectedIndex;
@@ -1168,6 +1236,9 @@ class MatTabGroup {
1168
1236
  set selectedIndex(value) {
1169
1237
  this._indexToSelect = isNaN(value) ? null : value;
1170
1238
  }
1239
+ _selectedIndex = null;
1240
+ /** Position of the tab header. */
1241
+ headerPosition = 'above';
1171
1242
  /** Duration for the tab animation. Will be normalized to milliseconds if no units are set. */
1172
1243
  get animationDuration() {
1173
1244
  return this._animationDuration;
@@ -1176,6 +1247,7 @@ class MatTabGroup {
1176
1247
  const stringValue = value + '';
1177
1248
  this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
1178
1249
  }
1250
+ _animationDuration;
1179
1251
  /**
1180
1252
  * `tabindex` to be set on the inner element that wraps the tab content. Can be used for improved
1181
1253
  * accessibility when the tab does not have focusable elements or if it has scrollable content.
@@ -1188,6 +1260,20 @@ class MatTabGroup {
1188
1260
  set contentTabIndex(value) {
1189
1261
  this._contentTabIndex = isNaN(value) ? null : value;
1190
1262
  }
1263
+ _contentTabIndex;
1264
+ /**
1265
+ * Whether pagination should be disabled. This can be used to avoid unnecessary
1266
+ * layout recalculations if it's known that pagination won't be required.
1267
+ */
1268
+ disablePagination = false;
1269
+ /** Whether ripples in the tab group are disabled. */
1270
+ disableRipple = false;
1271
+ /**
1272
+ * By default tabs remove their content from the DOM while it's off-screen.
1273
+ * Setting this to `true` will keep it in the DOM which will prevent elements
1274
+ * like iframes and videos from reloading next time it comes back into the view.
1275
+ */
1276
+ preserveContent = false;
1191
1277
  /**
1192
1278
  * Theme color of the background of the tab group. This API is supported in M2 themes only, it
1193
1279
  * has no effect in M3 themes.
@@ -1212,57 +1298,25 @@ class MatTabGroup {
1212
1298
  }
1213
1299
  this._backgroundColor = value;
1214
1300
  }
1301
+ _backgroundColor;
1302
+ /** Aria label of the inner `tablist` of the group. */
1303
+ ariaLabel;
1304
+ /** Sets the `aria-labelledby` of the inner `tablist` of the group. */
1305
+ ariaLabelledby;
1306
+ /** Output to enable support for two-way binding on `[(selectedIndex)]` */
1307
+ selectedIndexChange = new EventEmitter();
1308
+ /** Event emitted when focus has changed within a tab group. */
1309
+ focusChange = new EventEmitter();
1310
+ /** Event emitted when the body animation has completed */
1311
+ animationDone = new EventEmitter();
1312
+ /** Event emitted when the tab selection has changed. */
1313
+ selectedTabChange = new EventEmitter(true);
1314
+ _groupId;
1315
+ /** Whether the tab group is rendered on the server. */
1316
+ _isServer = !inject(Platform).isBrowser;
1215
1317
  constructor() {
1216
- this._elementRef = inject(ElementRef);
1217
- this._changeDetectorRef = inject(ChangeDetectorRef);
1218
- this._animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
1219
- /** All of the tabs that belong to the group. */
1220
- this._tabs = new QueryList();
1221
- /** The tab index that should be selected after the content has been checked. */
1222
- this._indexToSelect = 0;
1223
- /** Index of the tab that was focused last. */
1224
- this._lastFocusedTabIndex = null;
1225
- /** Snapshot of the height of the tab body wrapper before another tab is activated. */
1226
- this._tabBodyWrapperHeight = 0;
1227
- /** Subscription to tabs being added/removed. */
1228
- this._tabsSubscription = Subscription.EMPTY;
1229
- /** Subscription to changes in the tab labels. */
1230
- this._tabLabelSubscription = Subscription.EMPTY;
1231
- this._fitInkBarToContent = false;
1232
- /** Whether tabs should be stretched to fill the header. */
1233
- this.stretchTabs = true;
1234
- /** Alignment for tabs label. */
1235
- this.alignTabs = null;
1236
- /** Whether the tab group should grow to the size of the active tab. */
1237
- this.dynamicHeight = false;
1238
- this._selectedIndex = null;
1239
- /** Position of the tab header. */
1240
- this.headerPosition = 'above';
1241
- /**
1242
- * Whether pagination should be disabled. This can be used to avoid unnecessary
1243
- * layout recalculations if it's known that pagination won't be required.
1244
- */
1245
- this.disablePagination = false;
1246
- /** Whether ripples in the tab group are disabled. */
1247
- this.disableRipple = false;
1248
- /**
1249
- * By default tabs remove their content from the DOM while it's off-screen.
1250
- * Setting this to `true` will keep it in the DOM which will prevent elements
1251
- * like iframes and videos from reloading next time it comes back into the view.
1252
- */
1253
- this.preserveContent = false;
1254
- /** Output to enable support for two-way binding on `[(selectedIndex)]` */
1255
- this.selectedIndexChange = new EventEmitter();
1256
- /** Event emitted when focus has changed within a tab group. */
1257
- this.focusChange = new EventEmitter();
1258
- /** Event emitted when the body animation has completed */
1259
- this.animationDone = new EventEmitter();
1260
- /** Event emitted when the tab selection has changed. */
1261
- this.selectedTabChange = new EventEmitter(true);
1262
- /** Whether the tab group is rendered on the server. */
1263
- this._isServer = !inject(Platform).isBrowser;
1264
1318
  const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true });
1265
- this._groupId = nextId++;
1319
+ this._groupId = inject(_IdGenerator).getId('mat-tab-group-');
1266
1320
  this.animationDuration =
1267
1321
  defaultConfig && defaultConfig.animationDuration ? defaultConfig.animationDuration : '500ms';
1268
1322
  this.disablePagination =
@@ -1446,11 +1500,11 @@ class MatTabGroup {
1446
1500
  }
1447
1501
  /** Returns a unique id for each tab label element */
1448
1502
  _getTabLabelId(i) {
1449
- return `mat-tab-label-${this._groupId}-${i}`;
1503
+ return `${this._groupId}-label-${i}`;
1450
1504
  }
1451
1505
  /** Returns a unique id for each tab content element */
1452
1506
  _getTabContentId(i) {
1453
- return `mat-tab-content-${this._groupId}-${i}`;
1507
+ return `${this._groupId}-content-${i}`;
1454
1508
  }
1455
1509
  /**
1456
1510
  * Sets the height of the body wrapper to the height of the activating tab if dynamic
@@ -1497,15 +1551,15 @@ class MatTabGroup {
1497
1551
  this._tabHeader.focusIndex = index;
1498
1552
  }
1499
1553
  }
1500
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1501
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.10", type: MatTabGroup, isStandalone: true, selector: "mat-tab-group", inputs: { color: "color", fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], alignTabs: ["mat-align-tabs", "alignTabs"], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], headerPosition: "headerPosition", animationDuration: "animationDuration", contentTabIndex: ["contentTabIndex", "contentTabIndex", numberAttribute], disablePagination: ["disablePagination", "disablePagination", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], preserveContent: ["preserveContent", "preserveContent", booleanAttribute], backgroundColor: "backgroundColor", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { properties: { "class": "\"mat-\" + (color || \"primary\")", "class.mat-mdc-tab-group-dynamic-height": "dynamicHeight", "class.mat-mdc-tab-group-inverted-header": "headerPosition === \"below\"", "class.mat-mdc-tab-group-stretch-tabs": "stretchTabs", "attr.mat-align-tabs": "alignTabs", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-group" }, providers: [
1554
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
1555
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.0", type: MatTabGroup, isStandalone: true, selector: "mat-tab-group", inputs: { color: "color", fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], alignTabs: ["mat-align-tabs", "alignTabs"], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], headerPosition: "headerPosition", animationDuration: "animationDuration", contentTabIndex: ["contentTabIndex", "contentTabIndex", numberAttribute], disablePagination: ["disablePagination", "disablePagination", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], preserveContent: ["preserveContent", "preserveContent", booleanAttribute], backgroundColor: "backgroundColor", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { properties: { "class": "\"mat-\" + (color || \"primary\")", "class.mat-mdc-tab-group-dynamic-height": "dynamicHeight", "class.mat-mdc-tab-group-inverted-header": "headerPosition === \"below\"", "class.mat-mdc-tab-group-stretch-tabs": "stretchTabs", "attr.mat-align-tabs": "alignTabs", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-group" }, providers: [
1502
1556
  {
1503
1557
  provide: MAT_TAB_GROUP,
1504
1558
  useExisting: MatTabGroup,
1505
1559
  },
1506
- ], queries: [{ propertyName: "_allTabs", predicate: MatTab, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["matTabGroup"], ngImport: i0, template: "<mat-tab-header #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [disableRipple]=\"disableRipple\"\n [disablePagination]=\"disablePagination\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"selectedIndex = $event\">\n\n @for (tab of _tabs; track tab; let i = $index) {\n <div class=\"mdc-tab mat-mdc-tab mat-focus-indicator\"\n #tabNode\n role=\"tab\"\n matTabLabelWrapper\n cdkMonitorElementFocus\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n [class.mdc-tab--active]=\"selectedIndex === i\"\n [class]=\"tab.labelClass\"\n [disabled]=\"tab.disabled\"\n [fitInkBarToContent]=\"fitInkBarToContent\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\">\n <span class=\"mdc-tab__ripple\"></span>\n\n <!-- Needs to be a separate element, because we can't put\n `overflow: hidden` on tab due to the ink bar. -->\n <div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"tabNode\"\n [matRippleDisabled]=\"tab.disabled || disableRipple\"></div>\n\n <span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <!--\n If there is a label template, use it, otherwise fall back to the text label.\n Note that we don't have indentation around the text label, because it adds\n whitespace around the text which breaks some internal tests.\n -->\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n } @else {{{tab.textLabel}}}\n </span>\n </span>\n </div>\n }\n</mat-tab-header>\n\n<!--\n We need to project the content somewhere to avoid hydration errors. Some observations:\n 1. This is only necessary on the server.\n 2. We get a hydration error if there aren't any nodes after the `ng-content`.\n 3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n <ng-content/>\n}\n\n<div\n class=\"mat-mdc-tab-body-wrapper\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n #tabBodyWrapper>\n @for (tab of _tabs; track tab; let i = $index) {\n <mat-tab-body role=\"tabpanel\"\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [attr.aria-hidden]=\"selectedIndex !== i\"\n [class.mat-mdc-tab-body-active]=\"selectedIndex === i\"\n [class]=\"tab.bodyClass\"\n [content]=\"tab.content!\"\n [position]=\"tab.position!\"\n [origin]=\"tab.origin\"\n [animationDuration]=\"animationDuration\"\n [preserveContent]=\"preserveContent\"\n (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n (_onCentering)=\"_setTabBodyWrapperHeight($event)\">\n </mat-tab-body>\n }\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-tab.mdc-tab{flex-grow:0}.mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-sys-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab{flex-grow:1}.mat-mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-focus-indicator::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mdc-tab__ripple::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header{flex-direction:column-reverse}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mat-mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable{transition:none !important;animation:none !important}"], dependencies: [{ kind: "component", type: MatTabHeader, selector: "mat-tab-header", inputs: ["aria-label", "aria-labelledby", "disableRipple"] }, { kind: "directive", type: MatTabLabelWrapper, selector: "[matTabLabelWrapper]", inputs: ["disabled"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatTabBody, selector: "mat-tab-body", inputs: ["content", "origin", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_afterLeavingCenter", "_onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1560
+ ], queries: [{ propertyName: "_allTabs", predicate: MatTab, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["matTabGroup"], ngImport: i0, template: "<mat-tab-header #tabHeader\n [selectedIndex]=\"selectedIndex || 0\"\n [disableRipple]=\"disableRipple\"\n [disablePagination]=\"disablePagination\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby\"\n (indexFocused)=\"_focusChanged($event)\"\n (selectFocusedIndex)=\"selectedIndex = $event\">\n\n @for (tab of _tabs; track tab; let i = $index) {\n <div class=\"mdc-tab mat-mdc-tab mat-focus-indicator\"\n #tabNode\n role=\"tab\"\n matTabLabelWrapper\n cdkMonitorElementFocus\n [id]=\"_getTabLabelId(i)\"\n [attr.tabIndex]=\"_getTabIndex(i)\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"_tabs.length\"\n [attr.aria-controls]=\"_getTabContentId(i)\"\n [attr.aria-selected]=\"selectedIndex === i\"\n [attr.aria-label]=\"tab.ariaLabel || null\"\n [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n [class.mdc-tab--active]=\"selectedIndex === i\"\n [class]=\"tab.labelClass\"\n [disabled]=\"tab.disabled\"\n [fitInkBarToContent]=\"fitInkBarToContent\"\n (click)=\"_handleClick(tab, tabHeader, i)\"\n (cdkFocusChange)=\"_tabFocusChanged($event, i)\">\n <span class=\"mdc-tab__ripple\"></span>\n\n <!-- Needs to be a separate element, because we can't put\n `overflow: hidden` on tab due to the ink bar. -->\n <div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"tabNode\"\n [matRippleDisabled]=\"tab.disabled || disableRipple\"></div>\n\n <span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <!--\n If there is a label template, use it, otherwise fall back to the text label.\n Note that we don't have indentation around the text label, because it adds\n whitespace around the text which breaks some internal tests.\n -->\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n } @else {{{tab.textLabel}}}\n </span>\n </span>\n </div>\n }\n</mat-tab-header>\n\n<!--\n We need to project the content somewhere to avoid hydration errors. Some observations:\n 1. This is only necessary on the server.\n 2. We get a hydration error if there aren't any nodes after the `ng-content`.\n 3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n <ng-content/>\n}\n\n<div\n class=\"mat-mdc-tab-body-wrapper\"\n [class._mat-animation-noopable]=\"_animationMode === 'NoopAnimations'\"\n #tabBodyWrapper>\n @for (tab of _tabs; track tab; let i = $index) {\n <mat-tab-body role=\"tabpanel\"\n [id]=\"_getTabContentId(i)\"\n [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null\"\n [attr.aria-labelledby]=\"_getTabLabelId(i)\"\n [attr.aria-hidden]=\"selectedIndex !== i\"\n [class.mat-mdc-tab-body-active]=\"selectedIndex === i\"\n [class]=\"tab.bodyClass\"\n [content]=\"tab.content!\"\n [position]=\"tab.position!\"\n [origin]=\"tab.origin\"\n [animationDuration]=\"animationDuration\"\n [preserveContent]=\"preserveContent\"\n (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n (_onCentering)=\"_setTabBodyWrapperHeight($event)\">\n </mat-tab-body>\n }\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-tab.mdc-tab{flex-grow:0}.mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-sys-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab{flex-grow:1}.mat-mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-focus-indicator::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mdc-tab__ripple::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header{flex-direction:column-reverse}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mat-mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable{transition:none !important;animation:none !important}"], dependencies: [{ kind: "component", type: MatTabHeader, selector: "mat-tab-header", inputs: ["aria-label", "aria-labelledby", "disableRipple"] }, { kind: "directive", type: MatTabLabelWrapper, selector: "[matTabLabelWrapper]", inputs: ["disabled"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatTabBody, selector: "mat-tab-body", inputs: ["content", "origin", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_afterLeavingCenter", "_onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
1507
1561
  }
1508
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabGroup, decorators: [{
1562
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabGroup, decorators: [{
1509
1563
  type: Component,
1510
1564
  args: [{ selector: 'mat-tab-group', exportAs: 'matTabGroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [
1511
1565
  {
@@ -1589,10 +1643,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
1589
1643
  }] } });
1590
1644
  /** A simple change event emitted on focus or selection changes. */
1591
1645
  class MatTabChangeEvent {
1646
+ /** Index of the currently-selected tab. */
1647
+ index;
1648
+ /** Reference to the currently-selected tab. */
1649
+ tab;
1592
1650
  }
1593
1651
 
1594
- // Increasing integer for generating unique ids for tab nav components.
1595
- let nextUniqueId = 0;
1596
1652
  /**
1597
1653
  * Navigation component matching the styles of the tab group header.
1598
1654
  * Provides anchored navigation with animated ink bar.
@@ -1606,6 +1662,9 @@ class MatTabNav extends MatPaginatedTabHeader {
1606
1662
  this._fitInkBarToContent.next(value);
1607
1663
  this._changeDetectorRef.markForCheck();
1608
1664
  }
1665
+ _fitInkBarToContent = new BehaviorSubject(false);
1666
+ /** Whether tabs should be stretched to fill the header. */
1667
+ stretchTabs = true;
1609
1668
  get animationDuration() {
1610
1669
  return this._animationDuration;
1611
1670
  }
@@ -1613,6 +1672,9 @@ class MatTabNav extends MatPaginatedTabHeader {
1613
1672
  const stringValue = value + '';
1614
1673
  this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue;
1615
1674
  }
1675
+ _animationDuration;
1676
+ /** Query list of all tab links of the tab navigation. */
1677
+ _items;
1616
1678
  /**
1617
1679
  * Theme color of the background of the tab nav. This API is supported in M2 themes only, it
1618
1680
  * has no effect in M3 themes.
@@ -1631,6 +1693,29 @@ class MatTabNav extends MatPaginatedTabHeader {
1631
1693
  }
1632
1694
  this._backgroundColor = value;
1633
1695
  }
1696
+ _backgroundColor;
1697
+ /** Whether the ripple effect is disabled or not. */
1698
+ disableRipple = false;
1699
+ /**
1700
+ * Theme color of the nav bar. This API is supported in M2 themes only, it has
1701
+ * no effect in M3 themes.
1702
+ *
1703
+ * For information on applying color variants in M3, see
1704
+ * https://material.angular.io/guide/theming#using-component-color-variants.
1705
+ */
1706
+ color = 'primary';
1707
+ /**
1708
+ * Associated tab panel controlled by the nav bar. If not provided, then the nav bar
1709
+ * follows the ARIA link / navigation landmark pattern. If provided, it follows the
1710
+ * ARIA tabs design pattern.
1711
+ */
1712
+ tabPanel;
1713
+ _tabListContainer;
1714
+ _tabList;
1715
+ _tabListInner;
1716
+ _nextPaginator;
1717
+ _previousPaginator;
1718
+ _inkBar;
1634
1719
  constructor() {
1635
1720
  const elementRef = inject(ElementRef);
1636
1721
  const dir = inject(Directionality, { optional: true });
@@ -1641,19 +1726,6 @@ class MatTabNav extends MatPaginatedTabHeader {
1641
1726
  const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
1642
1727
  const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true });
1643
1728
  super(elementRef, changeDetectorRef, viewportRuler, dir, ngZone, platform, animationMode);
1644
- this._fitInkBarToContent = new BehaviorSubject(false);
1645
- /** Whether tabs should be stretched to fill the header. */
1646
- this.stretchTabs = true;
1647
- /** Whether the ripple effect is disabled or not. */
1648
- this.disableRipple = false;
1649
- /**
1650
- * Theme color of the nav bar. This API is supported in M2 themes only, it has
1651
- * no effect in M3 themes.
1652
- *
1653
- * For information on applying color variants in M3, see
1654
- * https://material.angular.io/guide/theming#using-component-color-variants.
1655
- */
1656
- this.color = 'primary';
1657
1729
  this.disablePagination =
1658
1730
  defaultConfig && defaultConfig.disablePagination != null
1659
1731
  ? defaultConfig.disablePagination
@@ -1706,10 +1778,10 @@ class MatTabNav extends MatPaginatedTabHeader {
1706
1778
  _getRole() {
1707
1779
  return this.tabPanel ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
1708
1780
  }
1709
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1710
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatTabNav, isStandalone: true, selector: "[mat-tab-nav-bar]", inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], animationDuration: "animationDuration", backgroundColor: "backgroundColor", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], color: "color", tabPanel: "tabPanel" }, host: { properties: { "attr.role": "_getRole()", "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'", "class.mat-mdc-tab-nav-bar-stretch-tabs": "stretchTabs", "class.mat-primary": "color !== \"warn\" && color !== \"accent\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "class._mat-animation-noopable": "_animationMode === \"NoopAnimations\"", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-nav-bar mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => MatTabLink), descendants: true }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], exportAs: ["matTabNavBar", "matTabNav"], usesInheritance: true, ngImport: i0, template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-mdc-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n <div class=\"mat-mdc-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-links\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-links,.mat-mdc-tab-links.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
1781
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
1782
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatTabNav, isStandalone: true, selector: "[mat-tab-nav-bar]", inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], animationDuration: "animationDuration", backgroundColor: "backgroundColor", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], color: "color", tabPanel: "tabPanel" }, host: { properties: { "attr.role": "_getRole()", "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'", "class.mat-mdc-tab-nav-bar-stretch-tabs": "stretchTabs", "class.mat-primary": "color !== \"warn\" && color !== \"accent\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "class._mat-animation-noopable": "_animationMode === \"NoopAnimations\"", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-nav-bar mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => MatTabLink), descendants: true }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], exportAs: ["matTabNavBar", "matTabNav"], usesInheritance: true, ngImport: i0, template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n #previousPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n (click)=\"_handlePaginatorClick('before')\"\n (mousedown)=\"_handlePaginatorPress('before', $event)\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-mdc-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n <div class=\"mat-mdc-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\">\n <div class=\"mat-mdc-tab-links\" #tabListInner>\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n #nextPaginator\n mat-ripple\n [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n (mousedown)=\"_handlePaginatorPress('after', $event)\"\n (click)=\"_handlePaginatorClick('after')\"\n (touchend)=\"_stopInterval()\">\n <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-header-pagination-icon-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-links,.mat-mdc-tab-links.cdk-drop-list{min-height:var(--mdc-secondary-navigation-tab-container-height, 48px)}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-header-divider-height, 1px);border-bottom-color:var(--mat-tab-header-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-header-with-background-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-header-with-background-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-header-with-background-foreground-color)}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
1711
1783
  }
1712
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabNav, decorators: [{
1784
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabNav, decorators: [{
1713
1785
  type: Component,
1714
1786
  args: [{ selector: '[mat-tab-nav-bar]', exportAs: 'matTabNavBar, matTabNav', host: {
1715
1787
  '[attr.role]': '_getRole()',
@@ -1763,6 +1835,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
1763
1835
  * Link inside a `mat-tab-nav-bar`.
1764
1836
  */
1765
1837
  class MatTabLink extends InkBarItem {
1838
+ _tabNavBar = inject(MatTabNav);
1839
+ elementRef = inject(ElementRef);
1840
+ _focusMonitor = inject(FocusMonitor);
1841
+ _destroyed = new Subject();
1842
+ /** Whether the tab link is active or not. */
1843
+ _isActive = false;
1766
1844
  /** Whether the link is active. */
1767
1845
  get active() {
1768
1846
  return this._isActive;
@@ -1773,6 +1851,18 @@ class MatTabLink extends InkBarItem {
1773
1851
  this._tabNavBar.updateActiveLink();
1774
1852
  }
1775
1853
  }
1854
+ /** Whether the tab link is disabled. */
1855
+ disabled = false;
1856
+ /** Whether ripples are disabled on the tab link. */
1857
+ disableRipple = false;
1858
+ tabIndex = 0;
1859
+ /**
1860
+ * Ripple configuration for ripples that are launched on pointer down. The ripple config
1861
+ * is set to the global ripple options since we don't have any configurable options for
1862
+ * the tab link ripples.
1863
+ * @docs-private
1864
+ */
1865
+ rippleConfig;
1776
1866
  /**
1777
1867
  * Whether ripples are disabled on interaction.
1778
1868
  * @docs-private
@@ -1783,21 +1873,10 @@ class MatTabLink extends InkBarItem {
1783
1873
  this._tabNavBar.disableRipple ||
1784
1874
  !!this.rippleConfig.disabled);
1785
1875
  }
1876
+ /** Unique id for the tab. */
1877
+ id = inject(_IdGenerator).getId('mat-tab-link-');
1786
1878
  constructor() {
1787
1879
  super();
1788
- this._tabNavBar = inject(MatTabNav);
1789
- this.elementRef = inject(ElementRef);
1790
- this._focusMonitor = inject(FocusMonitor);
1791
- this._destroyed = new Subject();
1792
- /** Whether the tab link is active or not. */
1793
- this._isActive = false;
1794
- /** Whether the tab link is disabled. */
1795
- this.disabled = false;
1796
- /** Whether ripples are disabled on the tab link. */
1797
- this.disableRipple = false;
1798
- this.tabIndex = 0;
1799
- /** Unique id for the tab. */
1800
- this.id = `mat-tab-link-${nextUniqueId++}`;
1801
1880
  inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
1802
1881
  const globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, {
1803
1882
  optional: true,
@@ -1875,10 +1954,10 @@ class MatTabLink extends InkBarItem {
1875
1954
  return this.disabled ? -1 : this.tabIndex;
1876
1955
  }
1877
1956
  }
1878
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1879
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-next.10", type: MatTabLink, isStandalone: true, selector: "[mat-tab-link], [matTabLink]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], id: "id" }, host: { listeners: { "focus": "_handleFocus()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-controls": "_getAriaControls()", "attr.aria-current": "_getAriaCurrent()", "attr.aria-disabled": "disabled", "attr.aria-selected": "_getAriaSelected()", "attr.id": "id", "attr.tabIndex": "_getTabIndex()", "attr.role": "_getRole()", "class.mat-mdc-tab-disabled": "disabled", "class.mdc-tab--active": "active" }, classAttribute: "mdc-tab mat-mdc-tab-link mat-focus-indicator" }, exportAs: ["matTabLink"], usesInheritance: true, ngImport: i0, template: "<span class=\"mdc-tab__ripple\"></span>\n\n<div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"elementRef.nativeElement\"\n [matRippleDisabled]=\"rippleDisabled\"></div>\n\n<span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <ng-content></ng-content>\n </span>\n</span>\n\n", styles: [".mat-mdc-tab-link{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-tab-link.mdc-tab{flex-grow:0}.mat-mdc-tab-link .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab-link:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab-link.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab-link.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab-link .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-sys-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab-link .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab-link:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab-link.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab-link.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab-link .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs .mat-mdc-tab-link{flex-grow:1}.mat-mdc-tab-link::before{margin:5px}@media(max-width: 599px){.mat-mdc-tab-link{min-width:72px}}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1957
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
1958
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.0", type: MatTabLink, isStandalone: true, selector: "[mat-tab-link], [matTabLink]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))], id: "id" }, host: { listeners: { "focus": "_handleFocus()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-controls": "_getAriaControls()", "attr.aria-current": "_getAriaCurrent()", "attr.aria-disabled": "disabled", "attr.aria-selected": "_getAriaSelected()", "attr.id": "id", "attr.tabIndex": "_getTabIndex()", "attr.role": "_getRole()", "class.mat-mdc-tab-disabled": "disabled", "class.mdc-tab--active": "active" }, classAttribute: "mdc-tab mat-mdc-tab-link mat-focus-indicator" }, exportAs: ["matTabLink"], usesInheritance: true, ngImport: i0, template: "<span class=\"mdc-tab__ripple\"></span>\n\n<div\n class=\"mat-mdc-tab-ripple\"\n mat-ripple\n [matRippleTrigger]=\"elementRef.nativeElement\"\n [matRippleDisabled]=\"rippleDisabled\"></div>\n\n<span class=\"mdc-tab__content\">\n <span class=\"mdc-tab__text-label\">\n <ng-content></ng-content>\n </span>\n</span>\n\n", styles: [".mat-mdc-tab-link{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mdc-secondary-navigation-tab-container-height, 48px);font-family:var(--mat-tab-header-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-header-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-header-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-header-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-header-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-tab-link.mdc-tab{flex-grow:0}.mat-mdc-tab-link .mdc-tab-indicator__content--underline{border-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mdc-tab-indicator-active-indicator-height, 2px);border-radius:var(--mdc-tab-indicator-active-indicator-shape, 0)}.mat-mdc-tab-link:hover .mdc-tab__text-label{color:var(--mat-tab-header-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-header-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab-link.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-header-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-header-active-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-header-active-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-header-active-focus-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab-link.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-header-disabled-ripple-color)}.mat-mdc-tab-link .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-header-inactive-label-text-color, var(--mat-sys-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab-link .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab-link:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab-link.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab-link.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab-link .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-header-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs .mat-mdc-tab-link{flex-grow:1}.mat-mdc-tab-link::before{margin:5px}@media(max-width: 599px){.mat-mdc-tab-link{min-width:72px}}"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1880
1959
  }
1881
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabLink, decorators: [{
1960
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabLink, decorators: [{
1882
1961
  type: Component,
1883
1962
  args: [{ selector: '[mat-tab-link], [matTabLink]', exportAs: 'matTabLink', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
1884
1963
  'class': 'mdc-tab mat-mdc-tab-link mat-focus-indicator',
@@ -1915,14 +1994,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
1915
1994
  * Tab panel component associated with MatTabNav.
1916
1995
  */
1917
1996
  class MatTabNavPanel {
1918
- constructor() {
1919
- /** Unique id for the tab panel. */
1920
- this.id = `mat-tab-nav-panel-${nextUniqueId++}`;
1921
- }
1922
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1923
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-next.10", type: MatTabNavPanel, isStandalone: true, selector: "mat-tab-nav-panel", inputs: { id: "id" }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.aria-labelledby": "_activeTabId", "attr.id": "id" }, classAttribute: "mat-mdc-tab-nav-panel" }, exportAs: ["matTabNavPanel"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1997
+ /** Unique id for the tab panel. */
1998
+ id = inject(_IdGenerator).getId('mat-tab-nav-panel-');
1999
+ /** Id of the active tab in the nav bar. */
2000
+ _activeTabId;
2001
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
2002
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.0", type: MatTabNavPanel, isStandalone: true, selector: "mat-tab-nav-panel", inputs: { id: "id" }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.aria-labelledby": "_activeTabId", "attr.id": "id" }, classAttribute: "mat-mdc-tab-nav-panel" }, exportAs: ["matTabNavPanel"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1924
2003
  }
1925
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabNavPanel, decorators: [{
2004
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabNavPanel, decorators: [{
1926
2005
  type: Component,
1927
2006
  args: [{
1928
2007
  selector: 'mat-tab-nav-panel',
@@ -1942,8 +2021,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10",
1942
2021
  }] } });
1943
2022
 
1944
2023
  class MatTabsModule {
1945
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1946
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabsModule, imports: [MatCommonModule,
2024
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2025
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabsModule, imports: [MatCommonModule,
1947
2026
  MatTabContent,
1948
2027
  MatTabLabel,
1949
2028
  MatTab,
@@ -1957,10 +2036,10 @@ class MatTabsModule {
1957
2036
  MatTabGroup,
1958
2037
  MatTabNav,
1959
2038
  MatTabNavPanel,
1960
- MatTabLink] }); }
1961
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabsModule, imports: [MatCommonModule, MatCommonModule] }); }
2039
+ MatTabLink] });
2040
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabsModule, imports: [MatCommonModule, MatCommonModule] });
1962
2041
  }
1963
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.10", ngImport: i0, type: MatTabsModule, decorators: [{
2042
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.0", ngImport: i0, type: MatTabsModule, decorators: [{
1964
2043
  type: NgModule,
1965
2044
  args: [{
1966
2045
  imports: [