refactor(widgets): input signals, host bindings

Author: xidedix

projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.html

@@ -1,28 +1,28 @@
 <ng-container>
   <c-card-body [ngClass]="bodyClasses">
     <div>
-      @if (!!value || templates?.widgetValueTemplate) {
+      @if (!!value() || templates?.['widgetValueTemplate']) {
         <div class="fs-4 fw-semibold">
-          <ng-container *ngTemplateOutlet="templates?.widgetValueTemplate || defaultWidgetValueTemplate" />
+          <ng-container *ngTemplateOutlet="templates?.['widgetValueTemplate'] || defaultWidgetValueTemplate" />
         </div>
       }
-      @if (!!title || templates?.widgetTitleTemplate) {
+      @if (!!title() || templates?.['widgetTitleTemplate']) {
         <div>
-          <ng-container *ngTemplateOutlet="templates?.widgetTitleTemplate || defaultWidgetTitleTemplate" />
+          <ng-container *ngTemplateOutlet="templates?.['widgetTitleTemplate'] || defaultWidgetTitleTemplate" />
         </div>
       }
     </div>
-    <ng-container *ngTemplateOutlet="templates?.widgetActionTemplate || defaultWidgetActionTemplate" />
+    <ng-container *ngTemplateOutlet="templates?.['widgetActionTemplate'] || defaultWidgetActionTemplate" />
   </c-card-body>
-  <ng-container *ngTemplateOutlet="templates?.widgetChartTemplate || defaultWidgetChartTemplate" />
+  <ng-container *ngTemplateOutlet="templates?.['widgetChartTemplate'] || defaultWidgetChartTemplate" />
 </ng-container>
 
 <ng-template #defaultWidgetTitleTemplate>
-  {{ title }}
+  {{ title() }}
 </ng-template>
 
 <ng-template #defaultWidgetValueTemplate>
-  {{ value }}
+  {{ value() }}
 </ng-template>
 
 <ng-template #defaultWidgetChartTemplate>

projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.spec.ts

@@ -9,8 +9,7 @@ describe('WidgetStatAComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [WidgetStatAComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -22,4 +21,8 @@ describe('WidgetStatAComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css class"', () => {
+    expect(fixture.nativeElement).toHaveClass('card');
+  });
 });

projects/coreui-angular/src/lib/widget/widget-stat-a/widget-stat-a.component.ts

@@ -1,8 +1,8 @@
-import { AfterContentInit, Component, ContentChildren, HostBinding, Input, QueryList } from '@angular/core';
+import { Component, computed, contentChildren, effect, input, InputSignal, TemplateRef } from '@angular/core';
 
 import { Colors } from '../../coreui.types';
 import { TemplateIdDirective } from '../../shared';
-import { CardBodyComponent } from '../../card';
+import { CardBodyComponent, CardComponent } from '../../card';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 @Component({
@@ -11,37 +11,45 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
   exportAs: 'cWidgetStatA',
   imports: [CardBodyComponent, NgClass, NgTemplateOutlet],
   standalone: true,
-  host: { class: 'card' }
+  host: { class: 'card', '[class]': 'hostClasses()' }
 })
-export class WidgetStatAComponent implements AfterContentInit {
+export class WidgetStatAComponent extends CardComponent {
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
    * @type Colors
    */
-  @Input() color?: Colors;
+  // override readonly color = input<Colors>();
+
   /**
    * Title of the widget to display
    * @type string
    */
-  @Input() title?: string;
+  readonly title: InputSignal<string | undefined> = input();
+
   /**
    * Value for your widget to display
    * @type string
    */
-  @Input() value?: string;
+  readonly value: InputSignal<string | undefined> = input<string>();
+
+  templates: Record<string, TemplateRef<any>> = {};
 
-  templates: any = {};
+  readonly contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
 
-  @ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList<TemplateIdDirective>;
+  readonly contentTemplatesEffect = effect(() => {
+    this.contentTemplates().forEach((child: TemplateIdDirective) => {
+      this.templates[child.id] = child.templateRef;
+    });
+  });
 
-  @HostBinding('class')
-  get hostClasses() {
+  override readonly hostClasses = computed(() => {
+    const color = this.color();
     return {
       card: true,
-      [`bg-${this.color}`]: !!this.color,
-      'text-white': !!this.color
-    };
-  }
+      [`bg-${color}`]: !!color,
+      'text-white': !!color
+    } as Record<string, boolean>;
+  });
 
   get bodyClasses() {
     return {
@@ -51,10 +59,4 @@ export class WidgetStatAComponent implements AfterContentInit {
       'align-items-start': true
     };
   }
-
-  ngAfterContentInit(): void {
-    this.contentTemplates.forEach((child: TemplateIdDirective) => {
-      this.templates[child.id] = child.templateRef;
-    });
-  }
 }

projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.spec.ts

@@ -9,8 +9,7 @@ describe('WidgetStatBComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [WidgetStatBComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -22,4 +21,8 @@ describe('WidgetStatBComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css class"', () => {
+    expect(fixture.nativeElement).toHaveClass('card');
+  });
 });

