From 0ffc067d4bc037d1f7aa10e2cde8dc832c3dbc58 Mon Sep 17 00:00:00 2001
From: Rodrigo Villaca <rodrigo.villaca.mcse@gmail.com>
Date: Mon, 8 Nov 2021 21:35:18 -0800
Subject: [PATCH] Mask custom placeholder #539

---
 .../domain/element-processor/mask.provider.ts | 33 ++++++++++++++-----
 .../models/config/mask-config.ts              |  2 ++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/client-side/angular/packages/reactive-form-validators/domain/element-processor/mask.provider.ts b/client-side/angular/packages/reactive-form-validators/domain/element-processor/mask.provider.ts
index 692089499..b7cc9d2da 100644
--- a/client-side/angular/packages/reactive-form-validators/domain/element-processor/mask.provider.ts
+++ b/client-side/angular/packages/reactive-form-validators/domain/element-processor/mask.provider.ts
@@ -54,6 +54,8 @@ export class MaskProvider {
 
     minLength: number;
 
+    initialValue: string;
+
     constructor(private input: HTMLInputElement, private mask: string, private renderer: Renderer2, private formControl: FormControl, private config: MaskConfig) {
         this.bind();
     }
@@ -61,6 +63,7 @@ export class MaskProvider {
     bind() {
         if (RegexValidator.isNotBlank(this.formControl.value))
             this.input.value = this.formControl.value;
+        this.initialValue = this.input.value
         this.tests = [];
         this.partialPosition = this.mask.length;
         this.len = this.mask.length;
@@ -96,6 +99,9 @@ export class MaskProvider {
         }
         this.minLength = this.config.minLength ? this.lastRequiredNonMaskPos - (this.lastRequiredNonMaskPos - this.config.minLength) : this.lastRequiredNonMaskPos;
         this.buffer = [];
+        if (this.config.customPlaceholder?.length) {
+            this.slotChar = this.config.customPlaceholder;
+        }
         for (let i = 0; i < maskTokens.length; i++) {
             let c = maskTokens[i];
             if (c != '?') {
@@ -285,10 +291,8 @@ export class MaskProvider {
     }
 
     onBlur(e) {
-        
-        
         this.focus = false;
-        this.checkVal();
+        this.checkVal(undefined, true);
         this.updateModel(e);
         this.updateFilledState();
         if (this.input.value != this.focusText) {
@@ -394,7 +398,7 @@ export class MaskProvider {
         this.input.value = this.buffer.join('');
     }
 
-    checkVal(allow?: boolean) {
+    checkVal(allow?: boolean, isBlur?: boolean ) {
         let test = this.input.value,
             lastMatch = -1,
             i,
@@ -428,10 +432,20 @@ export class MaskProvider {
         if (allow) {
             this.writeBuffer();
         } else if ((lastMatch + 1 < this.partialPosition) && (!this.config.minLength || !(lastMatch >= this.minLength))) {
-            if (this.autoClear || this.buffer.join('') === this.defaultBuffer) {
-                this.isInvalid = true
-            } else {
-                this.isInvalid = true
+            if (isBlur && this.config.clearOnInvalid) {
+                this.isInvalid = true;
+                if (this.buffer.join('') === this.defaultBuffer) {
+                    this.initialValue = '';
+                } 
+        
+                this.buffer = this.initialValue.length ? [...this.initialValue] : [...this.defaultBuffer];
+        
+                this.writeBuffer();
+                this.formControl.setValue(this.initialValue);
+            } else if (this.autoClear || this.buffer.join('') === this.defaultBuffer) {
+                this.isInvalid = true;
+            } else {         
+                this.isInvalid = true;
                 this.writeBuffer();
             }
         } else {
@@ -450,6 +464,9 @@ export class MaskProvider {
 
         this.focusText = this.input.value;
 
+        if (event.type === 'focus')
+            this.initialValue = this.focusText;
+
         pos = this.checkVal();
 
         this.caretTimeoutId = setTimeout(() => {
diff --git a/client-side/angular/packages/reactive-form-validators/models/config/mask-config.ts b/client-side/angular/packages/reactive-form-validators/models/config/mask-config.ts
index ff86df7fa..393e23d29 100644
--- a/client-side/angular/packages/reactive-form-validators/models/config/mask-config.ts
+++ b/client-side/angular/packages/reactive-form-validators/models/config/mask-config.ts
@@ -3,4 +3,6 @@ export interface MaskConfig extends BaseConfigFn<MaskConfig> {
     mask: string;
     minLength?: number;
     valueWithMask?: boolean;
+    customPlaceholder?: string;
+    clearOnInvalid?: boolean;
 }