Angular AOT compilation working

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

@@ -1,5 +0,0 @@
-<clr-checkbox-wrapper>
-	<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.spec.ts

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

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

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input.component';
-
-
-@Component({
-	selector: 'app-checkbox',
-	templateUrl: './clr-checkbox.component.html',
-	styleUrls: ['./clr-checkbox.component.scss']
-})
-export class ClrCheckboxComponent extends NativeInputComponent {
-
-	exposeMetaInTemplate: string[] = ['label'];
-
-	setValue(cb: HTMLInputElement) {
-		this.control.setValue(cb.checked ? this.meta.checkedValue : false);
-		if (this.meta.change) {
-			this.handle(this.meta.change, this.control.value);
-		}
-	}
-
-}

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

@@ -1,3 +0,0 @@
-<clr-date-container [ngClass]="extraClass">
-	<input clrDate [formControl]="control">
-</clr-date-container>

src/app/dynaform/components/clarity/datepicker/datepicker.component.spec.ts

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

src/app/dynaform/components/clarity/datepicker/datepicker.component.ts

@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input.component';
-
-@Component({
-	selector: 'app-datepicker',
-	templateUrl: './datepicker.component.html',
-	styleUrls: ['./datepicker.component.scss']
-})
-export class ClrDatepickerComponent extends NativeInputComponent {
-
-	exposeMetaInTemplate: string[] = ['extraClass', 'placeholder'];
-
-	ngOnInit() {
-		super.ngOnInit();
-		
-		// CLarity datepicker expects a string when used reactively
-		const dateObj = this.control.value;
-		const d = dateObj.getDate();
-		const m = dateObj.getMonth();
-		const y = dateObj.getFullYear();
-		this.control.setValue(`${d}/${m + 1}/${y}`);
-	}
-
-}

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

@@ -1,4 +0,0 @@
-<clr-password-container>
-	<label>{{ label }}</label>
-    <input clrPassword [formControl]="control" [placeholder]="placeholder" />
-</clr-password-container>

src/app/dynaform/components/clarity/password/clr-password.component.spec.ts

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

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

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input.component';
-
-@Component({
-	selector: 'app-password',
-	templateUrl: './clr-password.component.html',
-	styleUrls: ['./clr-password.component.scss']
-})
-export class ClrPasswordComponent extends NativeInputComponent {
-
-	exposeMetaInTemplate: string[] = ['label', 'placeholder'];
-
-}

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

@@ -1,7 +0,0 @@
-<div class="clr-radio-container" [ngClass]="{'clr-control-inline' : horizontal}">
-	<label class="small">{{ label }}</label>
-	<clr-radio-wrapper *ngFor="let opt of options; let i = index;">
-		<input type="radio" clrRadio [formControl]="control" [value]="opt.value" [name]="prefix" [id]="prefix + i">
-		<label [for]="prefix + i">{{ opt.label }}</label>
-	</clr-radio-wrapper>
-</div>

src/app/dynaform/components/clarity/radio/clr-radio.component.spec.ts

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

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

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input.component';
-
-@Component({
-	selector: 'app-radio',
-	templateUrl: './clr-radio.component.html',
-	styleUrls: ['./clr-radio.component.scss']
-})
-export class ClrRadioComponent extends NativeInputComponent {
-
-	exposeMetaInTemplate: string[] = ['name', 'label', 'options', 'horizontal'];
-	prefix: string;
-
-	constructor() {
-		super();
-		this.prefix = 'radio_u_' + Math.floor((Math.random() * 10000)).toString();
-	}
-
-}

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

