refactor(form-feedback): signal inputs, host bindings, cleanup

Author: xidedix

projects/coreui-angular/src/lib/form/form-feedback/form-feedback.component.spec.ts

@@ -1,21 +1,23 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { FormFeedbackComponent } from './form-feedback.component';
+import { ComponentRef } from '@angular/core';
 
 describe('FormFeedbackComponent', () => {
   let component: FormFeedbackComponent;
   let fixture: ComponentFixture<FormFeedbackComponent>;
+  let componentRef: ComponentRef<FormFeedbackComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [FormFeedbackComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FormFeedbackComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
     fixture.detectChanges();
   });
 
@@ -24,10 +26,10 @@ describe('FormFeedbackComponent', () => {
   });
 
   it('should have css classes', () => {
-    component.valid = true;
+    componentRef.setInput('valid', true);
     fixture.detectChanges();
     expect(fixture.nativeElement).toHaveClass('valid-feedback');
-    component.valid = false;
+    componentRef.setInput('valid', false);
     fixture.detectChanges();
     expect(fixture.nativeElement).toHaveClass('invalid-feedback');
   });

projects/coreui-angular/src/lib/form/form-feedback/form-feedback.component.ts

@@ -1,29 +1,32 @@
-import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, computed, input } from '@angular/core';
 
 @Component({
   selector: 'c-form-feedback',
-  template: '<ng-content />'
+  template: '<ng-content />',
+  host: { '[class]': 'hostClasses()' }
 })
 export class FormFeedbackComponent {
   /**
    * If your form layout allows it, you can display validation feedback in a styled tooltip.
-   * @type boolean
+   * @default false
    */
-  @Input({ transform: booleanAttribute }) tooltip: string | boolean = false;
+  readonly tooltip = input(false, { transform: booleanAttribute });
 
   /**
    * Set component validation state to valid.
-   * @type boolean
+   * @default undefined
    */
-  @Input() valid?: boolean;
+  readonly valid = input<boolean>();
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
+    const status = this.valid() === true ? 'valid' : 'invalid';
+    const type = this.tooltip() ? 'tooltip' : 'feedback';
     return {
-      'valid-feedback': this.valid === true && !this.tooltip,
-      'valid-tooltip': this.valid === true && this.tooltip,
-      'invalid-feedback': this.valid !== true && !this.tooltip,
-      'invalid-tooltip': this.valid !== true && this.tooltip
+      [`${status}-${type}`]: true
+      // 'valid-feedback': valid === true && !tooltip,
+      // 'valid-tooltip': valid === true && tooltip,
+      // 'invalid-feedback': valid !== true && !tooltip,
+      // 'invalid-tooltip': valid !== true && tooltip
     };
-  }
+  });
 }