[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

17 files changed, 1213 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html
new file mode 100644
index 0000000000..6e7d4e882b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html
@@ -0,0 +1,24 @@
+<!-- TODO: refactor this to be dynamic -->
+<div class="derived-property-row" *ngIf="propertyObj.isDeclared || propertyObj.derivedDataType == derivedPropertyTypes.SIMPLE">
+    <div class="table-cell" [ngClass]="{'iltered':propertyObj.name === propertyNameSearchText}"><checkbox [label]="propertyObj.name" [(checked)]="propertyObj.isSelected" [disabled]="propertyObj.isDisabled ||propertyObj.isDeclared" (checkedChange)="checkedChange($event)"></checkbox></div>
+
+    <div class="table-cell simple">
+        <input type="text" [(ngModel)]="propertyObj.value" [disabled]="propertyObj.isDisabled || propertyObj.isDeclared" (change)="valueChanged.emit()" />
+    </div>
+</div>
+<div class="derived-property-row" *ngIf="!propertyObj.isDeclared && propertyObj.derivedDataType == derivedPropertyTypes.COMPLEX">
+    <div class="table-cell" [ngClass]="{'filtered':propertyObj.name === propertyNameSearchText}"><checkbox [label]="propertyObj.name" [(checked)]="propertyObj.isSelected" [disabled]="propertyObj.isDisabled ||propertyObj.isDeclared" (checkedChange)="checkedChange($event)"></checkbox></div>
+    <div class="table-cell complex">
+        <span class="datatype-text">{{propertyObj.type | contentAfterLastDot }}</span>
+        <span (click)="expandChildById(propertyObj.propertiesName)" class="expand-icon" [class.expanded]="expanded">V</span>
+    </div>
+</div>
+<div class="derived-property-row" *ngIf="!propertyObj.isDeclared && propertyObj.derivedDataType == derivedPropertyTypes.SIMPLELIST ||propertyObj.derivedDataType == derivedPropertyTypes.SIMPLEMAP">
+    <div class="table-cell">
+        <span [ngClass]="{'filtered':propertyObj.name === propertyNameSearchText}">{{propertyObj.name}}</span>
+    </div>
+    <div class="table-cell simple2">
+        <div class="sprite-new add-item-icon" (click)="addRows(propertyObj)"></div>
+    </div>
+</div>
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less
new file mode 100644
index 0000000000..3102c5ceb8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less
@@ -0,0 +1,35 @@
+.derived-property-row {
+    display:flex;
+    flex-direction:row;
+    position:relative;
+    border-top: #d2d2d2 solid 1px;
+    
+    &:first-child {
+        border-top:none;
+    }
+    .table-cell {
+        flex: 0 0 50%;
+        padding:5px;
+        position:relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:first-child {
+            border-right:#d2d2d2 solid 1px;
+            overflow:hidden;
+        }
+        span.expand-icon {
+            position: absolute;
+            right: 10px;
+            transition: 200ms transform ease-in-out;
+        }
+        span.expand-icon.expanded {
+            transform: rotate(-180deg);
+        }
+    }
+}
+.filtered {
+    /deep/ .checkbox-label-content{
+        background-color: yellow;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts
new file mode 100644
index 0000000000..16f069a685
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts
@@ -0,0 +1,46 @@
+/**
+ * Created by rc2122 on 4/20/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import { DerivedFEProperty, DerivedPropertyType} from "app/models";
+import {PropertiesService} from "../../../services/properties.service";
+
+@Component({
+    selector: 'derived-property',
+    templateUrl: './derived-property.component.html',
+    styleUrls: ['./derived-property.component.less']
+})
+export class DerivedPropertyComponent {
+
+    derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement
+    
+    @Input() propertyObj: DerivedFEProperty;
+    @Input() propertyNameSearchText: string;
+    @Input() expanded: boolean;
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
+    @Output() selectProperty: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+
+    constructor ( private propertiesService:PropertiesService){
+    }
+
+
+    propValueChanged = () => {
+        this.valueChanged.emit(this.propertyObj);
+    };
+
+    expandChildById = (id: string) => {
+        this.expandChild.emit(id);
+    }
+
+    checkedChange = (isChecked:boolean) => {
+        this.selectProperty.emit(isChecked);
+    }
+    
+    addRows = (flatProperty: DerivedFEProperty): void => {
+        console.log("ADDING A ROW OF TYPE " + flatProperty.type);
+        console.log(flatProperty);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
new file mode 100644
index 0000000000..17e4002ae5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -0,0 +1,66 @@
+<div class="dynamic-property-row"
+    [ngClass]="{'selected': selectedPropertyId === property.uniqueId }"
+    [class.with-top-border]="property.isChildOfListOrMap"
+    (click)="onClickPropertyRow(property, $event)">
+    <!-- LEFT CELL - for all NON-PropFEModel properties except for MAP)-->
+    <ng-container *ngIf="!isPropertyFEModel">
+        <div class="table-cell" *ngIf="canBeDeclared"> <!-- simple children of complex type -->
+            <checkbox  [label]="property.name" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared" (checkedChange)="checkProperty.emit(property.propertiesName)"
+            ></checkbox>
+        </div>
+        <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
+    </ng-container>
+    <!-- RIGHT CELL -->
+    <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared">
+        <div class="table-cell" [class.full-width]="isPropertyFEModel || property.isChildOfListOrMap">
+            <dynamic-element class="value-input"
+                pattern="validationUtils.getValidationPattern(property.type)"
+                [(value)]="property.value"
+                [type]="property.type"
+                [name]="property.name"
+                (valueChange)="propValueChanged(property);"
+                > <!--[disabled]="property.isDisabled || property.isDeclared" -->
+            </dynamic-element>
+        </div>
+    </ng-container>
+    <ng-container *ngIf="!property.isDeclared"> <!--  other cases need to fail if isDeclared, in which case we need to use full width value above instead) -->
+
+        <ng-container *ngIf="propType == derivedPropertyTypes.COMPLEX && !isPropertyFEModel">
+            <div class="table-cell complex" [class.full-width]="property.isChildOfListOrMap">
+                <span>{{property.type | contentAfterLastDot }}</span>
+            </div>
+        </ng-container>
+        <ng-container *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP">
+            <div class="table-cell map-entry"><input type="text" /></div>
+            <div class="table-cell" *ngIf="property.schema.property.isSimpleType">
+                <input type="text" [(ngModel)]="property.value" /></div>
+            <div class="table-cell" *ngIf="!property.schema.property.isSimpleType">
+                <span>{{property.schema.property.type | contentAfterLastDot }}</span>
+            </div>
+        </ng-container>
+
+        <!-- ICONS: add, delete, and expand -->
+        <div *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="table-cell"><span class="sprite-new add-item-icon" (click)="addRows()"></span></div>
+        <span *ngIf="property.isChildOfListOrMap" class="delete-span sprite-new delete-item-icon" (click)="deleteItem.emit(property.propertiesName)"></span>
+        <span *ngIf="propType == derivedPropertyTypes.COMPLEX || (property.isChildOfListOrMap && propChildren)" (click)="expandChildById(propPath)" class="expand-icon" [class.expanded]="propPath == expandedChildId">V</span>
+    </ng-container>
+
+</div>
+<!-- Now, recurse into children -->
+<ng-container *ngIf="propChildren && !property.isDeclared">
+    <ng-container *ngFor="let prop of propChildren | filterChildProperties: expandedChildId; trackBy:prop?.propertiesName">
+        <dynamic-property
+            [selectedPropertyId]="selectedPropertyId"
+            [canBeDeclared]="childrenCanBeDeclared"
+            [property]="prop"
+            [expandedChildId]="expandedChildId"
+            [propChildren]=""
+            (valueChanged)="propValueChanged(prop);"
+            (expandChild)="expandChildById($event)"
+            (deleteItem)="deleteListOrMapItem($event)"
+            (clickOnPropertyRow)="onClickPropertyRow($event)"
+            (checkProperty)="checkedChange($event)"
+            >
+        </dynamic-property>
+    </ng-container>
+</ng-container>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
new file mode 100644
index 0000000000..53cde3035a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -0,0 +1,48 @@
+.dynamic-property-row {
+    display:flex;
+    flex-direction:row;
+    position:relative;
+
+    .table-cell {
+        flex: 1 0 50%;
+        padding:5px;
+        position:relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+
+        &.full-width {
+            border-right:none;
+            flex: 0 0 100%;
+        }
+
+        &:first-child:not(:only-child) {
+            border-right:#d2d2d2 solid 1px;
+            overflow:hidden;
+        }
+
+
+    }
+    span.delete-item-icon{
+        position: absolute;
+        right: 25px;
+        top: 10px;
+    }
+    span.add-item-icon {
+        float:right;
+    }
+    span.expand-icon {
+        position: absolute;
+        top:6px;
+        right: 10px;
+        transition: 200ms transform ease-in-out;
+    }
+    span.expand-icon.expanded {
+        transform: rotate(-180deg);
+    }
+}
+.filtered {
+    /deep/ .checkbox-label-content{
+        background-color: yellow;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
new file mode 100644
index 0000000000..0ca93a773f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -0,0 +1,149 @@
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyType, SchemaPropertyGroupModel, DataTypeModel } from "app/models";
+import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
+import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils";
+import { DataTypeService } from "../../../services/data-type.service";
+import { UUID } from "angular2-uuid";
+
+
+@Component({
+    selector: 'dynamic-property',
+    templateUrl: './dynamic-property.component.html',
+    styleUrls: ['./dynamic-property.component.less']
+})
+export class DynamicPropertyComponent {
+
+    derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement
+    propType: DerivedPropertyType;
+    propPath: string;
+    isPropertyFEModel: boolean;
+    mapOfIDsAndKeys: Map<string, string> = new Map(); //used for map and list
+
+    childrenCanBeDeclared: boolean;
+    @Input() canBeDeclared: boolean;
+    @Input() property: PropertyFEModel | DerivedFEProperty;
+    @Input() propChildren: Array<DerivedFEProperty>;
+    @Input() expandedChildId: string;
+    @Input() selectedPropertyId: string;
+
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
+    @Output() checkProperty: EventEmitter<string> = new EventEmitter<string>();
+    @Output() deleteItem: EventEmitter<string> = new EventEmitter<string>();
+    @Output() clickOnPropertyRow: EventEmitter<PropertyFEModel | DerivedFEProperty> = new EventEmitter<PropertyFEModel | DerivedFEProperty>();
+
+    constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) {
+    }
+
+    ngOnInit() {
+        this.isPropertyFEModel = this.property instanceof PropertyFEModel;
+        if (this.property instanceof PropertyFEModel) {
+            this.propType = this.getDerivedPropertyType(this.property.type);
+            this.propPath = this.property.name;
+        } else {
+            this.propType = this.property.derivedDataType;
+            this.propPath = this.property.propertiesName;
+        }
+
+        this.childrenCanBeDeclared = this.canBeDeclared && this.propType != this.derivedPropertyTypes.MAP && this.propType != this.derivedPropertyTypes.LIST;
+
+        if (this.propType == this.derivedPropertyTypes.LIST || this.propType == this.derivedPropertyTypes.MAP) {
+            this.initializeValues();
+        }
+
+    }
+
+    initializeValues = () => {
+        let tempValue: any;
+        if (this.property.value) {
+            tempValue = JSON.parse(this.property.value);
+            if (!_.isEmpty(tempValue)) {
+                tempValue.forEach((element, key) => {
+                    let newChildID: string = this.createNewChildProperty(JSON.stringify(element));
+                    this.mapOfIDsAndKeys[newChildID] = key;
+                    console.log(this.mapOfIDsAndKeys);
+                });
+            }
+        }
+        //this.pseudoChildren = [];
+        //this.valueObjRef = [];
+        //TODO: generate necessary elements for existing values here
+        // if (this.propType == this.derivedPropertyTypes.LIST) {
+        //     this.valueObjRef = (this.property.value) ? JSON.parse(this.property.value) : [];
+        // } else if (this.propType == this.derivedPropertyTypes.MAP) {
+        //     this.valueObjRef = (this.property.value)? JSON.parse(this.property.value) : {};
+        // }
+        console.log(this.property.value);
+    }
+
+    onClickPropertyRow = (property, event) => {
+        // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined
+        event && event.stopPropagation && event.stopPropagation();
+        this.clickOnPropertyRow.emit(property);
+    }
+
+    deleteListOrMapItem  = (itemName: string) => {
+        this.propChildren = this.propChildren.filter(prop => prop.propertiesName.indexOf(itemName) != 0); //remove item and children;
+    }
+
+    propValueChanged = (property) => {
+        console.log("property value change!! Prop type: " + property.type + " New value: " + property.value);
+        this.valueChanged.emit(property);
+    };
+
+    expandChildById = (id: string) => {
+        this.expandedChildId = id;
+         this.expandChild.emit(id);
+    }
+
+    checkedChange = (propName: string) => {
+        this.checkProperty.emit(propName);
+    }
+
+
+
+    addRows = (): void => { //from within the template, when creating empty item
+        let childPropId = this.createNewChildProperty();
+        this.expandChildById(this.propPath + "#" + childPropId);
+    }
+
+    createNewChildProperty = (value?:string):string => {
+        let propUUID:string = UUID.UUID();
+        let newProp: DerivedFEProperty;
+        if (this.propType == this.derivedPropertyTypes.LIST) { //for list - create new prop of schema type
+            newProp = new DerivedFEProperty(propUUID, this.propPath, this.property.schema.property.type, value, true);
+        } else { //for map - create new prop of type map, with schema, but with flag that its a child
+            newProp = new DerivedFEProperty(propUUID, this.propPath, this.property.type, value, true, this.property.schema);
+        }
+
+
+        this.propChildren = this.propChildren || [];
+        this.propChildren.push(newProp);
+
+        //if it's a complex type, add children properties
+        if (!this.property.schema.property.isSimpleType) {
+            let schemaDataType: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(this.property.schema.property.type);
+            this.dataTypeService.getDerivedDataTypeProperties(schemaDataType, this.propChildren, newProp.propertiesName);
+            this.propertiesUtils.assignValuesRecursively(JSON.parse(value), this.propChildren, newProp.propertiesName);
+            console.log(JSON.stringify(this.propChildren));
+        }
+
+        return propUUID;
+    }    
+
+
+
+    //TODO: remove this and move to somewhere central!! (or make all properties be the same type...)
+    getDerivedPropertyType = (type) => {
+        if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(type) > -1) {
+            return DerivedPropertyType.SIMPLE;
+        } else if (type == PROPERTY_TYPES.LIST) {
+            return DerivedPropertyType.LIST;
+        } else if (type == PROPERTY_TYPES.MAP) {
+            return DerivedPropertyType.MAP;
+        } else {
+            return DerivedPropertyType.COMPLEX;
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html
new file mode 100644
index 0000000000..a251d33649
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html
@@ -0,0 +1,33 @@
+<div class="add-data-row">
+    <div class="sprite-new add-item-icon" (click)="addListItem()"></div>
+</div>
+<div *ngIf="property.schema.property.isSimpleType && property.valueObjectRef && property.valueObjectRef.length">
+    <!--the ngFor runs on dummy array in the list array length and not on list array in order to prevent from page do the ngFor again when user changes an item-->
+    <div class="simple-list-item" *ngFor="let item of getNumber(property.valueObjectRef); let i = index">
+        <input class="value-input" [(ngModel)]="property.valueObjectRef[i]"
+               type="property.schema.property.derivedFromSimpleTypeName || property.schema.property.type"
+               (change)="propValueChanged()"/>
+        <span class="delete-span sprite-new delete-item-icon" (click)="deleteListItem(i)"></span>
+    </div>
+</div>
+<div class="test" *ngIf="property.schema.property.isDataType && property.childrenProperties && property.childrenProperties.length">
+    <template ngFor let-item [ngForOf]="property.childrenProperties" let-i="index">
+            <div class="table-inner-row" (click)="onChildPropertySelected(item)" [ngClass]="{'selected': selectedPropertyId === item.treeNodeId}">
+                <div class="table-cell">{{item.name}}</div>
+                <div class="table-cell">
+                    <span class="delete-span sprite-new delete-item-icon" (click)="deleteListItem(i)"></span>
+                    <span (click)="property.updateExpandedChildPropertyId(item.treeNodeId)">V</span>
+                </div>
+            </div>
+            <div class="table-inner-row" *ngIf="property.expandedChildPropertyId == item.treeNodeId">
+                <div class="inner-table-container">
+                <properties-value-inner-table  [property]="item"
+                                      (selectChildProperty)="onChildPropertySelected($event)"
+                                      [selectedPropertyId]="selectedPropertyId"
+                                       [propertyNameSearchText]="propertyNameSearchText"
+                                      (valueChanged)="propValueChanged()"></properties-value-inner-table>
+                </div>
+            </div>
+    </template>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less
new file mode 100644
index 0000000000..7c4d90a38d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less
@@ -0,0 +1,3 @@
+.simple-list-item{
+    position: relative;
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts
new file mode 100644
index 0000000000..96f8c680a2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts
@@ -0,0 +1,85 @@
+/**
+ * Created by rc2122 on 4/23/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import { PropertyFEModel} from "app/models";
+import {PropertiesService} from "app/ng2/services/properties.service";
+import { ContentAfterLastDotPipe } from "app/ng2/pipes/contentAfterLastDot.pipe";
+import {UUID} from "angular2-uuid";
+import {ComponentType} from "app/utils";
+
+@Component({
+    selector: 'list-property',
+    templateUrl: './list-property.component.html',
+    styleUrls: ['../properties-value-inner-table/properties-value-inner-table.component.less', './list-property.component.less']
+})
+export class ListPropertyComponent {
+
+    @Input() property: PropertyFEModel;
+    @Input() selectedPropertyId: string;
+    @Input() propertyNameSearchText:string;
+    
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
+
+    constructor ( private propertiesService:PropertiesService, private contentAfterLastDotPipe:ContentAfterLastDotPipe ){
+    }
+
+    propValueChanged = () => {
+        this.valueChanged.emit(this.property);
+    };
+
+    onChildPropertySelected = (property) => {
+        this.selectChildProperty.emit(property);
+    };
+
+    getNumber = (valueObjectRef: any): Array<any> => {
+        let num: number = (valueObjectRef) ? valueObjectRef.length : 0;
+        return new Array(num);
+    }
+
+    createNewChildProperty = ():void => {
+        let newProperty: PropertyFEModel = new PropertyFEModel(this.contentAfterLastDotPipe.transform(this.property.schema.property.type),
+            this.property.schema.property.type,
+            UUID.UUID(),
+            this.property,
+            this.property.valueObjectRef[this.property.childrenProperties.length]
+        );
+        this.propertiesService.createPropertiesTreeForProp(newProperty);
+        this.property.childrenProperties.push(newProperty);
+    }
+
+    addListItem = ():void => {
+        this.property.valueObjectRef = this.property.valueObjectRef || [];
+        this.property.childrenProperties = this.property.childrenProperties || [];
+        if (this.property.schema.property.isSimpleType){
+            if( this.property.valueObjectRef.indexOf("") == -1 ) {//prevent insert multiple empty simple type items to list
+                this.property.valueObjectRef.push("");
+            }
+        }else{
+            this.property.valueObjectRef[this.property.childrenProperties.length] = {};
+            this.property.childrenProperties = this.property.childrenProperties || [];
+            this.createNewChildProperty();
+            this.valueChanged.emit(this.property);
+        }
+    }
+
+    deleteListItem = (indexInList:number):void => {
+        this.property.valueObjectRef.splice(indexInList, 1);
+        if(this.property.childrenProperties){
+            this.property.childrenProperties.splice(indexInList, 1);
+        }
+        if (!this.property.valueObjectRef.length) {//only when user removes all items from list - put the default
+            if ( this.property.defaultValue ) {
+                angular.copy(JSON.parse(this.property.defaultValue), this.property.valueObjectRef);
+                if (this.property.schema.property.isDataType){
+                    _.forEach(this.property.valueObjectRef, () => {
+                        this.createNewChildProperty();
+                    });
+                }
+            }
+        }
+        this.valueChanged.emit(this.property);
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html
new file mode 100644
index 0000000000..e1975175a8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html
@@ -0,0 +1,38 @@
+<div class="add-data-row">
+    <div class="sprite-new add-item-icon" (click)="addMapItemFields()"></div>
+</div>
+
+<!--the ngFor runs on dummy array in mapKey array length and not on maKeys array in order to prevent from page do the ngFor again when user changes a key-->
+<template  ngFor let-num [ngForOf]="getNumber(mapKeys.length)" let-i="index">
+    <div class="table-inner-row"
+         [ngClass]="{'selected': property.schema.property.isDataType && selectedPropertyId === property.childrenProperties[i].treeNodeId}"
+         (click)="property.schema.property.isDataType && onChildPropertySelected(property.childrenProperties[i])">
+        <div class="table-cell">
+            <input class="value-input" (keyup)="changeKeyOfMap(mapKeys[i], i);$event.stopPropagation();"
+                    [(ngModel)]="mapKeys[i]"
+                    name="mapKey{{property.treeNodeId}}{{i}}"
+                    (change)="propValueChanged()"/>
+        </div>
+        <div class="table-cell">
+            <input class="value-input" *ngIf="property.schema.property.isSimpleType"
+                    [(ngModel)]="property.valueObjectRef[mapKeys[i]]"
+                   type="property.schema.property.derivedFromSimpleTypeName || property.schema.property.type"
+                    (change)="propValueChanged()"/>
+            <div *ngIf="property.schema.property.isDataType">
+                <div>{{ property.schema.property.type | contentAfterLastDot }}</div>
+                <span (click)="property.updateExpandedChildPropertyId(property.childrenProperties[i].treeNodeId)">V</span>
+            </div>
+            <span class="delete-span sprite-new delete-item-icon" (click)="deleteMapItem(i)"></span>
+        </div>
+    </div>
+    <div class="table-inner-row" *ngIf="property.schema.property.isDataType && property.expandedChildPropertyId == property.childrenProperties[i].treeNodeId">
+        <div class="inner-table-container">
+            <properties-value-inner-table [property]="property.childrenProperties[i]"
+                                          [selectedPropertyId]="selectedPropertyId"
+                                          [propertyNameSearchText]="propertyNameSearchText"
+                                            (selectChildProperty)="onChildPropertySelected($event)"
+                                            (valueChanged)="propValueChanged()"></properties-value-inner-table>
+        </div>
+    </div>
+</template>
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts
new file mode 100644
index 0000000000..d62d0b94e3
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts
@@ -0,0 +1,121 @@
+/**
+ * Created by rc2122 on 4/24/2017.
+ */
+/**
+ * Created by rc2122 on 4/23/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import { PropertyFEModel} from "app/models";
+import { PropertiesService } from "../../../services/properties.service";
+import {ComponentType} from "app/utils";
+import {UUID} from "angular2-uuid";
+
+@Component({
+    selector: 'map-property',
+    templateUrl: './map-property.component.html',
+    styleUrls: ['../properties-value-inner-table/properties-value-inner-table.component.less']
+})
+export class MapPropertyComponent {
+
+    @Input() property: PropertyFEModel;
+    @Input() selectedPropertyId: string;
+    @Input() propertyNameSearchText:string;
+    
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
+
+    constructor ( private propertiesService:PropertiesService){
+    }
+
+    mapKeys:Array<string>;
+
+    ngOnInit() {
+        this.mapKeys = Object.keys(this.property.valueObjectRef);
+    }
+
+    propValueChanged = () => {
+        this.valueChanged.emit(this.property);
+    };
+
+    onChildPropertySelected = (property) => {
+        this.selectChildProperty.emit(property);
+    };
+
+    getNumber = (num:number):Array<any> => {
+        return new Array(num);
+    }
+
+    createNewChildProperty = (mapKey:string):void => {
+
+        let newProperty: PropertyFEModel = new PropertyFEModel(mapKey,
+            this.property.schema.property.type,
+            UUID.UUID(), this.property,
+            this.property.valueObjectRef[mapKey]);
+        this.propertiesService.createPropertiesTreeForProp(newProperty);
+        this.property.childrenProperties = this.property.childrenProperties || [];
+        this.property.childrenProperties.push(newProperty);
+    }
+
+    //get: new key and the index of this item in the map
+    //This method checks if the new key isn't exist already in the map and update the object and the children array with the new key
+    changeKeyOfMap = (newKey:string, index:number):void => {
+        //let fieldName:string = "mapKey" + this.property.treeNodeId + index;
+        let oldKey:string = Object.keys(this.property.valueObjectRef)[index];
+        let existsKeyIndex:number = Object.keys(this.property.valueObjectRef).indexOf(newKey);
+        if (existsKeyIndex > -1 && existsKeyIndex != index) {
+            //error for exists key validation
+        } else {
+            //remove error for exists key validation and if the form is valid - update the map object
+            let newObj = {};
+            angular.forEach(this.property.valueObjectRef,function(value:any,key:string){
+                if(key == oldKey){
+                    newObj[newKey] = value;
+                }else{
+                    newObj[key] = value;
+                }
+            });
+            this.property.valueObjectRef = newObj;
+            this.property.parent.valueObjectRef[this.property.name] = this.property.valueObjectRef;//in order to prevent break ref
+            if(this.property.childrenProperties){
+                this.property.childrenProperties[index].name = newKey;//update this property childrenProperties with the new key
+            }
+        }
+    }
+
+    //get: index of the item in the map
+    //This method removes item from map.
+    deleteMapItem = (index:number):void=> {
+        delete this.property.valueObjectRef[this.mapKeys[index]];
+        this.mapKeys.splice(index, 1);
+        if(this.property.childrenProperties){
+            this.property.childrenProperties.splice(index, 1);
+        }
+        if (!this.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default
+            if (this.property.defaultValue) {
+                angular.copy(JSON.parse(this.property.defaultValue), this.property.valueObjectRef);
+                this.mapKeys = Object.keys(this.property.valueObjectRef);
+                if (this.property.schema.property.isDataType){
+                    angular.forEach(this.property.valueObjectRef, (value, key) => {
+                        this.createNewChildProperty(key);
+                    }, this);
+                }
+            }
+        }
+        this.valueChanged.emit(this.property);
+    }
+
+    //This method inserts new empty item to map
+    addMapItemFields = ():void => {
+        this.property.valueObjectRef = this.property.valueObjectRef || {};
+        if (this.property.schema.property.isSimpleType){
+            this.property.valueObjectRef[''] = null;
+        }else{
+            if(!this.property.valueObjectRef['']){
+                this.property.valueObjectRef[''] = {};
+                this.createNewChildProperty('');
+            }
+        }
+        this.mapKeys = Object.keys(this.property.valueObjectRef);
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
new file mode 100644
index 0000000000..3ab47074e7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
@@ -0,0 +1,135 @@
+
+
+<div class="properties-table">
+    <div class="table-header">
+        <div class="table-cell col1">Property Name</div>
+        <div class="table-cell col2">Type</div>
+        <div class="table-cell col3">ES</div>
+        <div class="table-cell valueCol">Value</div>
+    </div>
+    <div class="table-body">
+        <div class="no-data" *ngIf="!feInstancesNames">No data to display</div>
+
+        <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
+            <div class="table-rows-header">{{instanceName | contentAfterLastDot}}</div>
+
+            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceName]; trackBy:property?.name" (click)="onClickPropertyRow(property, instanceName, $event)" [ngClass]="{'selected': selectedPropertyId === property.uniqueId}">
+                <div class="table-cell col1">
+                <checkbox [label]="property.name"
+                          [(checked)]="property.isSelected"
+                          [disabled]="property.isDisabled || property.isDeclared"
+                          (checkedChange)="propertyChecked(property)"
+                          tooltip="{{property.name}}"></checkbox>
+                    <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+                </div>
+                <div class="table-cell col2">{{property.type | contentAfterLastDot}}</div>
+                <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type
+                    | contentAfterLastDot) : ''}}</div>
+                <div class="table-cell valueCol">
+                    <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
+                    <dynamic-property
+                        [selectedPropertyId]="selectedPropertyId"
+                        [canBeDeclared]="true"
+                        [property]="property"
+                        [expandedChildId]="property.expandedChildPropertyId"
+                        [propChildren]="property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId"
+                        (valueChanged)="propValueChanged(property);"
+                        (expandChild)="property.updateExpandedChildPropertyId($event)"
+                        (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)"
+                        (checkProperty)="propertyChecked(property, $event)"
+                        >
+                    </dynamic-property>
+
+                </div>
+            </div>
+<!--
+                <div *ngIf="!property.isSimpleType && !property.isDeclared" class="table-cell valueCol child-property-container">
+
+                    <div class="child-property-row" *ngFor="let flatProperty of property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId"
+                        [ngClass]="{'selected': selectedPropertyId === flatProperty.uniqueId}" (click)="clickOnPropertyRow(flatProperty, instanceName, $event)" [@fadeIn]="''">
+                        <derived-property [propertyObj]="flatProperty"  [propertyNameSearchText]="propertyNameSearchText" [expanded]="flatProperty.propertiesName == property.expandedChildPropertyId"
+                                    (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" (valueChanged)="propValueChanged(property)" (expandChild)="property.updateExpandedChildPropertyId($event)"></derived-property>
+                    </div>
+
+                </div>
+                <!--
+
+
+                <property [propertyObj]="flatProperty"
+                        [expanded]="flatProperty.parentName == property.expandedChildPropertyId"
+                        (valueChanged)="propValueChanged($event)"
+                        (selectChildProperty)="onChildPropertySelected($event)"></property>
+                <list-property *ngIf="property.type == 'list'"
+                                    [property]="property"
+                            [selectedPropertyId]="selectedPropertyId"
+                                    (valueChanged)="propValueChanged($event)"
+                            (selectChildProperty)="onChildPropertySelected($event)"></list-property>
+                <map-property *ngIf="property.type == 'map'"
+                            [property]="property"
+                            [selectedPropertyId]="selectedPropertyId"
+                            (valueChanged)="propValueChanged($event)"
+                            (selectChildProperty)="onChildPropertySelected($event)"></map-property>
+                <properties-value-inner-table *ngIf="property.isDataType"
+                                            [property]="property"
+                                            [selectedPropertyId]="selectedPropertyId"
+                                            (selectChildProperty)="onChildPropertySelected($event)"
+                                            (valueChanged)="propValueChanged($event)"></properties-value-inner-table>
+                -->
+
+
+
+        </div>
+
+    </div>
+</div>
+<!--
+<div class="properties-table" style="display:block">
+    <div class="table-header">
+        <div class="table-cell col1">Property Name</div>
+        <div class="table-cell col2">Type</div>
+        <div class="table-cell col3">ES</div>
+        <div class="table-cell valueCol">Value</div>
+    </div>
+    <div class="table-body">
+        <div class="no-data" *ngIf="!properties || !properties.length">No data to display</div>
+        <div class="table-row" *ngFor="let property of properties" (click)="clickOnPropertyRow(property)">
+            <div class="table-cell col1"><checkbox [label]="property.name" [(checked)]="property.isSelected" (checkedChange)="propSelected(property)" [disabled]="property.isDisabled"></checkbox></div>
+            <div class="table-cell col2">{{property.type | contentAfterLastDot}}</div>
+            <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type | contentAfterLastDot) : ''}}</div>
+            <div class="table-cell valueCol" [class.inner-table-container]="property.childrenProperties || !property.isSimpleType">
+                <!--<input class="value-input" *ngIf="property.isSimpleType"
+                       type="property.derivedFromSimpleTypeName || property.type"
+                       [(ngModel)]="property.value"
+                        (change)="putDefaultValueInEmptyProperty(property);propValueChanged(property);"
+                       pattern="validationUtils.getValidationPattern(property.type)"/>
+                <dynamic-element
+                    class="value-input"
+                    *ngIf="property.isSimpleType"
+                    [(value)]="property.value"
+                    (valueChange)="putDefaultValueInEmptyProperty(property);propValueChanged(property);"
+                    [type]="property.derivedFromSimpleTypeName || property.type"
+                    [name]="property.name">
+                </dynamic-element>
+                <list-property *ngIf="property.type == 'list'"
+                                      [property]="property"
+                               [selectedPropertyId]="selectedPropertyId"
+                                      (valueChanged)="propValueChanged($event)"
+                               (selectChildProperty)="onChildPropertySelected($event)"></list-property>
+                <map-property *ngIf="property.type == 'map'"
+                               [property]="property"
+                              [selectedPropertyId]="selectedPropertyId"
+                               (valueChanged)="propValueChanged($event)"
+                               (selectChildProperty)="onChildPropertySelected($event)"></map-property>
+                <properties-value-inner-table *ngIf="property.isDataType"
+                                              [property]="property"
+                                              [selectedPropertyId]="selectedPropertyId"
+                                              (selectChildProperty)="onChildPropertySelected($event)"
+                                              (valueChanged)="propValueChanged($event)"></properties-value-inner-table>
+            </div>
+
+        </div>
+    </div>
+</div> -->
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
new file mode 100644
index 0000000000..de080dfdc9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
@@ -0,0 +1,188 @@
+
+@import './../../../../assets/styles/variables.less';
+
+:host /deep/ input { width:100%;}
+
+.properties-table {
+    display:flex;
+    flex-direction:column;
+    flex: 1;
+    height:100%;
+    text-align:left;
+
+
+    .child-property-container {
+        display:flex;
+        flex-direction:column;
+
+        &.table-cell {
+            padding:0;
+        }
+
+        .child-property-row {
+            border-bottom: #d2d2d2 solid 1px;
+            &:last-child {
+                border-bottom:none;
+            }
+        }
+    }
+
+
+    derived-property, dynamic-property {
+        width:100%;
+    }
+
+    /deep/ dynamic-property dynamic-property .dynamic-property-row {
+         border-top:solid #d2d2d2 1px;
+    }
+
+    /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) {
+        border-top: none;
+    }
+
+    properties-value-inner-table {
+        width: 100%;
+    }
+
+    .table-header {
+        font-weight:bold;
+        border-top: #d2d2d2 solid 1px;
+        background-color: #eaeaea;
+
+        .valueCol {
+            justify-content: flex-start;
+            padding: 5px;
+        }
+    }
+    .table-header, .table-row {
+        display: flex;
+        flex-direction:row;
+        flex: 0 0 auto;
+    }
+
+    .table-body {
+        display:flex;
+        flex-direction: column;
+        overflow-y:auto;
+        flex: 1;
+
+        .no-data {
+            border: #d2d2d2 solid 1px;
+            border-top:none;
+            text-align: center;
+            height: 100%;
+            padding: 20px;
+        }
+        /deep/.selected{
+            background-color: #e6f6fb;
+            color:  #009fdb;
+        }
+    }
+
+    .table-rows-header {
+        font-size:16px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: @tlv_color_v;
+    }
+
+    .table-row {
+        &:hover {
+             background-color:#f8f8f8; cursor:pointer;
+        }
+
+        &:last-child {
+            flex: 1 0 auto;
+        }
+        .selected-row {
+            background-color:#e6f6fb;
+        }
+    }
+     .table-cell {
+        font-size:13px;
+        flex:1;
+        border: #d2d2d2 solid 1px;
+        border-right:none;
+        border-top:none;
+        padding: 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &:last-child {
+            border-right:#d2d2d2 solid 1px;
+        }
+        &.col1 {
+            flex: 0 0 300px;
+            max-width:300px;
+
+            .property-description-icon {
+                float: right;
+                margin-top: 4px;
+            }
+        }
+        &.col2 {
+            flex: 0 0 150px;
+            max-width:150px;
+        }
+
+        &.col3 {
+            flex:0 0 120px;
+            max-width:120px;
+        }
+
+        &.valueCol {
+            flex: 1 0 auto;
+            min-width: 350px;
+            display: flex;
+            justify-content: flex-end;
+            padding: 0px;
+
+            .value-input {
+                flex: 1;
+                max-height: 24px;
+                border: none;
+                background-color: inherit;
+
+                &:focus, &:active {
+                    border:none;
+                    outline:none;
+                }
+            }
+
+            .delete-btn {
+                flex: 0 0 auto;
+            }
+
+            .delete-button-container {
+                max-height: 24px;
+            }
+
+            &.inner-table-container {
+                padding: 0px;
+
+                .delete-button-container {
+                    padding: 3px 5px 0 0 ;
+                }
+            }
+        }
+
+         &.input-value-col {
+             padding: 5px;
+         }
+
+
+    }
+
+    .filtered {
+        /deep/ .checkbox-label-content{
+            background-color: yellow;
+        }
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
new file mode 100644
index 0000000000..d5a9b40425
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
@@ -0,0 +1,93 @@
+import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core";
+import { trigger, state, style, transition, animate} from '@angular/core';
+import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models";
+import {PropertiesService} from "../../services/properties.service";
+// import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe';
+//import {PropertiesValueInnerTableComponent} from "./properties-table/properties-value-inner-table/properties-value-inner-table";
+import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component';
+import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
+
+@Component({
+    selector: 'properties-table',
+    templateUrl: './properties-table.component.html',
+    styleUrls: ['./properties-table.component.less'],
+    animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.3s ease-out', style({ opacity: '1' }))]) ])]
+})
+export class PropertiesTableComponent {
+
+    @Input() fePropertiesMap: InstanceFePropertiesMap;
+    @Input() selectedPropertyId: string;
+    @Input() displayDeleteButton: boolean;
+    @Input() propertyNameSearchText:string;
+
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>();
+    @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();
+    //@Output() selectInstanceRow: EventEmitter<string> = new EventEmitter<string>();
+
+    feInstancesNames: Array<string>;
+
+    constructor ( private propertiesService:PropertiesService ){
+    }
+
+    /**
+     * Update feInstancesNames when fePropertiesMap: InstanceFePropertiesMap change (after getting response from server)
+     */
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['fePropertiesMap']) {
+            if (changes['fePropertiesMap'].currentValue) {
+                let keysPipe = new KeysPipe();
+                let fiteredArr = keysPipe.transform(changes['fePropertiesMap'].currentValue,[]);
+                this.feInstancesNames = fiteredArr;
+            }
+        }
+    }
+
+    propValueChanged = (property) => {
+        !property.isDeclared && this.valueChanged.emit(property);
+    };
+
+    // Click on main row (row of propertyFEModel)
+    onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => {
+        //event && event.stopPropagation();
+        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+        this.selectPropertyRow.emit(propertyRowSelectedEvent);
+    };
+
+    // Click on inner row (row of DerivedFEProperty)
+    onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => {
+        let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName);
+        this.selectPropertyRow.emit(propertyRowSelectedEvent);
+    }
+
+    propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
+        let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
+
+        console.log(isChecked, childPropName, prop);
+        if (!isChecked) {
+            this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
+        } else {
+            this.propertiesService.disableRelatedProperties(prop, childPropName);
+        }
+        this.updateCheckedPropertyCount.emit(isChecked);
+    }
+
+    putDefaultValueInEmptyProperty = (property:PropertyFEModel):void => {
+        property.value = property.value || property.defaultValue;
+    }
+
+    // clickOnInstanceRow = (instanceName:string) =>{
+    //     this.selectInstanceRow.emit(instanceName);
+    // };
+
+}
+
+export class PropertyRowSelectedEvent {
+    propertyModel:PropertyFEModel | DerivedFEProperty;
+    instanceName:string;
+    constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){
+        this.propertyModel = propertyModel;
+        this.instanceName = instanceName;
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html
new file mode 100644
index 0000000000..61555cac50
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html
@@ -0,0 +1,41 @@
+
+<template  ngFor let-childProp [ngForOf]="property.childrenProperties" let-i="index">
+    <div class="table-inner-row" (click)="onChildPropertySelected(childProp)" [ngClass]="{'selected': selectedPropertyId === childProp.treeNodeId}">
+        <div class="table-cell" [ngClass]="{'filtered':childProp.name === propertyNameSearchText}">
+            <checkbox [label]="childProp.name" [(checked)]="childProp.isSelected" [disabled]="property.isDisabled"></checkbox>
+        </div>
+        <div class="table-cell  prop-value">
+            <input class="value-input" *ngIf="childProp.isSimpleType"
+                   [(ngModel)]="property.valueObjectRef[childProp.name]"
+                   (change)="putDefaultValueInEmptyChildProperty(childProp);propValueChanged();"
+                   type="childProp.derivedFromSimpleTypeName || childProp.type"/>
+            <span class="datatype-text" *ngIf="childProp.isDataType">{{ childProp.type | contentAfterLastDot }}</span>
+            <span *ngIf="!childProp.isSimpleType" (click)="property.updateExpandedChildPropertyId(childProp.treeNodeId)">V</span>
+        </div>
+    </div>
+    <div class="table-inner-row" *ngIf="childProp.type === 'list' && property.expandedChildPropertyId === childProp.treeNodeId">
+            <list-property [property]="childProp"
+                           [selectedPropertyId]="selectedPropertyId"
+                           [propertyNameSearchText]="propertyNameSearchText"
+                            (valueChanged)="propValueChanged()"
+                            (selectChildProperty)="onChildPropertySelected($event)"></list-property>
+
+    </div>
+    <div class="table-inner-row" *ngIf="childProp.type === 'map' && property.expandedChildPropertyId == childProp.treeNodeId">
+            <map-property [property]="childProp"
+                            [selectedPropertyId]="selectedPropertyId"
+                          [propertyNameSearchText]="propertyNameSearchText"
+                            (valueChanged)="propValueChanged()"
+                            (selectChildProperty)="onChildPropertySelected($event)"></map-property>
+
+    </div>
+    <div class="table-inner-row" *ngIf="childProp.isDataType && property.expandedChildPropertyId == childProp.treeNodeId">
+            <properties-value-inner-table [property]="childProp"
+                                          [selectedPropertyId]="selectedPropertyId"
+                                          [propertyNameSearchText]="propertyNameSearchText"
+                                            (selectChildProperty)="onChildPropertySelected($event)"
+                                            (valueChanged)="propValueChanged()"></properties-value-inner-table>
+    </div>
+</template>
+
+
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less
new file mode 100644
index 0000000000..1b7f6d4cd1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less
@@ -0,0 +1,71 @@
+table { width:100%;}
+tr {border-bottom: #d2d2d2 solid 1px;}
+tr:last-child { border-bottom:none;}
+td { border:none; padding:5px;}
+td:first-child { border-right:#d2d2d2 solid 1px;}
+
+.prop-value{
+    span {
+        position: absolute;
+        top: 5px;
+        right: 2px;
+
+        &.delete-span {
+            right:20px;
+        }
+
+        &.datatype-text {
+            position:static;
+        }
+
+    }
+}
+
+.add-data-row {
+    padding:5px;
+    text-align:right;
+    border-bottom: #d2d2d2 solid 1px;
+
+    &:last-child {
+        border-bottom:none;
+    }
+}
+.table-inner-row {
+    display:flex;
+    flex-direction:row;
+    border-bottom: #d2d2d2 solid 1px;
+    flex: 0 0 100%;
+    position:relative;
+
+    &:last-child {
+        border-bottom:none;
+    }
+
+    .table-cell {
+        flex: 0 0 50%;
+        padding:5px;
+        position:relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:first-child {
+            border-right:#d2d2d2 solid 1px;
+            overflow:hidden;
+        }
+
+
+    }
+
+    .table-inner-container, .inner-table-container {
+        flex: 0 0 100%;
+    }
+}
+/deep/ map-property, /deep/ properties-value-inner-table, /deep/ list-property{
+    width:100%;
+}
+
+.filtered {
+    /deep/ .checkbox-label-content{
+        background-color: yellow;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts
new file mode 100644
index 0000000000..7d0b219ffe
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts
@@ -0,0 +1,37 @@
+/**
+ * Created by rc2122 on 4/20/2017.
+ */
+import {Component, Input, Output, EventEmitter} from "@angular/core";
+import {PropertyFEModel} from "app/models";
+import {PropertiesService} from "../../../services/properties.service";
+
+@Component({
+    selector: 'properties-value-inner-table',
+    templateUrl: './properties-value-inner-table.component.html',
+    styleUrls: ['./properties-value-inner-table.component.less']
+})
+export class PropertiesValueInnerTableComponent {
+
+    @Input() property: PropertyFEModel;
+    @Input() selectedPropertyId: string;
+    @Input() propertyNameSearchText:string;
+    
+    @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>();
+    @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
+
+    constructor ( private propertiesService:PropertiesService){
+    }
+
+
+    onChildPropertySelected = (property) => {
+        this.selectChildProperty.emit(property);
+    };
+
+    propValueChanged = () => {
+        this.valueChanged.emit(this.property);
+    };
+
+    putDefaultValueInEmptyChildProperty = (childProp:PropertyFEModel):void => {
+        this.property.valueObjectRef[childProp.name] = this.property.valueObjectRef[childProp.name] || childProp.defaultValue;
+    }
+}