Fixed #9639 - Avatar Component

src/app/components/avatar/avatar.ts

@@ -0,0 +1,50 @@
+import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'p-avatar',
+    template: `
+        <div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
+            <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"></ng-template>
+        </div>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./avatar.css']
+})
+export class Avatar {
+
+    @Input() label: string;
+
+    @Input() icon: string;
+
+    @Input() image: string;
+
+    @Input() size: string = "normal";
+
+    @Input() shape: string = "square";
+
+    @Input() style: any;
+
+    @Input() styleClass: string;
+
+    containerClass() {
+        return {
+            'p-avatar p-component': true,
+            'p-avatar-image': this.image != null,
+            'p-avatar-circle': this.shape === 'circle',
+            'p-avatar-lg': this.size === 'large',
+            'p-avatar-xl': this.size === 'xlarge'
+        };
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [Avatar],
+    declarations: [Avatar]
+})
+export class AvatarModule { }

src/app/components/avatar/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }

src/app/components/avatar/public_api.ts

@@ -0,0 +1 @@
+export * from './avatar';

src/app/components/avatargroup/avatargroup.css

@@ -0,0 +1,8 @@
+.p-avatar-group p-avatar + p-avatar {
+    margin-left: -1rem;
+}
+
+.p-avatar-group {
+    display: flex;
+    align-items: center;
+}

src/app/components/avatargroup/avatargroup.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { AvatarGroup } from './avatargroup';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('AvatarGroup', () => {
+
+	let button: AvatarGroup;
+	let fixture: ComponentFixture<AvatarGroup>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [
+				NoopAnimationsModule
+			],
+			declarations: [
+				AvatarGroup
+			]
+		});
+
+		fixture = TestBed.createComponent(AvatarGroup);
+		button = fixture.componentInstance;
+	});
+});

src/app/components/avatargroup/avatargroup.ts

@@ -0,0 +1,26 @@
+import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'p-avatarGroup',
+    template: `
+        <div [ngClass]="'p-avatar-group p-component'" [class]="styleClass">
+            <ng-content></ng-content>
+        </div>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./avatargroup.css']
+})
+export class AvatarGroup {
+
+    @Input() styleClass: string;
+
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [AvatarGroup],
+    declarations: [AvatarGroup]
+})
+export class AvatarGroupModule { }

src/app/components/avatargroup/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }

src/app/components/avatargroup/public_api.ts

@@ -0,0 +1 @@
+export * from './avatargroup';

src/app/showcase/components/avatar/avatardemo-routing.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router'
+import {AvatarDemo} from './avatardemo';
+
+@NgModule({
+	imports: [
+		RouterModule.forChild([
+			{path:'',component: AvatarDemo}
+		])
+	],
+	exports: [
+		RouterModule
+	]
+})
+export class AvatarDemoRoutingModule {}