Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

60 files changed, 936 insertions, 1034 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
deleted file mode 100644
index 50a93fac3c..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
-  -->
- 
- 
-<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" #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
deleted file mode 100644
index 02880a9202..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.less
+++ /dev/null
@@ -1,62 +0,0 @@
-.sdc-canvas-zone {
-    width: 285px;
-    max-height:186px;
-    display:flex;
-    flex-direction:column;
-    align-self: flex-end;
-    color:white;
-    font-family:OpenSans-Regular, sans-serif;
-    transition: width .2s ease-in-out, max-height .2s ease-in-out .1s;
-    position:relative;
-    bottom:0px;
-    
-    .sdc-canvas-zone__header {
-        background: #5A5A5A;
-        border-radius: 2px 2px 0 0;
-        padding: 5px 10px;
-        display:flex;
-        justify-content: space-between;
-        font-size: 14px;
-        text-transform:uppercase;
-        .sdc-canvas-zone__state-button {
-            font-weight:bold;
-            cursor:pointer;
-        }
-    }
-
-    .sdc-canvas-zone__container {
-        padding:5px;
-        background-color: #5A5A5A;
-        opacity:0.9;
-        flex: 1;
-        display:flex;
-        flex-direction: row;
-        align-items: flex-start;
-        flex-wrap:wrap;
-        overflow-y:auto;
-        min-height: 80px;
-        max-height: 170px;
-    }
-
-
-    &.minimized {
-        max-height:30px;
-        width:120px;
-        cursor:pointer;
-        
-        .sdc-canvas-zone__state-button {
-            display:none;
-        }
-        .sdc-canvas-zone__container {
-            flex: 0 0 0;
-            min-height: 0;
-            padding: 0;
-            overflow-y:hidden;
-            transition: min-height .2s ease-in-out .2s;
-            transition: padding .1s ease-in-out 0s;
-        }
-    }
-    &.hidden {
-        display:none;
-    }
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
deleted file mode 100644
index 4059ad6cae..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-container.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, Input, Output, ViewEncapsulation, EventEmitter, OnInit } from '@angular/core';
-import { ZoneInstanceType } from '../../../../models/graph/zones/zone-instance';
-
-@Component({
-    selector: 'zone-container',
-    templateUrl: './zone-container.component.html',
-    styleUrls: ['./zone-container.component.less'],
-    encapsulation: ViewEncapsulation.None
-})
-
-export class ZoneContainerComponent implements OnInit {
-    @Input() title:string;
-    @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.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
deleted file mode 100644
index 728764c427..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
- -->
- 
- 
-<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-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
deleted file mode 100644
index b562c08514..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
+++ /dev/null
@@ -1,134 +0,0 @@
-@import '../../../../../../assets/styles/variables';
-
-.zone-instance {
-    position:relative;
-    width:76px;
-    margin:5px;
-    opacity:1;
-
-    .zone-instance__handle {
-        display:none;
-        position:absolute;
-        right:4px;
-        top:10px;
-        width:22px;
-        height:22px;
-        cursor:pointer;
-        border: solid @main_color_p 1px;
-        border-radius: 2px;
-        text-align: center;
-        font-weight:bold;
-    }
-
-    .zone-instance__body {
-        margin:0 auto;
-        width:43px;
-        height:43px;
-        display:flex;
-        padding:3px;
-    }
-
-    .zone-instance__body-content {
-        border-radius: 2px;
-        flex:1;
-        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-instance__name {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        text-align:center;
-    }
-    /* 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-instance__body {
-            border:solid 2px;
-            border-radius: 2px;
-            padding:2px;
-            cursor:pointer;
-        }
-    }
-
-    &.mode-1, &.mode-2:hover{
-        .zone-instance__handle{
-            display:block;
-        }
-    }
-
-    &.locked {
-        cursor: inherit;
-    }
-
-    &.hiding {
-        opacity:0;
-        .zone-instance__body-content {
-            box-shadow: #CCC 0px 0px 15px;
-        }
-    }
-    
-
-    &.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 @main_color_p;
-        border-radius: 2px;
-        box-shadow: inset 2px -2px 3px 0 #007A3E;
-    }
-
-}
-.sdc-canvas-zone.group-zone {
-    .zone-instance__handle {
-        background-color:@main_color_a;
-    }
-    .zone-instance__body {
-        border-color:@main_color_a;
-        .zone-instance__body-content {
-            background: @main_color_a;
-        }
-    }
-}
-
-.sdc-canvas-zone.policy-zone {
-    .zone-instance__handle {
-        background-color:@main_color_r;
-    }
-    .zone-instance__body {
-        border-color:@main_color_r;
-        .zone-instance__body-content {
-            background: @main_color_r;
-        }
-    }
-}
\ 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
deleted file mode 100644
index 3c2dd45db5..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-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',
-    templateUrl: './zone-instance.component.html',
-    styleUrls: ['./zone-instance.component.less'],
-    encapsulation: ViewEncapsulation.None
-})
-export class ZoneInstanceComponent implements OnInit {
-
-    @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;
-
-    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;
-        }
-        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/download-artifact/download-artifact.component.ts b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts
new file mode 100644
index 0000000000..8f47456a8f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/download-artifact/download-artifact.component.ts
@@ -0,0 +1,145 @@
+import { Component, Input } from "@angular/core";
+import {IFileDownload, Component as TopologyTemplate, ArtifactModel, FullComponentInstance} from "app/models";
+import {EventListenerService} from "app/services";
+import {CacheService} from "app/services-ng2";
+import {EVENTS} from "app/utils";
+import { TopologyTemplateService } from "app/ng2/services/component-services/topology-template.service";
+import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service";
+import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service";
+
+@Component({
+    selector: 'download-artifact',
+    template: `
+	<svg-icon [mode]="'primary2'" [disabled]="disabled" [clickable]="!disabled" [name]="iconType" [testId]="testId" mode="info" clickable="true" size="medium" (click)="download($event)"></svg-icon>
+`
+})
+export class DownloadArtifactComponent {
+    
+    @Input() showLoader:boolean;
+    @Input() artifact:ArtifactModel;
+    @Input() isInstance: boolean;
+    @Input() downloadIconClass: string;
+    @Input() componentType: string;
+    @Input() componentId: string;
+    @Input() testId: string;
+    @Input() disabled: boolean;
+
+    public iconType:string;
+
+    private DOWNLOAD_CSS_CLASSES = {
+        DOWNLOAD_ICON: "download-o",
+        LOADER_ICON: "spinner"
+    }
+    constructor(private cacheService:CacheService, private EventListenerService:EventListenerService, private topologyTemplateService:TopologyTemplateService,
+                private componentInstanceService: ComponentInstanceServiceNg2, private workspaceService:WorkspaceService) {
+        
+    }
+
+    ngOnInit () {
+        this.iconType = this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+        this.initDownloadLoader();
+
+    }
+
+    private initDownloadLoader = ()=> {
+        //if the artifact is in a middle of download progress register form callBack & change icon from download to loader
+        if (this.showLoader && this.cacheService.get(this.artifact.uniqueId)) {
+            this.EventListenerService.registerObserverCallback(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + this.artifact.uniqueId, this.updateDownloadIcon);
+            window.setTimeout(():void => {
+                if (this.cacheService.get(this.artifact.uniqueId)) {
+                    this.iconType = this.DOWNLOAD_CSS_CLASSES.LOADER_ICON;
+                }
+            }, 1000);
+        }
+    };
+
+    private updateDownloadIcon = () => {
+        this.iconType = this.downloadIconClass || this.DOWNLOAD_CSS_CLASSES.DOWNLOAD_ICON;
+    };
+
+    public download = (event) => {
+        event.stopPropagation();
+        let onFaild = (response):void => {
+            console.info('onFaild', response);
+            this.removeDownloadedFileLoader();
+        };
+
+        let onSuccess = (data:IFileDownload):void => {
+            this.downloadFile(data);
+            this.removeDownloadedFileLoader();
+        };
+
+        this.setDownloadedFileLoader();
+
+        if (this.isInstance) {
+            this.componentInstanceService.downloadInstanceArtifact(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild);
+        } else {
+            this.topologyTemplateService.downloadArtifact(this.componentType, this.componentId, this.artifact.uniqueId).subscribe(onSuccess, onFaild);
+        }
+    };
+
+    private setDownloadedFileLoader = ()=> {
+        if (this.showLoader) {
+            //set in cache service thet the artifact is in download progress
+            this.cacheService.set(this.artifact.uniqueId, true);
+            this.initDownloadLoader();
+        }
+    };
+
+    private removeDownloadedFileLoader = ()=> {
+        if (this.showLoader) {
+            this.cacheService.set(this.artifact.uniqueId, false);
+            this.EventListenerService.notifyObservers(EVENTS.DOWNLOAD_ARTIFACT_FINISH_EVENT + this.artifact.uniqueId);
+        }
+    };
+
+    private downloadFile = (file:IFileDownload):void => {
+        if (file) {
+            let blob = this.base64toBlob(file.base64Contents, '');
+            let fileName = file.artifactName;
+            this.triggerFileDownload(blob, fileName);
+        }
+    };
+
+    public base64toBlob = (base64Data, contentType):any => {
+        let byteCharacters = atob(base64Data);
+        return this.byteCharactersToBlob(byteCharacters, contentType);
+    };
+
+    public byteCharactersToBlob = (byteCharacters, contentType):any => {
+        contentType = contentType || '';
+        let sliceSize = 1024;
+        let bytesLength = byteCharacters.length;
+        let slicesCount = Math.ceil(bytesLength / sliceSize);
+        let byteArrays = new Array(slicesCount);
+
+        for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+            let begin = sliceIndex * sliceSize;
+            let end = Math.min(begin + sliceSize, bytesLength);
+
+            let bytes = new Array(end - begin);
+            for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+                bytes[i] = byteCharacters[offset].charCodeAt(0);
+            }
+            byteArrays[sliceIndex] = new Uint8Array(bytes);
+        }
+        return new Blob(byteArrays, {type: contentType});
+    };
+
+    public triggerFileDownload = (blob, fileName):void=> {
+        let url = window.URL.createObjectURL(blob);
+        let downloadLink = document.createElement("a");
+
+        downloadLink.setAttribute('href', url);
+        downloadLink.setAttribute('download', fileName);
+        document.body.appendChild(downloadLink);
+
+        var clickEvent = new MouseEvent("click", {
+            "view": window,
+            "bubbles": true,
+            "cancelable": true
+        });
+        downloadLink.dispatchEvent(clickEvent);
+
+    }
+}
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 049d40831a..5e3214d888 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
@@ -37,11 +37,13 @@ enum DynamicElementComponentCreatorIdentifier {
     BOOLEAN,
     SUBNETPOOLID,
     ENUM,
+    LIST,
     DEFAULT
 }
 
 @Component({
     selector: 'dynamic-element',
+    // Span - if constraints not empty
     template: `<div #target></div>`,
     styleUrls: ['./dynamic-element.component.less'],
     entryComponents: [
@@ -61,6 +63,7 @@ export class DynamicElementComponent {
     @Input() readonly:boolean;
     @Input() constraints: Array<any>;
     @Input() path:string;//optional param. used only for for subnetpoolid type
+    @Input() declared:boolean;
 
     @Input() value: any;
     @Output() valueChange: EventEmitter<any> = new EventEmitter<any>();
@@ -72,16 +75,19 @@ export class DynamicElementComponent {
     validation = ValidationConfiguration.validation;
 
     constructor(
+        
         private componentFactoryResolver: ComponentFactoryResolver,
         private compiler: Compiler,
         private el: ElementRef) {
+           
+            
     }
 
     updateComponent() {
         if (!this.isViewInitialized) {
             return;
         }
-
+        
         // Factory to create component based on type or other property attributes.
         const prevElementCreatorIdentifier: DynamicElementComponentCreatorIdentifier = this.elementCreatorIdentifier;
         switch(true) {
@@ -112,7 +118,7 @@ export class DynamicElementComponent {
         }
 
         // In case the dynamic element creator is changed, then destroy old and build new.
-        if (this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
+        if (this.declared || this.elementCreatorIdentifier !== prevElementCreatorIdentifier) {
             if (this.cmpRef) {
                 this.cmpRef.destroy();
             }
@@ -149,64 +155,81 @@ export class DynamicElementComponent {
     }
 
     createComponentByIdentifier() {
-        switch(this.elementCreatorIdentifier) {
-            case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
-                if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
-                    let pathArray = this.path.split("#");
-                    this.name = pathArray[pathArray.length - 2];
-                }
-                this.createComponent(UiElementPopoverInputComponent);
-                break;
+        // if(!this.constraints || this.declared){
+            switch(this.elementCreatorIdentifier) {
+                case DynamicElementComponentCreatorIdentifier.SUBNETPOOLID:
+                    if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name
+                        let pathArray = this.path.split("#");
+                        this.name = pathArray[pathArray.length - 2];
+                    }
+                    this.createComponent(UiElementPopoverInputComponent);
+                    break;
+                case DynamicElementComponentCreatorIdentifier.ENUM:
+                    this.createComponent(UiElementDropDownComponent);
+                    let validVals:Array<DropdownValue> = [...this.getValidValues()].map(val => new DropdownValue(val, val));
+                    if (this.type === 'float' || this.type === 'integer') {
+                        this.value = this.value && Number(this.value);
+                        validVals = _.map(
+                            validVals,
+                            (val) => new DropdownValue(Number(val.value), val.value)
+                        );
+                    }
+                    this.cmpRef.instance.values = validVals;
+                    break;
+                case DynamicElementComponentCreatorIdentifier.INTEGER:
+                    this.createComponent(UiElementIntegerInputComponent);
+                    this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
+                    break;
 
-            case DynamicElementComponentCreatorIdentifier.ENUM:
-                this.createComponent(UiElementDropDownComponent);
-                let validVals:Array<DropdownValue> = [...this.getValidValues()].map(val => new DropdownValue(val, val));
-                if (this.type === 'float' || this.type === 'integer') {
-                    this.value = this.value && Number(this.value);
-                    validVals = _.map(
-                        validVals,
-                        val => new DropdownValue(Number(val.value), val.value)
-                    );
-                }
-                this.cmpRef.instance.values = validVals;
-                break;
+                case DynamicElementComponentCreatorIdentifier.FLOAT:
+                    this.createComponent(UiElementIntegerInputComponent);
+                    this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
+                    break;
 
-            case DynamicElementComponentCreatorIdentifier.INTEGER:
-                this.createComponent(UiElementIntegerInputComponent);
-                this.cmpRef.instance.pattern = this.validation.validationPatterns.integer;
-                break;
+                case DynamicElementComponentCreatorIdentifier.STRING:
+                    this.createComponent(UiElementInputComponent);
+                    break;
 
-            case DynamicElementComponentCreatorIdentifier.FLOAT:
-                this.createComponent(UiElementIntegerInputComponent);
-                this.cmpRef.instance.pattern = /^[-+]?[0-9]+(\.[0-9]+)?([eE][-+]?[0-9]+)?$/.source;
-                break;
+                case DynamicElementComponentCreatorIdentifier.BOOLEAN:
+                    this.createComponent(UiElementDropDownComponent);
 
-            case DynamicElementComponentCreatorIdentifier.STRING:
-                this.createComponent(UiElementInputComponent);
-                break;
-
-            case DynamicElementComponentCreatorIdentifier.BOOLEAN:
-                this.createComponent(UiElementDropDownComponent);
-
-                // Build drop down values
-                let tmp = [];
-                tmp.push(new DropdownValue(true,'TRUE'));
-                tmp.push(new DropdownValue(false,'FALSE'));
-                this.cmpRef.instance.values = tmp;
-                try {
-                    if (typeof this.value === 'string') {
-                        this.value = JSON.parse(this.value);
+                    // Build drop down values
+                    let tmp = [];
+                    tmp.push(new DropdownValue(true,'TRUE'));
+                    tmp.push(new DropdownValue(false,'FALSE'));
+                    this.cmpRef.instance.values = tmp;
+                    try {
+                        if(typeof this.value === 'string'){
+                            this.value = JSON.parse(this.value);
+                        }
+                    } catch (err) {
+                        this.value = null;
                     }
-                } catch(err) {
-                    this.value = null;
-                }
-                break;
+                    break;
 
-            case DynamicElementComponentCreatorIdentifier.DEFAULT:
-            default:
-                this.createComponent(UiElementInputComponent);
-                console.log("ERROR: No ui-models component to handle type: " + this.type);
-        }
+                case DynamicElementComponentCreatorIdentifier.DEFAULT:
+                default:
+                    this.createComponent(UiElementInputComponent);
+                    console.log("ERROR: No ui-models component to handle type: " + this.type);
+            }
+        // }
+        // //There are consraints
+        // else {
+            
+        //     this.createComponent(UiElementDropDownComponent);
+
+        //     // Build drop down values
+        //     let items = [];
+        //     this.constraints.forEach( (element) => {
+        //         items.push(new DropdownValue(element,element));
+        //     });
+
+        //     items.push(new DropdownValue(this.value,this.value, true, true));
+        //     this.cmpRef.instance.values = items;
+            
+            
+            
+        // }
 
         // 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); });
diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
index 50b22505a9..dc12551e8f 100644
--- a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts
@@ -23,6 +23,12 @@ import {PopoverModule} from "../popover/popover.module";
 import {TooltipModule} from "../tooltip/tooltip.module";
 import {DynamicElementComponent} from "./dynamic-element.component";
 import {FormElementsModule} from "../form-components/form-elements.module";
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular";
+// import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
+// import {SdcUiComponentsModule} from "onap-ui/lib/angular";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+
+import { CommonModule } from '@angular/common';
 
 @NgModule({
     declarations: [
@@ -31,7 +37,9 @@ import {FormElementsModule} from "../form-components/form-elements.module";
     imports: [
         PopoverModule,
         TooltipModule,
-        FormElementsModule
+        FormElementsModule,
+        SdcUiComponentsModule,
+        CommonModule
     ],
     exports: [
         DynamicElementComponent
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
index fde7bca6d2..9b678b2790 100644
--- 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
@@ -14,16 +14,15 @@
   ~ limitations under the License.
   -->
   
-<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-container">
+    <h1 class="expand-collapse-title" [ngClass]="{'expanded': state == 0, 'collapsed': state == 1}"
+        tooltip="{{titleTooltip}}" (click)="toggleState()">{{caption}}
+        <ng-content select="header"></ng-content>
+        <svg-icon name="caret1-down-o" mode="info" size="small" class="expand-collapse-title-icon"></svg-icon>
+    </h1>
 
-<div class="expand-collapse-content" [ngClass]="{'visible': state === 0, 'hidden': state === 1}">
-    <ng-content></ng-content>
-    <ng-content select="content"></ng-content>
-</div>
+    <div class="expand-collapse-content" [ngClass]="{'expanded': state === 0, 'collapsed': state === 1}">
+        <ng-content></ng-content>
+        <ng-content select="content"></ng-content>
+    </div>
+</div>
\ No newline at end of file
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
index e5dd2527c1..deda687a09 100644
--- 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
@@ -5,3 +5,51 @@
     text-decoration: underline;
     text-align: left;
 }
+
+
+.expand-collapse-title {
+    display:flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    text-transform: uppercase;
+    line-height: 32px;
+    padding: 0 10px 0 20px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    header {
+        flex: 1;
+    }
+
+    .expand-collapse-title-icon {
+        padding-top: 10px;
+        padding-left: 2px; 
+        transition: transform .3s ease-out;
+        
+    }
+
+    &.expanded .expand-collapse-title-icon {
+        transform: rotate(0);
+    }
+
+    &.collapsed .expand-collapse-title-icon {
+        transform: rotate(-180deg);
+    }
+    
+} 
+
+.expand-collapse-content {
+    overflow: hidden;
+    transition: max-height .3s ease-in;
+
+    &.collapsed {
+        max-height: 0px;
+        overflow:hidden;
+        transition: all .3s cubic-bezier(0, 1, 0, 1);
+
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html
new file mode 100644
index 0000000000..14fc6eefc7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.html
@@ -0,0 +1,6 @@
+<label>
+    <input type="file" class="i-sdc-dashboard-item-upload-input"
+        (change)="onFileSelect($event)"
+        [accept]="extensionsWithDot"
+        [attr.data-tests-id]="'file-' + testsId" />
+</label>
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.less
diff --git a/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts
new file mode 100644
index 0000000000..1d1d4cef0d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/file-opener/file-opener.component.ts
@@ -0,0 +1,45 @@
+import {Component, Input, Output, EventEmitter, SimpleChanges} from "@angular/core";
+
+@Component({
+    selector: 'file-opener',
+    templateUrl: './file-opener.component.html',
+    styleUrls: ['./file-opener.component.less']
+})
+export class FileOpenerComponent {
+    @Input() public testsId: string;
+    @Input() public extensions: string;
+    @Output() public onFileUpload: EventEmitter<any>;
+
+    public extensionsWithDot: string;
+
+    constructor() {
+        this.onFileUpload = new EventEmitter<any>();
+    }
+
+    public ngOnChanges(changes:SimpleChanges) {
+        if (changes.extensions) {
+            this.extensionsWithDot = this.getExtensionsWithDot(changes.extensions.currentValue);
+        }
+    }
+
+    public onFileSelect(event) {
+        const importFile:any = event.target.files[0];
+        const reader = new FileReader();
+        reader.readAsBinaryString(importFile);
+        reader.onload = () => {
+            this.onFileUpload.emit({
+                filename: importFile.name,
+                filetype: importFile.type,
+                filesize: importFile.size,
+                base64: btoa(reader.result)
+            });
+        };
+    }
+
+    public getExtensionsWithDot(extensions:string):string {
+        extensions = extensions || this.extensions || '';
+        return extensions.split(',')
+            .map(ext => '.' + ext.toString())
+            .join(',');
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
index c8da016174..c7b0af6ecf 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts
@@ -19,7 +19,7 @@
  */
 
 import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-//import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+//import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
 
 @Component({
     selector: 'checkbox',
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 45fd77ee61..9dca01eb61 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
@@ -15,5 +15,5 @@
   -->
   
 <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>
+  <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue" [hidden]="ddvalue.hidden" [selected] = "ddvalue.selected">{{ddvalue.label||ddvalue}}</option>
 </select>
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
index 03a1fc6040..6db233529b 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts
@@ -24,11 +24,21 @@ import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.comp
 export class DropdownValue {
   value:any;
   label:string;
+  hidden?: boolean;
+  selected?: boolean;
 
-  constructor(value:any,label:string) {
+
+  constructor(value:any,label:string, hidden: boolean = false, selected: boolean = false) {
     this.value = value;
     this.label = label;
+    this.hidden = hidden;
+    this.selected = selected;
+    
+    // this.hidden = hidden ? true : "hidden": "";
+    // this.selected = selected ? true : "selected": "";
   }
+
+
 }
 
 @Component({
@@ -37,8 +47,8 @@ export class DropdownValue {
   styleUrls: ['./ui-element-dropdown.component.less'],
 })
 export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface  {
-  @Input()
-  values: DropdownValue[]|string[];
+  
+  @Input() values: DropdownValue[];
 
   constructor() {
     super();
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
index e5bdf1f557..b35d3ae3f4 100644
--- a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts
@@ -1,19 +1,19 @@
 /**
  * Created by rc2122 on 9/5/2017.
  */
-import {NgModule} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {UiElementPopoverInputComponent} from "./popover-input/ui-element-popover-input.component";
-import {UiElementIntegerInputComponent} from "./integer-input/ui-element-integer-input.component";
-import {UiElementInputComponent} from "./input/ui-element-input.component";
-import {UiElementDropDownComponent} from "./dropdown/ui-element-dropdown.component";
-import {UiElementBase} from "./ui-element-base.component";
-import {CheckboxModule} from "./checkbox/checkbox.module";
-import {RadioButtonComponent} from "./radio-buttons/radio-buttons.component";
-import {PopoverModule} from "../popover/popover.module";
-import {TooltipModule} from "../tooltip/tooltip.module";
-
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { SdcUiComponentsModule } from 'onap-ui-angular/dist';
+import { PopoverModule } from '../popover/popover.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
+import { CheckboxModule } from './checkbox/checkbox.module';
+import { UiElementDropDownComponent } from './dropdown/ui-element-dropdown.component';
+import { UiElementInputComponent } from './input/ui-element-input.component';
+import { UiElementIntegerInputComponent } from './integer-input/ui-element-integer-input.component';
+import { UiElementPopoverInputComponent } from './popover-input/ui-element-popover-input.component';
+import { RadioButtonComponent } from './radio-buttons/radio-buttons.component';
+import { UiElementBase } from './ui-element-base.component';
 
 @NgModule({
     imports: [
@@ -22,7 +22,8 @@ import {TooltipModule} from "../tooltip/tooltip.module";
         PopoverModule,
         ReactiveFormsModule,
         TooltipModule,
-        CheckboxModule],
+        CheckboxModule,
+        SdcUiComponentsModule],
 
     declarations: [UiElementDropDownComponent,
         UiElementInputComponent,
@@ -39,4 +40,4 @@ import {TooltipModule} from "../tooltip/tooltip.module";
         TooltipModule,
         CheckboxModule]
 })
-export class FormElementsModule { }
\ No newline at end of file
+export class FormElementsModule { }
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 85089f12b8..f9cf17f087 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
@@ -13,19 +13,18 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-  
-<input
-    class="value-input"
-    [ngClass]="{'error': control.invalid, 'disabled':readonly}"
-    type="text"
-    [name]="name"
-    [(ngModel)]="value"
-    (input)="onChange()"
-    [attr.maxlength]="validation.propertyValue.max"
-    [attr.minlength]="validation.propertyValue.min"
-    [pattern]="pattern"
-    [formControl]="control"
-    tooltip="{{value}}"
-    [readonly]="readonly"
-    [attr.data-tests-id]="'value-' + testId"
-    />
+<div sdc-tooltip [tooltip-text]="value">
+    <input
+        class="value-input"
+        [ngClass]="{'error': control.invalid, 'disabled':readonly}"
+        type="text"
+        [name]="name"
+        [(ngModel)]="value"
+        (input)="onChange()"
+        [attr.maxlength]="validation.propertyValue.max"
+        [attr.minlength]="validation.propertyValue.min"
+        [pattern]="pattern"
+        [formControl]="control"
+        [attr.data-tests-id]="'value-' + testId"
+        />
+</div>
\ No newline at end of file
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
index 34404e50a5..b401778bc2 100644
--- 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
@@ -1,15 +1,11 @@
 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 { SdcUiComponentsModule } from "onap-ui-angular";
 import { UnsavedChangesComponent } from "./unsaved-changes/unsaved-changes.component";
 import { UiElementsModule } from "../ui-elements.module";
 
-
-
 @NgModule({
     declarations: [
-        ValueEditComponent,
         UnsavedChangesComponent
     ],
     imports: [
@@ -17,7 +13,7 @@ import { UiElementsModule } from "../ui-elements.module";
         SdcUiComponentsModule,
         UiElementsModule
     ],
-    exports: [ValueEditComponent, UnsavedChangesComponent],
+    exports: [UnsavedChangesComponent],
     entryComponents: [ UnsavedChangesComponent
     ],
     providers: []
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
deleted file mode 100644
index 75ee2d520f..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
-  -->
-  
-<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
deleted file mode 100644
index b958ca17b7..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.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
deleted file mode 100644
index 08bc0586c7..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/loader/loader.component.html b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
index bfb9e1b1ae..00083050d8 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html
@@ -14,7 +14,7 @@
   ~ limitations under the License.
   -->
   
-<div *ngIf="isVisible"  data-tests-id="tlv-loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'" 
+<div *ngIf="isVisible"  data-tests-id="loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'"
         [style.top]="offset.top" [style.left]="offset.left" [style.width]="offset.width"  [style.height]="offset.height">
     <div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div>
     <div class="tlv-loader {{size}}"></div>
diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
index 585c36660e..9658e6b65c 100644
--- a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts
@@ -79,6 +79,13 @@ export class LoaderComponent {
                 width: (parentElement.offsetWidth !== undefined) ? parentElement.offsetWidth + "px" : undefined,
                 height: (parentElement.offsetHeight !== undefined) ? parentElement.offsetHeight + "px" : undefined
             };
+        } else {
+            this.offset = {
+                left: '0px',
+                top: '0px',
+                width: '100%',
+                height: '100%'
+            }
         }
         this.isVisible = true;
     }
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
index 3820573e58..8b2006634e 100644
--- a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts
@@ -1,5 +1,9 @@
 /*-
+ * ============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
@@ -11,9 +15,9 @@
  * 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, EventEmitter } from '@angular/core';
 
 @Component({
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
index 939599f0bc..290c8d06af 100644
--- a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts
@@ -1,5 +1,9 @@
 /*-
+ * ============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
@@ -11,9 +15,9 @@
  * 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, ContentChildren, SimpleChanges, QueryList } from '@angular/core';
 import { MenuItemComponent } from "./menu-item.component";
 import { Point } from "app/models";
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
index 1d05b27d68..ab367529d8 100644
--- 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
@@ -1,9 +1,9 @@
 /**
  * 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";
+import { Component, Input } from "@angular/core";
+import { UiBaseObject } from "../../../../../models/ui-models/ui-base-object";
+import { IDropDownOption } from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
 
 @Component({
     selector: 'add-elements',
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
index a1c34f5686..70ad0a389c 100644
--- 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
@@ -1,14 +1,11 @@
 /**
  * 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";
+import { NgModule } from "@angular/core";
+import { SdcUiComponentsModule } from "onap-ui-angular";
+import { AddElementsComponent } from "./add-elements.component";
+import { CommonModule } from "@angular/common";
 
-/**
- * Created by ob0695 on 9.04.2018.
- */
 @NgModule({
     declarations: [
         AddElementsComponent
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
index 777e9bdc06..2432c3bb37 100644
--- a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts
@@ -36,7 +36,7 @@ export class ModalComponent implements OnInit, OnDestroy {
     @Input() isMovable: boolean;
     @Input() input: ModalModel;
     @Input() dynamicContent: any;
-    @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example.
+    @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpHelperService's catchError() for example.
     private modalElement: JQuery;
 
     constructor( el: ElementRef ) {
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
index 9219a30738..1986e34914 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
@@ -20,10 +20,8 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-import {
-    Component, ElementRef, forwardRef, Inject, Input, trigger, state, style,
-    transition, animate, ViewChild, ViewContainerRef, ComponentRef
-} from "@angular/core";
+import { Component, ElementRef, forwardRef, Inject, Input, ViewChild, ViewContainerRef, ComponentRef} from "@angular/core";
+import {trigger, state, style, transition, animate} from '@angular/animations';
 import {StepModel} from "app/models";
 import {ModalService} from "../../../services/modal.service";
 import {ModalComponent} from "../modal/modal.component";
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
index 3db217d282..81a90b8a9b 100644
--- a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
@@ -4,7 +4,7 @@
 import { NgModule } from "@angular/core";
 import {MultiStepsWizardComponent} from "./multi-steps-wizard.component";
 import {CommonModule} from "@angular/common";
-import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module";
+import {ConnectionWizardModule} from "app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module";
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
deleted file mode 100644
index efd619687c..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 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.
-  -->
- 
-<div class="palette-animation-wrapper" [style.top]="from.y + 50 + 'px'" [style.left]="from.x + 'px'"  [style.transform]="transformStyle" [class.hidden]="!visible"
-      (transitionend)="animationComplete()">
-<div class="medium small sprite-resource-icons sprite-{{iconName}}-icons {{iconName}}" ></div>   
-</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
deleted file mode 100644
index 54f04189c0..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.palette-animation-wrapper{
-    position: absolute;
-    z-index: 100;
-    transition: all 2s ease-in-out;
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
deleted file mode 100644
index 7e45b9e55b..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.component.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {Component, Input } from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
-import { setTimeout } from 'core-js/library/web/timers';
-import { EventListenerService } from 'app/services';
-import { GRAPH_EVENTS } from 'app/utils';
-import { Point } from 'app/models';
-import { ZoneInstanceType, ZoneInstance } from '../../../../models/graph/zones/zone-instance';
- 
-
-
-@Component({
-  selector: 'palette-animation',
-  templateUrl: './palette-animation.component.html',
-  styleUrls:['./palette-animation.component.less'],
-})
-
-export class PaletteAnimationComponent  {
-  
-  @Input() from : Point;
-  @Input() to : Point;
-  @Input() type: ZoneInstanceType;
-  @Input() iconName : string;
-  @Input() zoneInstance : ZoneInstance;
-
-  public  animation;
-  private visible:boolean = false;
-  private transformStyle:string = "";
-
-
-  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);
-    setTimeout(()=>{
-     this.transformStyle = 'translate('+ positionDiff.x + 'px,' + positionDiff.y +'px)';
-    }, 0);
-  };
-
-  public animationComplete = (e) => {
-    this.visible = false;
-    this.zoneInstance.hidden = false;
-  };
-
-
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts b/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
deleted file mode 100644
index 8674571138..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-animation/palette-animation.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { PaletteAnimationComponent } from "./palette-animation.component";
-
-
-@NgModule({
-    declarations: [
-        PaletteAnimationComponent
-    ],
-    imports: [ CommonModule ],
-    exports: [ PaletteAnimationComponent ]
-})
-
-export class PaletteAnimationModule {
-
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
deleted file mode 100644
index 11261e95b4..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!--
- ~ Copyright (C) 2018 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.
-  -->
-  
-<div class="popup-panel" [ngClass]="{'hide':!isShowPanel}" [style.left]="popupPanelPosition.x + 'px'" [style.top]="popupPanelPosition.y + 'px'"
-     (mousedown)="addZoneInstance()"
-     (mouseenter)="onMouseEnter()"
-     (mouseleave)="onMouseLeave()">
-    <div class="popup-panel-group">
-        <div class="popup-panel-plus">+</div>
-        <div class="popup-panel-title">{{panelTitle}}</div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
deleted file mode 100644
index 24f0485e76..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.less
+++ /dev/null
@@ -1,37 +0,0 @@
-.popup-panel {
-  position: absolute;
-  display: inline-block;
-  background-color: white;
-  border: solid 1px #d2d2d2;
-  border-top: solid 3px #13a7df;
-  left: 208px; top: 0px;
-  width: 140px;
-  height: 40px;
-  z-index: 10000;
-
-  &:hover {
-    background-color: whitesmoke;
-  }
-
-  .popup-panel-group {
-    padding-left: 8px;
-    padding-top: 8px;
-    cursor: pointer;
-
-    .popup-panel-plus {
-      border-radius: 50%;
-      color: white;
-      background-color: #13a7df;
-      width: 20px;
-      text-align: center;
-      display: inline-block;
-    }
-    
-    .popup-panel-title {
-      padding-left: 10px;
-      display: inline-block;
-    }
-    
-  }
-
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts b/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
deleted file mode 100644
index a10ca7dc81..0000000000
--- a/catalog-ui/src/app/ng2/components/ui/palette-popup-panel/palette-popup-panel.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {GRAPH_EVENTS} from "app/utils";
-import {LeftPaletteComponent, Point} from "app/models";
-import {EventListenerService} from "app/services";
-import {LeftPaletteMetadataTypes} from "../../../../models/components/displayComponent";
-
-@Component({
-    selector: 'app-palette-popup-panel',
-    templateUrl: './palette-popup-panel.component.html',
-    styleUrls: [ './palette-popup-panel.component.less' ],
-})
-export class PalettePopupPanelComponent implements OnInit {
-
-    public panelTitle: string;
-    public isShowPanel: boolean;
-    private component: Component;
-    private displayComponent: LeftPaletteComponent;
-    private popupPanelPosition:Point = new Point(0,0);
-
-    constructor(private eventListenerService: EventListenerService) {
-        this.isShowPanel = false;
-    }
-
-    ngOnInit() {
-        this.registerObserverCallbacks();
-    }
-
-    public onMouseEnter() {
-        this.isShowPanel = true;
-    }
-
-    public onMouseLeave() {
-        this.isShowPanel = false;
-    }
-
-    public addZoneInstance(): void {
-        if(this.displayComponent) {
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition);
-            this.hidePopupPanel();
-        }
-    }
-
-    private registerObserverCallbacks() {
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL,
-            (component: Component, displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
-
-                this.component = component;
-                this.showPopupPanel(displayComponent, sectionElem);
-            });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL, () => this.hidePopupPanel());
-    }
-
-    private getPopupPanelPosition (sectionElem: HTMLElement):Point {
-        let pos: ClientRect = sectionElem.getBoundingClientRect();
-        let offsetX: number = -30;
-        const offsetY: number = pos.height / 2; 
-        return new Point((pos.right + offsetX), (pos.top - offsetY + window.pageYOffset));
-    };
-
-    private setPopupPanelTitle(component: LeftPaletteComponent): void {
-        if (component.categoryType === LeftPaletteMetadataTypes.Group) {
-            this.panelTitle = "Add Group";
-            return;
-        }
-
-        if (component.categoryType === LeftPaletteMetadataTypes.Policy) {
-            this.panelTitle = "Add Policy";
-            return;
-        }
-    }
-
-    private showPopupPanel(displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) {
-        if(!this.isShowPanel){
-            this.displayComponent = displayComponent;
-            this.setPopupPanelTitle(displayComponent);
-            this.popupPanelPosition = this.getPopupPanelPosition(sectionElem);
-            this.isShowPanel = true;
-        }
-    };
-    
-    private hidePopupPanel() {
-        if(this.isShowPanel){
-            this.isShowPanel = false;
-        }
-    };
-}
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html
new file mode 100644
index 0000000000..277702e336
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.html
@@ -0,0 +1,11 @@
+<div class="w-sdc-designer-sidebar-toggle" [class.active]="(withSidebar$ | async)" (click)="toggleSidebarDisplay()">
+    <div class="w-sdc-designer-sidebar-toggle-icon sprite-new pointer menu-open-left"></div>
+</div>
+
+<div class="w-sdc-designer-sidebar">
+    <ng-content></ng-content>
+</div>
+
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less
new file mode 100644
index 0000000000..cacb85d6b1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.less
@@ -0,0 +1,55 @@
+@import '../../../../../assets/styles/variables';
+
+.w-sdc-designer-sidebar {
+  background-color:@main_color_p ;
+  font-family: @font-opensans-regular;
+  font-size: 13px;
+  color: #191919;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  bottom: 0;
+  position: fixed;
+  right: -302px;
+  width: 302px;
+  top: 103px;
+  transition: right 0.2s;
+  z-index: 1010;
+  box-shadow: -7px -3px 6px -8px @main_color_n;
+}
+
+.w-sdc-designer-sidebar-toggle {
+  background-color: @main_color_p;
+  border-left: 1px solid @main_color_o;
+  border-bottom: 1px solid @main_color_o;
+  height: 21px;
+  position: absolute;
+  right: 0;
+  top: 53px;
+  width: 17px;
+  transition: right 0.2s;
+  z-index: 1005;
+  box-shadow: -1px 1px 3px 0  @main_color_n;
+  cursor: pointer;
+
+  &.active {
+    right: 302px;
+    .w-sdc-designer-sidebar-toggle-icon{
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.w-sdc-designer-sidebar-toggle-icon {
+  margin-left: 6px;
+  margin-top: 6px;
+}
+
+.w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar {
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts
new file mode 100644
index 0000000000..e9c4a7d354
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/panel-wrapper/panel-wrapper.component.ts
@@ -0,0 +1,25 @@
+import {Component} from "@angular/core";
+import {Select, Store} from "@ngxs/store";
+import {Subscription} from "rxjs/Subscription";
+import {GraphState} from "../../../pages/composition/common/store/graph.state";
+import {OnSidebarOpenOrCloseAction} from "../../../pages/composition/common/store/graph.actions";
+
+@Component({
+    selector: 'panel-wrapper-component',
+    templateUrl: './panel-wrapper.component.html',
+    styleUrls: ['./panel-wrapper.component.less']
+})
+export class PanelWrapperComponent {
+    @Select(GraphState.withSidebar) withSidebar$: boolean;
+
+    tabs: Array<any>;
+    subscription: Subscription;
+
+    constructor(public store: Store) {
+    }
+
+    private toggleSidebarDisplay = () => {
+        // this.withSidebar = !this.withSidebar;
+        this.store.dispatch(new OnSidebarOpenOrCloseAction());
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
new file mode 100644
index 0000000000..ccc1e2181e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/perfect-scroll-bar/perfect-scrollbar.directive.ts
@@ -0,0 +1,51 @@
+import {Directive, Input, ElementRef} from '@angular/core';
+import * as PerfectScrollbar from 'perfect-scrollbar';
+
+interface IPerfectScrollbarOptions {
+    wheelSpeed?: number;
+    wheelPropagation?: boolean;
+    minScrollbarLength?: number;
+    useBothWheelAxes?: boolean;
+    useKeyboard?: boolean;
+    suppressScrollX?: boolean;
+    suppressScrollY?: boolean;
+    scrollXMarginOffset?: number;
+    scrollYMarginOffset?: number;
+    includePadding?: boolean;
+}
+
+@Directive({
+    selector: '[perfectScrollbar]'
+})
+export class PerfectScrollbarDirective {
+    @Input() public perfectScrollbarOptions: IPerfectScrollbarOptions;
+
+    private psOptions: IPerfectScrollbarOptions;
+    private updatingPS: boolean;
+
+    constructor(public elemRef:ElementRef) {
+        console.log('PSbar: Constructor');
+        this.psOptions = Object.assign({}, this.perfectScrollbarOptions);
+        this.updatingPS = false;
+    }
+
+    public ngOnInit() {
+        console.log('PSbar: Initializing');
+        PerfectScrollbar.initialize(this.elemRef.nativeElement, this.psOptions);
+    }
+
+    public ngAfterContentChecked() {
+        // update perfect-scrollbar after content is checked (updated) - bounced
+        if (!this.updatingPS) {
+            this.updatingPS = true;
+            setTimeout(() => {
+                this.updatingPS = false;
+                PerfectScrollbar.update(this.elemRef.nativeElement);
+            }, 100);
+        }
+    }
+
+    public ngOnDestroy() {
+        PerfectScrollbar.destroy(this.elemRef.nativeElement);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
index cce1c40765..5294c67e31 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
@@ -17,6 +17,7 @@
 <div class="plugin-frame">
     <div class="w-sdc-main-container">
         <iframe *ngIf="plugin.isOnline" class="plugin-iframe" [src]="pluginUrl | safeUrlSanitizer"></iframe>
-        <plugin-not-connected [pluginName]="plugin.pluginId" *ngIf="!plugin.isOnline && isPluginCheckDone"></plugin-not-connected>
+        <plugin-not-connected [pluginName]="plugin.pluginId"
+                              *ngIf="!plugin.isOnline && isPluginCheckDone"></plugin-not-connected>
     </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
index d70c448984..d94f24da28 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
@@ -38,8 +38,7 @@ export class PluginFrameComponent implements OnInit {
             } else {
                 this.onLoadingDone.emit();
             }
-        })
-
+        });
     }
 
     private initPlugin() {
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
index 88906d96fa..9a280e169d 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html
@@ -19,7 +19,7 @@
      [style.left]="left + 'px'"
      [class.in]="isIn"
      [class.fade]="animation"
-     style="display: block"
+     [style.display] = "displayType"
      role="popover"
      [ngClass]="{'hide-arrow':hideArrow}">
     <div [hidden]="!closeOnMouseOutside" class="virtual-area"></div>
@@ -29,13 +29,11 @@
         <span class="close-button" (click)="popover.hide()"></span>
     </div>
     <ng-content></ng-content>
-    <div class="popover-footer">
+    <div class="popover-footer" *ngIf="buttons">
         <button *ngFor="let buttonName of buttonsNames"
-                class="tlv-btn {{buttons[buttonName].cssClass}}" 
+                class="tlv-btn {{buttons[buttonName].cssClass}}"
                 [attr.data-tests-id]="'filter-' + buttons[buttonName].text.toLowerCase() + '-button'"
                 [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
                 (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
     </div>
 </div>
-
-
diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
index 6eb36287d0..bea592d2a6 100644
--- a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts
@@ -7,9 +7,9 @@
  * 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.
@@ -18,25 +18,25 @@
  * ============LICENSE_END=========================================================
  */
 
-import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core";
-import {ButtonsModelMap} from "app/models";
-import {PopoverComponent} from "./popover.component";
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, Output, Renderer, ViewChild } from '@angular/core';
+import { ButtonsModelMap } from 'app/models';
+import { PopoverComponent } from './popover.component';
 
 @Component({
-    selector: "popover-content",
-    templateUrl:'./popover-content.component.html',
-    styleUrls:['popover-content.component.less']
+    selector: 'popover-content',
+    templateUrl: './popover-content.component.html',
+    styleUrls: ['popover-content.component.less']
 })
 export class PopoverContentComponent implements AfterViewInit, OnDestroy {
 
     @Input() public title: string;
-    @Input() public buttons:ButtonsModelMap;
+    @Input() public buttons: ButtonsModelMap;
 
     @Input()
     content: string;
 
     @Input()
-    placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom";
+    placement: 'top'|'bottom'|'left'|'right'|'auto'|'auto top'|'auto bottom'|'auto left'|'auto right' = 'bottom';
 
     @Input()
     animation: boolean = true;
@@ -50,52 +50,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     @Input()
     hideArrow: boolean = false;
 
-    @ViewChild("popoverDiv")
+    @ViewChild('popoverDiv')
     popoverDiv: ElementRef;
 
-    buttonsNames:Array<string>;
+    buttonsNames: string[];
 
     popover: PopoverComponent;
     onCloseFromOutside = new EventEmitter();
-    top: number = -10000;
-    left: number = -10000;
+    top: number = 250;
+    left: number = 300;
     isIn: boolean = false;
-    displayType: string = "none";
+    displayType: string = 'none';
     effectivePlacement: string;
 
-    onDocumentMouseDown = (event: any) => {
-        const element = this.element.nativeElement;
-        if (!element || !this.popover) return;
-        if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return;
-        this.hide();
-        this.onCloseFromOutside.emit(undefined);
-    };
-
+    listenClickFunc: any;
+    listenMouseFunc: any;
 
     constructor(protected element: ElementRef,
                 protected cdr: ChangeDetectorRef,
                 protected renderer: Renderer) {
     }
 
-    listenClickFunc: any;
-    listenMouseFunc: any;
+    onDocumentMouseDown = (event: any) => {
+        const element = this.element.nativeElement;
+        if (!element || !this.popover) { return; }
+        if (element.contains(event.target) || this.popover.getElement().contains(event.target)) { return; }
+        this.hide();
+        this.onCloseFromOutside.emit(undefined);
+    }
 
     ngAfterViewInit(): void {
-        this.buttonsNames = Object.keys(this.buttons);
-        if (this.closeOnClickOutside)
-            this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event));
-        if (this.closeOnMouseOutside)
-            this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event));
+        if ( this.buttons ) {
+            this.buttonsNames = Object.keys(this.buttons);
+        }
+        if (this.closeOnClickOutside) {
+            this.listenClickFunc = this.renderer.listenGlobal('document', 'mousedown', (event: any) => this.onDocumentMouseDown(event));
+        }
+        if (this.closeOnMouseOutside) {
+            this.listenMouseFunc = this.renderer.listenGlobal('document', 'mouseover', (event: any) => this.onDocumentMouseDown(event));
+        }
 
-        this.show();
         this.cdr.detectChanges();
     }
 
     ngOnDestroy() {
-        if (this.closeOnClickOutside)
+        if (this.closeOnClickOutside) {
             this.listenClickFunc();
-        if (this.closeOnMouseOutside)
+        }
+        if (this.closeOnMouseOutside) {
             this.listenMouseFunc();
+        }
     }
 
     // -------------------------------------------------------------------------
@@ -103,11 +107,12 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     // -------------------------------------------------------------------------
 
     show(): void {
-        if (!this.popover || !this.popover.getElement())
+        if (!this.popover || !this.popover.getElement()) {
             return;
+        }
 
         const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement);
-        this.displayType = "block";
+        this.displayType = 'block';
         this.top = p.top;
         this.left = p.left;
         this.isIn = true;
@@ -121,8 +126,7 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     hideFromPopover() {
-        this.top = -10000;
-        this.left = -10000;
+        this.displayType = 'none';
         this.isIn = true;
     }
 
@@ -131,56 +135,56 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     // -------------------------------------------------------------------------
 
     protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } {
-        let positionStrParts = positionStr.split("-");
+        const positionStrParts = positionStr.split('-');
         let pos0 = positionStrParts[0];
-        let pos1 = positionStrParts[1] || "center";
-        let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
-        let targetElWidth = targetEl.offsetWidth;
-        let targetElHeight = targetEl.offsetHeight;
+        const pos1 = positionStrParts[1] || 'center';
+        const hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl);
+        const targetElWidth = targetEl.offsetWidth;
+        const targetElHeight = targetEl.offsetHeight;
 
         this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl);
 
-        let shiftWidth: any = {
-            center: function (): number {
+        const shiftWidth: any = {
+            center(): number {
                 return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2;
             },
-            left: function (): number {
+            left(): number {
                 return hostElPos.left;
             },
-            right: function (): number {
+            right(): number {
                 return hostElPos.left + hostElPos.width - targetElWidth;
             }
         };
 
-        let shiftHeight: any = {
-            center: function (): number {
+        const shiftHeight: any = {
+            center(): number {
                 return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2;
             },
-            top: function (): number {
+            top(): number {
                 return hostElPos.top;
             },
-            bottom: function (): number {
+            bottom(): number {
                 return hostElPos.top + hostElPos.height - targetElHeight;
             }
         };
 
         let targetElPos: { top: number, left: number };
         switch (pos0) {
-            case "right":
+            case 'right':
                 targetElPos = {
                     top: shiftHeight[pos1](),
                     left: hostElPos.left + hostElPos.width
                 };
                 break;
 
-            case "left":
+            case 'left':
                 targetElPos = {
                     top: shiftHeight[pos1](),
                     left: hostElPos.left - targetElWidth
                 };
                 break;
 
-            case "bottom":
+            case 'bottom':
                 targetElPos = {
                     top: hostElPos.top + hostElPos.height,
                     left: shiftWidth[pos1]()
@@ -228,18 +232,20 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     protected getStyle(nativeEl: HTMLElement, cssProp: string): string {
-        if ((nativeEl as any).currentStyle) // IE
+        if ((nativeEl as any).currentStyle) { // IE
             return (nativeEl as any).currentStyle[cssProp];
+        }
 
-        if (window.getComputedStyle)
+        if (window.getComputedStyle) {
             return (window.getComputedStyle as any)(nativeEl)[cssProp];
+        }
 
         // finally try and get inline style
         return (nativeEl.style as any)[cssProp];
     }
 
     protected isStaticPositioned(nativeEl: HTMLElement): boolean {
-        return (this.getStyle(nativeEl, "position") || "static" ) === "static";
+        return (this.getStyle(nativeEl, 'position') || 'static' ) === 'static';
     }
 
     protected parentOffsetEl(nativeEl: HTMLElement): any {
@@ -251,26 +257,26 @@ export class PopoverContentComponent implements AfterViewInit, OnDestroy {
     }
 
     protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string {
-        const placementParts = placement.split(" ");
-        if (placementParts[0] !== "auto") {
+        const placementParts = placement.split(' ');
+        if (placementParts[0] !== 'auto') {
             return placement;
         }
 
         const hostElBoundingRect = hostElement.getBoundingClientRect();
 
-        const desiredPlacement = placementParts[1] || "bottom";
+        const desiredPlacement = placementParts[1] || 'bottom';
 
-        if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
-            return "bottom";
+        if (desiredPlacement === 'top' && hostElBoundingRect.top - targetElement.offsetHeight < 0) {
+            return 'bottom';
         }
-        if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
-            return "top";
+        if (desiredPlacement === 'bottom' && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) {
+            return 'top';
         }
-        if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
-            return "right";
+        if (desiredPlacement === 'left' && hostElBoundingRect.left - targetElement.offsetWidth < 0) {
+            return 'right';
         }
-        if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
-            return "left";
+        if (desiredPlacement === 'right' && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) {
+            return 'left';
         }
 
         return desiredPlacement;
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html
new file mode 100644
index 0000000000..fba99ca8b5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.html
@@ -0,0 +1,12 @@
+<div class="sdc-element-icon">
+    <svg-icon [ngClass]="{'service-proxy': elementType === 'ServiceProxy'}"
+            [type]="elementIcon.type"
+            [name]="elementIcon.iconName"
+            [mode]="elementIcon.color"
+            [size]="elementIcon.size"
+            [backgroundShape]="elementIcon.shape"
+            [backgroundColor]="elementIcon.backgroundColor"></svg-icon>
+    <span *ngIf="uncertified" class="uncertified-icon-wapper">
+        <svg-icon class="element-non-certified" [name]="'alert-circle'" [mode]="'error'"></svg-icon>
+    </span>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less
new file mode 100644
index 0000000000..7fd5cbd53e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.less
@@ -0,0 +1,25 @@
+@import "./../../../../../assets/styles/override";
+.service-proxy {
+  /deep/.svg-icon.bg-type-circle {
+    border: 2px solid @sdcui_color_blue;
+  }
+}
+
+.element-non-certified {
+  position: absolute;
+    top: 0.4px;
+    left: 0.4px;
+}
+.sdc-element-icon {
+  position: relative;
+}
+
+.uncertified-icon-wapper{
+      height: 17px;
+      width: 17px;
+      background-color: white;
+      border-radius: 50%;
+      position: absolute;
+      top: -2px;
+      left: -1px;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts
new file mode 100644
index 0000000000..baadbd8e02
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/sdc-element-icon/sdc-element-icon.component.ts
@@ -0,0 +1,69 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {ComponentType, SdcElementType, ResourceType} from "../../../../utils/constants";
+
+
+export class ElementIcon {
+    iconName: string;
+    color: string;
+    backgroundColor: string;
+    type: string
+    shape: string;
+    size: string;
+
+    constructor(name?: string, type?:string,  backgroundColor?:string, color?:string, shape?: string, size?:string) {
+        this.iconName = name || 'default';
+        this.type = type || 'resource_24';
+        this.backgroundColor = backgroundColor || 'primary';
+        this.color = color || "white";
+        this.shape = shape || "circle";
+        this.size = size || "x_large";
+    }
+}
+
+@Component({
+    selector: 'sdc-element-icon',
+    templateUrl: './sdc-element-icon.component.html',
+    styleUrls: ['./sdc-element-icon.component.less']
+})
+export class SdcElementIconComponent {
+
+    @Input() iconName: string;
+    @Input() elementType: string;
+    @Input() uncertified: boolean = false;
+
+    public elementIcon;
+
+    private createIconForDisplay = () => {
+        switch (this.elementType) {
+
+            case ComponentType.SERVICE:
+                this.elementIcon = new ElementIcon(this.iconName, "services_24", "lightBlue");
+                break;
+            case ComponentType.SERVICE_PROXY:
+                this.elementIcon = new ElementIcon(this.iconName, "services_24", "white", "primary");
+                break;
+            case ResourceType.CONFIGURATION:
+                this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", "white", 'circle', "medium");
+                break;
+            case SdcElementType.GROUP:
+                this.elementIcon = new ElementIcon("group", "resources_24", "blue", 'white', 'rectangle');
+                break;
+            case SdcElementType.POLICY:
+                this.elementIcon = new ElementIcon("policy", "resources_24", "darkBlue2", 'white', 'rectangle');
+                break;
+            case ResourceType.CP:
+            case ResourceType.VL:
+                this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple", '', '', 'medium');
+                break;
+            default:
+                this.elementIcon = new ElementIcon(this.iconName, "resources_24", "purple");
+        }
+    }
+
+    ngOnChanges():void {
+        this.createIconForDisplay();
+    }
+}
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
index 8682473d14..1f952c46f5 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html
@@ -1,21 +1,5 @@
-<!--
-  ~ Copyright (C) 2018 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.
-  -->
- 
-<div class="search-bar-container {{class}}">
-    <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
-    <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
-    <button class="search-bar-button" (click)="searchButtonClick()"></button>
+<div class="sdc-search-bar-container {{class}}">
+    <input class="sdc-search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
+    <span class="sdc-clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
+    <button class="sdc-search-bar-button" (click)="searchButtonClick()"></button>
 </div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
index 751fceec35..c09951a284 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less
@@ -1,9 +1,9 @@
-.search-bar-container {
+.sdc-search-bar-container {
     display:flex;
     border-radius: 4px;
     box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
 
-    .search-bar-input {
+    .sdc-search-bar-input {
         border: 1px solid #cdcdcd;
         border-radius: 4px;
         border-right:none;
@@ -14,9 +14,11 @@
         color:  #5a5a5a;
         font-size: 1em;
         font-style: italic;
+
+
     }
 
-    .clear-search-x {
+    .sdc-clear-search-x {
         position:absolute;
         right:40px;
         top:5px;
@@ -29,7 +31,7 @@
         }
     }
 
-    .search-bar-button {
+    .sdc-search-bar-button {
         background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px;
         background-color:  rgba(234, 234, 234, 0.88);
         width: 30px;
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
index 82dbbf33d3..da9b2c9e24 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html
@@ -14,9 +14,9 @@
   ~ limitations under the License.
   -->
  
-<div class="search-with-autocomplete-container {{searchBarClass}}" [class.autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
+<div class="sdc-search-with-autocomplete-container {{searchBarClass}}" [class.sdc-autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
     <search-bar [placeholder]="searchPlaceholder" [searchQuery]="searchQuery" (searchButtonClicked)="updateSearch($event)" (searchChanged)="searchChange($event)"></search-bar>
-    <div class="autocomplete-results">
-        <div *ngFor="let item of autoCompleteValues" class="autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
+    <div class="sdc-autocomplete-results">
+        <div *ngFor="let item of autoCompleteValues" class="sdc-autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
     </div>
 </div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
index f1830846d3..9cd312adcb 100644
--- a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less
@@ -1,13 +1,13 @@
-.search-with-autocomplete-container{
-    &.autocomplete-visible {
+.sdc-search-with-autocomplete-container{
+    &.sdc-autocomplete-visible {
 
-        .search-bar-input {
+        .sdc-search-bar-input {
             border-bottom-left-radius: 0;
         }
-        .search-bar-button {
+        .sdc-search-bar-button {
             border-bottom-right-radius: 0;
         }
-        .autocomplete-results {
+        .sdc-autocomplete-results {
             border: solid 1px #d2d2d2;
             border-top:none;
             border-bottom-left-radius: 4px;
@@ -20,7 +20,7 @@
             overflow-y: scroll;
         }
 
-        .autocomplete-result-item {
+        .sdc-autocomplete-result-item {
             color:#5a5a5a;
             padding: 5px 0;
             cursor:pointer;
diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
index f4b410347b..cabac121f7 100644
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
@@ -21,7 +21,7 @@
 import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core';
 import { Tab } from './tab/tab.component';
 import { ViewEncapsulation } from '@angular/core';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
 
 export {Tab};
 
diff --git a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts
index 55b34400d6..5dec67e495 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/sdc-tile.module.ts
@@ -3,13 +3,13 @@ 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";
+import {SdcUiComponentsModule} from "onap-ui-angular";
 
 
 @NgModule({
-    imports: [BrowserModule, GlobalPipesModule, TooltipModule, MultilineEllipsisModule],
+    imports: [BrowserModule, GlobalPipesModule, SdcUiComponentsModule, TooltipModule],
     declarations: [TileComponent],
     exports: [TileComponent],
     entryComponents: [TileComponent]
 })
-export class TileModule { }
+export class SdcTileModule { }
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
index 018384db1f..239053e9f8 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.html
@@ -23,15 +23,21 @@
 
     <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()}"
+            <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 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 class="sdc-tile-info-line subtitle" [attr.data-tests-id]="component.name+'Version'">V {{component.version}}</div>
         </div>
     </div>
 
@@ -42,3 +48,32 @@
     </div>
 
 </div>
+
+<!--<sdc-tile>-->
+<!--<sdc-tile-header>-->
+<!--<div [ngClass]="{'blue': component.isService(), 'purple':  component.isResource()}">{{component.isResource() ?-->
+<!--component.getComponentSubType(): 'S' }}-->
+<!--</div>-->
+<!--</sdc-tile-header>-->
+<!--<sdc-tile-content>-->
+<!--<div class='sdc-tile-content-icon blue'>-->
+<!--<svg-icon-->
+<!--[type]="catalogIcon.type"-->
+<!--[name]="catalogIcon.iconName"-->
+<!--[size]="catalogIcon.size"-->
+<!--[mode]="catalogIcon.color"-->
+<!--[backgroundShape]="catalogIcon.shape"-->
+<!--[backgroundColor]="catalogIcon.backgroundColor"-->
+<!--[disabled]="false"-->
+<!--&gt;-->
+<!--</svg-icon>-->
+<!--</div>-->
+<!--<div class="sdc-tile-content-info">-->
+<!--<span class="sdc-tile-info-line title">{{component.name | resourceName}}</span>-->
+<!--<div class="sdc-tile-info-line subtitle">{{'V'+ component.version}}</div>-->
+<!--</div>-->
+<!--</sdc-tile-content>-->
+<!--<sdc-tile-footer>-->
+<!--<span class="sdc-tile-footer-cell">{{component.getStatus(sdcMenu)}}</span>-->
+<!--</sdc-tile-footer>-->
+<!--</sdc-tile>-->
\ No newline at end of file
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
index e69de29bb2..febf46e99c 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.less
@@ -0,0 +1,15 @@
+
+
+//This was done as a fix for the wrong dispaly that was in every ui-tile.
+//All other styles located in mail.less
+
+.sdc-tile {
+  display: block;
+
+  .sdc-tile-content {
+    overflow: visible;
+    height: 80%;
+    .sdc-tile-content-icon {
+    }
+  }
+}
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
index b6f63584be..f5d9e88934 100644
--- a/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/tile/tile.component.ts
@@ -1,6 +1,8 @@
 import {Component, Input, Output, Inject, EventEmitter} from '@angular/core';
 import {Component as ComponentModel} from 'app/models';
 import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
+import {ElementIcon} from "../sdc-element-icon/sdc-element-icon.component";
+import {ComponentType, ResourceType, SdcElementType} from "../../../../utils/constants";
 
 @Component({
     selector: 'ui-tile',
@@ -10,14 +12,42 @@ import {SdcMenuToken, IAppMenu} from "../../../config/sdc-menu.config";
 export class TileComponent {
     @Input() public component: ComponentModel;
     @Output() public onTileClick: EventEmitter<ComponentModel>;
-
+    public catalogIcon: ElementIcon;
     public hasEllipsis: boolean;
 
-    constructor(@Inject(SdcMenuToken) public sdcMenu:IAppMenu) {
+    constructor(@Inject(SdcMenuToken) public sdcMenu: IAppMenu) {
         this.onTileClick = new EventEmitter<ComponentModel>();
         this.hasEllipsis = false;
     }
 
+    ngOnInit(): void {
+        switch (this.component.componentType) {
+
+            case ComponentType.SERVICE:
+                if (this.component.icon === 'defaulticon') {
+                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", 'lightBlue', 'white');
+                } else {
+                    this.catalogIcon = new ElementIcon(this.component.icon, "services_60", '', 'lightBlue');
+                }
+                break;
+            case ComponentType.RESOURCE:
+                switch (this.component.getComponentSubType()) {
+                    case ResourceType.CP:
+                    case ResourceType.VL:
+                        this.catalogIcon = new ElementIcon(this.component.icon, "resources_24", "purple", "white", "circle", 'medium');
+                        break;
+                    default:
+                        if (this.component.icon === 'defaulticon') {
+                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", "purple", "white", "circle", 'x_large');
+                        } else {
+                            this.catalogIcon = new ElementIcon(this.component.icon, "resources_60", '', "error");
+                        }
+
+                }
+
+        }
+    }
+
     public tileClicked() {
         this.onTileClick.emit(this.component);
     }
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 e905db73a6..cdb173cb12 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
@@ -18,82 +18,89 @@
  * ============LICENSE_END=========================================================
  */
 
-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 { ExpandCollapseComponent } from './expand-collapse/expand-collapse.component';
-import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
-import { TileModule } from "./tile/tile.module";
+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 { PaletteAnimationComponent } from "app/ng2/pages/composition/palette/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 "onap-ui-angular";
+import {SdcTileModule} from "./tile/sdc-tile.module";
+import {PerfectScrollbarDirective} from "./perfect-scroll-bar/perfect-scrollbar.directive";
+import {FileOpenerComponent} from "./file-opener/file-opener.component";
+import {DownloadArtifactComponent} from "app/ng2/components/ui/download-artifact/download-artifact.component";
+import {SdcElementIconComponent} from "./sdc-element-icon/sdc-element-icon.component";
+import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
 
 @NgModule({
-  declarations: [
-    LoaderComponent,
-    SearchBarComponent,
-    SearchWithAutoCompleteComponent,
-    PalettePopupPanelComponent,
-    ZoneContainerComponent,
-    ZoneInstanceComponent,
-    PaletteAnimationComponent,
-    ExpandCollapseComponent
-],
-  
-  imports: [
-    SdcUiComponentsModule,
-    BrowserModule,
-    FormsModule,
-    CommonModule,
-    DynamicElementModule,
-    NavbarModule,
-    FormElementsModule,
-    ModalModule,
-    PopoverModule,
-    TabModule,
-    TooltipModule,
-    MultiStepsWizardModule,
-    MenuListModule,
-    MenuListNg2Module,
-    TileModule
-  ],
-  exports: [
-    LoaderComponent,
-    MultiStepsWizardModule,
-    SearchBarComponent,
-    SearchWithAutoCompleteComponent,
-    PalettePopupPanelComponent,
-    ZoneContainerComponent,
-    ZoneInstanceComponent,
-    DynamicElementModule,
-    NavbarModule,
-    FormElementsModule,
-    ModalModule,
-    PopoverModule,
-    TabModule,
-    TooltipModule,
-    MenuListModule,
-    MenuListNg2Module,
-    PaletteAnimationComponent,
-    ExpandCollapseComponent,
-    TileModule
-  ],
-  entryComponents: [SearchWithAutoCompleteComponent, PalettePopupPanelComponent, ZoneContainerComponent, ZoneInstanceComponent, PaletteAnimationComponent]
+    declarations: [
+        LoaderComponent,
+        SearchBarComponent,
+        SearchWithAutoCompleteComponent,
+        PaletteAnimationComponent,
+        ExpandCollapseComponent,
+        PerfectScrollbarDirective,
+        FileOpenerComponent,
+        SdcElementIconComponent,
+        DownloadArtifactComponent,
+        PanelWrapperComponent
+    ],
+
+    imports: [
+        SdcUiComponentsModule,
+        BrowserModule,
+        FormsModule,
+        CommonModule,
+        DynamicElementModule,
+        NavbarModule,
+        FormElementsModule,
+        ModalModule,
+        PopoverModule,
+        TabModule,
+        TooltipModule,
+        MultiStepsWizardModule,
+        MenuListModule,
+        MenuListNg2Module,
+        SdcTileModule
+    ],
+    exports: [
+        LoaderComponent,
+        MultiStepsWizardModule,
+        SearchBarComponent,
+        SearchWithAutoCompleteComponent,
+        DynamicElementModule,
+        NavbarModule,
+        FormElementsModule,
+        ModalModule,
+        PopoverModule,
+        TabModule,
+        TooltipModule,
+        MenuListModule,
+        MenuListNg2Module,
+        PaletteAnimationComponent,
+        ExpandCollapseComponent,
+        SdcTileModule,
+        PerfectScrollbarDirective,
+        SdcElementIconComponent,
+        FileOpenerComponent,
+        DownloadArtifactComponent,
+        PanelWrapperComponent
+    ],
+    entryComponents: [SearchWithAutoCompleteComponent, SdcElementIconComponent, PaletteAnimationComponent]
 })
 
-export class UiElementsModule {}
+export class UiElementsModule {
+}