refactor(align): signal inputs, host bindings, cleanup, tests

Author: xidedix

projects/coreui-angular/src/lib/utilities/align.directive.spec.ts

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

projects/coreui-angular/src/lib/utilities/align.directive.ts

@@ -1,20 +1,22 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { Alignment } from '../coreui.types';
 
 @Directive({
-  selector: '[cAlign]'
+  selector: '[cAlign]',
+  exportAs: 'cAlign',
+  host: { '[class]': 'hostClasses()' }
 })
 export class AlignDirective {
   /**
    * Set vertical alignment of inline, inline-block, inline-table, and table cell elements
-   * @type Alignment
+   * @return Alignment
    */
-  @Input('cAlign') align?: Alignment;
+  readonly align = input<Alignment>(undefined, { alias: 'cAlign' });
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
+    const align = this.align();
     return {
-      [`align-${this.align}`]: !!this.align
+      [`align-${align}`]: !!align
     };
-  }
+  });
 }