feat: add input component and integrate FontAwesome icons

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

@@ -0,0 +1,56 @@
+<label [for]="id" class="input-label">
+  <ng-content />
+</label>
+
+<div
+  class="input-control"
+  [ngClass]="{
+    'input-control-currency': type() === 'currency',
+    'input-control-percent': type() === 'percent',
+    'input-control-file': type() === 'file',
+    'input-control-editable': type() === 'editable',
+    'input-control-disabled': isInputDisabled(),
+    'input-control-editable-active': isEditableActive()
+  }"
+>
+  @if (type() === 'currency') {
+    <span class="input-prefix">$</span>
+  }
+
+  <input
+    #inputElement
+    [id]="id"
+    [name]="id"
+    [type]="inputType()"
+    [ngClass]="inputClasses()"
+    [disabled]="isInputDisabled()"
+    [placeholder]="placeholder()"
+    [value]="type() !== 'file' ? value() : null"
+    (input)="type() !== 'file' ? onValueChange($event) : null"
+    (change)="type() === 'file' ? onFileChange($event) : null"
+    [attr.maxlength]="type() !== 'file' ? maxlength() : null"
+    [attr.accept]="type() === 'file' ? accept() : null"
+  />
+
+  @if (type() === 'file') {
+    <span class="input-file-name" [class.input-file-name-empty]="!resolvedFileName()">
+      {{ resolvedFileName() || 'Sin archivo...' }}
+    </span>
+  }
+
+  @if (type() === 'percent') {
+    <span class="input-suffix">%</span>
+  }
+
+  @if (type() === 'editable') {
+    <button
+      type="button"
+      class="input-icon"
+      [class.input-icon-active]="isEditableActive()"
+      [attr.aria-label]="isEditableActive() ? 'Deshabilitar edición' : 'Habilitar edición'"
+      (click)="toggleEditableState()"
+    >
+      <i class="fa-solid fa-pen" aria-hidden="true"></i>
+    </button>
+  }
+</div>