fix(mask-applier-service): remove complet mask if part of it is delet…

…ed (#833)

CHANGELOG.md

@@ -1,3 +1,11 @@
+<a name="11.1.4"></a>
+
+# 11.1.4 (2020-11-26)
+
+### Bug Fixes
+
+Remove complet mask if part of it is deleted ([#831](https://github.com/JsDaddy/ngx-mask/issues/831))
+
 <a name="11.1.3"></a>
 
 # 11.1.3 (2020-11-25)
@@ -6,7 +14,7 @@
 
 Now backspace no leaves special characters ([#692](https://github.com/JsDaddy/ngx-mask/issues/692)) ([831](https://github.com/JsDaddy/ngx-mask/pull/831))
 
-<a name="11.1.1"></a>
+<a name="11.1.2"></a>
 
 # 11.1.2 (2020-11-24)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mask",
-  "version": "11.1.3",
+  "version": "11.1.4",
   "description": "awesome ngx mask",
   "license": "MIT",
   "angular-cli": {},

projects/ngx-mask-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mask",
-  "version": "11.1.3",
+  "version": "11.1.4",
   "description": "awesome ngx mask",
   "keywords": [
     "ng2-mask",

projects/ngx-mask-lib/src/lib/mask-applier.service.ts

@@ -1,5 +1,4 @@
 import { Inject, Injectable } from '@angular/core';
-
 import { config, IConfig } from './config';
 
 @Injectable()
@@ -74,8 +73,8 @@ export class MaskApplierService {
     if (inputValue.slice(0, this.prefix.length) === this.prefix) {
       inputValue = inputValue.slice(this.prefix.length, inputValue.length);
     }
-    if (!!this.suffix && inputValue.endsWith(this.suffix)) {
-      inputValue = inputValue.slice(0, inputValue.length - this.suffix.length);
+    if (!!this.suffix && inputValue?.length > 0) {
+      inputValue = this.checkAndRemoveSuffix(inputValue);
     }
     const inputArray: string[] = inputValue.toString().split('');
     if (maskExpression === 'IP') {
@@ -449,6 +448,19 @@ export class MaskApplierService {
     return Infinity;
   };
 
+  private checkAndRemoveSuffix = (inputValue: string): string => {
+    for (let i = this.suffix?.length - 1; i >= 0; i--) {
+      const substr = this.suffix.substr(i, this.suffix?.length);
+      if (
+        inputValue.includes(substr) &&
+        (i - 1 < 0 || !inputValue.includes(this.suffix.substr(i - 1, this.suffix?.length)))
+      ) {
+        return inputValue.replace(substr, '');
+      }
+    }
+    return inputValue;
+  };
+
   private checkInputPrecision = (
     inputValue: string,
     precision: number,

projects/ngx-mask-lib/src/test/test-sufix.spec.ts

@@ -1,8 +1,7 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-
+import { By } from '@angular/platform-browser';
 import { NgxMaskModule } from '../lib/ngx-mask.module';
 import { TestMaskComponent } from './utils/test-component.component';
 import { equal } from './utils/test-functions.component';
@@ -71,6 +70,24 @@ describe('Directive: Mask (Suffix)', () => {
     expect(inputTarget.value).toBe('5678$');
     expect(inputTarget.selectionStart).toEqual(4);
   });
+  it('should delete all if value and part of suffix are deleted', () => {
+    component.mask = 'A*';
+    component.suffix = ' test';
+    const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
+    const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
+    spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
+    fixture.detectChanges();
+
+    inputTarget.value = '10 test';
+    debugElement.triggerEventHandler('input', { target: inputTarget });
+
+    expect(inputTarget.value).toBe('10 test');
+
+    inputTarget.value = 'st';
+    debugElement.triggerEventHandler('input', { target: inputTarget });
+
+    expect(inputTarget.value).toBe('');
+  });
   it('should not delete suffix', () => {
     component.mask = 'A{5}';
     component.suffix = '.com';