feat: add input component and integrate FontAwesome icons

2026-06-24 09:57:24 -03:00
parent e608b31b93
commit 6b4fccbdbb
9 changed files with 550 additions and 7 deletions
--- a/src/app/shared/components/input/input.component.ts
+++ b/src/app/shared/components/input/input.component.ts
@@ -0,0 +1,167 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  computed,
+  effect,
+  input,
+  output,
+  signal,
+  untracked,
+  viewChild
+} from '@angular/core';
+import { NgClass } from '@angular/common';
+
+export type AppInputType =
+  | 'text'
+  | 'number'
+  | 'email'
+  | 'password'
+  | 'currency'
+  | 'percent'
+  | 'date'
+  | 'period'
+  | 'editable'
+  | 'file';
+
+const DEFAULT_TYPE: AppInputType = 'text';
+const INPUT_TYPES = new Set<AppInputType>([
+  'text',
+  'number',
+  'email',
+  'password',
+  'currency',
+  'percent',
+  'date',
+  'period',
+  'editable',
+  'file'
+]);
+
+function normalizeType(value: AppInputType | string | undefined): AppInputType {
+  return value && INPUT_TYPES.has(value as AppInputType)
+    ? (value as AppInputType)
+    : DEFAULT_TYPE;
+}
+
+@Component({
+  selector: 'app-input',
+  imports: [NgClass],
+  templateUrl: './input.component.html',
+  styleUrl: './input.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'form-group'
+  }
+})
+export class InputComponent {
+  private readonly inputElement = viewChild<ElementRef<HTMLInputElement>>('inputElement');
+  private readonly selectedFileName = signal('');
+  private readonly editableDisabled = signal(false);
+  private lastClearTrigger = 0;
+
+  readonly invalid = input(false);
+  readonly placeholder = input('');
+  readonly value = input<string | number>('');
+  readonly maxlength = input<number | null>(null);
+  readonly accept = input('');
+  readonly fileName = input('');
+  readonly clearTrigger = input(0);
+  readonly disabled = input(false);
+  readonly type = input<AppInputType, AppInputType | string>(DEFAULT_TYPE, {
+    transform: normalizeType
+  });
+
+  readonly disabledChange = output<boolean>();
+  readonly valueChange = output<string>();
+  readonly fileChange = output<File | null>();
+
+  protected readonly id = `app-input-${globalThis.crypto.randomUUID()}`;
+
+  protected readonly inputType = computed(() => {
+    const type = this.type();
+
+    if (type === 'currency' || type === 'percent' || type === 'editable') {
+      return 'text';
+    }
+
+    if (type === 'period') {
+      return 'month';
+    }
+
+    return type;
+  });
+
+  protected readonly inputClasses = computed(() => ({
+    'form-control': true,
+    'is-invalid': this.invalid(),
+    'input-with-prefix': this.type() === 'currency',
+    'input-with-suffix': this.type() === 'percent',
+    'input-with-icon': this.type() === 'editable'
+  }));
+
+  protected readonly isInputDisabled = computed(() =>
+    this.type() === 'editable' ? this.editableDisabled() : this.disabled()
+  );
+
+  protected readonly isEditableActive = computed(
+    () => this.type() === 'editable' && !this.editableDisabled()
+  );
+
+  protected readonly resolvedFileName = computed(
+    () => this.selectedFileName() || this.fileName() || ''
+  );
+
+  constructor() {
+    effect(() => {
+      this.editableDisabled.set(this.disabled());
+    });
+
+    effect(() => {
+      if (this.type() !== 'file') {
+        return;
+      }
+
+      const clearTrigger = this.clearTrigger();
+      const value = this.value();
+      const fileName = this.fileName();
+
+      untracked(() => {
+        if (clearTrigger !== this.lastClearTrigger) {
+          this.lastClearTrigger = clearTrigger;
+          this.clearFileInput();
+          return;
+        }
+
+        if (!value && !fileName) {
+          this.clearFileInput();
+        }
+      });
+    });
+  }
+
+  protected onValueChange(event: Event): void {
+    this.valueChange.emit((event.target as HTMLInputElement).value);
+  }
+
+  protected onFileChange(event: Event): void {
+    const file = (event.target as HTMLInputElement).files?.[0] ?? null;
+    this.selectedFileName.set(file?.name ?? '');
+    this.fileChange.emit(file);
+  }
+
+  protected toggleEditableState(): void {
+    if (this.type() !== 'editable') {
+      return;
+    }
+
+    const nextState = !this.editableDisabled();
+    this.editableDisabled.set(nextState);
+    this.disabledChange.emit(nextState);
+  }
+
+  private clearFileInput(): void {
+    this.inputElement()?.nativeElement && (this.inputElement()!.nativeElement.value = '');
+    this.selectedFileName.set('');
+  }
+}