Adding abstract class for CustomInputComponents

src/app/dynaform/components/_abstract/custom-input.component.ts

@@ -0,0 +1,26 @@
+import { Component, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NativeInputComponent } from './native-input.component';
+
+@Component({
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => CustomInputComponent),
+			multi: true
+		}
+	]
+})
+export abstract class CustomInputComponent extends NativeInputComponent implements ControlValueAccessor {
+
+	propagateChange = (_: any) => {};
+
+	public writeValue(value: any): void {}
+
+	public registerOnChange(fn: any): void {
+		this.propagateChange = fn;
+	}
+
+	public registerOnTouched(fn: any): void {}
+
+}

src/app/dynaform/components/custom/checkbutton/checkbutton.component.ts

@@ -1,39 +1,20 @@
 import { Component, OnInit, Input, forwardRef } from '@angular/core';
-import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CustomInputComponent } from './../../_abstract/custom-input.component';
 
 @Component({
 	selector: 'app-checkbutton',
 	templateUrl: './checkbutton.component.html',
 	styleUrls: ['./checkbutton.component.scss'],
-	providers: [
-		{
-			provide: NG_VALUE_ACCESSOR,
-			useExisting: forwardRef(() => CheckbuttonComponent),
-			multi: true
-		}
-	]
 })
-export class CheckbuttonComponent implements OnInit, ControlValueAccessor {
+export class CheckbuttonComponent extends CustomInputComponent {
 
-	@Input()
-	control: FormControl;
+	exposeMetaInTemplate: string[] = ['label', 'value', 'isDisabled'];
 
-	@Input()
-	meta: StringMap = {};
-
-	label: string = '';
 	value: string | boolean = true;
-	isDisabled: boolean = false;
+	isDisabled = false;
 	isChecked: boolean;
 	currentValue: string | boolean;
 
-	propagateChange = (_: any) => {};
-
-	ngOnInit() {
-		// Move meta variables up a level, for direct access in templates
-		['label', 'value', 'isDisabled'].map(p => this[p] = this.meta[p] || this[p]);
-	}
-
 	private toggleChecked(e): void {
 		e.target.blur();
 		e.preventDefault();
@@ -48,10 +29,4 @@ export class CheckbuttonComponent implements OnInit, ControlValueAccessor {
 		this.currentValue = this.isChecked ? value : false;
 	}
 
-	public registerOnChange(fn: any): void {
-		this.propagateChange = fn;
-	}
-
-	public registerOnTouched(fn: any): void {}
-
 }

src/app/dynaform/components/custom/dropdown-modified-input/dropdown-modified-input.component.ts

@@ -1,24 +1,15 @@
-import { Component, OnInit, Input, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component } from '@angular/core';
+import { CustomInputComponent } from './../../_abstract/custom-input.component';
 import { ValueTransformer }	from './../../../interfaces';
 
 @Component({
 	selector: 'app-dropdown-modified-input',
 	templateUrl: 'dropdown-modified-input.component.html',
-	styles: [],
-	providers: [
-		{
-			provide: NG_VALUE_ACCESSOR,
-			useExisting: forwardRef(() => DropdownModifiedInputComponent),
-			multi: true
-		}
-	]
+	styles: []
 })
-export class DropdownModifiedInputComponent implements OnInit, ControlValueAccessor {
+export class DropdownModifiedInputComponent extends CustomInputComponent {
 
-
-	@Input()
-	meta: StringMap = {};
+	exposeMetaInTemplate: string[] = ['modifiers', 'transform', 'placeholder'];
 
 	modifiers: Array<string>;
 	transform: ValueTransformer = {
@@ -29,18 +20,8 @@ export class DropdownModifiedInputComponent implements OnInit, ControlValueAcces
 	private displayedValue: string;
 	private _controlValue: string;
 
-	private extraClass: string = '';
-
-	propagateChange = (_: any) => {};
-
-	ngOnInit() {
-		// Move meta variables up a level, for direct access in templates
-		['modifiers', 'transform', 'placeholder'].map(p => this[p] = this.meta[p] || this[p]);
-		this.controlValue = this.meta.value;
-	}
-
 	get controlValue(): string {
-		return this._controlValue;;
+		return this._controlValue;
 	}
 
 	set controlValue(inputValue) {
@@ -54,13 +35,6 @@ export class DropdownModifiedInputComponent implements OnInit, ControlValueAcces
 		this.controlValue = value;
 	}
 
-	registerOnChange(fn: any): void {
-		this.propagateChange = fn;
-	}
-
-	registerOnTouched(fn: any): void {
-	}
-
 	modifierChange(modifier) {
 		this.selectedModifier = modifier;
 		this._controlValue = this.transform.outputFn(this.selectedModifier, this.displayedValue);

src/app/dynaform/components/native/password/password.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NativeInputComponent } from './../../_abstract/native-input/native-input.component';
+import { NativeInputComponent } from '../../_abstract/native-input.component';
 
 @Component({
 	selector: 'app-password',

src/app/dynaform/components/native/radio/radio.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input/native-input.component';
+import { NativeInputComponent } from '../../_abstract/native-input.component';
 
 @Component({
 	selector: 'app-radio',

src/app/dynaform/components/native/select/select.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input/native-input.component';
+import { NativeInputComponent } from '../../_abstract/native-input.component';
 
 @Component({
 	selector: 'app-select',

src/app/dynaform/components/native/text/text.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NativeInputComponent } from './../../_abstract/native-input/native-input.component';
+import { NativeInputComponent } from '../../_abstract/native-input.component';
 
 @Component({
 	selector: 'app-text',

src/app/dynaform/components/native/textarea/textarea.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NativeInputComponent } from './../../_abstract/native-input/native-input.component';
+import { NativeInputComponent } from '../../_abstract/native-input.component';
 
 @Component({
 	selector: 'app-textarea',