kbd

1import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
2 
3import type { ClassValue } from 'clsx';
4 
5import { mergeClasses } from '@/shared/utils/merge-classes';
6 
7import { kbdVariants } from './kbd.variants';
8 
9@Component({
10  selector: 'z-kbd, [z-kbd]',
11  template: `
12    <kbd data-slot="kbd" [class]="classes()"><ng-content /></kbd>
13  `,
14  changeDetection: ChangeDetectionStrategy.OnPush,
15  encapsulation: ViewEncapsulation.None,
16  exportAs: 'zKbd',
17})
18export class ZardKbdComponent {
19  readonly class = input<ClassValue>('');
20 
21  protected readonly classes = computed(() => mergeClasses(kbdVariants(), this.class()));
22}