@@ -55,6 +55,116 @@ import {MatPaginatedTabHeader, MatPaginatedTabHeaderItem} from '../paginated-tab
55
55
// Increasing integer for generating unique ids for tab nav components.
56
56
let nextUniqueId = 0 ;
57
57
58
+ /**
59
+ * Base class with all of the `MatTabNav` functionality.
60
+ * @docs -private
61
+ */
62
+ @Directive ( )
63
+ export abstract class _MatTabNavBase
64
+ extends MatPaginatedTabHeader
65
+ implements AfterContentChecked , AfterContentInit , OnDestroy
66
+ {
67
+ /** Query list of all tab links of the tab navigation. */
68
+ abstract override _items : QueryList < MatPaginatedTabHeaderItem & { active : boolean ; id : string} > ;
69
+
70
+ /** Background color of the tab nav. */
71
+ @Input ( )
72
+ get backgroundColor ( ) : ThemePalette {
73
+ return this . _backgroundColor ;
74
+ }
75
+
76
+ set backgroundColor ( value : ThemePalette ) {
77
+ const classList = this . _elementRef . nativeElement . classList ;
78
+ classList . remove ( `mat-background-${ this . backgroundColor } ` ) ;
79
+
80
+ if ( value ) {
81
+ classList . add ( `mat-background-${ value } ` ) ;
82
+ }
83
+
84
+ this . _backgroundColor = value ;
85
+ }
86
+
87
+ private _backgroundColor : ThemePalette ;
88
+
89
+ /** Whether the ripple effect is disabled or not. */
90
+ @Input ( )
91
+ get disableRipple ( ) : boolean {
92
+ return this . _disableRipple ;
93
+ }
94
+
95
+ set disableRipple ( value : BooleanInput ) {
96
+ this . _disableRipple = coerceBooleanProperty ( value ) ;
97
+ }
98
+
99
+ private _disableRipple : boolean = false ;
100
+
101
+ /** Theme color of the nav bar. */
102
+ @Input ( ) color : ThemePalette = 'primary' ;
103
+
104
+ /**
105
+ * Associated tab panel controlled by the nav bar. If not provided, then the nav bar
106
+ * follows the ARIA link / navigation landmark pattern. If provided, it follows the
107
+ * ARIA tabs design pattern.
108
+ */
109
+ @Input ( ) tabPanel ?: MatTabNavPanel ;
110
+
111
+ constructor (
112
+ elementRef : ElementRef ,
113
+ @Optional ( ) dir : Directionality ,
114
+ ngZone : NgZone ,
115
+ changeDetectorRef : ChangeDetectorRef ,
116
+ viewportRuler : ViewportRuler ,
117
+ platform : Platform ,
118
+ @Optional ( ) @Inject ( ANIMATION_MODULE_TYPE ) animationMode ?: string ,
119
+ ) {
120
+ super ( elementRef , changeDetectorRef , viewportRuler , dir , ngZone , platform , animationMode ) ;
121
+ }
122
+
123
+ protected _itemSelected ( ) {
124
+ // noop
125
+ }
126
+
127
+ override ngAfterContentInit ( ) {
128
+ // We need this to run before the `changes` subscription in parent to ensure that the
129
+ // selectedIndex is up-to-date by the time the super class starts looking for it.
130
+ this . _items . changes . pipe ( startWith ( null ) , takeUntil ( this . _destroyed ) ) . subscribe ( ( ) => {
131
+ this . updateActiveLink ( ) ;
132
+ } ) ;
133
+
134
+ super . ngAfterContentInit ( ) ;
135
+ }
136
+
137
+ /** Notifies the component that the active link has been changed. */
138
+ updateActiveLink ( ) {
139
+ if ( ! this . _items ) {
140
+ return ;
141
+ }
142
+
143
+ const items = this . _items . toArray ( ) ;
144
+
145
+ for ( let i = 0 ; i < items . length ; i ++ ) {
146
+ if ( items [ i ] . active ) {
147
+ this . selectedIndex = i ;
148
+ this . _changeDetectorRef . markForCheck ( ) ;
149
+
150
+ if ( this . tabPanel ) {
151
+ this . tabPanel . _activeTabId = items [ i ] . id ;
152
+ }
153
+
154
+ return ;
155
+ }
156
+ }
157
+
158
+ // The ink bar should hide itself if no items are active.
159
+ this . selectedIndex = - 1 ;
160
+ this . _inkBar . hide ( ) ;
161
+ }
162
+
163
+ _getRole ( ) : string | null {
164
+ return this . tabPanel ? 'tablist' : this . _elementRef . nativeElement . getAttribute ( 'role' ) ;
165
+ }
166
+ }
167
+
58
168
// Boilerplate for applying mixins to MatTabLink.
59
169
const _MatTabLinkMixinBase = mixinTabIndex ( mixinDisableRipple ( mixinDisabled ( class { } ) ) ) ;
60
170
@@ -189,116 +299,6 @@ export class _MatTabLinkBase
189
299
190
300
const _MatTabLinkBaseWithInkBarItem = mixinInkBarItem ( _MatTabLinkBase ) ;
191
301
192
- /**
193
- * Base class with all of the `MatTabNav` functionality.
194
- * @docs -private
195
- */
196
- @Directive ( )
197
- export abstract class _MatTabNavBase
198
- extends MatPaginatedTabHeader
199
- implements AfterContentChecked , AfterContentInit , OnDestroy
200
- {
201
- /** Query list of all tab links of the tab navigation. */
202
- abstract override _items : QueryList < MatPaginatedTabHeaderItem & { active : boolean ; id : string} > ;
203
-
204
- /** Background color of the tab nav. */
205
- @Input ( )
206
- get backgroundColor ( ) : ThemePalette {
207
- return this . _backgroundColor ;
208
- }
209
-
210
- set backgroundColor ( value : ThemePalette ) {
211
- const classList = this . _elementRef . nativeElement . classList ;
212
- classList . remove ( `mat-background-${ this . backgroundColor } ` ) ;
213
-
214
- if ( value ) {
215
- classList . add ( `mat-background-${ value } ` ) ;
216
- }
217
-
218
- this . _backgroundColor = value ;
219
- }
220
-
221
- private _backgroundColor : ThemePalette ;
222
-
223
- /** Whether the ripple effect is disabled or not. */
224
- @Input ( )
225
- get disableRipple ( ) : boolean {
226
- return this . _disableRipple ;
227
- }
228
-
229
- set disableRipple ( value : BooleanInput ) {
230
- this . _disableRipple = coerceBooleanProperty ( value ) ;
231
- }
232
-
233
- private _disableRipple : boolean = false ;
234
-
235
- /** Theme color of the nav bar. */
236
- @Input ( ) color : ThemePalette = 'primary' ;
237
-
238
- /**
239
- * Associated tab panel controlled by the nav bar. If not provided, then the nav bar
240
- * follows the ARIA link / navigation landmark pattern. If provided, it follows the
241
- * ARIA tabs design pattern.
242
- */
243
- @Input ( ) tabPanel ?: MatTabNavPanel ;
244
-
245
- constructor (
246
- elementRef : ElementRef ,
247
- @Optional ( ) dir : Directionality ,
248
- ngZone : NgZone ,
249
- changeDetectorRef : ChangeDetectorRef ,
250
- viewportRuler : ViewportRuler ,
251
- platform : Platform ,
252
- @Optional ( ) @Inject ( ANIMATION_MODULE_TYPE ) animationMode ?: string ,
253
- ) {
254
- super ( elementRef , changeDetectorRef , viewportRuler , dir , ngZone , platform , animationMode ) ;
255
- }
256
-
257
- protected _itemSelected ( ) {
258
- // noop
259
- }
260
-
261
- override ngAfterContentInit ( ) {
262
- // We need this to run before the `changes` subscription in parent to ensure that the
263
- // selectedIndex is up-to-date by the time the super class starts looking for it.
264
- this . _items . changes . pipe ( startWith ( null ) , takeUntil ( this . _destroyed ) ) . subscribe ( ( ) => {
265
- this . updateActiveLink ( ) ;
266
- } ) ;
267
-
268
- super . ngAfterContentInit ( ) ;
269
- }
270
-
271
- /** Notifies the component that the active link has been changed. */
272
- updateActiveLink ( ) {
273
- if ( ! this . _items ) {
274
- return ;
275
- }
276
-
277
- const items = this . _items . toArray ( ) ;
278
-
279
- for ( let i = 0 ; i < items . length ; i ++ ) {
280
- if ( items [ i ] . active ) {
281
- this . selectedIndex = i ;
282
- this . _changeDetectorRef . markForCheck ( ) ;
283
-
284
- if ( this . tabPanel ) {
285
- this . tabPanel . _activeTabId = items [ i ] . id ;
286
- }
287
-
288
- return ;
289
- }
290
- }
291
-
292
- // The ink bar should hide itself if no items are active.
293
- this . selectedIndex = - 1 ;
294
- this . _inkBar . hide ( ) ;
295
- }
296
-
297
- _getRole ( ) : string | null {
298
- return this . tabPanel ? 'tablist' : this . _elementRef . nativeElement . getAttribute ( 'role' ) ;
299
- }
300
- }
301
-
302
302
/**
303
303
* Navigation component matching the styles of the tab group header.
304
304
* Provides anchored navigation with animated ink bar.
0 commit comments