radio-group

1import {
2  booleanAttribute,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  forwardRef,
7  inject,
8  input,
9  model,
10  signal,
11  ViewEncapsulation,
12} from '@angular/core';
13import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
14 
15import type { ClassValue } from 'clsx';
16 
17import { ZardIdDirective } from '@/shared/core';
18import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
19 
20import { radioGroupVariants, radioVariants } from './radio-group.variants';
21 
22type OnTouchedType = () => void;
23type OnChangeType = (value: unknown) => void;
24 
25@Component({
26  selector: 'z-radio-group, [z-radio-group]',
27  template: '<ng-content />',
28  providers: [
29    {
30      provide: NG_VALUE_ACCESSOR,
31      useExisting: forwardRef(() => ZardRadioGroupComponent),
32      multi: true,
33    },
34  ],
35  changeDetection: ChangeDetectionStrategy.OnPush,
36  encapsulation: ViewEncapsulation.None,
37  host: {
38    role: 'radiogroup',
39    'data-slot': 'radio-group',
40    '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
41    '[class]': 'classes()',
42  },
43  exportAs: 'zRadioGroup',
44})
45export class ZardRadioGroupComponent implements ControlValueAccessor {
46  readonly class = input<ClassValue>('');
47  readonly value = model<unknown>(null);
48  readonly zDisabled = input(false, { transform: booleanAttribute });
49  readonly name = input<string>('');
50 
51  protected readonly formDisabled = signal(false);
52  protected readonly classes = computed(() => mergeClasses(radioGroupVariants(), this.class()));
53  readonly isDisabled = computed(() => this.zDisabled() || this.formDisabled());
54 
55  private onChange: OnChangeType = noopFn;
56  private onTouched: OnTouchedType = noopFn;
57 
58  select(value: unknown): void {
59    if (this.isDisabled()) return;
60    this.value.set(value);
61    this.onChange(value);
62    this.onTouched();
63  }
64 
65  isSelected(value: unknown): boolean {
66    return this.value() === value;
67  }
68 
69  writeValue(val: unknown): void {
70    this.value.set(val);
71  }
72 
73  registerOnChange(fn: OnChangeType): void {
74    this.onChange = fn;
75  }
76 
77  registerOnTouched(fn: OnTouchedType): void {
78    this.onTouched = fn;
79  }
80 
81  setDisabledState(isDisabled: boolean): void {
82    this.formDisabled.set(isDisabled);
83  }
84}
85 
86@Component({
87  selector: 'z-radio, [z-radio]',
88  imports: [ZardIdDirective],
89  template: `
90    <button
91      [id]="zId() || z.id()"
92      type="button"
93      role="radio"
94      [attr.data-state]="checked() ? 'checked' : 'unchecked'"
95      [attr.data-checked]="checked() ? '' : null"
96// … truncated