alert

1import { ChangeDetectionStrategy, Component, computed, input, TemplateRef, ViewEncapsulation } from '@angular/core';
2 
3import { NgIcon, provideIcons } from '@ng-icons/core';
4import { lucideCircleAlert } from '@ng-icons/lucide';
5import type { ClassValue } from 'clsx';
6 
7import { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';
8import { mergeClasses } from '@/shared/utils/merge-classes';
9 
10import {
11  alertActionVariants,
12  alertDescriptionVariants,
13  alertIconVariants,
14  alertTitleVariants,
15  alertVariants,
16  type ZardAlertTypeVariants,
17} from './alert.variants';
18 
19@Component({
20  selector: 'z-alert, [z-alert]',
21  imports: [NgIcon, ZardStringTemplateOutletDirective],
22  template: `
23    @if (zIcon() || iconName()) {
24      <span [class]="iconClasses()" data-slot="alert-icon">
25        <ng-container *zStringTemplateOutlet="zIcon()">
26          <ng-icon [name]="iconName()" class="size-4!" />
27        </ng-container>
28      </span>
29    }
30 
31    <div class="flex-1">
32      @if (zTitle()) {
33        <div [class]="titleClasses()" data-slot="alert-title">
34          <ng-container *zStringTemplateOutlet="zTitle()">{{ zTitle() }}</ng-container>
35        </div>
36      }
37 
38      @if (zDescription()) {
39        <div data-slot="alert-description" [class]="descriptionClasses()">
40          <ng-container *zStringTemplateOutlet="zDescription()">{{ zDescription() }}</ng-container>
41        </div>
42      }
43 
44      @if (zAction()) {
45        <div data-slot="alert-action" [class]="actionClasses()">
46          <ng-container *zStringTemplateOutlet="zAction()" />
47        </div>
48      }
49    </div>
50  `,
51  changeDetection: ChangeDetectionStrategy.OnPush,
52  encapsulation: ViewEncapsulation.None,
53  viewProviders: [provideIcons({ lucideCircleAlert })],
54  host: {
55    '[attr.role]': 'role()',
56    '[class]': 'classes()',
57    'data-slot': 'alert',
58  },
59  exportAs: 'zAlert',
60})
61export class ZardAlertComponent {
62  readonly class = input<ClassValue>('');
63  readonly zAction = input<TemplateRef<void>>();
64  readonly zDescription = input<string | TemplateRef<void>>('');
65  readonly zIcon = input<TemplateRef<void> | string>();
66  readonly zRole = input<'alert' | 'status'>();
67  readonly zTitle = input<string | TemplateRef<void>>('');
68  readonly zType = input<ZardAlertTypeVariants>('default');
69 
70  protected readonly actionClasses = computed(() => alertActionVariants());
71// … truncated