conversion inputs to components

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

@@ -1 +1,20 @@
-<p>validated-select 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>
+  <select [id]="name" [name]="name" [ngModel]="value" (change)="onSelectChange($event)" (blur)="onTouched()" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+    <option value="" disabled selected>Select an option</option>
+    <option *ngFor="let option of options" [value]="option.value">
+      {{ option.label }}
+    </option>
+  </select>
+</div>

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

@@ -2,33 +2,14 @@ import { CommonModule } from '@angular/common';
 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-select',
-  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>
-      <select
-        [id]="name"
-        [name]="name"
-        [ngModel]="value"
-        (change)="onSelectChange($event)"
-        (blur)="onTouched()"
-        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-      >
-        <option value="" disabled selected>Select an option</option>
-        <option *ngFor="let option of options" [value]="option.value">
-          {{ option.label }}
-        </option>
-      </select>
-    </div>
-  `,
+  templateUrl: './validated-select.component.html',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TooltipComponent],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -38,8 +19,6 @@ import { ValidationMessagesService } from '../validation-messages.service';
   ],
 })
 export class ValidatedSelectComponent extends BaseInputComponent {
-  // @Input() required: boolean = false;
-  // @Input() validationMessage: string = '';
   @Input() options: Array<{ value: any; label: string }> = [];
   @Output() valueChange = new EventEmitter<any>();