skeleton

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 { skeletonVariants } from './skeleton.variants';
8 
9@Component({
10  selector: 'z-skeleton',
11  template: `
12    <div data-slot="skeleton" [class]="classes()"></div>
13  `,
14  changeDetection: ChangeDetectionStrategy.OnPush,
15  encapsulation: ViewEncapsulation.None,
16  host: {
17    class: 'block',
18  },
19  exportAs: 'zSkeleton',
20})
21export class ZardSkeletonComponent {
22  readonly class = input<ClassValue>('');
23 
24  protected readonly classes = computed(() => mergeClasses(skeletonVariants(), this.class()));
25}