Kendo pain

ng-dynaform.code-workspace

@@ -4,7 +4,7 @@
 			"path": "."
 		},
 		{
-			"path": "src\\app\\dynaform"
+			"path": "src/app/dynaform"
 		},
 		{
 			"path": "src/app"

package.json

@@ -12,49 +12,49 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "^7.2.4",
-		"@angular/common": "^7.2.4",
-		"@angular/compiler": "^7.2.4",
-		"@angular/core": "^7.2.4",
-		"@angular/forms": "^7.2.4",
-		"@angular/http": "^7.2.4",
-		"@angular/platform-browser": "^7.2.4",
-		"@angular/platform-browser-dynamic": "^7.2.4",
-		"@angular/router": "^7.2.4",
-		"@ng-bootstrap/ng-bootstrap": "^4.0.3",
-		"@progress/kendo-angular-dateinputs": "^3.5.4",
-		"@progress/kendo-angular-intl": "^1.6.1",
-		"@progress/kendo-angular-l10n": "^1.3.0",
-		"@progress/kendo-theme-bootstrap": "^3.2.0",
+		"@angular/animations": "^8.2.14",
+		"@angular/common": "^8.2.14",
+		"@angular/compiler": "^8.2.14",
+		"@angular/core": "^8.2.14",
+		"@angular/forms": "^8.2.14",
+		"@angular/http": "^7.2.15",
+		"@angular/platform-browser": "^8.2.14",
+		"@angular/platform-browser-dynamic": "^8.2.14",
+		"@angular/router": "^8.2.14",
+		"@ng-bootstrap/ng-bootstrap": "^5.1.4",
+		"@progress/kendo-angular-dateinputs": "^4.2.0",
+		"@progress/kendo-angular-intl": "^2.0.0",
+		"@progress/kendo-angular-l10n": "^2.0.0",
+		"@progress/kendo-theme-bootstrap": "^4.8.0",
 		"angular-super-validator": "^2.0.0",
-		"core-js": "^2.6.4",
+		"core-js": "^3.5.0",
 		"json-formatter-js": "^2.2.1",
-		"lodash": "^4.17.11",
-		"rxjs": "^6.4.0",
-		"rxjs-compat": "^6.4.0",
-		"zone.js": "^0.8.29"
+		"lodash": "^4.17.15",
+		"ramda": "^0.26.1",
+		"rxjs": "^6.5.3",
+		"zone.js": "^0.10.2"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "~0.13.1",
-		"@angular/cli": "~7.3.1",
-		"@angular/compiler-cli": "^7.2.4",
-		"@angular/language-service": "^7.2.4",
-		"@types/jasmine": "~3.3.8",
-		"@types/jasminewd2": "~2.0.6",
-		"@types/lodash": "^4.14.120",
-		"@types/node": "~11.9.3",
-		"codelyzer": "^4.5.0",
-		"jasmine-core": "~3.3.0",
+		"@angular-devkit/build-angular": "~0.803.20",
+		"@angular/cli": "~8.3.20",
+		"@angular/compiler-cli": "^8.2.14",
+		"@angular/language-service": "^8.2.14",
+		"@types/jasmine": "~3.5.0",
+		"@types/jasminewd2": "~2.0.8",
+		"@types/lodash": "^4.14.149",
+		"@types/node": "~12.12.21",
+		"codelyzer": "^5.2.0",
+		"jasmine-core": "~3.5.0",
 		"jasmine-spec-reporter": "~4.2.1",
-		"karma": "~4.0.0",
-		"karma-chrome-launcher": "~2.2.0",
-		"karma-coverage-istanbul-reporter": "^2.0.4",
+		"karma": "~4.4.1",
+		"karma-chrome-launcher": "~3.1.0",
+		"karma-coverage-istanbul-reporter": "^2.1.1",
 		"karma-jasmine": "~2.0.1",
-		"karma-jasmine-html-reporter": "^1.4.0",
+		"karma-jasmine-html-reporter": "^1.4.2",
 		"protractor": "^5.4.2",
-		"rxjs-tslint": "^0.1.6",
-		"ts-node": "~8.0.2",
-		"tslint": "~5.12.1",
-		"typescript": "^3.2.4"
+		"rxjs-tslint": "^0.1.7",
+		"ts-node": "~8.5.4",
+		"tslint": "~5.20.1",
+		"typescript": "^3.5.3"
 	}
 }

src/app/_mock/testfields.v1.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Generation of Modeled MetaData using form field models
+// ---------------------------------------------------------------------------------------------------------------------
 
 import { ValueTransformer } from './../dynaform/interfaces';
 import * as fmd from '../dynaform/models/field.model'; // fmd = Form Meta Data

