form

1import {
2  booleanAttribute,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  input,
7  ViewEncapsulation,
8} from '@angular/core';
9 
10import type { ClassValue } from 'clsx';
11 
12import {
13  formControlVariants,
14  formFieldVariants,
15  formLabelVariants,
16  formMessageVariants,
17  type ZardFormMessageTypeVariants,
18} from '@/shared/components/form/form.variants';
19import { mergeClasses } from '@/shared/utils/merge-classes';
20 
21@Component({
22  selector: 'z-form-field, [z-form-field]',
23  template: '<ng-content />',
24  changeDetection: ChangeDetectionStrategy.OnPush,
25  encapsulation: ViewEncapsulation.None,
26  host: {
27    '[class]': 'classes()',
28  },
29  exportAs: 'zFormField',
30})
31export class ZardFormFieldComponent {
32  readonly class = input<ClassValue>('');
33 
34  protected readonly classes = computed(() => mergeClasses(formFieldVariants(), this.class()));
35}
36 
37@Component({
38  selector: 'z-form-control, [z-form-control]',
39  imports: [],
40  template: `
41    <div class="relative">
42      <ng-content />
43    </div>
44    @if (errorMessage() || helpText()) {
45      <div class="mt-1.5 min-h-5">
46        @if (errorMessage()) {
47          <p class="text-sm text-red-500">{{ errorMessage() }}</p>
48        } @else if (helpText()) {
49          <p class="text-muted-foreground text-sm">{{ helpText() }}</p>
50        }
51      </div>
52    }
53  `,
54  changeDetection: ChangeDetectionStrategy.OnPush,
55  encapsulation: ViewEncapsulation.None,
56  host: {
57    '[class]': 'classes()',
58  },
59  exportAs: 'zFormControl',
60})
61export class ZardFormControlComponent {
62  readonly class = input<ClassValue>('');
63  readonly errorMessage = input<string>('');
64  readonly helpText = input<string>('');
65 
66  protected readonly classes = computed(() => mergeClasses(formControlVariants(), this.class()));
67}
68 
69@Component({
70  selector: 'z-form-label, label[z-form-label]',
71  template: '<ng-content />',
72  changeDetection: ChangeDetectionStrategy.OnPush,
73  encapsulation: ViewEncapsulation.None,
74  host: {
75    '[class]': 'classes()',
76  },
77  exportAs: 'zFormLabel',
78})
79export class ZardFormLabelComponent {
80  readonly class = input<ClassValue>('');
81  readonly zRequired = input(false, { transform: booleanAttribute });
82 
83  protected readonly classes = computed(() =>
84    mergeClasses(formLabelVariants({ zRequired: this.zRequired() }), this.class()),
85  );
86}
87 
88@Component({
89  selector: 'z-form-message, [z-form-message]',
90  template: '<ng-content />',
91  changeDetection: ChangeDetectionStrategy.OnPush,
92  encapsulation: ViewEncapsulation.None,
93  host: {
94// … truncated