feat(design): pushed CVA implementation to a directive

libs/design/src/atoms/form/radio/cva/radio-cva.directive.spec.ts

@@ -0,0 +1,93 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, async, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+
+import { DaffRadioComponent } from '../radio.component';
+import { DaffRadioModule } from '../radio.module';
+
+
+
+@Component({
+  template: `
+    <daff-radio name='test' value='testValue' [formControl]='radio'></daff-radio>
+  `
+})
+class RadioWrapperComponent {
+  radio = new FormControl()
+}
+
+describe('DaffRadioControlValueAccessorDirective', () => {
+
+  describe('with the directive', () => {
+    let radioWrapper: RadioWrapperComponent;
+
+    let component: DaffRadioComponent;
+
+    let fixture: ComponentFixture<RadioWrapperComponent>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          RadioWrapperComponent,
+        ],
+        imports: [
+          ReactiveFormsModule,
+          DaffRadioModule
+        ]
+      })
+        .compileComponents();
+    }));
+    describe('the DaffRadioComponent', () => {
+
+      beforeEach(() => {
+
+        fixture = TestBed.createComponent(RadioWrapperComponent);
+        radioWrapper = fixture.componentInstance;
+        component = fixture.debugElement.query(By.css('daff-radio')).componentInstance;
+        fixture.detectChanges();
+      });
+      it('has the writeValue function for formControls', async () => {
+
+        expect(component.checked).toEqual(false);
+
+        radioWrapper.radio.setValue('testValue');
+
+        expect(component.checked).toEqual(true);
+      });
+    });
+
+  });
+  describe('without the directive', () => {
+    let radioWrapper: RadioWrapperComponent;
+
+    let component: DaffRadioComponent;
+
+    let fixture: ComponentFixture<RadioWrapperComponent>;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          RadioWrapperComponent,
+          DaffRadioComponent
+        ],
+        imports: [
+          ReactiveFormsModule,
+        ]
+      })
+        .compileComponents();
+    }));
+    describe('the DaffRadioComponent', () => {
+
+      it('throws an error without the directive to give the itself the CVA interface', async () => {
+        fixture = TestBed.createComponent(RadioWrapperComponent);
+        radioWrapper = fixture.componentInstance;
+        expect(() => {
+          component = fixture.debugElement.query(By.css('daff-radio')).componentInstance;
+          fixture.detectChanges();
+        }).toThrowError()
+      });
+
+    });
+  });
+});

libs/design/src/atoms/form/radio/cva/radio-cva.directive.ts

@@ -0,0 +1,94 @@
+import { Directive, Input, OnInit, Self, Optional } from '@angular/core';
+import { NgControl, ControlValueAccessor } from '@angular/forms';
+import { DaffRadioComponent } from '../radio.component';
+import { DaffRadioRegistry } from '../registry/radio-registry';
+
+/**
+ * ControlValueAccessor functionality for the DaffRadio
+ */
+@Directive({
+  // tslint:disable-next-line: directive-selector
+  selector: 'daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]'
+})
+export class DaffRadioControlValueAccessorDirective implements OnInit, ControlValueAccessor {
+  _onChange: () => void;
+  _onTouched: () => void;
+
+  /**
+   * The value of the ControlValueAccessor
+   */
+  @Input() value: any;
+
+  /**
+   * The name of the ControlValueAccessor
+   */
+  @Input() name: string;
+
+  constructor(
+    @Optional() @Self() public _control: NgControl,
+    private _registry: DaffRadioRegistry,
+    private _radio: DaffRadioComponent
+  ) {
+    if (this._control != null) {
+      this._control.valueAccessor = this;
+    }
+  }
+
+  ngOnInit(): void {
+    this.writeValue(this._control.value);
+    this._registry.add(this._control, this);
+
+    this._radio.selectionChange.subscribe(
+      value => value ? this._onChange() : null
+    );
+  }
+  /**
+   * 
+   * writeValue function from the CVA interface
+   */
+  writeValue(value: any): void {
+    console.log(value);
+    if (this.value === value) {
+      this._onChange();
+      this.fireSelect();
+    }
+  }
+
+  /**
+   * registerOnChange implemented from the CVA interface
+   */
+  registerOnChange(fn: any): void {
+    this._onChange = () => {
+      fn(this.value);
+      this._registry.select(this);
+    };
+  }
+
+  /**
+   * registerOnTouch implemented from the CVA interface
+   */
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+
+  /**
+   * sets the disabled state.
+   */
+  setDisabledState?(isDisabled: boolean): void {
+    this._radio.disabled = isDisabled;
+  }
+
+  /**
+    calls select function for the radio
+  */
+  fireSelect() {
+    this._radio.select();
+  }
+
+  /**
+    calls deselect function for the radio
+   */
+  fireDeselect() {
+    this._radio.deselect();
+  }
+}

