feat: add input component and integrate FontAwesome icons

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

@@ -1,10 +1,10 @@
 <main class="app-shell">
-  <section class="button-demo card shadow-sm">
+  <section class="component-demo card shadow-sm">
     <div class="card-body">
       <span class="eyebrow">Componentes reutilizables</span>
-      <h1>Button</h1>
+      <h1>Button + Input</h1>
       <p class="lead mb-4">
-        Pagina dedicada a probar variantes del componente compartido.
+        Pagina dedicada a probar variantes de los componentes compartidos.
       </p>
 
       <div class="button-grid">
@@ -14,6 +14,122 @@
         <app-button variant="danger-secondary">Danger secondary</app-button>
         <app-button variant="cancel">Cancel</app-button>
       </div>
+
+      <hr class="section-divider" />
+
+      <div class="input-grid">
+        <app-input
+          placeholder="Buscar producto"
+          [value]="textValue"
+          [maxlength]="24"
+          (valueChange)="textValue = $event"
+        >
+          Texto
+        </app-input>
+
+        <app-input
+          type="number"
+          placeholder="0"
+          [value]="numberValue"
+          (valueChange)="numberValue = $event"
+        >
+          Numero
+        </app-input>
+
+        <app-input
+          type="email"
+          placeholder="mail@empresa.com"
+          [value]="email"
+          (valueChange)="email = $event"
+        >
+          Email
+        </app-input>
+
+        <app-input
+          type="password"
+          placeholder="********"
+          [value]="password"
+          (valueChange)="password = $event"
+        >
+          Password
+        </app-input>
+
+        <app-input
+          type="date"
+          [value]="date"
+          (valueChange)="date = $event"
+        >
+          Fecha
+        </app-input>
+
+        <app-input
+          type="period"
+          [value]="period"
+          (valueChange)="period = $event"
+        >
+          Periodo
+        </app-input>
+
+        <app-input
+          type="currency"
+          placeholder="0"
+          [value]="amount"
+          (valueChange)="amount = $event"
+        >
+          Moneda
+        </app-input>
+
+        <app-input
+          type="percent"
+          placeholder="0"
+          [value]="percent"
+          (valueChange)="percent = $event"
+        >
+          Porcentaje
+        </app-input>
+
+        <app-input
+          placeholder="Campo deshabilitado"
+          [value]="disabledValue"
+          [disabled]="true"
+        >
+          Deshabilitado
+        </app-input>
+
+        <app-input
+          type="editable"
+          [value]="editableValue"
+          [disabled]="editableDisabled"
+          (valueChange)="editableValue = $event"
+          (disabledChange)="editableDisabled = $event"
+        >
+          Editable
+        </app-input>
+
+        <app-input
+          type="email"
+          placeholder="mail@empresa.com"
+          [value]="invalidEmail"
+          [invalid]="true"
+          (valueChange)="invalidEmail = $event"
+        >
+          Invalido
+        </app-input>
+
+        <div class="file-field">
+          <app-input
+            type="file"
+            accept=".pdf,.png,.jpg"
+            [fileName]="fileName"
+            [clearTrigger]="clearTrigger"
+            (fileChange)="onFileChange($event)"
+          >
+            Archivo
+          </app-input>
+
+          <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
+        </div>
+      </div>
     </div>
   </section>
 </main>

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

@@ -10,8 +10,8 @@
   padding: 1.5rem;
 }
 
-.button-demo {
-  width: min(100%, 48rem);
+.component-demo {
+  width: min(100%, 64rem);
   border: 0;
 }
 
@@ -34,3 +34,30 @@ h1 {
   flex-wrap: wrap;
   gap: 0.75rem;
 }
+
+.section-divider {
+  margin: 2rem 0;
+}
+
+.input-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.file-field {
+  display: grid;
+  gap: 0.75rem;
+}
+
+@media (max-width: 991.98px) {
+  .input-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 767.98px) {
+  .input-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

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

@@ -1,10 +1,35 @@
 import { Component } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { InputComponent } from '../../../../shared/components/input/input.component';
 
 @Component({
   selector: 'app-reutilizables-test-page',
-  imports: [ButtonComponent],
+  imports: [ButtonComponent, InputComponent],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
 })
-export class ReutilizablesTestPageComponent {}
+export class ReutilizablesTestPageComponent {
+  protected textValue = 'Auriculares';
+  protected numberValue = '24';
+  protected email = 'usuario@empresa.com';
+  protected password = '12345678';
+  protected date = '2026-06-24';
+  protected amount = '125000';
+  protected percent = '12';
+  protected period = '2026-06';
+  protected editableValue = 'Solo lectura al cargar';
+  protected disabledValue = 'No editable';
+  protected invalidEmail = 'correo-invalido';
+  protected fileName = '';
+  protected clearTrigger = 0;
+  protected editableDisabled = true;
+
+  protected onFileChange(file: File | null): void {
+    this.fileName = file?.name ?? '';
+  }
+
+  protected clearFile(): void {
+    this.fileName = '';
+    this.clearTrigger += 1;
+  }
+}