Added DsDatePickerInlineComponent

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts

@@ -31,7 +31,6 @@ import {
   DynamicNGBootstrapCalendarComponent,
   DynamicNGBootstrapCheckboxComponent,
   DynamicNGBootstrapCheckboxGroupComponent,
-  DynamicNGBootstrapDatePickerComponent,
   DynamicNGBootstrapInputComponent,
   DynamicNGBootstrapRadioGroupComponent,
   DynamicNGBootstrapSelectComponent,
@@ -65,6 +64,7 @@ import { DsDynamicLookupComponent } from './models/lookup/dynamic-lookup.compone
 import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-array.component';
 import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-group.component';
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
+import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
 
 describe('DsDynamicFormControlContainerComponent test suite', () => {
 
@@ -263,7 +263,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     expect(testFn(formModel[0])).toEqual(DynamicNGBootstrapCheckboxComponent);
     expect(testFn(formModel[1])).toEqual(DynamicNGBootstrapCheckboxGroupComponent);
     expect(testFn(formModel[2])).toBeNull();
-    expect(testFn(formModel[3])).toEqual(DynamicNGBootstrapDatePickerComponent);
+    expect(testFn(formModel[3])).toEqual(DsDatePickerInlineComponent);
     (formModel[3] as DynamicDatePickerModel).inline = true;
     expect(testFn(formModel[3])).toEqual(DynamicNGBootstrapCalendarComponent);
     expect(testFn(formModel[4])).toBeNull();

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts

@@ -40,13 +40,13 @@ import {
   DynamicNGBootstrapCalendarComponent,
   DynamicNGBootstrapCheckboxComponent,
   DynamicNGBootstrapCheckboxGroupComponent,
-  DynamicNGBootstrapDatePickerComponent,
   DynamicNGBootstrapInputComponent,
   DynamicNGBootstrapRadioGroupComponent,
   DynamicNGBootstrapSelectComponent,
   DynamicNGBootstrapTextAreaComponent,
   DynamicNGBootstrapTimePickerComponent
 } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
 
 import { DYNAMIC_FORM_CONTROL_TYPE_TYPEAHEAD } from './models/typeahead/dynamic-typeahead.model';
 import { DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN } from './models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
@@ -67,6 +67,7 @@ import { DsDynamicFormGroupComponent } from './models/form-group/dynamic-form-gr
 import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-array.component';
 import { DsDynamicRelationGroupComponent } from './models/relation-group/dynamic-relation-group.components';
 import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from './models/relation-group/dynamic-relation-group.model';
+import { DsDatePickerInlineComponent } from './models/date-picker-inline/dynamic-date-picker-inline.component';
 
 export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<DynamicFormControl> | null {
   switch (model.type) {
@@ -83,7 +84,7 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<
     case DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER:
       const datepickerModel = model as DynamicDatePickerModel;
 
-      return datepickerModel.inline ? DynamicNGBootstrapCalendarComponent : DynamicNGBootstrapDatePickerComponent;
+      return datepickerModel.inline ? DynamicNGBootstrapCalendarComponent : DsDatePickerInlineComponent;
 
     case DYNAMIC_FORM_CONTROL_TYPE_GROUP:
       return DsDynamicFormGroupComponent;
@@ -168,7 +169,8 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   constructor(
     protected componentFactoryResolver: ComponentFactoryResolver,
     protected layoutService: DynamicFormLayoutService,
-    protected validationService: DynamicFormValidationService
+    protected validationService: DynamicFormValidationService,
+    protected translateService: TranslateService
   ) {
 
     super(componentFactoryResolver, layoutService, validationService);
@@ -177,6 +179,11 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   ngOnChanges(changes: SimpleChanges) {
     if (changes) {
       super.ngOnChanges(changes);
+      if (this.model && this.model.placeholder) {
+        this.translateService.get(this.model.placeholder).subscribe((placeholder) => {
+          this.model.placeholder = placeholder;
+        })
+      }
     }
   }
 
@@ -188,7 +195,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   }
 
   ngAfterViewInit() {
-    this.showErrorMessagesPreviousStage = this.showErrorMessages
+    this.showErrorMessagesPreviousStage = this.showErrorMessages;
   }
 
   /**

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html

@@ -0,0 +1,39 @@
+<div [formGroup]="group" class="input-group">
+
+    <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
+           [class.is-invalid]="showErrorMessages"
+           [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
+           [dynamicId]="bindId && model.id"
+           [firstDayOfWeek]="model.getAdditional('firstDayOfWeek', config['firstDayOfWeek'])"
+           [formControlName]="model.id"
+           [maxDate]="model.max"
+           [minDate]="model.min"
+           [name]="model.name"
+           [navigation]="model.getAdditional('navigation', config['navigation'])"
+           [ngClass]="getClass('element', 'control')"
+           [outsideDays]="model.getAdditional('outsideDays', config['outsideDays'])"
+           [placeholder]="model.placeholder"
+           [placement]="model.getAdditional('placement', 'bottom-left')"
+           [showWeekdays]="model.getAdditional('showWeekdays', config['showWeekdays'])"
+           [showWeekNumbers]="model.getAdditional('showWeekNumbers', config['showWeekNumbers'])"
+           [startDate]="model.focusedDate"
+           (blur)="onBlur($event)"
+           (change)="onChange($event)"
+           (focus)="onFocus($event)">
+
+    <div class="input-group-append">
+
+        <button class="btn btn-outline-secondary"
+                type="button"
+                [class.disabled]="model.disabled"
+                [disabled]="model.disabled"
+                (click)="datepicker.toggle()">
+
+            <i *ngIf="model.toggleIcon" class="{{model.toggleIcon}}" aria-hidden="true"></i>
+            <span *ngIf="model.toggleLabel">{{ model.toggleLabel }}</span>
+
+        </button>
+
+    </div>
+
+</div>

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.spec.ts

@@ -0,0 +1,107 @@
+import { TestBed, async, inject, ComponentFixture } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
+import { TextMaskModule } from 'angular2-text-mask';
+import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
+import { DynamicDatePickerModel, DynamicFormsCoreModule, DynamicFormService } from '@ng-dynamic-forms/core';
+import { DsDatePickerInlineComponent } from './dynamic-date-picker-inline.component';
+
+describe('DsDatePickerInlineComponent test suite', () => {
+
+    const testModel = new DynamicDatePickerModel({id: 'datepicker'});
+    const formModel = [testModel];
+    let formGroup: FormGroup;
+    let fixture: ComponentFixture<DsDatePickerInlineComponent>;
+    let component: DsDatePickerInlineComponent;
+    let debugElement: DebugElement;
+    let testElement: DebugElement;
+
+    beforeEach(async(() => {
+
+        TestBed.configureTestingModule({
+
+            imports: [
+                ReactiveFormsModule,
+                NoopAnimationsModule,
+                TextMaskModule,
+                NgbDatepickerModule.forRoot(),
+                DynamicFormsCoreModule.forRoot()
+            ],
+            declarations: [DsDatePickerInlineComponent]
+
+        }).compileComponents().then(() => {
+
+            fixture = TestBed.createComponent(DsDatePickerInlineComponent);
+
+            component = fixture.componentInstance;
+            debugElement = fixture.debugElement;
+        });
+    }));
+
+    beforeEach(inject([DynamicFormService], (service: DynamicFormService) => {
+
+        formGroup = service.createFormGroup(formModel);
+
+        component.group = formGroup;
+        component.model = testModel;
+
+        fixture.detectChanges();
+
+        testElement = debugElement.query(By.css(`input[id='${testModel.id}']`));
+    }));
+
+    it('should initialize correctly', () => {
+
+        expect(component.bindId).toBe(true);
+        expect(component.control instanceof FormControl).toBe(true);
+        expect(component.group instanceof FormGroup).toBe(true);
+        expect(component.model instanceof DynamicDatePickerModel).toBe(true);
+
+        expect(component.blur).toBeDefined();
+        expect(component.change).toBeDefined();
+        expect(component.focus).toBeDefined();
+
+        expect(component.onBlur).toBeDefined();
+        expect(component.onChange).toBeDefined();
+        expect(component.onFocus).toBeDefined();
+
+        expect(component.hasFocus).toBe(false);
+        expect(component.isValid).toBe(true);
+        expect(component.isInvalid).toBe(false);
+        expect(component.showErrorMessages).toBe(false);
+    });
+
+    it('should have an input element', () => {
+
+        expect(testElement instanceof DebugElement).toBe(true);
+    });
+
+    it('should emit blur event', () => {
+
+        spyOn(component.blur, 'emit');
+
+        component.onBlur(null);
+
+        expect(component.blur.emit).toHaveBeenCalled();
+    });
+
+    it('should emit change event', () => {
+
+        spyOn(component.change, 'emit');
+
+        component.onChange(null);
+
+        expect(component.change.emit).toHaveBeenCalled();
+    });
+
+    it('should emit focus event', () => {
+
+        spyOn(component.focus, 'emit');
+
+        component.onFocus(null);
+
+        expect(component.focus.emit).toHaveBeenCalled();
+    });
+});

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { NgbDatepicker, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
+import {
+  DynamicDatePickerModel,
+  DynamicFormControlComponent,
+  DynamicFormLayout,
+  DynamicFormLayoutService,
+  DynamicFormValidationService
+} from '@ng-dynamic-forms/core';
+
+@Component({
+  selector: 'ds-date-picker-inline',
+  templateUrl: './dynamic-date-picker-inline.component.html'
+})
+export class DsDatePickerInlineComponent extends DynamicFormControlComponent {
+
+  @Input() bindId = true;
+  @Input() group: FormGroup;
+  @Input() layout: DynamicFormLayout;
+  @Input() model: DynamicDatePickerModel;
+
+  @Output() blur: EventEmitter<any> = new EventEmitter();
+  @Output() change: EventEmitter<any> = new EventEmitter();
+  @Output() focus: EventEmitter<any> = new EventEmitter();
+
+  @ViewChild(NgbDatepicker) ngbDatePicker: NgbDatepicker;
+
+  constructor(protected layoutService: DynamicFormLayoutService,
+              protected validationService: DynamicFormValidationService,
+              public config: NgbDatepickerConfig) {
+
+    super(layoutService, validationService);
+  }
+}

src/app/shared/shared.module.ts

@@ -89,6 +89,7 @@ import { ObjectKeysPipe } from './utils/object-keys-pipe';
 import { MomentModule } from 'ngx-moment';
 import { AuthorityConfidenceStateDirective } from './authority-confidence/authority-confidence-state.directive';
 import { MenuModule } from './menu/menu.module';
+import { DsDatePickerInlineComponent } from './form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -189,7 +190,8 @@ const ENTRY_COMPONENTS = [
   DsDynamicRelationGroupComponent,
   DsDatePickerComponent,
   DsDynamicFormGroupComponent,
-  DsDynamicFormArrayComponent
+  DsDynamicFormArrayComponent,
+  DsDatePickerInlineComponent
 ];
 
 const PROVIDERS = [