Sync Integ to Master

Change-Id: I71e3acc26fa612127756ac04073a522b9cc6cd74
Issue-ID: SDC-977
Signed-off-by: Gitelman, Tal (tg851x) <tg851x@intl.att.com>

53 files changed, 1143 insertions, 169 deletions

diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
index b8b0e80861..12f8df8296 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
@@ -18,6 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 
+import * as _ from "lodash";
 import {Component, Inject, Input, Output, EventEmitter} from "@angular/core";
 import {IHostedApplication, IUserProperties} from "app/models";
 import {MenuItemGroup, MenuItem} from "app/utils";
@@ -142,9 +143,9 @@ export class TopNavComponent {
         }
     }
 
-    goToState(state:string, params:any):Promise<boolean> {
+    goToState(state:string, params:Array<any>):Promise<boolean> {
         return new Promise((resolve, reject) => {
-            this.$state.go(state, params || undefined);
+            this.$state.go(state, params && params.length > 0 ? [0] : undefined);
             resolve(true);
         });
     }
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
index ddda82ab58..cc8aed70d4 100644
--- a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html
@@ -7,7 +7,7 @@
                 <checkbox [label]="'All'" [(checked)]="allSelected" (checkedChange)="selectAll()" data-tests-id="filter-checkbox-all"></checkbox>
             </div>
             <div *ngFor="let type of typesOptions">
-                <checkbox [label]="type" [(checked)]="selectedTypes[type]" (checkedChange)="onTypeSelected(type)"></checkbox>
+                <checkbox [label]="type" [(checked)]="selectedTypes[type]" (checkedChange)="onTypeSelected(type)" [attr.data-tests-id]="'filter-checkbox-' + type.toLowerCase()"></checkbox>
             </div>
         </div>
         <div class="field">
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts
index 5a9bfbcecb..fe2c7bb09a 100644
--- a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts
@@ -21,6 +21,7 @@
 /**
  * Created by rc2122 on 5/16/2017.
  */
+import * as _ from "lodash";
 import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core';
 import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models";
 import * as sdcConfig from "../../../../../../configurations/dev"
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
index dc0a02c277..1698157e90 100644
--- a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
@@ -37,12 +37,10 @@ export class HierarchyNavigationComponent {
 
     onClick = ($event, item) => {
         $event.stopPropagation();
-        this.selectedItem = item;
         this.updateSelected.emit(item);
     };
 
     onSelectedUpdate = ($event) => {
-        this.selectedItem = $event;
         this.updateSelected.emit($event);
     }
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
index 57e0474c66..b7cde7eb23 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html
@@ -30,11 +30,11 @@
                     <dynamic-element class="value-input"
                                      *ngIf="input.isSimpleType"
                                      pattern="validationUtils.getValidationPattern(input.type)"
-                                     [(value)]="input.defaultValue"
+                                     [value]="input.defaultValueObj"
                                      [type]="input.type"
                                      [name]="input.name"
-                                 (change)="onInputValueChanged(input);"
-                                 [readonly]="readonly">
+                                     (elementChanged)="onInputChanged(input, $event)"
+                                     [readonly]="readonly">
                     </dynamic-element>
                     <div class="delete-button-container">
                         <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
index 0545874f53..d709f3f0c5 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
@@ -11,7 +11,7 @@
     text-align:left;
 
     .inner-cell-div{
-        width: 100%;
+        max-width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
         height: 20px;
@@ -85,8 +85,8 @@
             border-right:#d2d2d2 solid 1px;
         }
         &.col1 {
-            flex: 1 0 200px;
-            max-width:300px;
+            flex: 1 0 210px;
+            max-width:210px;
             display: flex;
             justify-content: space-between;
 
@@ -121,7 +121,6 @@
 
             .value-input {
                 flex: 1;
-                max-height: 24px;
                 border: none;
                 background-color: inherit;
 
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
index 0add1cd707..ebecbc9390 100644
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts
@@ -36,7 +36,7 @@ export class InputsTableComponent {
     @Input() instanceNamesMap: Map<string, string>;
     @Input() readonly:boolean;
     @Input() isLoading:boolean;
-    @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>();
 
     selectedInputToDelete:InputFEModel;
@@ -44,8 +44,9 @@ export class InputsTableComponent {
     constructor(private modalService: ModalService){
     }
 
-    onInputValueChanged = (input) => {
-        this.inputValueChanged.emit(input);
+    onInputChanged = (input, event) => {
+        input.updateDefaultValueObj(event.value, event.isValid);
+        this.inputChanged.emit(input);
     };
 
     onDeleteInput = () => {
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
index 14b6c7d4c0..4805875d83 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html
@@ -10,7 +10,16 @@
         </div>
         <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
         <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
-            <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':!mapKey.validity.valid}" required/>
+            <!--<input [value]="property.mapKey" [placeholder]="property.name" (input)="mapKeyChanged.emit($event.target.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':property.mapKeyError}" required/>-->
+            <dynamic-element #mapKeyInput
+                class="value-input"
+                pattern="validationUtils.getValidationPattern(string)"
+                [value]="property.mapKey"
+                type="string"
+                [name]="property.name"
+                (elementChanged)="mapKeyChanged.emit($event.value)"
+                [readonly]="readonly"
+            ></dynamic-element>
         </div>
     </ng-container>
     <!-- RIGHT CELL OR FULL WIDTH CELL-->
@@ -18,11 +27,11 @@
         <div class="table-cell">
             <dynamic-element class="value-input"
                 pattern="validationUtils.getValidationPattern(property.type)"
-                [(value)]="property.valueObj"
+                [value]="property.valueObj"
                 [type]="property.isDeclared ? 'string' : property.type"
                 [name]="property.name"
                 [path]="property.propertiesName"
-                (valueChange)="valueChanged.emit();"
+                (elementChanged)="onElementChanged($event)"
                 [readonly]="readonly || property.isDeclared || property.isDisabled"
             ></dynamic-element>
         </div>
@@ -54,8 +63,8 @@
             [propertyNameSearchText]="propertyNameSearchText"
             [readonly]="readonly"
             [hasChildren]="getHasChildren(prop)"
-            (valueChanged)="childValueChanged(prop)"
-            (mapKeyChanged)="removeValueFromParent(prop, $event)"
+            (propertyChanged)="childValueChanged(prop)"
+            (mapKeyChanged)="updateChildKeyInParent(prop, $event)"
             (expandChild)="expandChildById($event)"
             (deleteItem)="deleteListOrMapItem($event)"
             (clickOnPropertyRow)="onClickPropertyRow($event)"
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
index 04cb26d030..6f7e57b643 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts
@@ -18,13 +18,15 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Component, Input, Output, EventEmitter} from "@angular/core";
+import * as _ from "lodash";
+import {Component, Input, Output, EventEmitter, ViewChild, ComponentRef} from "@angular/core";
 import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models";
 import { PROPERTY_TYPES } from 'app/utils';
 import { DataTypeService } from "../../../../services/data-type.service";
 import { trigger, state, style, transition, animate } from '@angular/core';
 import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils";
-
+import {IUiElementChangeEvent} from "../../../ui/form-components/ui-element-base.component";
+import {DynamicElementComponent} from "../../../ui/dynamic-element/dynamic-element.component";
 
 @Component({
     selector: 'dynamic-property',
@@ -49,7 +51,7 @@ export class DynamicPropertyComponent {
     @Input() hasChildren: boolean;
     @Input() hasDeclareOption:boolean;
 
-    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output('propertyChanged') emitter: EventEmitter<void> = new EventEmitter<void>();
     @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
     @Output() checkProperty: EventEmitter<string> = new EventEmitter<string>();
     @Output() deleteItem: EventEmitter<string> = new EventEmitter<string>();
@@ -57,6 +59,7 @@ export class DynamicPropertyComponent {
     @Output() mapKeyChanged: EventEmitter<string> = new EventEmitter<string>();
     @Output() addChildPropsToParent: EventEmitter<Array<DerivedFEProperty>> = new EventEmitter<Array<DerivedFEProperty>>();
 
+    @ViewChild('mapKeyInput') public mapKeyInput: DynamicElementComponent;
 
     constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) {
     }
@@ -68,6 +71,17 @@ export class DynamicPropertyComponent {
         this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length;
     }
 
+    ngDoCheck() {
+        // set custom error for mapKeyInput
+        if (this.mapKeyInput) {
+            const mapKeyInputControl = this.mapKeyInput.cmpRef.instance.control;
+            const mapKeyError = (<DerivedFEProperty>this.property).mapKeyError;
+            if (mapKeyInputControl.getError('mapKeyError') !== mapKeyError) {
+                mapKeyInputControl.setErrors({mapKeyError});
+            }
+        }
+    }
+
 
     onClickPropertyRow = (property, event) => {
         // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined
@@ -91,9 +105,15 @@ export class DynamicPropertyComponent {
         }).length > 1;
     }
 
+    onElementChanged = (event: IUiElementChangeEvent) => {
+        this.property.updateValueObj(event.value, event.isValid);
+        this.emitter.emit();
+    };
+
     createNewChildProperty = (): void => {
 
-        let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined);
+        let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", null);
+        this.propertiesUtils.assignFlattenedChildrenValues(this.property.valueObj, [newProps[0]], this.property.propertiesName);
         if (this.property instanceof PropertyFEModel) {
             this.addChildProps(newProps, this.property.name);
         } else {
@@ -108,28 +128,25 @@ export class DynamicPropertyComponent {
             this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator
             this.expandChildById(newProps[0].propertiesName);
 
-
-            if(!newProps[0].schema.property.isSimpleType){
-                if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type)
-                    this.updateMapKeyValueOnMainParent(newProps);
-                    if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) {
-                        this.valueChanged.emit(this.property.name);
-                    }
-                }
-            }
+            this.updateMapKeyValueOnMainParent(newProps);
+            this.emitter.emit();
         }
     }
 
     updateMapKeyValueOnMainParent(childrenProps: Array<DerivedFEProperty>){
         if (this.property instanceof PropertyFEModel) {
+            const property: PropertyFEModel = <PropertyFEModel>this.property;
             //Update only if all this property parents has key name
-            if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){
+            if (property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){
                 angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props
-                    (<PropertyFEModel>this.property).childPropUpdated(prop);
+                    property.childPropUpdated(prop);
+                    if (prop.isChildOfListOrMap && prop.mapKey !== undefined) {
+                        property.childPropMapKeyUpdated(prop, prop.mapKey, true);
+                    }
                 },this);
                 //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added)
-                let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(childrenProps[0].propertiesName, []);
-                childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.'));
+                let parentNames = (<PropertyFEModel>property).getParentNamesArray(childrenProps[0].propertiesName, []);
+                childrenProps[0].valueObj = _.get(property.valueObj, parentNames.join('.'), null);
             }
         }
     }
@@ -140,7 +157,7 @@ export class DynamicPropertyComponent {
             if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save
                 this.property.childPropUpdated(property);
                 this.dataTypeService.checkForCustomBehavior(this.property);
-                this.valueChanged.emit(this.property.name);
+                this.emitter.emit();
             }
         }
     }
@@ -153,46 +170,42 @@ export class DynamicPropertyComponent {
         }
     }
 
-    removeValueFromParent = (item: DerivedFEProperty, target?: any) => {
+    removeValueFromParent = (item: DerivedFEProperty) => {
         if (this.property instanceof PropertyFEModel) {
-            let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName);
+            let itemParent = (item.parentName == this.property.name)
+                ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName);
+            if (!itemParent) {
+                return;
+            }
 
             if (item.derivedDataType == DerivedPropertyType.MAP) {
-                let oldKey = item.mapKey;
-                if (target && typeof target.value == 'string') { //allow saving empty string
-                    let replaceKey:string = target.value;
-                    if (!replaceKey) {//prevent delete map key
-                        return;
-                    }
-                    if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists
-                        target.setCustomValidity('This key is already exists.');
-                        return;
-                    }else {
-                        target.setCustomValidity('');
-                        _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
-                        item.mapKey = replaceKey;
-                        //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it.
-                        if(!oldKey && !item.schema.property.isSimpleType){
-                            //Search this map item children and update these value on parent property valueOBj
-                            let mapKeyFlattenChildren:Array<DerivedFEProperty> = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => {
-                                return _.startsWith(prop.propertiesName, item.propertiesName);
-                            });
-                            this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren);
-                        }
-                    }
-                }
+                const oldKey = item.getActualMapKey();
                 delete itemParent.valueObj[oldKey];
