Improvements to integration of Clarirty Checkbox Component

package-lock.json

@@ -1057,9 +1057,9 @@
       }
     },
     "@webcomponents/custom-elements": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.0.0.tgz",
-      "integrity": "sha1-sXJuEgdLVWqjG5Pzb/agOkNSWcQ="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.2.1.tgz",
+      "integrity": "sha512-flmTp4rVbBkcUIF3eBO3LNoAaYvleTdhPZKzdzr6iztWLLrxCctcK+7MAQeC3/SPjc3JDdC3jYLMRF4R6C3f9g=="
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",

package.json

@@ -24,7 +24,7 @@
 		"@clr/angular": "^1.0.4",
 		"@clr/icons": "^1.0.4",
 		"@clr/ui": "^1.0.4",
-		"@webcomponents/custom-elements": "^1.0.0",
+		"@webcomponents/custom-elements": "^1.2.1",
 		"angular-super-validator": "^2.0.0",
 		"core-js": "^2.6.2",
 		"json-formatter-js": "^2.2.1",

src/app/_mock/testfields.v1.ts

@@ -41,7 +41,7 @@ const radioField = new fmd.RadioField({
 
 const checkboxField = new fmd.CheckboxField({
 	name: 'checkboxField',
-	value: 'Howdy Checkbox'
+	checkedValue: 'Howdy Checkbox',
 });
 
 const disabledTextField = new fmd.TextField({
@@ -154,15 +154,15 @@ const meta = {
 	selectField,
 	radioField,
 	checkboxField,
-	disabledTextField,
-	radioFieldHorizontal,
-	checkbutton,
-	dropdownModifiedInput,
-	checkboxGroup,
-	checkbuttonGroup,
+	// disabledTextField,
+	// radioFieldHorizontal,
+	// checkbutton,
+	// dropdownModifiedInput,
+	// checkboxGroup,
+	// checkbuttonGroup,
 	// // timepicker,
-	clrdatepicker,
-	basicTestContainer
+	// clrdatepicker,
+	// basicTestContainer
 };
 
 export { model, meta };

src/app/app.component.ts

@@ -27,7 +27,7 @@ const defatltTest = 1;
 export class AppComponent implements OnInit, OnChanges {
 
 	form: FormGroup;
-	meta: StringMap;
+	meta: StringMap<any>;
 
 	hCssRed = 'color: white; background-color: maroon; font-weight: bold;';
 	hCssGreen = 'color: white; background-color: green; font-weight: bold;';

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

@@ -1,5 +1,5 @@
 <clr-checkbox-wrapper>
-	<input type="checkbox" clrCheckbox [formControl]="control" [value]="value" (change)="toggleChecked($event)">
+	<input type="checkbox" clrCheckbox [formControl]="control" (change)="setValue($event.target)">
 	<label>{{ label }}</label>
 </clr-checkbox-wrapper>
 

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

@@ -1,60 +1,17 @@
-import { Component, forwardRef, OnInit, OnChanges } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CustomInputComponent } from './../../_abstract/custom-input.component';
+import { Component, OnInit } from '@angular/core';
+import { NativeInputComponent } from '../../_abstract/native-input.component';
 
 @Component({
 	selector: 'app-checkbox',
 	templateUrl: './clr-checkbox.component.html',
-	styleUrls: ['./clr-checkbox.component.scss'],
-	providers: [
-		{
-			provide: NG_VALUE_ACCESSOR,
-			useExisting: forwardRef(() => ClrCheckboxComponent),
-			multi: true
-		}
-	]
+	styleUrls: ['./clr-checkbox.component.scss']
 })
-export class ClrCheckboxComponent extends CustomInputComponent implements OnInit, OnChanges {
+export class ClrCheckboxComponent extends NativeInputComponent {
 
-	exposeMetaInTemplate: string[] = ['label', 'value', 'disabled', 'checkedValue'];
+	exposeMetaInTemplate: string[] = ['label'];
 
-	label: string;
-	value?: string | boolean = true;
-	isChecked: boolean;
-	disabled = false;
-	currentValue: string | boolean;
-	checkedValue: string | boolean = true;
-	onChange: (val) => {};
-
-	ngOnInit() {
-		this.label = this.meta.label;
-		if (this.meta.disabled) {
-			this.control.disable();
-		}
-	}
-	
-	ngOnChanges() {
-		this.disabled = this.meta.disabled;
+	setValue(cb: HTMLInputElement) {
+		this.control.setValue(cb.checked ? this.meta.checkedValue : false);
 	}
 
-	private toggleChecked(e): void {
-		e.target.blur();
-		e.preventDefault();
-		if (this.disabled) { return; }
-		this.isChecked = !this.isChecked;
-		this.currentValue = this.isChecked ? this.value || this.checkedValue : false;
-		if (typeof this.onChange === 'function') {
-			try {
-				this.onChange(this.currentValue);
-			} catch (e) {
-				console.log('ERROR in onChange function');
-			}
-		}
-		this.propagateChange(this.currentValue);
-	}
-
-	public writeValue(value: any): void {
-		this.isChecked = value && value !== 0 && value !== 'false' ? value : false;
-		this.currentValue = this.isChecked ? value : false;
-	}
 }

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

@@ -15,6 +15,7 @@ interface ISimpleFieldMetaData {
 	type?: string; 							// The component type e.g. BasicInput, Checkbutton, Timepicker, etc
 	label?: string;							// The field label - defaults to unCamelCased name if not supplied
 	value?: any;							// The field value - defaults to empty string if not supplied
+	checkedValue?: boolean|number|string;	// Checkboxes and Checkbuttons only
 	default?: any;							// Default value
 	placeholder?: string;					// Optional placeholder text
 	class?: string | string[];				// CSS classes to apply
@@ -74,6 +75,7 @@ abstract class SimpleField {
 	source?: string;
 	label?: string;
 	value;
+	checkedValue?: boolean|number|string;
 	default = '';
 	placeholder = '';
 	class?: string | string[];
@@ -84,9 +86,6 @@ abstract class SimpleField {
 	valFailureMsgs: StringMap<any> = {};
 
 	constructor(meta: ISimpleFieldMetaData) {
-		if (meta.type === 'Multiline') {
-			console.log(meta);
-		}
 		Object.assign(this, meta);
 		if (!this.source) {
 			// If source is not supplied it's the same as the name
@@ -164,10 +163,19 @@ class RadioField extends OptionsField {
 
 class CheckboxField extends SimpleField {
 	type = 'Checkbox';
-	default: any = false;
 	isChecked: boolean;
-	checkedValue: boolean | string = true;
+	default: any = false;
+	checkedValue: boolean|number|string = true;
 	rowLabel: null;
+	constructor(meta: ISimpleFieldMetaData) {
+		super(meta);
+		if (meta.checkedValue) {
+			this.checkedValue = meta.checkedValue;
+		}
+		if (meta.default) {
+			this.default = meta.default;
+		}
+	}
 }
 
 class HiddenField extends SimpleField {
@@ -177,12 +185,8 @@ class HiddenField extends SimpleField {
 // ---------------------------------------------------------------------------------------------------------------------
 // Concrete Implementations - Custom Form Components
 
-class CheckbuttonField extends SimpleField {
+class CheckbuttonField extends CheckboxField {
 	type = 'Checkbutton';
-	default: any = false;
-	isChecked: boolean;
-	checkedValue: boolean | string = true;
-	rowLabel: null;
 }
 
 class DropdownModifiedInputField extends SimpleField {

src/app/ng-dynaform.code-workspace

@@ -1,13 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "/Users/rk/play/ng-dynaform"
-		},
-		{
-			"path": "."
-		},
-		{
-			"path": "dynaform"
-		}
-	]
-}

src/typings.d.ts

@@ -8,4 +8,4 @@ declare module "*.json" {
     export default value;
 }
 
-interface StringMap { [s: string]: any; }
+interface StringMap<T> { [s: string]: T; }