re base code

Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5
Issue-ID: SDC-1566
Signed-off-by: Michael Lando <ml636r@att.com>

34 files changed, 675 insertions, 105 deletions

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
index e279e3f704..981efbb58e 100644
--- 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
@@ -1,11 +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 {{class}}-zone" [class.minimized]="minimized" [class.hidden]="!visible" (click)="backgroundClicked()">
+    <div class="sdc-canvas-zone__header" (click)="unminifyZone(); $event.stopPropagation();" >
         <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">
+    <div class="sdc-canvas-zone__container" #scrollDiv >
         <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
index 3e77c5ca3b..02880a9202 100644
--- 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
@@ -1,5 +1,5 @@
 .sdc-canvas-zone {
-    width: 280px;
+    width: 285px;
     max-height:186px;
     display:flex;
     flex-direction:column;
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
index 7e60cb37a6..4059ad6cae 100644
--- 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
@@ -1,6 +1,5 @@
-import { Component, Input, Output, ViewEncapsulation, EventEmitter } from '@angular/core';
-import { EventListenerService } from 'app/services';
-import { GRAPH_EVENTS } from 'app/utils';
+import { Component, Input, Output, ViewEncapsulation, EventEmitter, OnInit } from '@angular/core';
+import { ZoneInstanceType } from '../../../../models/graph/zones/zone-instance';
 
 @Component({
     selector: 'zone-container',
@@ -9,17 +8,28 @@ import { GRAPH_EVENTS } from 'app/utils';
     encapsulation: ViewEncapsulation.None
 })
 
-export class ZoneContainerComponent {
+export class ZoneContainerComponent implements OnInit {
     @Input() title:string;
-    @Input() class:string;
-    @Input() count:number;
-    @Input() showZone:boolean;
-    @Input() minifyZone:boolean;
-    constructor(private eventListenerService:EventListenerService) {}
+    @Input() type:ZoneInstanceType;
+    @Input() count:number;   
+    @Input() visible:boolean;
+    @Input() minimized:boolean;
+    @Output() minimize: EventEmitter<any> = new EventEmitter<any>();
+    @Output() backgroundClick: EventEmitter<void> = new EventEmitter<void>();
+    private class:string;
+
+    constructor() {}
+
+    ngOnInit() {
+        this.class = ZoneInstanceType[this.type].toLowerCase();
+    }
 
     private unminifyZone = () => {
-        this.minifyZone = !this.minifyZone;
-        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_SIZE_CHANGE);
+        this.minimize.emit();
+    }
+
+    private backgroundClicked = () => {
+        this.backgroundClick.emit();
     }
 
 }
\ 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
index d36b7aec6f..031b081323 100644
--- 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
@@ -1,8 +1,10 @@
-<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 tooltip="{{zoneInstance.instanceData.name}}"  #currentComponent
+        class="zone-instance mode-{{zoneInstance.mode}}" [class.locked]="activeInstanceMode > MODE.HOVER" [class.hiding]="hidden"
+     (mouseenter)="setMode(MODE.HOVER)" (mouseleave)="setMode(MODE.NONE)" (click)="setMode(MODE.SELECTED, $event)">
+        <div *ngIf="zoneInstance.handle" class="target-handle {{zoneInstance.handle}}" (click)="tagHandleClicked($event)"></div>
+        <div *ngIf="!isViewOnly" class="zone-instance__handle" (click)="setMode(MODE.TAG, $event)">+</div>
+        <div class="zone-instance__body">
+            <div class="zone-instance__body-content">{{zoneInstance.assignments.length || defaultIconText}}</div>
         </div>
-        <div class="zone-child__name">{{config.name}}</div>
+        <div class="zone-instance__name">{{zoneInstance.instanceData.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
index a1d56df96e..b562c08514 100644
--- 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
@@ -1,9 +1,12 @@
-.zone-child {
+@import '../../../../../../assets/styles/variables';
+
+.zone-instance {
     position:relative;
     width:76px;
     margin:5px;
+    opacity:1;
 
-    .zone-child__handle {
+    .zone-instance__handle {
         display:none;
         position:absolute;
         right:4px;
@@ -11,33 +14,34 @@
         width:22px;
         height:22px;
         cursor:pointer;
-        border: solid white 1px;
+        border: solid @main_color_p 1px;
         border-radius: 2px;
         text-align: center;
         font-weight:bold;
     }
 
-    .zone-child__body {
+    .zone-instance__body {
         margin:0 auto;
         width:43px;
         height:43px;
         display:flex;
         padding:3px;
-
     }
 
-    .zone-child__body-content {
+    .zone-instance__body-content {
         border-radius: 2px;
         flex:1;
-        color:white;
-        font-size:18px;
+        color:@main_color_p;
+        font-size:16px;
         text-align:center;       
         display:flex;
         align-items: center;
         justify-content: center;
+        box-shadow:none;
+        transition:box-shadow 5s;
     }
 
-    .zone-child__name {
+    .zone-instance__name {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
@@ -45,66 +49,86 @@
     }
     /* Dynamic classes below */
 
+    .target-handle {
+        position:absolute;
+        width:18px;
+        height:18px;
+        display:block;
+        top: -4px;
+        right: 10px;
+        background-size: 100% 100%;
+        cursor: url("../../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
+
+        &.tagged-policy {
+            background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/policy_added.svg');
+        }
+    
+        &.tag-available {
+            background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/indication.svg');
+        }
+    }
+
+
     &.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag
-        .zone-child__body {
+        .zone-instance__body {
             border:solid 2px;
             border-radius: 2px;
             padding:2px;
             cursor:pointer;
         }
-        .zone-child__handle{
+    }
+
+    &.mode-1, &.mode-2:hover{
+        .zone-instance__handle{
             display:block;
-            cursor:pointer;
         }
     }
 
     &.locked {
-        cursor: default;
+        cursor: inherit;
     }
-    
-    // &:not(.locked):hover .zone-child__handle{
-    //     display:block;
-    // }
-    .zone-child__body {
-        cursor: default;
+
+    &.hiding {
+        opacity:0;
+        .zone-instance__body-content {
+            box-shadow: #CCC 0px 0px 15px;
+        }
     }
-    &.mode-3 .zone-child__handle {
+    
+
+    &.mode-3 .zone-instance__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: 2px solid @main_color_p;
         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-instance__handle {
+        background-color:@main_color_a;
     }
-    .zone-child__body-content {
-        background: #009FDB;
+    .zone-instance__body {
+        border-color:@main_color_a;
+        .zone-instance__body-content {
+            background: @main_color_a;
+        }
     }
 }
 
 .sdc-canvas-zone.policy-zone {
-    .zone-child__handle {
-        background-color:#0568AE;
+    .zone-instance__handle {
+        background-color:@main_color_r;
     }
-    .zone-child__body {
-        border-color:#1287D9;
-        .zone-child__body-content {
-            background: #1287D9;
+    .zone-instance__body {
+        border-color:@main_color_r;
+        .zone-instance__body-content {
+            background: @main_color_r;
         }
     }
-    .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
index 8057ae908a..3c2dd45db5 100644
--- 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
@@ -1,5 +1,14 @@
-import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-import { ZoneInstanceConfig, ZoneInstanceMode } from 'app/models/graph/zones/zone-child';
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, SimpleChange, ElementRef, ViewChild, SimpleChanges } from '@angular/core';
+import {
+    ZoneInstance, ZoneInstanceMode, ZoneInstanceType,
+    IZoneInstanceAssignment
+} from 'app/models/graph/zones/zone-instance';
+import { PoliciesService } from '../../../../services/policies.service';
+import { GroupsService } from '../../../../services/groups.service';
+import { IZoneService } from "../../../../../models/graph/zones/zone";
+import { EventListenerService } from 'app/services';
+import { GRAPH_EVENTS } from '../../../../../utils';
+import { Subject, Observable } from 'rxjs';
 
 @Component({
     selector: 'zone-instance',
@@ -7,22 +16,95 @@ import { ZoneInstanceConfig, ZoneInstanceMode } from 'app/models/graph/zones/zon
     styleUrls: ['./zone-instance.component.less'],
     encapsulation: ViewEncapsulation.None
 })
-export class ZoneInstanceComponent {
+export class ZoneInstanceComponent implements OnInit {
 
-    @Input() config:ZoneInstanceConfig;
+    @Input() zoneInstance:ZoneInstance;
     @Input() defaultIconText:string;
     @Input() isActive:boolean;
+    @Input() isViewOnly:boolean;
     @Input() activeInstanceMode: ZoneInstanceMode;
+    @Input() hidden:boolean;
+    @Input() forceSave:Subject<Function>;
     @Output() modeChange: EventEmitter<any> = new EventEmitter<any>();
+    @Output() assignmentSaveStart: EventEmitter<void> = new EventEmitter<void>();
+    @Output() assignmentSaveComplete: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() tagHandleClick: EventEmitter<ZoneInstance> = new EventEmitter<ZoneInstance>();
+    @ViewChild('currentComponent') currentComponent: ElementRef;
     private MODE = ZoneInstanceMode;
+    private zoneService:IZoneService;
 
-    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});
+    constructor(private policiesService:PoliciesService, private groupsService:GroupsService, private eventListenerService:EventListenerService){}
+
+    ngOnInit(){
+        if(this.zoneInstance.type == ZoneInstanceType.POLICY){
+            this.zoneService = this.policiesService;
+        } else {
+            this.zoneService = this.groupsService;
         }
-        if(event){
-            event.stopPropagation();
+        this.forceSave.subscribe((afterSaveFunction:Function) => {
+            this.setMode(ZoneInstanceMode.TAG, null, afterSaveFunction);
+        })
+    }
+
+    ngOnChanges(changes:SimpleChanges) {
+        if(changes.hidden){
+            this.currentComponent.nativeElement.scrollIntoView({behavior: "smooth", block: "nearest", inline:"end"});
         }
     }
 
+    ngOnDestroy() {
+        this.forceSave.unsubscribe();
+    }
+
+    private setMode = (mode:ZoneInstanceMode, event?:any, afterSaveCallback?:Function):void => {
+        
+        if(event){ //prevent event from handle and then repeat event from zone instance
+            event.stopPropagation();
+        }
+
+        if(!this.isActive && this.activeInstanceMode === ZoneInstanceMode.TAG) {
+            return; //someone else is tagging. No events allowed
+        }
+
+        if(this.isActive && this.zoneInstance.mode === ZoneInstanceMode.TAG){
+            if(mode !== ZoneInstanceMode.TAG) {
+                return; //ignore all other events. The only valid option is saving changes.
+            }
+
+            let oldAssignments:Array<IZoneInstanceAssignment> = this.zoneInstance.instanceData.getSavedAssignments();
+            if(this.zoneInstance.isZoneAssignmentChanged(oldAssignments, this.zoneInstance.assignments)) {
+
+                this.assignmentSaveStart.emit();
+                
+                this.zoneService.updateZoneInstanceAssignments(this.zoneInstance.parentComponentType, this.zoneInstance.parentComponentID, this.zoneInstance.instanceData.uniqueId, this.zoneInstance.assignments).subscribe(
+                    (success) => {
+                        this.zoneInstance.instanceData.setSavedAssignments(this.zoneInstance.assignments);
+                        if(this.zoneInstance.type === ZoneInstanceType.POLICY){
+                            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, this.zoneInstance.instanceData);
+                        } else {
+                            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, this.zoneInstance.instanceData);
+                        }
+                        this.assignmentSaveComplete.emit(true);
+                        if(afterSaveCallback) afterSaveCallback();
+                    }, (error) => {
+                        this.zoneInstance.assignments = oldAssignments;
+                        this.assignmentSaveComplete.emit(false);
+                });
+            } else {
+                if(afterSaveCallback) afterSaveCallback();
+            }
+            this.modeChange.emit({newMode: ZoneInstanceMode.NONE, instance: this.zoneInstance});
+
+        } else {
+            this.modeChange.emit({newMode: mode, instance: this.zoneInstance});
+        }         
+        
+
+    } 
+
+    private tagHandleClicked = (event:Event) => {
+        this.tagHandleClick.emit(this.zoneInstance);
+        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 d1e68f3088..c15f92ccb8 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
@@ -53,6 +53,7 @@ export class DynamicElementComponent {
     @ViewChild('target', { read: ViewContainerRef }) target: any;
     @Input() type: any;
     @Input() name: string;
+    @Input() testId: string;
     @Input() readonly:boolean;
     @Input() path:string;//optional param. used only for for subnetpoolid type
 
@@ -111,6 +112,7 @@ export class DynamicElementComponent {
         if (this.cmpRef) {
             this.cmpRef.instance.name = this.name;
             this.cmpRef.instance.type = this.type;
+            this.cmpRef.instance.testId = this.testId;
             this.cmpRef.instance.value = this.value;
             this.cmpRef.instance.readonly = this.readonly;
         }
@@ -133,7 +135,7 @@ export class DynamicElementComponent {
 
             case DynamicElementComponentCreatorIdentifier.FLOAT:
                 this.createComponent(UiElementIntegerInputComponent);
-                this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/;
+                this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
                 break;
 
             case DynamicElementComponentCreatorIdentifier.STRING:
@@ -156,10 +158,10 @@ export class DynamicElementComponent {
             case DynamicElementComponentCreatorIdentifier.DEFAULT:
             default:
                 this.createComponent(UiElementInputComponent);
-                console.log("ERROR: No ui component to handle type: " + this.type);
+                console.log("ERROR: No ui-models component to handle type: " + this.type);
         }
 
-        // Subscribe to change event of of ui-element-basic and fire event to change the value
+        // Subscribe to change event of of ui-models-element-basic and fire event to change the value
         this.cmpRef.instance.baseEmitter.subscribe((event) => { this.emitter.emit(event); });
         this.cmpRef.instance.valueChange.subscribe((event) => { this.valueChange.emit(event); });
     }
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
new file mode 100644
index 0000000000..83daca2ae5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.html
@@ -0,0 +1,13 @@
+<h1 class="w-sdc-designer-sidebar-section-title"
+    tooltip="{{titleTooltip}}"
+    [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
+    (click)="toggleState()">
+    {{caption}}<span class="w-sdc-designer-sidebar-section-title-icon"></span>
+    <ng-content select="header"></ng-content>
+    <span class="w-sdc-designer-sidebar-section-title-icon"></span>
+</h1>
+
+<div class="expand-collapse-content" [ngClass]="{'visible': state === 0, 'hidden': state === 1}">
+    <ng-content></ng-content>
+    <ng-content select="content"></ng-content>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
new file mode 100644
index 0000000000..e5dd2527c1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.less
@@ -0,0 +1,7 @@
+.ellipsis-directive-more-less {
+    float: right;
+    margin-right: 10px;
+    line-height: 23px;
+    text-decoration: underline;
+    text-align: left;
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.ts b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.ts
new file mode 100644
index 0000000000..0fa0d33de9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/expand-collapse/expand-collapse.component.ts
@@ -0,0 +1,56 @@
+/*-
+ * ============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, Output, ViewEncapsulation, AfterViewInit } from '@angular/core';
+
+export enum ExpandState {
+    EXPANDED,
+    COLLAPSED
+}
+
+@Component({
+    selector: 'ng2-expand-collapse',
+    templateUrl: './expand-collapse.component.html',
+    styleUrls: ['./expand-collapse.component.less'],
+    encapsulation: ViewEncapsulation.None
+})
+
+export class ExpandCollapseComponent implements AfterViewInit {
+    @Input() caption: String;
+    @Input() state: ExpandState;
+    @Input() titleTooltip: String;
+
+    constructor() {
+
+    }
+
+    toggleState():void {
+        if (this.state == ExpandState.EXPANDED) {
+            this.state = ExpandState.COLLAPSED;
+        } else {
+            this.state = ExpandState.EXPANDED;
+        }
+    }
+
+    ngAfterViewInit(): 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 805e5ac295..c564abc092 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)="onChange()"  [ngClass]="{'disabled':readonly}" data-tests-id="SelectType">
+<select name='{{name}}' [(ngModel)]="value" (change)="onChange()"  [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'value-' + testId">
   <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/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html
index 057e731ada..fdba850e93 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
@@ -11,4 +11,5 @@
     [formControl]="control"
     tooltip="{{value}}"
     [readonly]="readonly"
+    [attr.data-tests-id]="'value-' + testId"
     />
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 e1555e87fd..04307e4c2d 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
@@ -11,4 +11,5 @@
     [formControl]="control"
     tooltip="{{value}}"
     [readonly]="readonly"
+    [attr.data-tests-id]="'value-' + testId"
 />
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
index 3bd51b4e36..3bc94de1e4 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html
@@ -7,7 +7,7 @@
         [value]="value!=undefined?value:''"
         disabled
         />
-    <button [popover]="popoverForm"  [ngClass]="{'disabled':readonly}">Edit</button>
+    <button [popover]="popoverForm" (onShown)="setEditValue()"  [ngClass]="{'disabled':readonly}" [attr.data-tests-id] ="'edit-button-' + testId">Edit</button>
 </div>
 
 <popover-content #popoverForm [title]="name" [buttons]="buttonsArray" [placement]="'top'" [closeOnClickOutside]="true">
@@ -16,11 +16,12 @@
                     #textArea
                     class="subnet-value"
                     [ngClass]="{'error': control.invalid}"
-                    [(ngModel)]="value"
+                    [(ngModel)]="editValue"
                     [attr.maxlength]="validation.propertyValue.max"
                     [attr.minlength]="validation.propertyValue.min"
                     [pattern]="pattern"
                     [formControl]="control"
+                    [attr.data-tests-id]="'value-' + testId"
                   ></textarea>
     </div>
 </popover-content>
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 525cd1742c..f485d270fa 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
@@ -18,7 +18,7 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Component, ViewChild, ElementRef, Input} from '@angular/core';
+import {Component, ViewChild, ElementRef} from '@angular/core';
 import {ButtonsModelMap, ButtonModel} from "app/models";
 import {PopoverContentComponent} from "../../popover/popover-content.component";
 import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component";
@@ -32,13 +32,14 @@ export class UiElementPopoverInputComponent extends UiElementBase implements UiE
     @ViewChild('textArea') textArea: ElementRef;
     @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent;
 
+    editValue: any;
     saveButton: ButtonModel;
     buttonsArray: ButtonsModelMap;
 
     constructor() {
         super();
         // Create Save button and insert to buttons map
-        this.saveButton = new ButtonModel('save', 'blue', this.onChange);
+        this.saveButton = new ButtonModel('Set', 'blue', this.onChange.bind(this));
         this.buttonsArray = { 'test': this.saveButton };
 
         // Define the regex pattern for this controller
@@ -47,4 +48,15 @@ export class UiElementPopoverInputComponent extends UiElementBase implements UiE
         // Disable / Enable button according to validation
         //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid);
     }
+
+    public setEditValue() {
+        // copy value to edit
+        this.editValue = angular.copy(this.value);
+    }
+
+    public onChange() {
+        this.popoverContentComponent.hide();
+        this.value = this.editValue;
+        super.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 b4e9e7d36a..31fa7c3442 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
@@ -46,9 +46,12 @@ export class UiElementBase {
 
     @Input() name: string;
     @Input() type: string;
+    @Input() path: string;
     @Input() pattern: any;
     @Input() readonly:boolean;
 
+    @Input() testId:string;
+
     constructor() {
         //this.control = new FormControl('', [Validators.required]);
         this.control = new FormControl('', []);
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
new file mode 100644
index 0000000000..34404e50a5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
+import { ValueEditComponent } from './value-edit/value-edit.component';
+import { UnsavedChangesComponent } from "./unsaved-changes/unsaved-changes.component";
+import { UiElementsModule } from "../ui-elements.module";
+
+
+
+@NgModule({
+    declarations: [
+        ValueEditComponent,
+        UnsavedChangesComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        UiElementsModule
+    ],
+    exports: [ValueEditComponent, UnsavedChangesComponent],
+    entryComponents: [ UnsavedChangesComponent
+    ],
+    providers: []
+})
+export class ModalFormsModule {
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html
new file mode 100644
index 0000000000..bdf21dec62
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html
@@ -0,0 +1,6 @@
+<div class="unsaved-changes-modal">
+    <div class="message">
+        <p>Your changes {{isValidChangedData ? '' : '(invalid)'}} have not been saved.</p>
+        <p>Do you want to {{isValidChangedData ? 'save' : 'discard'}} them?</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts
new file mode 100644
index 0000000000..b8fdeaf659
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: 'unsaved-changes',
+    templateUrl: './unsaved-changes.component.html',
+    styleUrls: []
+})
+export class UnsavedChangesComponent {
+
+    @Input() isValidChangedData:boolean;
+
+    constructor(){
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
new file mode 100644
index 0000000000..464b756a3f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
@@ -0,0 +1,12 @@
+<div class="name-update-container">
+     <sdc-input #updateNameInput 
+        label="Instance Name" 
+        required="true" 
+        [maxLength]="50" 
+        [(value)]="name" 
+        testId="instanceName"></sdc-input>
+     <sdc-validation [validateElement]="updateNameInput" (validityChanged)="validityChanged($event)">
+        <sdc-required-validator message="Name is required."></sdc-required-validator>
+        <sdc-regex-validator message="Special characters not allowed." [pattern]="pattern"></sdc-regex-validator>
+    </sdc-validation>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
new file mode 100644
index 0000000000..b958ca17b7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
@@ -0,0 +1,3 @@
+.name-update-container {
+    min-height: 90px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
new file mode 100644
index 0000000000..08bc0586c7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: 'value-edit',
+    templateUrl: './value-edit.component.html',
+    styleUrls: ['./value-edit.component.less']
+})
+export class ValueEditComponent {
+
+    @Input() name:String;
+    @Input() validityChangedCallback: Function;
+
+    private pattern:string = "^[\\s\\w\&_.:-]{1,1024}$"
+    constructor(){
+    }
+
+    private validityChanged = (value):void => {
+        if(this.validityChangedCallback) {
+            this.validityChangedCallback(value);
+        }
+    }
+
+
+
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html
new file mode 100644
index 0000000000..ba897198d6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.html
@@ -0,0 +1,30 @@
+<div class="component-add-element">
+    <div class="add-element-selection-container">
+        <sdc-dropdown class="add-element-selection" selectedOption="selectedElement" placeHolder="Please choose option"
+                      (changed)="onElementSelected($event)" [options]="dropdownOptions"></sdc-dropdown>
+        <svg-icon-label class="add-element-button" [class.disabled]="!selectedElement"
+                        name="plus-circle-o"
+                        mode="primary"
+                        size="medium"
+                        label="ADD"
+                        labelPlacement="right"
+                        clickable="{{!!selectedElement}}"
+                        (click)="addElement()">
+        </svg-icon-label>
+    </div>
+
+    <div class="elements-list">
+        <ul>
+            <li *ngFor="let element of existingElements" class="elements-list-item">
+                <span>{{element.name}}</span>
+                <svg-icon-label name="trash-o" clickable="true" size="small" class="elements-list-item-delete"
+                                data-tests-id="delete_target" (click)="removeElement(element)"></svg-icon-label>
+            </li>
+        </ul>
+        <div *ngIf="existingElements.length===0" class="add-element-no-data">
+            <div class="add-element-no-data-title">No {{elementName}} have been added yet.</div>
+            <div class="add-element-no-data-content">Begin typing or select {{elementName}} above</div>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less
new file mode 100644
index 0000000000..522483dfb7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.less
@@ -0,0 +1,61 @@
+@import "./../../../../../../assets/styles/variables-old";
+
+.component-add-element {
+
+  .add-element-selection-container {
+
+    display: flex;
+    flex-direction: row;
+    .add-element-selection {
+      flex: 2;
+    }
+
+    .add-element-button {
+      padding: 0px 0px 0px 15px;
+      &:not(.disabled) {
+        cursor:pointer;
+      }
+    }
+
+  }
+
+  .elements-list {
+    border: 1px solid #d2d2d2;
+    margin-top: 10px;
+    height: 300px;
+    overflow: auto;
+
+    .elements-list-item {
+      padding: 10px 20px 10px 20px;
+
+      &:first-child {
+        padding-top: 15px;
+      }
+
+      &:hover {
+        background-color: #f8f8f8;
+        .elements-list-item-delete {
+          visibility: visible;
+        }
+      }
+    }
+  }
+
+  .elements-list-item-delete {
+    float:right;
+    cursor: pointer;
+    visibility: hidden;
+  }
+
+
+  .add-element-no-data {
+    margin: 0 auto;
+    padding-top: 30px;
+    text-align: center;
+
+    .add-element-no-data-title {
+      font-family: @font-opensans-bold;
+    }
+
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
new file mode 100644
index 0000000000..1d05b27d68
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.component.ts
@@ -0,0 +1,65 @@
+/**
+ * Created by ob0695 on 11.04.2018.
+ */
+import {Component, Input} from "@angular/core";
+import {UiBaseObject} from "../../../../../models/ui-models/ui-base-object";
+import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
+
+@Component({
+    selector: 'add-elements',
+    templateUrl: './add-elements.component.html',
+    styleUrls: ['./add-elements.component.less']
+})
+
+export class AddElementsComponent {
+
+    @Input() elementsToAdd:Array<UiBaseObject>;
+    @Input() elementName: string;
+
+    private existingElements:Array<UiBaseObject>;
+    private dropdownOptions:Array<IDropDownOption>;
+    private selectedElement:IDropDownOption;
+
+    ngOnInit() {
+        this.existingElements = [];
+        this.convertElementToDropdownDisplay();
+
+    }
+
+    private convertElementToDropdownDisplay = () => {
+        this.dropdownOptions = [];
+        _.forEach(this.elementsToAdd, (elementToAdd:UiBaseObject) =>{
+           this.dropdownOptions.push({label:elementToAdd.name, value: elementToAdd.uniqueId })
+        });
+    }
+
+    onElementSelected(selectedElement:IDropDownOption):void {
+        this.selectedElement = selectedElement
+    }
+
+    addElement():void {
+
+        if(this.selectedElement){
+            this.dropdownOptions = _.reject(this.dropdownOptions, (option: IDropDownOption) => { // remove from dropDown
+                return option.value === this.selectedElement.value;
+            });
+
+            let selected = _.find(this.elementsToAdd, (element:UiBaseObject) => {
+                return this.selectedElement.value === element.uniqueId;
+            });
+
+            this.elementsToAdd =_.without(this.elementsToAdd, selected); // remove from optional elements to add
+            this.existingElements.push(selected); // add to existing element list
+            this.selectedElement = undefined;
+        } else {
+            console.log("no element selected"); //TODO:show error?
+        }
+    }
+
+    removeElement(element:UiBaseObject):void {
+
+        this.existingElements =_.without(this.existingElements, element); // remove from optional elements to add
+        this.dropdownOptions.push({label:element.name, value: element.uniqueId });
+        this.elementsToAdd.push(element);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
new file mode 100644
index 0000000000..a1c34f5686
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal/add-elements/add-elements.module.ts
@@ -0,0 +1,30 @@
+/**
+ * Created by ob0695 on 11.04.2018.
+ */
+import {NgModule} from "@angular/core";
+import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+import {AddElementsComponent} from "./add-elements.component";
+import {CommonModule} from "@angular/common";
+
+/**
+ * Created by ob0695 on 9.04.2018.
+ */
+@NgModule({
+    declarations: [
+        AddElementsComponent
+    ],
+
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule
+    ],
+
+    entryComponents: [
+        AddElementsComponent
+    ],
+    exports: [],
+    providers: []
+})
+export class AddElementsModule {
+
+}
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 6fc55d19e7..1708fc4c23 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,5 @@
 <div class="custom-modal {{input.size}}">
     <div class="ng2-modal-content"
-        ngDraggable
         [ngDraggable]="input.isMovable"
         [handle]="ModalHandle"
         [bounds]="ModalBounds"
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
index 609a1fc5e1..7e45b9e55b 100644
--- 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
@@ -24,6 +24,7 @@ import { setTimeout } from 'core-js/library/web/timers';
 import { EventListenerService } from 'app/services';
 import { GRAPH_EVENTS } from 'app/utils';
 import { Point } from 'app/models';
+import { ZoneInstanceType, ZoneInstance } from '../../../../models/graph/zones/zone-instance';
  
 
 
@@ -37,8 +38,9 @@ export class PaletteAnimationComponent  {
   
   @Input() from : Point;
   @Input() to : Point;
+  @Input() type: ZoneInstanceType;
   @Input() iconName : string;
-  @Input() data : any;
+  @Input() zoneInstance : ZoneInstance;
 
   public  animation;
   private visible:boolean = false;
@@ -47,6 +49,11 @@ export class PaletteAnimationComponent  {
 
   constructor(private eventListenerService:EventListenerService) {}
   
+
+  ngOnDestroy(){
+    this.zoneInstance.hidden = false; //if animation component is destroyed before animation is complete
+  }
+
   public runAnimation() {
     this.visible = true;
     let positionDiff:Point = new Point(this.to.x - this.from.x, this.to.y - this.from.y);
@@ -57,7 +64,7 @@ export class PaletteAnimationComponent  {
 
   public animationComplete = (e) => {
     this.visible = false;
-    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_FINISH_ANIMATION_ZONE);
+    this.zoneInstance.hidden = false;
   };
 
 
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
index d30d5f6178..a10ca7dc81 100644
--- 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
@@ -35,7 +35,8 @@ export class PalettePopupPanelComponent implements OnInit {
 
     public addZoneInstance(): void {
         if(this.displayComponent) {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_COMPONENT_INSTANCE_ZONE_START, this.component, this.displayComponent, this.popupPanelPosition);
+            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition);
+            this.hidePopupPanel();
         }
     }
 
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
new file mode 100644
index 0000000000..a7a7b2c5b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
@@ -0,0 +1,28 @@
+<div class="sdc-tile sdc-tile-fix-width">
+
+    <div class='sdc-tile-header' [ngClass]="{'purple': component.isResource(), 'blue': !component.isResource()}">
+        <div *ngIf="component.isResource()" data-tests-id="asset-type">{{component.getComponentSubType()}}</div>
+        <div *ngIf="component.isService()">S</div>
+    </div>
+
+    <div class='sdc-tile-content' data-tests-id="dashboard-Elements" (click)="tileClicked()">
+        <div class='sdc-tile-content-icon'>
+            <div [ngClass]="[component.iconSprite, component.icon]" [ngClass]="{'sprite-resource-icons': component.isResource(), 'sprite-services-icons': component.isService()}"
+                 [attr.data-tests-id]="component.name"></div>
+        </div>
+
+        <div class='sdc-tile-content-info'>
+            <div class="sdc-tile-info-line title" [attr.data-tests-id]="component.name | resourceName" [tooltip]="component.name | resourceName" [tooltipDisabled]="!hasEllipsis">
+                <multiline-ellipsis className="w-sdc-tile-multiline-ellipsis" [lines]="3" (hasEllipsisChanged)="hasEllipsis = $event">{{component.name | resourceName}}</multiline-ellipsis>
+            </div>
+            <div class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V {{component.version}}</div>
+        </div>
+    </div>
+
+    <div class='sdc-tile-footer'>
+        <div class="sdc-tile-footer-content">
+            <div class='sdc-tile-footer-text'>{{component.getStatus(sdcMenu)}}</div>
+        </div>
+    </div>
+
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
new file mode 100644
index 0000000000..b6f63584be
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -0,0 +1,24 @@
+import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
+import {Component as ComponentModel} from 'app/models';
+import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
+
+@Component({
+    selector: 'ui-tile',
+    templateUrl: './tile.component.html',
+    styleUrls: ['./tile.component.less']
+})
+export class TileComponent {
+    @Input() public component: ComponentModel;
+    @Output() public onTileClick: EventEmitter<ComponentModel>;
+
+    public hasEllipsis: boolean;
+
+    constructor(@Inject(SdcMenuToken) public sdcMenu:IAppMenu) {
+        this.onTileClick = new EventEmitter<ComponentModel>();
+        this.hasEllipsis = false;
+    }
+
+    public tileClicked() {
+        this.onTileClick.emit(this.component);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts b/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts
new file mode 100644
index 0000000000..55b34400d6
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { TileComponent } from './tile.component';
+import { GlobalPipesModule } from "../../../pipes/global-pipes.module";
+import { TooltipModule } from "../tooltip/tooltip.module";
+import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multiline-ellipsis.module";
+
+
+@NgModule({
+    imports: [BrowserModule, GlobalPipesModule, TooltipModule, MultilineEllipsisModule],
+    declarations: [TileComponent],
+    exports: [TileComponent],
+    entryComponents: [TileComponent]
+})
+export class TileModule { }
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 44314734c3..e905db73a6 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
@@ -20,26 +20,28 @@
 
 import { NgModule } from '@angular/core';
 import { NavbarModule } from "./navbar/navbar.module";
-import {DynamicElementModule} from "./dynamic-element/dynamic-element.module";
-import {FormElementsModule} from "./form-components/form-elements.module";
-import {LoaderComponent} from "./loader/loader.component";
-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";
-import {FormsModule} from "@angular/forms";
-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";
+import { DynamicElementModule } from "./dynamic-element/dynamic-element.module";
+import { FormElementsModule } from "./form-components/form-elements.module";
+import { LoaderComponent } from "./loader/loader.component";
+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";
+import { FormsModule } from "@angular/forms";
+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 { ExpandCollapseComponent } from './expand-collapse/expand-collapse.component';
+import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
+import { TileModule } from "./tile/tile.module";
 
 @NgModule({
   declarations: [
@@ -49,11 +51,12 @@ import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-n
     PalettePopupPanelComponent,
     ZoneContainerComponent,
     ZoneInstanceComponent,
-    PaletteAnimationComponent
+    PaletteAnimationComponent,
+    ExpandCollapseComponent
 ],
-
+  
   imports: [
-    //SdcUiComponentsModule,
+    SdcUiComponentsModule,
     BrowserModule,
     FormsModule,
     CommonModule,
@@ -66,7 +69,8 @@ import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-n
     TooltipModule,
     MultiStepsWizardModule,
     MenuListModule,
-    MenuListNg2Module
+    MenuListNg2Module,
+    TileModule
   ],
   exports: [
     LoaderComponent,
@@ -85,7 +89,9 @@ import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-n
     TooltipModule,
     MenuListModule,
     MenuListNg2Module,
-    PaletteAnimationComponent
+    PaletteAnimationComponent,
+    ExpandCollapseComponent,
+    TileModule
   ],
   entryComponents: [SearchWithAutoCompleteComponent, PalettePopupPanelComponent, ZoneContainerComponent, ZoneInstanceComponent, PaletteAnimationComponent]
 })