switch

1import { Component, computed, input } from '@angular/core'
2import { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'
3 
4import { cn } from '~/lib/utils'
5 
6@Component({
7  standalone: true,
8  selector: 'button[ubSwitch]',
9  imports: [RdxSwitchThumbDirective],
10  hostDirectives: [
11    {
12      directive: RdxSwitchRootDirective,
13      inputs: ['id', 'required', 'checked', 'disabled'],
14      outputs: ['onCheckedChange'],
15    },
16  ],
17  host: {
18    '[class]': 'computedClass()',
19  },
20  template: `
21    <span rdxSwitchThumb class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span>
22    `,
23})
24export class SwitchDirective {
25  readonly class = input<string>()
26  readonly computedClass = computed(() => {
27    return cn('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', this.class())
28  })
29}