switch

1import {
2  booleanAttribute,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  forwardRef,
7  input,
8  model,
9  signal,
10  ViewEncapsulation,
11} from '@angular/core';
12import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
13 
14import type { ClassValue } from 'clsx';
15 
16import { ZardIdDirective } from '@/shared/core';
17import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
18 
19import { switchVariants, type ZardSwitchSizeVariants } from './switch.variants';
20 
21type OnTouchedType = () => void;
22type OnChangeType = (value: boolean) => void;
23 
24@Component({
25  selector: 'z-switch',
26  imports: [ZardIdDirective],
27  template: `
28    <span class="flex items-center space-x-2" zardId="switch" #z="zardId" [attr.data-checked]="zChecked() ? '' : null">
29      <button
30        [id]="zId() || z.id()"
31        type="button"
32        role="switch"
33        [attr.data-state]="status()"
34        [attr.aria-checked]="zChecked()"
35        [attr.aria-invalid]="zInvalid() ? 'true' : null"
36        [class]="classes()"
37        [disabled]="zDisabled() || formDisabled()"
38        (click)="onSwitchChange()"
39      >
40        <span
41          [attr.data-size]="zSize()"
42          [attr.data-state]="status()"
43          class="bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform data-[size=default]:size-4 data-[size=sm]:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
44        ></span>
45      </button>
46 
47      <label
48        class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
49        [for]="zId() || z.id()"
50      >
51        <ng-content><span class="sr-only">toggle switch</span></ng-content>
52      </label>
53    </span>
54  `,
55  providers: [
56    {
57      provide: NG_VALUE_ACCESSOR,
58      useExisting: forwardRef(() => ZardSwitchComponent),
59      multi: true,
60    },
61  ],
62  changeDetection: ChangeDetectionStrategy.OnPush,
63  encapsulation: ViewEncapsulation.None,
64  exportAs: 'zSwitch',
65})
66export class ZardSwitchComponent implements ControlValueAccessor {
67  readonly class = input<ClassValue>('');
68  readonly zChecked = model<boolean>(false);
69  readonly zId = input<string>('');
70  readonly zSize = input<ZardSwitchSizeVariants>('default');
71  readonly zDisabled = input(false, { transform: booleanAttribute });
72  readonly zInvalid = input(false, { transform: booleanAttribute });
73 
74// … truncated