+                if (itemParent instanceof PropertyFEModel) {
+                    delete itemParent.valueObjValidation[oldKey];
+                    itemParent.valueObjIsValid = itemParent.calculateValueObjIsValid();
+                }
+                this.property.childPropMapKeyUpdated(item, null);  // remove map key
             } else {
-                let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName);
+                const itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName);
                 itemParent.valueObj.splice(itemIndex, 1);
-            }
-            if (item.mapKey) {//prevent going to BE if user tries to delete map item without key (it was not saved in BE)
-                if (itemParent instanceof PropertyFEModel) { //direct child
-                    this.valueChanged.emit(this.property.name);
-                } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc)
-                    this.childValueChanged(itemParent);
+                if (itemParent instanceof PropertyFEModel) {
+                    itemParent.valueObjValidation.splice(itemIndex, 1);
+                    itemParent.valueObjIsValid = itemParent.calculateValueObjIsValid();
                 }
             }
+            if (itemParent instanceof PropertyFEModel) { //direct child
+                this.emitter.emit();
+            } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc)
+                this.childValueChanged(itemParent);
+            }
+        }
+    }
+
+    updateChildKeyInParent(childProp: DerivedFEProperty, newMapKey: string) {
+        if (this.property instanceof PropertyFEModel) {
+            this.property.childPropMapKeyUpdated(childProp, newMapKey);
+            this.emitter.emit();
         }
     }
 
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
index 933b80f577..ecfa7e7c5e 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html
@@ -48,7 +48,7 @@
                         [expandedChildId]="property.expandedChildPropertyId"
                         [propertyNameSearchText]="propertyNameSearchText"
                         [readonly]="readonly"
