refactor(img): input signals, host bindings

Author: xidedix

projects/coreui-angular/src/lib/image/img.directive.spec.ts

@@ -1,8 +1,11 @@
+import { TestBed } from '@angular/core/testing';
 import { ImgDirective } from './img.directive';
 
 describe('ImgDirective', () => {
   it('should create an instance', () => {
-    const directive = new ImgDirective();
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new ImgDirective();
+      expect(directive).toBeTruthy();
+    });
   });
 });

projects/coreui-angular/src/lib/image/img.directive.ts

@@ -1,55 +1,56 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, computed, Directive, input, InputSignal, InputSignalWithTransform } from '@angular/core';
 
 @Directive({
   selector: '[cImg]',
-  standalone: true
+  standalone: true,
+  host: {
+    '[class]': 'hostClasses()',
+    '[style]': 'hostStyles()'
+  }
 })
 export class ImgDirective {
-
   /**
    * Set the horizontal aligment.
    * @type {'' | 'start' | 'end' | 'center'}
    */
-  @Input() align: '' | 'start' | 'end' | 'center' = '';
+  readonly align: InputSignal<'' | 'start' | 'end' | 'center'> = input<'' | 'start' | 'end' | 'center'>('');
 
   /**
    * Make image responsive.
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) fluid: string | boolean = false;
+  readonly fluid: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
   /**
    * Make image rounded.
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) rounded: string | boolean = false;
+  readonly rounded: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
   /**
    * Give an image a rounded 1px border appearance.
    * @type boolean
    */
-  @Input({ transform: booleanAttribute }) thumbnail: string | boolean = false;
+  readonly thumbnail: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
   /**
    * Color for image placeholder.
    */
-  @Input() placeholderColor = 'transparent';
+  readonly placeholderColor = input('transparent');
 
-  @HostBinding('style')
-  get getStyles(): any {
-    return { backgroundColor: this.placeholderColor };
-  }
+  readonly hostStyles = computed(() => {
+    return { backgroundColor: this.placeholderColor() };
+  });
 
-  @HostBinding('class')
-  get hostClasses(): any {
-    const align = this.align;
+  readonly hostClasses = computed(() => {
+    const align = this.align();
     return {
       [`float-${align}`]: align === 'start' || align === 'end',
       'd-block': align === 'center',
       'mx-auto': align === 'center',
-      'img-fluid': this.fluid,
-      'rounded': this.rounded,
-      'img-thumbnail': this.thumbnail
-    };
-  }
+      'img-fluid': this.fluid(),
+      rounded: this.rounded(),
+      'img-thumbnail': this.thumbnail()
+    } as Record<string, boolean>;
+  });
 }