field

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  ElementRef,
6  inject,
7  input,
8  type TemplateRef,
9  ViewEncapsulation,
10} from '@angular/core';
11 
12import type { ClassValue } from 'clsx';
13 
14import { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';
15import { mergeClasses } from '@/shared/utils/merge-classes';
16 
17import {
18  fieldContentVariants,
19  fieldDescriptionVariants,
20  fieldErrorVariants,
21  fieldGroupVariants,
22  fieldLabelVariants,
23  fieldLegendVariants,
24  fieldSeparatorVariants,
25  fieldSetVariants,
26  fieldTitleVariants,
27  fieldVariants,
28  type ZardFieldLegendVariants,
29  type ZardFieldOrientationVariants,
30} from './field.variants';
31 
32@Component({
33  selector: 'z-field-set, fieldset[z-field-set]',
34  template: '<ng-content />',
35  changeDetection: ChangeDetectionStrategy.OnPush,
36  encapsulation: ViewEncapsulation.None,
37  host: {
38    'data-slot': 'field-set',
39    '[class]': 'classes()',
40  },
41  exportAs: 'zFieldSet',
42})
43export class ZardFieldSetComponent {
44  readonly class = input<ClassValue>('');
45  protected readonly classes = computed(() => mergeClasses(fieldSetVariants(), this.class()));
46}
47 
48@Component({
49  selector: 'z-field-legend, legend[z-field-legend]',
50  template: '<ng-content />',
51  changeDetection: ChangeDetectionStrategy.OnPush,
52  encapsulation: ViewEncapsulation.None,
53  host: {
54    'data-slot': 'field-legend',
55    '[attr.data-variant]': 'zVariant()',
56    '[class]': 'classes()',
57  },
58  exportAs: 'zFieldLegend',
59})
60export class ZardFieldLegendComponent {
61  readonly zVariant = input<ZardFieldLegendVariants>('legend');
62  readonly class = input<ClassValue>('');
63  protected readonly classes = computed(() => mergeClasses(fieldLegendVariants(), this.class()));
64}
65 
66@Component({
67  selector: 'z-field-group, [z-field-group]',
68  template: '<ng-content />',
69  changeDetection: ChangeDetectionStrategy.OnPush,
70  encapsulation: ViewEncapsulation.None,
71  host: {
72    'data-slot': 'field-group',
73    '[class]': 'classes()',
74  },
75  exportAs: 'zFieldGroup',
76})
77export class ZardFieldGroupComponent {
78  readonly class = input<ClassValue>('');
79  protected readonly classes = computed(() => mergeClasses(fieldGroupVariants(), this.class()));
80}
81 
82@Component({
83  selector: 'z-field, [z-field]',
84  template: '<ng-content />',
85  changeDetection: ChangeDetectionStrategy.OnPush,
86  encapsulation: ViewEncapsulation.None,
87  host: {
88    role: 'group',
89    'data-slot': 'field',
90// … truncated