@@ -13,6 +13,30 @@ import {
1313 MDCTabIndicatorFoundation
1414} from '@material/tab-indicator' ;
1515
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+
1640/**
1741 * Item inside a tab header relative to which the ink bar can be aligned.
1842 * @docs -private
@@ -62,34 +86,15 @@ export class MatInkBar {
6286 * @docs -private
6387 */
6488export class MatInkBarFoundation {
65- private _destroyed : boolean ;
89+ readonly _destroyed : boolean ;
6690 private _foundation : MDCTabIndicatorFoundation ;
6791 private _inkBarElement : HTMLElement ;
68- private _inkBarContentElement : HTMLElement ;
92+ readonly _inkBarContentElement : HTMLElement ;
6993 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 ;
9195
92- constructor ( private _hostElement : HTMLElement , private _document : Document ) {
96+ constructor ( readonly _hostElement : HTMLElement , private _document : Document ) {
97+ this . _adapter = new TabIndicatorAdapter ( this ) ;
9398 this . _foundation = new MDCSlidingTabIndicatorFoundation ( this . _adapter ) ;
9499 }
95100
@@ -120,9 +125,10 @@ export class MatInkBarFoundation {
120125 this . _inkBarElement . parentNode . removeChild ( this . _inkBarElement ) ;
121126 }
122127
123- this . _hostElement = this . _inkBarElement = this . _inkBarContentElement = null ! ;
128+ ( this as { _hostElement : HTMLElement } ) . _hostElement = this . _inkBarElement
129+ = ( this as { _inkBarContentElement : HTMLElement } ) . _inkBarContentElement = null ! ;
124130 this . _foundation . destroy ( ) ;
125- this . _destroyed = true ;
131+ ( this as { _destroyed : boolean } ) . _destroyed = true ;
126132 }
127133
128134 /**
@@ -148,7 +154,8 @@ export class MatInkBarFoundation {
148154 /** Creates and appends the ink bar element. */
149155 private _createInkBarElement ( ) {
150156 this . _inkBarElement = this . _document . createElement ( 'span' ) ;
151- this . _inkBarContentElement = this . _document . createElement ( 'span' ) ;
157+ ( this as { _inkBarContentElement : HTMLElement } ) . _inkBarContentElement
158+ = this . _document . createElement ( 'span' ) ;
152159
153160 this . _inkBarElement . className = 'mdc-tab-indicator' ;
154161 this . _inkBarContentElement . className = 'mdc-tab-indicator__content' +
0 commit comments