feat: implement password toggle functionality in input component

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

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

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,22 @@
     </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

@@ -43,6 +43,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 +104,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

@@ -18,6 +18,7 @@ export type AppInputType =
   | 'number'
   | 'email'
   | 'password'
+  | 'password-toggle'
   | 'currency'
   | 'percent'
   | 'date'
@@ -32,6 +33,7 @@ const INPUT_TYPES = new Set<AppInputType>([
   'number',
   'email',
   'password',
+  'password-toggle',
   'currency',
   'percent',
   'date',
@@ -60,6 +62,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 +73,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,12 +81,17 @@ 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 === 'password-toggle') {
+      return this.isPasswordVisible() ? 'text' : 'password';
+    }
+
     if (type === 'search' || type === 'currency' || type === 'percent' || type === 'editable') {
       return 'text';
     }
@@ -100,7 +109,8 @@ export class InputComponent {
     'input-with-search-icon': this.type() === 'search',
     '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(() =>
@@ -111,6 +121,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 +178,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('');