conversion inputs to components

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

@@ -1 +1,23 @@
-<p>validated-input works!</p>
+<div>
+  <label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
+    {{ label }}
+    @if(validationMessage){
+    <div
+      attr.data-tooltip-target="tooltip-{{ name }}"
+      class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
+    >
+      !
+    </div>
+    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
+    }
+  </label>
+  <input
+    [type]="kind"
+    [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>