empty

1import { NgOptimizedImage } from '@angular/common';
2import {
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  input,
7  type TemplateRef,
8  ViewEncapsulation,
9} from '@angular/core';
10 
11import { NgIcon } from '@ng-icons/core';
12import type { ClassValue } from 'clsx';
13 
14import { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';
15import { mergeClasses } from '@/shared/utils/merge-classes';
16 
17import {
18  emptyActionsVariants,
19  emptyDescriptionVariants,
20  emptyHeaderVariants,
21  emptyIconVariants,
22  emptyImageVariants,
23  emptyTitleVariants,
24  emptyVariants,
25} from './empty.variants';
26 
27@Component({
28  selector: 'z-empty',
29  imports: [NgOptimizedImage, NgIcon, ZardStringTemplateOutletDirective],
30  template: `
31    @let image = zImage();
32    @let icon = zIcon();
33    @let title = zTitle();
34    @let description = zDescription();
35    @let actions = zActions();
36 
37    <div data-slot="empty-header" [class]="headerClasses()">
38      @if (image) {
39        <div data-slot="empty-media" data-variant="default" [class]="imageClasses()">
40          <ng-container *zStringTemplateOutlet="image">
41            <img [ngSrc]="image" width="64" height="64" alt="Empty" class="mx-auto" />
42          </ng-container>
43        </div>
44      } @else if (icon) {
45        <div data-slot="empty-media" data-variant="icon" [class]="iconClasses()" data-testid="icon">
46          <ng-icon [name]="icon" class="size-4!" />
47        </div>
48      }
49 
50      @if (title) {
51        <div data-slot="empty-title" [class]="titleClasses()">
52          <ng-container *zStringTemplateOutlet="title">{{ title }}</ng-container>
53        </div>
54      }
55 
56      @if (description) {
57        <div data-slot="empty-description" [class]="descriptionClasses()">
58          <ng-container *zStringTemplateOutlet="description">{{ description }}</ng-container>
59        </div>
60      }
61    </div>
62 
63    @if (actions.length) {
64      <div data-slot="empty-content" [class]="actionsClasses()">
65        @for (action of actions; track $index) {
66          <ng-container *zStringTemplateOutlet="action" />
67        }
68      </div>
69    }
70 
71    <ng-content />
72  `,
73  changeDetection: ChangeDetectionStrategy.OnPush,
74  encapsulation: ViewEncapsulation.None,
75  host: {
76    'data-slot': 'empty',
77    '[class]': 'classes()',
78  },
79  exportAs: 'zEmpty',
80})
81export class ZardEmptyComponent {
82  readonly zActions = input<TemplateRef<void>[]>([]);
83  readonly zIcon = input<string>();
84// … truncated