📦 refactor(avartar): using ngOptimizedImage directive

Author: mikij

.gitignore

@@ -50,4 +50,5 @@ Thumbs.db
 .clinerules
 .clineignore
 memory-bank
-.amazonq
+.amazonq
+.kilocode

apps/web/public/components/avatar/doc/api.md

@@ -4,13 +4,14 @@
 
 | Property      | Description                                       | Type                                        | Default   |
 | ------------- | ------------------------------------------------- | ------------------------------------------- | --------- |
-| `[zSize]`     | Avatar size variant                               | `sm \| default \| md \| lg \| xl \| number` | `default` |
-| `[zShape]`    | Avatar shape                                      | `circle \| rounded \| square`               | `circle`  |
-| `[zStatus]`   | Status indicator badge                            | `online \| offline \| doNotDisturb \| away` |           |
-| `[zSrc]`      | Image source URL                                  | `string`                                    |           |
+| `[class]`     | Additional CSS classes                            | `string`                                    | `''`      |
 | `[zAlt]`      | Image alt text for accessibility                  | `string`                                    | `''`      |
 | `[zFallback]` | Fallback text displayed while loading or on error | `string`                                    | `''`      |
-| `[class]`     | Additional CSS classes                            | `string`                                    | `''`      |
+| `[zPriority]` | Should image load with high priority              | `boolean`                                   | `false`   |
+| `[zShape]`    | Avatar shape                                      | `circle \| rounded \| square`               | `circle`  |
+| `[zSize]`     | Avatar size variant                               | `sm \| default \| md \| lg \| xl \| number` | `default` |
+| `[zSrc]`      | Image source URL                                  | `string \| SafeUrl`                         | `''`      |
+| `[zStatus]`   | Status indicator badge                            | `online \| offline \| doNotDisturb \| away` |           |
 
 [z-avatar-group] Component
 

apps/web/public/installation/manual/avatar.md

@@ -1,30 +1,43 @@
 
 
 ```angular-ts title="avatar.component.ts" expandable="true" expandableTitle="Expand" copyButton showLineNumbers
-import { ChangeDetectionStrategy, Component, computed, input, signal, ViewEncapsulation } from '@angular/core';
-
-import { avatarVariants, imageVariants, type ZardImageVariants, type ZardAvatarVariants } from './avatar.variants';
+import { NgOptimizedImage } from '@angular/common';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import type { SafeUrl } from '@angular/platform-browser';
 
 import { mergeClasses } from '@/shared/utils/merge-classes';
 
+import { avatarVariants, imageVariants, type ZardAvatarVariants, type ZardImageVariants } from './avatar.variants';
+
 export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
 
 @Component({
   selector: 'z-avatar, [z-avatar]',
-  standalone: true,
+  imports: [NgOptimizedImage],
   template: `
     @if (zFallback() && (!zSrc() || !imageLoaded())) {
       <span class="absolute z-0 m-auto text-base">{{ zFallback() }}</span>
     }
 
     @if (zSrc() && !imageError()) {
       <img
-        [src]="zSrc()"
+        fill
+        sizes="100%"
         [alt]="zAlt()"
         [class]="imgClasses()"
-        [hidden]="!imageLoaded()"
-        (load)="onImageLoad()"
+        [ngSrc]="zSrc()"
+        [priority]="zPriority()"
         (error)="onImageError()"
+        (load)="onImageLoad()"
       />
     }
 
@@ -41,7 +54,7 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-green-500"
+            class="absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-green-500"
           >
             <circle cx="12" cy="12" r="10" fill="currentColor" />
           </svg>
@@ -57,7 +70,7 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-red-500"
+            class="absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-500"
           >
             <circle cx="12" cy="12" r="10" fill="currentColor" />
           </svg>
@@ -73,7 +86,7 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-red-500"
+            class="absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-500"
           >
             <circle cx="12" cy="12" r="10" />
             <path d="M8 12h8" fill="currentColor" />
@@ -90,7 +103,7 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 rotate-y-180 text-yellow-400"
+            class="absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 rotate-y-180 text-yellow-400"
           >
             <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" fill="currentColor" />
           </svg>
