validatedCity, mask for input, confirmatonService, Version Info,

bizmatch/src/app/components/validated-input/validated-input.component.html

@@ -19,5 +19,7 @@
     (blur)="onTouched()"
     [attr.name]="name"
     class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+    [mask]="mask"
+    [dropSpecialCharacters]="false"
   />
 </div>

bizmatch/src/app/components/validated-input/validated-input.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, forwardRef, Input } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
 import { BaseInputComponent } from '../base-input/base-input.component';
 import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
@@ -9,17 +10,19 @@ import { ValidationMessagesService } from '../validation-messages.service';
   selector: 'app-validated-input',
   templateUrl: './validated-input.component.html',
   standalone: true,
-  imports: [CommonModule, FormsModule, TooltipComponent],
+  imports: [CommonModule, FormsModule, TooltipComponent, NgxMaskDirective, NgxMaskPipe],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => ValidatedInputComponent),
       multi: true,
     },
+    provideNgxMask(),
   ],
 })
 export class ValidatedInputComponent extends BaseInputComponent {
   @Input() kind: 'text' | 'number' | 'email' | 'tel' = 'text';
+  @Input() mask: string;
   constructor(validationMessagesService: ValidationMessagesService) {
     super(validationMessagesService);
   }