libs/design/src/atoms/form/radio/radio.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, ElementRef, Renderer2, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, HostListener, forwardRef, ViewChild, Optional } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, OnInit, Input, HostBinding, ChangeDetectionStrategy, forwardRef, Optional, Output, EventEmitter } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DaffRadioSetComponent } from '../radio-set/radio-set.component';
 
 let radioUniqueId = 0;
@@ -18,7 +18,7 @@ let radioUniqueId = 0;
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 
-export class DaffRadioComponent implements ControlValueAccessor, OnInit {
+export class DaffRadioComponent implements OnInit {
   onChange: () => {};
   onTouched: () => {};
 
@@ -30,10 +30,30 @@ export class DaffRadioComponent implements ControlValueAccessor, OnInit {
     return this.disabled === true;
   };
 
+  /**
+   * Output event of selection being changed
+   */
+  @Output() selectionChange: EventEmitter<boolean> = new EventEmitter();
+
+
   @Input() checked = false;
+  /**
+   * The value of the radio
+   */
   @Input() value: any;
+  /**
+   * The id of the radio. It is uniquely generated but can be overwritten by the user. Must be unique.
+   */
   @Input() id: string = 'daff-radio-' + radioUniqueId;
+  /**
+   * Name of the Radio
+   */
   @Input() name: string;
+  /**
+   * Used for aria-label. Default to name if user does not input a label.
+   */
+  @Input() label = name;
+
   disabled = false;
   focused = false;
 
@@ -44,14 +64,31 @@ export class DaffRadioComponent implements ControlValueAccessor, OnInit {
     this.name = this.radioset ? this.radioset.name : this.name
   }
 
+
+
+  /**
+   * updates Focus styling
+   */
   onFocus() {
     this.focused = true;
   }
+  /**
+   * updates Blur styling
+   */
   onBlur() {
     this.focused = false;
   }
-  writeValue(value: any): void {
-    this.checked = value === this.value ? true : false;
+  /**
+   * toggeles checked attribute on
+   */
+  select(): void {
+    this.checked = true;
+  }
+  /**
+   * toggeles checked attribute off
+   */
+  deselect(): void {
+    this.checked = false;
   }
   registerOnChange(fn: any): void {
     this.onChange = fn;

libs/design/src/atoms/form/radio/radio.html

@@ -1,6 +1,8 @@
 <input type="radio" 
-[attr.checked]="checked ? '' : null" 
-[attr.id]="id" [attr.name]="name" 
+[attr.checked]="checked" 
+[attr.id]="id" 
+[attr.name]="name" 
+[attr.aria-label]="label"
 [attr.value]="value"
 [attr.disabled] = "disabled ? '' : null" 
 (change)="onChange()"

libs/design/src/atoms/form/radio/radio.module.ts

@@ -2,20 +2,45 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DaffRadioComponent } from './radio.component';
 import { DaffRadioSetComponent } from '../radio-set/radio-set.component';
+import { DaffRadioControlValueAccessorDirective } from './cva/radio-cva.directive';
+import { DaffRadioRegistry } from './registry/radio-registry';
 
 
 
 @NgModule({
   exports:[
     DaffRadioComponent,
-    DaffRadioSetComponent
+    DaffRadioSetComponent,
+    DaffRadioControlValueAccessorDirective,
+
   ],
   declarations: [
+    DaffRadioControlValueAccessorDirective,
     DaffRadioComponent,
     DaffRadioSetComponent
   ],
   imports: [
     CommonModule
+  ],
+  providers:[
+    DaffRadioRegistry
   ]
 })
 export class DaffRadioModule { }
+/**
+ * imports: [
+    CommonModule,
+    GolfImageModule
+  ],
+  exports: [
+    GolfSwatchComponent,
+    GolfSwatchControlValueAccessorDirective
+  ],
+  declarations: [
+    GolfSwatchComponent,
+    GolfSwatchControlValueAccessorDirective
+  ],
+  providers: [
+    GolfSwatchRegistry
+  ]
+ */

libs/design/src/atoms/form/radio/registry/radio-registry.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DaffRadioRegistry } from './radio-registry';
+import { DaffRadioModule } from '../radio.module';
+
+describe('DaffRadioRegistry', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [
+      DaffRadioModule
+    ]
+  }));
+
+  it('should be created', () => {
+    const service: DaffRadioRegistry = TestBed.get(DaffRadioRegistry);
+    expect(service).toBeTruthy();
+  });
+});