Clarity Edition feature maintenance - some minor issues addressed

src/app/_mock/testfields.v1.ts

@@ -16,6 +16,7 @@ const basicTextField = new fmd.TextField({
 
 const styledTextField = new fmd.TextField({
 	name: 'styledTextField',
+	label: 'Styled Text Field, with id and CSS classes applied to wrapper',
 	placeholder: 'With a DOM id and CSS classes applied',
 	class: ['red', 'bgPaleBlue'],
 	id: 'yoyo'

src/app/_mock/testfields.v10.ts

@@ -10,7 +10,7 @@ const model = {
 
 const meta = {
 	aSubGroup: {
-		label: 'This is a relabelled subgroup',
+		label: 'This is a relabelled container subgroup',
 		meta: {
 			aField: { type: 'radio', options: ['Yes', 'No', 'Maybe'], horizontal: 1 },
 			anotherSubGroup: {

src/app/_mock/testfields.v11.ts

@@ -11,7 +11,7 @@ const meta = {
 		meta: {
 			a: {},
 			b: {},
-			c: { value: 6, class: 'short-field' },
+			c: { value: 6, class: 'short-field' }, 
 			d: {},
 			nestedContiner: {
 				label: 'More deeply nested container',

src/app/_mock/testfields.v5.ts

@@ -8,8 +8,7 @@ const model = {
 		b: 'Value 2',
 		c: 'Maybe',
 		d: {
-			e: 444,
-			f: 555,
+			e: true,
 			g: {
 				h: true,
 				i: false

src/app/_mock/testfields.v9.ts

@@ -16,25 +16,7 @@ const testAsyncValidator = (fc: FormControl): Observable<ValidationErrors> => {
 };
 
 
-const model = {
-	// field: '',
-	// field2: '',
-	// dynaformtest: {
-	// 	a: '',
-	// 	valTest: '',
-	// 	b: 'Value 2',
-	// 	c: 'Maybe',
-	// 	d: {
-	// 		e: '',
-	// 		f: 555,
-	// 		g: {
-	// 			h: true,
-	// 			i: false
-	// 		}
-	// 	},
-	// 	z: 'THE END'
-	// }
-};
+const model = {};
 
 const meta = {
 	buttonGroup: { type: 'buttonGroup', label: 'Button Group',

src/app/app.component.ts

@@ -14,8 +14,10 @@ import * as test9 from './_mock/testfields.v9';
 import * as test10 from './_mock/testfields.v10';
 import * as test11 from './_mock/testfields.v11';
 import * as test12 from './_mock/testfields.v12';
+import * as test13 from './_mock/testfields.v13';
+import * as test14 from './_mock/testfields.v14';
 
-const testdata = [ test1, test2, test3, test4, test5, test6, test7, test8, test9, test10, test11, test12 ];
+const testdata = [ test1, test2, test3, test4, test5, test6, test7, test8, test9, test10, test11, test12, test13, test14 ];
 
 const defatltTest = 1;
 

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

@@ -9,7 +9,7 @@
 		<label>{{ label }}</label>
 		<input clrInput type="text" [formControl]="control" spellcheck="false">
 		<div class="input-group-append">
-			<button class="btn btn-outline" type="button" [routerLink]="[ link.route, control.value ]">
+			<button class="btn btn-sm" type="button" [routerLink]="[ link.route, control.value ]">
 				{{ link.label || 'Details' }}
 			</button>
 		</div>

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

@@ -12,9 +12,9 @@
 		<select [formControl]="control" clrSelect #field (change)="handleChange()">
 			<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-control-error>{{ getFirstFailureMsg() }}</clr-control-error>
 	</clr-select-container>
+	<div class="clr-input-group-append">
+		<button class="btn btn-sm" type="button" (click)="navigate(field)">{{ link.label || 'Details' }}</button>
+	</div>
 </ng-template>

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

@@ -24,10 +24,9 @@
 			(keyup)="handleKeyup($event.target.value)"
 			spellcheck="false"
 		>
-		<div class="input-group-append">
-			<button class="btn btn-outline" type="button"
-				[routerLink]="[ link.route, field.value ]">{{ link.label || 'Details' }}</button>
-		</div>
 		<clr-control-error>{{ getFirstFailureMsg() }}</clr-control-error>
 	</clr-input-container>
+	<div class="input-group-append">
+		<button class="btn btn-sm" type="button" [routerLink]="[ link.route, field.value ]">{{ link.label || 'Details' }}</button>
+	</div>
 </ng-template>

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

@@ -1,6 +1,7 @@
 <div [ngClass]="extraClass">
+	<label *ngIf="label" [ngClass]="{ 'label-error': control.touched && control.invalid }">{{ label }}</label>
 	<clr-dropdown>
-		<button class="btn btn-sm btn-outline-secondary" clrDropdownTrigger>
+		<button class="btn btn-sm" clrDropdownTrigger>
 			{{ selectedModifier }}
 			<clr-icon shape="caret down"></clr-icon>
 		</button>
@@ -9,4 +10,5 @@
 		</clr-dropdown-menu>
 	</clr-dropdown>
 	<input class="clr-input" [(ngModel)]="displayedValue" (change)="inputChange()">
+	<clr-control-error>{{ getFirstFailureMsg() }}</clr-control-error>
 </div>

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

@@ -19,7 +19,7 @@ import { FriendlyValidationErrorsService } from './../../../services/friendly-va
 })
 export class DropdownModifiedInputComponent extends CustomInputComponent implements OnInit {
 
-	exposeMetaInTemplate: string[] = ['modifiers', 'transform', 'placeholder'];
+	exposeMetaInTemplate: string[] = ['label', 'modifiers', 'transform', 'placeholder'];
 
 	modifiers: string[];
 	transform: ValueTransformer = {

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

@@ -1,3 +1,4 @@
+<label *ngIf="label" [ngClass]="{ 'label-error': control.touched && control.invalid }">{{ label }}</label>
 <ng-container *ngFor="let line of linesArr; let i = index;  trackBy: trackByFn">
 	<input type="text"
 		class="clr-input"
@@ -5,4 +6,5 @@
 		[maxlength]="maxLineLength"
 		(blur)="updateValue()"
 	>
-</ng-container>
+</ng-container>
+<clr-control-error>{{ getFirstFailureMsg() }}</clr-control-error>

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

@@ -6,7 +6,7 @@
 	</app-checkbox>
 </div>
 <div *ngIf="showAllOrNone" class="buttongroup">
-	<a (click)="selectAll($event)" href class="btn btn-sm btn-outline-primary">Select All</a> 
-	<a (click)="selectNone($event)" href class="btn btn-sm btn-outline-primary">Select None</a>
+	<a (click)="selectAll($event)" href class="btn btn-sm">Select All</a> 
+	<a (click)="selectNone($event)" href class="btn btn-sm">Select None</a>
 </div>
 

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

@@ -6,7 +6,7 @@
 	</app-checkbutton>
 </div>
 <div *ngIf="showAllOrNone" class="buttongroup">
-	<a (click)="selectAll($event)" href class="btn btn-sm btn-outline-primary">Select All</a> 
-	<a (click)="selectNone($event)" href class="btn btn-sm btn-outline-primary">Select None</a>
+	<a (click)="selectAll($event)" href class="btn btn-sm">Select All</a> 
+	<a (click)="selectNone($event)" href class="btn btn-sm">Select None</a>
 </div>
 

src/app/dynaform/dynaform.component.html

@@ -27,12 +27,12 @@
 					<div class="clr-col-sm-8">
 						<a *ngFor="let container of meta.meta; let i = index"
 							class="btn btn-sm"
-							[ngClass]="container.focussed ? 'btn-primary' : 'btn-outline-primary'"
+							[ngClass]="container.focussed ? 'btn-primary' : ''"
 							(click)="focusContainer(meta.name, i)">
 							{{ getRCLabel(meta.name, i) }}
 						</a>
 						<a *ngIf="meta.showAddControl"
-							class="btn btn-sm btn-outline-success"
+							class="btn btn-sm btn-success"
 							[ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
 							(click)="addRCMember(meta.name)">
 							+ Add New
@@ -50,7 +50,7 @@
 				</div>
 				<div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="clr-row">
 					<div class="clr-col-sm-12">
-						<a class="btn btn-sm btn-outline-success"
+						<a class="btn btn-sm btn-success"
 							[ngClass]="{ 'btn-disabled': !addRCMemberAllowed(meta.name) }"
 							(click)="addRCMember(meta.name)">
 							+ Add New

src/styles.scss

@@ -23,7 +23,7 @@ $clr-forms-select-hover-background: $col-blue-lightest;
 
 .central-col {
 	max-width: 80%;
-	margin: 0 auto;
+	margin: 0 auto 2rem;
 }
 
 h1 {
@@ -74,9 +74,23 @@ div.clr-col-sm-8 {
 	}
 }
 
+.short-field {
+	input {
+		background-color: yellow !important;
+		border-bottom-color: magenta;
+		width: 50px;
+		padding-left: 10px;
+	}
+}
+
 // ---------------------------------------------------------------------------------------------------------------------
 // FormGroup Heading Styles
 
+.h-dyna-2, .h-dyna-3, .h-dyna-d {
+	color: $col-blue-primary;
+	border-bottom: 1px $col-blue-primary dotted;
+}
+
 .h-dyna-2 {
 	font-size: 1.5em;
 }
@@ -129,8 +143,18 @@ input, textarea, select {
 	}
 }
 
-.dropdownmodifiedinput
-{
+.clr-radio-wrapper ~ .clr-subtext {
+	display: inline;
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+//Custom Controls
+
+.dropdownmodifiedinput {
+	label {
+		display: block;
+		font-weight: 600;
+	}
 	.clr-input {
 		margin-left: 5px;
 		width: auto;
@@ -141,7 +165,7 @@ input, textarea, select {
 	}
 }
 
-.row-checkbutton, .row-checkbuttongroup, .row-datepicker, .row-dropdownmodifiedinput {
+.row-buttongroup, .row-checkbutton, .row-checkbuttongroup, .row-datepicker, .row-dropdownmodifiedinput {
 	margin-top: 1rem;
 }
 
@@ -190,10 +214,18 @@ input, textarea, select {
 	span {
 		display: inline-block;
 		margin-left: 0.5em;
-		color: red;
+		color: firebrick;
 	}
 }
 
+.label-error {
+	color: firebrick;
+}
+
+clr-control-error {
+	color: firebrick !important;
+}
+
 // ---------------------------------------------------------------------------------------------------------------------
 // Debugging