3 files changed, 110 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
new file mode 100644
index 000000000..f7c4894b2
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html
@@ -0,0 +1,16 @@
+<div>
+  <div class="details-item" *ngIf="data != null && form != null">
+    <label [ngClass]="{'required': data.isRequired()}"
+           for="{{data?.dataTestId}}">{{data?.displayName}}:</label>
+    <angular2-multiselect id="{{data?.dataTestId}}"
+                          [attr.data-tests-id]="data?.dataTestId"
+                          [formControl]="form.controls[data.controlName]"
+                          [(ngModel)]="data.selectedItems"
+                          [data]="data?.options$"
+                          [settings]="data?.settings"
+                          title="{{data.tooltip}}"
+                          [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}">
+    </angular2-multiselect>
+  </div>
+</div>
+
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts
new file mode 100644
index 000000000..81c8d4679
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts
@@ -0,0 +1,74 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'
+import {CommonModule} from "@angular/common";
+import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
+import {
+  ValidatorModel,
+  ValidatorOptions
+} from "../../../../models/formControlModels/formControl.model";
+import {FormControlMessageErrorComponent} from "../../errorMessage/formControlMessageError.component";
+import {BrowserModule} from "@angular/platform-browser";
+import {MultiselectFormControlComponent} from "./multiselect.formControl.component";
+import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model";
+import { of } from "rxjs";
+describe('Dropdown Form Control Component', () => {
+  let component: MultiselectFormControlComponent;
+  let fixture: ComponentFixture<MultiselectFormControlComponent>;
+  let fb: FormBuilder;
+
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      imports: [CommonModule, BrowserModule, ReactiveFormsModule],
+      providers: [FormBuilder],
+      declarations: [MultiselectFormControlComponent, FormControlMessageErrorComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+    await TestBed.compileComponents();
+
+    fixture = TestBed.createComponent(MultiselectFormControlComponent);
+    component = fixture.componentInstance;
+    fb = TestBed.get(FormBuilder);
+
+  })().then(done).catch(done.fail));
+
+  test('component should initialize basic parameters', () => {
+      component.data = new MultiselectFormControl({
+        displayName: "display Name",
+        validations: [new ValidatorModel(ValidatorOptions.required, 'is required')],
+        dataTestId: "data-test-id",
+        placeHolder: "place holder",
+        controlName: 'testDropdown',
+        options: of([
+          'option1',
+          'option2',
+          'option3',
+          'onBlur'
+        ])
+      });
+
+      component.data.hasErrors = function () {
+        return this.formGroup.controls[this.controlName].touched && this.formGroup.controls[this.controlName].errors ? ['error-style'] : [];
+      };
+
+      component.data.onBlur = function () {
+        component.form.controls['testDropdown'].setValue('onBlur');
+      };
+
+      component.form = fb.group({
+        'testDropdown': new FormControl({
+          value: component.data.value,
+          disabled: false
+        }, Validators.compose(component.data.validations.map(item => item.validator)))
+      });
+
+      component.form.controls['testDropdown'].setValue('');
+      expect(component.form.controls['testDropdown'].errors.required).toBeTruthy();
+      component.form.controls['testDropdown'].setValue('option2');
+      expect(component.form.controls['testDropdown'].errors).toBeFalsy();
+      component.data.onBlur();
+      expect(component.form.controls['testDropdown'].value).toEqual('onBlur');
+      expect(component.form.controls['testDropdown'].errors).toBeFalsy();
+    }
+  )
+});
+
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
new file mode 100644
index 000000000..4b98c7e26
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts
@@ -0,0 +1,20 @@
+import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
+import {FormGroup} from "@angular/forms";
+import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model";
+
+@Component({
+  selector: 'multiselect-form-control',
+  templateUrl: './multiselect.formControl.component.html'
+})
+export class MultiselectFormControlComponent implements OnChanges{
+  @Input() data: MultiselectFormControl = null;
+  @Input() form: FormGroup = null;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["data"] !== undefined && changes["data"].currentValue !== changes["data"].previousValue && changes["data"].firstChange) {
+      if(this.data.onInit){
+        this.data.onInit(this.data, this.form);
+      }
+    }
+  }
+}