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

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

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

@@ -9,6 +9,7 @@
     'input-control-percent': type() === 'percent',
     'input-control-file': type() === 'file',
     'input-control-editable': type() === 'editable',
+    'input-control-password-toggle': type() === 'password-toggle',
     'input-control-disabled': isInputDisabled(),
     'input-control-editable-active': isEditableActive()
   }"
@@ -38,6 +39,28 @@
     </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"
+      class="input-icon"
+      [disabled]="disabled()"
+      [attr.aria-label]="isPasswordVisible() ? 'Ocultar contrasena' : 'Mostrar contrasena'"
+      (click)="togglePasswordVisibility()"
+    >
+      <i
+        class="fa-solid"
+        [ngClass]="isPasswordVisible() ? 'fa-eye' : 'fa-eye-slash'"
+        aria-hidden="true"
+      ></i>
+    </button>
+  }
+
   @if (type() === 'file') {
     <span class="input-file-name" [class.input-file-name-empty]="!resolvedFileName()">
       {{ resolvedFileName() || 'Sin archivo...' }}

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%;
@@ -43,6 +44,10 @@
   padding-right: 2.5rem;
 }
 
+.input-with-action-icon {
+  padding-right: 2.5rem;
+}
+
 input[type='file'].form-control {
   padding-right: 1rem;
   color: transparent;
@@ -100,7 +105,8 @@ input[type='file'].form-control {
   }
 }
 
-.input-control-editable {
+.input-control-editable,
+.input-control-password-toggle {
   .input-icon {
     position: absolute;
     right: 0.875rem;

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

@@ -14,10 +14,12 @@ import { NgClass } from '@angular/common';
 
 export type AppInputType =
   | 'search'
+  | 'user'
   | 'text'
   | 'number'
   | 'email'
   | 'password'
+  | 'password-toggle'
   | 'currency'
   | 'percent'
   | 'date'
@@ -28,10 +30,12 @@ export type AppInputType =
 const DEFAULT_TYPE: AppInputType = 'text';
 const INPUT_TYPES = new Set<AppInputType>([
   'search',
+  'user',
   'text',
   'number',
   'email',
   'password',
+  'password-toggle',
   'currency',
   'percent',
   'date',
@@ -60,6 +64,7 @@ export class InputComponent {
   private readonly inputElement = viewChild<ElementRef<HTMLInputElement>>('inputElement');
   private readonly selectedFileName = signal('');
   private readonly editableDisabled = signal(false);
+  private readonly passwordVisible = signal(false);
   private lastClearTrigger = 0;
 
   readonly invalid = input(false);
@@ -70,6 +75,7 @@ export class InputComponent {
   readonly fileName = input('');
   readonly clearTrigger = input(0);
   readonly disabled = input(false);
+  readonly visible = input<boolean | null>(null);
   readonly type = input<AppInputType, AppInputType | string>(DEFAULT_TYPE, {
     transform: normalizeType
   });
@@ -77,13 +83,24 @@ 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();
 
-    if (type === 'search' || type === 'currency' || type === 'percent' || type === 'editable') {
+    if (type === 'password-toggle') {
+      return this.isPasswordVisible() ? 'text' : 'password';
+    }
+
+    if (
+      type === 'search' ||
+      type === 'user' ||
+      type === 'currency' ||
+      type === 'percent' ||
+      type === 'editable'
+    ) {
       return 'text';
     }
 
@@ -98,6 +115,7 @@ 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'
@@ -111,6 +129,11 @@ export class InputComponent {
     () => this.type() === 'editable' && !this.editableDisabled()
   );
 
+  protected readonly isPasswordVisible = computed(() => {
+    const visible = this.visible();
+    return visible === null ? this.passwordVisible() : visible;
+  });
+
   protected readonly resolvedFileName = computed(
     () => this.selectedFileName() || this.fileName() || ''
   );
@@ -163,6 +186,20 @@ export class InputComponent {
     this.disabledChange.emit(nextState);
   }
 
+  protected togglePasswordVisibility(): void {
+    if (this.type() !== 'password-toggle' || this.disabled()) {
+      return;
+    }
+
+    const nextState = !this.isPasswordVisible();
+
+    if (this.visible() === null) {
+      this.passwordVisible.set(nextState);
+    }
+
+    this.visibleChange.emit(nextState);
+  }
+
   private clearFileInput(): void {
     this.inputElement()?.nativeElement && (this.inputElement()!.nativeElement.value = '');
     this.selectedFileName.set('');