conversion inputs to components

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

@@ -1,30 +1,15 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, forwardRef, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
 
 @Component({
   selector: 'app-validated-input',
-  template: `
-    <div>
-      <label [for]="name" class="block text-sm font-medium text-gray-700">
-        {{ label }}
-        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
-      </label>
-      <input
-        type="text"
-        [id]="name"
-        [ngModel]="value"
-        (input)="onInputChange($event)"
-        (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"
-      />
-    </div>
-  `,
+  templateUrl: './validated-input.component.html',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TooltipComponent],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -35,15 +20,13 @@ import { ValidationMessagesService } from '../validation-messages.service';
 })
 export class ValidatedInputComponent extends BaseInputComponent {
   @Output() valueChange = new EventEmitter<any>();
-
+  @Input() kind: 'text' | 'number' | 'email' | 'tel' = 'text';
   constructor(validationMessagesService: ValidationMessagesService) {
     super(validationMessagesService);
   }
 
   onInputChange(event: Event): void {
-    const value = (event.target as HTMLInputElement).value;
-    this.value = value;
-    this.onChange(value);
-    this.valueChange.emit(value);
+    this.value = event;
+    this.onChange(event);
   }
 }