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

Author: xidedix

projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component, DebugElement, ElementRef, Renderer2, Type } from '@angular/core';
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { FormCheckInputDirective } from './form-check-input.directive';
@@ -15,7 +15,7 @@ describe('FormCheckInputDirective', () => {
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
   let inputEl: DebugElement;
-  let renderer: Renderer2;
+  // let renderer: Renderer2;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -24,8 +24,8 @@ describe('FormCheckInputDirective', () => {
     });
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
-    inputEl = fixture.debugElement.query(By.css('input'));
-    renderer = fixture.componentRef.injector.get(Renderer2 as Type<Renderer2>);
+    inputEl = fixture.debugElement.query(By.directive(FormCheckInputDirective));
+    // renderer = fixture.componentRef.injector.get(Renderer2 as Type<Renderer2>);
   });
 
   it('should create an instance', () => {
@@ -34,4 +34,8 @@ describe('FormCheckInputDirective', () => {
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should have css classes', () => {
+    expect(inputEl.nativeElement).toHaveClass('form-check-input');
+  });
 });

projects/coreui-angular/src/lib/form/form-check/form-check-input.directive.ts

@@ -1,70 +1,86 @@
-import { booleanAttribute, Directive, ElementRef, HostBinding, inject, Input, Renderer2 } from '@angular/core';
+import {
+  booleanAttribute,
+  computed,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  Renderer2,
+  signal,
+  untracked
+} from '@angular/core';
 
 @Directive({
   selector: 'input[cFormCheckInput]',
-  host: { class: 'form-check-input' }
+  host: {
+    class: 'form-check-input',
+    '[class]': 'hostClasses()',
+    '[attr.type]': 'type()'
+  }
 })
 export class FormCheckInputDirective {
   readonly #renderer = inject(Renderer2);
   readonly #hostElement = inject(ElementRef);
 
   /**
    * Specifies the type of component.
-   * @type {'checkbox' | 'radio'}
    * @default 'checkbox'
    */
-  @HostBinding('attr.type')
-  @Input()
-  type: 'checkbox' | 'radio' = 'checkbox';
+  readonly type = input<'checkbox' | 'radio'>('checkbox');
 
   /**
    * Set component indeterminate state.
-   * @type boolean
    * @default false
    */
-  @Input({ transform: booleanAttribute })
-  set indeterminate(value: boolean) {
-    const indeterminate = value;
-    if (this._indeterminate !== indeterminate) {
-      this._indeterminate = indeterminate;
+  readonly indeterminateInput = input(false, { transform: booleanAttribute, alias: 'indeterminate' });
+
+  readonly #indeterminateEffect = effect(() => {
+    const indeterminate = this.indeterminateInput();
+    if (untracked(this.#indeterminate) !== indeterminate) {
       const htmlInputElement = this.#hostElement.nativeElement as HTMLInputElement;
       if (indeterminate) {
         this.#renderer.setProperty(htmlInputElement, 'checked', false);
       }
       this.#renderer.setProperty(htmlInputElement, 'indeterminate', indeterminate);
+      this.#indeterminate.set(indeterminate);
     }
-  }
+  });
 
   get indeterminate() {
-    return this._indeterminate;
+    return this.#indeterminate();
   }
 
-  private _indeterminate = false;
+  readonly #indeterminate = signal(false);
 
   /**
    * 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 valid = this.valid();
     return {
       'form-check-input': true,
-      'is-valid': this.valid === true,
-      'is-invalid': this.valid === false
-    };
-  }
+      'is-valid': valid === true,
+      'is-invalid': valid === false
+    } as Record<string, boolean>;
+  });
 
-  @Input({ transform: booleanAttribute })
-  set checked(value: boolean) {
-    const checked = value;
+  /**
+   * Set component checked state.
+   * @default false
+   */
+  readonly checkedInput = input(false, { transform: booleanAttribute, alias: 'checked' });
+
+  readonly #checkedEffect = effect(() => {
+    const checked = this.checkedInput();
     const htmlInputElement = this.#hostElement?.nativeElement as HTMLInputElement;
     if (htmlInputElement) {
       this.#renderer.setProperty(htmlInputElement, 'checked', checked);
     }
-  }
+  });
 
   get checked(): boolean {
     return this.#hostElement?.nativeElement?.checked;

projects/coreui-angular/src/lib/form/form-check/form-check-label.directive.spec.ts

@@ -1,8 +1,33 @@
 import { FormCheckLabelDirective } from './form-check-label.directive';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: '<label cFormCheckLabel>Label</label>',
+  imports: [FormCheckLabelDirective]
+})
+class TestComponent {}
 
 describe('FormCheckLabelDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement.query(By.directive(FormCheckLabelDirective));
+  });
+
   it('should create an instance', () => {
     const directive = new FormCheckLabelDirective();
     expect(directive).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(debugElement.nativeElement).toHaveClass('form-check-label');
+  });
 });

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

