feat: refactor input component to use model binding for value management

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -45,124 +45,131 @@
       <hr class="section-divider" />
 
       <div class="input-grid">
+        <div class="input-field">
+          <label for="search-input">Texto</label>
           <app-input
+            id="search-input"
             type="search"
             placeholder="Buscar producto"
-          [value]="textValue"
+            [(value)]="textValue"
             [maxlength]="24"
-          (valueChange)="textValue = $event"
+          />
-        >
+        </div>
-          Texto
-        </app-input>
 
+        <div class="input-field">
+          <label for="number-input">Numero</label>
           <app-input
+            id="number-input"
             type="number"
             placeholder="0"
-          [value]="numberValue"
+            [(value)]="numberValue"
-          (valueChange)="numberValue = $event"
+          />
-        >
+        </div>
-          Numero
-        </app-input>
 
+        <div class="input-field">
+          <label for="email-input">Email</label>
           <app-input
+            id="email-input"
             type="email"
             placeholder="mail@empresa.com"
-          [value]="email"
+            [(value)]="email"
-          (valueChange)="email = $event"
+          />
-        >
+        </div>
-          Email
-        </app-input>
 
+        <div class="input-field">
+          <label for="user-input">Usuario</label>
           <app-input
+            id="user-input"
             type="user"
             placeholder="Nombre de usuario"
-          [value]="user"
+            [(value)]="user"
-          (valueChange)="user = $event"
+          />
-        >
+        </div>
-          Usuario
-        </app-input>
 
+        <div class="input-field">
+          <label for="password-input">Password</label>
           <app-input
+            id="password-input"
             type="password-toggle"
             placeholder="********"
-          [value]="password"
+            [(value)]="password"
-          (valueChange)="password = $event"
+          />
-        >
+        </div>
-          Password
-        </app-input>
 
-        <app-input
+        <div class="input-field">
-          type="date"
+          <label for="date-input">Fecha</label>
-          [value]="date"
+          <app-input id="date-input" type="date" [(value)]="date" />
-          (valueChange)="date = $event"
+        </div>
-        >
-          Fecha
-        </app-input>
 
-        <app-input
+        <div class="input-field">
-          type="period"
+          <label for="period-input">Periodo</label>
-          [value]="period"
+          <app-input id="period-input" type="period" [(value)]="period" />
-          (valueChange)="period = $event"
+        </div>
-        >
-          Periodo
-        </app-input>
 
+        <div class="input-field">
+          <label for="amount-input">Moneda</label>
           <app-input
+            id="amount-input"
             type="currency"
             placeholder="0"
-          [value]="amount"
+            [(value)]="amount"
-          (valueChange)="amount = $event"
+          />
-        >
+        </div>
-          Moneda
-        </app-input>
 
+        <div class="input-field">
+          <label for="percent-input">Porcentaje</label>
           <app-input
+            id="percent-input"
             type="percent"
             placeholder="0"
-          [value]="percent"
+            [(value)]="percent"
-          (valueChange)="percent = $event"
+          />
-        >
+        </div>
-          Porcentaje
-        </app-input>
 
+        <div class="input-field">
+          <label for="disabled-input">Deshabilitado</label>
           <app-input
+            id="disabled-input"
             placeholder="Campo deshabilitado"
             [value]="disabledValue"
             [disabled]="true"
-        >
+          />
-          Deshabilitado
+        </div>
-        </app-input>
 
+        <div class="input-field">
+          <label for="editable-input">Editable</label>
           <app-input
+            id="editable-input"
             type="editable"
-          [value]="editableValue"
+            [(value)]="editableValue"
             [disabled]="editableDisabled"
-          (valueChange)="editableValue = $event"
             (disabledChange)="editableDisabled = $event"
-        >
+          />
-          Editable
+        </div>
-        </app-input>
 
+        <div class="input-field">
+          <label for="invalid-input">Invalido</label>
           <app-input
+            id="invalid-input"
             type="email"
             placeholder="mail@empresa.com"
-          [value]="invalidEmail"
+            [(value)]="invalidEmail"
             [invalid]="true"
-          (valueChange)="invalidEmail = $event"
+          />
-        >
+        </div>
-          Invalido
-        </app-input>
 
         <div class="file-field">
+          <div class="input-field">
+            <label for="file-input">Archivo</label>
             <app-input
+              id="file-input"
               type="file"
               accept=".pdf,.png,.jpg"
               [fileName]="fileName"
               [clearTrigger]="clearTrigger"
               (fileChange)="onFileChange($event)"
-          >
+            />
-            Archivo
+          </div>
-          </app-input>
 
           <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
         </div>

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -65,6 +65,11 @@ h1 {
   gap: 1rem;
 }
 
+.input-field {
+  display: grid;
+  gap: 0;
+}
+
 .file-field {
   display: grid;
   gap: 0.75rem;

src/app/shared/components/input/input.component.html

@@ -1,7 +1,3 @@
-<label [for]="id" class="input-label">
-  <ng-content />
-</label>
-
 <div
   class="input-control"
   [ngClass]="{
@@ -20,8 +16,8 @@
 
   <input
     #inputElement
-    [id]="id"
+    [id]="id()"
-    [name]="id"
+    [name]="id()"
     [type]="inputType()"
     [ngClass]="inputClasses()"
     [disabled]="isInputDisabled()"

src/app/shared/components/input/input.component.scss

@@ -4,12 +4,6 @@
   padding-bottom: 0 !important;
 }
 
-.input-label {
-  display: block;
-  margin-bottom: 0.375rem;
-  font-weight: 500;
-}
-
 .input-control {
   position: relative;
 }

src/app/shared/components/input/input.component.ts

@@ -5,6 +5,7 @@ import {
   computed,
   effect,
   input,
+  model,
   output,
   signal,
   untracked,
@@ -66,10 +67,12 @@ export class InputComponent {
   private readonly editableDisabled = signal(false);
   private readonly passwordVisible = signal(false);
   private lastClearTrigger = 0;
+  private readonly defaultId = `app-input-${globalThis.crypto.randomUUID()}`;
 
   readonly invalid = input(false);
+  readonly id = input(this.defaultId);
   readonly placeholder = input('');
-  readonly value = input<string | number>('');
+  readonly value = model<string | number>('');
   readonly maxlength = input<number | null>(null);
   readonly accept = input('');
   readonly fileName = input('');
@@ -81,12 +84,9 @@ export class InputComponent {
   });
 
   readonly disabledChange = output<boolean>();
-  readonly valueChange = output<string>();
   readonly fileChange = output<File | null>();
   readonly visibleChange = output<boolean>();
 
-  protected readonly id = `app-input-${globalThis.crypto.randomUUID()}`;
-
   protected readonly inputType = computed(() => {
     const type = this.type();
 
@@ -167,7 +167,7 @@ export class InputComponent {
   }
 
   protected onValueChange(event: Event): void {
-    this.valueChange.emit((event.target as HTMLInputElement).value);
+    this.value.set((event.target as HTMLInputElement).value);
   }
 
   protected onFileChange(event: Event): void {

src/styles.scss

@@ -10,3 +10,9 @@
 :root {
   --bs-body-font-family: "Gotham", sans-serif;
 }
+
+label {
+  display: block;
+  margin-bottom: 0.375rem;
+  font-weight: 500;
+}