input

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  effect,
6  ElementRef,
7  forwardRef,
8  inject,
9  input,
10  model,
11  ViewEncapsulation,
12} from '@angular/core';
13import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
14 
15import type { ClassValue } from 'clsx';
16 
17import { ZardInputGroupComponent } from '@/shared/components/input-group';
18import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
19 
20import { inputGroupInputVariants, inputVariants } from './input.variants';
21 
22type OnTouchedType = () => void;
23type ZardInputElement = HTMLInputElement | HTMLTextAreaElement;
24type ZardInputValue = string | number | null | undefined;
25type OnChangeType = (value: ZardInputValue) => void;
26 
27@Component({
28  selector: 'input[z-input]',
29  template: '',
30  providers: [
31    {
32      provide: NG_VALUE_ACCESSOR,
33      useExisting: forwardRef(() => ZardInputComponent),
34      multi: true,
35    },
36  ],
37  changeDetection: ChangeDetectionStrategy.OnPush,
38  encapsulation: ViewEncapsulation.None,
39  host: {
40    '[attr.data-slot]': 'parentGroup ? "input-group-control" : "input"',
41    '[class]': 'classes()',
42    '(input)': 'updateValue($event.target)',
43    '(blur)': 'onBlur()',
44  },
45  exportAs: 'zInput',
46})
47export class ZardInputComponent implements ControlValueAccessor {
48  readonly parentGroup = inject(ZardInputGroupComponent, { optional: true });
49  private readonly elementRef = inject(ElementRef<HTMLInputElement>);
50 
51  private onTouchedFn: OnTouchedType = noopFn;
52  private onChangeFn: OnChangeType = noopFn;
53 
54  readonly class = input<ClassValue>('');
55  readonly value = model<ZardInputValue>(null);
56 
57  protected readonly classes = computed(() =>
58    mergeClasses(inputVariants(), this.parentGroup ? inputGroupInputVariants() : '', this.class()),
59  );
60 
61  constructor() {
62    effect(() => {
63      this.writeNativeValue(this.value());
64      const value = this.value();
65      if (value !== undefined && value !== null) {
66        this.elementRef.nativeElement.value = value;
67      }
68    });
69  }
70 
71  disable(b: boolean): void {
72    this.elementRef.nativeElement.disabled = b;
73  }
74 
75  protected updateValue(target: EventTarget | null): void {
76    const el = target as ZardInputElement | null;
77    this.value.set(this.readNativeValue(el));
78    this.onChangeFn(this.value());
79  }
80 
81  protected onBlur(): void {
82    this.onTouchedFn();
83  }
84 
85  registerOnChange(fn: OnChangeType): void {
86    this.onChangeFn = fn;
87  }
88 
89  registerOnTouched(fn: OnTouchedType): void {
90// … truncated