-                        (valueChanged)="propValueChanged(property);"
+                        (propertyChanged)="onPropertyChanged(property)"
                         (expandChild)="property.updateExpandedChildPropertyId($event)"
                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
                         (checkProperty)="propertyChecked(property, $event)"
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
index 32bbb1b3a0..093fae1684 100644
--- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts
@@ -39,7 +39,7 @@ export class PropertiesTableComponent {
     @Input() hasDeclareOption:boolean;
     @Input() hidePropertyType:boolean;
     
-    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
     @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
     @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption
 
@@ -49,8 +49,8 @@ export class PropertiesTableComponent {
     ngOnInit() {
     }
 
-    propValueChanged = (property) => {
-        this.valueChanged.emit(property);
+    onPropertyChanged = (property) => {
+        this.emitter.emit(property);
     };
 
     // Click on main row (row of propertyFEModel)
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html
index bcd33efc30..6e0f93f750 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html
@@ -22,7 +22,8 @@
             </div>
         </div>
         <div class="inner-container properties-table-container" *ngIf="selectedReqOrCapOption == 'Capability'" [ngClass]="{'cap-selected':selectedReqOrCapModel}">
-            <properties-table *ngIf="selectedReqOrCapModel"
+            <loader [display]="loadingCapabilityProperties" size="medium" [relative]="true"></loader>
+            <properties-table *ngIf="selectedReqOrCapModel && !loadingCapabilityProperties"
                               class="properties-table"
                               [readonly]="true"
                               [fePropertiesMap]="capabilityProperties"
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
index ab67dc1850..2e3c21c210 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts
@@ -1,10 +1,10 @@
 /**
  * Created by rc2122 on 9/4/2017.
  */
+import * as _ from "lodash";
 import {Component, EventEmitter, Input, OnInit, Output, SimpleChanges} from '@angular/core';
-import {RadioButtonModel, Match, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models";
+import {RadioButtonModel, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models";
 import {Dictionary} from "lodash";
-import {DropdownValue} from "../../ui/form-components/dropdown/ui-element-dropdown.component";
 import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service";
 import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils";
 import {Requirement} from "../../../../models/requirement";
@@ -33,7 +33,6 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
     @Input() selectedReqOrCapModel:RequirementCapabilityModel;
 
     @Output() updateSelectedReqOrCap:EventEmitter<RequirementCapabilityModel> = new EventEmitter<RequirementCapabilityModel>();
-    @Output() updateCapabilityProperties:EventEmitter<Array<PropertyModel>> = new EventEmitter<Array<PropertyModel>>();
 
     types:Array<string> = [];
     selectedType:string;
@@ -47,10 +46,14 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
     displayCapReqListFilterByType:RequirementCapabilityModel[];
 
     capabilityProperties:InstanceFePropertiesMap;
+    loadingCapabilityProperties:boolean;
+
+    private _loadingCapabilityProperties: Array<Capability>;
 
     constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2,
                 private propertiesUtils:PropertiesUtils) {
         this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)];
+        this._loadingCapabilityProperties = [];
     }
 
     private initDefaultReqOrCapSelection = (): void => {
@@ -87,14 +90,17 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
     initCapabilityPropertiesTable = ():void => {
         if(this.selectedReqOrCapModel instanceof Capability ) {
             let selectedCapability = <Capability>this.selectedReqOrCapModel;
-            if(selectedCapability.properties){
+            if (selectedCapability.properties && selectedCapability.properties.length) {
                 this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({ CAPABILITY : selectedCapability.properties}, false);
+            } else {
+                this.capabilityProperties = null;
             }
         }
     }
 
     ngOnChanges(changes:SimpleChanges) {
         if (changes.selectedReqOrCapModel) {
+            this.capabilityProperties = null;
             if (this.selectedReqOrCapModel && this.selectedReqOrCapOption === CAPABILITY) {
                 this.setCapabilityProperties();
             }
@@ -168,15 +174,27 @@ export class SelectRequirementOrCapabilityComponent implements OnInit {
 
     private setCapabilityProperties = ():void => {
         let selectedCapability = <Capability>this.selectedReqOrCapModel;
-        if (selectedCapability.properties === undefined) {
-            this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability.type, selectedCapability.name)
-                .subscribe((response:Array<PropertyModel>) => {
-                    this.capabilityProperties = (response && response.length) ? this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : response}, false) : null;
-                    this.updateCapabilityProperties.emit(response);
-                }, error => {});
-        }else{
-            this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : selectedCapability.properties}, false);
-            this.updateCapabilityProperties.emit(selectedCapability.properties);
+        if (!selectedCapability.properties) {
+            this.loadingCapabilityProperties = true;
+            if (this._loadingCapabilityProperties.indexOf(selectedCapability) == -1) {
+                this._loadingCapabilityProperties.push(selectedCapability);
+                this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability)
+                    .subscribe((response: Array<PropertyModel>) => {
+                        if (this.selectedReqOrCapModel === selectedCapability) {
+                            delete this.loadingCapabilityProperties;
+                        }
+                        this.initCapabilityPropertiesTable();
+                    }, (error) => {
+                        if (this.selectedReqOrCapModel === selectedCapability) {
+                            delete this.loadingCapabilityProperties;
+                        }
+                    }, () => {
+                        this._loadingCapabilityProperties.splice(this._loadingCapabilityProperties.indexOf(selectedCapability), 1);
+                    });
+            }
+        } else {
+            delete this.loadingCapabilityProperties;
+            this.initCapabilityPropertiesTable();
         }
     }
 }
diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts
index cb12dea02a..259ae12380 100644
--- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts
@@ -5,6 +5,7 @@ import {FormElementsModule} from "../../ui/form-components/form-elements.module"
 import {CommonModule} from "@angular/common";
 import {GlobalPipesModule} from "app/ng2/pipes/global-pipes.module";
 import {PropertyTableModule} from "../properties-table/property-table.module";
+import {UiElementsModule} from "../../ui/ui-elements.module";
 
 @NgModule({
     declarations: [
@@ -15,7 +16,9 @@ import {PropertyTableModule} from "../properties-table/property-table.module";
         FormsModule,
         FormElementsModule,
         GlobalPipesModule,
-        PropertyTableModule],
+        UiElementsModule,
+        PropertyTableModule
+    ],
 
     exports: [SelectRequirementOrCapabilityComponent],
     providers: []
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html
new file mode 100644
index 0000000000..72e083534c
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html
@@ -0,0 +1,11 @@
+<div class="service-path-selector">
+	<label>Service Paths:</label>
+	<ui-element-dropdown
+		class="path-dropdown"
+		data-tests-id="service-path-selector"
+		[readonly]="dropdownOptions.length < 3"
+		[(value)]="selectedPathId"
+		[values]="dropdownOptions"
+		(valueChange)="onSelectPath()">
+	</ui-element-dropdown>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less
new file mode 100644
index 0000000000..f3cb4a3c34
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less
@@ -0,0 +1,24 @@
+@import './../../../../../assets/styles/variables.less';
+.service-path-selector {
+	margin: 10px 35px 10px 0;
+	display: flex;
+	font-size: 12px;
+
+	/deep/ .path-dropdown {
+		width: 150px;
+		select {
+			font-size: 14px;
+			font-family: @font-opensans-regular;
+			padding: 4px 10px;
+		}
+	}
+
+	label {
+		margin-right: 10px;
+		align-self: center;
+		font-size: 14px;
+		font-family: @font-opensans-regular;
+		font-weight: normal;
+		margin-bottom: initial;
+	}
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts
new file mode 100644
index 0000000000..be9966acef
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts
@@ -0,0 +1,134 @@
+import * as _ from "lodash";
+import {Component, Input, KeyValueDiffer, IterableDiffers, KeyValueDiffers, DoCheck} from '@angular/core';
+import {Service} from "app/models/components/service";
+import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import {ForwardingPath} from "app/models/forwarding-path";
+import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+
+@Component({
+	selector: 'service-path-selector',
+	templateUrl: './service-path-selector.component.html',
+	styleUrls:['service-path-selector.component.less'],
+	providers: [TranslateService]
+})
+
+export class ServicePathSelectorComponent implements DoCheck {
+
+	defaultSelectedId: string;
+	hideAllValue: string;
+	hideAllId: string = '0';
+	showAllValue: string;
+	showAllId: string = '1';
+
+	paths: Array<ForwardingPath> = [];
+	dropdownOptions: Array<DropdownValue>;
+	differ: KeyValueDiffer;
+
+	@Input() service: Service;
+	@Input() drawPath: Function;
+	@Input() deletePaths: Function;
+	@Input() selectedPathId: string;
+
+	constructor(private differs: KeyValueDiffers, private translateService: TranslateService) {
+
+		this.defaultSelectedId = this.hideAllId;
+		this.convertPathsToDropdownOptions();
+
+		this.translateService.languageChangedObservable.subscribe(lang => {
+			this.hideAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE");
+			this.showAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE");
+			this.convertPathsToDropdownOptions();
+		});
+
+	}
+
+	ngOnInit(): void {
+
+		this.selectedPathId = this.defaultSelectedId;
+		this.differ = this.differs.find(this.service.forwardingPaths).create(null);
+
+	}
+
+	ngDoCheck(): void {
+
+		const pathsChanged = this.differ.diff(this.service.forwardingPaths);
+
+		if (pathsChanged) {
+			let oldPaths = _.cloneDeep(this.paths);
+			this.populatePathsFromService();
+
+			if (!(_.isEqual(oldPaths, this.paths))) {
+				this.convertPathsToDropdownOptions();
+
+				let temp = this.selectedPathId;
+				this.selectedPathId = '-1';
+
+				setTimeout(() => {
+					this.selectedPathId = temp;
+					this.onSelectPath();
+				}, 0);
+			}
+		}
+
+	}
+
+	populatePathsFromService(): void {
+
+		this.paths = [];
+		let {forwardingPaths} = this.service;
+
+		_.forEach(forwardingPaths, path => {
+			this.paths.push(path);
+		});
+		this.paths.sort((a:ForwardingPath, b:ForwardingPath)=> {
+			return a.name.localeCompare(b.name);
+		});
+
+	}
+
+	convertPathsToDropdownOptions(): void {
+
+		let result = [
+			new DropdownValue(this.hideAllId, this.hideAllValue),
+			new DropdownValue(this.showAllId, this.showAllValue)
+		];
+
+		_.forEach(this.paths, (value: ForwardingPath) => {
+			result[result.length] = new DropdownValue(value.uniqueId, value.name);
+		});
+
+		this.dropdownOptions = result;
+
+	}
+
+	onSelectPath = (): void => {
+
+		if (this.selectedPathId !== '-1') {
+			this.deletePaths();
+
+			switch (this.selectedPathId) {
+				case this.hideAllId:
+					break;
+
+				case this.showAllId:
+					_.forEach(this.paths, path =>
+						this.drawPath(path)
+					);
+					break;
+
+				default:
+					let path = this.paths.find(path =>
+						path.uniqueId === this.selectedPathId
+					);
+					if (!path) {
+						this.selectedPathId = this.defaultSelectedId;
+						this.onSelectPath(); // currently does nothing in default case, but if one day it does, we want the selection to behave accordingly.
+						break;
+					}
+					this.drawPath(path);
+					break;
+			}
+		}
+
+	}
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts
new file mode 100644
index 0000000000..c07061ce9a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ServicePathSelectorComponent} from "./service-path-selector.component";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+
+@NgModule({
+    declarations: [
+        ServicePathSelectorComponent
+    ],
+    imports: [
+    	CommonModule,
+    	UiElementsModule
+    ],
+    exports: [],
+    entryComponents: [
+        ServicePathSelectorComponent
+    ],
+    providers: []
+})
+export class ServicePathSelectorModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html
new file mode 100644
index 0000000000..ff7902e2b9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html
@@ -0,0 +1,22 @@
+<div class='service-path'>
+	<button class='zoom-icons create-path-button' data-tests-id="pathsMenuBtn" (click)="showServicePathMenu = !showServicePathMenu">...</button>
+	<div class="service-path-menu"
+		 *ngIf="showServicePathMenu" >
+		<div >
+			<ul>
+				<li><div class="hand" (click)="onCreateServicePath()" data-tests-id="createPathMenuItem">
+					Create Service Path
+				</div></li>
+				<li><div class="hand" (click)="onListServicePath()" data-tests-id="pathsListMenuItem">
+					Service Paths List
+				</div></li>
+			</ul>
+		</div>
+	</div>
+	<!-- TODO  - ask Orit about positioning issues and styling issues -->
+	<!--
+	<menu-list [open]="showServicePathMenu" [position]="menuPos" >
+		<menu-item [action]="onCreateServicePath">Create Path</menu-item>
+		<menu-item [action]="onListServicePath">Paths' List</menu-item>
+	</menu-list> -->
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less
new file mode 100644
index 0000000000..777b206714
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less
@@ -0,0 +1,51 @@
+//@import 'src/assets/styles/variables.less';
+@import './../../../../../assets/styles/variables.less';
+.service-path {
+	position: relative;
+	.create-path-button{
+		&:extend(.search-bar-button);
+		width: 30px;
+		height: 30px;
+		&:hover {
+			color: @main_color_a;
+		}
+		&:active {
+			background: @main_color_a;
+			color: @main_color_p;
+		}
+		&:focus {
+			outline: none;
+		}
+	}
+	.service-path-menu {
+		border: 1px solid @main_color_o;
+		border-radius: 0 0 2px 2px;
+		border-top-color: @main_color_a;
+		border-top-width: 3px;
+
+		box-sizing: border-box;
+		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
+
+		background-color: @main_color_p;
+
+		padding: 5px 0;
+		right: 34px;
+		position: absolute;
+		top: 10px;
+		width: 150px;
+		font-size: 13px;
+		font-family: @font-opensans-regular;
+
+		li {
+			color: @main_color_m;
+			padding: 0 10px;
+			line-height: 20px;
+			&:hover {
+				cursor: pointer;
+				color: @main_color_a;
+				background-color: fade(@main_color_a, 5%);
+			}
+		}
+
+	}
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts
new file mode 100644
index 0000000000..4a6209fb6f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts
@@ -0,0 +1,83 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Component, Input, ComponentRef} from '@angular/core';
+import {ModalService} from 'app/ng2/services/modal.service';
+import {ModalModel, ButtonModel} from 'app/models';
+import {ServicePathCreatorComponent} from 'app/ng2/pages/service-path-creator/service-path-creator.component';
+import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
+import ServicePathsListComponent from "app/ng2/pages/service-paths-list/service-paths-list.component";
+import {Service} from "app/models/components/service";
+
+@Component({
+    selector: 'service-path',
+    templateUrl: './service-path.component.html',
+    styleUrls: ['service-path.component.less'],
+    providers: [ModalService]
+})
+
+export class ServicePathComponent {
+	showServicePathMenu: boolean = false;
+	modalInstance: ComponentRef<ModalComponent>;
+	@Input() service: Service;
+	@Input() onCreate: Function;
+	@Input() onSave: Function;
+
+	constructor(private ModalServiceNg2: ModalService) {}
+
+	onCreateServicePath = ():void => {
+		this.showServicePathMenu = false;
+		let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
+		let saveButton: ButtonModel = new ButtonModel('Create', 'blue', this.createPath, this.getDisabled );
+		let modalModel: ModalModel = new ModalModel('l', 'Create Service Path', '', [saveButton, cancelButton], 'standard', true);
+		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
+		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service});
+		this.modalInstance.instance.open();
+	};
+
+	onListServicePath = ():void => {
+		this.showServicePathMenu = false;
+		let cancelButton: ButtonModel = new ButtonModel('Close', 'outline white', this.ModalServiceNg2.closeCurrentModal);
+		let modalModel: ModalModel = new ModalModel('md', 'Service Paths List','', [cancelButton], 'standard', true);
+		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
+		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathsListComponent, {service: this.service,
+			onCreateServicePath: this.onCreateServicePath, onEditServicePath: this.onEditServicePath});
+		this.modalInstance.instance.open();
+	};
+
+	createPath  = ():void => {
+		this.onCreate(this.modalInstance.instance.dynamicContent.instance.createServicePathData());
+		this.ModalServiceNg2.closeCurrentModal();
+	};
+
+	onEditServicePath = (id:string):void =>   {
+		let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal);
+		let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createPath, this.getDisabled );
+		let modalModel: ModalModel = new ModalModel('l', 'Edit Path', '', [saveButton, cancelButton]);
+		this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
+		this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service, pathId: id});
+		this.modalInstance.instance.open();
+	};
+
+	getDisabled = ():boolean =>  {
+		return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
+	};
+}
+
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts
new file mode 100644
index 0000000000..96af247086
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts
@@ -0,0 +1,39 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { NgModule } from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ServicePathComponent} from "./service-path.component";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+
+@NgModule({
+    declarations: [
+        ServicePathComponent
+    ],
+    imports: [CommonModule,
+        UiElementsModule],
+    exports: [],
+    entryComponents: [
+        ServicePathComponent
+    ],
+    providers: []
+})
+export class ServicePathModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
new file mode 100644
index 0000000000..e279e3f704
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
@@ -0,0 +1,11 @@
+<div class="sdc-canvas-zone {{class}}-zone" [class.minimized]="minifyZone" [class.hidden]="!showZone">
+    <div class="sdc-canvas-zone__header" (click)="unminifyZone()" >
+        <div class="sdc-canvas-zone__title">{{title}} 
+            <span class="sdc-canvas-zone__counter">{{count}}</span>
+        </div>
+        <span class="sdc-canvas-zone__state-button">&ndash;</span>
+    </div>
+    <div class="sdc-canvas-zone__container">
+        <ng-content></ng-content>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
new file mode 100644
index 0000000000..3e77c5ca3b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
@@ -0,0 +1,62 @@
+.sdc-canvas-zone {
+    width: 280px;
+    max-height:186px;
+    display:flex;
+    flex-direction:column;
+    align-self: flex-end;
+    color:white;
+    font-family:OpenSans-Regular, sans-serif;
+    transition: width .2s ease-in-out, max-height .2s ease-in-out .1s;
+    position:relative;
+    bottom:0px;
+    
+    .sdc-canvas-zone__header {
+        background: #5A5A5A;
+        border-radius: 2px 2px 0 0;
+        padding: 5px 10px;
+        display:flex;
+        justify-content: space-between;
+        font-size: 14px;
+        text-transform:uppercase;
+        .sdc-canvas-zone__state-button {
+            font-weight:bold;
+            cursor:pointer;
+        }
+    }
+
+    .sdc-canvas-zone__container {
+        padding:5px;
+        background-color: #5A5A5A;
+        opacity:0.9;
+        flex: 1;
+        display:flex;
+        flex-direction: row;
+        align-items: flex-start;
+        flex-wrap:wrap;
+        overflow-y:auto;
+        min-height: 80px;
+        max-height: 170px;
+    }
+
+
+    &.minimized {
+        max-height:30px;
+        width:120px;
+        cursor:pointer;
+        
+        .sdc-canvas-zone__state-button {
+            display:none;
+        }
+        .sdc-canvas-zone__container {
+            flex: 0 0 0;
+            min-height: 0;
+            padding: 0;
+            overflow-y:hidden;
+            transition: min-height .2s ease-in-out .2s;
+            transition: padding .1s ease-in-out 0s;
+        }
+    }
+    &.hidden {
+        display:none;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
new file mode 100644
index 0000000000..7e60cb37a6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, Output, ViewEncapsulation, EventEmitter } from '@angular/core';
+import { EventListenerService } from 'app/services';
+import { GRAPH_EVENTS } from 'app/utils';
+
+@Component({
+    selector: 'zone-container',
+    templateUrl: './zone-container.component.html',
+    styleUrls: ['./zone-container.component.less'],
+    encapsulation: ViewEncapsulation.None
+})
+
+export class ZoneContainerComponent {
+    @Input() title:string;
+    @Input() class:string;
+    @Input() count:number;
+    @Input() showZone:boolean;
+    @Input() minifyZone:boolean;
+    constructor(private eventListenerService:EventListenerService) {}
+
+    private unminifyZone = () => {
+        this.minifyZone = !this.minifyZone;
+        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_SIZE_CHANGE);
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
new file mode 100644
index 0000000000..d36b7aec6f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
@@ -0,0 +1,8 @@
+<div class="zone-child mode-{{config.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER" 
+     (mouseenter)="setMode(MODE.HOVER)" (mouseleave)="setMode(MODE.NONE)" (click)="setMode(MODE.SELECTED)">
+        <div class="zone-child__handle" (click)="setMode(MODE.TAG, $event)">+</div>
+        <div class="zone-child__body">
+            <div class="zone-child__body-content">{{config.count || defaultIconText}}</div>
+        </div>
+        <div class="zone-child__name">{{config.name}}</div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
new file mode 100644
index 0000000000..a1d56df96e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
@@ -0,0 +1,110 @@
+.zone-child {
+    position:relative;
+    width:76px;
+    margin:5px;
+
+    .zone-child__handle {
+        display:none;
+        position:absolute;
+        right:4px;
+        top:10px;
+        width:22px;
+        height:22px;
+        cursor:pointer;
+        border: solid white 1px;
+        border-radius: 2px;
+        text-align: center;
+        font-weight:bold;
+    }
+
+    .zone-child__body {
+        margin:0 auto;
+        width:43px;
+        height:43px;
+        display:flex;
+        padding:3px;
+
+    }
+
+    .zone-child__body-content {
+        border-radius: 2px;
+        flex:1;
+        color:white;
+        font-size:18px;
+        text-align:center;       
+        display:flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .zone-child__name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align:center;
+    }
+    /* Dynamic classes below */
+
+    &.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag
+        .zone-child__body {
+            border:solid 2px;
+            border-radius: 2px;
+            padding:2px;
+            cursor:pointer;
+        }
+        .zone-child__handle{
+            display:block;
+            cursor:pointer;
+        }
+    }
+
+    &.locked {
+        cursor: default;
+    }
+    
+    // &:not(.locked):hover .zone-child__handle{
+    //     display:block;
+    // }
+    .zone-child__body {
+        cursor: default;
+    }
+    &.mode-3 .zone-child__handle {
+        width:24px;
+        height:24px;
+        right:3px;
+        top:9px;
+        display:block;
+        background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%);
+        border: 2px solid #FFFFFF;
+        border-radius: 2px;
+        box-shadow: inset 2px -2px 3px 0 #007A3E;
+        cursor: pointer;
+    }
+
+}
+.sdc-canvas-zone.group-zone {
+    .zone-child__handle {
+        background-color:#009FDB;
+    }
+    .zone-child__body {
+        border-color:#009FDB;
+    }
+    .zone-child__body-content {
+        background: #009FDB;
+    }
+}
+
+.sdc-canvas-zone.policy-zone {
+    .zone-child__handle {
+        background-color:#0568AE;
+    }
+    .zone-child__body {
+        border-color:#1287D9;
+        .zone-child__body-content {
+            background: #1287D9;
+        }
+    }
+    .zone-child__body-content {
+        background: #0568AE;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
new file mode 100644
index 0000000000..8057ae908a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { ZoneInstanceConfig, ZoneInstanceMode } from 'app/models/graph/zones/zone-child';
+
+@Component({
+    selector: 'zone-instance',
+    templateUrl: './zone-instance.component.html',
+    styleUrls: ['./zone-instance.component.less'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ZoneInstanceComponent {
+
+    @Input() config:ZoneInstanceConfig;
+    @Input() defaultIconText:string;
+    @Input() isActive:boolean;
+    @Input() activeInstanceMode: ZoneInstanceMode;
+    @Output() modeChange: EventEmitter<any> = new EventEmitter<any>();
+    private MODE = ZoneInstanceMode;
+
+    private setMode = (mode:ZoneInstanceMode, event?:any):void => {
+        if(!this.isActive || this.isActive && mode == ZoneInstanceMode.TAG){ //when active, do not allow hover/select mode toggling
+            this.modeChange.emit({newMode: mode, instance: this.config});
+        }
+        if(event){
+            event.stopPropagation();
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
index 53d1590b1c..d1e68f3088 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts
@@ -18,14 +18,25 @@
  * ============LICENSE_END=========================================================
  */
 
+import * as _ from "lodash";
 import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactoryResolver } from '@angular/core'
 import {ValidationConfiguration} from "app/models";
+import {IUiElementChangeEvent} from "../form-components/ui-element-base.component";
 import {UiElementInputComponent} from "../form-components/input/ui-element-input.component";
 import {UiElementPopoverInputComponent} from "../form-components/popover-input/ui-element-popover-input.component";
 import {UiElementIntegerInputComponent} from "../form-components/integer-input/ui-element-integer-input.component";
 import {UiElementDropDownComponent, DropdownValue} from "../form-components/dropdown/ui-element-dropdown.component";
 import {PROPERTY_DATA} from "../../../../utils/constants";
 
+enum DynamicElementComponentCreatorIdentifier {
+    STRING,
+    INTEGER,
+    FLOAT,
+    BOOLEAN,
+    SUBNETPOOLID,
+    DEFAULT
+}
+
 @Component({
     selector: 'dynamic-element',
     template: `<div #target></div>`,
@@ -44,16 +55,14 @@ export class DynamicElementComponent {
     @Input() name: string;
     @Input() readonly:boolean;
     @Input() path:string;//optional param. used only for for subnetpoolid type
-    value:any;
 
-    // Two way binding for value (need to write the "Change" word like this)
-    @Output('valueChange') emitter: EventEmitter<string> = new EventEmitter<any>();
-    @Input('value') set setValueValue(value) {
-        this.value = value;
-    }
+    @Input() value: any;
+    @Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
+    @Output('elementChanged') emitter: EventEmitter<IUiElementChangeEvent> = new EventEmitter<IUiElementChangeEvent>();
 
     cmpRef: ComponentRef<any>;
     private isViewInitialized: boolean = false;
+    private elementCreatorIdentifier: DynamicElementComponentCreatorIdentifier;
     validation = ValidationConfiguration.validation;
 
     constructor(
@@ -66,29 +75,72 @@ export class DynamicElementComponent {
         if (!this.isViewInitialized) {
             return;
         }
-        if (this.cmpRef) {
-            this.cmpRef.destroy();
-        }
 
-        // Factory to create component based on type or peroperty name.
+        // Factory to create component based on type or other property attributes.
+        const prevElementCreatorIdentifier: DynamicElementComponentCreatorIdentifier = this.elementCreatorIdentifier;
         switch(true) {
             case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1:
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.SUBNETPOOLID;
+                break;
+            case this.type === 'integer':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.INTEGER;
+                break;
+            case this.type === 'float':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.FLOAT;
+                break;
+            case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1:
+            case this.type === 'string':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.STRING;
+                break;
+            case this.type === 'boolean':
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.BOOLEAN;
+                break;
+            default:
+                this.elementCreatorIdentifier = DynamicElementComponentCreatorIdentifier.DEFAULT;
+        }
+
+        // In case the dynamic element creator is changed, then destroy old and build new.
+        if (this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
+            if (this.cmpRef) {
+                this.cmpRef.destroy();
+            }
+            this.createComponentByIdentifier();
+        }
+
+        // Update attributes in base element class
+        if (this.cmpRef) {
+            this.cmpRef.instance.name = this.name;
+            this.cmpRef.instance.type = this.type;
+            this.cmpRef.instance.value = this.value;
+            this.cmpRef.instance.readonly = this.readonly;
+        }
+    }
+
+    createComponentByIdentifier() {
+        switch(this.elementCreatorIdentifier) {
+            case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
                 if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
                     let pathArray = this.path.split("#");
                     this.name = pathArray[pathArray.length - 2];
                 }
                 this.createComponent(UiElementPopoverInputComponent);
                 break;
-            case this.type == 'integer':
+
+            case DynamicElementComponentCreatorIdentifier.INTEGER:
                 this.createComponent(UiElementIntegerInputComponent);
                 this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
                 break;
-            case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1:
-            case this.type == 'string':
+
+            case DynamicElementComponentCreatorIdentifier.FLOAT:
+                this.createComponent(UiElementIntegerInputComponent);
+                this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/;
+                break;
+
+            case DynamicElementComponentCreatorIdentifier.STRING:
                 this.createComponent(UiElementInputComponent);
                 break;
-            case this.type == 'boolean':
 
+            case DynamicElementComponentCreatorIdentifier.BOOLEAN:
                 this.createComponent(UiElementDropDownComponent);
 
                 // Build drop down values
@@ -96,25 +148,20 @@ export class DynamicElementComponent {
                 tmp.push(new DropdownValue(true,'TRUE'));
                 tmp.push(new DropdownValue(false,'FALSE'));
                 this.cmpRef.instance.values = tmp;
+                if(!_.isUndefined(this.value)){//contains the real value (and not a string)
+                    this.value = JSON.parse(this.value);
+                }
                 break;
+
+            case DynamicElementComponentCreatorIdentifier.DEFAULT:
             default:
                 this.createComponent(UiElementInputComponent);
                 console.log("ERROR: No ui component to handle type: " + this.type);
         }
 
-        // Additional attributes in base element class
-        if (this.cmpRef) {
-            this.cmpRef.instance.name = this.name;
-            this.cmpRef.instance.type = this.type;
-            this.cmpRef.instance.value = this.value;
-            this.cmpRef.instance.readonly = this.readonly;
-        }
-
         // Subscribe to change event of of ui-element-basic and fire event to change the value
-        this.cmpRef.instance.baseEmitter.subscribe((value):void => {
-            this.emitter.emit(value)
-        });
-
+        this.cmpRef.instance.baseEmitter.subscribe((event) => { this.emitter.emit(event); });
+        this.cmpRef.instance.valueChange.subscribe((event) => { this.valueChange.emit(event); });
     }
 
     createComponent(ComponentToCreate:any):void {
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
index c6b8384183..805e5ac295 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html
@@ -1,3 +1,3 @@
-<select name='{{name}}' [(ngModel)]="value" (change)="onSave()"  [ngClass]="{'disabled':readonly}" data-tests-id="SelectType">
+<select name='{{name}}' [(ngModel)]="value" (change)="onChange()"  [ngClass]="{'disabled':readonly}" data-tests-id="SelectType">
   <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue">{{ddvalue.label||ddvalue}}</option>
 </select>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
index 5abf32c61b..03a1fc6040 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
@@ -43,9 +43,4 @@ export class UiElementDropDownComponent extends UiElementBase implements UiEleme
   constructor() {
     super();
   }
-
-    onSave() {
-        this.baseEmitter.emit(this.value);
-    }
-
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
index b7d7c859c7..057e731ada 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
@@ -4,7 +4,7 @@
     type="text"
     [name]="name"
     [(ngModel)]="value"
-    (change)="onSave()"
+    (input)="onChange()"
     [attr.maxlength]="validation.propertyValue.max"
     [attr.minlength]="validation.propertyValue.min"
     [pattern]="pattern"
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts
index fb3b3db859..ce231e76e8 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts
@@ -32,10 +32,4 @@ export class UiElementInputComponent extends UiElementBase implements UiElementB
         super();
         this.pattern = this.validation.validationPatterns.comment;
     }
-
-    onSave() {
-        if (!this.control.invalid){
-            this.baseEmitter.emit(this.value);
-        }
-    }
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
index 9fbc9e1094..e1555e87fd 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html
@@ -4,7 +4,7 @@
     type="text"
     [name]="name"
     [(ngModel)]="value"
-    (change)="onSave()"
+    (input)="onChange()"
     [attr.maxlength]="validation.propertyValue.max"
     [attr.minlength]="validation.propertyValue.min"
     [pattern]="pattern"
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts
index 1667f4393d..9aa4b5872c 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts
@@ -33,9 +33,8 @@ export class UiElementIntegerInputComponent extends UiElementBase implements UiE
         //this.pattern = this.validation.validationPatterns.comment;
     }
 
-    onSave() {
-        if (!this.control.invalid){
-            this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value);
-        }
+    onChange() {
+        this.value = this.control.valid && this.value ? JSON.parse(this.value) : this.value;
+        super.onChange();
     }
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
index 61688df3f0..525cd1742c 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts
@@ -35,17 +35,10 @@ export class UiElementPopoverInputComponent extends UiElementBase implements UiE
     saveButton: ButtonModel;
     buttonsArray: ButtonsModelMap;
 
-    onSave = ():void => {
-        if (!this.control.invalid){
-            this.baseEmitter.emit(this.value);
-            this.popoverContentComponent.hide();
-        }
-    }
-
     constructor() {
         super();
         // Create Save button and insert to buttons map
-        this.saveButton = new ButtonModel('save', 'blue', this.onSave);
+        this.saveButton = new ButtonModel('save', 'blue', this.onChange);
         this.buttonsArray = { 'test': this.saveButton };
 
         // Define the regex pattern for this controller
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts
index 0f80e2ad44..3e8c3b5813 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts
@@ -12,10 +12,6 @@ import {UiElementBaseInterface, UiElementBase} from "../ui-element-base.componen
 })
 export class RadioButtonComponent  extends UiElementBase implements UiElementBaseInterface {
     
-    onSave() {
-        this.baseEmitter.emit(this.value);
-    }
-
     @Input() options:Array<RadioButtonModel>;
     @Input() readonly:boolean;
     @Input() direction:string = 'vertical'; //get 'horizontal' | 'vertical'
@@ -23,7 +19,7 @@ export class RadioButtonComponent  extends UiElementBase implements UiElementBas
     
     select(value:any) {
         this.value = value;
-        this.baseEmitter.emit(this.value);
+        this.onChange();
     }
 }
 
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
index ae2013ff70..b4e9e7d36a 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts
@@ -23,7 +23,12 @@ import { ValidationConfiguration } from "app/models";
 import { FormControl, Validators } from '@angular/forms';
 
 export interface UiElementBaseInterface {
-    onSave();
+    onChange();
+}
+
+export interface IUiElementChangeEvent {
+    value: any;
+    isValid: boolean;
 }
 
 @Component({
@@ -35,21 +40,29 @@ export class UiElementBase {
     protected validation = ValidationConfiguration.validation;
     protected control: FormControl;
 
-    // Two way binding for value (need to write the "Change" word like this)
-    @Output('valueChange') baseEmitter: EventEmitter<string> = new EventEmitter<any>();
-    @Input('value') set setValueValue(value) {
-        this.value = value;
-    }
+    @Input() value: any;
+    @Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
+    @Output('elementChanged') baseEmitter: EventEmitter<IUiElementChangeEvent> = new EventEmitter<IUiElementChangeEvent>();
 
     @Input() name: string;
     @Input() type: string;
-    @Input() value: any;
     @Input() pattern: any;
     @Input() readonly:boolean;
 
     constructor() {
         //this.control = new FormControl('', [Validators.required]);
         this.control = new FormControl('', []);
+
+        this.baseEmitter.subscribe((changeEvent: IUiElementChangeEvent) => {
+            this.valueChange.emit(changeEvent.value);
+        })
+    }
+
+    onChange() {
+        this.baseEmitter.emit({
+            value: this.value,
+            isValid: this.control.valid
+        });
     }
 
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
index f66aa551e2..585c36660e 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
@@ -74,10 +74,10 @@ export class LoaderComponent {
         if (this.relative === true) {
             let parentElement = this.viewContainerRef.element.nativeElement.parentElement;
             this.offset = {
-                left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined,
-                top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined,
-                width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined,
-                height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined
+                left: (parentElement.offsetLeft !== undefined) ? parentElement.offsetLeft + "px" : undefined,
+                top: (parentElement.offsetTop !== undefined) ? parentElement.offsetTop + "px" : undefined,
+                width: (parentElement.offsetWidth !== undefined) ? parentElement.offsetWidth + "px" : undefined,
+                height: (parentElement.offsetHeight !== undefined) ? parentElement.offsetHeight + "px" : undefined
             };
         }
         this.isVisible = true;
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
index 9a0fdf6bf4..6fc55d19e7 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html
@@ -1,6 +1,14 @@
 <div class="custom-modal {{input.size}}">
-    <div class="ng2-modal-content">
-        <div class="ng2-modal-header modal-type-{{input.type}}">
+    <div class="ng2-modal-content"
+        ngDraggable
+        [ngDraggable]="input.isMovable"
+        [handle]="ModalHandle"
+        [bounds]="ModalBounds"
+        [inBounds]="true"
+        [preventDefaultEvent]="false">
+        <div #ModalHandle
+            class="ng2-modal-header modal-type-{{input.type}}"
+            [ngClass]="{'movable': input.isMovable}">
             <span class="title">{{ input.title }}</span>
             <span class="close-button" (click)="close()"></span>
         </div>
@@ -18,4 +26,4 @@
         </div>
     </div>
 </div>
-<div class="modal-background"></div>
+<div #ModalBounds class="modal-background" [ngClass]="{'transparent': input.isMovable}"></div>
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
index fac1ae74a8..03b2a70667 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less
@@ -12,7 +12,7 @@
     bottom: 0;
     left: 0;
     z-index: 15007;
-    overflow: auto;
+    overflow: visible;
     margin: auto;
     display: flex;
     align-items: center;
@@ -22,6 +22,8 @@
         width: 100%;
         box-shadow: 0 5px 15px rgba(0,0,0,.5);
         border-radius: 4px;
+
+
         .ng2-modal-body{
             padding: 20px;
         }
@@ -29,19 +31,28 @@
         .ng2-modal-header{
             .m_18_r;
             font-weight: bold;
+
             -webkit-box-flex: 1;
             -ms-flex-positive: 1;
             flex-grow: 1;
+
             height: 50px;
             line-height: 50px;
+            margin: 0px 20px;
+
             display: -webkit-box;
             display: -ms-flexbox;
             display: flex;
+
             text-align: left;
             -webkit-box-align: center;
             -ms-flex-align: center;
             align-items: center;
-            margin: 0px 20px;
+
+            &.ng-draggable {
+                cursor: move;
+                user-select: none;
+            }
 
             &.modal-type-standard {
                 border-bottom: solid 3px @main_color_a;
@@ -101,9 +112,14 @@
     background-color: #000;
     opacity: 0.5;
     z-index: 900;
+
+    &.transparent {
+        background-color: transparent;
+    }
 }
 
 
+
 .xl {
     width: 1200px;
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
index 89db8d1140..777e9bdc06 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
@@ -33,6 +33,7 @@ import { ButtonsModelMap, ModalModel } from 'app/models';
 })
 
 export class ModalComponent implements OnInit, OnDestroy {
+    @Input() isMovable: boolean;
     @Input() input: ModalModel;
     @Input() dynamicContent: any;
     @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example.
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts
index c38e60194b..2999528d13 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from '@angular/common';
+import { AngularDraggableModule } from 'angular2-draggable';
 import { ModalService } from 'app/ng2/services/modal.service';
 import { ErrorMessageComponent } from "./error-message/error-message.component";
 import {ModalComponent} from "./modal.component";
@@ -9,7 +10,7 @@ import {ModalComponent} from "./modal.component";
         ModalComponent,
         ErrorMessageComponent
     ],
-    imports: [CommonModule],
+    imports: [CommonModule, AngularDraggableModule],
     exports: [ModalComponent, ErrorMessageComponent],
     entryComponents: [ //need to add anything that will be dynamically created
         ModalComponent,
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
new file mode 100644
index 0000000000..2a776d444f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
@@ -0,0 +1,4 @@
+<div class="palette-animation-wrapper" [style.top]="from.y + 50 + 'px'" [style.left]="from.x + 'px'"  [style.transform]="transformStyle" [class.hidden]="!visible"
+      (transitionend)="animationComplete()">
+<div class="medium small sprite-resource-icons sprite-{{iconName}}-icons {{iconName}}" ></div>   
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
new file mode 100644
index 0000000000..54f04189c0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
@@ -0,0 +1,5 @@
+.palette-animation-wrapper{
+    position: absolute;
+    z-index: 100;
+    transition: all 2s ease-in-out;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
new file mode 100644
index 0000000000..609a1fc5e1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
@@ -0,0 +1,64 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Component, Input } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import { setTimeout } from 'core-js/library/web/timers';
+import { EventListenerService } from 'app/services';
+import { GRAPH_EVENTS } from 'app/utils';
+import { Point } from 'app/models';
+ 
+
+
+@Component({
+  selector: 'palette-animation',
+  templateUrl: './palette-animation.component.html',
+  styleUrls:['./palette-animation.component.less'],
+})
+
+export class PaletteAnimationComponent  {
+  
+  @Input() from : Point;
+  @Input() to : Point;
+  @Input() iconName : string;
+  @Input() data : any;
+
+  public  animation;
+  private visible:boolean = false;
+  private transformStyle:string = "";
+
+
+  constructor(private eventListenerService:EventListenerService) {}
+  
+  public runAnimation() {
+    this.visible = true;
+    let positionDiff:Point = new Point(this.to.x - this.from.x, this.to.y - this.from.y);
+    setTimeout(()=>{
+     this.transformStyle = 'translate('+ positionDiff.x + 'px,' + positionDiff.y +'px)';
+    }, 0);
+  };
+
+  public animationComplete = (e) => {
+    this.visible = false;
+    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_FINISH_ANIMATION_ZONE);
+  };
+
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
new file mode 100644
index 0000000000..8674571138
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { PaletteAnimationComponent } from "./palette-animation.component";
+
+
+@NgModule({
+    declarations: [
+        PaletteAnimationComponent
+    ],
+    imports: [ CommonModule ],
+    exports: [ PaletteAnimationComponent ]
+})
+
+export class PaletteAnimationModule {
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
new file mode 100644
index 0000000000..ed172bf2b0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
@@ -0,0 +1,9 @@
+<div class="popup-panel" [ngClass]="{'hide':!isShowPanel}" [style.left]="popupPanelPosition.x + 'px'" [style.top]="popupPanelPosition.y + 'px'"
+     (mousedown)="addZoneInstance()"
+     (mouseenter)="onMouseEnter()"
+     (mouseleave)="onMouseLeave()">
+    <div class="popup-panel-group">
+        <div class="popup-panel-plus">+</div>
+        <div class="popup-panel-title">{{panelTitle}}</div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
new file mode 100644
index 0000000000..24f0485e76
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
@@ -0,0 +1,37 @@
+.popup-panel {
+  position: absolute;
+  display: inline-block;
+  background-color: white;
+  border: solid 1px #d2d2d2;
+  border-top: solid 3px #13a7df;
+  left: 208px; top: 0px;
+  width: 140px;
+  height: 40px;
+  z-index: 10000;
+
+  &:hover {
+    background-color: whitesmoke;
+  }
+
+  .popup-panel-group {
+    padding-left: 8px;
+    padding-top: 8px;
+    cursor: pointer;
+
+    .popup-panel-plus {
+      border-radius: 50%;
+      color: white;
+      background-color: #13a7df;
+      width: 20px;
+      text-align: center;
+      display: inline-block;
+    }
+    
+    .popup-panel-title {
+      padding-left: 10px;
+      display: inline-block;
+    }
+    
+  }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
new file mode 100644
index 0000000000..d30d5f6178
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
@@ -0,0 +1,87 @@
+import {Component, OnInit} from '@angular/core';
+import {GRAPH_EVENTS} from "app/utils";
+import {LeftPaletteComponent, Point} from "app/models";
+import {EventListenerService} from "app/services";
+import {LeftPaletteMetadataTypes} from "../../../../models/components/displayComponent";
+
+@Component({
+    selector: 'app-palette-popup-panel',
+    templateUrl: './palette-popup-panel.component.html',
+    styleUrls: [ './palette-popup-panel.component.less' ],
+})
+export class PalettePopupPanelComponent implements OnInit {
+
+    public panelTitle: string;
+    public isShowPanel: boolean;
+    private component: Component;
+    private displayComponent: LeftPaletteComponent;
+    private popupPanelPosition:Point = new Point(0,0);
+
+    constructor(private eventListenerService: EventListenerService) {
+        this.isShowPanel = false;
+    }
+
+    ngOnInit() {
+        this.registerObserverCallbacks();
+    }
+
+    public onMouseEnter() {
+        this.isShowPanel = true;
+    }
+
+    public onMouseLeave() {
+        this.isShowPanel = false;
+    }
+
+    public addZoneInstance(): void {
+        if(this.displayComponent) {
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_COMPONENT_INSTANCE_ZONE_START, this.component, this.displayComponent, this.popupPanelPosition);
+        }
+    }
+
+    private registerObserverCallbacks() {
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL,
+            (component: Component, displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
+
+                this.component = component;
+                this.showPopupPanel(displayComponent, sectionElem);
+            });
+
+        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL, () => this.hidePopupPanel());
+    }
+
+    private getPopupPanelPosition (sectionElem: HTMLElement):Point {
+        let pos: ClientRect = sectionElem.getBoundingClientRect();
+        let offsetX: number = -30;
+        const offsetY: number = pos.height / 2; 
+        return new Point((pos.right + offsetX), (pos.top - offsetY + window.pageYOffset));
+    };
+
+    private setPopupPanelTitle(component: LeftPaletteComponent): void {
+        if (component.categoryType === LeftPaletteMetadataTypes.Group) {
+            this.panelTitle = "Add Group";
+            return;
+        }
+
+        if (component.categoryType === LeftPaletteMetadataTypes.Policy) {
+            this.panelTitle = "Add Policy";
+            return;
+        }
+    }
+
+    private showPopupPanel(displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) {
+        if(!this.isShowPanel){
+            this.displayComponent = displayComponent;
+            this.setPopupPanelTitle(displayComponent);
+            this.popupPanelPosition = this.getPopupPanelPosition(sectionElem);
+            this.isShowPanel = true;
+        }
+    };
+    
+    private hidePopupPanel() {
+        if(this.isShowPanel){
+            this.isShowPanel = false;
+        }
+    };
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
index 6d76f0ad06..fc6e821f34 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
@@ -15,7 +15,8 @@
     <ng-content></ng-content>
     <div class="popover-footer">
         <button *ngFor="let buttonName of buttonsNames"
-                class="tlv-btn {{buttons[buttonName].cssClass}}"
+                class="tlv-btn {{buttons[buttonName].cssClass}}" 
+                [attr.data-tests-id]="'filter-' + buttons[buttonName].text.toLowerCase() + '-button'"
                 [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
                 (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
     </div>
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
index 21d2bbad43..f4b410347b 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
@@ -23,6 +23,8 @@ import { Tab } from './tab/tab.component';
 import { ViewEncapsulation } from '@angular/core';
 import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
 
+export {Tab};
+
 @Component({
     selector: 'tabs',
     templateUrl: './tabs.component.html',
diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
index 526096524c..44314734c3 100644
--- a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
@@ -27,6 +27,10 @@ import {ModalModule} from "./modal/modal.module";
 import {PopoverModule} from "./popover/popover.module";
 import {SearchBarComponent} from "./search-bar/search-bar.component";
 import {SearchWithAutoCompleteComponent} from "./search-with-autocomplete/search-with-autocomplete.component";
+import {PalettePopupPanelComponent} from "./palette-popup-panel/palette-popup-panel.component";
+import {ZoneContainerComponent} from "./canvas-zone/zone-container.component";
+import {ZoneInstanceComponent } from "./canvas-zone/zone-instance/zone-instance.component";
+import {PaletteAnimationComponent} from "./palette-animation/palette-animation.component"
 import {TabModule} from "./tabs/tabs.module";
 import {TooltipModule} from "./tooltip/tooltip.module";
 import {CommonModule} from "@angular/common";
@@ -35,15 +39,21 @@ import {BrowserModule} from "@angular/platform-browser";
 import {MultiStepsWizardModule} from "./multi-steps-wizard/multi-steps-wizard.module";
 import {MenuListModule} from "./menu/menu-list.module";
 import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module";
+//import {SdcUiComponentsModule} from "sdc-ui/lib/angular";
 
 @NgModule({
   declarations: [
     LoaderComponent,
     SearchBarComponent,
-    SearchWithAutoCompleteComponent
-  ],
+    SearchWithAutoCompleteComponent,
+    PalettePopupPanelComponent,
+    ZoneContainerComponent,
+    ZoneInstanceComponent,
+    PaletteAnimationComponent
+],
 
   imports: [
+    //SdcUiComponentsModule,
     BrowserModule,
     FormsModule,
     CommonModule,
@@ -63,6 +73,9 @@ import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-n
     MultiStepsWizardModule,
     SearchBarComponent,
     SearchWithAutoCompleteComponent,
+    PalettePopupPanelComponent,
+    ZoneContainerComponent,
+    ZoneInstanceComponent,
     DynamicElementModule,
     NavbarModule,
     FormElementsModule,
@@ -71,10 +84,10 @@ import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-n
     TabModule,
     TooltipModule,
     MenuListModule,
-    MenuListNg2Module
+    MenuListNg2Module,
+    PaletteAnimationComponent
   ],
-
-  entryComponents: [SearchWithAutoCompleteComponent]
+  entryComponents: [SearchWithAutoCompleteComponent, PalettePopupPanelComponent, ZoneContainerComponent, ZoneInstanceComponent, PaletteAnimationComponent]
 })
 
 export class UiElementsModule {}