@@ -1,17 +0,0 @@
-<clr-select-container *ngIf="!link; else fieldWithLink">
-	<label>{{ label }}</label>
-	<select clrSelect [formControl]="control">
-		<option *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</option>
-	</select>
-</clr-select-container>
-
-<ng-template #fieldWithLink>
-	<clr-select-container class="clr-input-group clr-input-group-sm">
-		<select [formControl]="control" clrSelect #field>
-			<option *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</option>
-		</select>
-		<div class="clr-input-group-append">
-			<button class="btn btn-outline-primary" type="button" (click)="navigate(field)">{{ link.label || 'Details' }}</button>
-		</div>
-	</clr-select-container>
-</ng-template>

src/app/dynaform/components/clarity/select/clr-select.component.spec.ts

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

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

@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input.component';
-import { Router, ActivatedRoute } from '@angular/router';
-
-@Component({
-	selector: 'app-select',
-	templateUrl: './clr-select.component.html',
-	styleUrls: ['./clr-select.component.scss']
-})
-export class ClrSelectComponent extends NativeInputComponent {
-
-	exposeMetaInTemplate: string[] = ['label', 'options', 'link'];
-
-	constructor(private router: Router, private route: ActivatedRoute) {
-		super();
-	}
-	
-	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];
-		this.router.navigate(destination, { relativeTo: this.route });
-	}
-
-}

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

@@ -1,16 +0,0 @@
-<clr-input-container *ngIf="!link; else fieldWithLink">
-	<label>{{ label }}</label>
-	<input clrInput [formControl]="control" [placeholder]="placeholder">
-</clr-input-container>
-
-
-<ng-template #fieldWithLink>
-	<clr-input-container>
-		<label>{{ label }}</label>
-		<input clrInput #field [formControl]="control" [placeholder]="placeholder">
-		<div class="input-group-append">
-			<button class="btn btn-outline" type="button"
-				[routerLink]="[ link.route, field.value ]">{{ link.label || 'Details' }}</button>
-		</div>
-	</clr-input-container>
-</ng-template>

src/app/dynaform/components/clarity/text/clr-text.component.spec.ts

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

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

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input.component';
-
-@Component({
-	selector: 'app-clr-text',
-	templateUrl: './clr-text.component.html',
-	styleUrls: ['./clr-text.component.scss']
-})
-export class ClrTextComponent extends NativeInputComponent {
-
-	exposeMetaInTemplate: string[] = ['label', 'placeholder', 'link'];
-
-}

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

@@ -1,5 +0,0 @@
-<textarea clrTextarea
-	[formControl]="control"
-	[placeholder]="placeholder"
-	rows="5"
-></textarea>

src/app/dynaform/components/clarity/textarea/clr-textarea.component.spec.ts

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

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

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { NativeInputComponent } from '../../_abstract/native-input.component';
-
-@Component({
-	selector: 'app-textarea',
-	templateUrl: './clr-textarea.component.html',
-	styleUrls: ['./clr-textarea.component.scss']
-})
-export class ClrTextareaComponent extends NativeInputComponent {
-
-	exposeMetaInTemplate: string[] = ['placeholder'];
-
-}

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

@@ -34,7 +34,7 @@ export class CheckbuttonComponent extends CustomInputComponent implements OnChan
 		this.disabled = this.meta.disabled;
 	}
 
-	private toggleChecked(e?): void {
+	toggleChecked(e?): void {
 		if (e) {
 			e.target.blur();
 			e.preventDefault();
@@ -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;
 
-	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

src/app/dynaform/components/index.ts

@@ -1,7 +1,6 @@
 // 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';

src/app/dynaform/components/kendo/datepicker/datepicker.component.ts

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

src/app/dynaform/components/kendo/timepicker/timepicker.component.ts

@@ -9,4 +9,9 @@ import { NativeInputComponent } from '../../_abstract/native-input.component';
 export class TimepickerComponent extends NativeInputComponent {
 
 	exposeMetaInTemplate: string[] = ['format', 'steps', 'placeholder'];
+
+	format;
+	steps;
+	placeholder;
+	
 }

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

@@ -8,6 +8,8 @@ import { NativeInputComponent } from '../../_abstract/native-input.component';
 })
 export class PasswordComponent extends NativeInputComponent {
 
+	placeholder;
+	
 	exposeMetaInTemplate: string[] = ['placeholder'];
 
 }

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

@@ -8,6 +8,10 @@ import { NativeInputComponent } from '../../_abstract/native-input.component';
 })
 export class RadioComponent extends NativeInputComponent {
 
+	name;
+	options;
+	horizontal;
+	
 	exposeMetaInTemplate: string[] = ['name', 'options', 'horizontal'];
 	prefix: string;
 

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

@@ -9,6 +9,9 @@ import { Router, ActivatedRoute } from '@angular/router';
 })
 export class SelectComponent extends NativeInputComponent {
 
+	options;
+	link;
+	
 	exposeMetaInTemplate: string[] = ['options', 'link'];
 
 	constructor(private router: Router, private route: ActivatedRoute) {

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

@@ -8,6 +8,9 @@ import { NativeInputComponent } from '../../_abstract/native-input.component';
 })
 export class TextComponent extends NativeInputComponent {
 
+	link;
+	placeholder;
+	
 	exposeMetaInTemplate: string[] = ['placeholder', 'link'];
 
 }

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

@@ -8,6 +8,8 @@ import { NativeInputComponent } from '../../_abstract/native-input.component';
 })
 export class TextareaComponent extends NativeInputComponent {
 
+	placeholder;
+	
 	exposeMetaInTemplate: string[] = ['placeholder'];
 
 }

src/app/dynaform/dynaform.module.ts

@@ -10,11 +10,26 @@ import { DynafieldDirective } from './directives/dynafield.directive';
 import { DynaformService } from './services/dynaform.service';
 import { ModelMapperService } from './services/model-mapper.service';
 
-import * as formFieldComponents from './components';
-const ffcArr = Object.values(formFieldComponents); // Array of all the Form Field Components
-
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 
+import { TextComponent } from './components/native/text/text.component';
+import { TextareaComponent } from './components/native/textarea/textarea.component';
+import { PasswordComponent } from './components/native/password/password.component';
+import { SelectComponent } from './components/native/select/select.component';
+import { RadioComponent } from './components/native/radio/radio.component';
+import { HiddenComponent } from './components/native/hidden/hidden.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 { CheckbuttonGroupComponent } from './components/group/checkbutton-group/checkbutton-group.component';
+import { TimepickerComponent } from './components/kendo/timepicker/timepicker.component';
+import { DatepickerComponent } from './components/kendo/datepicker/datepicker.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';
+
+
+
 @NgModule({
 	imports: [
 		CommonModule,
@@ -27,9 +42,39 @@ import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 	declarations: [
 		DynaformComponent,
 		DynafieldDirective,
-		...ffcArr
+		TextComponent,
+		TextareaComponent,
+		PasswordComponent,
+		SelectComponent,
+		RadioComponent,
+		HiddenComponent,
+		CheckbuttonComponent,
+		DropdownModifiedInputComponent,
+		MultilineComponent,
+		CheckbuttonGroupComponent,
+		TimepickerComponent,
+		DatepickerComponent,
+		ButtonGroupComponent,
+		HeadingComponent,
+		DisplayComponent
+	],
+	entryComponents: [
+		TextComponent,
+		TextareaComponent,
+		PasswordComponent,
+		SelectComponent,
+		RadioComponent,
+		HiddenComponent,
+		CheckbuttonComponent,
+		DropdownModifiedInputComponent,
+		MultilineComponent,
+		CheckbuttonGroupComponent,
+		TimepickerComponent,
+		DatepickerComponent,
+		ButtonGroupComponent,
+		HeadingComponent,
+		DisplayComponent
 	],
-	entryComponents: ffcArr,
 	providers: [
 		DynaformService,
 		ModelMapperService
@@ -42,3 +87,4 @@ import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 	]
 })
 export class DynaformModule { }
+