1 files changed, 33 insertions, 0 deletions
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>