feat: add user input type with icon support in input component

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

@@ -73,6 +73,15 @@
           Email
         </app-input>
 
+        <app-input
+          type="user"
+          placeholder="Nombre de usuario"
+          [value]="user"
+          (valueChange)="user = $event"
+        >
+          Usuario
+        </app-input>
+
         <app-input
           type="password-toggle"
           placeholder="********"

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

@@ -12,6 +12,7 @@ export class ReutilizablesTestPageComponent {
   protected textValue = 'Auriculares';
   protected numberValue = '24';
   protected email = 'usuario@empresa.com';
+  protected user = 'Juan Perez';
   protected password = '12345678';
   protected date = '2026-06-24';
   protected amount = '125000';

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

@@ -39,6 +39,12 @@
     </span>
   }
 
+  @if (type() === 'user') {
+    <span class="input-user-icon" aria-hidden="true">
+      <i class="fa-solid fa-user"></i>
+    </span>
+  }
+
   @if (type() === 'password-toggle') {
     <button
       type="button"

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

@@ -14,7 +14,8 @@
   position: relative;
 }
 
-.input-search-icon {
+.input-search-icon,
+.input-user-icon {
   position: absolute;
   right: 1rem;
   top: 50%;

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

@@ -14,6 +14,7 @@ import { NgClass } from '@angular/common';
 
 export type AppInputType =
   | 'search'
+  | 'user'
   | 'text'
   | 'number'
   | 'email'
@@ -29,6 +30,7 @@ export type AppInputType =
 const DEFAULT_TYPE: AppInputType = 'text';
 const INPUT_TYPES = new Set<AppInputType>([
   'search',
+  'user',
   'text',
   'number',
   'email',
@@ -92,7 +94,13 @@ export class InputComponent {
       return this.isPasswordVisible() ? 'text' : 'password';
     }
 
-    if (type === 'search' || type === 'currency' || type === 'percent' || type === 'editable') {
+    if (
+      type === 'search' ||
+      type === 'user' ||
+      type === 'currency' ||
+      type === 'percent' ||
+      type === 'editable'
+    ) {
       return 'text';
     }
 
@@ -107,10 +115,10 @@ export class InputComponent {
     'form-control': true,
     'is-invalid': this.invalid(),
     'input-with-search-icon': this.type() === 'search',
+    'input-with-action-icon': this.type() === 'user' || this.type() === 'password-toggle',
     'input-with-prefix': this.type() === 'currency',
     'input-with-suffix': this.type() === 'percent',
-    'input-with-icon': this.type() === 'editable',
+    'input-with-icon': this.type() === 'editable'
-    'input-with-action-icon': this.type() === 'password-toggle'
   }));
 
   protected readonly isInputDisabled = computed(() =>