conversion inputs to components

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

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { initFlowbite } from 'flowbite';
 import { Subscription } from 'rxjs';
 import { ValidationMessagesService } from '../validation-messages.service';
 
@@ -23,6 +24,9 @@ export abstract class BaseInputComponent implements ControlValueAccessor {
     this.subscription = this.validationMessagesService.messages$.subscribe(() => {
       this.updateValidationMessage();
     });
+    setTimeout(() => {
+      initFlowbite();
+    }, 10);
   }
 
   ngOnDestroy() {

bizmatch/src/app/components/tooltip/tooltip.component.html

@@ -0,0 +1,8 @@
+<div
+  [id]="id"
+  role="tooltip"
+  class="max-w-72 w-max absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
+>
+  {{ text }}
+  <div class="tooltip-arrow" data-popper-arrow></div>
+</div>

bizmatch/src/app/components/tooltip/tooltip.component.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { initFlowbite } from 'flowbite';
+
+@Component({
+  selector: 'app-tooltip',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './tooltip.component.html',
+})
+export class TooltipComponent {
+  @Input() id;
+  @Input() text;
+  ngOnInit() {
+    setTimeout(() => {
+      initFlowbite();
+    }, 10);
+  }
+}

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>

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);
   }
 }

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

@@ -0,0 +1,14 @@
+<div>
+  <label for="type" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit"
+    >Property Category @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>
+  <ng-select [items]="items" bindLabel="name" bindValue="value" [(ngModel)]="value" (ngModelChange)="onInputChange($event)" name="type"> </ng-select>
+</div>

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

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef, Input } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
+import { ValidationMessagesService } from '../validation-messages.service';
+
+@Component({
+  selector: 'app-validated-ng-select',
+  standalone: true,
+  imports: [CommonModule, FormsModule, NgSelectModule, TooltipComponent],
+  templateUrl: './validated-ng-select.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidatedNgSelectComponent),
+      multi: true,
+    },
+  ],
+})
+export class ValidatedNgSelectComponent extends BaseInputComponent {
+  @Input() items;
+  constructor(validationMessagesService: ValidationMessagesService) {
+    super(validationMessagesService);
+  }
+  onInputChange(event: Event): void {
+    this.value = event;
+    this.onChange(this.value);
+  }
+}

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

@@ -0,0 +1,25 @@
+<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="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"
+    [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
+    currencyMask
+  />
+</div>

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

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgxCurrencyDirective } from 'ngx-currency';
+import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
+import { ValidationMessagesService } from '../validation-messages.service';
+
+@Component({
+  selector: 'app-validated-price',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TooltipComponent, NgxCurrencyDirective],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidatedPriceComponent),
+      multi: true,
+    },
+  ],
+  templateUrl: './validated-price.component.html',
+})
+export class ValidatedPriceComponent extends BaseInputComponent {
+  constructor(validationMessagesService: ValidationMessagesService) {
+    super(validationMessagesService);
+  }
+
+  onInputChange(event: Event): void {
+    this.value = event;
+    this.onChange(event);
+  }
+}

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

@@ -0,0 +1,13 @@
+<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>
+<quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>

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

@@ -3,21 +3,17 @@ import { Component, forwardRef } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { QuillModule } from 'ngx-quill';
 import { BaseInputComponent } from '../base-input/base-input.component';
+import { TooltipComponent } from '../tooltip/tooltip.component';
 import { ValidationMessagesService } from '../validation-messages.service';
 
 @Component({
   selector: 'app-validated-quill',
-  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>
-      <quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>
-    </div>
-  `,
+  templateUrl: './validated-quill.component.html',
+  styles: `quill-editor {
+            width: 100%;
+          }`,
   standalone: true,
-  imports: [CommonModule, FormsModule, QuillModule],
+  imports: [CommonModule, FormsModule, QuillModule, TooltipComponent],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

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>();
 

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

@@ -0,0 +1,16 @@
+<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>
+    }
+    <span class="text-red-500 ml-1">{{ validationMessage }}</span>
+  </label>
+  <textarea [id]="name" [ngModel]="value" (ngModelChange)="onInputChange($event)" [attr.name]="name" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
+</div>

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

@@ -1,22 +1,15 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, forwardRef, Output } from '@angular/core';
+import { Component, forwardRef } 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-textarea',
-  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>
-      <textarea [id]="name" [ngModel]="value" (ngModelChange)="onInputChange($event)" [attr.name]="name" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
-    </div>
-  `,
+  templateUrl: './validated-textarea.component.html',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, TooltipComponent],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -26,8 +19,6 @@ import { ValidationMessagesService } from '../validation-messages.service';
   ],
 })
 export class ValidatedTextareaComponent extends BaseInputComponent {
-  @Output() valueChange = new EventEmitter<any>();
-
   constructor(validationMessagesService: ValidationMessagesService) {
     super(validationMessagesService);
   }