From f1a4f5169583813c07c131f6635cbbc6bc2a33a1 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Fri, 26 Jun 2026 10:09:06 -0300
Subject: [PATCH] feat: add user input type with icon support in input
 component

---
 .../reutilizables-test-page.component.html         |  9 +++++++++
 .../reutilizables-test-page.component.ts           |  1 +
 .../shared/components/input/input.component.html   |  6 ++++++
 .../shared/components/input/input.component.scss   |  3 ++-
 src/app/shared/components/input/input.component.ts | 14 +++++++++++---
 5 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
index 8598ef8..6971007 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
+++ b/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="********"
diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
index cbcab10..e1ee059 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
+++ b/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';
diff --git a/src/app/shared/components/input/input.component.html b/src/app/shared/components/input/input.component.html
index d3acaf3..5d0a41a 100644
--- a/src/app/shared/components/input/input.component.html
+++ b/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"
diff --git a/src/app/shared/components/input/input.component.scss b/src/app/shared/components/input/input.component.scss
index aa80ab0..8a243e9 100644
--- a/src/app/shared/components/input/input.component.scss
+++ b/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%;
diff --git a/src/app/shared/components/input/input.component.ts b/src/app/shared/components/input/input.component.ts
index 40cd038..75c4b4c 100644
--- a/src/app/shared/components/input/input.component.ts
+++ b/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-action-icon': this.type() === 'password-toggle'
+    'input-with-icon': this.type() === 'editable'
   }));
 
   protected readonly isInputDisabled = computed(() =>