Feat/toggle switch control value accessor

projects/components/src/checkbox/checkbox.component.test.ts

@@ -1,4 +1,5 @@
 import { fakeAsync } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
 import { CheckboxComponent } from './checkbox.component';
@@ -9,7 +10,7 @@ describe('Checkbox component', () => {
 
   const createHost = createHostFactory({
     component: CheckboxComponent,
-    imports: [TraceCheckboxModule, RouterTestingModule],
+    imports: [TraceCheckboxModule, RouterTestingModule, ReactiveFormsModule],
     providers: [],
     declareComponent: false
   });
@@ -52,12 +53,32 @@ describe('Checkbox component', () => {
 
     // Click will toggle the values to true
     spectator.click(inputElement);
-    expect(spectator.component.checked).toBe(true);
+    expect(spectator.component.isChecked).toBe(true);
     expect(checkboxChangeSpy).toHaveBeenCalledWith(true);
 
     // Click will toggle the values to false
     spectator.click(inputElement);
-    expect(spectator.component.checked).toBe(false);
+    expect(spectator.component.isChecked).toBe(false);
     expect(checkboxChangeSpy).toHaveBeenCalledWith(false);
   }));
+
+  test('should work correctly with control value accessor', () => {
+    const formControl = new FormControl(false);
+    spectator = createHost(
+      `<ht-checkbox [label]="label" [formControl]="formControl">
+    </ht-checkbox>`,
+      {
+        hostProps: {
+          formControl: formControl
+        }
+      }
+    );
+    expect(spectator.component.isChecked).toBe(false);
+
+    formControl.setValue(true);
+    expect(spectator.component.isChecked).toBe(true);
+
+    formControl.disable();
+    expect(spectator.component.isDisabled).toBe(true);
+  });
 });

projects/components/src/checkbox/checkbox.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 
 @Component({
@@ -8,31 +9,66 @@ import { MatCheckboxChange } from '@angular/material/checkbox';
   template: `
     <mat-checkbox
       labelPosition="after"
-      [checked]="this.checked"
-      [disabled]="this.disabled"
-      (change)="onCheckboxChange($event)"
+      [checked]="this.isChecked"
+      [disabled]="this.isDisabled"
+      (change)="this.onCheckboxChange($event)"
       class="ht-checkbox"
-      [ngClass]="{ disabled: this.disabled }"
+      [ngClass]="{ disabled: this.isDisabled }"
     >
       <ht-label class="label" *ngIf="this.label !== undefined && this.label !== ''" [label]="this.label"></ht-label>
     </mat-checkbox>
-  `
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: CheckboxComponent,
+      multi: true
+    }
+  ]
 })
-export class CheckboxComponent {
+export class CheckboxComponent implements ControlValueAccessor {
   @Input()
   public label?: string;
 
   @Input()
-  public checked: boolean | undefined;
+  public set checked(checked: boolean | undefined) {
+    this.isChecked = checked ?? false;
+  }
 
   @Input()
-  public disabled: boolean | undefined;
+  public set disabled(disabled: boolean | undefined) {
+    this.isDisabled = disabled ?? false;
+  }
 
   @Output()
   public readonly checkedChange: EventEmitter<boolean> = new EventEmitter();
 
+  public isChecked: boolean = false;
+  public isDisabled: boolean = false;
+
+  private onTouched!: () => void;
+  private onChanged!: (value: boolean) => void;
+
   public onCheckboxChange(event: MatCheckboxChange): void {
-    this.checked = event.checked;
-    this.checkedChange.emit(this.checked);
+    this.isChecked = event.checked;
+    this.checkedChange.emit(this.isChecked);
+    this.onChanged(this.isChecked);
+    this.onTouched();
+  }
+
+  public registerOnChange(fn: (value: boolean) => void): void {
+    this.onChanged = fn;
+  }
+
+  public registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  public writeValue(isChecked: boolean | undefined): void {
+    this.isChecked = isChecked ?? false;
   }
 }

projects/components/src/toggle-switch/toggle-switch.component.test.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { fakeAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
 import { ToggleSwitchSize } from './toggle-switch-size';
@@ -12,7 +12,7 @@ describe('Toggle Switch Component', () => {
   const createHost = createHostFactory({
     component: ToggleSwitchComponent,
     shallow: true,
-    imports: [MatSlideToggleModule, FormsModule, CommonModule]
+    imports: [MatSlideToggleModule, FormsModule, CommonModule, ReactiveFormsModule]
   });
 
   test('should pass properties to Mat Slide toggle correctly', fakeAsync(() => {
@@ -41,4 +41,20 @@ describe('Toggle Switch Component', () => {
     spectator.triggerEventHandler(MatSlideToggle, 'change', new MatSlideToggleChange(matToggleComponent!, false));
     expect(onCheckedChangeSpy).toHaveBeenCalledWith(false);
   }));
+
+  test('should work correctly with control value accessor', () => {
+    const formControl = new FormControl(false);
+    spectator = createHost(`<ht-toggle-switch [label]="label" [formControl]="formControl"></ht-toggle-switch>`, {
+      hostProps: {
+        formControl: formControl
+      }
+    });
+    expect(spectator.component.isChecked).toBe(false);
+
+    formControl.setValue(true);
+    expect(spectator.component.isChecked).toBe(true);
+
+    formControl.disable();
+    expect(spectator.component.isDisabled).toBe(true);
+  });
 });

projects/components/src/toggle-switch/toggle-switch.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { ToggleSwitchSize } from './toggle-switch-size';
 
@@ -10,33 +11,73 @@ import { ToggleSwitchSize } from './toggle-switch-size';
     <div class="toggle-switch">
       <mat-slide-toggle
         color="primary"
-        [checked]="this.checked"
+        [checked]="this.isChecked"
         [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
-        [disabled]="this.disabled"
+        [disabled]="this.isDisabled"
         (change)="this.onToggle($event)"
       >
         <div class="label">{{ this.label }}</div>
       </mat-slide-toggle>
     </div>
-  `
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: ToggleSwitchComponent,
+      multi: true
+    }
+  ]
 })
-export class ToggleSwitchComponent {
+export class ToggleSwitchComponent implements ControlValueAccessor {
   @Input()
-  public checked?: boolean;
+  public label?: string = '';
 
   @Input()
-  public label?: string = '';
+  public set checked(checked: boolean | undefined) {
+    this.isChecked = checked ?? false;
+  }
 
   @Input()
-  public disabled?: boolean;
+  public set disabled(disabled: boolean | undefined) {
+    this.isDisabled = disabled ?? false;
+  }
 
   @Input()
   public size: ToggleSwitchSize = ToggleSwitchSize.Small;
 
   @Output()
   public readonly checkedChange: EventEmitter<boolean> = new EventEmitter();
 
+  public isChecked: boolean = false;
+  public isDisabled: boolean = false;
+
+  private onTouched!: () => void;
+  private onChanged!: (value: boolean) => void;
+
+  public constructor(private readonly cdr: ChangeDetectorRef) {}
+
   public onToggle(toggleChange: MatSlideToggleChange): void {
-    this.checkedChange.emit(toggleChange.checked);
+    this.isChecked = toggleChange.checked;
+    this.checkedChange.emit(this.isChecked);
+    this.onChanged(this.isChecked);
+    this.onTouched();
+  }
+
+  public registerOnChange(fn: (value: boolean) => void): void {
+    this.onChanged = fn;
+  }
+
+  public registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  public setDisabledState(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  public writeValue(isChecked: boolean | undefined): void {
+    this.isChecked = isChecked ?? false;
+    this.cdr.markForCheck();
   }
 }