1 files changed, 57 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
new file mode 100644
index 0000000000..d1b671cff2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -0,0 +1,57 @@
+<div class="properties-assignment-page">
+    <div class="main-content">
+        <div class="left-column">
+            <tabs #propertyInputTabs tabStyle="round-tabs" (tabChanged)="tabChanged($event)" [hideIndicationOnTabChange]="true">
+                <tab tabTitle="Properties">
+                    <properties-table class="properties-table"
+                        [fePropertiesMap]="instanceFePropertiesMap | searchFilter:'name':searchQuery"
+                        [selectedPropertyId]="selectedFlatProperty.uniqueId"
+                        [propertyNameSearchText]="searchPropertyName"
+                        (valueChanged)="propertyValueChanged($event)"
+                        (propertySelected)="propertySelected($event)"
+                        (selectPropertyRow)="selectPropertyRow($event)"
+                        (selectChildProperty)="selectChildProperty($event)"
+                        (updateCheckedPropertyCount)="updateCheckedPropertyCount($event)"
+                        (selectInstanceRow)="selectInstanceRow($event)">
+                        </properties-table>
+                </tab>
+                <tab tabTitle="Inputs">
+                    <inputs-table class="properties-table" [inputs]="inputs | searchFilter:'name':searchQuery" (deleteInput)="deleteInput($event)" (inputValueChanged)="inputValueChanged($event)"></inputs-table>
+                </tab>
+            </tabs>
+            <div class="header">
+                <div class="search-filter-container">
+                    <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" />
+                    <span class="sprite search-icon"></span>
+                    <filter-properties-assignment *ngIf="!hideAdvanceSearch" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
+                    <span *ngIf="displayClearSearch && !hideAdvanceSearch" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span>
+                </div>
+                <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount" (click)="declareProperties()">Declare</button>
+            </div>
+        </div>
+        <div class="right-column gray-border">
+            <tabs #hierarchyNavTabs tabStyle="simple-tabs">
+                <tab tabTitle="Composition">
+                    <div class="hierarchy-nav-container">
+                    <div class="hierarchy-header">{{component.name}}</div>
+                    <div *ngIf="!instancesNavigationData || instancesNavigationData.length === 0">No data to display</div>
+                    <hierarchy-navigation class="hierarchy-nav" (updateSelected)="onInstanceSelectedUpdate($event)"
+                                          [displayData]="instancesNavigationData"
+                                          [selectedItem]="selectedInstanceData.uniqueId"
+                                          [displayOptions]="hierarchyInstancesDisplayOptions"></hierarchy-navigation>
+                    </div>
+                </tab>
+                <tab tabTitle="Property Structure">
+                    <div class="hierarchy-nav-container">
+                    <div class="hierarchy-header">{{propertyStructureHeader || selectedFlatProperty.name || "No Property Selected"}}</div>
+                    <div *ngIf="!propertiesNavigationData || propertiesNavigationData.length === 0">No data to display</div>
+                    <hierarchy-navigation class="hierarchy-nav" (updateSelected)="onPropertySelectedUpdate($event)"
+                                          [displayData]="propertiesNavigationData"
+                                          [selectedItem]="selectedFlatProperty.uniqueId"
+                                          [displayOptions]="hierarchyPropertiesDisplayOptions"></hierarchy-navigation>
+                    </div>
+                </tab>
+            </tabs>
+        </div>
+    </div>
+</div>