projects/coreui-angular/src/lib/widget/widget-stat-b/widget-stat-b.component.ts

@@ -1,4 +1,4 @@
-import { booleanAttribute, Component, HostBinding, input, InputSignal, InputSignalWithTransform } from '@angular/core';
+import { booleanAttribute, Component, computed, input, InputSignal, InputSignalWithTransform } from '@angular/core';
 import { NgClass } from '@angular/common';
 
 import { CardBodyComponent, CardComponent } from '../../card';
@@ -9,7 +9,7 @@ import { CardBodyComponent, CardComponent } from '../../card';
   exportAs: 'cWidgetStatB',
   standalone: true,
   imports: [CardBodyComponent, NgClass],
-  host: { class: 'card' }
+  host: { class: 'card', '[class]': 'hostClasses()' }
 })
 export class WidgetStatBComponent extends CardComponent {
   constructor() {
@@ -33,33 +33,34 @@ export class WidgetStatBComponent extends CardComponent {
    * Title of the widget to display
    * @type string
    */
-  readonly title: InputSignal<string | undefined> = input();
+  readonly title: InputSignal<string | undefined> = input<string>();
 
   /**
    * Helper text for your widget.
    * @type string
    */
-  readonly text: InputSignal<string | undefined> = input();
+  readonly text: InputSignal<string | undefined> = input<string>();
 
   /**
    * Value for your widget to display
    * @type string
    */
-  readonly value: InputSignal<string | undefined> = input();
+  readonly value: InputSignal<string | undefined> = input<string>();
 
   /**
    * Invert colors from their default dark shade.
    * @type boolean
    */
   readonly inverse: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
 
-  @HostBinding('class')
-  override get hostClasses() {
+  override readonly hostClasses = computed(() => {
+    const color = this.color();
+    const textColor = this.textColor();
     return {
       card: true,
-      [`bg-${this.color()}`]: !!this.color(),
-      [`text-${this.textColor()}`]: !!this.textColor(),
+      [`bg-${color}`]: !!color,
+      [`text-${textColor}`]: !!textColor,
       'text-white': this.inverse()
-    };
-  }
+    } as Record<string, boolean>;
+  });
 }

projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.html

@@ -1,26 +1,26 @@
 <c-card-body>
-  @if (icon || templates?.widgetIconTemplate) {
-    <div [ngClass]="iconClasses">
-      <ng-container *ngTemplateOutlet="templates?.widgetIconTemplate || defaultWidgetIconTemplate" />
+  @if (icon() || templates?.['widgetIconTemplate']) {
+    <div [ngClass]="iconClasses()">
+      <ng-container *ngTemplateOutlet="templates?.['widgetIconTemplate'] || defaultWidgetIconTemplate" />
     </div>
   }
-  @if (!!value) {
-    <div [ngClass]="valueClasses">
-      {{ value }}
+  @if (!!value()) {
+    <div [ngClass]="valueClasses()">
+      {{ value() }}
     </div>
   }
-  @if (!!title) {
-    <div [ngClass]="titleClasses">
-      {{ title }}
+  @if (!!title()) {
+    <div [ngClass]="titleClasses()">
+      {{ title() }}
     </div>
   }
-  @if (templates?.widgetProgressTemplate) {
-    <ng-container *ngTemplateOutlet="templates?.widgetProgressTemplate || defaultWidgetProgressTemplate" />
+  @if (templates?.['widgetProgressTemplate']) {
+    <ng-container *ngTemplateOutlet="templates?.['widgetProgressTemplate'] || defaultWidgetProgressTemplate" />
   }
 </c-card-body>
 
 <ng-template #defaultWidgetIconTemplate>
-  {{ icon }}
+  {{ icon() }}
 </ng-template>
 
 <ng-template #defaultWidgetProgressTemplate>

projects/coreui-angular/src/lib/widget/widget-stat-c/widget-stat-c.component.spec.ts

@@ -9,8 +9,7 @@ describe('WidgetStatCComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [WidgetStatCComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -22,4 +21,8 @@ describe('WidgetStatCComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have css class"', () => {
+    expect(fixture.nativeElement).toHaveClass('card');
+  });
 });