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

@@ -51,9 +51,8 @@
             id="search-input"
             type="search"
             placeholder="Buscar producto"
-            [value]="textValue"
+            [(value)]="textValue"
             [maxlength]="24"
-            (valueChange)="textValue = $event"
           />
         </div>
 
@@ -63,8 +62,7 @@
             id="number-input"
             type="number"
             placeholder="0"
-            [value]="numberValue"
-            (valueChange)="numberValue = $event"
+            [(value)]="numberValue"
           />
         </div>
 
@@ -74,8 +72,7 @@
             id="email-input"
             type="email"
             placeholder="mail@empresa.com"
-            [value]="email"
-            (valueChange)="email = $event"
+            [(value)]="email"
           />
         </div>
 
@@ -85,8 +82,7 @@
             id="user-input"
             type="user"
             placeholder="Nombre de usuario"
-            [value]="user"
-            (valueChange)="user = $event"
+            [(value)]="user"
           />
         </div>
 
@@ -96,29 +92,18 @@
             id="password-input"
             type="password-toggle"
             placeholder="********"
-            [value]="password"
-            (valueChange)="password = $event"
+            [(value)]="password"
           />
         </div>
 
         <div class="input-field">
           <label for="date-input">Fecha</label>
-          <app-input
-            id="date-input"
-            type="date"
-            [value]="date"
-            (valueChange)="date = $event"
-          />
+          <app-input id="date-input" type="date" [(value)]="date" />
         </div>
 
         <div class="input-field">
           <label for="period-input">Periodo</label>
-          <app-input
-            id="period-input"
-            type="period"
-            [value]="period"
-            (valueChange)="period = $event"
-          />
+          <app-input id="period-input" type="period" [(value)]="period" />
         </div>
 
         <div class="input-field">
@@ -127,8 +112,7 @@
             id="amount-input"
             type="currency"
             placeholder="0"
-            [value]="amount"
-            (valueChange)="amount = $event"
+            [(value)]="amount"
           />
         </div>
 
@@ -138,8 +122,7 @@
             id="percent-input"
             type="percent"
             placeholder="0"
-            [value]="percent"
-            (valueChange)="percent = $event"
+            [(value)]="percent"
           />
         </div>
 
@@ -158,9 +141,8 @@
           <app-input
             id="editable-input"
             type="editable"
-            [value]="editableValue"
+            [(value)]="editableValue"
             [disabled]="editableDisabled"
-            (valueChange)="editableValue = $event"
             (disabledChange)="editableDisabled = $event"
           />
         </div>
@@ -171,9 +153,8 @@
             id="invalid-input"
             type="email"
             placeholder="mail@empresa.com"
-            [value]="invalidEmail"
+            [(value)]="invalidEmail"
             [invalid]="true"
-            (valueChange)="invalidEmail = $event"
           />
         </div>