Merge "Upgrade to Angular 8"

54 files changed, 1343 insertions, 84 deletions

diff --git a/vid-webpack-master/cypress/integration/iFrames/drawingBoard.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/drawingBoard.e2e.ts
index cf870b7b9..078e5578b 100644
--- a/vid-webpack-master/cypress/integration/iFrames/drawingBoard.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/drawingBoard.e2e.ts
@@ -350,7 +350,7 @@ describe('Drawing board', function () {
         cy.drawingBoardTreeClickOnContextMenuOptionByName('Remove');
 
         cy.get('.title').contains('Remove VNF');
-        cy.get('.sdc-button').contains('Remove VNF').click();
+        cy.get('.custom-button').contains('Remove VNF').click();
         // assert vfModules are disabled after remove parent vnf
         cy.get('.tree-node-disabled div[data-tests-id="node-2017488_pasqualevpe0..2017488PasqualeVpe..PASQUALE_vRE_BV..module-1"]')
           .should('be.visible');
diff --git a/vid-webpack-master/package.json b/vid-webpack-master/package.json
index ee04de10d..1843de030 100644..100755
--- a/vid-webpack-master/package.json
+++ b/vid-webpack-master/package.json
@@ -30,24 +30,23 @@
   "private": true,
   "dependencies": {
     "@angular-redux/store": "9.0.0",
-    "@angular/animations": "7.1.4",
+    "@angular/animations": "8.2.14",
     "@angular/cdk": "7.2.2",
-    "@angular/common": "7.1.4",
-    "@angular/compiler": "7.1.4",
-    "@angular/core": "7.1.4",
-    "@angular/forms": "7.1.4",
-    "@angular/http": "7.1.4",
+    "@angular/common": "8.2.14",
+    "@angular/compiler": "8.2.14",
+    "@angular/core": "8.2.14",
+    "@angular/forms": "8.2.14",
     "@angular/material": "7.2.2",
-    "@angular/platform-browser": "7.1.4",
-    "@angular/platform-browser-dynamic": "7.1.4",
-    "@angular/platform-server": "7.1.4",
-    "@angular/router": "7.1.4",
+    "@angular/platform-browser": "8.2.14",
+    "@angular/platform-browser-dynamic": "8.2.14",
+    "@angular/platform-server": "8.2.14",
+    "@angular/router": "8.2.14",
     "@harmowatch/ngx-redux-core": "0.2.2",
-    "@nicky-lenaers/ngx-scroll-to": "^0.6.1",
+    "@nicky-lenaers/ngx-scroll-to": "3.0.1",
     "@turf/turf": "5.1.6",
     "@types/lodash": "4.14.121",
     "angular-svg-icon": "5.0.0",
-    "angular-tree-component": "8.4.0",
+    "angular-tree-component": "8.5.2",
     "angular2-datatable": "0.6.0",
     "angular2-multiselect-dropdown": "2.5.0",
     "angular5-csv": "^0.2.10",
@@ -65,6 +64,7 @@
     "ngx-datatable": "1.0.3",
     "ngx-moment": "^2.0.0-rc.0",
     "ngx-tooltip": "0.0.9",
+    "node-sass": "^4.13.0",
     "npm": "^6.4.1",
     "redux": "4.0.1",
     "redux-observable": "^1.0.0",
@@ -72,14 +72,14 @@
     "rxjs-compat": "^6.3.3",
     "slnodejs": "^2.1.124",
     "tslib": "1.9.x",
-    "zone.js": "^0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
     "@angular-builders/jest": "7.3.1",
-    "@angular-devkit/build-angular": "0.13.1",
-    "@angular/cli": "7.3.1",
-    "@angular/compiler-cli": "7.2.5",
-    "@angular/language-service": "7.2.5",
+    "@angular-devkit/build-angular": "~0.803.21",
+    "@angular/cli": "8.3.21",
+    "@angular/compiler-cli": "8.2.14",
+    "@angular/language-service": "8.2.14",
     "@babel/preset-env": "7.3.1",
     "@bahmutov/add-typescript-to-cypress": "2.0.0",
     "@types/chai": "4.1.7",
@@ -88,7 +88,7 @@
     "@types/node": "^10.12.18",
     "angular2-template-loader": "0.6.2",
     "babel-jest": "24.1.0",
-    "codelyzer": "4.5.0",
+    "codelyzer": "^5.0.1",
     "cypress": "3.6.1",
     "hammerjs": "2.0.8",
     "husky": "^1.3.1",
@@ -99,14 +99,15 @@
     "jest-sonar-reporter": "2.0.0",
     "ngx-wallaby-jest": "0.0.1",
     "npm-run-all": "^4.1.5",
-    "onap-ui-angular": "5.2.4",
+    "onap-ui-angular": "5.2.7",
     "onap-ui-common": "1.0.105",
     "prettier": "1.16.4",
     "pretty-quick": "^1.10.0",
+    "redux-observable-es6-compat": "^1.2.1",
     "ts-mockito": "2.3.1",
     "ts-node": "~5.0.1",
     "tslint": "^5.12.0",
-    "typescript": "3.1.6",
+    "typescript": "3.5.3",
     "wallaby-webpack": "^3.9.11",
     "webpack": "^4.28.2"
   },
diff --git a/vid-webpack-master/pom.xml b/vid-webpack-master/pom.xml
index 84c2e57d9..59802d2d4 100644
--- a/vid-webpack-master/pom.xml
+++ b/vid-webpack-master/pom.xml
@@ -135,8 +135,8 @@
                 </goals>
                 <configuration>
                   <!-- See https://nodejs.org/en/download/ for latest node and npm (lts) versions -->
-                  <nodeVersion>v8.9.4</nodeVersion>
-                  <npmVersion>5.6.0</npmVersion>
+                  <nodeVersion>v10.15.3</nodeVersion>
+                  <npmVersion>6.9.0</npmVersion>
                 </configuration>
               </execution>
 
diff --git a/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts b/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts
index 25d170320..7e59f1741 100644
--- a/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts
+++ b/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts
@@ -36,6 +36,8 @@ import {ComponentInfoComponent} from './service-planning/component-info/componen
 import {ComponentInfoService} from "./service-planning/component-info/component-info.service";
 import {NetworkStepService} from "./service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service";
 import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service";
+import {ModalModule} from "onap-ui-angular/dist/modals/modal.module";
+import {ModalService} from "../shared/components/customModal/services/modal.service";
 
 
 @NgModule({
@@ -48,7 +50,8 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod
     CommonModule,
     SdcUiComponentsModule,
     SharedModule.forRoot(),
-    FeatureFlagModule.forRoot()],
+    FeatureFlagModule.forRoot(),
+    ModalModule],
   providers: [
     AaiService,
     ObjectToTreeService,
@@ -64,7 +67,7 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod
     DynamicInputsService,
     InstanceTreeGenerator,
     SharedTreeService,
-    SdcUiServices.ModalService,
+    ModalService,
     SdcUiServices.LoaderService,
     CreateDynamicComponentService,
     ComponentInfoService,
@@ -83,7 +86,7 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod
     SearchComponent,
     ComponentInfoComponent],
   entryComponents: [DuplicateVnfComponent],
-  exports: [AvailableModelsTreeComponent, DrawingBoardTreeComponent, DrawingBoardHeader, TreeNodeHeaderPropertiesComponent, SearchComponent]
+  exports: [AvailableModelsTreeComponent, DrawingBoardTreeComponent, DrawingBoardHeader, TreeNodeHeaderPropertiesComponent, SearchComponent, DuplicateVnfComponent]
 })
 
 export class DrawingBoardModule {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts
index 13147b7e5..7475c77c7 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts
@@ -88,7 +88,7 @@ export class AvailableModelsTreeComponent {
 
   @Output()
   highlightInstances: EventEmitter<number> = new EventEmitter<number>();
-  @ViewChild('tree') tree: TreeComponent;
+  @ViewChild('tree', {static: false}) tree: TreeComponent;
 
   nodes = [];
   service = {name: ''};
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
index 8228f9531..395b5f3bf 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts
@@ -80,7 +80,7 @@ export class DrawingBoardHeader {
   }
 
 
-  @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
+  @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent;
 
   editViewEdit(): void {
      window.parent.location.assign(this._drawingBoardHeaderService.generateOldViewEditPath());
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
index 7e28b2a65..8ecb3963a 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts
@@ -26,6 +26,7 @@ class MockAppStore<T>{
   }
 }
 
+class MockDragAndDropService<T> {}
 describe('Generate path to old View/Edit ', () => {
   let injector;
   let service: DrawingBoardHeaderService;
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts
index 96e50178b..2daaaaf71 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts
@@ -1,9 +1,7 @@
 import {Injectable} from "@angular/core";
 import {NgRedux} from "@angular-redux/store";
 import {AppState} from "../../../../shared/store/reducers";
-import {DragAndDropModel} from "./dragAndDrop.model";
 import {FeatureFlagsService, Features} from "../../../../shared/services/featureFlag/feature-flags.service";
-import * as _ from 'lodash';
 
 @Injectable()
 export class DragAndDropService {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
index 4ad1b06cf..a195cf019 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
@@ -13,7 +13,6 @@ import {DrawingBoardTreeService, TreeNodeContextMenuModel} from "./drawing-board
 import {NetworkPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/network/network.popup.service";
 import {VfModulePopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service";
 import {VnfPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service";
-import {SdcUiServices} from "onap-ui-angular";
 import {HighlightPipe} from "../../../shared/pipes/highlight/highlight-filter.pipe";
 import {VnfGroupPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service";
 import {ObjectToInstanceTreeService} from "../objectsToTree/objectToInstanceTree/objectToInstanceTree.service";
@@ -29,6 +28,7 @@ import {ComponentInfoModel} from "../component-info/component-info-model";
 import {ObjectToModelTreeService} from "../objectsToTree/objectToModelTree/objectToModelTree.service";
 import {DrawingBoardModes} from "../drawing-board.modes";
 import {ServiceInstanceActions} from "../../../shared/models/serviceInstanceActions";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 
 @Component({
   selector: 'drawing-board-tree',
@@ -52,7 +52,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
   static triggerDeleteActionService: Subject<string> = new Subject<string>();
   static triggerUndoDeleteActionService: Subject<string> = new Subject<string>();
   static triggerreCalculateIsDirty: Subject<string> = new Subject<string>();
-  @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
+  @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent;
 
   constructor(private _contextMenuService: ContextMenuService,
               private _iframeService: IframeService,
@@ -60,7 +60,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
               private store: NgRedux<AppState>,
               private route: ActivatedRoute,
               private _duplicateService: DuplicateService,
-              private modalService: SdcUiServices.ModalService,
+              private modalService: ModalService,
               private _drawingBoardTreeService: DrawingBoardTreeService,
               private _networkPopupService: NetworkPopupService,
               private _vfModulePopuopService: VfModulePopupService,
@@ -120,7 +120,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
   @Output()
   highlightNode: EventEmitter<number> = new EventEmitter<number>();
 
-  @ViewChild('tree') tree: TreeComponent;
+  @ViewChild('tree', {static: false}) tree: TreeComponent;
   missingDataTooltip: string = Constants.Error.MISSING_VNF_DETAILS;
   currentNode: ITreeNode = null;
   flags: any;
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts
index 6423e8ad1..2f8ece283 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts
@@ -2,12 +2,12 @@ import {DuplicateService} from './duplicate.service';
 import {LogService} from '../../../shared/utils/log/log.service';
 import {NgRedux} from '@angular-redux/store';
 import {ITreeNode} from "angular-tree-component/dist/defs/api";
-import {SdcUiServices} from "onap-ui-angular";
-import {IModalConfig} from 'onap-ui-angular/dist/components/common';
 import {AppState} from "../../../shared/store/reducers";
 import {getTestBed, TestBed} from "@angular/core/testing";
 import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service";
 import {SharedTreeService} from "../objectsToTree/shared.tree.service";
+import {IModalConfig} from "../../../shared/components/customModal/models/modal.model";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 
 class MockAppStore<T> {
   getState(){
@@ -73,7 +73,7 @@ describe('Drawing board tree service', () => {
         LogService,
         {provide: FeatureFlagsService, useClass: MockFeatureFlagsService},
         {provide: NgRedux, useClass: MockAppStore},
-        {provide: SdcUiServices.ModalService, useClass: MockModalService}
+        {provide: ModalService, useClass: MockModalService}
       ]
     });
     await TestBed.compileComponents();
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts
index c8338cbfc..c3a5a28c0 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts
@@ -8,19 +8,20 @@ import {VfModuleMap} from "../../../shared/models/vfModulesMap";
 import * as _ from "lodash";
 import {DefaultDataGeneratorService} from "../../../shared/services/defaultDataServiceGenerator/default.data.generator.service";
 import {TypeNodeInformation} from "../typeNodeInformation.model";
-import {SdcUiCommon, SdcUiServices} from "onap-ui-angular";
+import {SdcUiCommon} from "onap-ui-angular";
 import {changeInstanceCounter, duplicateBulkInstances} from "../../../shared/storeUtil/utils/general/general.actions";
 import {IModalConfig} from "onap-ui-angular/dist/modals/models/modal-config";
 import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service";
 import {Utils} from "../../../shared/utils/utils";
 import {SharedTreeService} from "../objectsToTree/shared.tree.service";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 
 @Injectable()
 export class DuplicateService {
 
   constructor(private _logService: LogService,
               private sharedTreeService : SharedTreeService,
-              private _store: NgRedux<AppState>, modalService: SdcUiServices.ModalService) {
+              private _store: NgRedux<AppState>, modalService: ModalService) {
     this.modalService = modalService;
   }
 
@@ -35,7 +36,7 @@ export class DuplicateService {
   maxNumberOfDuplicate: number = 0;
   storeKey: string = null;
   padding = '0000';
-  modalService: SdcUiServices.ModalService;
+  modalService: ModalService;
   store: NgRedux<AppState>;
   existingNames: { [key: string]: any };
   currentNode: ITreeNode = null;
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
index 486ac93c0..b03d37f50 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts
@@ -16,7 +16,6 @@ import {AvailableNodeIcons} from "../../../available-models-tree/available-model
 import {DuplicateVnfComponent} from "../../../duplicate/duplicate-vnf.component";
 import {changeInstanceCounter, removeInstance} from "../../../../../shared/storeUtil/utils/general/general.actions";
 import {IframeService} from "../../../../../shared/utils/iframe.service";
-import {SdcUiServices} from "onap-ui-angular";
 import {DuplicateService} from "../../../duplicate/duplicate.service";
 import {ServiceInstanceActions} from "../../../../../shared/models/serviceInstanceActions";
 import {deleteActionNetworkInstance, undoDeleteActionNetworkInstance, updateNetworkPosition} from "../../../../../shared/storeUtil/utils/network/network.actions";
@@ -24,6 +23,7 @@ import {IModalConfig} from "onap-ui-angular/dist/modals/models/modal-config";
 import {ComponentInfoType} from "../../../component-info/component-info-model";
 import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
 import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service";
+import {ModalService} from "../../../../../shared/components/customModal/services/modal.service";
 
 export class NetworkModelInfo implements ILevelNodeInfo {
   constructor(private _dynamicInputsService: DynamicInputsService,
@@ -31,7 +31,7 @@ export class NetworkModelInfo implements ILevelNodeInfo {
               private _dialogService: DialogService,
               private _networkPopupService: NetworkPopupService,
               private _duplicateService: DuplicateService,
-              private modalService: SdcUiServices.ModalService,
+              private modalService: ModalService,
               private _iframeService: IframeService,
               private _featureFlagsService: FeatureFlagsService,
               private _store: NgRedux<AppState>) {
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
index 355b5c597..c3c33a1be 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts
@@ -31,6 +31,7 @@ import {ComponentInfoService} from "../../../component-info/component-info.servi
 import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component";
 import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service";
+import {ModalService} from "../../../../../shared/components/customModal/services/modal.service";
 
 export class VnfModelInfo implements ILevelNodeInfo {
   constructor(private _dynamicInputsService: DynamicInputsService,
@@ -41,7 +42,7 @@ export class VnfModelInfo implements ILevelNodeInfo {
               private _vfModulePopupService: VfModulePopupService,
               private _vfModuleUpgradePopupService: VfModuleUpgradePopupService,
               private _duplicateService: DuplicateService,
-              private modalService: SdcUiServices.ModalService,
+              private modalService: ModalService,
               private _iframeService: IframeService,
               private _componentInfoService: ComponentInfoService,
               private _featureFlagsService: FeatureFlagsService,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
index 1cec62b2c..1ba9a239c 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts
@@ -27,13 +27,15 @@ import {VfModuleControlGenerator} from "../../../../shared/components/genericFor
 import {VnfGroupPopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service";
 import {VnfGroupControlGenerator} from "../../../../shared/components/genericForm/formControlsServices/vnfGroupGenerator/vnfGroup.control.generator";
 import {DuplicateService} from "../../duplicate/duplicate.service";
-import {SdcUiComponentsModule, SdcUiServices} from "onap-ui-angular";
+import {SdcUiComponentsModule} from "onap-ui-angular";
 import {ErrorMsgService} from "../../../../shared/components/error-msg/error-msg.service";
 import {ComponentInfoService} from "../../component-info/component-info.service";
 import {NetworkStepService} from "../models/vrf/vrfModal/networkStep/network.step.service";
 import {VpnStepService} from "../models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {VfModuleUpgradePopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {SharedControllersService} from "../../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../../shared/components/customModal/services/modal.service";
+import {CreateDynamicComponentService} from "../../../../shared/components/customModal/services/create-dynamic-component.service";
 
 class MockAppStore<T> {
   getState() {
@@ -86,9 +88,11 @@ describe('Model Tree Generator service', () => {
         DialogService,
         ErrorMsgService,
         ComponentInfoService,
-        SdcUiServices.ModalService,
+        ModalService,
         NetworkStepService,
         VpnStepService,
+        ModalService,
+        CreateDynamicComponentService,
         { provide: NgRedux, useClass: MockAppStore },
         MockNgRedux]
     });
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
index 0f7bf9a61..ec6f2a4c5 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts
@@ -37,6 +37,8 @@ import {VpnStepService} from "../models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {NetworkStepService} from "../models/vrf/vrfModal/networkStep/network.step.service";
 import {VfModuleUpgradePopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {SharedControllersService} from "../../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../../shared/components/customModal/services/modal.service";
+import {CreateDynamicComponentService} from "../../../../shared/components/customModal/services/create-dynamic-component.service";
 
 class MockAppStore<T> {
   getState() {
@@ -112,6 +114,8 @@ describe('Model Tree Generator service', () => {
         ComponentInfoService,
         NetworkStepService,
         VpnStepService,
+        ModalService,
+        CreateDynamicComponentService,
         SharedControllersService,
         {provide: NgRedux, useClass: MockAppStore},
         MockNgRedux ]
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
index 9b68627e2..8eef4a08d 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts
@@ -15,7 +15,6 @@ import {VfModulePopupService} from "../../../shared/components/genericFormPopup/
 import {VnfGroupingModelInfo} from "./models/vnfGrouping/vnfGrouping.model.info";
 import {VnfGroupPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service";
 import {DuplicateService} from "../duplicate/duplicate.service";
-import {SdcUiServices} from "onap-ui-angular";
 import {IframeService} from "../../../shared/utils/iframe.service";
 import {ComponentInfoService} from "../component-info/component-info.service";
 import {PnfModelInfo} from "./models/pnf/pnf.model.info";
@@ -26,6 +25,7 @@ import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step
 import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service";
 import { VfModuleUpgradePopupService } from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
 
 @Injectable()
 export class ObjectToTreeService {
@@ -39,7 +39,7 @@ export class ObjectToTreeService {
               private _vfModuleUpgradePopupService : VfModuleUpgradePopupService,
               private _vnfGroupPopupService : VnfGroupPopupService,
               private _duplicateService : DuplicateService,
-              private _modalService: SdcUiServices.ModalService,
+              private _modalService: ModalService,
               private _iframeService : IframeService,
               private _componentInfoService : ComponentInfoService,
               private _networkStepService : NetworkStepService,
@@ -50,8 +50,6 @@ export class ObjectToTreeService {
   }
 
 
-
-
   /***********************************************************
    * return all first optional first level of the model tree
    ************************************************************/
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
index 3a65b93ef..f89950c61 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts
@@ -42,6 +42,8 @@ import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service";
 import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step.service";
 import {VfModuleUpgradePopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service";
 import {SharedControllersService} from "../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../shared/components/customModal/services/modal.service";
+import {CreateDynamicComponentService} from "../../../shared/components/customModal/services/create-dynamic-component.service";
 
 class MockAppStore<T> {
   getState() {
@@ -114,6 +116,8 @@ describe('Shared Tree Service', () => {
         ComponentInfoService,
         NetworkStepService,
         VpnStepService,
+        ModalService,
+        CreateDynamicComponentService,
         {provide: NgRedux, useClass: MockAppStore}
       ]
     });
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
index cbe8445ca..59988f7c3 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
@@ -26,8 +26,8 @@ export class ServicePlanningComponent implements OnInit {
   }
 
   pageMode: DrawingBoardModes = DrawingBoardModes.CREATE;
-  @ViewChild(DrawingBoardTreeComponent) drawingModelTree;
-  @ViewChild(AvailableModelsTreeComponent) availableModelTree;
+  @ViewChild(DrawingBoardTreeComponent, {static: false}) drawingModelTree;
+  @ViewChild(AvailableModelsTreeComponent, {static: false}) availableModelTree;
 
   isShowTree(): boolean {
     return true;
diff --git a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts
index 4f84b7125..f27faac60 100644
--- a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts
+++ b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts
@@ -39,7 +39,7 @@ export class InstantiationStatusComponent implements OnInit {
   instantiationStatusComponentService: InstantiationStatusComponentService;
   configurationService : ConfigurationService;
   serviceInfoData: ServiceInfoModel[] = null;
-  @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
+  @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent;
 
   public contextMenuActions: Array<MenuAction> = [
     {
diff --git a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts
index 95e9825da..665b8d13f 100644
--- a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts
+++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts
@@ -19,7 +19,7 @@ import {AuditInfoModalComponentService} from "./auditInfoModal.component.service
 export class AuditInfoModalComponent {
   static openModal: Subject<ServiceInfoModel> = new Subject<ServiceInfoModel>();
   static openInstanceAuditInfoModal: Subject<{instanceId , type, model, instance}> = new Subject<{instanceId , type, model, instance}>();
-  @ViewChild('auditInfoModal') public auditInfoModal: ModalDirective;
+  @ViewChild('auditInfoModal', {static: false}) public auditInfoModal: ModalDirective;
   title: string = 'Service Instantiation Information';
   modelInfoItems: ModelInformationItem[] = [];
   serviceModel: ServiceModel;
diff --git a/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.html b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.html
new file mode 100644
index 000000000..753a3923b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.html
@@ -0,0 +1,16 @@
+<div>
+  <button class="custom-button sdc-button__{{ type }} btn-{{ size }} {{ iconPositionClass }}"
+          [disabled]="disabled || show_spinner"
+          [attr.data-tests-id]="testId">
+    <svg-icon
+      *ngIf="icon_name"
+      [name]="icon_name"
+      [mode]="icon_mode"
+      [size]="'medium'"
+    >
+    </svg-icon>
+    {{text}}
+  </button>
+  <svg-icon *ngIf="show_spinner" name="spinner" [size]="'medium'" class="sdc-button__spinner"
+            [ngClass]="{left: spinner_position === placement.right}"></svg-icon>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.scss b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.scss
new file mode 100644
index 000000000..89f90d44d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.scss
@@ -0,0 +1,273 @@
+.custom-button {
+  order: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  outline: none;
+  border-radius: 2px;
+  padding: 0 12px;
+  height: 36px;
+  line-height: 36px;
+  width: 120px;
+  min-width: 90px;
+  cursor: pointer;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: OpenSans-Regular, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  /*** Sizes ***/
+  /*** Sizes ***/
+  /*** Buttons with icons ***/
+}
+
+.custom-button:disabled {
+  cursor: default;
+}
+
+.custom-button.sdc-button__primary {
+  border: 1px solid transparent;
+  background-color: #009fdb;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__primary:not(:disabled):hover, .custom-button.sdc-button__primary:not(:disabled):active {
+  background-color: #1eb9f3;
+}
+
+.custom-button.sdc-button__primary:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #1eb9f3;
+  box-shadow: 0px 0px 0px 1px #1eb9f3;
+}
+
+.custom-button.sdc-button__primary:disabled {
+  background: #9dd9ef;
+}
+
+.custom-button.sdc-button__secondary {
+  border: 1px solid #009fdb;
+  background-color: transparent;
+  color: #009fdb;
+}
+
+.custom-button.sdc-button__secondary:not(:disabled):hover, .custom-button.sdc-button__secondary:not(:disabled):active {
+  background-color: #1eb9f3;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__secondary:not(:disabled):focus:not(:active) {
+  color: #1eb9f3;
+  box-shadow: inset 0px 0px 0px 0px #0568ae, 0px 0px 0px 1px #009fdb;
+}
+
+.custom-button.sdc-button__secondary:not(:disabled):focus:not(:active):hover {
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__secondary:disabled {
+  color: #9dd9ef;
+  border-color: #9dd9ef;
+}
+
+.custom-button.sdc-button__link {
+  background-color: transparent;
+  color: #009fdb;
+  fill: #009fdb;
+  border: none;
+}
+
+.custom-button.sdc-button__link:not(:disabled):hover, .custom-button.sdc-button__link:not(:disabled):active {
+  color: #1eb9f3;
+}
+
+.custom-button.sdc-button__link:not(:disabled):focus:not(:active) {
+  border: 1px solid #0568ae;
+  color: #1eb9f3;
+}
+
+.custom-button.sdc-button__link:disabled {
+  color: #9dd9ef;
+}
+
+.custom-button.sdc-button__success {
+  border: 1px solid transparent;
+  background-color: #4ca90c;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__success:not(:disabled):hover, .custom-button.sdc-button__success:not(:disabled):active {
+  background-color: #57c00e;
+}
+
+.custom-button.sdc-button__success:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #57c00e;
+  box-shadow: 0px 0px 0px 1px #57c00e;
+}
+
+.custom-button.sdc-button__success:disabled {
+  background: #a5d485;
+}
+
+.custom-button.sdc-button__error, .custom-button.sdc-button__alert {
+  border: 1px solid transparent;
+  background-color: #cf2a2a;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__error:not(:disabled):hover, .custom-button.sdc-button__error:not(:disabled):active, .custom-button.sdc-button__alert:not(:disabled):hover, .custom-button.sdc-button__alert:not(:disabled):active {
+  background-color: #ed4141;
+}
+
+.custom-button.sdc-button__error:not(:disabled):focus:not(:active), .custom-button.sdc-button__alert:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #ed4141;
+  box-shadow: 0px 0px 0px 1px #ed4141;
+}
+
+.custom-button.sdc-button__error:disabled, .custom-button.sdc-button__alert:disabled {
+  background: #f4adad;
+}
+
+.custom-button.sdc-button__warning {
+  border: 1px solid transparent;
+  background-color: #ffb81c;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__warning:not(:disabled):hover, .custom-button.sdc-button__warning:not(:disabled):active {
+  background-color: #f6c632;
+}
+
+.custom-button.sdc-button__warning:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #f6c632;
+  box-shadow: 0px 0px 0px 1px #f6c632;
+}
+
+.custom-button.sdc-button__warning:disabled {
+  background: #ffdb8d;
+}
+
+.custom-button.sdc-button__info {
+  border: 1px solid transparent;
+  background-color: #009fdb;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__info:not(:disabled):hover, .custom-button.sdc-button__info:not(:disabled):active {
+  background-color: #1eb9f3;
+}
+
+.custom-button.sdc-button__info:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #1eb9f3;
+  box-shadow: 0px 0px 0px 1px #1eb9f3;
+}
+
+.custom-button.sdc-button__info:disabled {
+  background: #9dd9ef;
+}
+
+.custom-button.sdc-button__file-opener input[type=file] {
+  height: 36px;
+  opacity: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+.custom-button.btn-xx-large {
+  width: 350px;
+}
+
+.custom-button.btn-xx-large input[type=file] {
+  width: 350px;
+}
+
+.custom-button.btn-x-large {
+  width: 250px;
+}
+
+.custom-button.btn-x-large input[type=file] {
+  width: 250px;
+}
+
+.custom-button.btn-large {
+  width: 180px;
+}
+
+.custom-button.btn-large input[type=file] {
+  width: 180px;
+}
+
+.custom-button.btn-medium {
+  width: 140px;
+}
+
+.custom-button.btn-medium input[type=file] {
+  width: 140px;
+}
+
+.custom-button.btn-small {
+  width: 110px;
+}
+
+.custom-button.btn-small input[type=file] {
+  width: 110px;
+}
+
+.custom-button.btn-x-small {
+  width: 90px;
+}
+
+.custom-button.btn-x-small input[type=file] {
+  width: 90px;
+}
+
+.custom-button.btn-default {
+  width: auto;
+}
+
+.custom-button.btn-default input[type=file] {
+  width: auto;
+}
+
+.custom-button.sdc-icon-right {
+  flex-direction: row-reverse;
+}
+
+.custom-button.sdc-icon-right .svg-icon {
+  margin-left: 15px;
+}
+
+.custom-button.sdc-icon-left {
+  flex-direction: row;
+}
+
+.custom-button.sdc-icon-left .svg-icon {
+  margin-right: 15px;
+}
+
+.custom-button svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.sdc-button__wrapper {
+  display: inline-flex;
+}
+
+.sdc-button__spinner {
+  padding-top: 6px;
+  margin: 0 2px;
+}
+
+.sdc-button__spinner.left {
+  order: 2;
+}
diff --git a/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.ts b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.ts
new file mode 100644
index 000000000..61fa02832
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.ts
@@ -0,0 +1,65 @@
+import {Component, HostBinding, Input, OnInit} from "@angular/core";
+import {IButtonComponent} from "../customModal/models/modal-button.model";
+import {ButtonType} from "../customModal/models/button.type";
+import {Mode} from "./models/mode.model";
+import {Placement} from "../customModal/models/modal.placement";
+
+
+@Component({
+  selector: "sdc-button",
+  templateUrl: './custom-button.component.html',
+  styleUrls: ['./custom-button.component.scss']
+
+})
+
+export class CustomButtonComponent implements OnInit, IButtonComponent {
+  @Input() public text: string;
+  @Input() public disabled: boolean;
+  @Input() public type: ButtonType;
+  @Input() public icon_mode: Mode;
+  @Input() public size: string;
+  @Input() public preventDoubleClick: boolean;
+  @Input() public icon_name: string;
+  @Input() public icon_position: string;
+  @Input() public show_spinner: boolean;
+  @Input() public spinner_position: Placement;
+  @Input() public testId: string;
+
+  public placement = Placement;
+  private lastClick: Date;
+  public iconPositionClass: string;
+
+  @HostBinding('class.sdc-button__wrapper') true;
+
+  constructor() {
+    this.type = ButtonType.primary;
+    this.size = "default";
+    this.disabled = false;
+  }
+
+  public ngOnInit(): void {
+    this.iconPositionClass = this.icon_position ? 'sdc-icon-' + this.icon_position : '';
+  }
+
+  public onClick = (e): void => {
+    const now: Date = new Date();
+    if (this.preventDoubleClick && this.lastClick && (now.getTime() - this.lastClick.getTime()) <= 500) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    this.lastClick = now;
+  }
+
+  public disableButton = () => {
+    if (!this.disabled) {
+      this.disabled = true;
+    }
+  }
+
+  public enableButton = () => {
+    if (this.disabled) {
+      this.disabled = false;
+    }
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/customButton/models/mode.model.ts b/vid-webpack-master/src/app/shared/components/customButton/models/mode.model.ts
new file mode 100644
index 000000000..c8a7ddef3
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customButton/models/mode.model.ts
@@ -0,0 +1,10 @@
+export enum Mode {
+  primary = 'primary',
+  primary2 = 'primary2',
+  secondary = 'secondary',
+  success = 'success',
+  error = 'error',
+  warning = 'warning',
+  info = 'info',
+  white = 'white'
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.html b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.html
new file mode 100644
index 000000000..753a3923b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.html
@@ -0,0 +1,16 @@
+<div>
+  <button class="custom-button sdc-button__{{ type }} btn-{{ size }} {{ iconPositionClass }}"
+          [disabled]="disabled || show_spinner"
+          [attr.data-tests-id]="testId">
+    <svg-icon
+      *ngIf="icon_name"
+      [name]="icon_name"
+      [mode]="icon_mode"
+      [size]="'medium'"
+    >
+    </svg-icon>
+    {{text}}
+  </button>
+  <svg-icon *ngIf="show_spinner" name="spinner" [size]="'medium'" class="sdc-button__spinner"
+            [ngClass]="{left: spinner_position === placement.right}"></svg-icon>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.scss b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.scss
new file mode 100644
index 000000000..89f90d44d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.scss
@@ -0,0 +1,273 @@
+.custom-button {
+  order: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  outline: none;
+  border-radius: 2px;
+  padding: 0 12px;
+  height: 36px;
+  line-height: 36px;
+  width: 120px;
+  min-width: 90px;
+  cursor: pointer;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: OpenSans-Regular, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  /*** Sizes ***/
+  /*** Sizes ***/
+  /*** Buttons with icons ***/
+}
+
+.custom-button:disabled {
+  cursor: default;
+}
+
+.custom-button.sdc-button__primary {
+  border: 1px solid transparent;
+  background-color: #009fdb;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__primary:not(:disabled):hover, .custom-button.sdc-button__primary:not(:disabled):active {
+  background-color: #1eb9f3;
+}
+
+.custom-button.sdc-button__primary:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #1eb9f3;
+  box-shadow: 0px 0px 0px 1px #1eb9f3;
+}
+
+.custom-button.sdc-button__primary:disabled {
+  background: #9dd9ef;
+}
+
+.custom-button.sdc-button__secondary {
+  border: 1px solid #009fdb;
+  background-color: transparent;
+  color: #009fdb;
+}
+
+.custom-button.sdc-button__secondary:not(:disabled):hover, .custom-button.sdc-button__secondary:not(:disabled):active {
+  background-color: #1eb9f3;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__secondary:not(:disabled):focus:not(:active) {
+  color: #1eb9f3;
+  box-shadow: inset 0px 0px 0px 0px #0568ae, 0px 0px 0px 1px #009fdb;
+}
+
+.custom-button.sdc-button__secondary:not(:disabled):focus:not(:active):hover {
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__secondary:disabled {
+  color: #9dd9ef;
+  border-color: #9dd9ef;
+}
+
+.custom-button.sdc-button__link {
+  background-color: transparent;
+  color: #009fdb;
+  fill: #009fdb;
+  border: none;
+}
+
+.custom-button.sdc-button__link:not(:disabled):hover, .custom-button.sdc-button__link:not(:disabled):active {
+  color: #1eb9f3;
+}
+
+.custom-button.sdc-button__link:not(:disabled):focus:not(:active) {
+  border: 1px solid #0568ae;
+  color: #1eb9f3;
+}
+
+.custom-button.sdc-button__link:disabled {
+  color: #9dd9ef;
+}
+
+.custom-button.sdc-button__success {
+  border: 1px solid transparent;
+  background-color: #4ca90c;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__success:not(:disabled):hover, .custom-button.sdc-button__success:not(:disabled):active {
+  background-color: #57c00e;
+}
+
+.custom-button.sdc-button__success:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #57c00e;
+  box-shadow: 0px 0px 0px 1px #57c00e;
+}
+
+.custom-button.sdc-button__success:disabled {
+  background: #a5d485;
+}
+
+.custom-button.sdc-button__error, .custom-button.sdc-button__alert {
+  border: 1px solid transparent;
+  background-color: #cf2a2a;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__error:not(:disabled):hover, .custom-button.sdc-button__error:not(:disabled):active, .custom-button.sdc-button__alert:not(:disabled):hover, .custom-button.sdc-button__alert:not(:disabled):active {
+  background-color: #ed4141;
+}
+
+.custom-button.sdc-button__error:not(:disabled):focus:not(:active), .custom-button.sdc-button__alert:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #ed4141;
+  box-shadow: 0px 0px 0px 1px #ed4141;
+}
+
+.custom-button.sdc-button__error:disabled, .custom-button.sdc-button__alert:disabled {
+  background: #f4adad;
+}
+
+.custom-button.sdc-button__warning {
+  border: 1px solid transparent;
+  background-color: #ffb81c;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__warning:not(:disabled):hover, .custom-button.sdc-button__warning:not(:disabled):active {
+  background-color: #f6c632;
+}
+
+.custom-button.sdc-button__warning:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #f6c632;
+  box-shadow: 0px 0px 0px 1px #f6c632;
+}
+
+.custom-button.sdc-button__warning:disabled {
+  background: #ffdb8d;
+}
+
+.custom-button.sdc-button__info {
+  border: 1px solid transparent;
+  background-color: #009fdb;
+  color: #ffffff;
+}
+
+.custom-button.sdc-button__info:not(:disabled):hover, .custom-button.sdc-button__info:not(:disabled):active {
+  background-color: #1eb9f3;
+}
+
+.custom-button.sdc-button__info:not(:disabled):focus:not(:active) {
+  border: 1px solid #ffffff;
+  background-color: #1eb9f3;
+  box-shadow: 0px 0px 0px 1px #1eb9f3;
+}
+
+.custom-button.sdc-button__info:disabled {
+  background: #9dd9ef;
+}
+
+.custom-button.sdc-button__file-opener input[type=file] {
+  height: 36px;
+  opacity: 0;
+  position: absolute;
+  cursor: pointer;
+}
+
+.custom-button.btn-xx-large {
+  width: 350px;
+}
+
+.custom-button.btn-xx-large input[type=file] {
+  width: 350px;
+}
+
+.custom-button.btn-x-large {
+  width: 250px;
+}
+
+.custom-button.btn-x-large input[type=file] {
+  width: 250px;
+}
+
+.custom-button.btn-large {
+  width: 180px;
+}
+
+.custom-button.btn-large input[type=file] {
+  width: 180px;
+}
+
+.custom-button.btn-medium {
+  width: 140px;
+}
+
+.custom-button.btn-medium input[type=file] {
+  width: 140px;
+}
+
+.custom-button.btn-small {
+  width: 110px;
+}
+
+.custom-button.btn-small input[type=file] {
+  width: 110px;
+}
+
+.custom-button.btn-x-small {
+  width: 90px;
+}
+
+.custom-button.btn-x-small input[type=file] {
+  width: 90px;
+}
+
+.custom-button.btn-default {
+  width: auto;
+}
+
+.custom-button.btn-default input[type=file] {
+  width: auto;
+}
+
+.custom-button.sdc-icon-right {
+  flex-direction: row-reverse;
+}
+
+.custom-button.sdc-icon-right .svg-icon {
+  margin-left: 15px;
+}
+
+.custom-button.sdc-icon-left {
+  flex-direction: row;
+}
+
+.custom-button.sdc-icon-left .svg-icon {
+  margin-right: 15px;
+}
+
+.custom-button svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.sdc-button__wrapper {
+  display: inline-flex;
+}
+
+.sdc-button__spinner {
+  padding-top: 6px;
+  margin: 0 2px;
+}
+
+.sdc-button__spinner.left {
+  order: 2;
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.ts b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.ts
new file mode 100644
index 000000000..d93c67851
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.ts
@@ -0,0 +1,28 @@
+import {Component, EventEmitter, HostListener, Input, Output} from "@angular/core";
+import {CustomButtonComponent} from "../../../customButton/custom-button.component";
+
+@Component({
+  selector: "custom-modal-button",
+  templateUrl: './modal-button.component.html',
+  styleUrls: ['./modal-button.component.scss']
+})
+export class CustomModalButtonComponent extends CustomButtonComponent {
+
+  @Input() public id?: string;
+  @Input() public callback: Function;
+  @Input() public closeModal: boolean;
+  @Output() closeModalEvent: EventEmitter<any> = new EventEmitter<any>();
+  @HostListener('click') invokeCallback = (): void => {
+    if (this.callback) {
+      this.callback();
+    }
+    if (this.closeModal) {
+      this.closeModalEvent.emit();
+    }
+  }
+
+  constructor() {
+    super();
+    this.closeModal = false;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/components/modalCloseButton/modal-close-button.component.ts b/vid-webpack-master/src/app/shared/components/customModal/components/modalCloseButton/modal-close-button.component.ts
new file mode 100644
index 000000000..a3e741a32
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/components/modalCloseButton/modal-close-button.component.ts
@@ -0,0 +1,36 @@
+import {Component, ComponentRef, Input} from "@angular/core";
+import {ModalComponent} from "../../modal.component";
+import {CustomButtonComponent} from "../../../customButton/custom-button.component";
+import {RippleAnimationAction} from "../../directives/ripple-click.animation.directive";
+
+
+@Component({
+  selector: "sdc-modal-close-button",
+  template: `
+    <div class="sdc-modal__close-button"
+         customRippleClickAnimation
+         [ngClass]="disabled ? 'disabled' : ''"
+         [rippleOnAction]="!disabled && rippleAnimationAction"
+         [attr.data-tests-id]="testId"
+         (click)="!disabled && closeModal('close')"
+    >
+      <svg-icon name="close" [mode]="disabled? 'secondary' : 'info'" size="small"></svg-icon>
+    </div>
+  `
+})
+export class ModalCloseButtonComponent extends CustomButtonComponent {
+
+  @Input() testId: string;
+  @Input() disabled: boolean;
+  @Input() modalInstanceRef: ComponentRef<ModalComponent>;
+
+  public rippleAnimationAction: RippleAnimationAction = RippleAnimationAction.MOUSE_ENTER;
+
+  constructor() {
+    super();
+  }
+
+  public closeModal = (btnName: string): void => {
+    this.modalInstanceRef.instance.closeModal(btnName);
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts b/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts
new file mode 100644
index 000000000..d343d5dc2
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts
@@ -0,0 +1,47 @@
+import { Directive, Input, HostBinding, HostListener } from "@angular/core";
+
+export enum RippleAnimationAction {
+  CLICK = 0,
+  MOUSE_ENTER = 1
+}
+
+@Directive({
+  selector: `[customRippleClickAnimation]`
+})
+export class CustomRippleClickAnimationDirective {
+  private animated: boolean;
+
+  @Input() rippleClickDisabled: boolean;
+  @Input() rippleOnAction:RippleAnimationAction = RippleAnimationAction.CLICK;
+
+  @HostBinding('class.sdc-ripple-click__animated') animationClass: string;
+
+  @HostListener('click') onClick() {
+    if(this.rippleOnAction === RippleAnimationAction.CLICK){
+      this.animateStart();
+    }
+  }
+
+  @HostListener('mouseenter') onMouseEnter() {
+    //console.log("Mouseenter!", this.rippleOnAction);
+    if(this.rippleOnAction === RippleAnimationAction.MOUSE_ENTER){
+      this.animateStart();
+    }
+  }
+
+  private animateStart():void{
+    if (!this.rippleClickDisabled) {
+      this.animated = true;
+      this.animationClass = 'sdc-ripple-click__animated';
+    }
+  }
+  @HostListener('animationend') onAnimationComplete() {
+    this.animated = false;
+    this.animationClass = '';
+  }
+
+  constructor() {
+    this.rippleClickDisabled = false;
+    this.animated = false;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/modal.component.html b/vid-webpack-master/src/app/shared/components/customModal/modal.component.html
new file mode 100644
index 000000000..11455bc32
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/modal.component.html
@@ -0,0 +1,46 @@
+<div>
+  <div class="modal-background" [@toggleBackground]="modalVisible" ></div>
+  <div class="sdc-modal {{size}}">
+    <div class="sdc-modal__wrapper sdc-modal-type-{{type}}" [@toggleModal]="modalVisible" (@toggleModal.done)="modalToggled($event)">
+
+      <div class="sdc-modal__header sdc-{{type}}__header">
+        <div class="sdc-modal__icon" *ngIf="type!='custom'" [innerHtml]="svgIconContentSafeHtml"></div>
+
+        <div *ngIf="title" class="title" >
+          {{ title }}
+          <svg-icon
+            *ngIf="titleIcon"
+            [name]="titleIcon.iconName"
+            [mode]="titleIcon.iconMode"
+            [size]="titleIcon.iconSize">
+          </svg-icon>
+        </div>
+        <sdc-modal-close-button #modalCloseButton [testId]="'close' | calculateTestId : testId" [modalInstanceRef]="instanceRef"></sdc-modal-close-button>
+      </div>
+
+      <div class="sdc-modal__content">
+        <div *ngIf="message" [innerHtml]="message"></div>
+        <div #dynamicContentContainer></div>
+        <div class="disabled-modal" *ngIf="isDisabled"></div>
+      </div>
+
+      <div class="sdc-modal__footer">
+        <custom-modal-button *ngFor="let button of buttons"
+                          [text]="button.text"
+                          [type]="button.type || 'primary'"
+                          [disabled]="button.disabled"
+                          [size] = "button.size ? button.size : 'default'"
+                          [closeModal]="button.closeModal"
+                          [spinner_position]="button.spinner_position"
+                          [show_spinner]="button.show_spinner"
+                          [callback]="button.callback"
+                          [testId]="'button-' + button.text | calculateTestId : testId"
+                          (closeModalEvent)="closeModal(button.text)"
+        >
+        </custom-modal-button>
+      </div>
+
+    </div>
+  </div>
+</div>
+
diff --git a/vid-webpack-master/src/app/shared/components/customModal/modal.component.ts b/vid-webpack-master/src/app/shared/components/customModal/modal.component.ts
new file mode 100644
index 000000000..eb001c068
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/modal.component.ts
@@ -0,0 +1,166 @@
+import {
+  Component,
+  ComponentRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Renderer,
+  ViewChild,
+  ViewContainerRef
+} from "@angular/core";
+import {animate, style, transition, trigger} from "@angular/animations";
+import {TitleIconDetails} from "./models/modal.model";
+import {ModalType} from "./models/modal.type";
+import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
+import {ModalCloseButtonComponent} from "./components/modalCloseButton/modal-close-button.component";
+import {CustomModalButtonComponent} from "./components/modalButton/modal-button.component";
+
+@Component({
+  selector: 'sdc-modal',
+  templateUrl: './modal.component.html',
+  animations: [
+    trigger('toggleBackground', [
+      transition('* => 1', [style({ opacity: 0 }), animate('.45s cubic-bezier(0.23, 1, 0.32, 1)')]),
+      transition('1 => *', [animate('.35s cubic-bezier(0.23, 1, 0.32, 1)', style({ opacity: 0 }))])
+    ]),
+    trigger('toggleModal', [
+      transition('* => 1', [style({ opacity: 0, transform: 'translateY(-80px)' }), animate('.45s cubic-bezier(0.23, 1, 0.32, 1)')]),
+      transition('1 => *', [style({ opacity: 1, transform: 'translateY(0px)' }), animate('.35s ease-in-out', style({ opacity: 0, transform: 'translateY(-80px)' }))])
+    ])
+  ]
+})
+
+export class ModalComponent implements OnInit {
+
+  @Input() size: string; 'xl|l|md|sm|xsm';
+  @Input() title: string;
+  @Input() titleIcon: TitleIconDetails;
+  @Input() message: string;
+  @Input() buttons: CustomModalButtonComponent[];
+  @Input() type: ModalType;
+  @Input() testId: string;
+  @Input() isDisabled: boolean;
+  @Input() instanceRef: ComponentRef<ModalComponent>; // the component ref is injected to the component in order to destroy the componet from itself
+
+  @Output() onClose : EventEmitter<string> =  new EventEmitter<string>();
+
+  @ViewChild('modalCloseButton', {static: false})
+  set refCloseButton(_modalCloseButton: ModalCloseButtonComponent) {
+    this.modalCloseButton = _modalCloseButton;
+  }
+
+  modalVisible: boolean;
+  // Allows for custom component as body instead of simple message.
+  @ViewChild('dynamicContentContainer', { read: ViewContainerRef, static: true }) dynamicContentContainer: ViewContainerRef;
+  innerModalContent: ComponentRef<any>;
+
+  public calculatedTestId: string;
+  public modalCloseButton: ModalCloseButtonComponent;
+  public svgIconContentSafeHtml: SafeHtml;
+
+
+  private infoSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24">
+    <defs><path fill="#000" id="info-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.101 4.9,22 11,22 C17.1,22 22,17.101 22,11 C22,4.9 17.1,0 11,0 M11,10 C10.4,
+    10 10,10.4 10,11 L10,15 C10,15.601 10.4,16 11,16 C11.6,16 12,15.601 12,15 L12,11 C12,10.4 11.6,10 11,10 M10.2998,6.2998 C10.0998,6.4998 9.9998,6.6998 9.9998,6.9998 C9.9998,7.2998 10.0998,7.4998 10.2998,7.6998 C10.4998,
+    7.9008 10.6998,7.9998 10.9998,7.9998 C11.2998,7.9998 11.4998,7.9008 11.6998,7.6998 C11.9008,7.4998 11.9998,7.2998 11.9998,6.9998 C11.9998,6.6998 11.9008,6.4998 11.6998,6.2998 C11.2998,5.9008 10.6998,5.9008 10.2998,6.2998"/>
+    </defs><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><use class="sdc-modal__svg-use" xlink:href="#info-a"/></g></svg>`;
+  private warningSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24"><defs><path fill="#000" id="alert-a" d="M20.5815,18.7997 C20.3815,
+    18.9997 20.0815,19.0997 19.8815,19.0997 L2.8815,19.0997 C2.6815,19.0997 2.5815,19.0997 2.3815,18.9997 C1.8815,18.6997 1.7815,18.0997 1.9815,17.5997 L10.4815,3.4997 C10.5815,3.4007 10.6815,3.1997 10.7815,3.1997 C11.2815,
+    2.9007 11.8815,3.0997 12.1815,3.4997 L20.6825,17.5997 C20.7815,17.6997 20.7815,17.9007 20.7815,18.0997 C20.8815,18.4007 20.6825,18.5997 20.5815,18.7997 M22.3815,16.5997 L13.9815,2.4007 C13.5815,1.6997 12.8815,1.1997 12.0815,
+    0.9997 C11.2815,0.7997 10.4815,0.9007 9.7815,1.2997 C9.3815,1.4997 8.9815,1.9007 8.7815,2.2997 L0.3815,16.5997 C-0.4185,17.9997 0.0815,19.9007 1.4815,20.6997 C1.8815,20.9997 2.3815,21.0997 2.8815,21.0997 L19.8815,
+    21.0997 C20.6825,21.0997 21.4815,20.7997 21.9815,20.1997 C22.5815,19.5997 22.8815,18.9007 22.8815,18.0997 C22.7815,17.5997 22.6825,16.9997 22.3815,16.5997 M11,7 C10.4,7 10,7.4 10,8 L10,12 C10,12.601 10.4,13 11,13 C11.6,13 12,
+    12.601 12,12 L12,8 C12,7.4 11.6,7 11,7 M10.3,15.3 C10.1,15.499 10,15.699 10,15.999 C10,16.3 10.1,16.499 10.3,16.699 C10.5,16.9 10.7,16.999 11,16.999 C11.3,16.999 11.5,16.9 11.7,16.699 C11.9,16.499 12,16.199 12,15.999 C12,
+    15.8 11.9,15.499 11.7,15.3 C11.3,14.9 10.7,14.9 10.3,15.3"/></defs><g fill="#ffb81c" fill-rule="evenodd" transform="translate(1 1)"><use class="sdc-modal__svg-use" xlink:href="#alert-a"/></g></svg>`;
+  private errorSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24"><defs><path fill="#000" id="x-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,
+    2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M14.2591,7.29935 C13.8591,6.90035 13.2591,6.90035 12.8591,7.29935 L10.5591,9.59935 L8.2591,
+    7.29935 C7.8591,6.90035 7.2591,6.90035 6.8591,7.29935 C6.4591,7.69935 6.4591,8.29935 6.8591,8.69935 L9.1581,10.99935 L6.8591,13.29935 C6.4591,13.69935 6.4591,14.29935 6.8591,14.69935 C7.0591,14.90035 7.2591,14.99935 7.5591,
+    14.99935 C7.8591,14.99935 8.0591,14.90035 8.2591,14.69935 L10.5591,12.40035 L12.8591,14.69935 C13.0591,14.90035 13.3591,14.99935 13.5591,14.99935 C13.7591,14.99935 14.0591,14.90035 14.2591,14.69935 C14.6581,14.29935 14.6581,
+    13.69935 14.2591,13.29935 L11.9591,10.99935 L14.2591,8.69935 C14.6581,8.29935 14.6581,7.69935 14.2591,7.29935"/></defs><g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+    <use class="sdc-modal__svg-use" xlink:href="#x-a"/></g></svg>`;
+  private successSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24" fill="#4ca90c"><path id="success+20-a" d="M20.1825992,10.445793 C20.6735306,
+    10.445793 21.0008182,10.7730806 21.0008182,11.264012 L21.0008182,12.0004091 C21.0008182,16.9915451 16.9915451,21 12.0004091,21 C7.00927315,21 3,16.9915451 3,12.0004091 C3,7.00927315 7.00927315,3 12.0004091,3 C13.3095595,3 14.536888,
+    3.3272876 15.6823947,3.81821901 C16.0915042,3.98186281 16.255148,4.47279422 16.0915042,4.88190372 C15.9278604,5.29101323 15.436929,5.45465703 15.0278194,5.29101323 C14.0459566,4.88190372 13.0640938,4.63643802 12.0004091,
+    4.63643802 C7.90931406,4.63643802 4.63643802,7.90931406 4.63643802,12.0004091 C4.63643802,16.0906859 7.90931406,19.363562 12.0004091,19.363562 C16.0915042,19.363562 19.3643802,16.0906859 19.3643802,12.0004091 L19.3643802,
+    11.264012 C19.3643802,10.7730806 19.6916678,10.445793 20.1825992,10.445793 Z M21.5737352,4.06343925 C21.9002046,4.39072685 21.9002046,4.88165826 21.5737352,5.20894586 L12.5733261,14.209355 C12.4096823,14.3729988 12.1642166,
+    14.4548207 12.0005728,14.4548207 C11.836929,14.4548207 11.5914632,14.3729988 11.4278194,14.209355 L8.97316242,11.7546979 C8.64587481,11.4274103 8.64587481,10.9364789 8.97316242,10.6091913 C9.30045002,10.2819037 9.79138143,
+    10.2819037 10.118669,10.6091913 L12.0005728,12.491095 L20.4282286,4.06343925 C20.7555162,3.73615164 21.2464476,3.73615164 21.5737352,4.06343925 Z"></path></svg>`;
+  private noSvg = ``;
+
+  constructor(private renderer: Renderer,
+              private domSanitizer: DomSanitizer) {
+    this.modalVisible = true;
+  }
+
+  ngOnInit() {
+
+    switch (this.type) {
+      case ModalType.info:
+        this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.infoSvg);
+        break;
+      case ModalType.warning:
+        this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.warningSvg);
+        break;
+      case ModalType.error:
+        this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.errorSvg);
+        break;
+      case ModalType.success:
+        this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.successSvg);
+        break;
+      default:
+        this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.noSvg);
+    }
+  }
+
+  public modalToggled = (toggleEvent: any) => {
+    if (!toggleEvent.toState) {
+      this.instanceRef.destroy();
+    }
+  }
+
+  public getCloseButton = (): ModalCloseButtonComponent => {
+    return this.modalCloseButton;
+  }
+
+  public getButtonById = (id: string): CustomModalButtonComponent => {
+    // Support ES5
+    // return this.buttons.find((button) => {
+    return this.buttons.filter((button) => {
+      return button.id && button.id === id;
+    })[0];
+  }
+
+  public getButtons = (): CustomModalButtonComponent[] => {
+    return this.buttons;
+  }
+
+  public setButtons = (_buttons: CustomModalButtonComponent[]): void => {
+    this.buttons = _buttons;
+  }
+
+  public getTitle = (): string => {
+    return this.title;
+  }
+
+  public setTitle = (_title: string): void => {
+    this.title = _title;
+  }
+
+  public hoverAnimation(evn: MouseEvent) {
+    this.renderer.setElementClass(evn.target as HTMLElement, 'sdc-ripple-click__animated', true);
+    // evn.taregt.classList.add('sdc-ripple-click__animated');
+  }
+
+  public closeModal = (btnName : string): void => {
+    this.onClose.emit(btnName);
+    this.modalVisible = false;
+  }
+
+  public disabledModal = (isDisabled: boolean): void => {
+    this.isDisabled = isDisabled;
+    this.buttons.forEach((button: CustomModalButtonComponent) => {
+      button.disabled = isDisabled;
+    });
+    this.modalCloseButton.disabled = false;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/button.type.ts b/vid-webpack-master/src/app/shared/components/customModal/models/button.type.ts
new file mode 100644
index 000000000..a0673013d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/models/button.type.ts
@@ -0,0 +1,8 @@
+export enum ButtonType {
+  primary = 'primary',
+  secondary = 'secondary',
+  success = 'success',
+  error = 'error',
+  warning = 'warning',
+  info = 'info'
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal-button.model.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal-button.model.ts
new file mode 100644
index 000000000..5e1f4a4a8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal-button.model.ts
@@ -0,0 +1,15 @@
+import {ButtonType} from "onap-ui-angular/dist/dist/common";
+import {Placement} from "./modal.placement";
+
+export interface IButtonComponent {
+  text: string;
+  disabled?: boolean;
+  type?: ButtonType;
+  testId?: string;
+  preventDoubleClick?: boolean;
+  icon_name?: string;
+  icon_position?: string;
+  show_spinner?: boolean;
+  spinner_position?: Placement;
+  size?: string;
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal.model.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal.model.ts
new file mode 100644
index 000000000..4b814f0aa
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal.model.ts
@@ -0,0 +1,26 @@
+import {ModalType} from "./modal.type";
+import {IButtonComponent} from "./modal-button.model";
+
+export interface IModalConfig {
+  size?: string; // xl|l|md|sm|xsm
+  title?: string;
+  titleIcon?: TitleIconDetails;
+  message?: string;
+  buttons?: IModalButtonComponent[];
+  testId?: string;
+  type?: ModalType;
+}
+
+export interface IModalButtonComponent extends IButtonComponent {
+  id?: string;
+  callback?: () => void;
+  closeModal?: boolean;
+}
+
+export interface TitleIconDetails {
+  iconName?: string;
+  iconMode?: string;
+  iconSize?: string;
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal.placement.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal.placement.ts
new file mode 100644
index 000000000..f7f229cd4
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal.placement.ts
@@ -0,0 +1,6 @@
+export enum Placement {
+  left = 'left',
+  right = 'right',
+  top = 'top',
+  bottom = 'bottom'
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal.size.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal.size.ts
new file mode 100644
index 000000000..0a96810c7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal.size.ts
@@ -0,0 +1,7 @@
+export enum ModalSize {
+  xlarge = "xl",
+  large = "l",
+  medium = "md",
+  small = "sm",
+  xsmall = "xsm"
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal.type.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal.type.ts
new file mode 100644
index 000000000..ca987ebba
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal.type.ts
@@ -0,0 +1,10 @@
+export enum ModalType {
+  info = 'info',
+  warning = 'warning',
+  error = 'error',
+  success = 'success',
+  action = 'action',
+  custom = 'custom'
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts b/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts
new file mode 100644
index 000000000..64fe66ce6
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts
@@ -0,0 +1,107 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  EmbeddedViewRef,
+  Injectable,
+  Injector, Type, ViewContainerRef
+} from "@angular/core";
+
+@Injectable()
+export class CreateDynamicComponentService {
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver,
+              private applicationRef: ApplicationRef,
+              private injector: Injector) {
+  }
+
+  /**
+   * Gets the root view container to inject the component to.
+   *
+   * @returns {ComponentRef<any>}
+   *
+   * @memberOf InjectionService
+   */
+  private getRootViewContainer(): ComponentRef<any> {
+    const rootComponents = this.applicationRef['components'];
+    if (rootComponents.length) {
+      return rootComponents[0];
+    }
+    throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.');
+  }
+
+  /**
+   * Gets the html element for a component ref.
+   *
+   * @param {ComponentRef<any>} componentRef
+   * @returns {HTMLElement}
+   *
+   * @memberOf InjectionService
+   */
+  private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement {
+    return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+  }
+
+  /**
+   * Gets the root component container html element.
+   *
+   * @returns {HTMLElement}
+   *
+   * @memberOf InjectionService
+   */
+  private getRootViewContainerNode(): HTMLElement {
+    return this.getComponentRootNode(this.getRootViewContainer());
+  }
+
+  /**
+   * Projects the inputs onto the component
+   *
+   * @param {ComponentRef<any>} component
+   * @param {*} options
+   * @returns {ComponentRef<any>}
+   *
+   * @memberOf InjectionService
+   */
+  private projectComponentInputs(component: ComponentRef<any>, options: any): ComponentRef<any> {
+    if (options) {
+      const props = Object.getOwnPropertyNames(options);
+      for (const prop of props) {
+        component.instance[prop] = options[prop];
+      }
+    }
+
+    return component;
+  }
+
+  public createComponentDynamically<T>(componentClass: Type<T>, options: any = {}, location: Element = this.getRootViewContainerNode()): ComponentRef<any> {
+    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
+    const componentRef = componentFactory.create(this.injector);
+    const componentRootNode = this.getComponentRootNode(componentRef);
+
+    // project the options passed to the component instance
+    this.projectComponentInputs(componentRef, options);
+    this.applicationRef.attachView(componentRef.hostView);
+
+    componentRef.onDestroy(() => {
+      this.applicationRef.detachView(componentRef.hostView);
+    });
+
+    location.appendChild(componentRootNode);
+    return componentRef;
+  }
+
+  /**
+   * Inserts a component into an existing viewContainer
+   * @param componentType - type of component to create
+   * @param options - Inputs to project on new component
+   * @param vcRef - viewContainerRef in which to insert the newly created component
+   */
+  public insertComponentDynamically<T>(componentType: Type<T>, options: any = {}, vcRef: ViewContainerRef): ComponentRef<any> {
+    const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+    const dynamicComponent = factory.create(vcRef.parentInjector);
+    this.projectComponentInputs(dynamicComponent, options);
+    vcRef.insert(dynamicComponent.hostView);
+    return dynamicComponent;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts b/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts
new file mode 100644
index 000000000..f46ee4896
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts
@@ -0,0 +1,64 @@
+import {ComponentRef, Injectable, Type} from "@angular/core";
+import {CreateDynamicComponentService} from "./create-dynamic-component.service";
+import {ModalType} from "../models/modal.type";
+import {ButtonType} from "../models/button.type";
+import {ModalButtonComponent} from "onap-ui-angular/dist/modals/modal-button.component";
+import {ModalSize} from "../models/modal.size";
+import {IModalConfig} from "../models/modal.model";
+import {ModalComponent} from "../modal.component";
+
+
+@Injectable()
+export class ModalService {
+
+  constructor(private createDynamicComponentService: CreateDynamicComponentService) {
+  }
+
+  private getBaseModal = (type: ModalType | ButtonType, title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+    const modalConfig = {
+      size: ModalSize.small,
+      title: title,
+      message: message,
+      testId: testId,
+      buttons: buttons ? buttons : [{text: 'OK', type: type, closeModal: true}],
+      type: type
+    } as IModalConfig;
+    const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig);
+    return modalInstance.instance;
+  };
+
+  /* Shortcut method to open basic modals with title, message, and OK button that simply closes the modal. */
+  public openInfoModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+
+    return this.getBaseModal(ModalType.info, title, message, testId, buttons);
+  };
+
+  public openWarningModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+    return this.getBaseModal(ModalType.warning, title, message, testId, buttons);
+  };
+
+  public openErrorModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+    return this.getBaseModal(ModalType.error, title, message, testId, buttons);
+  };
+
+  public openSuccessModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => {
+    return this.getBaseModal(ModalType.success, title, message, testId, buttons);
+  };
+
+  public openCustomModal = (modalConfig: IModalConfig, dynamicComponentType: Type<any>, dynamicComponentInput?: any) => {
+    const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig);
+    this.createInnnerComponent(modalInstance, dynamicComponentType, dynamicComponentInput);
+    return modalInstance.instance;
+  };
+
+  public createInnnerComponent = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput?: any): void => {
+    modalInstance.instance.innerModalContent = this.createDynamicComponentService.insertComponentDynamically(dynamicComponentType, dynamicComponentInput, modalInstance.instance.dynamicContentContainer);
+  };
+
+  public openModal = (customModalData: IModalConfig): ComponentRef<ModalComponent> => {
+    let modalInstance: ComponentRef<ModalComponent> = this.createDynamicComponentService.createComponentDynamically(ModalComponent, customModalData);
+    modalInstance.instance.instanceRef = modalInstance;
+    return modalInstance;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts
index 2c2172005..aadf13ebe 100644
--- a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts
@@ -11,7 +11,7 @@ import {FileFormControl} from "../../../../models/formControlModels/fileFormCont
 export class FileFormControlComponent {
   @Input() data: FileFormControl = null;
   @Input() form: FormGroup;
-  @ViewChild('fileUploader')
+  @ViewChild('fileUploader', {static: false})
   fileUploader:ElementRef ;
 
   onDelete(event, data, form) {
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts
index 1e8c28104..7a7ab72d0 100644
--- a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts
+++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts
@@ -9,7 +9,7 @@ import {FormGroup} from "@angular/forms";
 })
 
 export class InputFormControlComponent{
-  @ViewChild('customInput') element:ElementRef;
+  @ViewChild('customInput', {static: false}) element:ElementRef;
   @Input() data: InputFormControl = null;
   @Input() form: FormGroup;
 
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts
index 9bcc02d73..13438929b 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts
@@ -11,9 +11,9 @@ import {IframeService} from "../../../utils/iframe.service";
 import {DefaultDataGeneratorService} from "../../../services/defaultDataServiceGenerator/default.data.generator.service";
 import {FormControlModel} from "../../../models/formControlModels/formControl.model";
 import {BasicPopupService} from "./basic.popup.service";
-import {SdcUiServices} from "onap-ui-angular";
 import {FeatureFlagsService} from "../../../services/featureFlag/feature-flags.service";
 import {getTestBed, TestBed} from "@angular/core/testing";
+import {ModalService} from "../../customModal/services/modal.service";
 
 class MockAppStore<T> {}
 
@@ -1996,7 +1996,7 @@ describe('Basic popup service', () => {
         {provide:FeatureFlagsService, useClass: MockFeatureFlagsService},
         {provide: NgRedux, useClass: MockReduxStore},
         {provide: HttpClient, useClass: MockAppStore},
-        {provide: SdcUiServices.ModalService, useClass: MockModalService}
+        {provide: ModalService, useClass: MockModalService}
       ]
     });
     await TestBed.compileComponents();
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts
index 34d6850eb..a32320ea4 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts
@@ -14,6 +14,7 @@ import {BasicPopupService} from "../basic.popup.service";
 import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flags.service";
 import {getTestBed, TestBed} from "@angular/core/testing";
 import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../customModal/services/modal.service";
 
 class MockAppStore<T> {}
 
@@ -2001,7 +2002,7 @@ describe('Network popup service', () => {
         {provide:FeatureFlagsService, useClass: MockFeatureFlagsService},
         {provide: NgRedux, useClass: MockReduxStore},
         {provide: HttpClient, useClass: MockAppStore},
-        {provide: SdcUiServices.ModalService, useClass: MockModalService}
+        {provide: ModalService, useClass: MockModalService}
       ]
     });
     await TestBed.compileComponents();
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts
index 3a106ec93..6d996930a 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts
@@ -11,10 +11,10 @@ import {BasicPopupService} from "../basic.popup.service";
 import {ServicePopupService} from "./service.popup.service";
 import {ServiceControlGenerator} from "../../../genericForm/formControlsServices/service.control.generator";
 import {FormControlModel} from "../../../../models/formControlModels/formControl.model";
-import {SdcUiServices} from "onap-ui-angular";
 import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flags.service";
 import {getTestBed, TestBed} from "@angular/core/testing";
 import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../customModal/services/modal.service";
 
 class MockModalService<T> {}
 
@@ -2067,7 +2067,7 @@ describe('Service popup service', () => {
         {provide:FeatureFlagsService, useClass: MockFeatureFlagsService},
         {provide: NgRedux, useClass: MockReduxStore},
         {provide: HttpClient, useClass: MockAppStore},
-        {provide: SdcUiServices.ModalService, useClass: MockModalService}
+        {provide: ModalService, useClass: MockModalService}
       ]
     });
     await TestBed.compileComponents();
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service.spec.ts
index b16c5bdc0..85626528b 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service.spec.ts
@@ -10,10 +10,10 @@ import {DefaultDataGeneratorService} from "../../../../services/defaultDataServi
 import {BasicPopupService} from "../basic.popup.service";
 import {VfModulePopupService} from "./vfModule.popup.service";
 import {VfModuleControlGenerator} from "../../../genericForm/formControlsServices/vfModuleGenerator/vfModule.control.generator";
-import {SdcUiServices} from "onap-ui-angular";
 import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flags.service";
 import {getTestBed, TestBed} from "@angular/core/testing";
 import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../customModal/services/modal.service";
 
 class MockModalService<T> {}
 
@@ -1996,7 +1996,7 @@ describe('VFModule popup service', () => {
         {provide:FeatureFlagsService, useClass: MockFeatureFlagsService},
         {provide: NgRedux, useClass: MockReduxStore},
         {provide: HttpClient, useClass: MockAppStore},
-        {provide: SdcUiServices.ModalService, useClass: MockModalService}
+        {provide: ModalService, useClass: MockModalService}
       ]
     });
     await TestBed.compileComponents();
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts
index 2ca992f08..94def926a 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts
@@ -26,6 +26,7 @@ import {ServiceActions} from "../../../../storeUtil/utils/service/service.action
 import {FormControlModel} from "../../../../models/formControlModels/formControl.model";
 import * as _ from "lodash";
 import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {ModalService} from "../../../customModal/services/modal.service";
 
 class MockModalService<T> {}
 
@@ -87,7 +88,7 @@ describe('VFModule popup service', () => {
         {provide: FeatureFlagsService, useClass: MockFeatureFlagsService},
         {provide: NgRedux, useClass: MockReduxStore},
         {provide: HttpClient, useClass: MockAppStore},
-        {provide: SdcUiServices.ModalService, useClass: MockModalService}
+        {provide: ModalService, useClass: MockModalService}
       ]
     });
     await TestBed.compileComponents();
diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts
index c610110fd..5251a0aae 100644
--- a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts
@@ -30,7 +30,7 @@
 import { Component } from '@angular/core';
 import { MessageBoxData} from './messageBox.data';
 import { MessageBoxService } from './messageBox.service';
-import { SdcUiServices} from "onap-ui-angular";
+import {ModalService} from "../customModal/services/modal.service";
 
 @Component({
   selector: 'message-box',
@@ -38,9 +38,9 @@ import { SdcUiServices} from "onap-ui-angular";
 })
 
 export class MessageBoxComponent {
-  modalService: SdcUiServices.ModalService;
+  modalService: ModalService;
   isOpened : boolean = false;
-  constructor(modalService: SdcUiServices.ModalService, private _messageBoxService : MessageBoxService) {
+  constructor(modalService: ModalService, private _messageBoxService : MessageBoxService) {
     this.modalService = modalService;
 
     MessageBoxService.openModal.subscribe((messageBoxData: MessageBoxData) => {
diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts
index 47f849059..7d9561c9a 100644
--- a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts
+++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts
@@ -44,7 +44,7 @@ export class SearchElementsModalComponent extends DialogComponent<{ modalInforma
     })
   }
 
-  @ViewChild('ElementsTableComponent') membersTable;
+  @ViewChild('ElementsTableComponent', {static: false}) membersTable;
 
   ngOnInit(selectedRowsIds?: string[]): void {
     const genericModalHelper = this._store.getState().global.genericModalHelper;
diff --git a/vid-webpack-master/src/app/shared/services/aaiService/aai.epics.ts b/vid-webpack-master/src/app/shared/services/aaiService/aai.epics.ts
index a850d55da..3a05157ae 100644..100755
--- a/vid-webpack-master/src/app/shared/services/aaiService/aai.epics.ts
+++ b/vid-webpack-master/src/app/shared/services/aaiService/aai.epics.ts
@@ -22,7 +22,6 @@ import {
   updateProductFamilies, updateUserId
 } from "../../storeUtil/utils/general/general.actions";
 import {createServiceInstance} from "../../storeUtil/utils/service/service.actions";
-import {delay, mapTo} from "rxjs/operators";
 
 const notFetchedAlready = (state: AppState): boolean => state.service.productFamilies !== null;
 
@@ -30,7 +29,6 @@ const notFetchedAlready = (state: AppState): boolean => state.service.productFam
 export class AAIEpics {
   constructor(private aaiService: AaiService) {
   }
-
   public createEpic() {
     return combineEpics(
         this.loadProductFamiliesEpic
@@ -49,7 +47,11 @@ export class AAIEpics {
 
   private loadProductFamiliesEpic = (action$, store) => action$
     .ofType(LOAD_PRODUCT_FAMILIES)
-    .switchMap(() => this.aaiService.getProductFamilies().map(data => updateProductFamilies(data)));
+    .switchMap(() =>
+      this.aaiService.getProductFamilies()
+        .map(data =>
+          updateProductFamilies(data)
+      ));
 
   private loadCategoryParameters = (action$, store) => action$
     .ofType(LOAD_CATEGORY_PARAMETERS)
@@ -64,7 +66,9 @@ export class AAIEpics {
   private loadServiceAccordingToUuid = (action$, store) => action$
     .ofType(LOAD_SERVICE_MDOEL_BY_UUID)
     .switchMap((action) => this.aaiService.getServiceModelById(action.modelId)
-      .map(data => createServiceInstance(action.uuid, data)));
+      .map(data =>
+        createServiceInstance(action.uuid, data))
+    );
 
   private loadUserId = (action$, store) => action$
     .ofType(LOAD_USER_ID)
diff --git a/vid-webpack-master/src/app/shared/shared.module.ts b/vid-webpack-master/src/app/shared/shared.module.ts
index f95f86149..98db41d41 100644
--- a/vid-webpack-master/src/app/shared/shared.module.ts
+++ b/vid-webpack-master/src/app/shared/shared.module.ts
@@ -80,6 +80,15 @@ import {SearchFilterPipe} from "./pipes/searchFilter/search-filter.pipe";
 import {RecreateResolver} from "./resolvers/recreate/recreate.resolver";
 import {InstantiationTemplatesService} from "./services/templateService/instantiationTemplates.service";
 import {SharedControllersService} from "./components/genericForm/formControlsServices/sharedControlles/shared.controllers.service";
+import {DuplicateVnfComponent} from "../drawingBoard/service-planning/duplicate/duplicate-vnf.component";
+import {ModalService} from "./components/customModal/services/modal.service";
+import {CreateDynamicComponentService} from "./components/customModal/services/create-dynamic-component.service";
+import {ModalComponent} from "./components/customModal/modal.component";
+import {ModalCloseButtonComponent} from './components/customModal/components/modalCloseButton/modal-close-button.component';
+import {CustomButtonComponent} from "./components/customButton/custom-button.component";
+import {CustomModalButtonComponent} from "./components/customModal/components/modalButton/modal-button.component";
+import {CustomRippleClickAnimationDirective} from "./components/customModal/directives/ripple-click.animation.directive";
+
 
 
 @NgModule({
@@ -110,6 +119,7 @@ import {SharedControllersService} from "./components/genericForm/formControlsSer
     NumberFormControlComponent,
     InputPreventionPatternDirective,
     ClickOutsideDirective,
+    CustomRippleClickAnimationDirective,
     FormGeneralErrorsComponent,
     SpinnerComponent,
     NoContentMessageAndIconComponent,
@@ -133,7 +143,11 @@ import {SharedControllersService} from "./components/genericForm/formControlsSer
     ErrorMsgComponent,
     DynamicInputsComponent,
     DynamicInputLabelPipe,
-    InstantiationTemplatesModalComponent
+    InstantiationTemplatesModalComponent,
+    ModalComponent,
+    ModalCloseButtonComponent,
+    CustomButtonComponent,
+    CustomModalButtonComponent
   ],
   exports: [
     PopoverComponent,
@@ -142,6 +156,7 @@ import {SharedControllersService} from "./components/genericForm/formControlsSer
     FormControlErrorComponent,
     DropdownFormControlComponent,
     InputPreventionPatternDirective,
+    CustomRippleClickAnimationDirective,
     ClickOutsideDirective,
     FormGeneralErrorsComponent,
     SpinnerComponent,
@@ -165,17 +180,24 @@ import {SharedControllersService} from "./components/genericForm/formControlsSer
     ErrorMsgComponent,
     SvgComponent,
     DynamicInputsComponent,
-    DynamicInputLabelPipe
+    DynamicInputLabelPipe,
+    ModalComponent,
+    ModalCloseButtonComponent,
+    CustomButtonComponent,
+    CustomModalButtonComponent
   ],
   entryComponents : [
     GenericFormPopupComponent,
     SearchElementsModalComponent,
-    InstantiationTemplatesModalComponent
+    InstantiationTemplatesModalComponent,
+    DuplicateVnfComponent,
+    ModalComponent
   ],
   providers: [
     ServiceInfoService,
     MessageBoxService,
-    SdcUiServices.ModalService,
+    CreateDynamicComponentService,
+    ModalService,
     SdcUiServices.LoaderService,
     HttpInterceptorService,
     IframeService,
diff --git a/vid-webpack-master/src/app/shared/store/module.ts b/vid-webpack-master/src/app/shared/store/module.ts
index 5a81f36ec..5a81f36ec 100644..100755
--- a/vid-webpack-master/src/app/shared/store/module.ts
+++ b/vid-webpack-master/src/app/shared/store/module.ts
diff --git a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts
index 623a4f42f..aa381684c 100644
--- a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts
+++ b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts
@@ -27,7 +27,7 @@ export class Formasync implements OnInit {
 
   constructor(private store: NgRedux<AppState>, private _formAsyncService: FormAsyncService) { }
 
-  @ViewChild('form') form: NgForm;
+  @ViewChild('form', {static: false}) form: NgForm;
   @Input()
   set params(params: any) {
     if (params) {
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
index c0aeb0b51..b7961ea38 100644
--- a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
@@ -21,7 +21,7 @@ export class NetworkSelectorComponent implements OnInit {
   @select(['service', 'networkFunctions'])
   readonly networkFunctions: Observable<any>;
 
-  @ViewChild('form') form: NgForm;
+  @ViewChild('form', {static: false}) form: NgForm;
 
   constructor(store: NgRedux<AppState>) {
     this.localStore = store;
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
index 87f117202..43e14e922 100644
--- a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
@@ -71,11 +71,8 @@ export class VlanTaggingComponent implements OnInit {
   readonly userIdObs: Observable<any>;
 
 
-  @ViewChild(NetworkSelectorComponent)
-  public networkSelectorComponent: NetworkSelectorComponent;
-  @ViewChild(Formasync)
-  public formAsync: Formasync;
-
+  @ViewChild(NetworkSelectorComponent, {static: false}) networkSelectorComponent: NetworkSelectorComponent;
+  @ViewChild(Formasync, {static: false}) formAsync: Formasync;
 
   deploySubInterface() {
 
@@ -186,9 +183,9 @@ export class VlanTaggingComponent implements OnInit {
   isNextButtonDisabled() {
     switch (this.currentStep) {
       case WizardSteps.one:
-        return !this.formAsync.form.valid;
+        return this.formAsync ? !this.formAsync.form.valid : false;
       case WizardSteps.two:
-        return !this.networkSelectorComponent.form.valid;
+        return this.networkSelectorComponent ? !this.networkSelectorComponent.form.valid : false;
     }
   }