refactor(avatar): template default ng-content, host class metadata, input signals

Author: xidedix

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

@@ -1,14 +1,9 @@
-<ng-container>
-  <ng-container *ngTemplateOutlet="defaultImageTemplate" />
-  @if (!!status) {
-    <span [ngClass]="statusClass"></span>
+<ng-content>
+  @if (src()) {
+    <img [ngSrc]="src() ?? ''" fill class="avatar-img" alt="{{alt()}}" />
   }
-</ng-container>
+</ng-content>
+@if (!!status()) {
+  <span [ngClass]="statusClass()"></span>
+}
 
-<ng-template #defaultImageTemplate>
-  @if (!!src) {
-    <img [ngSrc]="src" fill class="avatar-img" alt="{{alt}}" />
-  } @else {
-    <ng-content />
-  }
-</ng-template>

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

@@ -1,5 +1,5 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
+import { Component, computed, HostBinding, input, InputSignal } from '@angular/core';
+import { NgClass, NgOptimizedImage } from '@angular/common';
 
 import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
 import { TextColorDirective } from '../utilities';
@@ -8,72 +8,73 @@ import { TextColorDirective } from '../utilities';
   selector: 'c-avatar',
   templateUrl: './avatar.component.html',
   standalone: true,
-  imports: [NgTemplateOutlet, NgClass, NgOptimizedImage],
+  imports: [NgClass, NgOptimizedImage],
   hostDirectives: [
     {
       directive: TextColorDirective,
       inputs: ['cTextColor: textColor']
     }
-  ]
+  ],
+  host: { class: 'avatar' }
 })
 export class AvatarComponent {
   /**
    * Sets the background color context of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
-  @Input() color?: Colors;
+  readonly color: InputSignal<Colors | undefined> = input();
 
   /**
    * Select the shape of the component.
    * @type Shapes
    */
-  @Input() shape?: Shapes;
+  readonly shape: InputSignal<Shapes | undefined> = input();
 
   /**
    * Size the component small, large, or extra large.
    * @default 'md'
    */
-  @Input() size?: Omit<Sizes, 'xxl'> = 'md';
+  readonly size: InputSignal<Omit<Sizes, 'xxl'>> = input<Omit<Sizes, 'xxl'>>('md');
 
   /**
    * The alt attribute for the img element alternate text.
    * @type string
    */
-  @Input() alt: string = '';
+  readonly alt: InputSignal<string> = input('');
 
   /**
    * The src attribute for the img element.
    * @type string
    */
-  @Input() src?: string;
+  readonly src: InputSignal<string | undefined> = input();
 
   /**
    * Sets the color context of the status indicator to one of CoreUI’s themed colors.
    * @type Colors
    */
-  @Input() status?: Colors;
+  readonly status: InputSignal<Colors | undefined> = input();
 
   /**
    * Sets the text color of the component to one of CoreUI’s themed colors.
    * via TextColorDirective
    * @type TextColors
    */
-  @Input() textColor?: TextColors;
+  readonly textColor: InputSignal<TextColors | undefined> = input();
 
-  get statusClass(): any {
+  readonly statusClass = computed(() => {
     return {
       'avatar-status': true,
-      [`bg-${this.status}`]: !!this.status
+      [`bg-${this.status()}`]: !!this.status()
     };
-  }
+  });
 
   @HostBinding('class')
   get hostClasses(): any {
     return {
       avatar: true,
-      [`avatar-${this.size}`]: !!this.size,
-      [`bg-${this.color}`]: !!this.color,
-      [`${this.shape}`]: !!this.shape
+      [`avatar-${this.size()}`]: !!this.size(),
+      [`bg-${this.color()}`]: !!this.color(),
+      [`${this.shape()}`]: !!this.shape()
     };
   }
 }