@@ -110,17 +123,26 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
   exportAs: 'zAvatar',
 })
 export class ZardAvatarComponent {
-  readonly zStatus = input<ZardAvatarStatus>();
-  readonly zShape = input<ZardImageVariants['zShape']>('circle');
-  readonly zSize = input<ZardAvatarVariants['zSize'] | number>('default');
-  readonly zSrc = input<string>();
+  readonly class = input<string>('');
   readonly zAlt = input<string>('');
   readonly zFallback = input<string>('');
+  readonly zPriority = input(false, { transform: booleanAttribute });
+  readonly zShape = input<ZardImageVariants['zShape']>('circle');
+  readonly zSize = input<ZardAvatarVariants['zSize'] | number>('default');
+  readonly zSrc = input<string | SafeUrl>('');
+  readonly zStatus = input<ZardAvatarStatus>();
 
-  readonly class = input<string>('');
+  readonly imageError = signal(false);
+  readonly imageLoaded = signal(false);
 
-  protected readonly imageError = signal(false);
-  protected readonly imageLoaded = signal(false);
+  constructor() {
+    effect(() => {
+      // Reset image state when zSrc changes
+      this.zSrc();
+      this.imageError.set(false);
+      this.imageLoaded.set(false);
+    });
+  }
 
   protected readonly containerClasses = computed(() => {
     const size = this.zSize();

apps/web/public/r/avatar.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "name": "avatar.component.ts",
-      "content": "import { ChangeDetectionStrategy, Component, computed, input, signal, ViewEncapsulation } from '@angular/core';\n\nimport { avatarVariants, imageVariants, type ZardImageVariants, type ZardAvatarVariants } from './avatar.variants';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nexport type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';\n\n@Component({\n  selector: 'z-avatar, [z-avatar]',\n  standalone: true,\n  template: `\n    @if (zFallback() && (!zSrc() || !imageLoaded())) {\n      <span class=\"absolute z-0 m-auto text-base\">{{ zFallback() }}</span>\n    }\n\n    @if (zSrc() && !imageError()) {\n      <img\n        [src]=\"zSrc()\"\n        [alt]=\"zAlt()\"\n        [class]=\"imgClasses()\"\n        [hidden]=\"!imageLoaded()\"\n        (load)=\"onImageLoad()\"\n        (error)=\"onImageError()\"\n      />\n    }\n\n    @if (zStatus()) {\n      @switch (zStatus()) {\n        @case ('online') {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-green-500\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n          </svg>\n        }\n        @case ('offline') {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-red-500\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n          </svg>\n        }\n        @case ('doNotDisturb') {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-red-500\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <path d=\"M8 12h8\" fill=\"currentColor\" />\n          </svg>\n        }\n        @case ('away') {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 rotate-y-180 text-yellow-400\"\n          >\n            <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" fill=\"currentColor\" />\n          </svg>\n        }\n      }\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'containerClasses()',\n    '[style.width]': 'customSize()',\n    '[style.height]': 'customSize()',\n    '[attr.data-slot]': '\"avatar\"',\n    '[attr.data-status]': 'zStatus() ?? null',\n  },\n  exportAs: 'zAvatar',\n})\nexport class ZardAvatarComponent {\n  readonly zStatus = input<ZardAvatarStatus>();\n  readonly zShape = input<ZardImageVariants['zShape']>('circle');\n  readonly zSize = input<ZardAvatarVariants['zSize'] | number>('default');\n  readonly zSrc = input<string>();\n  readonly zAlt = input<string>('');\n  readonly zFallback = input<string>('');\n\n  readonly class = input<string>('');\n\n  protected readonly imageError = signal(false);\n  protected readonly imageLoaded = signal(false);\n\n  protected readonly containerClasses = computed(() => {\n    const size = this.zSize();\n    const zSize = typeof size === 'number' ? undefined : (size as ZardAvatarVariants['zSize']);\n\n    return mergeClasses(avatarVariants({ zShape: this.zShape(), zSize }), this.class());\n  });\n\n  protected readonly customSize = computed(() => {\n    const size = this.zSize();\n    return typeof size === 'number' ? `${size}px` : null;\n  });\n\n  protected readonly imgClasses = computed(() => mergeClasses(imageVariants({ zShape: this.zShape() })));\n\n  protected onImageLoad(): void {\n    this.imageLoaded.set(true);\n    this.imageError.set(false);\n  }\n\n  protected onImageError(): void {\n    this.imageError.set(true);\n    this.imageLoaded.set(false);\n  }\n}\n"
+      "content": "import { NgOptimizedImage } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { SafeUrl } from '@angular/platform-browser';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport { avatarVariants, imageVariants, type ZardAvatarVariants, type ZardImageVariants } from './avatar.variants';\n\nexport type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';\n\n@Component({\n  selector: 'z-avatar, [z-avatar]',\n  imports: [NgOptimizedImage],\n  template: `\n    @if (zFallback() && (!zSrc() || !imageLoaded())) {\n      <span class=\"absolute z-0 m-auto text-base\">{{ zFallback() }}</span>\n    }\n\n    @if (zSrc() && !imageError()) {\n      <img\n        fill\n        sizes=\"100%\"\n        [alt]=\"zAlt()\"\n        [class]=\"imgClasses()\"\n        [ngSrc]=\"zSrc()\"\n        [priority]=\"zPriority()\"\n        (error)=\"onImageError()\"\n        (load)=\"onImageLoad()\"\n      />\n    }\n\n    @if (zStatus()) {\n      @switch (zStatus()) {\n        @case ('online') {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-green-500\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n          </svg>\n        }\n        @case ('offline') {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-500\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n          </svg>\n        }\n        @case ('doNotDisturb') {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-500\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <path d=\"M8 12h8\" fill=\"currentColor\" />\n          </svg>\n        }\n        @case ('away') {\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            stroke=\"white\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 rotate-y-180 text-yellow-400\"\n          >\n            <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" fill=\"currentColor\" />\n          </svg>\n        }\n      }\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'containerClasses()',\n    '[style.width]': 'customSize()',\n    '[style.height]': 'customSize()',\n    '[attr.data-slot]': '\"avatar\"',\n    '[attr.data-status]': 'zStatus() ?? null',\n  },\n  exportAs: 'zAvatar',\n})\nexport class ZardAvatarComponent {\n  readonly class = input<string>('');\n  readonly zAlt = input<string>('');\n  readonly zFallback = input<string>('');\n  readonly zPriority = input(false, { transform: booleanAttribute });\n  readonly zShape = input<ZardImageVariants['zShape']>('circle');\n  readonly zSize = input<ZardAvatarVariants['zSize'] | number>('default');\n  readonly zSrc = input<string | SafeUrl>('');\n  readonly zStatus = input<ZardAvatarStatus>();\n\n  readonly imageError = signal(false);\n  readonly imageLoaded = signal(false);\n\n  constructor() {\n    effect(() => {\n      // Reset image state when zSrc changes\n      this.zSrc();\n      this.imageError.set(false);\n      this.imageLoaded.set(false);\n    });\n  }\n\n  protected readonly containerClasses = computed(() => {\n    const size = this.zSize();\n    const zSize = typeof size === 'number' ? undefined : (size as ZardAvatarVariants['zSize']);\n\n    return mergeClasses(avatarVariants({ zShape: this.zShape(), zSize }), this.class());\n  });\n\n  protected readonly customSize = computed(() => {\n    const size = this.zSize();\n    return typeof size === 'number' ? `${size}px` : null;\n  });\n\n  protected readonly imgClasses = computed(() => mergeClasses(imageVariants({ zShape: this.zShape() })));\n\n  protected onImageLoad(): void {\n    this.imageLoaded.set(true);\n    this.imageError.set(false);\n  }\n\n  protected onImageError(): void {\n    this.imageError.set(true);\n    this.imageLoaded.set(false);\n  }\n}\n"
     },
     {
       "name": "avatar-group.component.ts",

libs/zard/src/lib/shared/components/avatar/avatar.component.spec.ts

@@ -1,13 +1,12 @@
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { type ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { ZardAvatarComponent, ZardAvatarStatus } from './avatar.component';
-import { ZardAvatarVariants, ZardImageVariants } from './avatar.variants';
+import { ZardAvatarComponent, type ZardAvatarStatus } from './avatar.component';
+import { type ZardAvatarVariants, type ZardImageVariants } from './avatar.variants';
 
 @Component({
   imports: [ZardAvatarComponent],
-  standalone: true,
   template: `
     <z-avatar
       [zSize]="zSize"
@@ -143,6 +142,54 @@ describe('ZardAvatarComponent', () => {
       expect(fallbackElement).toBeTruthy();
       expect(fallbackElement.nativeElement.textContent.trim()).toBe('AB');
     });
+
+    it('should handle image load event correctly', () => {
+      // Set a valid image path
+      hostComponent.zSrc = 'valid-image.jpg';
+      fixture.detectChanges();
+
+      // Locate the img element and verify src attribute
+      const imgElement = fixture.debugElement.query(By.css('img')).nativeElement;
+      expect(imgElement.src).toContain('valid-image.jpg');
+
+      // Simulate successful load event
+      imgElement.dispatchEvent(new Event('load'));
+      fixture.detectChanges();
+
+      // Verify load state
+      expect(avatarComponent.imageLoaded()).toBe(true);
+      expect(avatarComponent.imageError()).toBe(false);
+    });
+
+    it('should handle image error event and reset state when zSrc changes', () => {
+      // Set an invalid image path
+      hostComponent.zSrc = 'invalid-image.jpg';
+      fixture.detectChanges();
+
+      // Locate the img element
+      const imgElement = fixture.debugElement.query(By.css('img')).nativeElement;
+      expect(imgElement.src).toContain('invalid-image.jpg');
+
+      // Dispatch error event
+      imgElement.dispatchEvent(new Event('error'));
+      fixture.detectChanges();
+
+      // Verify error state
+      expect(avatarComponent.imageError()).toBe(true);
+      expect(avatarComponent.imageLoaded()).toBe(false);
+
+      // Change to a fallback image path
+      hostComponent.zSrc = 'fallback-image.jpg';
+      fixture.detectChanges();
+
+      // Verify the img element's src updates to the fallback path
+      const imgElementAfterChange = fixture.debugElement.query(By.css('img')).nativeElement;
+      expect(imgElementAfterChange.src).toContain('fallback-image.jpg');
+
+      // Verify error state is reset
+      expect(avatarComponent.imageError()).toBe(false);
+      expect(avatarComponent.imageLoaded()).toBe(false);
+    });
   });
 
   describe('Status indicators', () => {