Beginning to work with Clarity - some rough edges

angular.json

@@ -21,6 +21,7 @@
               "src/favicon.ico"
             ],
             "styles": [
+              "node_modules/@clr/icons/clr-icons.min.css",
               "src/styles.scss"
             ],
             "scripts": []

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,
+	styledTextField,
+	textareaField,
+	passwordField,
+	selectField,
+	radioField,
+	disabledTextField,
+	radioFieldHorizontal,
+	checkbutton,
+	dropdownModifiedInput,
+	checkbuttonGroup,
 	// // timepicker,
 	// // datepicker,
-	// basicTestContainer
+	basicTestContainer
 };
 
 export { model, meta };

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

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

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

@@ -0,0 +1,13 @@
+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/custom/checkbutton/checkbutton.component.html

@@ -1,12 +1,12 @@
 <a (click)="toggleChecked($event)"
-	class="btn btn-sm lmp-checkbutton"
+	class="btn btn-sm"
 	[ngClass]="{
-		'btn-success': isChecked,
-		'lmp-btn-greyed': !isChecked,
-		'lmp-btn-disabled': disabled
+		'btn-primary': isChecked,
+		'aba-btn-greyed': !isChecked,
+		'aba-btn-disabled': disabled
 	}"
 	href
 	>
-	<span class="k-icon" [ngClass]="{ 'k-i-check': isChecked, 'k-i-x': !isChecked }"></span>
+	<clr-icon shape="check" size="12"></clr-icon>
 	{{ label }}
-</a>
+</a>

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

@@ -1,14 +1,14 @@
-.lmp-checkbutton {
+.aba-checkbutton {
 	padding: 3px 9px 3px 6px;
 	margin: 0 3px 3px 0;
 }
 
-.lmp-btn-greyed {
+.aba-btn-greyed {
 	color: white;
 	background-color: #BBB;
 }
 
-.lmp-btn-disabled, .lmp-btn-disabled:active {
+.aba-btn-disabled, .aba-btn-disabled:active {
 	color: #F3F3F3;
 	background-color: #E3E3E3;
 	border-color: #E3E3E3;

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

@@ -1,9 +1,12 @@
-<div class="input-group input-group-sm" [ngClass]="extraClass">
-	<div class="input-group-prepend" ngbDropdown>
-		<button class="btn btn-outline-secondary" ngbDropdownToggle>{{ selectedModifier }}</button>
-		<div ngbDropdownMenu>
-			<button *ngFor="let modifier of modifiers" class="dropdown-item" (click)="modifierChange(modifier)">{{ modifier }}</button>
-		</div>
-	</div>
-	<input class="form-control" [(ngModel)]="displayedValue" (change)="inputChange()">
+<div [ngClass]="extraClass">
+	<clr-dropdown>
+		<button class="btn btn-sm btn-outline-secondary" clrDropdownTrigger>
+			{{ selectedModifier }}
+			<clr-icon shape="caret down"></clr-icon>
+		</button>
+		<clr-dropdown-menu *clrIfOpen>
+			<button *ngFor="let modifier of modifiers" (click)="modifierChange(modifier)" clrDropdownItem>{{ modifier }}</button>
+		</clr-dropdown-menu>
+	</clr-dropdown>
+	<input class="clr-input" [(ngModel)]="displayedValue" (change)="inputChange()">
 </div>

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

@@ -1,4 +1,4 @@
-<div class="lmp-checkbutton-group" [formGroup]="formGroup">
+<div class="aba-checkbutton-group" [formGroup]="formGroup">
 	<app-checkbutton *ngFor="let groupMember of controlNames; let i = index"
 		[formControlName]="groupMember"
 		[meta]="childMetaArray[i]"

src/app/dynaform/components/index.ts

@@ -8,6 +8,11 @@ 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 { 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/password/password.component.html

@@ -1,5 +1,5 @@
 <input type="password"
 	[formControl]="control"
 	[placeholder]="placeholder"
-	class="form-control form-control-sm"
+	class="clr-input"
 >

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

@@ -1,4 +1,4 @@
-<div *ngFor="let opt of options; let i = index;" class="custom-control custom-radio" [ngClass]="{'custom-control-inline' : horizontal}">
-	<input type="radio" [formControl]="control" [value]="opt.value" [name]="prefix" [id]="prefix + i" class="custom-control-input">
+<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>

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

@@ -1,10 +1,10 @@
-<select *ngIf="!link; else fieldWithLink" [formControl]="control" class="custom-select custom-select-sm">
+<select *ngIf="!link; else fieldWithLink" [formControl]="control" class="clr-select">
 	<option *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</option>
 </select>
 
 <ng-template #fieldWithLink>
 	<div class="input-group input-group-sm">
-		<select [formControl]="control" #field class="custom-select custom-select-sm">
+		<select [formControl]="control" #field class="clr-select">
 			<option *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</option>
 		</select>
 		<div class="input-group-append">

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

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

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

@@ -1,6 +1,6 @@
 <textarea
 	[formControl]="control"
 	[placeholder]="placeholder"
-	class="form-control form-control-sm"
+	class="clr-textarea"
 	rows="5"
 ></textarea>

src/styles.scss

@@ -94,6 +94,13 @@ input, textarea, select {
 	}
 }
 
+.dropdownmodifiedinput .clr-input {
+	margin-left: 5px;
+	clear: none;
+	width: 70%;
+	overflow: hidden; // Trigger a block formatting context (BFC) so input takes up remaining width
+}
+
 // ---------------------------------------------------------------------------------------------------------------------
 // FormGroup Heading Styles
 
@@ -116,6 +123,11 @@ input, textarea, select {
 	margin-right: 4px;
 }
 
+// CHeckbutton group
+.aba-checkbutton-group {
+	.btn { margin-left: 0; margin-right: 0; }
+}
+
 // ---------------------------------------------------------------------------------------------------------------------
 // Repeating Comtainers (series of buttons alowwing user to focus a repeating container member)