Merge branch 'master' into angular-cli

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

@@ -76,6 +76,8 @@ import { DsDynamicFormArrayComponent } from './models/array-group/dynamic-form-a
 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';
+import { DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH } from './models/custom-switch/custom-switch.model';
+import { CustomSwitchComponent } from './models/custom-switch/custom-switch.component';
 import { map, startWith, switchMap, find } from 'rxjs/operators';
 import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
 import { SearchResult } from '../../../search/search-result.model';
@@ -158,6 +160,9 @@ export function dsDynamicFormControlMapFn(model: DynamicFormControlModel): Type<
     case DYNAMIC_FORM_CONTROL_TYPE_DISABLED:
       return DsDynamicDisabledComponent;
 
+    case DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH:
+      return CustomSwitchComponent;
+
     default:
       return null;
   }
@@ -293,6 +298,10 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
     }
   }
 
+  get isCheckbox(): boolean {
+    return this.model.type === DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX || this.model.type === DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH;
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (changes) {
       super.ngOnChanges(changes);

src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html

@@ -0,0 +1,20 @@
+<div [formGroup]="group" class="form-check custom-control custom-switch" [class.disabled]="model.disabled">
+  <input type="checkbox" class="form-check-input custom-control-input"
+         [checked]="model.checked"
+         [class.is-invalid]="showErrorMessages"
+         [dynamicId]="bindId && model.id"
+         [formControlName]="model.id"
+         [indeterminate]="model.indeterminate"
+         [name]="model.name"
+         [ngClass]="getClass('element', 'control')"
+         [required]="model.required"
+         [tabindex]="model.tabIndex"
+         [value]="model.value"
+         (blur)="onBlur($event)"
+         (change)="onChange($event)"
+         (focus)="onFocus($event)"/>
+  <label class="form-check-label custom-control-label" [for]="bindId && model.id">
+    <span [innerHTML]="model.label"
+          [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></span>
+  </label>
+</div>

src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.spec.ts

@@ -0,0 +1,99 @@
+import { DynamicFormsCoreModule, DynamicFormService } from '@ng-dynamic-forms/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TextMaskModule } from 'angular2-text-mask';
+import { By } from '@angular/platform-browser';
+import { DynamicCustomSwitchModel } from './custom-switch.model';
+import { CustomSwitchComponent } from './custom-switch.component';
+
+describe('CustomSwitchComponent', () => {
+
+  const testModel = new DynamicCustomSwitchModel({id: 'switch'});
+  const formModel = [testModel];
+  let formGroup: FormGroup;
+  let fixture: ComponentFixture<CustomSwitchComponent>;
+  let component: CustomSwitchComponent;
+  let debugElement: DebugElement;
+  let testElement: DebugElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ReactiveFormsModule,
+        NoopAnimationsModule,
+        TextMaskModule,
+        DynamicFormsCoreModule.forRoot()
+      ],
+      declarations: [CustomSwitchComponent]
+
+    }).compileComponents().then(() => {
+      fixture = TestBed.createComponent(CustomSwitchComponent);
+
+      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.group instanceof FormGroup).toBe(true);
+    expect(component.model instanceof DynamicCustomSwitchModel).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);
+  });
+
+  it('should have an input element', () => {
+    expect(testElement instanceof DebugElement).toBe(true);
+  });
+
+  it('should have an input element of type checkbox', () => {
+    expect(testElement.nativeElement.getAttribute('type')).toEqual('checkbox');
+  });
+
+  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/custom-switch/custom-switch.component.ts

@@ -0,0 +1,55 @@
+import { DynamicNGBootstrapCheckboxComponent } from '@ng-dynamic-forms/ui-ng-bootstrap';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { DynamicCustomSwitchModel } from './custom-switch.model';
+
+@Component({
+  selector: 'ds-custom-switch',
+  styleUrls: ['./custom-switch.component.scss'],
+  templateUrl: './custom-switch.component.html',
+})
+/**
+ * Component displaying a custom switch usable in dynamic forms
+ * Extends from bootstrap's checkbox component but displays a switch instead
+ */
+export class CustomSwitchComponent extends DynamicNGBootstrapCheckboxComponent {
+  /**
+   * Use the model's ID for the input element
+   */
+  @Input() bindId = true;
+
+  /**
+   * The formgroup containing this component
+   */
+  @Input() group: FormGroup;
+
+  /**
+   * The model used for displaying the switch
+   */
+  @Input() model: DynamicCustomSwitchModel;
+
+  /**
+   * Emit an event when the input is selected
+   */
+  @Output() selected = new EventEmitter<number>();
+
+  /**
+   * Emit an event when the input value is removed
+   */
+  @Output() remove = new EventEmitter<number>();
+
+  /**
+   * Emit an event when the input is blurred out
+   */
+  @Output() blur = new EventEmitter<any>();
+
+  /**
+   * Emit an event when the input value changes
+   */
+  @Output() change = new EventEmitter<any>();
+
+  /**
+   * Emit an event when the input is focused
+   */
+  @Output() focus = new EventEmitter<any>();
+}

src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model.ts

@@ -0,0 +1,20 @@
+import {
+  DynamicCheckboxModel,
+  DynamicCheckboxModelConfig,
+  DynamicFormControlLayout,
+  serializable
+} from '@ng-dynamic-forms/core';
+
+export const DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH = 'CUSTOM_SWITCH';
+
+/**
+ * Model class for displaying a custom switch input in a form
+ * Functions like a checkbox, but displays a switch instead
+ */
+export class DynamicCustomSwitchModel extends DynamicCheckboxModel {
+  @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_CUSTOM_SWITCH;
+
+  constructor(config: DynamicCheckboxModelConfig, layout?: DynamicFormControlLayout) {
+    super(config, layout);
+  }
+}