refactor(table-color): signal inputs, host bindings, cleanup, tests

Author: xidedix

projects/coreui-angular/src/lib/table/table-color.directive.spec.ts

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

projects/coreui-angular/src/lib/table/table-color.directive.ts

@@ -1,20 +1,23 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { computed, Directive, input } from '@angular/core';
 import { Colors } from '../coreui.types';
 
 @Directive({
-  selector: '[cTableColor]'
+  selector: '[cTableColor]',
+  exportAs: 'cTableColor',
+  host: {
+    '[class]': 'hostClasses()'
+  }
 })
 export class TableColorDirective {
   /**
    * Use contextual color for tables, table rows or individual cells.
-   * @type Colors
+   * @return Colors
    */
-  @Input('cTableColor') color?: Colors;
+  readonly color = input<Colors>(undefined, { alias: "cTableColor" });
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed((): Record<string,boolean> =>  {
     return {
-      [`table-${this.color}`]: !!this.color
+      [`table-${this.color()}`]: !!this.color()
     };
-  }
+  });
 }