avatar

1import { NgOptimizedImage } from '@angular/common';
2import {
3  booleanAttribute,
4  ChangeDetectionStrategy,
5  Component,
6  computed,
7  effect,
8  input,
9  signal,
10  ViewEncapsulation,
11} from '@angular/core';
12import type { SafeUrl } from '@angular/platform-browser';
13 
14import { NgIcon } from '@ng-icons/core';
15import type { ClassValue } from 'clsx';
16 
17import { mergeClasses } from '@/shared/utils/merge-classes';
18 
19import {
20  avatarVariants,
21  avatarBadgeVariants,
22  fallbackVariants,
23  imageVariants,
24  type ZardAvatarSizeVariants,
25} from './avatar.variants';
26 
27@Component({
28  selector: 'z-avatar, [z-avatar]',
29  imports: [NgOptimizedImage, NgIcon],
30  template: `
31    @if (zFallback() && (!zSrc() || !imageLoaded())) {
32      <span [class]="fallbackClasses()">
33        {{ zFallback() }}
34      </span>
35    }
36 
37    @if (zSrc() && !imageError()) {
38      <img
39        [width]="32"
40        [height]="32"
41        [alt]="zAlt()"
42        [class]="imgClasses()"
43        [ngSrc]="zSrc()"
44        [priority]="zPriority()"
45        (error)="onImageError()"
46        (load)="onImageLoad()"
47      />
48    }
49 
50    @if (zShowBadge()) {
51      <div [class]="badgeClasses()">
52        @if (zBadgeIcon()) {
53          <ng-icon [name]="zBadgeIcon()" size="8" />
54        }
55      </div>
56    }
57  `,
58  changeDetection: ChangeDetectionStrategy.OnPush,
59  encapsulation: ViewEncapsulation.None,
60  host: {
61    '[class]': 'avatarClasses()',
62    '[attr.data-slot]': '"avatar"',
63    '[attr.data-size]': 'zSize()',
64  },
65  exportAs: 'zAvatar',
66})
67export class ZardAvatarComponent {
68  readonly class = input<ClassValue>('');
69  readonly zAlt = input<string>('');
70  readonly zBadgeClass = input<ClassValue>('');
71  readonly zBadgeIcon = input<string>('');
72  readonly zFallback = input<string>('');
73  readonly zPriority = input(false, { transform: booleanAttribute });
74  readonly zSize = input<ZardAvatarSizeVariants>('default');
75  readonly zSrc = input<string | SafeUrl>('');
76  readonly zShowBadge = input(false, { transform: booleanAttribute });
77 
78  protected readonly imageError = signal(false);
79  protected readonly imageLoaded = signal(false);
80 
81  constructor() {
82    effect(() => {
83      // Reset image state when zSrc changes
84      this.zSrc();
85      this.imageError.set(false);
86      this.imageLoaded.set(false);
87    });
88  }
89 
90  protected readonly avatarClasses = computed(() =>
91    mergeClasses(avatarVariants({ zSize: this.zSize() }), this.class()),
92  );
93 
94  protected readonly fallbackClasses = computed(() => fallbackVariants());
95 
96// … truncated