@@ -1,35 +1,78 @@
+import { Component, ComponentRef, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
 import { FormCheckComponent } from './form-check.component';
-import { Renderer2 } from '@angular/core';
+import { FormCheckInputDirective } from './form-check-input.directive';
+import { FormCheckLabelDirective } from './form-check-label.directive';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: `
+    <c-form-check [inline]="inline" [reverse]="reverse" [switch]="switch" [sizing]="'xl'">
+      <input cFormCheckInput id="check1" type="checkbox" />
+      <label cFormCheckLabel for="check1">Label</label>
+    </c-form-check>
+  `,
+  imports: [FormCheckInputDirective, FormCheckComponent, FormCheckLabelDirective]
+})
+class TestComponent {
+  inline = true;
+  reverse = true;
+  switch = false;
+}
 
 describe('FormCheckComponent', () => {
   let component: FormCheckComponent;
   let fixture: ComponentFixture<FormCheckComponent>;
-  let renderer: Renderer2;
+  let componentRef: ComponentRef<FormCheckComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [FormCheckComponent],
-      providers: [Renderer2]
-    })
-      .compileComponents();
-  }));
+      imports: [FormCheckComponent]
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(FormCheckComponent);
-    renderer = fixture.debugElement.injector.get(Renderer2);
     component = fixture.componentInstance;
-    component.switch = true;
+    componentRef = fixture.componentRef;
+    componentRef.setInput('switch', true);
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('form-switch');
+    expect(fixture.nativeElement).not.toHaveClass('form-check');
   });
+});
+
+describe('FormCheckComponent Test', () => {
+  let testFixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
 
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    }).compileComponents();
+    testFixture = TestBed.createComponent(TestComponent);
+    debugElement = testFixture.debugElement.query(By.directive(FormCheckComponent));
+    testFixture.detectChanges(); // initial binding
+  }));
+
+  it('should have css classes', () => {
+    expect(debugElement.nativeElement).not.toHaveClass('form-switch');
+    expect(debugElement.nativeElement).not.toHaveClass('form-switch-xl');
+    expect(debugElement.nativeElement).toHaveClass('form-check-inline');
+    expect(debugElement.nativeElement).toHaveClass('form-check-reverse');
+    testFixture.componentInstance.switch = true;
+    testFixture.componentInstance.inline = false;
+    testFixture.componentInstance.reverse = false;
+    testFixture.detectChanges();
+    expect(debugElement.nativeElement).toHaveClass('form-switch');
+    expect(debugElement.nativeElement).toHaveClass('form-switch-xl');
+    expect(debugElement.nativeElement).not.toHaveClass('form-check-inline');
+    expect(debugElement.nativeElement).not.toHaveClass('form-check-reverse');
+    expect(debugElement.nativeElement).toHaveClass('form-check');
+  });
 });

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

@@ -1,60 +1,54 @@
-import { AfterContentInit, booleanAttribute, Component, ContentChild, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, computed, contentChild, input } from '@angular/core';
 
 import { FormCheckLabelDirective } from './form-check-label.directive';
 
 @Component({
   selector: 'c-form-check',
   template: '<ng-content />',
-  exportAs: 'cFormCheck'
+  exportAs: 'cFormCheck',
+  host: { '[class]': 'hostClasses()' }
 })
-export class FormCheckComponent implements AfterContentInit {
+export class FormCheckComponent {
   /**
    * Group checkboxes or radios on the same horizontal row.
-   * @type boolean
    * @default false
    */
-  @Input({ transform: booleanAttribute }) inline: string | boolean = false;
+  readonly inline = input(false, { transform: booleanAttribute });
 
   /**
    * Put checkboxes or radios on the opposite side.
-   * @type boolean
    * @default false
    * @since 4.4.7
    */
-  @Input({ transform: booleanAttribute }) reverse: string | boolean = false;
+  readonly reverse = input(false, { transform: booleanAttribute });
 
   /**
    * Size the component large or extra large. Works only with `[switch]="true"` [docs]
-   * @type {'lg' | 'xl' | ''}
+   * @default undefined
    */
-  @Input() sizing?: 'lg' | 'xl' | '' = '';
+  readonly sizing = input<'' | 'lg' | 'xl' | string>();
 
   /**
    * Render a toggle switch on for checkbox.
    * @type boolean
    * @default false
    */
-  @Input({ transform: booleanAttribute }) switch: string | boolean = false;
+  readonly switch = input(false, { transform: booleanAttribute });
 
-  @HostBinding('class')
-  get hostClasses(): any {
-    return {
-      'form-check': this.formCheckClass,
-      'form-switch': this.switch,
-      [`form-switch-${this.sizing}`]: this.switch && !!this.sizing,
-      'form-check-inline': this.inline,
-      'form-check-reverse': this.reverse
-    };
-  }
+  readonly formCheckLabel = contentChild(FormCheckLabelDirective);
 
-  @ContentChild(FormCheckLabelDirective) formCheckLabel!: FormCheckLabelDirective;
+  readonly formCheckClass = computed(() => !!this.formCheckLabel());
 
-  #formCheckClass = true;
-  get formCheckClass() {
-    return this.#formCheckClass;
-  }
+  readonly hostClasses = computed(() => {
+    const sizing = this.sizing();
+    const isSwitch = this.switch();
 
-  ngAfterContentInit(): void {
-    this.#formCheckClass = !!this.formCheckLabel;
-  }
+    return {
+      'form-check': !!this.formCheckLabel(),
+      'form-switch': isSwitch,
+      [`form-switch-${sizing}`]: isSwitch && !!sizing,
+      'form-check-inline': this.inline(),
+      'form-check-reverse': this.reverse()
+    };
+  });
 }