import { Directive , ElementRef , forwardRef , Input , Inject , NgModule , OnChanges , Optional , Provider , SimpleChanges , Injectable , RendererFactory2 } from '@angular/core' ; import { NG_VALUE_ACCESSOR , ControlValueAccessor , COMPOSITION_BUFFER_MODE } from '@angular/forms' ; import { ɵgetDOM as getDOM , BrowserModule } from '@angular/platform-browser' ; import * as textMask from 'text-mask-core' ; export const conformToMask = textMask . conformToMask ; const { createTextMaskInputElement } = textMask ; export class TextMaskConfig { mask : Array < string | RegExp > | ( ( raw : string ) => Array < string | RegExp > ) | false ; guide ? : boolean ; placeholderChar ? : string ; pipe ? : ( conformedValue : string , config : TextMaskConfig ) => false | string | object ; keepCharPositions ? : boolean ; showMask ? : boolean ; } export const MASKEDINPUT_VALUE_ACCESSOR = { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => MaskedInputDirective ) , multi : true } ; /**
 * We must check whether the agent is Android because composition events
 * behave differently between iOS and Android.
 */ function _isAndroid ( ) { const userAgent = getDOM ( ) ? getDOM ( ) . getUserAgent ( ) : '' ; return /android (\d+)/ . test ( userAgent . toLowerCase ( ) ) ; } @ Injectable ( ) @ Directive ( { host : { '(input)' : '_handleInput($event.target.value)' , '(blur)' : 'onTouched()' , '(compositionstart)' : '_compositionStart()' , '(compositionend)' : '_compositionEnd($event.target.value)' } , selector : '[textMask]' , exportAs : 'textMask' , providers : [ MASKEDINPUT_VALUE_ACCESSOR ] } ) export class MaskedInputDirective implements ControlValueAccessor , OnChanges { @ Input ( 'textMask' ) textMaskConfig : TextMaskConfig = { mask : [ ] , guide : true , placeholderChar : '_' , pipe : undefined , keepCharPositions : false , } ; private textMaskInputElement : any ; private inputElement : HTMLInputElement ; private _renderer : any ; /** Whether the user is creating a composition string (IME events). */ private _composing = false ; constructor ( rendererFactory , private _elementRef , @ Optional ( ) @ Inject ( COMPOSITION_BUFFER_MODE ) private _compositionMode ) { this . _renderer = rendererFactory . createRenderer ( null , null ) ; if ( this . _compositionMode == null ) { this . _compositionMode = ! _isAndroid ( ) ; } } onChange = ( _ ) => { } ; onTouched = ( ) => { } ; ngOnChanges ( changes ) { this . _setupMask ( true ) ; if ( this . textMaskInputElement !== undefined ) { this . textMaskInputElement . update ( this . inputElement . value ) ; } } writeValue ( value ) { this . _setupMask ( ) ; const normalizedValue = value == null ? '' : value ; this . _renderer . setProperty ( this . inputElement , 'value' , normalizedValue ) ; if ( this . textMaskInputElement !== undefined ) { this . textMaskInputElement . update ( value ) ; } } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { this . onTouched = fn ; } setDisabledState ( isDisabled ) { this . _renderer . setProperty ( this . _elementRef . nativeElement , 'disabled' , isDisabled ) ; } _handleInput ( value ) { if ( ! this . _compositionMode || ( this . _compositionMode && ! this . _composing ) ) { this . _setupMask ( ) ; if ( this . textMaskInputElement !== undefined ) { this . textMaskInputElement . update ( value ) ; value = this . inputElement . value ; this . onChange ( value ) ; } } } _setupMask ( create = false ) { if ( ! this . inputElement ) { if ( this . _elementRef . nativeElement . tagName . toUpperCase ( ) === 'INPUT' ) { this . inputElement = this . _elementRef . nativeElement ; } else { this . inputElement = this . _elementRef . nativeElement . getElementsByTagName ( 'INPUT' ) [ 0 ] ; } } if ( this . inputElement && create ) { this . textMaskInputElement = createTextMaskInputElement ( Object . assign ( { inputElement : this . inputElement } , this . textMaskConfig ) ) ; } } _compositionStart ( ) { this . _composing = true ; } _compositionEnd ( value ) { this . _composing = false ; if ( this . _compositionMode ) { this . _handleInput ( value ) ; } } } @ NgModule ( { imports : [ BrowserModule ] , declarations : [ MaskedInputDirective ] , exports : [ MaskedInputDirective ] } ) export class TextMaskModule { }