badge

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 { badgeVariants, type ZardBadgeTypeVariants } from './badge.variants';
8 
9@Component({
10  selector: 'z-badge, a[z-badge]',
11  template: `
12    <ng-content />
13  `,
14  changeDetection: ChangeDetectionStrategy.OnPush,
15  encapsulation: ViewEncapsulation.None,
16  host: {
17    '[class]': 'classes()',
18    '[attr.data-variant]': 'zType()',
19    'data-slot': 'badge',
20  },
21  exportAs: 'zBadge',
22})
23export class ZardBadgeComponent {
24  readonly zType = input<ZardBadgeTypeVariants>('default');
25 
26  readonly class = input<ClassValue>('');
27 
28  protected readonly classes = computed(() => mergeClasses(badgeVariants({ zType: this.zType() }), this.class()));
29}