toggle

1import {
2  booleanAttribute,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  forwardRef,
7  input,
8  linkedSignal,
9  model,
10  output,
11  ViewEncapsulation,
12} from '@angular/core';
13import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
14 
15import type { ClassValue } from 'clsx';
16 
17import { mergeClasses } from '@/shared/utils/merge-classes';
18 
19import { toggleVariants, type ZardToggleSizeVariants, type ZardToggleTypeVariants } from './toggle.variants';
20 
21type OnTouchedType = () => void;
22type OnChangeType = (value: boolean) => void;
23 
24@Component({
25  selector: 'z-toggle',
26  template: `
27    <button
28      type="button"
29      data-slot="toggle"
30      [attr.aria-label]="zAriaLabel()"
31      [attr.aria-pressed]="zValue()"
32      [attr.data-state]="state()"
33      [class]="classes()"
34      [disabled]="disabled()"
35      (click)="toggle()"
36    >
37      <ng-content />
38    </button>
39  `,
40  providers: [
41    {
42      provide: NG_VALUE_ACCESSOR,
43      useExisting: forwardRef(() => ZardToggleComponent),
44      multi: true,
45    },
46  ],
47  changeDetection: ChangeDetectionStrategy.OnPush,
48  encapsulation: ViewEncapsulation.None,
49  host: {
50    '(mouseenter)': 'handleHover()',
51  },
52  exportAs: 'zToggle',
53})
54export class ZardToggleComponent implements ControlValueAccessor {
55  readonly zValue = model(false);
56  readonly zDisabled = input(false, { transform: booleanAttribute });
57  readonly zType = input<ZardToggleTypeVariants>('default');
58  readonly zSize = input<ZardToggleSizeVariants>('default');
59  readonly zAriaLabel = input.required<string>();
60  readonly class = input<ClassValue>('');
61 
62  readonly zToggleClick = output<void>();
63  readonly zToggleHover = output<void>();
64  readonly zToggleChange = output<boolean>();
65 
66  protected readonly state = computed(() => (this.zValue() ? 'on' : 'off'));
67 
68  protected readonly disabled = linkedSignal(() => this.zDisabled());
69 
70  protected readonly classes = computed(() =>
71    mergeClasses(toggleVariants({ zSize: this.zSize(), zType: this.zType() }), this.class()),
72  );
73 
74  // eslint-disable-next-line @typescript-eslint/no-empty-function
75  private onTouched: OnTouchedType = () => {};
76  // eslint-disable-next-line @typescript-eslint/no-empty-function
77  private onChangeFn: OnChangeType = () => {};
78 
79  handleHover() {
80    this.zToggleHover.emit();
81  }
82 
83  toggle() {
84    if (this.disabled()) {
85      return;
86    }
87 
88    this.zValue.update(v => !v);
89 
90    this.zToggleClick.emit();
91    this.zToggleChange.emit(this.zValue());
92// … truncated