Basic styling for Clarity Edition

package.json

@@ -12,34 +12,33 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "^7.1.4",
-		"@angular/common": "^7.1.4",
-		"@angular/compiler": "^7.1.4",
-		"@angular/core": "^7.1.4",
-		"@angular/forms": "^7.1.4",
-		"@angular/http": "^7.1.4",
-		"@angular/platform-browser": "^7.1.4",
-		"@angular/platform-browser-dynamic": "^7.1.4",
-		"@angular/router": "^7.1.4",
-		"@ng-bootstrap/ng-bootstrap": "^4.0.1",
-		"@progress/kendo-angular-dateinputs": "^3.5.2",
-		"@progress/kendo-angular-intl": "^1.6.1",
-		"@progress/kendo-angular-l10n": "^1.3.0",
-		"@progress/kendo-theme-bootstrap": "^2.17.1",
+		"@angular/animations": "^7.2.0",
+		"@angular/common": "^7.2.0",
+		"@angular/compiler": "^7.2.0",
+		"@angular/core": "^7.2.0",
+		"@angular/forms": "^7.2.0",
+		"@angular/http": "^7.2.0",
+		"@angular/platform-browser": "^7.2.0",
+		"@angular/platform-browser-dynamic": "^7.2.0",
+		"@angular/router": "^7.2.0",
+		"@clr/angular": "^1.0.4",
+		"@clr/icons": "^1.0.4",
+		"@clr/ui": "^1.0.4",
+		"@webcomponents/custom-elements": "^1.0.0",
 		"angular-super-validator": "^2.0.0",
-		"core-js": "^2.6.1",
+		"core-js": "^2.6.2",
 		"json-formatter-js": "^2.2.1",
 		"lodash": "^4.17.11",
 		"rxjs": "^6.3.3",
 		"rxjs-compat": "^6.3.3",
-		"zone.js": "^0.8.26"
+		"zone.js": "^0.8.27"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "~0.11.4",
-		"@angular/cli": "~7.1.4",
-		"@angular/compiler-cli": "^7.1.4",
-		"@angular/language-service": "^7.1.4",
-		"@types/jasmine": "~3.3.4",
+		"@angular-devkit/build-angular": "~0.12.1",
+		"@angular/cli": "~7.2.1",
+		"@angular/compiler-cli": "^7.2.0",
+		"@angular/language-service": "^7.2.0",
+		"@types/jasmine": "~3.3.5",
 		"@types/jasminewd2": "~2.0.6",
 		"@types/lodash": "^4.14.119",
 		"@types/node": "~10.12.18",
@@ -51,10 +50,10 @@
 		"karma-coverage-istanbul-reporter": "^2.0.4",
 		"karma-jasmine": "~2.0.1",
 		"karma-jasmine-html-reporter": "^1.4.0",
-		"protractor": "^5.4.1",
+		"protractor": "^5.4.2",
 		"rxjs-tslint": "^0.1.6",
 		"ts-node": "~7.0.1",
-		"tslint": "~5.12.0",
-		"typescript": "3.1.6"
+		"tslint": "~5.12.1",
+		"typescript": "3.2.2"
 	}
 }

src/app/_mock/testfields.v1.ts

@@ -137,19 +137,19 @@ const model = {};
 
 const meta = {
 	basicTextField,
-	styledTextField,
-	textareaField,
-	passwordField,
-	selectField,
-	radioField,
-	disabledTextField,
-	radioFieldHorizontal,
-	checkbutton,
-	dropdownModifiedInput,
-	checkbuttonGroup,
-	timepicker,
-	datepicker,
-	basicTestContainer
+	// styledTextField,
+	// textareaField,
+	// passwordField,
+	// selectField,
+	// radioField,
+	// disabledTextField,
+	// radioFieldHorizontal,
+	// checkbutton,
+	// dropdownModifiedInput,
+	// checkbuttonGroup,
+	// // timepicker,
+	// // datepicker,
+	// basicTestContainer
 };
 
 export { model, meta };

src/app/app.component.html

