Initial seed code contribution for CDT

Issue-ID: APPC-682
Change-Id: I0331ffce2a430195c29d0d1b2295966f9eb28699
Signed-off-by: Skip Wonnell <skip@att.com>

45 files changed, 2930 insertions, 0 deletions

diff --git a/src/app/shared/components/header/header.component.css b/src/app/shared/components/header/header.component.css
new file mode 100644
index 0000000..f9996f3
--- /dev/null
+++ b/src/app/shared/components/header/header.component.css
@@ -0,0 +1,31 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+/* .app-header {
+    background: #0099CC;
+    padding: 4px;
+}
+
+.color-white {
+    color: white
+} */
\ No newline at end of file
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
new file mode 100644
index 0000000..79dea91
--- /dev/null
+++ b/src/app/shared/components/header/header.component.html
@@ -0,0 +1,29 @@
+<!--
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+-->
+
+
+<!-- <nav class="navbar navbar-default navbar-fixed-top app-header" role="navigation ">
+    <div class="text-center">
+        <div style="    font-size: 23px;" class="color-white">APPLICATION CONTROLLER</div>
+    </div>
+</nav> -->
\ No newline at end of file
diff --git a/src/app/shared/components/header/header.component.spec.ts b/src/app/shared/components/header/header.component.spec.ts
new file mode 100644
index 0000000..3335101
--- /dev/null
+++ b/src/app/shared/components/header/header.component.spec.ts
@@ -0,0 +1,49 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+/* tslint:disable:no-unused-variable */
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {HeaderComponent} from './header.component';
+
+describe('HeaderComponent', () => {
+    let component: HeaderComponent;
+    let fixture: ComponentFixture<HeaderComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [HeaderComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(HeaderComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
new file mode 100644
index 0000000..c425fd7
--- /dev/null
+++ b/src/app/shared/components/header/header.component.ts
@@ -0,0 +1,40 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/src/app/shared/components/help/help/help.component.css b/src/app/shared/components/help/help/help.component.css
new file mode 100644
index 0000000..be35e44
--- /dev/null
+++ b/src/app/shared/components/help/help/help.component.css
@@ -0,0 +1,22 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
diff --git a/src/app/shared/components/help/help/help.component.html b/src/app/shared/components/help/help/help.component.html
new file mode 100644
index 0000000..ecdd8c1
--- /dev/null
+++ b/src/app/shared/components/help/help/help.component.html
@@ -0,0 +1,26 @@
+<!--
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+-->
+
+<p>
+    help works!
+</p>
diff --git a/src/app/shared/components/help/help/help.component.spec.ts b/src/app/shared/components/help/help/help.component.spec.ts
new file mode 100644
index 0000000..9e09053
--- /dev/null
+++ b/src/app/shared/components/help/help/help.component.spec.ts
@@ -0,0 +1,49 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+/* tslint:disable:no-unused-variable */
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {HelpComponent} from './help.component';
+
+describe('HelpComponent', () => {
+    let component: HelpComponent;
+    let fixture: ComponentFixture<HelpComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [HelpComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(HelpComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/shared/components/help/help/help.component.ts b/src/app/shared/components/help/help/help.component.ts
new file mode 100644
index 0000000..1b79419
--- /dev/null
+++ b/src/app/shared/components/help/help/help.component.ts
@@ -0,0 +1,40 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-help',
+    templateUrl: './help.component.html',
+    styleUrls: ['./help.component.css']
+})
+export class HelpComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/src/app/shared/components/logout/logout.component.css b/src/app/shared/components/logout/logout.component.css
new file mode 100644
index 0000000..be35e44
--- /dev/null
+++ b/src/app/shared/components/logout/logout.component.css
@@ -0,0 +1,22 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
diff --git a/src/app/shared/components/logout/logout.component.html b/src/app/shared/components/logout/logout.component.html
new file mode 100644
index 0000000..340cb38
--- /dev/null
+++ b/src/app/shared/components/logout/logout.component.html
@@ -0,0 +1,26 @@
+<!--
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+-->
+
+<p>
+    logout works!
+</p>
diff --git a/src/app/shared/components/logout/logout.component.spec.ts b/src/app/shared/components/logout/logout.component.spec.ts
new file mode 100644
index 0000000..3e2561f
--- /dev/null
+++ b/src/app/shared/components/logout/logout.component.spec.ts
@@ -0,0 +1,49 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+/* tslint:disable:no-unused-variable */
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {LogoutComponent} from './logout.component';
+
+describe('LogoutComponent', () => {
+    let component: LogoutComponent;
+    let fixture: ComponentFixture<LogoutComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [LogoutComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LogoutComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/shared/components/logout/logout.component.ts b/src/app/shared/components/logout/logout.component.ts
new file mode 100644
index 0000000..0c0e3ee
--- /dev/null
+++ b/src/app/shared/components/logout/logout.component.ts
@@ -0,0 +1,39 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-logout',
+    templateUrl: './logout.component.html',
+    styleUrls: ['./logout.component.css']
+})
+export class LogoutComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/src/app/shared/components/navigation/navigation.component.css b/src/app/shared/components/navigation/navigation.component.css
new file mode 100644
index 0000000..5b7aee5
--- /dev/null
+++ b/src/app/shared/components/navigation/navigation.component.css
@@ -0,0 +1,44 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+.active-tab > {
+    border-bottom: 5px solid #6ab344;
+}
+
+/* .custom-heade-nav {
+    border-bottom: none !important;
+}*/
+*
+
+/
+
+.nav-link {
+    font-size: 15PX;
+    color: black;
+
+}
+
+.mdl-navigation__link {
+    font-weight: 600;
+    font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/app/shared/components/navigation/navigation.component.html b/src/app/shared/components/navigation/navigation.component.html
new file mode 100644
index 0000000..9e60b6e
--- /dev/null
+++ b/src/app/shared/components/navigation/navigation.component.html
@@ -0,0 +1,72 @@
+<!--
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+-->
+
+
+<!-- <div class="android-section-title mdl-typography--display-1-color-contrast">APPC Self Service Design Tool</div>  -->
+<div class="mdl-layout__header-row" font-family='Roboto'>
+    <span class="android-title mdl-layout-title">
+                  
+             </span>
+    <!-- Add spacer, to align navigation to the right in desktop -->
+    <div class="android-header-spacer mdl-layout-spacer"></div>
+    <div class="android-navigation-container">
+        <nav class="android-navigation mdl-navigation">
+
+            <a [ngClass]="{'':((router.url.startsWith('/'+item.url)) || router.url.startsWith(item.url) )}"
+               *ngFor="let item of navigationTabs">
+                <a class="mdl-navigation__link mdl-typography--text-uppercase"
+                   [routerLink]="[item.url]">{{item.name}}</a>
+            </a>
+
+            <!-- <a *ngIf="userLoggedIn"><b> {{userId}}</b></a> -->
+
+
+        </nav>
+    </div>
+    <button class="android-more-button mdl-button mdl-js-button mdl-button--primary" id="more-button">
+        <a *ngIf="userLoggedIn">{{userId}}</a>
+    </button>
+    <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="more-button">
+        <!-- <li *ngIf="userLoggedIn"  class="mdl-menu__item">My Profile</li> -->
+        <li *ngIf="userLoggedIn" class="mdl-menu__item" (click)="logout()">Logout</li>
+    </ul>
+</div>
+
+
+<ng-template #content let-c="close" let-d="dismiss">
+    <div class="modal-header">
+        <h4 class="modal-title">Modal title</h4>
+        <button type="button" class="android-more-button mdl-button mdl-js-button mdl-button--accent" aria-label="Close"
+                (click)="d('Cross click')">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <p>One fine body&hellip;</p>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="android-more-button mdl-button mdl-js-button mdl-button--accent"
+                (click)="c('Close click')">Close
+        </button>
+    </div>
+</ng-template>
diff --git a/src/app/shared/components/navigation/navigation.component.spec.ts b/src/app/shared/components/navigation/navigation.component.spec.ts
new file mode 100644
index 0000000..c5a436b
--- /dev/null
+++ b/src/app/shared/components/navigation/navigation.component.spec.ts
@@ -0,0 +1,50 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+/* tslint:disable:no-unused-variable */
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {NavigationComponent} from './navigation.component';
+
+describe('NavigationComponent', () => {
+    let component: NavigationComponent;
+    let fixture: ComponentFixture<NavigationComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [NavigationComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(NavigationComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/src/app/shared/components/navigation/navigation.component.ts b/src/app/shared/components/navigation/navigation.component.ts
new file mode 100644
index 0000000..acddf9e
--- /dev/null
+++ b/src/app/shared/components/navigation/navigation.component.ts
@@ -0,0 +1,110 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Component, Input, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {EmitterService} from '../../services/emitter.service';
+
+
+@Component({selector: 'app-navigation', templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.css']})
+export class NavigationComponent implements OnInit {
+    navigationTabs: Array<Object> = [];
+    //@ViewChild(GoldenConfigurationComponent) goldenConfig: GoldenConfigurationComponent;
+    @Input() id: string;
+    userLoggedIn = false;
+    userId: string = localStorage['userId'];
+
+    constructor(private router: Router) {
+    };
+
+    ngOnChanges() {
+        EmitterService
+            .get(this.id)
+            .subscribe((value) => {
+                if (value != null && value != '' && value != undefined && value != 'undefined') {
+                    this.userId = value;
+                    this.userLoggedIn = true;
+                    localStorage['userId'] = this.userId;
+                } else {
+                    this.logout();
+                }
+
+            });
+    }
+
+    ngOnInit() {
+        this.userId = localStorage['userId'];
+        if (this.userId != undefined && this.userId != '') {
+            this.userLoggedIn = true;
+        }
+
+        this.navigationTabs = [
+
+            {
+                name: 'Home',
+                url: '/home'
+            }, {
+                name: 'MY VNFs',
+                url: 'vnfs'
+            },
+            {
+                name: 'Test',
+                url: 'test',
+            },
+            {
+                name: 'About us',
+                url: 'aboutUs'
+            }
+
+        ];
+    }
+
+
+    gotoDetail(url) {
+
+        if (url == 'vnfs') {
+            if (localStorage['userId'] != undefined && localStorage['userId'] != '' && localStorage['userId'] != null) {
+                this.router.navigate(['/vnfs/list']);
+            } else {
+                this.router.navigate(url);
+            }
+        } else {
+            this.router.navigate(url);
+        }
+
+
+    }
+
+    logout() {
+        window.localStorage.clear();
+        sessionStorage.clear();
+        localStorage.clear();
+        this.userLoggedIn = false;
+        //window.location.replace("/home");
+        this.router.navigate(['home']);
+
+
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/shared/confirmModal/confirm.component.ts b/src/app/shared/confirmModal/confirm.component.ts
new file mode 100644
index 0000000..79678b3
--- /dev/null
+++ b/src/app/shared/confirmModal/confirm.component.ts
@@ -0,0 +1,64 @@
+/* 
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================ */
+
+import {Component} from '@angular/core';
+import {DialogComponent, DialogService} from 'ng2-bootstrap-modal';
+
+export interface ConfirmModel {
+    title: string;
+    message: string;
+}
+
+@Component({
+    selector: 'confirm',
+    template: `
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" (click)="close()">&times;</button>
+                    <h4 class="modal-title">Confirm</h4>
+                </div>
+                <div class="modal-body">
+                    <p>Change Actions Without Saving?</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" (click)="confirm()">Yes</button>
+                    <button type="button" class="btn btn-default" (click)="close()">Cancel</button>
+                </div>
+            </div>
+        </div>`
+})
+export class ConfirmComponent extends DialogComponent<ConfirmModel, boolean> implements ConfirmModel {
+    title: string;
+    message: string;
+
+    constructor(dialogService: DialogService) {
+        super(dialogService);
+    }
+
+    confirm() {
+        // we set dialog result as true on click on confirm button,
+        // then we can get dialog result from caller code
+        this.result = true;
+        this.close();
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/directives/collapse.component.ts b/src/app/shared/directives/collapse.component.ts
new file mode 100644
index 0000000..bf9c306
--- /dev/null
+++ b/src/app/shared/directives/collapse.component.ts
@@ -0,0 +1,94 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Directive, HostBinding, Input} from '@angular/core';
+
+
+@Directive({selector: '[collapse]'})
+export class Collapse {
+    // style
+    @HostBinding('style.height')
+    private height: string;
+    // shown
+    @HostBinding('class.in')
+    @HostBinding('attr.aria-expanded')
+    private isExpanded: boolean = true;
+    // hidden
+    @HostBinding('attr.aria-hidden')
+    private isCollapsed: boolean = false;
+    // stale state
+    @HostBinding('class.collapse')
+    private isCollapse: boolean = true;
+    // animation state
+    @HostBinding('class.collapsing')
+    private isCollapsing: boolean = false;
+
+    constructor() {
+    }
+
+    private get collapse(): boolean {
+        return this.isExpanded;
+    }
+
+    @Input()
+    private set collapse(value: boolean) {
+        this.isExpanded = value;
+        this.toggle();
+    }
+
+    toggle() {
+        if (this.isExpanded) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    hide() {
+        this.isCollapse = false;
+        this.isCollapsing = true;
+
+        this.isExpanded = false;
+        this.isCollapsed = true;
+        setTimeout(() => {
+            this.height = '0';
+            this.isCollapse = true;
+            this.isCollapsing = false;
+        }, 4);
+    }
+
+    show() {
+        this.isCollapse = false;
+        this.isCollapsing = true;
+
+        this.isExpanded = true;
+        this.isCollapsed = false;
+        setTimeout(() => {
+            this.height = 'auto';
+
+            this.isCollapse = true;
+            this.isCollapsing = false;
+        }, 4);
+    }
+}
diff --git a/src/app/shared/directives/drop-down-toggle.directive.spec.ts b/src/app/shared/directives/drop-down-toggle.directive.spec.ts
new file mode 100644
index 0000000..b08d334
--- /dev/null
+++ b/src/app/shared/directives/drop-down-toggle.directive.spec.ts
@@ -0,0 +1,36 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+/* tslint:disable:no-unused-variable */
+
+import {DropDownToggleDirective} from './drop-down-toggle.directive';
+import {ElementRef} from '@angular/core';
+
+
+describe('DropDownToggleDirective', () => {
+    it('should create an instance', () => {
+        const directive = new DropDownToggleDirective(new ElementRef(''));
+        expect(directive).toBeTruthy();
+    });
+});
diff --git a/src/app/shared/directives/drop-down-toggle.directive.ts b/src/app/shared/directives/drop-down-toggle.directive.ts
new file mode 100644
index 0000000..7bf9fa8
--- /dev/null
+++ b/src/app/shared/directives/drop-down-toggle.directive.ts
@@ -0,0 +1,46 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Directive, ElementRef, Input, OnInit} from '@angular/core';
+
+@Directive({
+    selector: '[appDropDownToggle]'
+})
+export class DropDownToggleDirective implements OnInit {
+    @Input() type: string;
+
+    constructor(private el: ElementRef) {
+
+
+    }
+
+    ngOnInit() {
+
+        if (this.type == 'dropdown')
+            this.el.nativeElement.setAttribute('data-toggle', 'dropdown');
+
+
+    }
+
+}
diff --git a/src/app/shared/directives/dropdown.ts b/src/app/shared/directives/dropdown.ts
new file mode 100644
index 0000000..9057302
--- /dev/null
+++ b/src/app/shared/directives/dropdown.ts
@@ -0,0 +1,92 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {ContentChild, Directive, ElementRef, EventEmitter, Input, Output} from '@angular/core';
+import {DropdownNotClosableZone} from './dropdownnotclosablezone';
+
+@Directive({
+    selector: '[dropdown]',
+    exportAs: 'dropdown'
+})
+export class Dropdown {
+
+    // -------------------------------------------------------------------------
+    // Inputs / Outputs
+    // -------------------------------------------------------------------------
+
+    @Input('dropdownToggle')
+    toggleClick = true;
+
+    @Input('dropdownFocusActivate')
+    activateOnFocus = false;
+
+    @Output()
+    onOpen = new EventEmitter();
+
+    @Output()
+    onClose = new EventEmitter();
+
+    // -------------------------------------------------------------------------
+    // Properties
+    // -------------------------------------------------------------------------
+
+    @ContentChild(DropdownNotClosableZone)
+    notClosableZone: DropdownNotClosableZone;
+
+    // -------------------------------------------------------------------------
+    // Constructor
+    // -------------------------------------------------------------------------
+
+    constructor(private elementRef: ElementRef) {
+    }
+
+    // -------------------------------------------------------------------------
+    // Public Methods
+    // -------------------------------------------------------------------------
+
+    open() {
+        const element: HTMLElement = this.elementRef.nativeElement;
+        element.classList.add('open');
+        this.onOpen.emit(undefined);
+    }
+
+    close() {
+        const element: HTMLElement = this.elementRef.nativeElement;
+        element.classList.remove('open');
+        this.onClose.emit(undefined);
+    }
+
+    isOpened() {
+        const element: HTMLElement = this.elementRef.nativeElement;
+        return element.classList.contains('open');
+    }
+
+    isInClosableZone(element: HTMLElement) {
+        if (!this.notClosableZone)
+            return false;
+
+        return this.notClosableZone.contains(element);
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/shared/directives/dropdownnotclosablezone.ts b/src/app/shared/directives/dropdownnotclosablezone.ts
new file mode 100644
index 0000000..9ad351a
--- /dev/null
+++ b/src/app/shared/directives/dropdownnotclosablezone.ts
@@ -0,0 +1,45 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Directive, ElementRef, Input} from '@angular/core';
+
+@Directive({
+    selector: '[dropdown-not-closable-zone]'
+})
+export class DropdownNotClosableZone {
+
+    @Input('dropdown-not-closable-zone')
+    dropdownNotClosabledZone: boolean;
+
+    constructor(private elementRef: ElementRef) {
+    }
+
+    contains(element: HTMLElement) {
+        if (this.dropdownNotClosabledZone === false)
+            return false;
+
+        const thisElement: HTMLElement = this.elementRef.nativeElement;
+        return thisElement.contains(element);
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/directives/dropdownopen.ts b/src/app/shared/directives/dropdownopen.ts
new file mode 100644
index 0000000..ea2858b
--- /dev/null
+++ b/src/app/shared/directives/dropdownopen.ts
@@ -0,0 +1,147 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Directive, ElementRef, Host, HostListener, OnDestroy} from '@angular/core';
+import {Dropdown} from './dropdown';
+
+@Directive({
+    selector: '[dropdown-open]',
+    exportAs: 'dropdownOpen'
+})
+export class DropdownOpen implements OnDestroy {
+
+    // -------------------------------------------------------------------------
+    // Private Properties
+    // -------------------------------------------------------------------------
+
+    /**
+     * This hack is needed for dropdown not to open and instantly closed
+     */
+    private openedByFocus: boolean = false;
+
+    private closeDropdownOnOutsideClick: (event: Event) => void;
+
+    // -------------------------------------------------------------------------
+    // Constructor
+    // -------------------------------------------------------------------------
+
+    constructor(@Host() public dropdown: Dropdown,
+                private elementRef: ElementRef) {
+        const _this = this;
+        this.closeDropdownOnOutsideClick = function closeDropdownOnOutsideClick(event: MouseEvent) {
+            _this.closeIfInClosableZone(event);
+        };
+    }
+
+    // -------------------------------------------------------------------------
+    // Public Methods
+    // -------------------------------------------------------------------------
+
+    toggle() {
+        if (this.dropdown.isOpened()) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    open() {
+        if (this.dropdown.isOpened())
+            return;
+
+        this.dropdown.open();
+        document.addEventListener('click', this.closeDropdownOnOutsideClick, true);
+    }
+
+    close() {
+        if (!this.dropdown.isOpened())
+            return;
+
+        this.dropdown.close();
+        document.removeEventListener('click', this.closeDropdownOnOutsideClick, true);
+    }
+
+    @HostListener('click')
+    openDropdown() {
+        if (this.dropdown.activateOnFocus && this.openedByFocus) {
+            this.openedByFocus = false;
+            return;
+        }
+
+        if (this.dropdown.isOpened() && this.dropdown.toggleClick) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    @HostListener('keydown', ['$event'])
+    dropdownKeydown(event: KeyboardEvent) {
+        if (event.keyCode === 40) { // down
+            this.openDropdown();
+        }
+    }
+
+    @HostListener('focus')
+    onFocus() {
+        if (!this.dropdown.activateOnFocus) return;
+        this.openedByFocus = true;
+        this.dropdown.open();
+        document.addEventListener('click', this.closeDropdownOnOutsideClick, true);
+    }
+
+    @HostListener('blur', ['$event'])
+    onBlur(event: FocusEvent) {
+        if (!this.dropdown.activateOnFocus) return;
+        if (event.relatedTarget &&
+            !this.dropdown.isInClosableZone(<HTMLElement> event.relatedTarget) &&
+            event.relatedTarget !== this.elementRef.nativeElement) {
+
+            this.dropdown.close();
+            document.removeEventListener('click', this.closeDropdownOnOutsideClick, true);
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Lifecycle Methods
+    // -------------------------------------------------------------------------
+
+    ngOnDestroy() {
+        document.removeEventListener('click', this.closeDropdownOnOutsideClick, true);
+    }
+
+    // -------------------------------------------------------------------------
+    // Private Methods
+    // -------------------------------------------------------------------------
+
+    private closeIfInClosableZone(event: Event) {
+        if (!this.dropdown.isInClosableZone(<HTMLElement> event.target)
+            && event.target !== this.elementRef.nativeElement
+            && !this.elementRef.nativeElement.contains(event.target)) {
+            this.dropdown.close();
+            document.removeEventListener('click', this.closeDropdownOnOutsideClick, true);
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/shared/modal/modal.component.css b/src/app/shared/modal/modal.component.css
new file mode 100644
index 0000000..f9c2a3c
--- /dev/null
+++ b/src/app/shared/modal/modal.component.css
@@ -0,0 +1,36 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+.titlePopup {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1050;
+    /* display: none; */
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    outline: 0;
+    background: rgba(62, 57, 57, 0.66);
+}
\ No newline at end of file
diff --git a/src/app/shared/modal/modal.component.html b/src/app/shared/modal/modal.component.html
new file mode 100644
index 0000000..e227568
--- /dev/null
+++ b/src/app/shared/modal/modal.component.html
@@ -0,0 +1,47 @@
+<!--
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+-->
+
+<div id="modalId" class="titlePopup" role="dialog" *ngIf="isShow">
+    <div class="modal-dialog">
+
+
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="android-more-button mdl-button mdl-js-button mdl-button--accent"
+                        data-dismiss="modal" (click)="isClose()">&times;
+                </button>
+                <h4 class="modal-title">{{title}}</h4>
+            </div>
+            <div class="modal-body">
+                <p>{{message}}</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button"
+                        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
+                        data-dismiss="modal" (click)="isClose()">Close
+                </button>
+            </div>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/modal/modal.component.ts b/src/app/shared/modal/modal.component.ts
new file mode 100644
index 0000000..ec88702
--- /dev/null
+++ b/src/app/shared/modal/modal.component.ts
@@ -0,0 +1,52 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+    selector: 'app-modal',
+    templateUrl: './modal.component.html',
+    styleUrls: ['./modal.component.css']
+
+
+})
+export class ModalComponent implements OnInit {
+
+    @Input() title: string;
+    @Input() message: string;
+    @Input() onDismiss: boolean;
+    @Input() onConfirm: boolean;
+    @Input() isShow: boolean;
+
+    constructor() {
+
+    }
+
+    ngOnInit() {
+
+    }
+
+    isClose() {
+        this.isShow = false;
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/models/ArtifactRequest.ts b/src/app/shared/models/ArtifactRequest.ts
new file mode 100644
index 0000000..75438d0
--- /dev/null
+++ b/src/app/shared/models/ArtifactRequest.ts
@@ -0,0 +1,39 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+export class ArtifactRequest {
+    public vnfType: string;
+    public fileName: string;
+    public version: string;
+    public action: string;
+    public templateContent: string;
+    public pdContent: string;
+    public referenceContent: string;
+    public paramsContent: string;
+    public paramKeysContent: string;
+    public isTemplatePush: Boolean;
+    public isPdPush: Boolean;
+    public isReferenceePush: Boolean;
+
+}
\ No newline at end of file
diff --git a/src/app/shared/models/ConfigMapping.ts b/src/app/shared/models/ConfigMapping.ts
new file mode 100644
index 0000000..afe9d13
--- /dev/null
+++ b/src/app/shared/models/ConfigMapping.ts
@@ -0,0 +1,30 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+export class ConfigMapping {
+    public selectedRange: any;
+    public mappingKey: string;
+    public mappingValue: string;
+    public duplicateRanges: Array<any> = [];
+}
\ No newline at end of file
diff --git a/src/app/shared/models/Notification.ts b/src/app/shared/models/Notification.ts
new file mode 100644
index 0000000..02f7524
--- /dev/null
+++ b/src/app/shared/models/Notification.ts
@@ -0,0 +1,29 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+export class Notification {
+    constructor(public type: string = '',
+                public message: string = '') {
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
new file mode 100644
index 0000000..5c19bcf
--- /dev/null
+++ b/src/app/shared/models/index.ts
@@ -0,0 +1,31 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+// export * from './TemplateMapping';
+// export * from './TemplateRequest';
+// export * from './TemplateResponse';
+export * from './Notification';
+export * from './ArtifactRequest';
+//export * from './ArtifactResponse';
+export * from './ConfigMapping';
\ No newline at end of file
diff --git a/src/app/shared/modules/tidy-table/order-by.pipe.spec.ts b/src/app/shared/modules/tidy-table/order-by.pipe.spec.ts
new file mode 100644
index 0000000..82c57a1
--- /dev/null
+++ b/src/app/shared/modules/tidy-table/order-by.pipe.spec.ts
@@ -0,0 +1,34 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+/* tslint:disable:no-unused-variable */
+
+import {OrderBy} from './order-by.pipe';
+
+describe('OrderByPipe', () => {
+    it('create an instance', () => {
+        const pipe = new OrderBy();
+        expect(pipe).toBeTruthy();
+    });
+});
diff --git a/src/app/shared/modules/tidy-table/order-by.pipe.ts b/src/app/shared/modules/tidy-table/order-by.pipe.ts
new file mode 100644
index 0000000..45f44d9
--- /dev/null
+++ b/src/app/shared/modules/tidy-table/order-by.pipe.ts
@@ -0,0 +1,81 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'orderBy'})
+export class OrderBy implements PipeTransform {
+
+    transform(array, orderBy, asc = true) {
+
+        if (!orderBy || orderBy.trim() == '') {
+            return array;
+        }
+
+        //ascending
+        if (asc) {
+            return Array
+                .from(array)
+                .sort((item1: any, item2: any) => {
+                    return this.orderByComparator(item1[orderBy], item2[orderBy]);
+                });
+        } else {
+            //not asc
+            return Array
+                .from(array)
+                .sort((item1: any, item2: any) => {
+                    return this.orderByComparator(item2[orderBy], item1[orderBy]);
+                });
+        }
+
+    }
+
+    orderByComparator(a: any, b: any): number {
+        if (a != undefined && b != undefined) {
+            if ((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))) {
+                // Isn't a number so lowercase the string to properly compare
+                if (a.toLowerCase() < b.toLowerCase())
+                    return -1;
+                if (a.toLowerCase() > b.toLowerCase())
+                    return 1;
+            }
+            else {
+                //Parse strings as numbers to compare properly
+                if (parseFloat(a) < parseFloat(b))
+                    return -1;
+                if (parseFloat(a) > parseFloat(b))
+                    return 1;
+            }
+        } else {
+            if (a == undefined) {
+                return -1;
+            } else {
+                return 1;
+            }
+        }
+
+
+        return 0; //equal each other
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/modules/tidy-table/table-filter.pipe.spec.ts b/src/app/shared/modules/tidy-table/table-filter.pipe.spec.ts
new file mode 100644
index 0000000..d8fe6c7
--- /dev/null
+++ b/src/app/shared/modules/tidy-table/table-filter.pipe.spec.ts
@@ -0,0 +1,34 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+/* tslint:disable:no-unused-variable */
+
+import {TableFilterPipe} from './table-filter.pipe';
+
+describe('TableFilterPipe', () => {
+    it('create an instance', () => {
+        const pipe = new TableFilterPipe();
+        expect(pipe).toBeTruthy();
+    });
+});
diff --git a/src/app/shared/modules/tidy-table/table-filter.pipe.ts b/src/app/shared/modules/tidy-table/table-filter.pipe.ts
new file mode 100644
index 0000000..1eec34b
--- /dev/null
+++ b/src/app/shared/modules/tidy-table/table-filter.pipe.ts
@@ -0,0 +1,53 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Pipe, PipeTransform} from '@angular/core';
+import * as _ from 'underscore';
+
+@Pipe({name: 'tableFilter'})
+export class TableFilterPipe implements PipeTransform {
+
+    transform(array: any[], query: string, filetrColumns: Array<String>): any {
+        if (query) {
+            return _.filter(array, (row: Object) => this.filterRows(filetrColumns, row, query));
+        }
+        return array;
+    }
+
+    filterRows(columsn, row, query) {
+        let temp: Array<boolean> = [];
+        for (let x = 0; x < columsn.length; x++) {
+            if ((row[columsn[x]]) != null && query != null) {
+                temp.push((row[columsn[x]].toLowerCase().indexOf(query.toLowerCase()) > -1));
+            }
+        }
+
+        return _.reduce(temp, function (memoizer, value) {
+
+            return (memoizer || value);
+        }, false);
+
+    }
+
+}
diff --git a/src/app/shared/modules/tidy-table/tidy-table.module.ts b/src/app/shared/modules/tidy-table/tidy-table.module.ts
new file mode 100644
index 0000000..ae5f00a
--- /dev/null
+++ b/src/app/shared/modules/tidy-table/tidy-table.module.ts
@@ -0,0 +1,38 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {OrderBy} from './order-by.pipe';
+import {TableFilterPipe} from './table-filter.pipe';
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [
+        TableFilterPipe, OrderBy
+    ],
+    exports: [TableFilterPipe, OrderBy]
+})
+export class TidyTableModule {
+}
\ No newline at end of file
diff --git a/src/app/shared/services/emitter.service.spec.ts b/src/app/shared/services/emitter.service.spec.ts
new file mode 100644
index 0000000..f12154f
--- /dev/null
+++ b/src/app/shared/services/emitter.service.spec.ts
@@ -0,0 +1,40 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+/* tslint:disable:no-unused-variable */
+
+import {inject, TestBed} from '@angular/core/testing';
+import {EmitterService} from './emitter.service';
+
+describe('EmitterService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [EmitterService]
+        });
+    });
+
+    it('should ...', inject([EmitterService], (service: EmitterService) => {
+        expect(service).toBeTruthy();
+    }));
+});
diff --git a/src/app/shared/services/emitter.service.ts b/src/app/shared/services/emitter.service.ts
new file mode 100644
index 0000000..1cedc63
--- /dev/null
+++ b/src/app/shared/services/emitter.service.ts
@@ -0,0 +1,42 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {EventEmitter, Injectable} from '@angular/core';
+
+@Injectable()
+export class EmitterService {
+    private static _emitters: {
+        [ID: string]: EventEmitter<any>
+    } = {};
+
+    constructor() {
+    }
+
+    static get(ID: string): EventEmitter<any> {
+        if (!this._emitters[ID])
+            this._emitters[ID] = new EventEmitter();
+        return this._emitters[ID];
+    }
+
+}
diff --git a/src/app/shared/services/httpUtil/http-util.service.spec.ts b/src/app/shared/services/httpUtil/http-util.service.spec.ts
new file mode 100644
index 0000000..c6923bb
--- /dev/null
+++ b/src/app/shared/services/httpUtil/http-util.service.spec.ts
@@ -0,0 +1,39 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+/* tslint:disable:no-unused-variable */
+
+import {inject, TestBed} from '@angular/core/testing';
+import {HttpUtilService} from './http-util.service';
+
+describe('HttpUtilService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [HttpUtilService]
+        });
+    });
+
+    it('should ...', inject([HttpUtilService], (service: HttpUtilService) => {
+        expect(service).toBeTruthy();
+    }));
+});
diff --git a/src/app/shared/services/httpUtil/http-util.service.ts b/src/app/shared/services/httpUtil/http-util.service.ts
new file mode 100644
index 0000000..35c5047
--- /dev/null
+++ b/src/app/shared/services/httpUtil/http-util.service.ts
@@ -0,0 +1,57 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+import { observable } from 'rxjs/symbol/observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+import { Injectable } from '@angular/core';
+import { Http, Response, Headers, RequestOptions } from '@angular/http';
+
+@Injectable()
+export class HttpUtilService {
+    headers: Headers;
+    options: RequestOptions
+    constructor (private http: Http) {
+        this.headers = new Headers({ 'Content-Type': 'application/json' }); // ... Set content type to JSON
+        // this.options = new RequestOptions({headers: this.headers}); //
+    }
+
+    get(req) {
+
+        return this
+            .http
+            .get(req.url, this.options)
+            .map((res: Response) => res.json())
+    }
+
+    post(req) {
+
+        this.headers.append('Authorization', 'Basic ' + btoa('m97292@appc.att.com:enc:Ai8KDxN7EANwATsV'));
+        this.options = new RequestOptions({ headers: this.headers });
+
+        return this
+            .http
+            .post(req.url, req.data, this.options)
+            .map((res: Response) => res.json())
+    }
+
+}
\ No newline at end of file
diff --git a/src/app/shared/services/mapping-editor.service.ts b/src/app/shared/services/mapping-editor.service.ts
new file mode 100644
index 0000000..00ef211
--- /dev/null
+++ b/src/app/shared/services/mapping-editor.service.ts
@@ -0,0 +1,684 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Injectable} from '@angular/core';
+import {ConfigMapping} from '../models/index';
+import {Observable} from 'rxjs/Observable';
+import {Observer} from 'rxjs/Observer';
+import 'rxjs/add/operator/share';
+
+
+@Injectable()
+export class MappingEditorService {
+
+    editor: any;
+    session: any;
+    editorContent: string;
+    configMappings: Array<ConfigMapping> = [];
+    paramContent: string = '{}';
+
+    KEY_EXPRESSION: string = '\\${\\(.+?\\)}';//new RegExp('${.+?}'); // \${.+?}
+    //SYNC_KEY_EXPRESSION: string = '\\${\\)}';
+    KEY_START: string = '${(';
+    KEY_MID: string = ')=(';
+    KEY_END: string = ')}';
+    KEY_START_LENGTH: number = 3;
+    KEY_MID_LENGTH: number = 3;
+    KEY_END_LENGTH: number = 2;
+    SYNC_T_KEY_EXPRESSION: string = '\\${.+?\\}';
+    T_KEY_EXPRESSION: string = '\\${.+?}';//new RegExp('${.+?}'); // \${.+?}
+    T_KEY_START: string = '${';
+    T_KEY_END: string = '}';
+    T_KEY_START_LENGTH: number = 2;
+    T_KEY_END_LENGTH: number = 1;
+    checkSpecialCharsReg: RegExp = /[^\w\s-_]/gi;
+    public paramData = [];
+    public referenceNameObjects: any;
+    prmName: string = '';
+    prmValue: string = '';
+    navChange$: Observable<any>;
+    public fromScreen: any = '';
+    public storedTemplateData: any;
+    public storedTemplateMappingData: any;
+    public fileType: any;
+    public hasErrorCode: boolean = false;
+    public appDataObject: any;
+    public downloadDataObject: any;
+    public markedarr: any;
+    public tempAllData: any;
+    public latestAction: any;
+    public selectedWord: any;
+    identifier: any;
+    private _navItem = {};
+    private _observer: Observer<any>;
+    private referenceList = [];
+
+    constructor() {
+        this.navChange$ = new Observable(observer =>
+            this._observer = observer).share();
+    }
+
+    setSelectedWord(selectedWord: any) {
+        this.selectedWord = selectedWord;
+    }
+
+    getSelectedWord() {
+        return this.selectedWord;
+    }
+
+    changeNav(object) {
+        this._navItem = object;
+        // this._observer.next(object);
+        this.referenceNameObjects = object;
+    }
+
+    changeNavAppData(object) {
+        this._navItem = object;
+        // this._observer.next(object);
+        this.appDataObject = object;
+    }
+
+    changeNavDownloadData(object) {
+        this._navItem = object;
+        // this._observer.next(object);
+        this.downloadDataObject = object;
+    }
+
+    saveLatestAction(data) {
+        this.latestAction = data;
+    }
+
+    saveLatestIdentifier(identifier) {
+        this.identifier = identifier;
+    }
+
+    public getParamContent() {
+        return this.paramContent;
+    }
+
+    saveTempAllData(data) {
+        this.tempAllData = data;
+    }
+
+    navItem() {
+        return this._navItem;
+    }
+
+    public setParamContent(paramContent: string): void {
+        this.paramContent = paramContent;
+        // localStorage["paramContent"]=paramContent;
+    }
+
+    public initialise(editor: any, editorContent: string, modal: any): void {
+        this.editor = editor;
+        this.editor.session = editor.session;
+        this.editor.selection.session.$backMarkers = {};
+        this.editorContent = editorContent;
+        this.editor.$blockScrolling = Infinity;
+        this.editor.$blockSelectEnabled = false;
+        this.initialiseCommands(modal);
+        this.editor.setValue(this.editorContent);
+        this.refreshEditor();
+    }
+
+
+    public initialiseCommands(modal): void {
+        /*  this.editor.commands.addCommand({
+              name: 'annotateCommand',
+              bindKey: { win: 'ENTER', mac: 'ENTER' },
+              exec: (editor: any) => {
+                  this.handleAnnotation(modal);
+              }
+          });*/
+
+
+        this.editor.commands.addCommand({
+            name: 'keyCompletionCommand',
+            bindKey: {win: 'Ctrl-s', mac: 'Command-s'},
+            exec: (editor: any) => {
+                this.handlekeyCompletion();
+            }
+        });
+
+        this.editor.commands.addCommand({
+            name: 'autoAnnotateCommand',
+            bindKey: {win: 'Ctrl-2', mac: 'Command-2'},
+            exec: (editor: any) => {
+                this.autoAnnotateDataForParams(this.fileType);
+            }
+        });
+
+        this.editor.commands.addCommand({
+            name: 'autoAnnotateCommand',
+            bindKey: {win: 'Ctrl-shift-z', mac: 'Command-shift-z'},
+            exec: (editor: any) => {
+                this.removeTheSelectedMarkers();
+            }
+        });
+    }
+
+    public getStartBeforeAfterSelection(selection: any, beforeCount: number, afterCount: number) {
+        let newSelctionRange: any = JSON.parse(JSON.stringify(selection));
+        if (selection) {
+            let newBeforeColumn: number = selection.start.column - beforeCount;
+            let newAfterColumn: number = selection.end.column + afterCount;
+            newSelctionRange.start.column = newBeforeColumn;
+            newSelctionRange.end.column = newAfterColumn;
+        }
+        return newSelctionRange;
+    }
+
+    public checkToDataAdd(value: string): boolean {
+        let toAdd = false;
+        if (value && (value.startsWith('"') || value.startsWith('>'))
+            && (value.endsWith('"') || value.endsWith('<'))
+            && !value.startsWith('"${')
+        ) {
+            toAdd = true;
+        }
+        return toAdd;
+    }
+
+    public autoAnnotateDataForParams(fileType: any): boolean {
+        this.paramContent = localStorage['paramsContent'];
+        //console.log("Param content=="+ this.paramContent)
+        var mergeStatus: boolean = false;
+        if (this.paramContent) {
+            var paramJson: JSON = JSON.parse(this.paramContent);
+            for (var prop in paramJson) {
+                let value: string = paramJson[prop];
+                if (value) {
+                    var occurances = this.editor.findAll(value, {regExp: false});
+                    var ranges = this.editor.getSelection().getAllRanges();
+                    if (ranges) {
+
+                        for (var r = 0; r < ranges.length; r++) {
+                            let selectedRange: any = ranges[r];
+                            let selectedWord: string = this.editor.session.getTextRange(selectedRange);
+                            let prefixSuffixselectedWord: string = this.editor.session.getTextRange(this.getStartBeforeAfterSelection(selectedRange, 1, 1));
+                            if (selectedWord && this.checkComments(selectedRange) && this.checkDelimiters(selectedRange) && this.checkApplied(selectedRange)) {
+                                let replaceWord: any = this.KEY_START + selectedWord + this.KEY_MID + prop + this.KEY_END;
+                                this.editor.session.replace(selectedRange, replaceWord);
+                                mergeStatus = true;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return mergeStatus;
+    }
+
+    /*   syncTemplateNames() {
+           if (this.paramContent != '{}') {
+               var paramJson: JSON = JSON.parse(this.paramContent);
+               for (var prop in paramJson) {
+                   let value: string = paramJson[prop]
+                   if (value) {
+                       var occurances = this.editor.findAll(value, { regExp: false });
+                       var ranges = this.editor.getSelection().getAllRanges();
+                       if (ranges) {
+                           for (var r = 0; r < ranges.length; r++) {
+                               let selectedRange: any = ranges[r];
+                               let selectedWord: string = this.editor.session.getTextRange(selectedRange);
+                               let prefixSuffixselectedWord: string = this.editor.session.getTextRange(this.getStartBeforeAfterSelection(selectedRange, 1, 1));
+                               if (selectedWord && this.checkApplied(selectedRange)) {
+                                   let replaceWord: any = this.KEY_START + selectedWord + this.KEY_MID + prop + this.KEY_END;
+                                   this.editor.session.replace(selectedRange, replaceWord);
+                               }
+                           }
+                       }
+                   }
+               }
+               for (var prop in paramJson) {
+                   var occurances = this.editor.findAll(prop, { regExp: false });
+                   var ranges = this.editor.getSelection().getAllRanges();
+                   if (ranges) {
+                       for (var r = 0; r < ranges.length; r++) {
+                           let selectedRange: any = ranges[r];
+                           let selectedWord: string = this.editor.session.getTextRange(selectedRange);
+                           if (selectedWord && this.checkApplied(selectedRange)) {
+                               let replaceWord: any = '(' + paramJson[prop] + this.KEY_MID + selectedWord + ')';
+                               this.editor.session.replace(selectedRange, replaceWord);
+                           }
+                       }
+                   }
+                   else {
+                       this.replaceNamesWithBlankValues();
+                   }
+               }
+           }
+           else {
+               this.replaceNamesWithBlankValues()
+           }
+       }*/
+
+
+    checkComments(selectedRange: any) {
+        var tempStartColumn = selectedRange.start.column;
+        var result = false;
+        selectedRange.start.column = 0;
+        if (this.editor.session.getTextRange(selectedRange).trim().startsWith('//')) {
+            result = false;
+        } else {
+            result = true;
+        }
+        selectedRange.start.column = tempStartColumn;
+        return result;
+    }
+
+    checkApplied(selectedRange: any) {
+        var tempStartColumn = selectedRange.start.column;
+        for (var i = selectedRange.start.column; i >= 0; i--) {
+            selectedRange.start.column = i;
+            if (this.editor.session.getTextRange(selectedRange).startsWith(this.KEY_START)
+                || this.editor.session.getTextRange(selectedRange).startsWith(this.T_KEY_START)) {
+                selectedRange.start.column = tempStartColumn;
+                return false;
+            } else if (this.editor.session.getTextRange(selectedRange).startsWith(this.KEY_END)
+                || this.editor.session.getTextRange(selectedRange).startsWith(this.T_KEY_END)) {
+                selectedRange.start.column = tempStartColumn;
+                return true;
+            }
+
+        }
+        selectedRange.start.column = tempStartColumn;
+        return true;
+
+    }
+
+    checkDelimiters(selectedRange: any) {
+        let result = false;
+        let actualText = this.editor.session.getTextRange(selectedRange);
+        var tempStartColumn = selectedRange.start.column;
+        var tempEndcolumn = selectedRange.end.column;
+
+        selectedRange.start.column = selectedRange.start.column - 1;
+        selectedRange.end.column = selectedRange.end.column + 1;
+        if ((this.editor.session.getTextRange(selectedRange).startsWith(' ')
+                || this.editor.session.getTextRange(selectedRange).startsWith('"')
+                || this.editor.session.getTextRange(selectedRange).startsWith('>'))
+            && (this.editor.session.getTextRange(selectedRange).endsWith(' ')
+                || this.editor.session.getTextRange(selectedRange).endsWith('"')
+                || this.editor.session.getTextRange(selectedRange).endsWith(',')
+                || this.editor.session.getTextRange(selectedRange).endsWith(actualText)
+                || this.editor.session.getTextRange(selectedRange).endsWith('<'))) {
+            result = true;
+        }
+
+        //Ignore the JSON key names(which ends with :)
+        selectedRange.end.column = selectedRange.end.column + 1;
+        if (this.editor.session.getTextRange(selectedRange).endsWith('":')) {
+            result = false;
+        } else {
+            selectedRange.end.column = selectedRange.end.column + 1;
+            if (this.editor.session.getTextRange(selectedRange).endsWith('" :')) {
+                result = false;
+            }
+        }
+        selectedRange.start.column = tempStartColumn;
+        selectedRange.end.column = tempEndcolumn;
+        return result;
+    }
+
+    checkAppliedForNamesOnly(selectedRange: any) {
+        var tempStartColumn = selectedRange.start.column;
+        for (var i = selectedRange.start.column; i >= 0; i--) {
+            selectedRange.start.column = i;
+            if (this.editor.session.getTextRange(selectedRange).startsWith(this.KEY_START)) {
+                selectedRange.start.column = tempStartColumn;
+                return false;
+            } else if (this.editor.session.getTextRange(selectedRange).startsWith(this.KEY_END)) {
+                selectedRange.start.column = tempStartColumn;
+                return true;
+            }
+
+        }
+        selectedRange.start.column = tempStartColumn;
+        return true;
+
+    }
+
+    checkToDataAddForJson(value: string): boolean {
+        let toAdd = false;
+        if (value && !value.startsWith('"${') && !value.startsWith('(')) {
+            toAdd = true;
+        }
+        return toAdd;
+    }
+
+    public autoAnnotateTemplateForParam(): void {
+        var occurances = this.editor.findAll(this.T_KEY_EXPRESSION, {regExp: true});
+        var ranges = this.editor.getSelection().getAllRanges();
+        if (ranges) {
+            for (var r = 0; r < ranges.length; r++) {
+                let selectedRange: any = ranges[r];
+                let selectedWord: string = this.editor.session.getTextRange(selectedRange);
+                if (selectedWord) {
+                    let key: string = selectedWord.substring(this.T_KEY_START_LENGTH, selectedWord.lastIndexOf(this.T_KEY_END));
+                    let value: string = this.getValueForKey(key);
+                    let replaceWord: any = this.KEY_START + value + this.KEY_MID + key + this.KEY_END;
+                    this.editor.session.replace(selectedRange, replaceWord);
+                }
+            }
+        }
+
+    }
+
+    /*
+     * Once you save command is triggered, We need to re populate all the params, which may be defined new
+     * and auto populate the key if any of the values maps to the keys
+     */
+    public handlekeyCompletion(): void {
+        this.refreshEditor();
+    }
+
+    /* public handleAnnotation(modal): void {
+         let selectedWord: string = this.editor.session.getTextRange(this.editor.selectionRange);
+         this.setSelectedWord(selectedWord);
+         modal.open();
+
+        /* let selectedWord: string = this.editor.session.getTextRange(this.editor.selectionRange);
+         if (selectedWord) {
+             if (selectedWord.startsWith('${(')) {
+                 var replaceWord = selectedWord.substring(3, selectedWord.indexOf(')=('));
+                 this.editor.session.replace(this.editor.session.selection.getRange(), replaceWord);
+             } else {
+                 let mappingKey = this.getKeysForValues(selectedWord);
+                 var replaceWord = '${(' + selectedWord + ')=()}';
+                 this.editor.session.replace(this.editor.session.selection.getRange(), replaceWord);
+             }
+         }
+         this.refreshEditor();
+ }*/
+
+    public checkMethodCall(modal): void {
+//this.handleAnnotation(modal)
+    }
+
+    public refreshEditor(): void {
+        if (this.editor) {
+
+            // this.replaceNamesWithBlankValues();
+            var occurances = this.editor.findAll(this.KEY_EXPRESSION, {regExp: true});
+            //console.log("Occurances from save" + occurances)
+            var ranges = this.editor.getSelection().getAllRanges();
+            if (ranges) {
+                this.refreshParams(ranges);
+            }
+
+            occurances = this.editor.findAll(this.KEY_EXPRESSION, {regExp: true});
+            ranges = this.editor.getSelection().getAllRanges();
+            if (ranges) {
+                this.populateMissingKeys(ranges);
+            }
+            this.refreshMarker();
+        }
+        // console.log("Param data from refresh editor=="+this.paramData)
+
+    }
+
+    replaceNamesWithBlankValues() {
+        var occurances = this.editor.findAll(this.SYNC_T_KEY_EXPRESSION, {regExp: true});
+        var ranges = this.editor.getSelection().getAllRanges();
+        if (occurances > 0) {
+            if (ranges) {
+                for (var r = 0; r < ranges.length; r++) {
+                    let selectedRange: any = ranges[r];
+                    // console.log("Selected range == " + selectedRange)
+                    let selectedWord: string = this.editor.session.getTextRange(selectedRange);
+                    let specialKeys = (selectedWord.substring(2, selectedWord.length - 1)).match(this.checkSpecialCharsReg);
+                    // console.log("Selected word == " + selectedWord.length)
+                    //if (!selectedWord.startsWith('<') || !selectedWord.startsWith('{')) {
+                    if (selectedWord && this.checkAppliedForNamesOnly(selectedRange) && !specialKeys) {
+                        let replaceWord: any = this.KEY_START + '' + this.KEY_MID + selectedWord.substring(2, selectedWord.length - 1) + this.KEY_END;
+                        this.editor.session.replace(selectedRange, replaceWord);
+                    }
+                    // }
+                }
+            }
+        }
+    }
+
+    public refreshParams(ranges: any): void {
+        // console.log("This param content==="+ this.paramContent);
+        var paramData = [];
+        if (this.paramContent === undefined) this.paramContent = '{}';
+        if (this.editor && ranges) {
+            var paramJson: JSON = JSON.parse(this.paramContent);
+            this.hasErrorCode = false;
+            for (var r = 0; r < ranges.length; r++) {
+                let keyValue: string = this.editor.session.getTextRange(ranges[r]);
+                //console.log("keyValues==="+keyValue)
+                if (keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
+                    let key: string = keyValue.substring(keyValue.indexOf(this.KEY_MID) + this.KEY_MID_LENGTH, keyValue.indexOf(this.KEY_END));
+                    let value: string = keyValue.substring(this.KEY_START_LENGTH, keyValue.indexOf(this.KEY_MID));
+                    let specialKeys = key.match(this.checkSpecialCharsReg);
+                    //console.log("Special keys=="+specialKeys)
+                    //console.log("Keys=="+key+",values=="+value);
+                    if (specialKeys && specialKeys.length) {
+                        // this.paramData = [];
+                        //  this.hasErrorCode = true;
+                        //  break;
+                    } else {
+                        if (this.fromScreen === 'TemplateScreen') {
+                            if (key) {
+                                paramJson[key] = value;
+                                var obj: any = {'paramName': '', 'paramValue': ''};
+                                obj.paramName = key;
+                                obj.paramValue = value;
+                                paramData.push(obj);
+                            }
+
+                        }
+                        else if (this.fromScreen === 'MappingScreen') {
+                            if (key) {
+                                paramJson[key] = value;
+                                var obj: any = {'paramName': '', 'paramValue': ''};
+                                obj.paramName = key;
+                                obj.paramValue = value;
+
+                                paramData.push(obj);
+
+                            }
+                        }
+                    }
+                }
+            }
+            // console.log("Param data=="+ JSON.stringify(paramData))
+            this.paramData = paramData;
+            this.paramContent = JSON.stringify(paramJson);
+
+        }
+    }
+
+    public populateMissingKeys(ranges: any): void {
+        if (this.editor && ranges) {
+            // Populate missing keys
+            for (var r = 0; r < ranges.length; r++) {
+                let keyValue: string = this.editor.session.getTextRange(ranges[r]);
+                if (keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
+                    let key: string = keyValue.substring(keyValue.indexOf(this.KEY_MID) + this.KEY_MID_LENGTH, keyValue.indexOf(this.KEY_END));
+                    let value: string = keyValue.substring(this.KEY_START_LENGTH, keyValue.indexOf(this.KEY_MID));
+                    if (!key && value) {
+                        let keyFromStore = '';
+                        if (keyFromStore) {
+                            let replaceWord: string = '${(' + value + ')=(' + keyFromStore + ')}';
+                            this.editor.session.replace(ranges[r], replaceWord);
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+
+    public refreshMarker(): void {
+        if (this.editor) {
+            this.hasErrorCode = false;
+            var occurances = this.editor.findAll(this.KEY_EXPRESSION, {regExp: true});
+            var ranges = this.editor.getSelection().getAllRanges();
+            var keysList = [];
+            // Populate missing keys
+            for (var r = 0; r < ranges.length; r++) {
+                let keyValue: string = this.editor.session.getTextRange(ranges[r]);
+                if (keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
+                    let key: string = keyValue.substring(keyValue.indexOf(this.KEY_MID) + this.KEY_MID_LENGTH, keyValue.indexOf(this.KEY_END));
+                    let value: string = keyValue.substring(this.KEY_START_LENGTH, keyValue.indexOf(this.KEY_MID));
+                    let specialKeys = key.match(this.checkSpecialCharsReg);
+                    if (specialKeys && specialKeys.length) {
+                        this.hasErrorCode = true;
+                        break;
+                    }
+                    if (!key && value) {
+                        this.editor.session.addMarker(ranges[r], 'warningMarker', 'text');
+                    } else {
+                        if (keysList.indexOf(key) > -1) {
+                            this.editor.session.addMarker(ranges[r], 'warningMarker', 'text');
+                        } else {
+                            this.editor.session.addMarker(ranges[r], 'keyedMarker', 'text');
+                        }
+                        keysList.push(key);
+                    }
+                    // Refresh Markers
+                }
+            }
+            this.editor.clearSelection();
+            this.editor.exitMultiSelectMode();
+        }
+    }
+
+    public getKeysForValues(value: string): string {
+        var key: string = undefined;
+        if (this.paramContent && value) {
+            var paramJson: JSON = JSON.parse(this.paramContent);
+            for (var prop in paramJson) {
+                if (value === paramJson[prop]) {
+                    key = prop;
+                }
+            }
+        }
+        return key;
+    }
+
+    public getValueForKey(key: string): string {
+        var value: string = undefined;
+        if (key) {
+            var paramJson: JSON = JSON.parse(this.paramContent);
+            if (paramJson) {
+                value = paramJson[key];
+            }
+        }
+        return value;
+    }
+
+    public generateTemplate(templateEditor: any): void {
+        if (templateEditor) {
+            templateEditor.setValue(this.editor.getValue());
+            var occurances = templateEditor.findAll(this.KEY_EXPRESSION, {regExp: true});
+            var ranges = templateEditor.getSelection().getAllRanges();
+            if (ranges) {
+                for (var r = 0; r < ranges.length; r++) {
+                    let keyValue: string = templateEditor.session.getTextRange(ranges[r]);
+                    if (keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
+                        let key: string = keyValue.substring(keyValue.indexOf(this.KEY_MID) + this.KEY_MID_LENGTH, keyValue.indexOf(this.KEY_END));
+                        let value: string = keyValue.substring(this.KEY_START_LENGTH, keyValue.indexOf(this.KEY_MID));
+                        if (key && value) {
+                            let replaceWord: string = '${' + key + '}';
+                            templateEditor.session.replace(ranges[r], replaceWord);
+                        }
+                    }
+                }
+                templateEditor.clearSelection();
+                templateEditor.exitMultiSelectMode();
+                templateEditor.session.$backMarkers = {};
+
+            }
+        }
+    }
+
+    public generateParams(paramsEditor: any, paramsKeyValueEditor: any): JSON {
+        if (paramsEditor && paramsKeyValueEditor) {
+            var occurances = this.editor.findAll(this.KEY_EXPRESSION, {regExp: true});
+            var ranges = this.editor.getSelection().getAllRanges();
+            if (ranges) {
+                let paramsJSON: JSON = JSON.parse('{}');
+                for (var r = 0; r < ranges.length; r++) {
+                    let keyValue: string = this.editor.session.getTextRange(ranges[r]);
+                    if (keyValue && keyValue.startsWith(this.KEY_START) && keyValue.endsWith(this.KEY_END) && keyValue.includes(this.KEY_MID)) {
+                        let key: string = keyValue.substring(keyValue.indexOf(this.KEY_MID) + this.KEY_MID_LENGTH, keyValue.indexOf(this.KEY_END));
+                        let value: string = keyValue.substring(this.KEY_START_LENGTH, keyValue.indexOf(this.KEY_MID));
+                        if (key) {
+                            paramsJSON[key] = value;
+                        }
+                    }
+                }
+
+                var propertyContent = [];
+                for (var prop in paramsJSON) {
+                    propertyContent.push(prop + '=' + paramsJSON[prop]);
+                }
+                this.editor.clearSelection();
+                this.editor.exitMultiSelectMode();
+                return paramsJSON;
+            }
+        }
+    }
+
+    setTemplateDataForStore(templateData: any) {
+        this.storedTemplateData = templateData;
+    }
+
+    getTemplateDataFromStore() {
+        return this.storedTemplateData;
+    }
+
+    removeTheSelectedMarkers() {
+        var arr: any = [];
+        arr = this.markedarr;
+        this.editor.selection.session.$backMarkers = {};
+    }
+
+    getsaveMarkers() {
+        this.markedarr = [...this.editor.selection.session.$selectionMarkers];
+    }
+
+    getTemplateMappingDataFromStore() {
+        return this.storedTemplateMappingData;
+    }
+
+    setTemplateMappingDataFromStore(templateMappingData: any) {
+        this.storedTemplateMappingData = templateMappingData;
+    }
+
+    public setReferenceList(references) {
+        this.referenceList = references;
+    }
+
+    public getReferenceList() {
+        return this.referenceList;
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/app/shared/services/notification.service.ts b/src/app/shared/services/notification.service.ts
new file mode 100644
index 0000000..428f9a2
--- /dev/null
+++ b/src/app/shared/services/notification.service.ts
@@ -0,0 +1,58 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {EventEmitter, Injectable} from '@angular/core';
+import {Notification} from '../models/Notification';
+
+@Injectable()
+export class NotificationService {
+
+    public notificationsEvent: EventEmitter<Notification>;
+
+    constructor() {
+        this.notificationsEvent = new EventEmitter<Notification>();
+    }
+
+    public add(_notification: Notification) {
+        this.notificationsEvent.emit(_notification);
+    }
+
+    public notifySuccessMessage(_message: string) {
+        this.add(new Notification('success', _message));
+    }
+
+    public notifyErrorMessage(_message: string) {
+        console.error(_message);
+        this.add(new Notification('error', _message));
+    }
+
+    public notifyInfoMessage(_message: string) {
+        this.add(new Notification('info', _message));
+    }
+
+    public notifyAlertMessage(_message: string) {
+        this.add(new Notification('alert', _message));
+    }
+
+}
diff --git a/src/app/shared/services/paramShare.service.ts b/src/app/shared/services/paramShare.service.ts
new file mode 100644
index 0000000..559b448
--- /dev/null
+++ b/src/app/shared/services/paramShare.service.ts
@@ -0,0 +1,85 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class ParamShareService {
+
+    public sharedData: { [index: string]: string; } = {};
+
+    //Stubbing Name-Value pairs for templateData->will come from Template Generation Component/Editor
+    public templateData: {};
+    public displayData: {};
+    public paramData = [];
+
+
+    setData(data) {
+        this.sharedData = data;
+    }
+
+    getData() {
+        return this.sharedData;
+    }
+
+    setTemplateData1() {
+        /* Stubbing **/
+        var paramData = [
+            {paramName: 'A-IP', paramValue: '234'},
+            {paramName: 'B-IP', paramValue: '10.168.15.15'},
+            {paramName: 'C-IP', paramValue: '100.168.150.15'},
+            {paramName: 'D-IP', paramValue: '900.168.150.15'},
+            {paramName: 'hostIP', paramValue: '200.168.150.15'},
+            {paramName: 'hostnameIP', paramValue: '300.168.150.15'},
+            {paramName: 'R-IP', paramValue: '400.168.150.15'},
+            {paramName: 'someIP', paramValue: '500.168.150.15'}
+
+        ];
+        this.templateData = paramData;
+    }
+
+    setTemplateData(data) {
+        this.templateData = data;
+    }
+
+    getTemplateData() {
+        return (this.templateData);
+    }
+
+    setDisplayData(data: any[]) {
+        this.displayData = data.slice(0);
+    }
+
+    getDisplayData() {
+        return this.displayData;
+    }
+
+    setSessionParamData(data) {
+        this.paramData = data;
+    }
+
+    getSessionParamData() {
+        return this.paramData;
+    }
+}
diff --git a/src/app/shared/services/utilityService/utility.service.spec.ts b/src/app/shared/services/utilityService/utility.service.spec.ts
new file mode 100644
index 0000000..c11927a
--- /dev/null
+++ b/src/app/shared/services/utilityService/utility.service.spec.ts
@@ -0,0 +1,64 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+/* tslint:disable:no-unused-variable */
+
+import {inject, TestBed} from '@angular/core/testing';
+import {UtilityService} from './utility.service';
+import {NotificationsService} from 'angular2-notifications';
+
+describe('UtilityService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [UtilityService, NotificationsService]
+        });
+    });
+
+    it('should create a service...', inject([UtilityService], (service: UtilityService) => {
+        expect(service).toBeTruthy();
+    }));
+
+
+    it('should apply slashes for a string...', inject([UtilityService], (service: UtilityService) => {
+        let text = {'vnf-host-ip-address': '135.21.166.36'};
+
+        expect(service.appendSlashes(JSON.stringify(text))).toEqual('{\\"vnf-host-ip-address\\":\\"135.21.166.36\\"}');
+    }));
+
+
+    it('should check for status 401', inject([UtilityService], (service: UtilityService) => {
+        let data = {output: {status: {code: 401}}};
+
+        expect(service.checkResult(data)).toBeFalsy();
+    }));
+
+
+    it('should check for status 400', inject([UtilityService], (service: UtilityService) => {
+        let data = {output: {status: {code: 400}}};
+
+        expect(service.checkResult(data)).toBeTruthy();
+    }));
+
+
+});
diff --git a/src/app/shared/services/utilityService/utility.service.ts b/src/app/shared/services/utilityService/utility.service.ts
new file mode 100644
index 0000000..11fa888
--- /dev/null
+++ b/src/app/shared/services/utilityService/utility.service.ts
@@ -0,0 +1,62 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {Injectable} from '@angular/core';
+import {NotificationsService} from 'angular2-notifications';
+
+@Injectable()
+export class UtilityService {
+
+    private successMessage = 'Retrieved artifact successfully';
+    private failureMessage = 'There is no artifact saved in APPC for the selected action!';
+
+    constructor(private notificationService: NotificationsService) {
+    }
+
+    randomId() {
+        let x = (new Date().getUTCMilliseconds()) * Math.random();
+        return (x + '').substr(4, 12);
+
+
+    }
+
+    appendSlashes(artifactData) {
+        return artifactData.replace(/"/g, '\\"');
+    }
+
+    checkResult(result: any) {
+
+        if (result.output.status.code == '401') {
+            this.notificationService.info('Information', this.failureMessage);
+            return false;
+        }
+        else if (result.output.status.code == '400') {
+            this.notificationService.success('Success', this.successMessage);
+            return true;
+        }
+
+    }
+
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
new file mode 100644
index 0000000..8959587
--- /dev/null
+++ b/src/app/shared/shared.module.ts
@@ -0,0 +1,73 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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.
+
+ECOMP is a trademark and service mark of AT&T Intellectual Property.
+============LICENSE_END============================================
+*/
+
+
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {Collapse} from './directives/collapse.component';
+import {CommonModule} from '@angular/common';
+import {DropDownToggleDirective} from './directives/drop-down-toggle.directive';
+import {Dropdown} from './directives/dropdown';
+import {DropdownNotClosableZone} from './directives/dropdownnotclosablezone';
+import {DropdownOpen} from './directives/dropdownopen';
+import {EmitterService} from './services/emitter.service';
+import {HeaderComponent} from './components/header/header.component';
+import {HelpComponent} from './components/help/help/help.component';
+import {HttpModule} from '@angular/http';
+import {HttpUtilService} from './services/httpUtil/http-util.service';
+import {LogoutComponent} from './components/logout/logout.component';
+import {MappingEditorService} from './services/mapping-editor.service';
+import {NavigationComponent} from './components/navigation/navigation.component';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {NotificationService} from './services/notification.service';
+import {ParamShareService} from './services/paramShare.service';
+import {TidyTableModule} from './modules/tidy-table/tidy-table.module';
+import {UtilityService} from './services/utilityService/utility.service';
+import {VmFilteringPipe} from '../pipes/vm-filtering.pipe';
+import {SimpleNotificationsModule} from 'angular2-notifications';
+import { NgProgressModule } from 'ngx-progressbar';
+import {FormsModule} from '@angular/forms';
+
+@NgModule({
+    imports: [
+        FormsModule,
+        CommonModule, HttpModule, RouterModule, TidyTableModule, NgProgressModule, NgbModule, SimpleNotificationsModule.forRoot()],
+
+    declarations: [VmFilteringPipe,
+
+        HelpComponent,
+        HeaderComponent, NavigationComponent, LogoutComponent, Collapse, Dropdown, DropdownNotClosableZone, DropdownOpen, DropDownToggleDirective
+    ],
+    exports: [VmFilteringPipe, NgProgressModule, NgbModule, HelpComponent, DropDownToggleDirective, HeaderComponent, NavigationComponent, LogoutComponent, TidyTableModule, Collapse, Dropdown, DropdownNotClosableZone, DropdownOpen]
+})
+export class SharedModule {
+
+    static forRoot(): ModuleWithProviders {
+        return {
+            ngModule: SharedModule,
+            providers: [HttpUtilService, EmitterService, NotificationService,
+                UtilityService,
+                ParamShareService, MappingEditorService]
+        };
+    }
+}
\ No newline at end of file