refactor(avatar): remove NgOptimizedImage directive, add object-fit: cover

Author: xidedix

projects/coreui-angular/src/lib/avatar/avatar.component.html

@@ -1,7 +1,7 @@
 <ng-content>
   @if (src()) {
     @defer (prefetch on idle) {
-      <img [ngSrc]="src() ?? ''" fill="" class="avatar-img" alt="{{alt()}}" />
+      <img src="{{src() ?? ''}}" class="avatar-img" alt="{{alt()}}" />
     } @placeholder () {
       <svg aria-label="Avatar placeholder"
            focusable="false"

projects/coreui-angular/src/lib/avatar/avatar.component.scss

@@ -0,0 +1,5 @@
+:host {
+  .avatar-img {
+    object-fit: cover;
+  }
+}

projects/coreui-angular/src/lib/avatar/avatar.component.ts

@@ -1,20 +1,21 @@
-import { NgClass, NgOptimizedImage } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { Component, computed, input, InputSignal } from '@angular/core';
 
 import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
 import { TextColorDirective } from '../utilities';
 
 @Component({
-    selector: 'c-avatar',
-    templateUrl: './avatar.component.html',
-    imports: [NgClass, NgOptimizedImage],
-    hostDirectives: [
-        {
-            directive: TextColorDirective,
-            inputs: ['cTextColor: textColor']
-        }
-    ],
-    host: { class: 'avatar', '[class]': 'hostClasses()' }
+  selector: 'c-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss'],
+  imports: [NgClass],
+  hostDirectives: [
+    {
+      directive: TextColorDirective,
+      inputs: ['cTextColor: textColor']
+    }
+  ],
+  host: { class: 'avatar', '[class]': 'hostClasses()' }
 })
 export class AvatarComponent {
   /**