feat(#917): function done is added [ref: 917]

CHANGELOG.md

@@ -1,3 +1,12 @@
+<a name="13.1.4"></a>
+
+# 13.1.4 (2022-03-30)
+
+### Feature
+
+- Function maskFilled is added
+- Feature ([#917](https://github.com/JsDaddy/ngx-mask/issues/917))
+
 <a name="13.1.3"></a>
 
 # 13.1.3 (2022-03-28)
@@ -7,7 +16,6 @@
 feature ([#940](https://github.com/JsDaddy/ngx-mask/issues/940))
 Fixed ([#965](https://github.com/JsDaddy/ngx-mask/issues/965))
 
-
 <a name="13.1.2"></a>
 
 # 13.1.2 (2022-01-20)
@@ -37,7 +45,7 @@ Fixed ([#965](https://github.com/JsDaddy/ngx-mask/issues/965))
 ### Test/CI fixes
 
 - Enable cypress component testing
-  
+
 <a name="13.0.1"></a>
 
 # 13.0.1 (2021-12-15)

README.md

@@ -478,3 +478,11 @@ You can pass into mask pattern with `||`.
 ```html
 <input mask="(00) 0000-0000||(00) 0 0000-0000" />
 ```
+
+### Function maskFilled
+
+#### Usage
+
+```html
+<input mask="0000" (maskFilled)="maskFilled()" />
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-mask",
-  "version": "13.1.3",
+  "version": "13.1.4",
   "description": "awesome ngx mask",
   "license": "MIT",
   "engines": {

projects/ngx-mask-lib/package.json

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

projects/ngx-mask-lib/src/lib/config.ts

@@ -1,4 +1,4 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, EventEmitter } from '@angular/core';
 
 export interface IConfig {
 	suffix: string;
@@ -18,6 +18,7 @@ export interface IConfig {
 	allowNegativeNumbers: boolean;
 	leadZeroDateTime: boolean;
 	triggerOnMaskChange: boolean;
+	maskFilled: EventEmitter<void>;
 	patterns: {
 		[character: string]: {
 			pattern: RegExp;
@@ -53,6 +54,7 @@ export const initialConfig: IConfig = {
 	specialCharacters: ['-', '/', '(', ')', '.', ':', ' ', '+', ',', '@', '[', ']', '"', "'"],
 	leadZeroDateTime: false,
 	triggerOnMaskChange: false,
+	maskFilled: new EventEmitter<void>(),
 	patterns: {
 		'0': {
 			pattern: new RegExp('\\d'),

projects/ngx-mask-lib/src/lib/mask.directive.ts

@@ -8,11 +8,13 @@ import {
 } from '@angular/forms';
 import {
 	Directive,
+	EventEmitter,
 	forwardRef,
 	HostListener,
 	Inject,
 	Input,
 	OnChanges,
+	Output,
 	SimpleChanges,
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
@@ -78,6 +80,8 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
 
 	@Input() public triggerOnMaskChange: IConfig['triggerOnMaskChange'] | null = null;
 
+	@Output() public maskFilled: IConfig['maskFilled'] = new EventEmitter<void>();
+
 	private _maskValue: string = '';
 
 	private _inputValue!: string;
@@ -291,6 +295,10 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
 				}
 			}
 		}
+		if (value) {
+			this.maskFilled.emit();
+			return null;
+		}
 		return null;
 	}
 

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

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NgxMaskModule } from '../lib/ngx-mask.module';
+
+@Component({
+	selector: 'mask-test',
+	template: ` <input (maskFilled)="maskFilled()" mask="0000" [formControl]="form" /> `,
+})
+export class TestMaskComponent {
+	public form: FormControl = new FormControl('');
+
+	public isMaskFilled = false;
+
+	public maskFilled(): void {
+		this.isMaskFilled = true;
+	}
+}
+
+describe('Directive: Mask (Function maskFilled)', () => {
+	let fixture: ComponentFixture<TestMaskComponent>;
+	let component: TestMaskComponent;
+	let maskFilledSpy: jasmine.Spy<jasmine.Func>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [TestMaskComponent],
+			imports: [ReactiveFormsModule, NgxMaskModule.forRoot()],
+		});
+		fixture = TestBed.createComponent(TestMaskComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+		maskFilledSpy = spyOn(component, 'maskFilled').and.callThrough();
+	});
+	it('should call function maskFilled and isMaskFilled should be true', () => {
+		component.form.setValue('9999');
+		expect(component.isMaskFilled).toBeTrue();
+		expect(maskFilledSpy).toHaveBeenCalledOnceWith();
+	});
+	it('isMaskFilled should be false', () => {
+		component.form.setValue('999');
+		expect(component.isMaskFilled).toBeFalse();
+	});
+});