@@ -13,6 +13,30 @@ import {
13
13
MDCTabIndicatorFoundation
14
14
} from '@material/tab-indicator' ;
15
15
16
+ class TabIndicatorAdapter implements MDCTabIndicatorAdapter {
17
+ constructor ( private readonly _delegate : MatInkBarFoundation ) { }
18
+ addClass ( className : string ) {
19
+ if ( ! this . _delegate . _destroyed ) {
20
+ this . _delegate . _hostElement . classList . add ( className ) ;
21
+ }
22
+ }
23
+ removeClass ( className : string ) {
24
+ if ( ! this . _delegate . _destroyed ) {
25
+ this . _delegate . _hostElement . classList . remove ( className ) ;
26
+ }
27
+ }
28
+ setContentStyleProperty ( propName : string , value : string | null ) {
29
+ this . _delegate . _inkBarContentElement . style . setProperty ( propName , value ) ;
30
+ }
31
+ computeContentClientRect ( ) {
32
+ // `getBoundingClientRect` isn't available on the server.
33
+ return this . _delegate . _destroyed ||
34
+ ! this . _delegate . _inkBarContentElement . getBoundingClientRect ? {
35
+ width : 0 , height : 0 , top : 0 , left : 0 , right : 0 , bottom : 0
36
+ } : this . _delegate . _inkBarContentElement . getBoundingClientRect ( ) ;
37
+ }
38
+ }
39
+
16
40
/**
17
41
* Item inside a tab header relative to which the ink bar can be aligned.
18
42
* @docs -private
@@ -62,34 +86,15 @@ export class MatInkBar {
62
86
* @docs -private
63
87
*/
64
88
export class MatInkBarFoundation {
65
- private _destroyed : boolean ;
89
+ readonly _destroyed : boolean ;
66
90
private _foundation : MDCTabIndicatorFoundation ;
67
91
private _inkBarElement : HTMLElement ;
68
- private _inkBarContentElement : HTMLElement ;
92
+ readonly _inkBarContentElement : HTMLElement ;
69
93
private _fitToContent = false ;
70
- private _adapter : MDCTabIndicatorAdapter = {
71
- addClass : className => {
72
- if ( ! this . _destroyed ) {
73
- this . _hostElement . classList . add ( className ) ;
74
- }
75
- } ,
76
- removeClass : className => {
77
- if ( ! this . _destroyed ) {
78
- this . _hostElement . classList . remove ( className ) ;
79
- }
80
- } ,
81
- setContentStyleProperty : ( propName , value ) => {
82
- this . _inkBarContentElement . style . setProperty ( propName , value ) ;
83
- } ,
84
- computeContentClientRect : ( ) => {
85
- // `getBoundingClientRect` isn't available on the server.
86
- return this . _destroyed || ! this . _inkBarContentElement . getBoundingClientRect ? {
87
- width : 0 , height : 0 , top : 0 , left : 0 , right : 0 , bottom : 0
88
- } : this . _inkBarContentElement . getBoundingClientRect ( ) ;
89
- }
90
- } ;
94
+ private _adapter : MDCTabIndicatorAdapter ;
91
95
92
- constructor ( private _hostElement : HTMLElement , private _document : Document ) {
96
+ constructor ( readonly _hostElement : HTMLElement , private _document : Document ) {
97
+ this . _adapter = new TabIndicatorAdapter ( this ) ;
93
98
this . _foundation = new MDCSlidingTabIndicatorFoundation ( this . _adapter ) ;
94
99
}
95
100
@@ -120,9 +125,10 @@ export class MatInkBarFoundation {
120
125
this . _inkBarElement . parentNode . removeChild ( this . _inkBarElement ) ;
121
126
}
122
127
123
- this . _hostElement = this . _inkBarElement = this . _inkBarContentElement = null ! ;
128
+ ( this as { _hostElement : HTMLElement } ) . _hostElement = this . _inkBarElement
129
+ = ( this as { _inkBarContentElement : HTMLElement } ) . _inkBarContentElement = null ! ;
124
130
this . _foundation . destroy ( ) ;
125
- this . _destroyed = true ;
131
+ ( this as { _destroyed : boolean } ) . _destroyed = true ;
126
132
}
127
133
128
134
/**
@@ -148,7 +154,8 @@ export class MatInkBarFoundation {
148
154
/** Creates and appends the ink bar element. */
149
155
private _createInkBarElement ( ) {
150
156
this . _inkBarElement = this . _document . createElement ( 'span' ) ;
151
- this . _inkBarContentElement = this . _document . createElement ( 'span' ) ;
157
+ ( this as { _inkBarContentElement : HTMLElement } ) . _inkBarContentElement
158
+ = this . _document . createElement ( 'span' ) ;
152
159
153
160
this . _inkBarElement . className = 'mdc-tab-indicator' ;
154
161
this . _inkBarContentElement . className = 'mdc-tab-indicator__content' +
0 commit comments