PArking for the evening

src/app/_mock/testfields.v1.ts

@@ -148,7 +148,7 @@ const meta = {
 	dropdownModifiedInput,
 	checkbuttonGroup,
 	// // timepicker,
-	// // datepicker,
+	datepicker,
 	basicTestContainer
 };
 

src/app/_mock/testfields.v2.ts

@@ -156,7 +156,7 @@ const meta = {
 	checkbutton,
 	dropdownModifiedInput,
 	checkbuttonGroup,
-	timepicker,
+	// timepicker,
 	datepicker,
 	container
 };

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

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

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

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

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

@@ -1,6 +1,6 @@
 <ng-container *ngFor="let line of linesArr; let i = index;  trackBy: trackByFn">
 	<input type="text"
-		class="form-control form-control-sm"
+		class="clr-input"
 		[(ngModel)]="linesArr[i]"
 		[maxlength]="maxLineLength"
 		(blur)="updateValue()"

src/app/dynaform/components/index.ts

@@ -13,12 +13,15 @@ export { ClrTextComponent } from './clarity/text/clr-text.component';
 
 
 
+export { DatepickerComponent } 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';
 export { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.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/kendo/datepicker/datepicker.component.html

@@ -1,3 +0,0 @@
-<kendo-datepicker class="form-control form-control-sm"
-	[placeholder]="placeholder"
-></kendo-datepicker>

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

@@ -1,7 +0,0 @@
-<kendo-timepicker class="form-control form-control-sm"
-	[formControl]="control"
-	[format]="format"
-	[steps]="steps"
-	[placeholder]="placeholder"
-	>
-</kendo-timepicker>

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

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

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

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

src/styles.scss

@@ -96,8 +96,7 @@ input, textarea, select {
 
 .dropdownmodifiedinput .clr-input {
 	margin-left: 5px;
-	clear: none;
-	width: 70%;
+	width: auto;
 	overflow: hidden; // Trigger a block formatting context (BFC) so input takes up remaining width
 }