spinner

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  input,
6  type TemplateRef,
7  ViewEncapsulation,
8} from '@angular/core';
9 
10import type { ClassValue } from 'clsx';
11 
12import { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';
13import { mergeClasses } from '@/shared/utils/merge-classes';
14 
15@Component({
16  selector: 'z-spinner',
17  imports: [ZardStringTemplateOutletDirective],
18  template: `
19    @let icon = zIcon();
20    @if (icon) {
21      <ng-container *zStringTemplateOutlet="icon; context: iconContext()" />
22    } @else {
23      <svg
24        data-slot="spinner"
25        xmlns="http://www.w3.org/2000/svg"
26        viewBox="0 0 24 24"
27        fill="none"
28        stroke="currentColor"
29        stroke-width="2"
30        stroke-linecap="round"
31        stroke-linejoin="round"
32        [class]="classes()"
33      >
34        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
35      </svg>
36    }
37  `,
38  changeDetection: ChangeDetectionStrategy.OnPush,
39  encapsulation: ViewEncapsulation.None,
40  host: {
41    class: 'inline-flex',
42    role: 'status',
43    'aria-label': 'Loading',
44  },
45  exportAs: 'zSpinner',
46})
47export class ZardSpinnerComponent {
48  readonly class = input<ClassValue>('');
49  readonly zIcon = input<TemplateRef<{ $implicit: string }> | undefined>(undefined);
50 
51  protected readonly classes = computed(() => mergeClasses('size-4 animate-spin', this.class()));
52  protected readonly iconContext = computed(() => ({ $implicit: this.classes() }));
53}