Further AOT fixes

package.json

@@ -12,36 +12,36 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "^7.2.2",
-		"@angular/common": "^7.2.2",
-		"@angular/compiler": "^7.2.2",
-		"@angular/core": "^7.2.2",
-		"@angular/forms": "^7.2.2",
-		"@angular/http": "^7.2.2",
-		"@angular/platform-browser": "^7.2.2",
-		"@angular/platform-browser-dynamic": "^7.2.2",
-		"@angular/router": "^7.2.2",
-		"@clr/angular": "^1.0.4",
-		"@clr/icons": "^1.0.4",
-		"@clr/ui": "^1.0.4",
+		"@angular/animations": "^7.2.3",
+		"@angular/common": "^7.2.3",
+		"@angular/compiler": "^7.2.3",
+		"@angular/core": "^7.2.3",
+		"@angular/forms": "^7.2.3",
+		"@angular/http": "^7.2.3",
+		"@angular/platform-browser": "^7.2.3",
+		"@angular/platform-browser-dynamic": "^7.2.3",
+		"@angular/router": "^7.2.3",
+		"@clr/angular": "^1.0.5",
+		"@clr/icons": "^1.0.5",
+		"@clr/ui": "^1.0.5",
 		"@webcomponents/custom-elements": "^1.2.1",
 		"angular-super-validator": "^2.0.0",
 		"core-js": "^2.6.3",
 		"json-formatter-js": "^2.2.1",
 		"lodash": "^4.17.11",
-		"rxjs": "^6.3.3",
-		"rxjs-compat": "^6.3.3",
+		"rxjs": "^6.4.0",
+		"rxjs-compat": "^6.4.0",
 		"zone.js": "^0.8.29"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "~0.12.3",
-		"@angular/cli": "~7.2.3",
-		"@angular/compiler-cli": "^7.2.2",
-		"@angular/language-service": "^7.2.2",
+		"@angular-devkit/build-angular": "~0.13.0",
+		"@angular/cli": "~7.3.0",
+		"@angular/compiler-cli": "^7.2.3",
+		"@angular/language-service": "^7.2.3",
 		"@types/jasmine": "~3.3.8",
 		"@types/jasminewd2": "~2.0.6",
 		"@types/lodash": "^4.14.120",
-		"@types/node": "~10.12.18",
+		"@types/node": "~10.12.21",
 		"codelyzer": "^4.5.0",
 		"jasmine-core": "~3.3.0",
 		"jasmine-spec-reporter": "~4.2.1",
@@ -54,6 +54,6 @@
 		"rxjs-tslint": "^0.1.6",
 		"ts-node": "~8.0.2",
 		"tslint": "~5.12.1",
-		"typescript": "3.2.4"
+		"typescript": "^3.2.4"
 	}
 }

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

@@ -5,13 +5,13 @@ export abstract class CustomInputComponent extends NativeInputComponent implemen
 
 	propagateChange = (_: any) => {};
 
-	public writeValue(value: any): void {};
+	writeValue(value: any): void {};
 