src/app/_mock/testfields.v10.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Labelling Containers, hidden fields, and fields with links
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {
 	aSubGroup: {

src/app/_mock/testfields.v11.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Contaiuners seeding metadata (except source, which is currently handled separately)
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {};
 
@@ -9,7 +11,7 @@ const meta = {
 		meta: {
 			a: {},
 			b: {},
-			c: { value: 6 },
+			c: { value: 6, class: 'short-field' },
 			d: {},
 			nestedContiner: {
 				label: 'More deeply nested container',

src/app/_mock/testfields.v12.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Repeating Groups Of Fields ( 1 -> N arrays of containers for multiple fields )
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {
 	repeating: [
@@ -41,4 +43,4 @@ const meta = {
 	}
 };
 
-export { model, meta };
+export { model, meta };

src/app/_mock/testfields.v13.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Repeating Groups Of Fields ( 1 -> N arrays of containers for multiple fields )
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {
 	repeating: [

src/app/_mock/testfields.v14.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Repeating Groups Of Fields in Single Mode ( 1 -> N arrays of containers for multiple fields )
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {
 	repeating: [

src/app/_mock/testfields.v2.ts

@@ -1,4 +1,6 @@
-// TESTS: Generation of Field-Specific Modeled MetaData using buildFieldSpecific library function
+// ---------------------------------------------------------------------------------------------------------------------
+// TESTS: Generation of Field-Specific Modeled MetaData using buildFieldSpecificMeta library function
+// ---------------------------------------------------------------------------------------------------------------------
 
 import { ValueTransformer } from './../dynaform/interfaces';
 

src/app/_mock/testfields.v3.ts

@@ -1,5 +1,7 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Generation of Automatic MetaData from model using autoMeta library function
 // All fields will default to type 'text'
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {
 	a: 'Value 1',

src/app/_mock/testfields.v4.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Lazy combination of Automatic MetaData with Extra MetaData
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {
 	a: 'Value 1',

src/app/_mock/testfields.v5.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Deep nesting
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {
 	dynaformtest: {

src/app/_mock/testfields.v6.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Deep Nesting and Validators
+// ---------------------------------------------------------------------------------------------------------------------
 
 import { Validators } from '@angular/forms';
 
@@ -28,8 +30,8 @@ const meta = {
 			valTest: {
 				validators: [ Validators.required, Validators.minLength(4) ],
 				// perhaps have some standard messages for standard failures in the Object.prototype ??
-				valFailureMessages: {
-					'required': 'This field is required',
+				valFailureMsgs: {
+					'required': 'YOU MUST REPLY',
 					'minlength': 'Please type something longer'
 				}
 			},

src/app/_mock/testfields.v7.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: Async Validator
+// ---------------------------------------------------------------------------------------------------------------------
 
 import { FormControl, Validators, ValidationErrors } from '@angular/forms';
 
@@ -9,7 +11,7 @@ import { delay, map } from 'rxjs/internal/operators';
 const testAsyncValidator = (fc: FormControl): Observable<ValidationErrors> => {
 	return of(fc).pipe(delay(2000)).pipe(map(_fc => {
 		console.log('Async validator got', _fc.value);
-		return { isNot42: _fc.value.trim() !== '42' };
+		return _fc.value.trim() !== '42' ? { isNot42: true } : null;
 	}));
 };
 

src/app/_mock/testfields.v8.ts

@@ -1,4 +1,6 @@
+// ---------------------------------------------------------------------------------------------------------------------
 // TESTS: FormBuilder FormArray's and CheckButtomGroups (with Select All / Select Non option)
+// ---------------------------------------------------------------------------------------------------------------------
 
 const model = {
 	standardField: '',

src/app/_mock/testfields.v9.ts

@@ -1,4 +1,6 @@
-// TESTS: Button callbacks in deeply nested forms, an validators on custom controls
+// ---------------------------------------------------------------------------------------------------------------------
+// TESTS: Button callbacks in deeply nested forms, and validators on custom controls
+// ---------------------------------------------------------------------------------------------------------------------
 
 import { FormControl, Validators, ValidationErrors } from '@angular/forms';
 
@@ -7,7 +9,7 @@ import { Observable, of } from 'rxjs';
 import { delay, map } from 'rxjs/internal/operators';
 
 const testAsyncValidator = (fc: FormControl): Observable<ValidationErrors> => {
-	return of(fc).pipe(delay(5000)).pipe(map(_fc => {
+	return of(fc).pipe(delay(2000)).pipe(map(_fc => {
 		console.log('Async validator got', _fc.value);
 		return _fc.value === '4200' ? null : { is4200: false };
 	}));
@@ -46,8 +48,8 @@ const meta = {
 			validatorTest: {
 				validators: [ Validators.required, Validators.minLength(4) ],
 				// perhaps have some standard messages for standard failures in the Object.prototype ??
-				valFailureMessages: {
-					'required': 'This field is required',
+				valFailureMsgs: {
+					'required': 'This field is simply a MUST',
 					'minlength': 'Please type something longer'
 				}
 			},

src/app/app.component.ts

@@ -34,7 +34,7 @@ export class AppComponent implements OnInit, OnChanges {
 	hCssRed = 'color: white; background-color: maroon; font-weight: bold;';
 	hCssGreen = 'color: white; background-color: green; font-weight: bold;';
 
-	@ViewChild('testTemplate', { read: TemplateRef })
+	@ViewChild('testTemplate', { read: TemplateRef, static: true })
 	tref: TemplateRef<any>;
 
 	constructor(

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

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { NativeInputComponent } from '../../_abstract/native-input.component';
 import { IOption } from '../../../models/field.model';
+import { FriendlyValidationErrorsService } from './../../../services/friendly-validation-errors.service';
 
 @Component({
 	selector: 'app-radio',
@@ -19,8 +20,11 @@ export class RadioComponent extends NativeInputComponent {
 
 	readonly componentName = 'RadioComponent'; // For AOT compatibility, as class names don't survive minification
 
-	constructor() {
-		super();
+	constructor(
+		protected valErrsService: FriendlyValidationErrorsService,
+		protected _cdr: ChangeDetectorRef
+	) {
+		super(valErrsService, _cdr);
 		this.prefix = 'radio_u_' + Math.floor((Math.random() * 10000)).toString();
 	}
 

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

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { NativeInputComponent } from '../../_abstract/native-input.component';
 import { Router, ActivatedRoute } from '@angular/router';
 import { IOption, ILink } from '../../../models/field.model';
+import { FriendlyValidationErrorsService } from './../../../services/friendly-validation-errors.service';
 
 @Component({
 	selector: 'app-select',
@@ -14,13 +15,20 @@ export class SelectComponent extends NativeInputComponent {
 
 	options: IOption[];
 	link: ILink;
+	prefix: string;
 	
 	readonly componentName = 'SelectComponent'; // For AOT compatibility, as class names don't survive minification
 
-	constructor(private router: Router, private route: ActivatedRoute) {
-		super();
+	constructor(
+		protected valErrsService: FriendlyValidationErrorsService,
+		protected _cdr: ChangeDetectorRef,
+		private router: Router,
+		private route: ActivatedRoute
+	) {
+		super(valErrsService, _cdr);
+		this.prefix = 'radio_u_' + Math.floor((Math.random() * 10000)).toString();
 	}
-	
+
 	navigate(field: HTMLSelectElement) {
 		const base = Array.isArray(this._meta.link.route) ? this._meta.link.route : [this._meta.link.route];
 		const destination = [...base, field.options[field.selectedIndex].value];

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

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { NativeInputComponent } from '../../_abstract/native-input.component';
 import { ILink } from '../../../models/field.model';
+import { FriendlyValidationErrorsService } from './../../../services/friendly-validation-errors.service';
 
 @Component({
 	selector: 'app-text',
@@ -16,4 +17,11 @@ export class TextComponent extends NativeInputComponent {
 
 	readonly componentName = 'TextComponent'; // For AOT compatibility, as class names don't survive minification
 
+	constructor(
+		protected valErrsService: FriendlyValidationErrorsService,
+		protected _cdr: ChangeDetectorRef
+	) {
+		super(valErrsService, _cdr);
+	}
+
 }

src/app/dynaform/dynaform.component.ts

@@ -236,7 +236,7 @@ export class DynaformComponent implements OnInit, OnChanges {
 		if (control.errors) {
 			const errKeys = Object.keys(control.errors);
 			console.log(errKeys);
-			return meta.valFailureMessages[errKeys[0]];
+			return meta.valFailureMsgs[errKeys[0]];
 		}
 	}
 

src/app/dynaform/dynaform.module.ts

@@ -14,6 +14,8 @@ import { FriendlyValidationErrorsService } from './services/friendly-validation-
 
 import { ffcArr } from './components'; // ffcArr = Form Field Components Array, exported from components/index.ts
 
+import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
+
 @NgModule({
 	imports: [
 		CommonModule,

src/app/dynaform/testdata/testset.2.ts

@@ -28,7 +28,7 @@ const meta = {
 			validationTest: {
 				validators: [ Validators.required, Validators.minLength(4) ],
 				// perhaps have some standard messages for standard failures in the Object.prototype ??
-				valFailureMessages: {
+				valFailureMsgs: {
 					'required': 'This field is required',
 					'minlength': 'Please type something longer'
 				}

src/app/dynaform/testdata/testset.5.ts

@@ -0,0 +1,29 @@
+import { Validators } from '@angular/forms';
+import { ValueTransformer } from './../interfaces';
+
+// ---------------------------------------------------------------------------------------------------------------------
+// Clarity
+
+// const timepicker = {
+// 	type: 'timepicker',
+// 	// value: new Date(1999, 10, 11, 12, 30, 45)
+// 	value: "12:45"
+// };
+
+const datepicker = {
+	type: 'datepicker'
+};
+
+const datetime = {
+	type: 'datetime'
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+const model = {};
+
+const meta = {
+	datetime
+};
+
+export { model, meta };

src/polyfills.ts

@@ -43,7 +43,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+// import 'core-js/es7/reflect';
 
 
 /**
@@ -76,4 +76,4 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
- */
+ */