CheckboxGroup - added but not yet working

src/app/_mock/testfields.v1.ts

@@ -44,7 +44,6 @@ const checkboxField = new fmd.CheckboxField({
 	value: 'Howdy Checkbox'
 });
 
-
 const disabledTextField = new fmd.TextField({
 	name: 'disabledTextField',
 	placeholder: 'You can\'t touch this',
@@ -109,6 +108,12 @@ const dropdownModifiedInput = new fmd.DropdownModifiedInputField({
 	transform: transformerFunctions
 });
 
+const checkboxGroup = new fmd.CheckboxGroup({
+	name: 'checkboxGroup',
+	meta: [{name: 'One'}, {name: 'Two'}, {name: 'Three'}]
+});
+
+
 const checkbuttonGroup = new fmd.CheckbuttonGroup({
 	name: 'checkbuttonGroup',
 	firstEnablesRest: true,
@@ -153,6 +158,7 @@ const meta = {
 	radioFieldHorizontal,
 	checkbutton,
 	dropdownModifiedInput,
+	checkboxGroup,
 	checkbuttonGroup,
 	// // timepicker,
 	clrdatepicker,

src/app/dynaform/components/group/checkbox-group/clr-checkbox-group.component.html

@@ -0,0 +1,12 @@
+<div class="aba-checkbutton-group" [formGroup]="formGroup">
+	<app-checkbox *ngFor="let groupMember of controlNames; let i = index"
+		[formControlName]="groupMember"
+		[meta]="childMetaArray[i]"
+	>
+	</app-checkbox>
+</div>
+<div *ngIf="showAllOrNone" class="buttongroup">
+	<a (click)="selectAll($event)" href class="btn btn-sm btn-outline-primary">Select All</a> 
+	<a (click)="selectNone($event)" href class="btn btn-sm btn-outline-primary">Select None</a>
+</div>
+

src/app/dynaform/components/group/checkbox-group/clr-checkbox-group.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClrCheckbuttonGroupComponent } from './clr-checkbox-group.component';
+
+describe('CheckbuttonGroupComponent', () => {
+  let component: ClrCheckbuttonGroupComponent;
+  let fixture: ComponentFixture<ClrCheckbuttonGroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ClrCheckbuttonGroupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClrCheckbuttonGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dynaform/components/group/checkbox-group/clr-checkbox-group.component.ts

@@ -0,0 +1,61 @@
+import { Component, Attribute, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { GroupInputComponent } from '../../_abstract/group-input.component';
+
+@Component({
+	selector: 'app-checkbox-group',
+	templateUrl: './clr-checkbox-group.component.html',
+	styleUrls: ['./clr-checkbox-group.component.scss']
+})
+export class ClrCheckboxGroupComponent extends GroupInputComponent implements OnInit {
+
+	firstControl: FormControl;
+
+	constructor(
+		@Attribute('firstEnablesRest') private firstEnablesRest,
+		@Attribute('allOrNone') private showAllOrNone
+	) {
+		super();
+		this.firstEnablesRest = firstEnablesRest === ''; // True if 'firstEnablesRest' exists as component attribute
+		this.showAllOrNone = showAllOrNone === ''; // True if 'firstEnablesRest' exists as component attribute
+	}
+
+	ngOnInit() {
+		super.ngOnInit();
+		if (this.meta.firstEnablesRest) {
+			this.firstEnablesRest = this.meta.firstEnablesRest;
+		}
+		if (this.meta.showAllOrNone) {
+			this.showAllOrNone = this.meta.showAllOrNone;
+		}
+		if (this.firstEnablesRest) {
+			this.firstControl = this.formGroup.controls[this.controlNames[0]] as FormControl;
+			this.childMetaArray[0].disabled = false;
+			this.childMetaArray.slice(1).map(meta => { meta.disabled = !this.firstControl.value; return meta; });
+
+			// Observe value changes on first control
+			this.firstControl.valueChanges.subscribe(val => {
+				for (let i = 1; i < this.childMetaArray.length; i++) {
+					// NOTE: We reassign the input (array member) to trigger change detection (otherwise it doesn't run)
+					// See https://juristr.com/blog/2016/04/angular2-change-detection/
+					this.childMetaArray[i] = {
+						...this.childMetaArray[i],
+						disabled: !val
+					};
+				}
+			});
+		}
+	}
+
+	selectAll(e: Event): false {
+		this.controlNames.forEach(c => this.formGroup.get(c).setValue(this.meta.meta[c].value));
+		(e.target as HTMLLinkElement).blur();
+		return false;
+	}
+
+	selectNone(e: Event): false {
+		this.controlNames.forEach(c => this.formGroup.get(c).setValue(null));
+		(e.target as HTMLLinkElement).blur();
+		return false;
+	}
+}

src/app/dynaform/components/index.ts

@@ -20,6 +20,7 @@ export { ClrDatepickerComponent } from './clarity/datepicker/datepicker.componen
 export { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component';
 export { DropdownModifiedInputComponent } from './custom/dropdown-modified-input/dropdown-modified-input.component';
 export { MultilineComponent } from './custom/multiline/multiline.component';
+export { ClrCheckboxGroupComponent as CheckboxGroupComponent } from './group/checkbox-group/clr-checkbox-group.component';
 export { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.component';
 
 export { ButtonGroupComponent } from './nocontrol/button-group/button-group.component';

src/app/dynaform/models/field.model.ts

@@ -202,8 +202,8 @@ class MultilineField extends SimpleField {
 // ---------------------------------------------------------------------------------------------------------------------
 // Concrete Implementations - Custom FormGroup Components (which render a group of FormControls)
 
-class CheckbuttonGroup {
-	type = 'CheckbuttonGroup';
+class CheckboxGroup {
+	type = 'CheckboxGroup';
 	name: string;
 	label?: string;
 	groupName: string;
@@ -230,6 +230,11 @@ class CheckbuttonGroup {
 	}
 }
 
+class CheckbuttonGroup extends CheckboxGroup {
+	type = 'CheckbuttonGroup';
+}
+
+
 // ---------------------------------------------------------------------------------------------------------------------
 // Concrete Implementations - Kendo Form Components
 
@@ -374,7 +379,7 @@ export {
 	SimpleField,
 	TextField, TextareaField, PasswordField, SelectField, RadioField, CheckboxField, HiddenField,
 	CheckbuttonField, DropdownModifiedInputField, MultilineField,
-	CheckbuttonGroup,
+	CheckboxGroup, CheckbuttonGroup,
 	TimepickerField, ClrDatepickerField,
 	Container, RepeatingContainer,
 	ButtonGroup, Heading, DisplayField