angular2-text-mask - npm Package Compare versions

Comparing version 8.0.5 to 9.0.0

dist/angular2TextMask.d.ts

@@ -1,26 +0,33 @@
-import { ElementRef, OnChanges, Provider, Renderer, SimpleChanges } from '@angular/core';
+import { ElementRef, OnChanges, Provider, Renderer2, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+export declare 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 declare const MASKEDINPUT_VALUE_ACCESSOR: Provider;
 export declare class MaskedInputDirective implements ControlValueAccessor, OnChanges {
-    private renderer;
-    private element;
+    private _renderer;
+    private _elementRef;
+    private _compositionMode;
+    textMaskConfig: TextMaskConfig;
+    onChange: (_: any) => void;
+    onTouched: () => void;
     private textMaskInputElement;
     private inputElement;
-    textMaskConfig: {
-        mask: any[];
-        guide: boolean;
-        placeholderChar: string;
-        pipe: any;
-        keepCharPositions: boolean;
-    };
-    _onTouched: () => void;
-    _onChange: (_: any) => void;
-    constructor(renderer: Renderer, element: ElementRef);
+    /** Whether the user is creating a composition string (IME events). */
+    private _composing;
+    constructor(_renderer: Renderer2, _elementRef: ElementRef, _compositionMode: boolean);
     ngOnChanges(changes: SimpleChanges): void;
     writeValue(value: any): void;
-    registerOnChange(fn: (value: any) => any): void;
-    registerOnTouched(fn: () => any): void;
+    registerOnChange(fn: (_: any) => void): void;
+    registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
-    onInput(value: any): void;
-    private setupMask(create?);
+    _handleInput(value: any): void;
+    _setupMask(create?: boolean): void;
+    _compositionStart(): void;
+    _compositionEnd(value: any): void;
 }
@@ -27,0 +34,0 @@ export declare class TextMaskModule {

dist/angular2TextMask.js

 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __param = (this && this.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
+var platform_browser_1 = require("@angular/platform-browser");
 var textMaskCore_1 = require("text-mask-core/dist/textMaskCore");
+var TextMaskConfig = /** @class */ (function () {
+    function TextMaskConfig() {
+    }
+    return TextMaskConfig;
+}());
+exports.TextMaskConfig = TextMaskConfig;
 exports.MASKEDINPUT_VALUE_ACCESSOR = {
@@ -23,6 +18,15 @@ provide: forms_1.NG_VALUE_ACCESSOR,
 };
-var MaskedInputDirective = (function () {
-    function MaskedInputDirective(renderer, element) {
-        this.renderer = renderer;
-        this.element = element;
+/**
+ * We must check whether the agent is Android because composition events
+ * behave differently between iOS and Android.
+ */
+function _isAndroid() {
+    var userAgent = platform_browser_1.ɵgetDOM() ? platform_browser_1.ɵgetDOM().getUserAgent() : '';
+    return /android (\d+)/.test(userAgent.toLowerCase());
+}
+var MaskedInputDirective = /** @class */ (function () {
+    function MaskedInputDirective(_renderer, _elementRef, _compositionMode) {
+        this._renderer = _renderer;
+        this._elementRef = _elementRef;
+        this._compositionMode = _compositionMode;
         this.textMaskConfig = {
@@ -35,7 +39,12 @@ mask: [],
         };
-        this._onTouched = function () { };
-        this._onChange = function (_) { };
+        this.onChange = function (_) { };
+        this.onTouched = function () { };
+        /** Whether the user is creating a composition string (IME events). */
+        this._composing = false;
+        if (this._compositionMode == null) {
+            this._compositionMode = !_isAndroid();
+        }
     }
     MaskedInputDirective.prototype.ngOnChanges = function (changes) {
-        this.setupMask(true);
+        this._setupMask(true);
         if (this.textMaskInputElement !== undefined) {
@@ -46,6 +55,6 @@ this.textMaskInputElement.update(this.inputElement.value);
     MaskedInputDirective.prototype.writeValue = function (value) {
-        this.setupMask();
+        this._setupMask();
         // set the initial value for cases where the mask is disabled
         var normalizedValue = value == null ? '' : value;
-        this.renderer.setElementProperty(this.inputElement, 'value', normalizedValue);
+        this._renderer.setProperty(this.inputElement, 'value', normalizedValue);
         if (this.textMaskInputElement !== undefined) {
@@ -55,26 +64,28 @@ this.textMaskInputElement.update(value);
     };
-    MaskedInputDirective.prototype.registerOnChange = function (fn) { this._onChange = fn; };
-    MaskedInputDirective.prototype.registerOnTouched = function (fn) { this._onTouched = fn; };
+    MaskedInputDirective.prototype.registerOnChange = function (fn) { this.onChange = fn; };
+    MaskedInputDirective.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
     MaskedInputDirective.prototype.setDisabledState = function (isDisabled) {
-        this.renderer.setElementProperty(this.element.nativeElement, 'disabled', isDisabled);
+        this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
     };
-    MaskedInputDirective.prototype.onInput = function (value) {
-        this.setupMask();
-        if (this.textMaskInputElement !== undefined) {
-            this.textMaskInputElement.update(value);
-            // get the updated value
-            value = this.inputElement.value;
-            this._onChange(value);
+    MaskedInputDirective.prototype._handleInput = function (value) {
+        if (!this._compositionMode || (this._compositionMode && !this._composing)) {
+            this._setupMask();
+            if (this.textMaskInputElement !== undefined) {
+                this.textMaskInputElement.update(value);
+                // get the updated value
+                value = this.inputElement.value;
+                this.onChange(value);
+            }
         }
     };
-    MaskedInputDirective.prototype.setupMask = function (create) {
+    MaskedInputDirective.prototype._setupMask = function (create) {
         if (create === void 0) { create = false; }
         if (!this.inputElement) {
-            if (this.element.nativeElement.tagName.toUpperCase() === 'INPUT') {
+            if (this._elementRef.nativeElement.tagName.toUpperCase() === 'INPUT') {
                 // `textMask` directive is used directly on an input element
-                this.inputElement = this.element.nativeElement;
+                this.inputElement = this._elementRef.nativeElement;
             }
             else {
                 // `textMask` directive is used on an abstracted input element, `md-input-container`, etc
-                this.inputElement = this.element.nativeElement.getElementsByTagName('INPUT')[0];
+                this.inputElement = this._elementRef.nativeElement.getElementsByTagName('INPUT')[0];
             }
@@ -86,33 +97,45 @@ }
     };
+    MaskedInputDirective.prototype._compositionStart = function () { this._composing = true; };
+    MaskedInputDirective.prototype._compositionEnd = function (value) {
+        this._composing = false;
+        this._compositionMode && this._handleInput(value);
+    };
+    MaskedInputDirective.decorators = [
+        { type: core_1.Directive, args: [{
+                    host: {
+                        '(input)': '_handleInput($event.target.value)',
+                        '(blur)': 'onTouched()',
+                        '(compositionstart)': '_compositionStart()',
+                        '(compositionend)': '_compositionEnd($event.target.value)'
+                    },
+                    selector: '[textMask]',
+                    exportAs: 'textMask',
+                    providers: [exports.MASKEDINPUT_VALUE_ACCESSOR]
+                },] },
+    ];
+    /** @nocollapse */
+    MaskedInputDirective.ctorParameters = function () { return [
+        { type: core_1.Renderer2, },
+        { type: core_1.ElementRef, },
+        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: [forms_1.COMPOSITION_BUFFER_MODE,] },] },
+    ]; };
+    MaskedInputDirective.propDecorators = {
+        'textMaskConfig': [{ type: core_1.Input, args: ['textMask',] },],
+    };
     return MaskedInputDirective;
 }());
-__decorate([
-    core_1.Input('textMask'),
-    __metadata("design:type", Object)
-], MaskedInputDirective.prototype, "textMaskConfig", void 0);
-MaskedInputDirective = __decorate([
-    core_1.Directive({
-        host: {
-            '(input)': 'onInput($event.target.value)',
-            '(blur)': '_onTouched()'
-        },
-        selector: '[textMask]',
-        exportAs: 'textMask',
-        providers: [exports.MASKEDINPUT_VALUE_ACCESSOR]
-    }),
-    __param(0, core_1.Inject(core_1.Renderer)), __param(1, core_1.Inject(core_1.ElementRef)),
-    __metadata("design:paramtypes", [core_1.Renderer, core_1.ElementRef])
-], MaskedInputDirective);
 exports.MaskedInputDirective = MaskedInputDirective;
-var TextMaskModule = (function () {
+var TextMaskModule = /** @class */ (function () {
     function TextMaskModule() {
     }
+    TextMaskModule.decorators = [
+        { type: core_1.NgModule, args: [{
+                    declarations: [MaskedInputDirective],
+                    exports: [MaskedInputDirective]
+                },] },
+    ];
+    /** @nocollapse */
+    TextMaskModule.ctorParameters = function () { return []; };
     return TextMaskModule;
 }());
-TextMaskModule = __decorate([
-    core_1.NgModule({
-        declarations: [MaskedInputDirective],
-        exports: [MaskedInputDirective]
-    })
-], TextMaskModule);
 exports.TextMaskModule = TextMaskModule;
@@ -119,0 +142,0 @@ var textMaskCore_2 = require("text-mask-core/dist/textMaskCore");

dist/angular2TextMask.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MASKEDINPUT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MaskedInputDirective"},"multi":true},"MaskedInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"host":{"(input)":"onInput($event.target.value)","(blur)":"_onTouched()","$quoted$":["(input)","(blur)"]},"selector":"[textMask]","exportAs":"textMask","providers":[{"__symbolic":"reference","name":"MASKEDINPUT_VALUE_ACCESSOR"}]}]}],"members":{"textMaskConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["textMask"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method"}],"setupMask":[{"__symbolic":"method"}]}},"TextMaskModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MaskedInputDirective"}],"exports":[{"__symbolic":"reference","name":"MaskedInputDirective"}]}]}]}},"exports":[{"from":"text-mask-core/dist/textMaskCore","export":["conformToMask"]}]},{"__symbolic":"module","version":1,"metadata":{"MASKEDINPUT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MaskedInputDirective"},"multi":true},"MaskedInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"host":{"(input)":"onInput($event.target.value)","(blur)":"_onTouched()"},"selector":"[textMask]","exportAs":"textMask","providers":[{"__symbolic":"reference","name":"MASKEDINPUT_VALUE_ACCESSOR"}]}]}],"members":{"textMaskConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["textMask"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method"}],"setupMask":[{"__symbolic":"method"}]}},"TextMaskModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MaskedInputDirective"}],"exports":[{"__symbolic":"reference","name":"MaskedInputDirective"}]}]}]}},"exports":[{"from":"text-mask-core/dist/textMaskCore","export":["conformToMask"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{"TextMaskConfig":{"__symbolic":"class"},"MASKEDINPUT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MaskedInputDirective"},"multi":true},"MaskedInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"host":{"(input)":"_handleInput($event.target.value)","(blur)":"onTouched()","(compositionstart)":"_compositionStart()","(compositionend)":"_compositionEnd($event.target.value)","$quoted$":["(input)","(blur)","(compositionstart)","(compositionend)"]},"selector":"[textMask]","exportAs":"textMask","providers":[{"__symbolic":"reference","name":"MASKEDINPUT_VALUE_ACCESSOR"}]}]}],"members":{"textMaskConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["textMask"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/forms","name":"COMPOSITION_BUFFER_MODE"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","name":"boolean"}]}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"_handleInput":[{"__symbolic":"method"}],"_setupMask":[{"__symbolic":"method"}],"_compositionStart":[{"__symbolic":"method"}],"_compositionEnd":[{"__symbolic":"method"}]}},"TextMaskModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MaskedInputDirective"}],"exports":[{"__symbolic":"reference","name":"MaskedInputDirective"}]}]}]}},"exports":[{"from":"text-mask-core/dist/textMaskCore","export":["conformToMask"]}]},{"__symbolic":"module","version":1,"metadata":{"TextMaskConfig":{"__symbolic":"class"},"MASKEDINPUT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MaskedInputDirective"},"multi":true},"MaskedInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"host":{"(input)":"_handleInput($event.target.value)","(blur)":"onTouched()","(compositionstart)":"_compositionStart()","(compositionend)":"_compositionEnd($event.target.value)"},"selector":"[textMask]","exportAs":"textMask","providers":[{"__symbolic":"reference","name":"MASKEDINPUT_VALUE_ACCESSOR"}]}]}],"members":{"textMaskConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["textMask"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@angular/forms","name":"COMPOSITION_BUFFER_MODE"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","name":"boolean"}]}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"_handleInput":[{"__symbolic":"method"}],"_setupMask":[{"__symbolic":"method"}],"_compositionStart":[{"__symbolic":"method"}],"_compositionEnd":[{"__symbolic":"method"}]}},"TextMaskModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MaskedInputDirective"}],"exports":[{"__symbolic":"reference","name":"MaskedInputDirective"}]}]}]}},"exports":[{"from":"text-mask-core/dist/textMaskCore","export":["conformToMask"]}]}]

package.json

 {
   "name": "angular2-text-mask",
-  "version": "8.0.5",
+  "version": "9.0.0",
   "description": "Angular 2 directive for input text masking",
@@ -38,11 +38,10 @@ "main": "dist/angular2TextMask.js",
   "devDependencies": {
-    "@angular/common": "^2.1.2",
-    "@angular/compiler": "^2.1.2",
-    "@angular/compiler-cli": "^2.1.2",
-    "@angular/core": "^2.1.2",
-    "@angular/forms": "^2.1.2",
-    "@angular/http": "^2.1.2",
-    "@angular/platform-browser": "^2.1.2",
-    "@angular/platform-browser-dynamic": "^2.1.2",
-    "@angular/platform-server": "^2.1.2",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
     "@types/core-js": "^0.9.34",
@@ -66,4 +65,4 @@ "@types/jasmine": "^2.5.52",
     "tslint": "^3.13.0",
-    "typescript": "~2.3.0",
-    "zone.js": "^0.7.2"
+    "typescript": "~2.7.0",
+    "zone.js": "^0.8.4"
   },
@@ -70,0 +69,0 @@ "dependencies": {

src/angular2TextMask.ts

@@ -1,5 +0,15 @@
-import { Directive, ElementRef, forwardRef, Input, Inject, NgModule, OnChanges, Provider, Renderer, SimpleChanges } from '@angular/core'
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
+import { Directive, ElementRef, forwardRef, Input, Inject, NgModule, OnChanges, Optional, Provider, Renderer2, SimpleChanges } from '@angular/core'
+import { NG_VALUE_ACCESSOR, ControlValueAccessor, COMPOSITION_BUFFER_MODE } from '@angular/forms'
+import {ɵgetDOM as getDOM} from '@angular/platform-browser'
 import { createTextMaskInputElement } from 'text-mask-core/dist/textMaskCore'
 
+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: Provider = {
@@ -11,6 +21,17 @@ provide: NG_VALUE_ACCESSOR,
 
+/**
+ * We must check whether the agent is Android because composition events
+ * behave differently between iOS and Android.
+ */
+function _isAndroid(): boolean {
+  const userAgent = getDOM() ? getDOM().getUserAgent() : ''
+  return /android (\d+)/.test(userAgent.toLowerCase())
+}
+
 @Directive({
   host: {
-    '(input)': 'onInput($event.target.value)',
-    '(blur)': '_onTouched()'
+    '(input)': '_handleInput($event.target.value)',
+    '(blur)': 'onTouched()',
+    '(compositionstart)': '_compositionStart()',
+    '(compositionend)': '_compositionEnd($event.target.value)'
   },
@@ -22,7 +43,3 @@ selector: '[textMask]',
 export class MaskedInputDirective implements ControlValueAccessor, OnChanges {
-  private textMaskInputElement: any
-  private inputElement: HTMLInputElement
-
-  @Input('textMask')
-  textMaskConfig = {
+  @Input('textMask') textMaskConfig: TextMaskConfig = {
     mask: [],
@@ -35,9 +52,23 @@ guide: true,
 
-  _onTouched = () => {}
-  _onChange = (_: any) => {}
+  onChange = (_: any) => {}
+  onTouched = () => {}
 
-  constructor(@Inject(Renderer) private renderer: Renderer, @Inject(ElementRef) private element: ElementRef) {}
+  private textMaskInputElement: any
+  private inputElement: HTMLInputElement
 
+  /** Whether the user is creating a composition string (IME events). */
+  private _composing = false
+
+  constructor(
+    private _renderer: Renderer2,
+    private _elementRef: ElementRef,
+    @Optional() @Inject(COMPOSITION_BUFFER_MODE)private _compositionMode: boolean
+  ) {
+    if (this._compositionMode == null) {
+      this._compositionMode = !_isAndroid()
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges) {
-    this.setupMask(true)
+    this._setupMask(true)
     if (this.textMaskInputElement !== undefined) {
@@ -49,7 +80,7 @@ this.textMaskInputElement.update(this.inputElement.value)
   writeValue(value: any) {
-    this.setupMask()
+    this._setupMask()
 
     // set the initial value for cases where the mask is disabled
     const normalizedValue = value == null ? '' : value
-    this.renderer.setElementProperty(this.inputElement, 'value', normalizedValue)
+    this._renderer.setProperty(this.inputElement, 'value', normalizedValue)
 
@@ -61,30 +92,32 @@ if (this.textMaskInputElement !== undefined) {
 
-  registerOnChange(fn: (value: any) => any): void { this._onChange = fn }
+  registerOnChange(fn: (_: any) => void): void { this.onChange = fn }
+  registerOnTouched(fn: () => void): void { this.onTouched = fn }
 
-  registerOnTouched(fn: () => any): void { this._onTouched = fn }
+  setDisabledState(isDisabled: boolean): void {
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled)
+  }
 
-  setDisabledState(isDisabled: boolean) {
-    this.renderer.setElementProperty(this.element.nativeElement, 'disabled', isDisabled)
-  }
   
-  onInput(value) {
-    this.setupMask()
+  _handleInput(value) {
+    if (!this._compositionMode || (this._compositionMode && !this._composing)) {
+      this._setupMask()
 
-    if (this.textMaskInputElement !== undefined) {
-      this.textMaskInputElement.update(value)
-      
-      // get the updated value
-      value = this.inputElement.value
-      this._onChange(value)
+      if (this.textMaskInputElement !== undefined) {
+        this.textMaskInputElement.update(value)
+        
+        // get the updated value
+        value = this.inputElement.value
+        this.onChange(value)
+      }
     }
   }
 
-  private setupMask(create = false) {
+  _setupMask(create = false) {
     if (!this.inputElement) {
-      if (this.element.nativeElement.tagName.toUpperCase() === 'INPUT') {
+      if (this._elementRef.nativeElement.tagName.toUpperCase() === 'INPUT') {
         // `textMask` directive is used directly on an input element
-        this.inputElement = this.element.nativeElement
+        this.inputElement = this._elementRef.nativeElement
       } else {
         // `textMask` directive is used on an abstracted input element, `md-input-container`, etc
-        this.inputElement = this.element.nativeElement.getElementsByTagName('INPUT')[0]
+        this.inputElement = this._elementRef.nativeElement.getElementsByTagName('INPUT')[0]
       }
@@ -100,2 +133,9 @@ }
   }
+
+  _compositionStart(): void { this._composing = true }
+
+  _compositionEnd(value: any): void {
+    this._composing = false
+    this._compositionMode && this._handleInput(value)
+  }
 }
@@ -102,0 +142,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

28

decreased by-3.45%

Worsened metrics

Total package byte prevSize

27612

decreased by-62.12%

Number of package files

10

decreased by-44.44%

Lines of code

339

decreased by-51.01%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes