Adding Clarioty-specific markup

src/app/_mock/testfields.v1.ts

@@ -39,6 +39,12 @@ const radioField = new fmd.RadioField({
 	options: ['Tea', 'Coffee', 'Cocoa', 'Yerba Maté']
 });
 
+const checkboxField = new fmd.CheckboxField({
+	name: 'checkboxField',
+	value: 'Howdy Checkbox'
+});
+
+
 const disabledTextField = new fmd.TextField({
 	name: 'disabledTextField',
 	placeholder: 'You can\'t touch this',
@@ -117,7 +123,7 @@ const timepicker = new fmd.TimepickerField({
 });
 
 const clrdatepicker = new fmd.ClrDatepickerField({
-	name: 'clrdatepicker'
+	name: 'clrDatepicker'
 });
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -142,6 +148,7 @@ const meta = {
 	passwordField,
 	selectField,
 	radioField,
+	checkboxField,
 	disabledTextField,
 	radioFieldHorizontal,
 	checkbutton,

src/app/_mock/testfields.v2.ts

@@ -125,8 +125,8 @@ const timepicker = {
 	type: 'timepicker'
 };
 
-const datepicker = {
-	type: 'datepicker'
+const clrdatepicker = {
+	type: 'ClrDatepicker'
 };
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -157,7 +157,7 @@ const meta = {
 	dropdownModifiedInput,
 	checkbuttonGroup,
 	// timepicker,
-	datepicker,
+	clrdatepicker,
 	container
 };
 

src/app/_mock/testfields.v4.ts

@@ -21,7 +21,7 @@ const meta = {
 	d: {
 		meta: {
 			e: { type: 'radio', 'label': 'Does it work yet?' },
-			f: { type: 'datepicker' }
+			f: { type: 'clrDatepicker' }
 		}
 	}
 };

src/app/_mock/testfields.v5.ts

@@ -25,7 +25,7 @@ const meta = {
 			d: {
 				meta: {
 					e: { type: 'radio', 'label': 'Does it work yet?' },
-					f: { type: 'datepicker' }
+					f: { type: 'clrDatepicker' }
 				}
 			}
 		}

src/app/_mock/testfields.v6.ts

@@ -38,7 +38,7 @@ const meta = {
 			d: {
 				meta: {
 					e: { type: 'radio', 'label': 'Does it work yet?', validators: Validators.required },
-					f: { type: 'datepicker' }
+					f: { type: 'clrDatepicker' }
 				}
 			}
 		}

src/app/_mock/testfields.v9.ts

@@ -60,7 +60,7 @@ const meta = {
 			d: {
 				meta: {
 					isWorking: { type: 'radio', 'label': 'Does it work yet?', validators: Validators.required },
-					f: { type: 'datepicker' },
+					f: { type: 'clrDatepicker' },
 					deeplyNestedButtonGroup: { type: 'buttonGroup', label: 'Deeply Nested Buttons',
 						meta: [
 							{ label: 'Say Hello', fnId: 'SAYHELLO' },

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

@@ -0,0 +1,5 @@
+<clr-checkbox-wrapper>
+	<input type="checkbox" clrCheckbox [formControl]="control" [value]="value" (change)="toggleChecked($event)">
+	<label>{{ value }}</label>
+</clr-checkbox-wrapper>
+

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,58 @@
+import { Component, forwardRef, OnInit, OnChanges } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CustomInputComponent } from './../../_abstract/custom-input.component';
+
+@Component({
+	selector: 'app-checkbox',
+	templateUrl: './clr-checkbox.component.html',
+	styleUrls: ['./clr-checkbox.component.scss'],
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => ClrCheckboxComponent),
+			multi: true
+		}
+	]
+})
+export class ClrCheckboxComponent extends CustomInputComponent implements OnInit, OnChanges {
+
+	exposeMetaInTemplate: string[] = ['label', 'value', 'disabled', 'checkedValue'];
+
+	value?: string | boolean = true;
+	isChecked: boolean;
+	disabled = false;
+	currentValue: string | boolean;
+	checkedValue: string | boolean = true;
+	onChange: (val) => {};
+
+	ngOnInit() {
+		if (this.meta.disabled) {
+			this.control.disable();
+		}
+	}
+	
+	ngOnChanges() {
+		this.disabled = this.meta.disabled;
+	}
+
+	private toggleChecked(e): void {
+		e.target.blur();
+		e.preventDefault();
+		if (this.disabled) { return; }
+		this.isChecked = !this.isChecked;
+		this.currentValue = this.isChecked ? this.value || this.checkedValue : false;
+		if (typeof this.onChange === 'function') {
+			try {
+				this.onChange(this.currentValue);
+			} catch (e) {
+				console.log('ERROR in onChange function');
+			}
+		}
+		this.propagateChange(this.currentValue);
+	}
+
+	public writeValue(value: any): void {
+		this.isChecked = value && value !== 0 && value !== 'false' ? value : false;
+		this.currentValue = this.isChecked ? value : false;
+	}
+}

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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,13 @@
+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[] = ['placeholder'];
+
+}

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

@@ -0,0 +1,6 @@
+<div [ngClass]="{'clr-control-inline' : horizontal}">
+	<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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,19 @@
+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', '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

@@ -0,0 +1,14 @@
+<select *ngIf="!link; else fieldWithLink" clrSelect [formControl]="control">
+	<option *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</option>
+</select>
+
+<ng-template #fieldWithLink>
+	<div 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>
+	</div>
+</ng-template>

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,24 @@
+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[] = ['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/textarea/clr-textarea.component.html

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,13 @@
+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/index.ts

@@ -2,19 +2,21 @@
 // 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 { 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';
 
-export { ClrTextComponent } from './clarity/text/clr-text.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';
 
-
-
 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';

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

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

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

@@ -6,14 +6,14 @@
 >
 
 <ng-template #fieldWithLink>
-	<div class="input-group input-group-sm">
+	<div class="clr-input-group clr-input-group-sm">
 		<input type="text"
 			#field
 			[formControl]="control"
 			[placeholder]="placeholder"
 			class="clr-input"
 		>
-		<div class="input-group-append">
+		<div class="clr-input-group-append">
 			<button class="btn btn-outline" type="button"
 				[routerLink]="[ link.route, field.value ]">{{ link.label || 'Details' }}</button>
 		</div>

src/app/dynaform/dynaform.component.html

@@ -13,7 +13,7 @@
 				<label class="clr-col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
 					{{ meta.rowLabel ? meta.rowLabel : meta.label }}
 					<clr-tooltip *ngIf="control && control.touched && control.invalid">
-						<clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
+						<clr-icon clrTooltipTrigger shape="exclamation-circle" size="24" class="clr-error"></clr-icon>
 						<clr-tooltip-content clrPosition="top-right" clrSize="xs" *clrIfOpen>
 							<span [innerHTML]="getValidationFailureMessage(control, meta)"></span>
 						</clr-tooltip-content>

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

@@ -161,6 +161,14 @@ class RadioField extends OptionsField {
 	type = 'Radio';
 }
 
+class CheckboxField extends SimpleField {
+	type = 'Checkbox';
+	default: any = false;
+	isChecked: boolean;
+	checkedValue: boolean | string = true;
+	rowLabel: null;
+}
+
 class HiddenField extends SimpleField {
 	type = 'Hidden';
 }
@@ -364,7 +372,7 @@ class DisplayField {
 
 export {
 	SimpleField,
-	TextField, TextareaField, PasswordField, SelectField, RadioField, HiddenField,
+	TextField, TextareaField, PasswordField, SelectField, RadioField, CheckboxField, HiddenField,
 	CheckbuttonField, DropdownModifiedInputField, MultilineField,
 	CheckbuttonGroup,
 	TimepickerField, ClrDatepickerField,

src/styles.scss

@@ -85,6 +85,11 @@ input, textarea, select {
 	}
 }
 
+.select:after {
+	display: none;
+}
+
+
 .clr-input, .clr-select, .date-input {
 	color: $col-charcoal;
 	border-bottom:1px lighten($col-charcoal, 20%) solid;
@@ -134,7 +139,7 @@ input, textarea, select {
 
 // CHeckbutton group
 .aba-checkbutton-group {
-	.btn { margin-left: 0; }
+	.btn { margin-left: 0; margin-right: 4px; }
 }
 
 // ---------------------------------------------------------------------------------------------------------------------