license import { Directive , ElementRef , Inject , InjectionToken , NgZone } from '@angular/core' ; /**
 * Interface for a a MatInkBar positioner method, defining the positioning and width of the ink
 * bar in a set of tabs.
 */ export interface _MatInkBarPositioner { ( element ) : { left : string ; width : string ; } ; } /** Injection token for the MatInkBar's Positioner. */ export const _MAT_INK_BAR_POSITIONER = new InjectionToken < _MatInkBarPositioner > ( 'MatInkBarPositioner' , { providedIn : 'root' , factory : _MAT_INK_BAR_POSITIONER_FACTORY } ) ; docs-private export function _MAT_INK_BAR_POSITIONER_FACTORY ( ) { const method = ( element ) => ( { left : element ? ( element . offsetLeft || 0 ) + 'px' : '0' , width : element ? ( element . offsetWidth || 0 ) + 'px' : '0' , } ) ; return method ; } docs-private @ Directive ( { selector : 'mat-ink-bar' , host : { 'class' : 'mat-ink-bar' , } , } ) export class MatInkBar { constructor ( private _elementRef , private _ngZone , @ Inject ( _MAT_INK_BAR_POSITIONER ) private _inkBarPositioner ) { } param element alignToElement ( element ) { this . show ( ) ; if ( typeof requestAnimationFrame !== 'undefined' ) { this . _ngZone . runOutsideAngular ( ( ) => { requestAnimationFrame ( ( ) => this . _setStyles ( element ) ) ; } ) ; } else { this . _setStyles ( element ) ; } } /** Shows the ink bar. */ show ( ) { this . _elementRef . nativeElement . style . visibility = 'visible' ; } /** Hides the ink bar. */ hide ( ) { this . _elementRef . nativeElement . style . visibility = 'hidden' ; } param element private _setStyles ( element ) { const positions = this . _inkBarPositioner ( element ) ; const inkBar = this . _elementRef . nativeElement ; inkBar . style . left = positions . left ; inkBar . style . width = positions . width ; } }