refactor(card): host class metadata, input signals

Author: xidedix

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

@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, input, InputSignal } from '@angular/core';
 import { Colors, TextColors } from '../coreui.types';
 import { TextBgColorDirective, TextColorDirective } from '../utilities';
 
@@ -9,36 +9,38 @@ import { TextBgColorDirective, TextColorDirective } from '../utilities';
   hostDirectives: [
     { directive: TextColorDirective, inputs: ['cTextColor: textColor'] },
     { directive: TextBgColorDirective, inputs: ['cTextBgColor: textBgColor'] }
-  ]
+  ],
+  host: {
+    class: 'card'
+  }
 })
 export class CardComponent {
-
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
-  @Input() color?: Colors;
+  readonly color: InputSignal<Colors | undefined> = input();
 
   /**
    * Sets the text color context of the component to one of CoreUI’s themed colors.
    * via TextColorDirective
    * @type TextColors
    */
-  @Input() textColor?: TextColors;
+  readonly textColor: InputSignal<TextColors | undefined> = input();
 
   /**
-   * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
+   * Sets the component's color scheme to one of CoreUI themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
    * via TextBgColorDirective
    * @type Colors
    * @since 5.0.0
    */
-  @Input() textBgColor?: Colors;
+  readonly textBgColor: InputSignal<Colors | undefined> = input();
 
   @HostBinding('class')
   get hostClasses(): any {
     return {
       card: true,
-      [`bg-${this.color}`]: !!this.color
+      [`bg-${this.color()}`]: !!this.color()
     };
   }
 }