Adds new feature - Avatar support image and label together

src/app/components/avatar/avatar.css

@@ -1,4 +1,7 @@
 @layer primeng {
+ .p-avatar-host{
+ display: inline-flex;
+ }
  .p-avatar {
  display: inline-flex;
  align-items: center;

src/app/components/avatar/avatar.ts

@@ -9,16 +9,16 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Outp
  template: `
  <div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-label]="ariaLabel" [attr.data-pc-name]="'avatar'">
  <ng-content></ng-content>
- <span class="p-avatar-text" *ngIf="label; else iconTemplate">{{ label }}</span>
- <ng-template #iconTemplate><span [class]="icon" [ngClass]="'p-avatar-icon'" *ngIf="icon; else imageTemplate"></span></ng-template>
- <ng-template #imageTemplate><img [src]="image" *ngIf="image" (error)="imageError($event)" [attr.aria-label]="ariaLabel" /></ng-template>
+ <span class="p-avatar-text" [ngStyle]="labelStyle" *ngIf="label; else iconTemplate">{{ label }}</span>
+ <ng-template #iconTemplate><span [class]="icon" [ngClass]="'p-avatar-icon'" *ngIf="icon"></span></ng-template>
+ <img [src]="image" *ngIf="image && !icon" (error)="imageError($event)" [attr.aria-label]="ariaLabel" />
  </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./avatar.css'],
  host: {
- class: 'p-element'
+ class: 'p-avatar-host p-element'
  }
 })
 export class Avatar {
@@ -87,6 +87,12 @@ export class Avatar {
  imageError(event: Event) {
  this.onImageError.emit(event);
  }
+
+ get labelStyle(){
+ return {
+ 'position': this.image ? 'absolute' : undefined
+ }
+ }
 }
 
 @NgModule({

src/app/showcase/doc/avatar/imagedoc.ts

@@ -22,73 +22,92 @@ import { Code } from '@domain/code';
  <h5>Gravatar</h5>
  <p-avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" styleClass="flex align-items-center justify-content-center mr-2" size="xlarge" />
  </div>
+ <div class="flex-auto">
+ <h5>Image with Label</h5>
+ <p-avatar image="https://hetzner.arematics.com/assets/images/gradient_image.svg" label="UN" styleClass="mr-2 text-white" size="xlarge" shape="circle" />
+ </div>
  </div>
  </div>
  <app-code [code]="code" selector="avatar-image-demo"></app-code>
  `
 })
 export class ImageDoc {
  code: Code = {
- basic: `<p-avatar 
- image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
- styleClass="mr-2" 
- size="xlarge" 
+ basic: `<p-avatar
+ image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
+ styleClass="mr-2"
+ size="xlarge"
  shape="circle" />
-<p-avatar 
- image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" 
- styleClass="mr-2" 
- size="large" 
+<p-avatar
+ image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png"
+ styleClass="mr-2"
+ size="large"
  shape="circle" />
-<p-avatar 
- image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" 
- styleClass="mr-2" 
+<p-avatar
+ image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png"
+ styleClass="mr-2"
  shape="circle" />
 
-<p-avatar 
- pBadge 
- value="4" 
- image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg" 
+<p-avatar
+ pBadge
+ value="4"
+ image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg"
  size="xlarge"
  badgeSize="large" />
 
-<p-avatar 
- image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" 
- styleClass="flex align-items-center justify-content-center mr-2" 
- size="xlarge" />`,
+<p-avatar
+ image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"
+ styleClass="flex align-items-center justify-content-center mr-2"
+ size="xlarge" />
+
+<p-avatar
+ image="https://hetzner.arematics.com/assets/images/gradient_image.svg"
+ label="UN"
+ styleClass="mr-2 text-white"
+ size="xlarge"
+ shape="circle" />`,
  html: `<div class="card">
  <div class="flex flex-wrap gap-5">
  <div class="flex-auto">
- <p-avatar 
- image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
- styleClass="mr-2" 
- size="xlarge" 
+ <p-avatar
+ image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
+ styleClass="mr-2"
+ size="xlarge"
  shape="circle" />
- <p-avatar 
- image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" 
- styleClass="mr-2" 
- size="large" 
+ <p-avatar
+ image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png"
+ styleClass="mr-2"
+ size="large"
  shape="circle" />
- <p-avatar 
- image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" 
- styleClass="mr-2" 
+ <p-avatar
+ image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png"
+ styleClass="mr-2"
  shape="circle" />
  </div>
  <div class="flex-auto">
  <h5>Badge</h5>
- <p-avatar 
- pBadge 
- value="4" 
- image="https://primefaces.org/cdn/primeng/demo/avatar/walter.jpg" 
+ <p-avatar
+ pBadge
+ value="4"
+ image="https://primefaces.org/cdn/primeng/demo/avatar/walter.jpg"
  size="xlarge"
  badgeSize="large" />
  </div>
  <div class="flex-auto">
  <h5>Gravatar</h5>
- <p-avatar 
- image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" 
- styleClass="flex align-items-center justify-content-center mr-2" 
+ <p-avatar
+ image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"
+ styleClass="flex align-items-center justify-content-center mr-2"
  size="xlarge" />
  </div>
+ <div class="flex-auto">
+ <h5>Image with Label</h5>
+ <p-avatar image="https://hetzner.arematics.com/assets/images/gradient_image.svg"
+ label="UN"
+ styleClass="mr-2 text-white"
+ size="xlarge"
+ shape="circle" />
+ </div>
  </div>
 </div>`,
  typescript: `import { Component } from '@angular/core';