refactor(card): host bindings

Author: xidedix

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

@@ -1,4 +1,4 @@
-import { Component, HostBinding, input, InputSignal } from '@angular/core';
+import { Component, computed, input, InputSignal } from '@angular/core';
 import { Colors, TextColors } from '../coreui.types';
 import { TextBgColorDirective, TextColorDirective } from '../utilities';
 
@@ -10,7 +10,7 @@ import { TextBgColorDirective, TextColorDirective } from '../utilities';
     { directive: TextColorDirective, inputs: ['cTextColor: textColor'] },
     { directive: TextBgColorDirective, inputs: ['cTextBgColor: textBgColor'] }
   ],
-  host: { class: 'card' }
+  host: { class: 'card', '[class]': 'hostClasses()' }
 })
 export class CardComponent {
   /**
@@ -34,11 +34,11 @@ export class CardComponent {
    */
   readonly textBgColor: InputSignal<Colors | undefined> = input();
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
+    const color = this.color();
     return {
       card: true,
-      [`bg-${this.color()}`]: !!this.color()
-    };
-  }
+      [`bg-${color}`]: !!color
+    } as Record<string, boolean>;
+  });
 }