-	public registerOnChange(fn: any): void {
+	registerOnChange(fn: any): void {
 		this.propagateChange = fn;
 	}
 
-	public registerOnTouched(fn: any): void {
+	registerOnTouched(fn: any): void {
 		// this.propagateChange = fn;
 	}
 

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

@@ -19,7 +19,7 @@ export abstract class NativeInputComponent implements OnInit {
 		this.exposeMetaInTemplate.map(p => this[p] = this.meta[p] !== undefined ? this.meta[p] : this[p]);
 	}
 
-	handle(fnId: string, val: any) {
+	handle(fnId: string, val: any): void {
 		this.call.emit(fnId);
 	}
 

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

@@ -34,9 +34,9 @@ export class CheckbuttonComponent extends CustomInputComponent implements OnChan
 		this.disabled = this.meta.disabled;
 	}
 
-	private toggleChecked(e?): void {
+	toggleChecked(e?: MouseEvent): void {
 		if (e) {
-			e.target.blur();
+			(e.target as HTMLElement).blur();
 			e.preventDefault();
 		}
 		if (this.disabled) { return; }
@@ -52,7 +52,7 @@ export class CheckbuttonComponent extends CustomInputComponent implements OnChan
 		this.propagateChange(this.currentValue);
 	}
 
-	public writeValue(value: any): void {
+	writeValue(value: any): void {
 		value = value ? this.checkedValue : false;
 		this.isChecked = !!value;
 		this.currentValue = this.isChecked ? this.checkedValue : false;

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

@@ -24,8 +24,10 @@ export class DropdownModifiedInputComponent extends CustomInputComponent impleme
 		inputFn: value => ({ modifier: '', value }),
 		outputFn: (modifier, value) => value
 	};
-	private selectedModifier: string;
-	private displayedValue: string;
+	extraClass;
+	selectedModifier: string;
+	displayedValue: string;
+	
 	private _controlValue: string;
 
 	ngOnInit() {

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

@@ -17,14 +17,20 @@ import { CustomInputComponent } from './../../_abstract/custom-input.component';
 export class MultilineComponent extends CustomInputComponent {
 
 	exposeMetaInTemplate: string[] = ['maxLineLength'];
+	
 	linesArr: string[];
 	value: string;
+	maxLineLength: number;
 
-	public writeValue(value: any): void {
+	writeValue(value: any): void {
 		this.value = value;
 		this.splitIntoLines(value, this.meta.lines || 5);
 	}
 
+	trackByFn(index: any, item: any) {
+		return index;
+	}
+
 	private updateValue(): void {
 		this.value = this.recombineLines(this.linesArr);
 		this.propagateChange(this.value);
@@ -44,7 +50,4 @@ export class MultilineComponent extends CustomInputComponent {
 		return linesArr.join('\n');
 	}
 
-	private trackByFn(index: any, item: any) {
-		return index;
-	}
 }

src/app/dynaform/components/group/checkbutton-group/checkbutton-group.component.ts

@@ -13,7 +13,7 @@ export class CheckbuttonGroupComponent extends GroupInputComponent implements On
 
 	constructor(
 		@Attribute('firstEnablesRest') private firstEnablesRest,
-		@Attribute('allOrNone') private showAllOrNone
+		@Attribute('allOrNone') public showAllOrNone
 	) {
 		super();
 		this.firstEnablesRest = firstEnablesRest === ''; // True if 'firstEnablesRest' exists as component attribute
@@ -47,13 +47,13 @@ export class CheckbuttonGroupComponent extends GroupInputComponent implements On
 		}
 	}
 
-	selectAll(e: Event): false {
+	selectAll(e: MouseEvent): 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 {
+	selectNone(e: MouseEvent): false {
 		this.controlNames.forEach(c => this.formGroup.get(c).setValue(null));
 		(e.target as HTMLLinkElement).blur();
 		return false;

src/app/dynaform/components/index.ts

@@ -1,28 +1,41 @@
 // Barrel grouping all form field components
 // See https://basarat.gitbooks.io/typescript/docs/tips/barrel.html
 
-// export { DynaformComponent } from './../dynaform.component';
-// export { TextComponent } from './native/text/text.component';
-// export { TextareaComponent } from './native/textarea/textarea.component';
-// export { PasswordComponent } from './native/password/password.component';
-// export { SelectComponent } from './native/select/select.component';
-// export { RadioComponent } from './native/radio/radio.component';
-export { HiddenComponent } from './native/hidden/hidden.component';
+import { HiddenComponent } from './native/hidden/hidden.component';
 
-export { ClrTextComponent as TextComponent } from './clarity/text/clr-text.component';
-export { ClrTextareaComponent as TextareaComponent } from './clarity/textarea/clr-textarea.component';
-export { ClrPasswordComponent as PasswordComponent } from './clarity/password/clr-password.component';
-export { ClrSelectComponent as SelectComponent } from './clarity/select/clr-select.component';
-export { ClrRadioComponent as RadioComponent } from './clarity/radio/clr-radio.component';
-export { ClrCheckboxComponent as CheckboxComponent } from './clarity/checkbox/clr-checkbox.component';
-export { ClrDatepickerComponent } from './clarity/datepicker/datepicker.component';
+import { ClrTextComponent as TextComponent } from './clarity/text/clr-text.component';
+import { ClrTextareaComponent as TextareaComponent } from './clarity/textarea/clr-textarea.component';
+import { ClrPasswordComponent as PasswordComponent } from './clarity/password/clr-password.component';
+import { ClrSelectComponent as SelectComponent } from './clarity/select/clr-select.component';
+import { ClrRadioComponent as RadioComponent } from './clarity/radio/clr-radio.component';
+import { ClrCheckboxComponent as CheckboxComponent } from './clarity/checkbox/clr-checkbox.component';
+import { ClrDatepickerComponent } from './clarity/datepicker/datepicker.component';
 
-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';
+import { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component';
+import { DropdownModifiedInputComponent } from './custom/dropdown-modified-input/dropdown-modified-input.component';
+import { MultilineComponent } from './custom/multiline/multiline.component';
+import { ClrCheckboxGroupComponent as CheckboxGroupComponent } from './group/checkbox-group/clr-checkbox-group.component';
+import { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.component';
 
-export { ButtonGroupComponent } from './nocontrol/button-group/button-group.component';
-export { HeadingComponent } from './nocontrol/heading/heading.component';
-export { DisplayComponent } from './nocontrol/display/display.component';
+import { ButtonGroupComponent } from './nocontrol/button-group/button-group.component';
+import { HeadingComponent } from './nocontrol/heading/heading.component';
+import { DisplayComponent } from './nocontrol/display/display.component';
+
+export const ffcArr = [
+	HiddenComponent,
+	TextComponent,
+	TextareaComponent,
+	PasswordComponent,
+	SelectComponent,
+	RadioComponent,
+	CheckboxComponent,
+	ClrDatepickerComponent,
+	CheckbuttonComponent,
+	DropdownModifiedInputComponent,
+	MultilineComponent,
+	CheckboxGroupComponent,
+	CheckbuttonGroupComponent,
+	ButtonGroupComponent,
+	HeadingComponent,
+	DisplayComponent
+];

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

@@ -10,4 +10,6 @@ export class PasswordComponent extends NativeInputComponent {
 
 	exposeMetaInTemplate: string[] = ['placeholder'];
 
+	placeholder: string;
+
 }

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

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NativeInputComponent } from '../../_abstract/native-input.component';
+import { IOption } from '../../../models/field.model';
 
 @Component({
 	selector: 'app-radio',
@@ -9,6 +10,11 @@ import { NativeInputComponent } from '../../_abstract/native-input.component';
 export class RadioComponent extends NativeInputComponent {
 
 	exposeMetaInTemplate: string[] = ['name', 'options', 'horizontal'];
+
+	name: string;
+	options: IOption[];
+	horizontal: boolean;
+	
 	prefix: string;
 
 	constructor() {

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { NativeInputComponent } from '../../_abstract/native-input.component';
 import { Router, ActivatedRoute } from '@angular/router';
+import { IOption, ILink } from '../../../models/field.model';
 
 @Component({
 	selector: 'app-select',
@@ -11,6 +12,9 @@ export class SelectComponent extends NativeInputComponent {
 
 	exposeMetaInTemplate: string[] = ['options', 'link'];
 
+	options: IOption[];
+	link: ILink;
+	
 	constructor(private router: Router, private route: ActivatedRoute) {
 		super();
 	}

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

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NativeInputComponent } from '../../_abstract/native-input.component';
+import { ILink } from '../../../models/field.model';
 
 @Component({
 	selector: 'app-text',
@@ -10,4 +11,7 @@ export class TextComponent extends NativeInputComponent {
 
 	exposeMetaInTemplate: string[] = ['placeholder', 'link'];
 
+	placeholder: string;
+	link: ILink;
+	
 }

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

@@ -10,4 +10,6 @@ export class TextareaComponent extends NativeInputComponent {
 
 	exposeMetaInTemplate: string[] = ['placeholder'];
 
+	placeholder: string;
+
 }

src/app/dynaform/components/nocontrol/button-group/button-group.component.ts

@@ -19,7 +19,7 @@ export class ButtonGroupComponent implements OnInit {
 		this.buttons = this.meta.meta;
 	}
 
-	handle(fnId: string, e: Event) {
+	handle(fnId: string, e: Event): void {
 		e.preventDefault();
 		(e.target as HTMLElement).blur();
 		this.call.emit(fnId);

src/app/dynaform/components/nocontrol/display/display.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { ILink } from '../../../models/field.model';
 
 @Component({
 	selector: 'app-display',
@@ -11,7 +12,7 @@ export class DisplayComponent implements OnInit {
 	meta: StringMap<any>;
 
 	value: string;
-	link?: StringMap<any>;
+	link?: ILink;
 
 	ngOnInit() {
 		this.value = this.meta.value;

src/app/dynaform/dynaform.module.ts

@@ -12,31 +12,8 @@ import { DynafieldDirective } from './directives/dynafield.directive';
 import { DynaformService } from './services/dynaform.service';
 import { ModelMapperService } from './services/model-mapper.service';
 
-// NOTE: Importing from barrel may not be supported with AOT compilation,
-// so instead we MAY have to do things the long-winded way (see per-component imports below...)
-// Using JIT for now, as a non-ideal workaround, with: ng build --prod --aot=false --build-optimizer=false
-// See: https://github.com/angular/angular/issues/20604
-import * as formFieldComponents from './components';
-const ffcArr = Object.values(formFieldComponents); // Array of all the Form Field Components
-/*
-import { HiddenComponent } from './components/native/hidden/hidden.component';
-import { ClrTextComponent as TextComponent } from './components/clarity/text/clr-text.component';
-import { ClrTextareaComponent as TextareaComponent } from './components/clarity/textarea/clr-textarea.component';
-import { ClrPasswordComponent as PasswordComponent } from './components/clarity/password/clr-password.component';
-import { ClrSelectComponent as SelectComponent } from './components/clarity/select/clr-select.component';
-import { ClrRadioComponent as RadioComponent } from './components/clarity/radio/clr-radio.component';
-import { ClrCheckboxComponent as CheckboxComponent } from './components/clarity/checkbox/clr-checkbox.component';
-import { ClrDatepickerComponent } from './components/clarity/datepicker/datepicker.component';
-import { CheckbuttonComponent } from './components/custom/checkbutton/checkbutton.component';
-import { DropdownModifiedInputComponent } from './components/custom/dropdown-modified-input/dropdown-modified-input.component';
-import { MultilineComponent } from './components/custom/multiline/multiline.component';
-import { ClrCheckboxGroupComponent as CheckboxGroupComponent } from './components/group/checkbox-group/clr-checkbox-group.component';
-import { CheckbuttonGroupComponent } from './components/group/checkbutton-group/checkbutton-group.component';
-import { ButtonGroupComponent } from './components/nocontrol/button-group/button-group.component';
-import { HeadingComponent } from './components/nocontrol/heading/heading.component';
-import { DisplayComponent } from './components/nocontrol/display/display.component';
-*/
-
+import { ffcArr } from './components'; // ffcArr = Form Field Components Array, exported from components/index.ts
+console.log(ffcArr);
 
 @NgModule({
 	imports: [
@@ -52,41 +29,8 @@ import { DisplayComponent } from './components/nocontrol/display/display.compone
 		DynaformComponent,
 		DynafieldDirective,
 		...ffcArr
-		// HiddenComponent,
-		// TextComponent,
-		// TextareaComponent,
-		// PasswordComponent,
-		// SelectComponent,
-		// RadioComponent,
-		// CheckboxComponent,
-		// ClrDatepickerComponent,
-		// CheckbuttonComponent,
-		// DropdownModifiedInputComponent,
-		// MultilineComponent,
-		// CheckboxGroupComponent,
-		// CheckbuttonGroupComponent,
-		// ButtonGroupComponent,
-		// HeadingComponent,
-		// DisplayComponent
-	],
-	entryComponents: [ ffcArr
-		// HiddenComponent,
-		// TextComponent,
-		// TextareaComponent,
-		// PasswordComponent,
-		// SelectComponent,
-		// RadioComponent,
-		// CheckboxComponent,
-		// ClrDatepickerComponent,
-		// CheckbuttonComponent,
-		// DropdownModifiedInputComponent,
-		// MultilineComponent,
-		// CheckboxGroupComponent,
-		// CheckbuttonGroupComponent,
-		// ButtonGroupComponent,
-		// HeadingComponent,
-		// DisplayComponent
 	],
+	entryComponents: ffcArr,
 	providers: [
 		DynaformService,
 		ModelMapperService
@@ -95,24 +39,7 @@ import { DisplayComponent } from './components/nocontrol/display/display.compone
 		FormsModule,
 		ReactiveFormsModule,
 		DynaformComponent,
-		DynafieldDirective,
-		...ffcArr
-		// HiddenComponent,
-		// TextComponent,
-		// TextareaComponent,
-		// PasswordComponent,
-		// SelectComponent,
-		// RadioComponent,
-		// CheckboxComponent,
-		// ClrDatepickerComponent,
-		// CheckbuttonComponent,
-		// DropdownModifiedInputComponent,
-		// MultilineComponent,
-		// CheckboxGroupComponent,
-		// CheckbuttonGroupComponent,
-		// ButtonGroupComponent,
-		// HeadingComponent,
-		// DisplayComponent
+		DynafieldDirective
 	]
 })
 export class DynaformModule { }

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

@@ -392,6 +392,12 @@ class DisplayField {
 // ---------------------------------------------------------------------------------------------------------------------
 // Exports
 
+// Interfaces
+export {
+	IOption, ILink
+}
+
+// Classes
 export {
 	SimpleField,
 	TextField, TextareaField, PasswordField, SelectField, RadioField, CheckboxField, HiddenField,
@@ -401,3 +407,4 @@ export {
 	Container, RepeatingContainer,
 	ButtonGroup, Heading, DisplayField
 };
+

src/app/dynaform/services/dynaform.service.ts

@@ -117,7 +117,7 @@ export class DynaformService {
 	private context: any;
 
 	public buildFormGroup: (meta) => FormGroup;
-	private buildStrategy: 'MODELFIRST' | 'METAFIRST' = 'METAFIRST'; // Make ENUM type
+	private buildStrategy: 'MODELFIRST' | 'METAFIRST' = 'MODELFIRST'; // Make ENUM type
 	private callbacks: ICallbacks = {};
 
 	private conGreen = 'color: white; background-color: green; font-weight: bold;';