@@ -1,7 +1,7 @@
-<div class="container mb-4">
-	<div class="row">
-		<div class="col-12 pt-4 pb-2">
-			<h1>NgDynaform</h1>
+<div class="container content-container mb-4">
+	<div class="clr-row">
+		<div class="clr-col-12 pt-4 pb-2">
+			<h1>NgDynaform: Clarity Edition</h1>
 			<p>
 			Dynamic Form Layout Module<br>
 			Load different tests by appending a query param to the URL <b>?test=N</b> (where N is a number between 1 and 12).<br>
@@ -20,8 +20,8 @@
 		</span>
 	</form>
 	-->
-	<div calss="row">
-		<div class="col-12 pt-4 pb-4">
+	<div class="clr-row">
+		<div class="clr-col-12 pt-4 pb-4">
 			<json-formatter [data]="form.value" open="4"></json-formatter>
 		</div>
 	</div>
@@ -33,16 +33,16 @@
 
 <ng-template #testTemplate_NOTWORKING let-control="control" let-meta="meta">
 
-	<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(meta.type)">
-		<label class="col-sm-4" [for]="meta.name" style="color: purple'">{{ meta.label }}</label>
-		<div class="col-sm-8">
+	<div class="form-group clr-row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(meta.type)">
+		<label class="clr-col-sm-4" [for]="meta.name" style="color: purple'">{{ meta.label }}</label>
+		<div class="clr-col-sm-8">
 			<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 		</div>
 	</div>
 	
 	<ng-template #recursiveDynaform>
-		<div class="row pt-3">
-			<h3 class="col-sm-12" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+		<div class="clr-row pt-3">
+			<h3 class="clr-col-sm-12" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
 		</div>
 		<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handleCallback($event)"></app-dynaform>
 	</ng-template>

src/app/app.component.ts

@@ -17,7 +17,7 @@ import * as test12 from './_mock/testfields.v12';
 
 const testdata = [ test1, test2, test3, test4, test5, test6, test7, test8, test9, test10, test11, test12 ];
 
