Adding placeholder, and CSS id and classes

package-lock.json

@@ -283,6 +283,11 @@
         "tslib": "^1.7.1"
       }
     },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-2.0.0.tgz",
+      "integrity": "sha512-t4QZ3es/u/yB6QchmyJemJbdtrVH4FtenlKgHJZ8095IOeKy8YVXgUwBqyLLZdU2JAwkOESmEns5ESciJHR18Q=="
+    },
     "@ngtools/json-schema": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.2.0.tgz",
@@ -3601,8 +3606,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3623,14 +3627,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3645,20 +3647,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3775,8 +3774,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3788,7 +3786,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3803,7 +3800,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3811,14 +3807,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3837,7 +3831,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3918,8 +3911,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3931,7 +3923,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4017,8 +4008,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4054,7 +4044,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4074,7 +4063,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4118,14 +4106,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
     "core-js": "^2.4.1",
     "json-formatter-js": "^2.2.0",
     "lodash": "^4.17.10",

src/app/app.component.ts

@@ -14,30 +14,67 @@ const reducerIteree = (res, field) => Object.assign(res, { [field.name]: field.v
 const _extractFormGroupData = reduce(reducerIteree, {});
 const extractFormGroupData = nonNestedFormMetaLevel => _extractFormGroupData(nonNestedFormMetaLevel);
 
-const fieldOne = new fmd.BasicField({
-	name: 'fieldOne',
-	type: 'Checkbutton',
-	value: '123',
-	label: 'Field One'
+// ---------------------------------------------------------------------------------------------------------------------
+
+const basicTextField = new fmd.BasicField({
+	name: 'basicTextField',
+	label: 'Field One',
+	placeholder: 'Type a value here',
+	class: ['red', 'bgPaleBlue'],
+	id: 'yoyo'
 });
 
-const fieldTwo = new fmd.BasicField({
-	name: 'fieldTwo',
+const checkButton = new fmd.BasicField({
+	name: 'checkButton',
 	type: 'Checkbutton',
 	value: '456',
 });
 
-const fieldThree = new fmd.BasicField({
-	name: 'fieldThree',
-	value: 'C'
+const modifiers = ['Matches', 'Starts With', 'Contains'];
+const transformerFunctions: ValueTransformer = {
+	inputFn: val => {
+		let modifier = 'Starts With';
+		if (/^%.*?%$/.test(val)) {
+			modifier = 'Contains'
+		} else if (/^[^%].*?[^%]$/.test(val)) {
+			modifier = 'Matches'
+		} else if (/^%.*/.test(val)) {
+			modifier = 'Starts With';
+		}
+		const transformedVal = val.replace(/%/g, '').trim();
+		return { modifier: modifier, value: transformedVal };
+	},
+	outputFn: (mod, val) => {
+		let transformedValue;
+		switch(mod) {
+			case 'Starts With':
+				transformedValue = `%${val}`;
+				break;
+			case 'Contains':
+				transformedValue = `%${val}%`;
+				break;
+			case 'Matches':
+			default:
+				transformedValue = val;
+				break;
+		}
+		return transformedValue;
+	}
+};
+const dropDownModifiedInput = new fmd.DropdownModifiedInputField({
+	name: 'dropDownModifiedInput',
+	value: 'lovely',
+	modifiers,
+	transform: transformerFunctions
 });
 
 const formMetaDataObj = {
-	fieldOne,
-	fieldTwo,
-	fieldThree
+	basicTextField,
+	checkButton,
+	dropDownModifiedInput
 };
 
+
 // --------------------------------------------------------------------------
 @Component({
 	selector: 'app-root',
@@ -48,40 +85,6 @@ export class AppComponent implements OnInit {
 
 	form: FormGroup;
 
-	modifiers = ['Starts With', 'Contains', 'Matches'];
-	transformerFunctions: ValueTransformer = {
-		inputFn: val => {
-			let modifier = 'Starts With';
-			if (/^%.*?%$/.test(val)) {
-				modifier = 'Contains'
-			} else if (/^[^%].*?[^%]$/.test(val)) {
-				modifier = 'Matches'
-			} else if (/^%.*/.test(val)) {
-				modifier = 'Starts With';
-			}
-			const transformedVal = val.replace(/%/g, '').trim();
-			return { modifier: modifier, value: transformedVal };
-		},
-		outputFn: (mod, val) => {
-			let transformedValue;
-			switch(mod) {
-				case 'Starts With':
-					transformedValue = `%${val}`;
-					break;
-				case 'Contains':
-					transformedValue = `%${val}%`;
-					break;
-				case 'Matches':
-				default:
-					transformedValue = val;
-					break;
-			}
-			return transformedValue;
-		}
-	};
-
-	labels = ['Feature One', 'Allowed', 'Protected'];
-
 	formMetaDataObj = formMetaDataObj;
 
 	@ViewChild('testTemplate', { read: TemplateRef })
@@ -94,13 +97,6 @@ export class AppComponent implements OnInit {
 
 	ngOnInit() {
 		this.form = this.fb.group({
-			testVal: '%lovely%',
-			testCheckbutton: true,
-			testCheckbuttonGroup: this.fb.group({
-				feature1: true,
-				feature1Allowed: true,
-				feature1Password: false
-			}),
 			dynaformtest: this.fb.group(extractFormGroupData(formMetaDataObj))
 		});
 	}

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DynaformModule } from './dynaform/dynaform.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { AppComponent } from './app.component';
 import { JsonFormatterDirective } from './directives/json-formatter.directive';
 
@@ -10,7 +11,8 @@ import { JsonFormatterDirective } from './directives/json-formatter.directive';
 		BrowserModule,
 		FormsModule,
 		ReactiveFormsModule,
-		DynaformModule
+		DynaformModule,
+		NgbModule.forRoot()
 	],
 	declarations: [
 		AppComponent,

src/app/dynaform/components/dynaform/dynaform.component.html

@@ -11,8 +11,6 @@
 			<label [for]="meta.name">{{ meta.label }}</label>
 		</div>
 		<div class="col-sm-8">
-			<!-- <input type="text" [formControl]="control" class="form-control form-control-sm"> -->
-			<!-- <app-checkbutton [formControl]="control" [meta]="meta"></app-checkbutton> -->
 			<ng-container dynafield [control]="control" [meta]="meta"></ng-container>
 		</div>
 	</div>

src/app/dynaform/components/fields/basicinput/basicinput.component.html

@@ -1 +1,5 @@
-<input type="text" [formControl]="control" class="form-control form-control-sm">
+<input type="text"
+	[formControl]="control"
+	[placeholder]="placeholder"
+	class="form-control form-control-sm"
+	>

src/app/dynaform/components/fields/basicinput/basicinput.component.ts

@@ -1,11 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
 	selector: 'app-basicinput',
 	templateUrl: './basicinput.component.html',
 	styleUrls: ['./basicinput.component.scss']
 })
-export class BasicinputComponent {
+export class BasicinputComponent implements OnInit {
 
 	@Input()
 	control;
@@ -13,4 +13,9 @@ export class BasicinputComponent {
 	@Input()
 	meta;
 
+	ngOnInit() {
+		// Move meta variables up a level, for direct access in templates
+		['placeholder'].map(p => this[p] = this.meta[p] || this[p]);
+	}
+
 }

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

@@ -11,10 +11,7 @@ import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/f
 			useExisting: forwardRef(() => CheckbuttonComponent),
 			multi: true
 		}
-	],
-	host: {
-		'class' : 'red'
-	}
+	]
 })
 export class CheckbuttonComponent implements OnInit, ControlValueAccessor {
 
@@ -34,7 +31,7 @@ export class CheckbuttonComponent implements OnInit, ControlValueAccessor {
 
 	ngOnInit() {
 		// Move meta variables up a level, for direct access in templates
-		['label', 'value', 'isDisabled'].map(p => this[p] = this.meta[p]);
+		['label', 'value', 'isDisabled'].map(p => this[p] = this.meta[p] || this[p]);
 	}
 	
 	private toggleChecked(e): void {
@@ -49,7 +46,6 @@ export class CheckbuttonComponent implements OnInit, ControlValueAccessor {
 	public writeValue(value: any): void {
 		this.isChecked = value && value !== 0 && value !== 'false' ? value : false;
 		this.currentValue = this.isChecked ? value : false;
-		console.log(this.currentValue ); 
 	}
 
 	public registerOnChange(fn: any): void {

src/app/dynaform/components/fields/dropdown-modified-input/dropdown-modified-input.component.html

@@ -1,4 +1,4 @@
-<div class="input-group" [ngClass]="extraClass">
+<div class="input-group input-group-sm" [ngClass]="extraClass">
 	<div class="input-group-prepend" ngbDropdown>
 		<button class="btn btn-outline-secondary" ngbDropdownToggle>{{ selectedModifier }}</button>
 		<div ngbDropdownMenu>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ElementRef, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export interface ValueTransformer {
@@ -20,18 +20,15 @@ export interface ValueTransformer {
 })
 export class DropdownModifiedInputComponent implements OnInit, ControlValueAccessor {
 
-	@Input()
-	modifiers?: Array<string>;
 
 	@Input()
-	transform?: ValueTransformer = {
+	meta: StringMap= {};
+
+	modifiers: Array<string>;
+	transform: ValueTransformer = {
 		inputFn: value => ({ modifier: '', value: value }),
 		outputFn: (modifier, value) => value
 	};
-
-	@Input()
-	meta = {};
-
 	private selectedModifier: string;
 	private displayedValue: string;
 	private _controlValue: string;
@@ -40,14 +37,10 @@ export class DropdownModifiedInputComponent implements OnInit, ControlValueAcces
 
 	propagateChange = (_: any) => {};
 
-	constructor(el: ElementRef) {
-		 // Read the classes applied to the host element, to pass through to the template
-		this.extraClass = el.nativeElement.className;
-	}
-
 	ngOnInit() {
-		// meta input overrides other inputs if provided
-		['modifiers', 'transform'].map(p => this[p] = this.meta[p] || this[p]);
+		// 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 {

src/app/dynaform/components/fields/index.ts

@@ -2,7 +2,7 @@
 // See https://basarat.gitbooks.io/typescript/docs/tips/barrel.html
 
 export { BasicinputComponent } from './basicinput/basicinput.component';
-// export { DropdownModifiedInputComponent } from './dropdown-modified-input/dropdown-modified-input.component';
+export { DropdownModifiedInputComponent } from './dropdown-modified-input/dropdown-modified-input.component';
 export { CheckbuttonComponent } from './checkbutton/checkbutton.component';
 // export { CheckbuttonGroupComponent } from './checkbutton-group/checkbutton-group.component';
 

src/app/dynaform/components/layout/dynarow/dynarow.component.html

@@ -1,6 +0,0 @@
-<div class="form-group row">
-	<label class="col-sm-4">{{ label }}</label>
-	<div class="col-sm-8">
-		<ng-template component-host></ng-template>
-	</div>
-</div>

src/app/dynaform/components/layout/dynarow/dynarow.component.spec.ts

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

src/app/dynaform/components/layout/dynarow/dynarow.component.ts

@@ -1,84 +0,0 @@
-// Form field row, capable of hosting any type of form field input compponent
-
-import { Component, ComponentFactoryResolver, Input, ViewChild, OnInit, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-// import { ComponentHostDirective } from '@directives/component-host.directive';
-
-// Group into barrel: https://basarat.gitbooks.io/typescript/docs/tips/barrel.html
-import { BasicinputComponent } from './../../fields/basicinput/basicinput.component';
-import { DropdownModifiedInputComponent } from './../../fields/dropdown-modified-input/dropdown-modified-input.component';
-import { CheckbuttonComponent } from './../../fields/checkbutton/checkbutton.component';
-import { CheckbuttonGroupComponent } from './../../fields/checkbutton-group/checkbutton-group.component';
-
-const validComponentsArray = [ BasicinputComponent, DropdownModifiedInputComponent, CheckbuttonComponent, CheckbuttonGroupComponent ];
-const validComponents = validComponentsArray.reduce((acc, component) => Object.assign(acc, { [component.name]: component}), {});
-
-type ValidComponentType = BasicinputComponent | DropdownModifiedInputComponent | CheckbuttonComponent | CheckbuttonGroupComponent;
-
-@Component({
-	selector: 'app-dynarow',
-	templateUrl: './dynarow.component.html',
-	styleUrls: ['./dynarow.component.scss'],
-	providers: [
-		{
-			provide: NG_VALUE_ACCESSOR,
-			useExisting: forwardRef(() => DynarowComponent),
-			multi: true
-		}
-	]
-})
-export class DynarowComponent /* implements OnInit, ControlValueAccessor */ {
-
-	/*
-	@Input()
-	meta; // TODO: Add type - will be a union type of all input types available - probably (?)
-	
-	// @ViewChild(ComponentHostDirective)
-	// host: ComponentHostDirective;
-
-	label: string;
-	currentValue: string | boolean;
-
-	propagateChange = (_: any) => {};
-
-	constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
-
-	ngOnInit() {
-		this.label = this.meta.label;
-		this.loadComponent();
-	}
-
-	loadComponent() {
-		let type = this.meta.type;
-		console.log('Trying to load', type);
-		const viewContainerRef = this.host.viewContainerRef;
-		if (`${type}Component` in validComponents) {
-			type = `${type}Component`;
-		}
-		if (type in validComponents) {
-			// Create and insert the component
-			const componentFactory = this.componentFactoryResolver.resolveComponentFactory<ValidComponentType>(validComponents[type]);
-			const componentRef = viewContainerRef.createComponent(componentFactory);
-			(<ValidComponentType>componentRef.instance).meta = this.meta; // TODO: Impove on <any> by standardising interface
-
-			console.dir(componentRef.instance);
-
-			// Assign the FormControl, FormArry or FormGroup
-			(<any>componentRef.instance).formControlName = this.meta.name;
-			(<any>componentRef.instance).style = "outline: 5px red solid;";
-		} else {
-			console.error('DYNAROW: Unknown Component Type');
-		}
-	}
-
-	public writeValue(value: any): void {
-		// this.currentValue = (<any>this.componentRef.instance).FormControl.value
-	}
-
-	public registerOnChange(fn: any): void {
-		this.propagateChange = fn;
-	}
-
-	public registerOnTouched(fn: any): void {}
-	*/
-}

src/app/dynaform/directives/dynafield.directive.ts

@@ -1,30 +1,41 @@
 import {
 	Directive, ComponentFactoryResolver, ComponentRef, ViewContainerRef,
-	Input, Output, EventEmitter, OnInit
-	SkipSelf
+	Input, Output, EventEmitter, OnInit, SkipSelf
 } from '@angular/core';
-import { FormControl, ControlContainer, NgControl, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
+import { Form, FormControl, ControlContainer, NgControl, ControlValueAccessor, ValidatorFn, AsyncValidatorFn } from '@angular/forms';
 
 import * as formFieldComponents from './../components/fields';
 
+interface FFC {
+	control: FormControl
+	meta: StringMap
+	propagateChange?: Function
+}
+type FFCCustom = FFC & ControlValueAccessor;
+
 @Directive({
 	// tslint:disable-next-line:directive-selector
-	selector: '[dynafield]',
+	selector: '[dynafield]'
 })
 export class DynafieldDirective extends NgControl implements OnInit /* OnChanges */ {
 
 	@Input()
-	control: FormControl;
+	meta: StringMap;
 
 	@Input()
-	meta: StringMap;
+	set control(fc: FormControl) {
+		this._control = this._control || fc;
+	}
+
+	get control(): FormControl | null {
+		return this._control;
+	}
 
 	@Output('ngModelChange')
 	update = new EventEmitter();
 
-	component: ComponentRef<any>; // TODO: Tighten up on 'any'
-
-    _control: FormControl;
+	component: ComponentRef<FFC>;
+	_control;
 
 	constructor(
 		private resolver: ComponentFactoryResolver,
@@ -44,15 +55,27 @@ export class DynafieldDirective extends NgControl implements OnInit /* OnChanges
 			);
 		}
 		try {
-			this.name = this.meta.name;
-			const component = this.resolver.resolveComponentFactory<any>(formFieldComponents[type]);
+			const { name, class: cssClass, id: cssId } = this.meta;
+			const component = this.resolver.resolveComponentFactory<FFC>(formFieldComponents[type]);
 			this.component = this.container.createComponent(component);
-			this.component.instance.control = this.control;
-			this.component.instance.meta = this.meta;
-			if (this.component.instance.propagateChange) {
-				// We're dealing with a custom form control that implements the ControlValueAccessor interface,
-				// so we need to wire it up
-				this.valueAccessor = this.component.instance;
+			const instance = this.component.instance;
+			const el = this.component.location.nativeElement;
+
+			// Send in the data
+			instance.control = this.control;
+			instance.meta = this.meta;
+			if (cssClass) {
+				const classesToAdd = Array.isArray(cssClass) ? cssClass : [cssClass];
+				el.classList.add(...classesToAdd);
+			}
+			if (cssId) {
+				el.id = cssId;
+			}
+			if (instance.propagateChange) {
+				// We're dealing with a custom form control which implements the ControlValueAccessor interface,
+				// so we need to wire it up!
+				this.name = name;
+				this.valueAccessor = <FFCCustom>this.component.instance;
 				this._control = this.formDirective.addControl(this);
 			}
 		} catch(e) {
@@ -74,12 +97,10 @@ export class DynafieldDirective extends NgControl implements OnInit /* OnChanges
         return [...this.cc.path !, this.name];
     }
 
-    get formDirective(): any { 
+    get formDirective(): Form | null { 
 		return this.cc ? this.cc.formDirective : null;
 	}
 
-    // get control(): FormControl { return this._control; }
-
     get validator(): ValidatorFn | null { return null; }
 
     get asyncValidator(): AsyncValidatorFn { return null; }

src/app/dynaform/dynaform.module.ts

@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
 import { DynaformComponent } from './components/dynaform/dynaform.component';
 import { DynafieldDirective } from './directives/dynafield.directive';
 
@@ -12,7 +14,8 @@ const ffcArr = Object.values(formFieldComponents); // Array of all the Form Fiel
 	imports: [
 		CommonModule,
 		FormsModule,
-		ReactiveFormsModule
+		ReactiveFormsModule,
+		NgbModule
 	],
 	declarations: [
 		DynaformComponent,

src/app/dynaform/models/index.ts

@@ -34,7 +34,7 @@ interface OptionsFieldMetaData extends BasicFieldMetaData {
 	options: Option[]							// Array of Options - for select, radio-button-group and other 'multiple-choice' types
 }
 
-interface DropdownModifiedInputFieldMetaData extends OptionsFieldMetaData {
+interface DropdownModifiedInputFieldMetaData extends BasicFieldMetaData {
 	modifiers: string[]
 	transform: ValueTransformer
 }
@@ -48,9 +48,9 @@ interface TimePickerFieldMetaData extends BasicFieldMetaData {
 
 class BasicField
 {
+	type: string = 'Basicinput';
 	name: string;
 	origin?: string;
-	type: string = 'Basicinput';
 	label?: string;
 	value: string = '';
 	placeholder: string = '';
@@ -76,15 +76,17 @@ class BasicField
 
 class OptionsField extends BasicField
 {
+	type: string = 'OptionsField';
 	options: Option[];
 	constructor(meta: OptionsFieldMetaData) {
 		super(meta);
 	}
 }
 
-class DropdownModifiedInputField extends OptionsField
+class DropdownModifiedInputField extends BasicField
 {
-	modifiers: string[]
+	type: string = 'DropdownModifiedInput';
+	modifiers: string[];
 	transform: ValueTransformer;
 	constructor(meta: DropdownModifiedInputFieldMetaData) {
 		super(meta);
@@ -105,8 +107,6 @@ class TimePickerField extends BasicField
 export { BasicField, OptionsField, DropdownModifiedInputField, TimePickerField };
 
 
-
-
 /* *********************************************************************************************************************
  * Usage
  * Just ideas here for reference at the moment

src/styles.scss

@@ -11,6 +11,15 @@ div.col-sm-4 {
 	border-top: 3px white solid;
 }
 
-.red { 
-	color: red !important;
+.red input { 
+	color: rgb(202, 28, 28) !important;
+}
+
+.bgPaleBlue input {
+	background-color: rgb(230, 243, 243) !important;
+}
+
+#yoyo input {
+	border-color: purple;
+	border-width: 2px;
 }