checkbox

1import {
2  booleanAttribute,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  forwardRef,
7  input,
8  output,
9  signal,
10  ViewEncapsulation,
11} from '@angular/core';
12import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
13 
14import { NgIcon, provideIcons } from '@ng-icons/core';
15import { lucideCheck } from '@ng-icons/lucide';
16import type { ClassValue } from 'clsx';
17 
18import { ZardIdDirective } from '@/shared/core';
19import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
20 
21import { checkboxLabelVariants, checkboxVariants } from './checkbox.variants';
22 
23type OnTouchedType = () => void;
24type OnChangeType = (value: boolean) => void;
25 
26@Component({
27  selector: 'z-checkbox, [z-checkbox]',
28  imports: [NgIcon, ZardIdDirective],
29  template: `
30    <span class="relative flex" zardId="checkbox" #z="zardId">
31      <input
32        #input
33        type="checkbox"
34        name="checkbox"
35        [id]="zId() || z.id()"
36        [class]="classes()"
37        [checked]="checked()"
38        [disabled]="disabled()"
39        [attr.data-state]="checked() ? 'checked' : 'unchecked'"
40        [attr.data-checked]="checked() ? '' : null"
41        [attr.aria-invalid]="zInvalid() ? 'true' : null"
42        (blur)="onCheckboxBlur()"
43        (click)="onCheckboxChange()"
44      />
45      <ng-icon
46        name="lucideCheck"
47        class="text-primary-foreground pointer-events-none absolute top-1/2 left-1/2 flex -translate-1/2 items-center justify-center transition-opacity"
48        [class]="checked() ? 'opacity-100' : 'opacity-0'"
49      />
50    </span>
51    <label [class]="labelClasses()" [for]="zId() || z.id()">
52      <ng-content />
53    </label>
54  `,
55  providers: [
56    {
57      provide: NG_VALUE_ACCESSOR,
58      useExisting: forwardRef(() => ZardCheckboxComponent),
59      multi: true,
60    },
61  ],
62  changeDetection: ChangeDetectionStrategy.OnPush,
63  encapsulation: ViewEncapsulation.None,
64  viewProviders: [provideIcons({ lucideCheck })],
65  host: {
66    'data-slot': 'checkbox',
67    '[class]': "(disabled() ? 'cursor-not-allowed' : 'cursor-pointer') + ' flex items-center gap-2'",
68    '[attr.aria-disabled]': 'disabled() ? "true" : null',
69    '[attr.aria-invalid]': 'zInvalid() ? "true" : null',
70    '[attr.data-checked]': "checked() ? '' : null",
71    '[attr.data-state]': "checked() ? 'checked' : 'unchecked'",
72  },
73  exportAs: 'zCheckbox',
74})
75export class ZardCheckboxComponent implements ControlValueAccessor {
76  readonly checkChange = output<boolean>();
77 
78// … truncated