-const defatltTest = 12;
+const defatltTest = 1;
 
 @Component({
 	selector: 'app-root',

src/app/app.module.ts

@@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { DynaformModule } from './dynaform/dynaform.module';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+// import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { AppComponent } from './app.component';
 import { JsonFormatterDirective } from './directives/json-formatter.directive';
 
@@ -17,7 +17,7 @@ import { JsonFormatterDirective } from './directives/json-formatter.directive';
 		ReactiveFormsModule,
 		RouterModule.forRoot([]),
 		DynaformModule,
-		NgbModule.forRoot()
+		// NgbModule.forRoot()
 	],
 	declarations: [
 		AppComponent,

src/app/dynaform/components/index.ts

@@ -12,8 +12,8 @@ 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 { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.component';
-export { TimepickerComponent } from './kendo/timepicker/timepicker.component';
-export { DatepickerComponent } from './kendo/datepicker/datepicker.component';
+// export { TimepickerComponent } from './kendo/timepicker/timepicker.component';
+// export { DatepickerComponent } from './kendo/datepicker/datepicker.component';
 export { ButtonGroupComponent } from './nocontrol/button-group/button-group.component';
 export { HeadingComponent } from './nocontrol/heading/heading.component';
 export { DisplayComponent } from './nocontrol/display/display.component';

src/app/dynaform/components/nocontrol/heading/heading.component.html

@@ -1 +1 @@
-<h3 class="col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (level)">{{ text }}</h3>
+<h3 class="clr-col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (level)">{{ text }}</h3>

src/app/dynaform/dynaform.component.1.html

@@ -11,30 +11,30 @@
 		<ng-container *ngIf="!meta.noLabel; else fullWidth">
 
 			<ng-template *ngIf="isContainer(meta)">
-				<div *ngIf="meta.label" class="row">
-					<h3 class="col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+				<div *ngIf="meta.label" class="clr-row">
+					<h3 class="clr-col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
 				</div>
 				<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handleCallback($event)"></app-dynaform>
 			</ng-template>
 
 			<ng-template *ngIf="isRepeatingContainer(meta)">
 				<div *ngFor="let group of meta.meta">
-					<div *ngIf="group.label" class="row">
-						<h3 class="col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+					<div *ngIf="group.label" class="clr-row">
+						<h3 class="clr-col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
 					</div>
 					<app-dynaform [formGroup]="control" [meta]="group.meta" [template]="template" (call)="handleCallback($event)"></app-dynaform>
 				</div>
 			</ng-template>
 
 			<ng-template *ngIf="isField(meta)">
-				<div class="form-group row" [ngClass]="getRowClass(control, meta)">
-					<label class="col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
+				<div class="form-group clr-row" [ngClass]="getRowClass(control, meta)">
+					<label class="clr-col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
 						{{ meta.rowLabel !== null ? meta.rowLabel : meta.label }}
 						<span *ngIf="control && control.touched && control.invalid" class="fas fa-exclamation-triangle"
 							[ngbTooltip]="getValidationFailureMessage(control, meta)"
 						></span>
 					</label>
-					<div class="col-sm-8">
+					<div class="clr-col-sm-8">
 						<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 					</div>
 				</div>
@@ -43,7 +43,7 @@
 		</ng-container>
 
 		<ng-template #fullWidth>
-			<div class="row" [ngClass]="getRowClass(control, meta.type)">
+			<div class="clr-row" [ngClass]="getRowClass(control, meta.type)">
 				<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 			</div>
 		</ng-template>

src/app/dynaform/dynaform.component.2.html

@@ -10,21 +10,21 @@
 
 		<ng-container *ngIf="!meta.noLabel; else fullWidth">
 
-			<div class="form-group row" *ngIf="isField(meta); else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
-				<label class="col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
+			<div class="form-group clr-row" *ngIf="isField(meta); else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
+				<label class="clr-col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
 					{{ meta.rowLabel ? meta.rowLabel : meta.label }}
 					<span *ngIf="control && control.touched && control.invalid" class="fas fa-exclamation-triangle"
 						[ngbTooltip]="getValidationFailureMessage(control, meta)"
 					></span>
 				</label>
-				<div class="col-sm-8">
+				<div class="clr-col-sm-8">
 					<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 				</div>
 			</div>
 			
 			<ng-template *ngIf="!isRepeatingContainer(meta) ; else recursiveDynaformArray" #recursiveDynaform>
-				<div *ngIf="meta.label" class="row">
-					<h3 class="col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+				<div *ngIf="meta.label" class="clr-row">
+					<h3 class="clr-col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
 				</div>
 				<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handleCallback($event)"></app-dynaform>
 			</ng-template>
@@ -39,7 +39,7 @@
 		</ng-container>
 
 		<ng-template #fullWidth>
-			<div class="row" [ngClass]="getRowClass(control, meta.type)">
+			<div class="clr-row" [ngClass]="getRowClass(control, meta.type)">
 				<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 			</div>
 		</ng-template>

src/app/dynaform/dynaform.component.OLD.html

@@ -10,21 +10,21 @@
 
 		<ng-container *ngIf="!meta.noLabel; else fullWidth">
 
-			<div class="form-group row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
-				<label class="col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
+			<div class="form-group clr-row" *ngIf="meta.type !== 'Container'; else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
+				<label class="clr-col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
 					{{ meta.rowLabel !== mull ? meta.rowLabel : meta.label }}
 					<span *ngIf="control && control.touched && control.invalid" class="fas fa-exclamation-triangle"
 						[ngbTooltip]="getValidationFailureMessage(control, meta)"
 					></span>
 				</label>
-				<div class="col-sm-8">
+				<div class="clr-col-sm-8">
 					<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 				</div>
 			</div>
 			
 			<ng-template #recursiveDynaform>
-				<div *ngIf="meta.label" class="row">
-					<h3 class="col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+				<div *ngIf="meta.label" class="clr-row">
+					<h3 class="clr-col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
 				</div>
 				<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" (call)="handleCallback($event)"></app-dynaform>
 			</ng-template>
@@ -32,7 +32,7 @@
 		</ng-container>
 
 		<ng-template #fullWidth>
-			<div class="row" [ngClass]="getRowClass(control, meta.type)">
+			<div class="clr-row" [ngClass]="getRowClass(control, meta.type)">
 				<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 			</div>
 		</ng-template>

src/app/dynaform/dynaform.component.html

@@ -9,14 +9,17 @@
 	<ng-container *ngIf="meta.type !== 'Hidden'">
 
 		<ng-container *ngIf="!meta.noLabel; else fullWidth">
-			<div class="form-group row" *ngIf="isField(meta); else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
-				<label class="col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
+			<div class="form-group clr-row" *ngIf="isField(meta); else recursiveDynaform" [ngClass]="getRowClass(control, meta)">
+				<label class="clr-col-sm-4" [ngClass]="meta.class" [for]="meta.name" title="">
 					{{ meta.rowLabel ? meta.rowLabel : meta.label }}
-					<span *ngIf="control && control.touched && control.invalid" class="fas fa-exclamation-triangle"
-						[ngbTooltip]="getValidationFailureMessage(control, meta)"
-					></span>
+					<clr-tooltip *ngIf="control && control.touched && control.invalid">
+						<clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
+						<clr-tooltip-content clrPosition="top-right" clrSize="xs" *clrIfOpen>
+							<span [innerHTML]="getValidationFailureMessage(control, meta)"></span>
+						</clr-tooltip-content>
+					</clr-tooltip>
 				</label>
-				<div class="col-sm-8">
+				<div class="clr-col-sm-8">
 					<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 				</div>
 			</div>
@@ -25,10 +28,10 @@
 		<ng-template #recursiveDynaform>
 			<ng-container *ngIf="isRepeatingContainer(meta); else container">
 				<div *ngIf="meta.display === 'SINGLE'" class="row dyna-repeating-container-selector">
-					<div class="col-sm-4 text-right">
+					<div class="clr-col-sm-4 text-right">
 						<b>FOCUS &gt;</b>
 					</div>
-					<div class="col-sm-8">
+					<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'"
@@ -45,8 +48,8 @@
 				<div *ngFor="let container of meta.meta; let i = index" class="dyna-rc-container" [ngClass]="{ 'dyna-rc-display-all': meta.display === 'ALL' }">
 					<ng-container *ngTemplateOutlet="dynaform; context: getRCTemplateContext(meta.name, i)"></ng-container>
 				</div>
-				<div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="row">
-					<div class="col-sm-12">
+				<div *ngIf="meta.showAddControl && meta.display === 'ALL'" class="clr-row">
+					<div class="clr-col-sm-12">
 						<a class="btn btn-sm btn-outline-success" (click)="addRCMember(meta.name)">
 							+ Add New
 						</a>
@@ -60,7 +63,7 @@
 		</ng-template>
 
 		<ng-template #fullWidth>
-			<div class="row" [ngClass]="getRowClass(control, meta.type)">
+			<div class="clr-row" [ngClass]="getRowClass(control, meta.type)">
 				<ng-container dynafield [control]="control" [meta]="meta" (call)="handleCallback($event)"></ng-container>
 			</div>
 		</ng-template>
@@ -70,8 +73,8 @@
 
 
 <ng-template let-control="control" let-meta="meta" #dynaform>
-	<div *ngIf="meta.label" class="row">
-		<h3 class="col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
+	<div *ngIf="meta.label" class="clr-row">
+		<h3 class="clr-col-sm-12 h-dyna" [ngClass]="'h-dyna-' + (path.length + 2)">{{ meta.label }}</h3>
 	</div>
 	<app-dynaform [formGroup]="control" [meta]="meta.meta" [template]="template" [ngClass]="{ 'dyna-hidden': !meta.focussed }" (call)="handleCallback($event)"></app-dynaform>
 </ng-template>

src/app/dynaform/dynaform.module.ts

@@ -3,7 +3,8 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+// import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ClarityModule } from "@clr/angular";
 
 import { DynaformComponent } from './dynaform.component';
 import { DynafieldDirective } from './directives/dynafield.directive';
@@ -13,7 +14,7 @@ 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 { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 
 @NgModule({
 	imports: [
@@ -21,8 +22,9 @@ import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 		FormsModule,
 		ReactiveFormsModule,
 		RouterModule.forChild([]),
-		NgbModule,
-		DateInputsModule
+		// NgbModule,
+		// DateInputsModule
+		ClarityModule
 	],
 	declarations: [
 		DynaformComponent,

src/styles.scss

@@ -1,31 +1,50 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import url("https://use.fontawesome.com/releases/v5.1.0/css/all.css");
-@import "~@progress/kendo-theme-bootstrap/scss/all";
+
+// VARIABLES: Not sure all these are needed - REFACTOR UNUSED OUT
+// --------------
+// Colour palette
+
+$col-blue-lightest: #ebf5f7;
+$col-blue-primary: #0085bc;
+
+$col-charcoal: #444;
+
+
+// --------------------------------------------------------------------------------------------------------------------
+
+// Clarity Dependency SCSS
+@import "../node_modules/@clr/ui/src/utils/dependencies.clarity"; // Includes light theme
+
+// PUT (or import) CLARITY VARIABLE OVERRIDES HERE
+$clr-forms-select-hover-background: $col-blue-lightest;
+
+// Clarity Component SCSS
+@import "../node_modules/@clr/ui/src/utils/components.clarity";
 
 h1 {
-	color: magenta;
-	border-bottom: 4px blueviolet solid;
+	color: $col-blue-primary;
+	border-bottom: 4px $col-blue-primary solid;
 	margin-bottom: 1em;
 }
 
-
 .form-group {
 	margin-bottom: 4px;
 }
 
-div.col-sm-8 {
+div.clr-col-sm-8 {
 	margin-bottom: 2px;
 }
 
-label.col-sm-4 {
-	background-color: lavenderblush;
+label.clr-col-sm-4 {
+	background-color: $col-blue-lightest;
 	border-left: 15px white solid;
 	padding-top: 4px;
+	padding-bottom: 4px;
 	margin-bottom: 2px;
 }
 
-div.col-sm-8 {
+div.clr-col-sm-8 {
 	label {
 		font-size: 0.85em;
 	}
@@ -51,27 +70,30 @@ div.col-sm-8 {
 }
 
 // ---------------------------------------------------------------------------------------------------------------------
-// Input styles
-
-.timepicker {
-	display: inline-block;
-	max-width: 140px;
-}
+// Input styles - Clarity
 
-.datepicker {
-	display: inline-block;
-	max-width: 165px;
+input, textarea, select {
+	&.form-control:focus {
+		box-shadow: none;
+	}
+	&.form-control-sm {
+		font-size:1em;
+	}
 }
 
-.ng-touched.ng-invalid {
-	input[type=text]#{&},
-	input[type=password]#{&},
-	textarea#{&},
-	select#{&}
-	{
-		border-left: 3px red solid;
+.clr-input, .clr-select, .date-input {
+	color: $col-charcoal;
+	border-bottom:1px lighten($col-charcoal, 20%) solid;
+	width: 100%;
+	line-height: 100%;
+	padding-left: 0;
+	padding-right: 0;
+	&:focus {
+		color: $col-charcoal;
+		background-size: 100% 100%;
 	}
 }
+
 // ---------------------------------------------------------------------------------------------------------------------
 // FormGroup Heading Styles
 
@@ -110,6 +132,10 @@ div.col-sm-8 {
 .dyna-rc-container.dyna-rc-display-all, .dyna-rc-control.dyna-rc-display-all {
 	margin-bottom: 7px;
 	border-bottom: 4px #CCC solid;
+	&:first-child {
+		padding-top: 7px;
+		border-top: 4px #CCC solid;
+	}
 }
 
 .dyna-hidden {