textarea

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 { inputGroupTextAreaVariants, textareaVariants } from './textarea.variants';
21 
22type OnTouchedType = () => void;
23type OnChangeType = (value: string) => void;
24 
25@Component({
26  selector: 'textarea[z-textarea]',
27  template: '',
28  providers: [
29    {
30      provide: NG_VALUE_ACCESSOR,
31      useExisting: forwardRef(() => ZardTextareaComponent),
32      multi: true,
33    },
34  ],
35  changeDetection: ChangeDetectionStrategy.OnPush,
36  encapsulation: ViewEncapsulation.None,
37  host: {
38    '[attr.data-slot]': 'parentGroup ? "input-group-control" : "textarea"',
39    '[class]': 'classes()',
40    '(input)': 'updateValue($event.target)',
41    '(blur)': 'onBlur()',
42  },
43  exportAs: 'zTextarea',
44})
45export class ZardTextareaComponent implements ControlValueAccessor {
46  readonly parentGroup = inject(ZardInputGroupComponent, { optional: true });
47  private readonly elementRef = inject(ElementRef<HTMLTextAreaElement>);
48 
49  private onTouchedFn: OnTouchedType = noopFn;
50  private onChangeFn: OnChangeType = noopFn;
51 
52  readonly class = input<ClassValue>('');
53  readonly value = model<string>('');
54 
55  protected readonly classes = computed(() =>
56    mergeClasses(textareaVariants(), this.parentGroup ? inputGroupTextAreaVariants() : '', this.class()),
57  );
58 
59  constructor() {
60    effect(() => {
61      const value = this.value();
62      if (value !== undefined && value !== null) {
63        this.elementRef.nativeElement.value = value;
64      }
65    });
66  }
67 
68  disable(b: boolean): void {
69    this.elementRef.nativeElement.disabled = b;
70  }
71 
72  protected updateValue(target: EventTarget | null): void {
73    const el = target as HTMLTextAreaElement | null;
74    this.value.set(el?.value ?? '');
75    this.onChangeFn(this.value());
76  }
77 
78  protected onBlur(): void {
79    this.onTouchedFn();
80  }
81 
82  registerOnChange(fn: OnChangeType): void {
83    this.onChangeFn = fn;
84  }
85 
86  registerOnTouched(fn: OnTouchedType): void {
87    this.onTouchedFn = fn;
88  }
89 
90  setDisabledState(isDisabled: boolean): void {
91    this.elementRef.nativeElement.disabled = isDisabled;
92  }
93 
94// … truncated