Merge "Added portal-FE-os components"

68 files changed, 2332 insertions, 2992 deletions

diff --git a/portal-FE-os/angular.json b/portal-FE-os/angular.json
index 5bcac9e4..dc135db1 100644
--- a/portal-FE-os/angular.json
+++ b/portal-FE-os/angular.json
@@ -35,12 +35,12 @@
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
-              "./node_modules/hammerjs/hammer.min.js",
- "node_modules/jqtree/tree.jquery.js",
+              "node_modules/hammerjs/hammer.min.js",
+              "node_modules/jqtree/tree.jquery.js",
               "node_modules/systemjs/dist/s.js",
               "node_modules/systemjs/dist/extras/named-register.js",
               "node_modules/systemjs/dist/extras/amd.js",
-			  "src/app/shared/utils/utils.js"
+              "src/app/shared/utils/utils.js"
             ]
           },
           "configurations": {
diff --git a/portal-FE-os/package-lock.json b/portal-FE-os/package-lock.json
index eb438465..1c65798c 100644
--- a/portal-FE-os/package-lock.json
+++ b/portal-FE-os/package-lock.json
@@ -1046,13 +1046,6 @@
       "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=",
       "dev": true
     },
-    "abs-components-bc": {
-      "version": "file:abs-components-bc-1.0.7.tgz",
-      "integrity": "sha512-2Lt/+dTQG8/YMVNcqSCpjy37Ns1WQKRCJ9ihUJzIDTk/7hgOFT7bS5xD7sPPUNZAz0KJfSwj2tCgigLf29sFSQ==",
-      "requires": {
-        "tslib": "^1.7.1"
-      }
-    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -2623,6 +2616,14 @@
         "randomfill": "^1.0.3"
       }
     },
+    "cs-jqtree-contextmenu": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/cs-jqtree-contextmenu/-/cs-jqtree-contextmenu-0.1.0.tgz",
+      "integrity": "sha1-MnoKX9wxcivxFwdQ6HphDcFEOu4=",
+      "requires": {
+        "jqtree": ">=0.16"
+      }
+    },
     "css-parse": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
@@ -5829,6 +5830,14 @@
       "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
       "dev": true
     },
+    "jqtree": {
+      "version": "1.4.12",
+      "resolved": "https://registry.npmjs.org/jqtree/-/jqtree-1.4.12.tgz",
+      "integrity": "sha512-zNdnVFFNWAmPbtVFZaAhIjhFVoYpRF/NWeVGU1THRdefjKhXFwLeVILW1R4Frr/qiGg4TTbXWAxk7V7E+Wu3ZQ==",
+      "requires": {
+        "jquery": ">=1.9"
+      }
+    },
     "jquery": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
@@ -9357,6 +9366,11 @@
       "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
       "dev": true
     },
+    "systemjs": {
+      "version": "6.1.10",
+      "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-6.1.10.tgz",
+      "integrity": "sha512-yd5w1lbZoghSs/SD3TwY8Gmd7yxihYvQPregRc2hDd6FmkL32kll7gwLCE7a/fz5W66HIgzRdg1YbV6L2hXkyA=="
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
diff --git a/portal-FE-os/package.json b/portal-FE-os/package.json
index e432be7b..265cab72 100644
--- a/portal-FE-os/package.json
+++ b/portal-FE-os/package.json
@@ -3,7 +3,7 @@
   "version": "7.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host www.portal.openecomp.org --port 8989 --open",
+    "start": "ng serve --host www.portal.onap.org --port 8989 --open",
     "build": "ng build --prod --aot=false --build-optimizer=false",
     "test": "ng test",
     "lint": "ng lint",
@@ -26,7 +26,6 @@
     "@types/jquery": "^3.3.31",
     "@types/underscore": "^1.9.3",
     "@types/uuid": "^3.4.5",
-    "abs-components-bc": "file:abs-components-bc-1.0.7.tgz",
     "angular-gridster2": "^8.0.0",
     "angular2-uuid": "^1.1.1",
     "classlist.js": "^1.1.20150312",
diff --git a/portal-FE-os/src/app/.gitignore b/portal-FE-os/src/app/.gitignore
index 961a3847..75b6ddab 100644
--- a/portal-FE-os/src/app/.gitignore
+++ b/portal-FE-os/src/app/.gitignore
@@ -1,5 +1,5 @@
 /ng-material-module.ts
-!layout/
+/layout/
 /modals/
 /shared/
 !shared/interceptors/
diff --git a/portal-FE-os/src/app/layout/components/footer/footer.component.html b/portal-FE-os/src/app/layout/components/footer/footer.component.html
deleted file mode 100644
index 3a4d72ab..00000000
--- a/portal-FE-os/src/app/layout/components/footer/footer.component.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-  ============LICENSE_START==========================================
-  ONAP Portal
-  ===================================================================
-  Copyright (C) 2019 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.
- 
-  Unless otherwise specified, all documentation contained herein is licensed
-  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
-  you may not use this documentation except in compliance with the License.
-  You may obtain a copy of the License at
- 
-              https://creativecommons.org/licenses/by/4.0/
- 
-  Unless required by applicable law or agreed to in writing, documentation
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
- 
-  ============LICENSE_END============================================
- 
-  
-  -->
-<footer>
-  <!-- <a class="navbar-brand" href="#">Ecomp Portal</a> -->
-  <div id="footer-text" class="footerText">
-    <p class="copyright-text" style="color:white">
-        {{ecompTitle}} Version {{buildVersion}}
-    </p>
-  </div>
-</footer>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/footer/footer.component.spec.ts b/portal-FE-os/src/app/layout/components/footer/footer.component.spec.ts
deleted file mode 100644
index ea3a67c2..00000000
--- a/portal-FE-os/src/app/layout/components/footer/footer.component.spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2017-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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
- 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FooterComponent } from './footer.component';
-
-describe('FooterComponent', () => {
-  let component: FooterComponent;
-  let fixture: ComponentFixture<FooterComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ FooterComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FooterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/portal-FE-os/src/app/layout/components/global-search/global-search.component.html b/portal-FE-os/src/app/layout/components/global-search/global-search.component.html
deleted file mode 100644
index ff5473be..00000000
--- a/portal-FE-os/src/app/layout/components/global-search/global-search.component.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!--
-  ============LICENSE_START==========================================
-  ONAP Portal
-  ===================================================================
-  Copyright (C) 2019 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.
- 
-  Unless otherwise specified, all documentation contained herein is licensed
-  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
-  you may not use this documentation except in compliance with the License.
-  You may obtain a copy of the License at
- 
-              https://creativecommons.org/licenses/by/4.0/
- 
-  Unless required by applicable law or agreed to in writing, documentation
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
- 
-  ============LICENSE_END============================================
- 
-  
-  -->
-<div class="search-div" (clickOutside)="clickOutSide($event)">
-  <div class="notification-div">
-    <div class="form-field form-field__small">
-      <div class="search-input">
-        <input id="mainSearchText" style="border-radius:0.25rem;" type="text" (keypress)="searchDialogToggle($event)"
-          placeholder="What are you looking for?" class="form-field form-field__small" />
-      </div>
-      <span class="icon-search-span"> <i class="icon-search">&nbsp;</i>
-      </span>
-
-    </div>
-  </div>  
-</div>
-<div *ngIf="searchResDialog" class="search-res-dialog">
-  <div id="reg-header-snippet">
-
-    <div tabindex="0"  id="reg-searchPop-id">
-      <div id="contentVertical" att-scrollbar="y">
-        <ul class="searchUl">
-          <li><a class="icon-tiles"></a> <a id="search-app-title" (click)="goToUrl(item)"
-              class="searchLiHeader">Applications:</a>
-          </li>
-          <li *ngFor="let item of items?.application"><a
-              id="search-app-item-{{item.name.split(' ').join('-')}}-{{$index}}" (click)="goToUrl(item)"
-              class="searchLiItems">{{item.name}}</a>
-          </li>
-        </ul>
-
-        <ul class="searchUl">
-          <li><a class="icon-tiles-small"></a> <a id="seach-functional-menu-title" (click)="goToUrl(item)"
-              class="searchLiHeader">Functional Menus:</a></li>
-          <li *ngFor="let item of items?.menu"><a
-              id="search-functional-menu-item-{{item.name.split(' ').join('-')}}-{{$index}}" (click)="goToUrl(item)"
-              class="searchLiItems">{{item.name}}</a>
-          </li>
-        </ul>
-
-
-        <ul class="searchUl">
-          <li><a class="full-linear-icon-person search-li"></a> <a id="search-user-title" (click)="goToUrl(item)"
-              class="searchLiHeader">Users:</a></li>
-          <li *ngFor="let item of items?.user"><a id="search-user-item-{{item.name.split(' ').join('-')}}-{{$index}}"
-              href="qto://talk/{{item.target}}" class="searchLiItems">{{item.name}}</a>
-
-          </li>
-        </ul>
-
-        <ul class="searchUl">
-          <li><a class="full-linear-icon-person search-li"></a> <a id="search-widgets-title" (click)="goToUrl(item)"
-              class="searchLiHeader">Widgets:</a></li>
-          <li *ngFor="let item of items?.widget"><a
-              id="search-widgets-item-{{item.name.split(' ').join('-')}}-{{$index}}" href="widgetCatalog"
-              class="searchLiHeader">{{item.name}}</a></li>
-        </ul>
-
-        <ul class="searchUl">
-          <li><a class="full-linear-icon-internet search-li"></a> <a id="search-intranet"
-              (click)="goToUrl(item, 'intra')" class="searchLiHeader" style="cursor: pointer;">Click to search
-              Intranet <span class="icon-arrow-right"></span>
-            </a></li>
-        </ul>
-
-        <ul class="searchUl">
-          <li><a class="full-linear-icon-internet search-li"></a> <a id="search-extranet"
-              (click)="goToUrl(item, 'extra')" class="searchLiHeader" style="cursor: pointer;">Click to search
-              Extranet <span class="icon-arrow-right"></span></a></li>
-        </ul>
-
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/global-search/global-search.component.spec.ts b/portal-FE-os/src/app/layout/components/global-search/global-search.component.spec.ts
deleted file mode 100644
index c3771377..00000000
--- a/portal-FE-os/src/app/layout/components/global-search/global-search.component.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GlobalSearchComponent } from './global-search.component';
-
-describe('GlobalSearchComponent', () => {
-  let component: GlobalSearchComponent;
-  let fixture: ComponentFixture<GlobalSearchComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ GlobalSearchComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GlobalSearchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/portal-FE-os/src/app/layout/components/global-search/global-search.component.ts b/portal-FE-os/src/app/layout/components/global-search/global-search.component.ts
deleted file mode 100644
index 4a6fb20b..00000000
--- a/portal-FE-os/src/app/layout/components/global-search/global-search.component.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { GlobalSearchService } from 'src/app/shared/services/global-search/global-search.service';
-import { GlobalSearchItem } from 'src/app/shared/model/global-search-item.model';
-import * as $ from 'jquery';
-import { AddTabFunctionService } from 'src/app/shared/services/tab/add-tab-function.service';
-
-@Component({
-  selector: 'app-global-search',
-  templateUrl: './global-search.component.html',
-  styleUrls: ['./global-search.component.scss']
-})
-export class GlobalSearchComponent implements OnInit {
-  searchResDialog: boolean = false;
-  items: any;
-  constructor(private globalSearchService: GlobalSearchService,private addTabFuntionService: AddTabFunctionService) { }
-
-  ngOnInit() {
-  }
-
-  showHideSearchSnippet() {
-    setTimeout(() => {
-      $('#mainSearchSnippet').click();
-    }, 1000);
-    setTimeout(() => {
-      $('mainSearchText').focus();
-    }, 1000);
-  }
-
-  mainSearchEvent = $('#mainSearchDiv').keyup((event) => {
-    if (event.keyCode == 13) {
-
-      this.getSearchResult(<string><any>$('#mainSearchText').val());
-
-      // opens the popup
-      var popupDomObj = $("[content='searchSnippet.html']");
-      if (popupDomObj.length == 0) {
-        this.showHideSearchSnippet();
-      } else {
-        $('#mainSearchSnippet').click();
-        this.showHideSearchSnippet();
-      }
-
-
-
-    }
-  });
-
-  clickOutSide(event: any) {
-
-    this.searchResDialog = false;
-
-  }
-  searchDialogToggle(event: any) {
-    if (event.keyCode == 13) {
-      this.searchResDialog = true;
-      this.getSearchResult(<string><any>$('#mainSearchText').val());
-    }
-  }
-
-  getSearchResult(searchString: string) {
-    //console.log("getSearch Result");
-    this.globalSearchService.getSearchResults(searchString).subscribe(data => {
-      //console.log("Response data" + data);
-      this.items = data.response;
-      //console.log("search result data" + JSON.stringify(data));
-
-    }, error => {
-      console.log('getSearchResult Error Object' + error);
-    });
-  };
-  goToUrl(item: any){
-    //console.log('check goto');
-    var a = {'test1':'value1','test2':'value3','test3':'value2'};
-    this.addTabFuntionService.filter(a);
-  }
-
-}
diff --git a/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.html b/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.html
deleted file mode 100644
index b1d4d835..00000000
--- a/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!--
-  ============LICENSE_START==========================================
-  ONAP Portal
-  ===================================================================
-  Copyright (C) 2019 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.
- 
-  Unless otherwise specified, all documentation contained herein is licensed
-  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
-  you may not use this documentation except in compliance with the License.
-  You may obtain a copy of the License at
- 
-              https://creativecommons.org/licenses/by/4.0/
- 
-  Unless required by applicable law or agreed to in writing, documentation
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
- 
-  ============LICENSE_END============================================
- 
-  
-  -->
-<div id="container" style="width: 100%;" (clickOutside)="clickOutSide($event)">
-  <!-- First Level menu -->
-  <div id="megaMenu-{{item.text.split(' ').join('-')}}"
-    *ngFor="let item of megaMenuDataObject;let megaMenuIndex = index" (mousedown)="loadFirstLevel(megaMenuIndex)"
-    role="presentation" class="header-menu-item-div"><a href="javascript:void(0);" id="parentmenu-tabs" role="menuitem"
-      class="header-menu-item-link">{{item.text}}<b class="caret"></b><span class="sr-only"></span></a>
-
-    <div class="header-secondlevel-menu" *ngIf="item.active_yn=='Y' && hideMenus[megaMenuIndex]">
-      <ul class="header-secondary" role="menu">
-        <!-- Second Level menu -->
-        <li class="header-menu-item-li" id="subItem-{{i.text.split(' ').join('-')}}"
-          *ngFor="let i of item.children;let secondLevelIndex = index"
-          (mousemove)="hideThirdLevelMenu(megaMenuIndex,secondLevelIndex)" role="presentation">
-          <!-- Favorites -->
-
-          <div *ngIf="i.text=='Favorites'">
-            <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>
-            <i id="favorite-star" data-size="large" class="icon-star favorites-icon-active"></i>
-            <div class="header-columns-div" *ngIf="hideSecondLevelMenus[megaMenuIndex][secondLevelIndex]">
-              <div class="header-tertiary-wrapper" id="header-favorites">
-                <ul class="header-tertiary" role="menu">
-                  <li role="presentation">
-                    <div *ngFor="let subItem of (favoritesMenuItems ? favoritesMenuItems : [])"
-                      id="favoritesMenuItems-{{subItem.text.split(' ').join('-')}}">
-                      <div class="fav-links">
-                        <i id="favorite-selector-favorites-list" class="icon-star favorites-icon-active"
-                          (click)="removeAsFavoriteItem($event, subItem.menuId)"
-                          (mousedown)="removeAsFavoriteItem($event, subItem.menuId)">
-                        </i> <a id="favorites-list" (click)="goToUrl(subItem)">{{subItem.text}}</a>
-                      </div>
-                    </div>
-
-                    <div id="favorites-empty" class="favorites-window-empty" *ngIf="emptyFavorites">
-                      <p id="p-no-favs-icon" class="no-fav-icon">
-                        <span class="icon-star"></span>
-                      </p>
-                      <p id="p-no-favs" class="largeText">{{'No
-                              Favorites'}}</p>
-                      <p id="p-no-favs-desc" class="normal">{{'Add your
-                              favorite items for quick access'}}.</p>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div> <!-- Support or Help -->
-          <div *ngIf="item.text=='Support' || item.text=='Help'" id="second-level-menus-help">
-            <a id="second-level-menus-{{i.text.split(' ').join('-')}}-help" href="javascript:void(0);"
-              (click)="goToUrl(i);auditLog(i,'Support')" class="menu__item" role="menuitem">{{i.text}}</a>
-          </div> <!-- Others -->
-          <div *ngIf="i.text!='Favorites' && (item.text!='Support' && item.text!='Help')">
-            <a href="javascript:void(0);" class="menu__item" role="menuitem">{{i.text}}</a>
-            <div class="header-thirdlevel-menu" *ngIf="hideSecondLevelMenus[megaMenuIndex][secondLevelIndex]">
-              <ul class="third-level-menu" role="menu" id="third-level-menus">
-                <!-- Third Level menu -->
-
-                <li *ngFor="let link of i.children" role="presentation"><i id="level3-star-inactive-{{link.menuId}}"
-                    class="icon-star favorites-icon-inactive" data-size="large"
-                    (mousedown)="setAsFavoriteItem($event, link.menuId)"
-                    *ngIf="link.url.length > 1 && isUrlFavorite(link.menuId)==false">
-                  </i> <i id="level3-star-active-{{link.menuId}}"
-                    *ngIf="link.url.length > 1 && isUrlFavorite(link.menuId)" class="icon-star favorites-icon-active"
-                    data-size="large" (mousedown)="removeAsFavoriteItem($event, link.menuId)">
-                  </i> <a class="third-level-title"
-                    (mousedown)="goToUrl(link);auditLog(link,'application')">{{link.text}}</a>
-                  <!-- Fourth Level menu -->
-                  <div *ngFor="let title of link.children">
-                    <i id="level4-star-inactive-{{title.menuId}}" class="icon-star favorites-icon-inactive"
-                      (mousedown)="setAsFavoriteItem($event, title.menuId)"
-                      *ngIf="title.url.length > 1 && isUrlFavorite(title.menuId)==false">
-                    </i> <i id="level4-star-active-{{title.menuId}}" class="icon-star favorites-icon-active"
-                      (mousedown)="removeAsFavoriteItem($event, title.menuId)"
-                      *ngIf="title.url.length > 1 && isUrlFavorite(title.menuId)">
-                    </i> <a href="javascript:void(0);" class="header-tertiaryitem"
-                      [ngClass]="{'disabled': title.disabled}" role="menuitem"
-                      (mousedown)="goToUrl(title);auditLog(title,'functional')">{{title.text}}</a>
-                  </div>
-                </li>
-
-
-
-
-              </ul>
-            </div>
-          </div>
-
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.scss b/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.scss
deleted file mode 100644
index d69b8580..00000000
--- a/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
- .header-menu-item-div
- {
-     float: left; 
-     margin-right: 5%;
- 
- }
- .header-menu-item-li
- {
-     float: left; 
-     margin-right: 2%;
-     
- 
- }
- .header-menu-item-link
- {
-     font-family:"Open Sans", Arial;
-     font-size:16px;
-     color:#999;
-     text-decoration:none;
-     
- }
- #parentmenu-tabs:hover {
-     color: #fff;
- }
- 
- 
- 
- 
- .third-level-menu{
- column-count: 4;
-     line-height: 12px;
-     overflow-x: hidden;
-     overflow-y: hidden;
-     column-gap: 13px;
-     column-rule: 1px outset #d2d2d2;
-     margin-left:20px;
- }
- 
- 
- 
- .third-level-menu a{
-  color:black;
- }
- 
- .third-level-menu li a {
-     color: #333;
-     display: inline-flex;
-     padding: 7px 15px;
-     font-family:"Omnes-ECOMP-W02", Arial;
-     margin-top:5px;
-   margin-bottom:5px;
- }
- 
- .third-level-menu li{
-     width:100%;
-     border-bottom: 1px solid #d2d2d2;
- }
- 
- 
- .b2b-header-tabs .header-secondary .header-subitem a.menu__item{
-   font-size:16px;
- }
- 
- .third-level-title{
-   font-size:15px;
-   font-weight: 700;
- }
- .header-secondlevel-menu 
-   {
-     background-color: #fff;
-     position: fixed;
-     right:1%;
-     width: -webkit-fill-available;
-     
-   }
- 
-   .header-thirdlevel-menu 
-   {
-     background-color: #fff;
-     position: fixed;
-     left:0;
-     height: 70%;    
-     width: 100%;
-   }
-   
-   a.menu__item{
-    font-size:16px;
-    font-family:"Open Sans", Arial;
-    color:#333;
-  }
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.ts b/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.ts
deleted file mode 100644
index eb8f747a..00000000
--- a/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-import * as _ from 'underscore';
-import { Component, OnInit } from '@angular/core';
-import { MenusService } from 'src/app/shared/services/menus/menus.service';
-import { AddTabFunctionService } from 'src/app/shared/services/tab/add-tab-function.service';
-import { Router } from '@angular/router';
-
-@Component({
-  selector: 'app-header-menu',
-  templateUrl: './header-menu.component.html',
-  styleUrls: ['./header-menu.component.scss']
-})
-export class HeaderMenuComponent implements OnInit {
-  hideMenus: boolean[] = [];
-  hideSecondLevelMenus: boolean[][] = [];
-  hideThirdLevelMenus: boolean[] = [];
-  megaMenuDataObject: any[];
-  favoritesMenuItems: any[];
-  favoritesWindow: boolean;
-  showFavorites: boolean;
-  emptyFavorites: boolean;
-  favoriteItemsCount: number;
-
-  constructor(public router: Router, private menusService: MenusService, private addTabFuntionService: AddTabFunctionService) { }
-
-  ngOnInit() {
-    //this.hideMenus[0] = false;
-    this.getFunctionalMenuForUser();
-
-  }
-
-  unflatten(array: any, parent?: any, tree?: any) {
-    tree = typeof tree !== 'undefined' ? tree : [];
-    parent = typeof parent !== 'undefined' ? parent : { menuId: null };
-    var children = _.filter(array, function (child: any) {
-      return child.parentMenuId == parent.menuId;
-    });
-    if (!_.isEmpty(children)) {
-      if (parent.menuId === null) {
-        tree = children;
-      } else {
-        parent['children'] = children
-      }
-      _.each(children, function (child: any) {
-        this.unflatten(array, child)
-      }, this);
-    }
-
-    return tree;
-  }
-  getFunctionalMenuForUser() {
-    this.menusService.getFunctionalMenuForUser().subscribe((jsonHeaderMenu: any) => {
-      this.megaMenuDataObject = this.unflatten(jsonHeaderMenu);
-      // for (let entry of this.megaMenuDataObject) {
-      //   console.log('First level '+entry.text);
-      //   for (let secondLevel of entry.children)
-      //   {
-      //     if(secondLevel)
-      //   {
-      //     console.log('Second level '+secondLevel.text);
-      //     for (let thirdLevel of secondLevel.children)
-      //   {
-      //     console.log('Third level '+thirdLevel.text);
-      //   }
-      //   }
-
-      //   }
-
-      // }
-
-
-    }, (err) => {
-      console.log('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err);
-    });
-
-  }
-  getFavoriteItems() {
-    this.menusService.getFavoriteItems().toPromise().then((jsonFavourites: any) => {
-      this.favoritesMenuItems = jsonFavourites;
-      if (this.favoritesMenuItems) {
-        this.favoriteItemsCount = this.favoritesMenuItems.length;
-      }
-    }, (err) => {
-      console.log('HeaderCtrl::getFavoriteItems: HeaderCtrl json returned: ' + err);
-    });
-  }
-  loadFirstLevel(index: any) {
-    this.hideMenus = [];
-    this.hideSecondLevelMenus = [];
-    for (let firstLevelIndex = 0; firstLevelIndex < this.megaMenuDataObject.length; firstLevelIndex++) {
-      this.hideMenus.push(false);
-      this.hideSecondLevelMenus.push(new Array(this.megaMenuDataObject[firstLevelIndex].length).fill(false));
-    }
-    this.hideMenus[index] = true;
-    if (!this.favoritesMenuItems) {
-      this.getFavoriteItems();
-    }
-
-  }
-  isUrlFavorite(menuId: any) {
-    if (this.favoritesMenuItems) {
-      var jsonMenu = JSON.stringify(this.favoritesMenuItems);
-      var isMenuFavorite = jsonMenu.indexOf('menuId\":' + menuId);
-      if (isMenuFavorite == -1) {
-        return false;
-      } else {
-        return true;
-      }
-    }
-    else {
-      return false;
-    }
-  }
-  submenuLevelAction(index: any, column: any) {
-    //console.log('index and column' + index + column);
-    if (index == 'Favorites' && this.favoriteItemsCount != 0) {
-      this.favoritesWindow = true;
-      this.showFavorites = true;
-      this.emptyFavorites = false;
-    }
-    if (index == 'Favorites' && this.favoriteItemsCount == 0) {
-      this.favoritesWindow = true;
-      this.showFavorites = false;
-      this.emptyFavorites = true;
-    }
-    if (index != 'Favorites') {
-      this.favoritesWindow = false;
-      this.showFavorites = false;
-      this.emptyFavorites = false;
-    }
-  }
-  hideFavoritesWindow() {
-    this.showFavorites = false;
-    this.emptyFavorites = false;
-  }
-  removeAsFavoriteItem(event: any, menuId: any) {
-    this.menusService.removeFavoriteItem(menuId).subscribe(() => {
-      //angular.element('#' + event.target.id).css('color', '#666666');
-      this.getFavoriteItems();
-    }, (err) => {
-      console.error('HeaderCtrl::removeAsFavoriteItem: API removeFavoriteItem error: ' + err);
-    });
-  }
-  hideThirdLevelMenu(firstLevelIndex: any, secondLevelIndex: any) {
-    this.hideSecondLevelMenus = [];
-    for (let firstLevelIndex = 0; firstLevelIndex < this.megaMenuDataObject.length; firstLevelIndex++) {
-      this.hideSecondLevelMenus.push(new Array(this.megaMenuDataObject[firstLevelIndex].length).fill(false));
-    }
-    this.hideSecondLevelMenus[firstLevelIndex][secondLevelIndex] = true;
-  }
-
-  clickOutSide(event: any) {
-    this.hideMenus = [];
-    this.hideSecondLevelMenus = [];
-    for (let firstLevelIndex = 0; firstLevelIndex < this.megaMenuDataObject.length; firstLevelIndex++) {
-      this.hideMenus.push(false);
-      this.hideSecondLevelMenus.push(new Array(this.megaMenuDataObject[firstLevelIndex].length).fill(false));
-    }
-
-  }
-  setAsFavoriteItem(event: any, menuId: any) {
-
-  }
-  goToUrl(item: any) {
-    //console.log('Get into URL function' + item.url);
-    let url = item.url;
-    let restrictedApp = item.restrictedApp;
-    if (!url) {
-      console.log('HeaderCtrl::goToUrl: No url found for this application, doing nothing..');
-      return;
-    }
-    if (restrictedApp) {
-      window.open(url, '_blank');
-    } else {
-      if (item.url == "getAccess" || item.url == "contactUs") {
-
-        this.router.navigate(['/' + item.url]);
-
-      } else {
-        var tabContent = {
-          id: new Date(),
-          title: item.text,
-          url: item.url,
-          appId: item.appid
-        };
-        this.addTabFuntionService.filter(tabContent);
-      }
-    }
-
-  }
-  auditLog(link: any, action: any) {
-
-  }
-
-}
diff --git a/portal-FE-os/src/app/layout/components/header/header.component.html b/portal-FE-os/src/app/layout/components/header/header.component.html
deleted file mode 100644
index d8c938d7..00000000
--- a/portal-FE-os/src/app/layout/components/header/header.component.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<!--
-  ============LICENSE_START==========================================
-  ONAP Portal
-  ===================================================================
-  Copyright (C) 2019 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.
- 
-  Unless otherwise specified, all documentation contained herein is licensed
-  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
-  you may not use this documentation except in compliance with the License.
-  You may obtain a copy of the License at
- 
-              https://creativecommons.org/licenses/by/4.0/
- 
-  Unless required by applicable law or agreed to in writing, documentation
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
- 
-  ============LICENSE_END============================================
- 
-  
-  -->
-
-<div style="bottom: tabBottom; display: flex; height: 100%; overflow: hidden">
-    <nav class="navbar navbar-expand-lg fixed-top">
-        <div class="header-menu-display">
-            <app-header-menu></app-header-menu>
-        </div>
-        <button class="navbar-toggler" type="button" (click)="toggleSidebar()">
-            <i class="icon ion-md-menu" style="color:white;"></i>
-        </button>
-        <div class="collapse navbar-collapse">
-            <ul class="navbar-nav ml-auto">
-                <app-global-search></app-global-search>
-                <li class="nav-item dropdown" ngbDropdown>
-                    <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
-                        <i class="icon ion-md-bulb"></i> <b class="caret"></b><span class="sr-only"></span>
-                    </a>
-                    <div class="custom-dropdown-item" ngbDropdownMenu>
-
-                <li class="dropdown-divider"></li>
-        </div>
-        </li>
-        <li class="nav-item dropdown" ngbDropdown>
-            <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
-                <i class="icon ion-md-flag"></i> <b class="caret"></b><span class="sr-only"></span>
-            </a>
-            <div class="dropdown-menu-right" ngbDropdownMenu>
-                <a style="margin-left: 8%;" id="application-role" [routerLink]="['/recentNotifications']"
-                    href="javascript:void(0);">
-                    {{ 'View All Recent Notifications' }} </a>
-        <li class="dropdown-divider"></li>
-</div>
-</li>
-<li class="nav-item dropdown" ngbDropdown>
-    <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
-        <i class="icon ion-md-person"></i> {{firstName}} <b class="caret"></b>
-    </a>
-    <div class="dropdown-menu-right" ngbDropdownMenu>
-<li class="dropdown-item" style="font-weight: lighter">
-    {{firstName}}, {{lastName}}
-</li>
-<li class="dropdown-item">
-    <span class="dropdown-item-name"> {{ 'Email'}}: </span>
-    <div>
-        <span class="dropdown-item-value">
-            {{loginSnippetEmail}}
-        </span>
-    </div>
-</li>
-<li class="dropdown-item">
-    <span class="dropdown-item-name"> {{ 'User Id' }}: </span>
-    <div>
-        <span class="dropdown-item-value">
-            {{loginSnippetUserid}}
-        </span>
-    </div>
-</li>
-<li class="dropdown-item">
-    <span class="dropdown-item-name"> {{ 'Last login' }}: </span>
-    <div>
-        <span class="dropdown-item-value">
-            {{lastLogin | date:'medium'}}
-        </span>
-    </div>
-</li>
-<li class="custom-display-item">
-    <a (click)="getUserApplicationRoles()" href="javascript:void(0);"><span><i class="icon ion-md-add-circle-outline"
-                [ngClass]="{true: 'icon ion-md-add-circle-outline', false: 'icon ion-md-remove-circle-outline'}[ !displayUserAppRoles]"></i>
-            {{ 'Applications and Roles' }} </span></a>
-    <span class="ecomp-spinner" *ngIf="isLoading"></span>
-</li> <br>
-<div class="custom-display-item approles" [hidden]="!displayUserAppRoles">
-    <div *ngFor="let ua of userapproles ; index as i">
-        <div class="reg-userApp-value">
-            <span class="dropdown-item-name">{{ua.App}}:</span>
-        </div>
-        <div *ngFor="let role of ua.Roles ; index as i" class="reg-userAppRoles-value">
-            <span *ngIf="role.indexOf('global_')!=-1" id="required" style="color: Red;" visible="false">
-                *</span> <span class="dropdown-item-value">{{role}}</span>
-        </div>
-        <br>
-    </div>
-</div>
-<hr>
-<div id="reg-logout-div" >
-<button type="button" class="btn btn-primary"  (click)="allAppsLogout()">
-    <i class="icon ion-md-log-out"></i> {{ 'Log Out' }} </button></div>
-</div>
-</li>
-</ul>
-</div>
-</nav>
-</div>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/header/header.component.scss b/portal-FE-os/src/app/layout/components/header/header.component.scss
deleted file mode 100644
index c1ef2a34..00000000
--- a/portal-FE-os/src/app/layout/components/header/header.component.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright � 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-$topnav-background-color: #222;
-:host {
-  .navbar {
-    background-color: $topnav-background-color;
-    .navbar-brand {
-      color: #fff;
-    }
-    .nav-item > a {
-      color: #999;
-      &:hover {
-        color: #fff;
-      }
-    }
-  }
-
-  .dropdown-menu-right.dropdown-menu.show{
-    width: 250px;
-  }
-  .dropdown-item-name {
-    font-weight: bold;
-  }
-
-  .dropdown-item-value {
-    font-weight: lighter;
-  }
-
-  .custom-display-item {
-    display: block;
-    width: 100%;
-    padding: 0.25rem 1.5rem;
-    clear: both;
-    font-weight: 400;
-    color: #212529;
-    text-align: inherit;
-    white-space: nowrap;
-    background-color: transparent;
-    border: 0;
-  }
-
-  .custom-display-item.approles {
-    overflow-y: scroll;
-    height: 250px;
-  }
-  .header-menu-display {
-    width: 250px;
-  }
-}
diff --git a/portal-FE-os/src/app/layout/components/header/header.component.ts b/portal-FE-os/src/app/layout/components/header/header.component.ts
deleted file mode 100644
index 5248200a..00000000
--- a/portal-FE-os/src/app/layout/components/header/header.component.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-/*
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright � 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-import { Component, OnInit } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-import { UserProfileService, MenusService } from 'src/app/shared/services';
-import { CookieService } from 'ngx-cookie-service';
-
-@Component({
-    selector: 'app-header',
-    templateUrl: './header.component.html',
-    styleUrls: ['./header.component.scss']
-})
-export class HeaderComponent implements OnInit {
-    public pushRightClass: string;
-    firstName: string;
-    lastName: string;
-    loginSnippetUserid: any;
-    lastLogin: number;
-    loginSnippetEmail: any;
-    userapproles: any[];
-    displayUserAppRoles: any;
-    isLoading: boolean;
-
-    constructor(public router: Router, private userProfileService: UserProfileService, private menusService: MenusService, private cookieService: CookieService) {
-
-        this.router.events.subscribe(val => {
-            if (
-                val instanceof NavigationEnd &&
-                window.innerWidth <= 992 &&
-                this.isToggled()
-            ) {
-                this.toggleSidebar();
-            }
-        });
-    }
-
-    ngOnInit() {
-        this.pushRightClass = 'push-right';
-        this.getUserInformation();
-    }
-
-    getUserInformation() {
-        this.userProfileService.getFunctionalMenuStaticInfo().toPromise().then((res: any) => {
-            if (res == null || res.firstName == null || res.firstName == '' || res.lastName == null || res.lastName == '') {
-                // $log.info('HeaderCtrl: failed to get all required data, trying user profile');
-                this.userProfileService.getUserProfile().toPromise().then((profile: any) => {
-                    this.firstName = profile.firstName;
-                    this.lastName = profile.lastName;
-                }, (err) => {
-                    // $log.error('Header Controller:: getUserProfile() failed: ' + err);
-                });
-            } else {
-                this.firstName = res.firstName;
-                this.lastName = res.lastName;
-                this.loginSnippetEmail = res.email;
-                this.loginSnippetUserid = res.userId;
-                this.lastLogin = Date.parse(res.last_login);
-            }
-            sessionStorage.userId = res.userId;
-            this.menusService.getFunctionalMenuForUser().toPromise().then((jsonHeaderMenu: any) => {
-                // $scope.menuItems = unflatten(jsonHeaderMenu);
-                // $scope.megaMenuDataObject = $scope.menuItems;
-            }, (err) => {
-                // $log.error('HeaderCtrl::GetFunctionalMenuForUser: HeaderCtrl json returned: ' + err);
-            });
-
-        }, (err) => {
-            // $log.error('HeaderCtrl::getFunctionalMenuStaticInfo failed: ' + err);
-        })
-    }
-
-    //     unflatten = function( array, parent, tree ){
-
-    //     tree = typeof tree !== 'undefined' ? tree : [];
-    //     parent = typeof parent !== 'undefined' ? parent : { menuId: null };
-    //     var children = _.filter( array, function(child){ return child.parentMenuId == parent.menuId; });
-
-    //     if( !_.isEmpty( children )  ){
-    //       if( parent.menuId === null ){
-    //         tree = children;
-    //       }else{
-    //         parent['children'] = children
-    //       }
-    //       _.each( children, function( child ){ unflatten( array, child ) } );
-    //     }
-
-    //     return tree;
-    // }
-
-    getUserApplicationRoles() {
-        this.userapproles = [];
-        if (this.displayUserAppRoles) {
-            this.displayUserAppRoles = false;
-        } else {
-            this.displayUserAppRoles = true;
-            this.isLoading = true;
-            this.userProfileService.getUserAppRoles(this.loginSnippetUserid)
-            .subscribe((res: any) => {
-                this.isLoading = false;
-                for (var i = 0; i < res.length; i++) {
-                    var userapprole = {
-                        App: res[i].appName,
-                        Roles: res[i].roleNames,
-                    };
-                    this.userapproles.push(userapprole);
-                }
-            }, (err) => {
-                this.isLoading = false;
-            });
-        }
-    }
-
-    allAppsLogout() {
-        this.firstName="";
-        this.lastName="";
-        this.displayUserAppRoles=false; 	
-        var cookieTabs = this.cookieService.get("visInVisCookieTabs").toString;
-         if(cookieTabs!=null){
-             for(var t in cookieTabs){
-             
-                 var url = cookieTabs[t].content;
-                 if(url != "") {
-                     this.menusService.logout(url);
-                   }
-             }
-         }
-         // wait for individual applications to log out before the portal logout
-         setTimeout(function() {
-             window.location.href = "logout.htm";
-         }, 2000);
-    }
-
-    isToggled(): boolean {
-        const dom: Element = document.querySelector('body');
-        return dom.classList.contains(this.pushRightClass);
-    }
-
-    toggleSidebar() {
-        const dom: any = document.querySelector('body');
-        dom.classList.toggle(this.pushRightClass);
-    }
-
-    onLoggedout() {
-        localStorage.removeItem('isLoggedin');
-    }
-}
diff --git a/portal-FE-os/src/app/layout/components/search-users/search-users.component.html b/portal-FE-os/src/app/layout/components/search-users/search-users.component.html
deleted file mode 100644
index 4c318f9f..00000000
--- a/portal-FE-os/src/app/layout/components/search-users/search-users.component.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--
-  ============LICENSE_START==========================================
-  ONAP Portal
-  ===================================================================
-  Copyright (C) 2019 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.
- 
-  Unless otherwise specified, all documentation contained herein is licensed
-  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
-  you may not use this documentation except in compliance with the License.
-  You may obtain a copy of the License at
- 
-              https://creativecommons.org/licenses/by/4.0/
- 
-  Unless required by applicable law or agreed to in writing, documentation
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
- 
-  ============LICENSE_END============================================
- 
-  
-  -->
-
-<form>
-    {{searchTitle}}
-    <div class="form-row">
-        <div class="col-md-6 my-1">
-            <label for="inputSearch" class="sr-only"></label>
-            <input id="inputSearch" pattern="[a-zA-Z0-9-'\s]{3,}" [(ngModel)]="searchString" (keyup)="passSystemUserInfo($event.srcElement.value)" maxlength="80"
-                required="true" name="searchString" #searchInput auto-focus tabindex="0" autocomplete="off" type="text"
-                class="form-control" value="searchString" placeholder="{{placeHolder}}">
-        </div>
-
-        <div class="col-auto my-1">
-            <button id="button-search-users" *ngIf="!isSystemUser" [disabled]="!searchInput.validity.valid || isLoading " type="submit"
-                class="btn btn-primary mb-2" (click)="searchUsers()"> Search
-            </button>
-        </div>
-    </div>
-</form>
-<span class="ecomp-spinner" *ngIf="isLoading"></span>
-<div class="search-user-container" *ngIf="showUserTable && !isSystemUser">
-    <table mat-table [dataSource]="dataSourceMap">
-        <!-- Search Result Column-->
-        <ng-container matColumnDef="firstName">
-            <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Showing {{searchUsersResults.length}} {{txtResults}} </th>
-            <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
-                {{element.firstName}} {{element.lastName}} <br> {{element.jobTitle}}
-            </td>
-        </ng-container>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-        <tr mat-row (click)="setSelectedUser(row)" id="table-row-{{i}}" [ngClass]="{ 'selected': row === selectedUser }"
-            *matRowDef="let row; columns: displayedColumns; let i = index;"></tr>
-    </table>
-</div>
-<div class="search-user-container" *ngIf="noUserFlag">
-    <p>{{message}} Or <a href="javascript:void(0);" (click)="addNewUser()"><b>Click Here</b></a> to add <b>New User!</b></p>
-</div>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/search-users/search-users.component.ts b/portal-FE-os/src/app/layout/components/search-users/search-users.component.ts
deleted file mode 100644
index 10e4e041..00000000
--- a/portal-FE-os/src/app/layout/components/search-users/search-users.component.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
-import { UsersService } from 'src/app/shared/services';
-import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
-import { PortalAdmin } from 'src/app/shared/model/PortalAdmin';
-
-@Component({
-  selector: 'app-search-users',
-  templateUrl: './search-users.component.html',
-  styleUrls: ['./search-users.component.scss']
-})
-export class SearchUsersComponent implements OnInit {
-
-  constructor(private userService: UsersService, private ngModal: NgbModal) { }
-  @Input() searchTitle: string;
-  @Input() placeHolder: string;
-  @Input() isSystemUser: boolean;
-  @ViewChild(MatSort) sort: MatSort;
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @Output() passBackSelectedUser: EventEmitter<any> = new EventEmitter();
-  @Output() userNotFoundFlag = new EventEmitter<boolean>();
-  searchString: string;
-  txtResults = 'result';
-  searchUsersResults: any;
-  selected: any;
-  isLoading: boolean;
-  showUserTable: boolean;
-  selectedUser: any;
-  displayedColumns: string[] = ['firstName'];
-  dataSourceMap = new MatTableDataSource(this.searchUsersResults);
-  submitted = false;
-  message = " No users found with your query. Please change your search and try again.";
-
-  ngOnInit() {
-    this.searchString = '';
-    this.showUserTable = false;
-    this.isSystemUser = false;
-  }
-
-  passSystemUserInfo(systemUser: string) {
-    if (this.isSystemUser)
-      this.passBackSelectedUser.emit(systemUser);
-  }
-
-  noUserFlag: boolean = false;
-  searchUsers() {
-    if (!this.isSystemUser) {
-      this.isLoading = true;
-      this.showUserTable = false;
-      this.passBackSelectedUser.emit(this.selectedUser = '');
-      this.userService.searchUsers(this.searchString).subscribe((_data: PortalAdmin) => {
-        this.searchUsersResults = _data;
-        if (this.searchUsersResults == null || this.searchUsersResults.length == 0) {
-          this.noUserFlag = true;
-          this.isLoading = false;
-        } else {
-          this.noUserFlag = false;
-          this.showUserTable = true;
-          this.isLoading = false;
-          this.dataSourceMap = new MatTableDataSource(this.searchUsersResults);
-          this.txtResults = (this.searchUsersResults && this.searchUsersResults.length > 1) ? 'results' : 'result';
-        }
-      });
-    }
-  }
-
-  setSelectedUser(user: PortalAdmin) {
-    this.selectedUser = user;
-    this.passBackSelectedUser.emit(this.selectedUser);
-  }
-
-  addNewUser() {
-    console.log("Emit the value to parent");
-    this.userNotFoundFlag.emit(true);
-  }
-
-}
diff --git a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.html b/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.html
deleted file mode 100644
index e2f4f3a0..00000000
--- a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!--
-  ============LICENSE_START==========================================
-  ONAP Portal
-  ===================================================================
-  Copyright (C) 2019 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.
- 
-  Unless otherwise specified, all documentation contained herein is licensed
-  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
-  you may not use this documentation except in compliance with the License.
-  You may obtain a copy of the License at
- 
-              https://creativecommons.org/licenses/by/4.0/
- 
-  Unless required by applicable law or agreed to in writing, documentation
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
- 
-  ============LICENSE_END============================================
- 
-  
-  -->
-  
-<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive, collapsed: collapsed}">
-    <div class="toggle-button" [ngClass]="{collapsed: collapsed}" (click)="toggleCollapsed()">
-        <i class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i> <i
-            class="icon ion-md-arrow-{{collapsed?'dropright':'dropleft'}}" style="float:right"></i>&nbsp;
-    </div>
-    <div class="list-group" *ngFor="let menu of menuData ; index as item">
-        <a href="{{menu.href}}" *ngIf="!showOnlyParentMenu" [routerLinkActive]="['router-link-active']"
-            class="list-group-item">
-            <i class="icon ion-md-{{menu.imageSrc}}"></i>&nbsp;
-            <span>{{menu.name}}</span>
-        </a>
-        <a [routerLink]="menu.state" *ngIf="showOnlyParentMenu" [routerLinkActive]="['router-link-active']"
-            class="list-group-item">
-            <i class="icon ion-md-{{menu.imageSrc}}"></i>&nbsp;
-            <span>{{menu.name}}</span>
-        </a>
-        <div class="nested-menu" *ngIf="menu.menuItems.length > 0">
-            <a href="javascript:void(0)" class="list-group-item" (click)="addExpandClass(menu.name)">
-                <i class="fa fa-plus"></i>&nbsp;
-                <span>{{menu.name}}</span>
-            </a>
-            <li class="nested" [class.expand]="showMenu === menu.name">
-                <ul class="submenu">
-                    <li *ngFor="let menuItems of menu.menuItems">
-                        <a href="{{menuItems.href}}">
-                            <i class="fa fa-monument"></i>&nbsp;
-                            <span>{{ menuItems.name }}</span>
-                        </a>
-                    </li>
-                </ul>
-            </li>
-        </div>
-    </div>
-</nav>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss b/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss
deleted file mode 100644
index fd114bd1..00000000
--- a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-/*
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright � 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
-$topnav-background-color: #fff;
-.sidebar {
-    border-radius: 0;
-    position: relative;
-    z-index: 1000;
-    //top: 56px;
-    left: 270px;
-    width: 270px;
-    margin-left: -270px;
-    margin-bottom: 48px;
-    border: none;
-    border-radius: 0;
-    overflow-y: auto;
-    background-color: $topnav-background-color;
-    bottom: 0;
-    overflow-x: hidden;
-    padding-bottom: 40px;
-    white-space: nowrap;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -ms-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-    .list-group {
-        a.list-group-item {
-            background: $topnav-background-color;
-            border: 0;
-            border-top: 1px solid #999;
-            border-radius: 0;
-            color: #0568ae;
-            text-decoration: none;
-            .icon {
-                margin-right: 10px;
-                color: #000;
-            }
-        }
-        a:hover {
-            background: darken($topnav-background-color, 2%);
-            color: #000;
-        }
-        a.router-link-active {
-            background: darken($topnav-background-color, 5%);
-            color: #000;
-        }
-        .header-fields {
-            padding-top: 10px;
-
-            > .list-group-item:first-child {
-                border-top: 1px solid rgba(255, 255, 255, 0.2);
-            }
-        }
-    }
-    .sidebar-dropdown {
-        *:focus {
-            border-radius: none;
-            border: none;
-        }
-        .panel-title {
-            font-size: 1rem;
-            height: 50px;
-            margin-bottom: 0;
-            a {
-                color: #999;
-                text-decoration: none;
-                font-weight: 400;
-                background: $topnav-background-color;
-                span {
-                    position: relative;
-                    display: block;
-                    padding: 0.75rem 1.5rem;
-                    padding-top: 1rem;
-                }
-            }
-            a:hover,
-            a:focus {
-                color: #fff;
-                outline: none;
-                outline-offset: -2px;
-            }
-        }
-        .panel-title:hover {
-            background: darken($topnav-background-color, 5%);
-        }
-        .panel-collapse {
-            border-radious: 0;
-            border: none;
-            .panel-body {
-                .list-group-item {
-                    border-radius: 0;
-                    background-color: $topnav-background-color;
-                    border: 0 solid transparent;
-                    a {
-                        color: #999;
-                    }
-                    a:hover {
-                        color: #fff;
-                    }
-                }
-                .list-group-item:hover {
-                    background: darken($topnav-background-color, 5%);
-                }
-            }
-        }
-    }
-}
-
-.nested-menu {
-    .list-group-item {
-        cursor: pointer;
-    }
-    .nested {
-        list-style-type: none;
-    }
-    ul.submenu {
-        display: none;
-        height: 0;
-    }
-    & .expand {
-        ul.submenu {
-            display: block;
-            list-style-type: none;
-            height: auto;
-            li {
-                a {
-                    color: #0568ae;
-                    padding: 10px;
-                    display: block;
-                }
-            }
-        }
-    }
-}
-@media screen and (max-width: 992px) {
-    .sidebar {
-        top: 54px;
-        left: 0px;
-    }
-}
-@media print {
-    .sidebar {
-        display: none !important;
-    }
-}
-@media (min-width: 992px) {
-    .header-fields {
-        display: none;
-    }
-}
-
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 0px rgba(255, 255, 255, 1);
-    border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 1);
-}
-
-.toggle-button {
-    width: 270px;
-    cursor: pointer;
-    padding: 12px;
-    bottom: 0;
-    color: #0568ae;
-    background: #fff;
-    i {
-        font-size: 23px;
-    }
-    &:hover {
-        background: darken($topnav-background-color, 2%);
-        color: #000;
-    }
-    border-top: 1px solid #999;
-    -webkit-transition: all 0.2s ease-in-out;
-    -moz-transition: all 0.2s ease-in-out;
-    -ms-transition: all 0.2s ease-in-out;
-    -o-transition: all 0.2s ease-in-out;
-    transition: all 0.2s ease-in-out;
-}
-
-.collapsed {
-    width: 60px;
-    span {
-        display: none;
-    }
-}
diff --git a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.spec.ts b/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.spec.ts
deleted file mode 100644
index 92caeb42..00000000
--- a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SidebarComponent } from './sidebar.component';
-
-describe('SidebarComponent', () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SidebarComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SidebarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.ts b/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.ts
deleted file mode 100644
index d56f4432..00000000
--- a/portal-FE-os/src/app/layout/components/sidebar/sidebar.component.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-/*
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright © 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-import { Component, Output, EventEmitter, OnInit, Input } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-import { SidebarService } from '../../../shared/services/index'
-
-@Component({
-    selector: 'app-sidebar',
-    templateUrl: './sidebar.component.html',
-    styleUrls: ['./sidebar.component.scss']
-})
-export class SidebarComponent implements OnInit {
-    @Input() labelName: string;
-    isActive: boolean;
-    collapsed: boolean;
-    showMenu: string;
-    pushRightClass: string;
-    result: any;
-    showOnlyParentMenu: boolean;
-    leftParentData: any;
-    leftChildData: any;
-    menuData: Array<object> = [];
-    page: any;
-
-    @Output() collapsedEvent = new EventEmitter<boolean>();
-
-    constructor(public router: Router, public sidebarService: SidebarService) {
-        this.router.events.subscribe(val => {
-            if (
-                val instanceof NavigationEnd &&
-                window.innerWidth <= 992 &&
-                this.isToggled()
-            ) {
-                this.toggleSidebar();
-            }
-        });
-    }
-
-    ngOnInit() {
-        this.isActive = false;
-        this.collapsed = false;
-        this.showMenu = '';
-        this.pushRightClass = 'push-right';
-        this.sidebarService.getLeftMenu()
-            .subscribe(data => {
-                this.result = data;
-                if (this.result.data && this.result.data2) {
-                    this.leftParentData = JSON.parse(this.result.data);
-                    this.leftChildData = JSON.parse(this.result.data2);
-                } else {
-                    this.labelName = this.result.label;
-                    this.leftParentData = this.result.navItems;
-                    this.showOnlyParentMenu = true;
-                }
-
-                for (var i = 0; i < this.leftParentData.length; i++) {
-                    var parentItem = {
-                        name: null,
-                        imageSrc: null,
-                        href: null,
-                        menuItems: [],
-                        state: null
-                    }
-                    if (this.showOnlyParentMenu) {
-                        parentItem.name = this.leftParentData[i].name;
-                        parentItem.imageSrc = this.leftParentData[i].imageSrc;
-                        parentItem.state = '/'+this.leftParentData[i].state;
-                    } else {
-                        parentItem.name = this.leftParentData[i].label;
-                        parentItem.imageSrc = this.leftParentData[i].imageSrc;
-                    }
-                    // Add link to items with no subitems
-                    if (!this.showOnlyParentMenu) {
-                        if (this.leftChildData[i].length == 0)
-                            parentItem.href = this.leftParentData[i].action;
-
-                        for (var j = 0; j < this.leftChildData[i].length; j++) {
-
-                            var childItem = {
-                                name: null,
-                                href: null
-                            };
-                            if (this.leftChildData[i][j].label != null && this.leftChildData[i][j].label.length > 0) {
-
-                                childItem.name = this.leftChildData[i][j].label;
-                                childItem.href = this.leftChildData[i][j].action;
-                                parentItem.menuItems.push(childItem);
-                            }
-                        }
-                    }
-                    this.menuData.push(parentItem);
-                }
-
-            });
-
-    }
-    eventCalled() {
-        this.isActive = !this.isActive;
-    }
-
-    addExpandClass(element: any) {
-        if (element === this.showMenu) {
-            this.showMenu = '0';
-        } else {
-            this.showMenu = element;
-        }
-    }
-
-    toggleCollapsed() {
-        this.collapsed = !this.collapsed;
-        this.collapsedEvent.emit(this.collapsed);
-    }
-
-    isToggled(): boolean {
-        const dom: Element = document.querySelector('body');
-        return dom.classList.contains(this.pushRightClass);
-    }
-
-    toggleSidebar() {
-        const dom: any = document.querySelector('body');
-        dom.classList.toggle(this.pushRightClass);
-    }
-}
diff --git a/portal-FE-os/src/app/layout/components/tabbar/tab.ts b/portal-FE-os/src/app/layout/components/tabbar/tab.ts
deleted file mode 100644
index 0b941c6c..00000000
--- a/portal-FE-os/src/app/layout/components/tabbar/tab.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { SafeUrl } from '@angular/platform-browser';
-
-export class Tab {
-  label: string;
-  url: SafeUrl;
-  active: boolean;
-
-  constructor(label: string) {
-      this.label = label;
-  }
-
-}
diff --git a/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.html b/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.html
deleted file mode 100644
index 4a704da9..00000000
--- a/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--
-  ============LICENSE_START==========================================
-  ONAP Portal
-  ===================================================================
-  Copyright (C) 2017-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.
-
-  Unless otherwise specified, all documentation contained herein is licensed
-  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
-  you may not use this documentation except in compliance with the License.
-  You may obtain a copy of the License at
-
-              https://creativecommons.org/licenses/by/4.0/
-
-  Unless required by applicable law or agreed to in writing, documentation
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
-  ============LICENSE_END============================================
-
-  -->
-
-  <div style="display: flex; flex-direction:column">
-    <div>
-      <mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
-        (selectedTabChange)="tabChanged($event)">
-        <mat-tab [label]="mainTab">
-          <mat-grid-list cols="5">
-            <mat-grid-tile [colspan]="1" [rowspan]="3">
-              <app-sidebar (collapsedEvent)="receiveCollapsed($event)"></app-sidebar>
-              <app-userbar></app-userbar>
-            </mat-grid-tile>
-            <mat-grid-tile [colspan]="4" style="height: calc(100vh - 24px);overflow-y: scroll">
-              <div class="container">
-                <router-outlet></router-outlet>
-              </div>
-            </mat-grid-tile>
-          </mat-grid-list>
-  
-        </mat-tab>
-  
-        <mat-tab *ngFor="let tab of tabs; let index = index">
-          <ng-template mat-tab-label>
-            {{tab.label | elipsis: 13}} &nbsp;
-            <i class="icon ion-md-close-circle" (click)="removeTab(index)"></i>
-          </ng-template>
-  
-  
-        </mat-tab>
-  
-      </mat-tab-group>
-      <mat-grid-list cols="5">
-        <mat-grid-tile [colspan]="5" [rowspan]="tab.active? 3 : 0" *ngFor="let tab of tabs; let index = index"
-          [style.display]='tab.active? "inline" : "none"' [style.position]='tab.active? "static" : "absolute"'>
-  
-          <iframe id="tabframe-{{tab.label.split(' ').join('-')}}" scrolling='yes' frameBorder='0' width='100%'
-            scrolling='yes' frameBorder='0' width='100%' height='90%' [src]='tab.url'></iframe>
-  
-        </mat-grid-tile>
-  
-      </mat-grid-list>
-    </div>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.scss b/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.scss
deleted file mode 100644
index 807e2d57..00000000
--- a/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2017 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
-
- .input-label,
- .add-tab-button,
- .delete-tab-button {
-   margin: 8px;
- }
- .search-bar {
-   position: absolute;
-   right: 10%;
- }
- 
- #mat-tab-label-0-1 {
-   position: fixed;
-   right: 1em;
- }
- 
- .mat-tab-group{
-   margin-top: 55px;
- }
-
- ::ng-deep .mat-tab-label {
-   font-size: 13px !important;
-   line-height: 30px !important;
-   margin: 5px 0px 0 !important;
-   border-top-left-radius: 88px 205px !important;
-   border-top-right-radius: 88px 205px !important;
-   padding: 0 30px 0 25px !important;
-   height: 35px !important;
-   background: #d2d2d2 !important;
-   position: relative !important;
-   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
-   width: 180px !important;
-   max-width: 200px !important;
-   min-width: 20px !important;
-   border: 1px solid #aaa !important;
-   text-transform: capitalize !important;
-   text-align: left !important;
- }
- 
- 
- ::ng-deep .mat-tab-label.mat-ripple.ng-star-inserted.mat-tab-label-active {
-   opacity: 1;
- }
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.spec.ts b/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.spec.ts
deleted file mode 100644
index 94866e4e..00000000
--- a/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2017-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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
-
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TabbarComponent } from './tabbar.component';
-
-describe('TabbarComponent', () => {
-  let component: TabbarComponent;
-  let fixture: ComponentFixture<TabbarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TabbarComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TabbarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.ts b/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.ts
deleted file mode 100644
index 7a10e39d..00000000
--- a/portal-FE-os/src/app/layout/components/tabbar/tabbar.component.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2017-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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
-import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { DomSanitizer } from '@angular/platform-browser';
-import { Tab } from './tab';
-import { AddTabFunctionService } from 'src/app/shared/services/tab/add-tab-function.service';
-
-@Component({
-  selector: 'app-tabbar',
-  templateUrl: './tabbar.component.html',
-  styleUrls: ['./tabbar.component.scss']
-})
-export class TabbarComponent implements OnInit {
-
-  tabs = [];
-  mainTab = 'Home';
-  selected = new FormControl(0);
-  collapedSideBar: boolean;
-
-  constructor(private sanitizer: DomSanitizer, private addTabFuntionService: AddTabFunctionService) {
-
-  }
-
-  ngOnInit(): void {
-
-    this.addTabFuntionService.listen().subscribe((m: any) => {
-      console.log(m);
-      this.addTab(true, m.title, m.url);
-    })
-  }
-
-  addTab(selectAfterAdding: boolean, label: string, url: string) {
-    const tab = new Tab(label);
-    tab.url = this.sanitizer.bypassSecurityTrustResourceUrl(url);
-    tab.active = true;
-    this.tabs.push(tab);
-
-    if (selectAfterAdding) {
-      this.selected.setValue(this.tabs.length);
-    }
-  }
-
-  removeTab(index: number) {
-    this.tabs.splice(index, 1);
-  }
-
-  receiveCollapsed($event) {
-    this.collapedSideBar = $event;
-  }
-
-  tabChanged($event) {
-
-    for (const ttab of this.tabs) {
-      ttab.active = false;
-    }
-    if(this.tabs.length != 0 && $event.index != 0)
-      this.tabs[$event.index - 1].active = true;
-  }
-}
diff --git a/portal-FE-os/src/app/layout/components/userbar/userbar.component.html b/portal-FE-os/src/app/layout/components/userbar/userbar.component.html
deleted file mode 100644
index e9a8b822..00000000
--- a/portal-FE-os/src/app/layout/components/userbar/userbar.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<button type="button" class="btn btn-primary" href="javascript:void(0)"
-[ngStyle]="{'right': isOpen ? '65px' : '-18px' }" (click)="toggleSidebar()">
-  <span id="user-chevron-down" class="icon-controls-down" [hidden]="!isOpen">Close</span>
-  <span id="user-chevron-up" class="icon-controls-upPRIMARY" [hidden]="isOpen"><span class="right-menu-button"><i
-        class="icon ion-md-arrow-dropup"></i> Users</span></span>
-</button>
-<nav [ngStyle]="{'right': isOpen ? '18px' : '-75px' }" class="usb-item usb-item-vertical usb-item-right" id="usb-item-s2">
-  <h3>Online Users</h3>
-  <div *ngFor="let user of userList" style="font-size: 10px;">
-    <a [href]="user.linkQ"><img class="activeUserIcon" [src]="user.linkPic" alt="User Link"></a>
-    <div class="userId-txt">{{user.userId}}</div>
-  </div>
-</nav>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/userbar/userbar.component.scss b/portal-FE-os/src/app/layout/components/userbar/userbar.component.scss
deleted file mode 100644
index ee9f8279..00000000
--- a/portal-FE-os/src/app/layout/components/userbar/userbar.component.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2017-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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
- 
-.usb-item {
-  background: #fff;
-  position: fixed;
-}
-
-.usb-item h3 {
-  color: #ef6f00;
-  font-size: 14px;
-  padding: 20px;
-  margin: 0;
-  text-align: center;
-  font-weight: 300;
-  background: #f8f9fa;
-}
-
-.usb-item a {
-  display: block;
-  color: #fff;
-  font-size: 1.1em;
-  font-weight: 300;
-  transition: all 0.2s ease-in-out;
-  -ms-transition: all 0.2s ease-in-out; /* IE 9 */
-  -webkit-transition: all 0.2s ease-in-out; /* Safari 3-8 */
-}
-
-.usb-item a:active {
-  background: #afdefa;
-  color: #47a3da;
-}
-
-.usb-item-right {
-  transition: all 0.5s ease-in-out;
-  -ms-transition: all 0.5s ease-in-out; /* IE 9 */
-  -webkit-transition: all 0.5s ease-in-out; /* Safari 3-8 */
-}
-
-.usb-item a:hover {
-  -ms-transform: scale(1.5); /* IE 9 */
-  -webkit-transform: scale(1.5); /* Safari 3-8 */
-  transform: scale(1.5);
-}
-
-.usb-item-vertical {
-  margin-top: 105px;
-  text-align: center;
-  width: 75px;
-  height: 79%;
-  top: 0;
-  z-index: 1000;
-  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
-}
-
-.usb-item-vertical a {
-  padding: 0.5em;
-}
-
-button {
-  transition: all 0.5s ease-in-out;
-  -ms-transition: all 0.5s ease-in-out; /* IE 9 */
-  -webkit-transition: all 0.5s ease-in-out; /* Safari 3-8 */
-  z-index: 9999;
-  top: 450px;
-  -ms-transform: rotate(-90deg); /* IE 9 */
-  -webkit-transform: rotate(-90deg); /* Safari 3-8 */
-  transform: rotate(-90deg);
-  position: fixed;
-}
-
-.activeUserIcon {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  height: 55px;
-  width: 55px;
-  border-radius: 50%;
-}
diff --git a/portal-FE-os/src/app/layout/components/userbar/userbar.component.spec.ts b/portal-FE-os/src/app/layout/components/userbar/userbar.component.spec.ts
deleted file mode 100644
index 4115433c..00000000
--- a/portal-FE-os/src/app/layout/components/userbar/userbar.component.spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2017-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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
- 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { UserbarComponent } from './userbar.component';
-
-describe('UserbarComponent', () => {
-  let component: UserbarComponent;
-  let fixture: ComponentFixture<UserbarComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ UserbarComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(UserbarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/portal-FE-os/src/app/layout/components/userbar/userbar.component.ts b/portal-FE-os/src/app/layout/components/userbar/userbar.component.ts
deleted file mode 100644
index 343305fe..00000000
--- a/portal-FE-os/src/app/layout/components/userbar/userbar.component.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/*-
- * ============LICENSE_START==========================================
- * ONAP Portal
- * ===================================================================
- * Copyright (C) 2017-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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
- 
-import { Component, OnInit } from '@angular/core';
-import { UserbarService, UserProfileService } from 'src/app/shared/services';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Component({
-  selector: 'app-userbar',
-  templateUrl: './userbar.component.html',
-  styleUrls: ['./userbar.component.scss']
-})
-export class UserbarComponent implements OnInit {
-
-  userList;
-  isOpen: boolean;
-  intervalPromise = null;
-  updateRate: number;
-  myservice: UserbarService;
-  constructor(private sanitizer: DomSanitizer, private userbarService: UserbarService, private userProfileService: UserProfileService) { }
-
-  ngOnInit() {
-    this.userList = [];
-    this.myservice = this.userbarService;
-    this.isOpen = true;
-    // this.userbarService.getOnlineUserUpdateRate().subscribe((_res: any) => {
-    //   if (_res != null) {
-    //     var rate = parseInt(_res.onlineUserUpdateRate);
-    //     var duration = parseInt(_res.onlineUserUpdateDuration);
-    //     this.userbarService.setMaxRefreshCount((duration / rate) + 1);
-    //     this.userbarService.setRefreshCount(this.userbarService.maxCount);
-    //     if (rate != NaN && duration != NaN) {
-    //       // $log.debug('UserbarCtlr: scheduling function at interval ' + millis);
-    //       this.updateRate = rate;
-    //       this.start(this.updateRate);
-    //     }
-    //   }
-    // })
-    this.updateActiveUsers();
-  }
-
-  updateActiveUsers() {
-    // this.userbarService.decrementRefreshCount();
-    this.userProfileService.getActiveUser().subscribe((_res: any) => {
-      if (_res == null) {
-        // $log.error('UserbarCtrl::updateActiveUsers: failed to get active user');
-        this.stop();
-      } else {
-        var maxItems = 25;
-        if (_res.length < maxItems)
-          maxItems = _res.length;
-        for (var i = 0; i < maxItems; i++) {
-          var data = {
-            userId: _res[i],
-            linkQ: this.sanitizer.bypassSecurityTrustResourceUrl('qto://talk/' + _res[i]),
-            linkPic: 'https://tspace.web.att.com/profiles/photo.do?uid=' + _res[i]
-          }
-          this.userList.push(data);
-        }
-      }
-
-    }, (err) => {
-      this.userList = [];
-      this.stop();
-    })
-
-    // .add(() => {
-    //   var footerOff = $('#online-userbar').offset().top;
-    //   var headOff = $('#footer').offset().top;
-    //   var defaultOffSet = 45;
-    //   $(".online-user-container").css({
-    //     "height": headOff - footerOff - defaultOffSet
-    //   });
-    // })
-
-  }
-
-  toggleSidebar() {
-    this.isOpen = !this.isOpen;
-  }
-
-  start(rate) {
-    // stops any running interval to avoid two intervals running at the same time
-    this.stop();
-    // store the interval promise
-    this.intervalPromise = setInterval(this.updateActiveUsers, rate);
-  };
-
-
-  stop() {
-    if (this.intervalPromise != null) {
-      clearInterval(this.intervalPromise);
-      this.intervalPromise = null;
-    }
-  };
-
-
-
-}
diff --git a/portal-FE-os/src/app/layout/layout-routing.module.ts b/portal-FE-os/src/app/layout/layout-routing.module.ts
deleted file mode 100644
index 5fa77e3a..00000000
--- a/portal-FE-os/src/app/layout/layout-routing.module.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * ============LICENSE_START==========================================
- * ONAP Portal SDK
- * ===================================================================
- * Copyright � 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { LayoutComponent } from './layout.component';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: LayoutComponent,
-        children: [
-            //redirecting to pages module
-            { path: '', redirectTo: 'app', },
-            { path: 'app', loadChildren: () => import('../pages/pages.module').then(m => m.PagesModule) },        ]
-    }
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
-})
-export class LayoutRoutingModule {}
diff --git a/portal-FE-os/src/app/layout/layout.component.scss b/portal-FE-os/src/app/layout/layout.component.scss
deleted file mode 100644
index a8adf264..00000000
--- a/portal-FE-os/src/app/layout/layout.component.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * ============LICENSE_START==========================================
- * ONAP Portal SDK
- * ===================================================================
- * Copyright � 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- * 
- */
-* {
-    -webkit-transition: margin-left 0.2s ease-in-out;
-    -moz-transition: margin-left 0.2s ease-in-out;
-    -ms-transition: margin-left 0.2s ease-in-out;
-    -o-transition: margin-left 0.2s ease-in-out;
-    transition: margin-left 0.2s ease-in-out;
-}
-.main-container {
-    margin-top: 56px;
-    margin-left: 270px;
-    padding: 15px;
-    -ms-overflow-x: hidden;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    position: relative;
-    overflow: hidden;
-}
-.collapsed {
-    margin-left: 60px;
-}
-@media screen and (max-width: 992px) {
-    .main-container {
-        margin-left: 0px !important;
-    }
-}
-@media print {
-    .main-container {
-        margin-top: 0px !important;
-        margin-left: 0px !important;
-    }
-}
diff --git a/portal-FE-os/src/app/layout/layout.module.ts b/portal-FE-os/src/app/layout/layout.module.ts
deleted file mode 100644
index 63a99d86..00000000
--- a/portal-FE-os/src/app/layout/layout.module.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * ============LICENSE_START==========================================
- * ONAP Portal SDK
- * ===================================================================
- * Copyright � 2019 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.
- *
- * Unless otherwise specified, all documentation contained herein is licensed
- * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
- * you may not use this documentation except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *             https://creativecommons.org/licenses/by/4.0/
- *
- * Unless required by applicable law or agreed to in writing, documentation
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * ============LICENSE_END============================================
- *
- *
- */
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgMaterialModule } from '../ng-material-module';
-import { LayoutRoutingModule } from './layout-routing.module';
-import { LayoutComponent } from './layout.component';
-import { SidebarComponent } from './components/sidebar/sidebar.component';
-import { HeaderComponent } from './components/header/header.component';
-import { GlobalSearchComponent } from './components/global-search/global-search.component';
-import { ClickOutsideModule } from 'ng-click-outside';
-import { TabbarComponent } from './components/tabbar/tabbar.component';
-import { HeaderMenuComponent } from './components/header-menu/header-menu.component';
-import { UserbarComponent } from './components/userbar/userbar.component';
-import { FooterComponent } from './components/footer/footer.component';
-import { ApplicationPipesModule } from '../shared/pipes/application-pipes.module';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        NgMaterialModule,
-        LayoutRoutingModule,
-        ApplicationPipesModule,
-        NgbDropdownModule,
-        ClickOutsideModule
-    ],
-    declarations: [LayoutComponent, SidebarComponent, HeaderComponent,GlobalSearchComponent, TabbarComponent, HeaderMenuComponent, UserbarComponent, FooterComponent]
-})
-export class LayoutModule {}
diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html
new file mode 100644
index 00000000..bef37b84
--- /dev/null
+++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.html
@@ -0,0 +1,275 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 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.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+   
+-->
+
+<div class="container">
+ 	<!--Modal Headers-->
+	<div class="modal-header">
+		<h4 class="modal-title">Application Details</h4>
+		<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+			<span aria-hidden="true">&times;</span>
+		</button>
+	</div>
+	 <!--Modal Body goes here-->
+	<div class="modal-body">
+		<div class="application-details-modal">
+		  <div class="app-properties-main" scroll-top="appDetails.scrollApi">
+			<form name="appForm" novalidate autocomplete="off">
+				<div id="app-left-container" class="left-container">
+					<div class="property-label checkbox-label">
+						<mat-checkbox  name="isRestrictedApp" type="checkbox" [(ngModel)]="applicationObj.restrictedApp"
+							id="checkbox-app-is-restricted" [disabled]="isEditMode"	[checked]="applicationObj.restrictedApp">
+							Hyperlink only application
+						</mat-checkbox>
+					</div>
+				
+					<div class="property required">
+						<div class="property-label">Application Name</div>
+						<input id="input-app-name" type="text"
+						[(ngModel)]="applicationObj.name" maxlength="100" name="name"
+						pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" />
+		
+						<div id="error-container-conflict" class="error-container" ng-show="appDetails.conflictMessages.name"
+							id="conflictMessages-name">
+							<small id="app-name-error-conflict" class="err-message"
+								ng-bind="appDetails.conflictMessages.name">
+							</small>
+						</div>
+						
+						<div id="error-container-edit" class="error-container" 
+							*ngIf="(!applicationObj.name ||  applicationObj.name.length == 0)">
+							<small id="app-name-error-required" class="err-message">
+								Application name is required
+							</small> 
+						</div>
+					</div>
+					
+					<div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'">
+						<div id="url-property-label" class="property-label">URL</div>
+							<input id="input-app-url" [(ngModel)]="applicationObj.url"
+							maxlength="256" name="url" type="url" placeholder="https://"
+							pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" required />
+
+						<div id="error-container-edit" class="error-container" 
+							*ngIf="(applicationObj.isEnabled && applicationObj.url=='')">
+							<small id="app-name-error-required" class="err-message">
+								Application URL is required
+							</small> 
+						</div>
+					</div>
+					
+					<div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"
+						[hidden] ="applicationObj.restrictedApp">
+						<div class="property-label">Rest API URL</div>	
+						<input id="input-app-rest-url" [(ngModel)]="applicationObj.restUrl"
+						name="restUrl" type="url" placeholder="https://"
+						pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i" maxlength="256"
+						ng-required="!applicationObj.restrictedApp" />
+		
+						<div id="error-container-edit" class="error-container" 
+							*ngIf="(applicationObj.isEnabled && applicationObj.restUrl=='')">
+							<small id="app-name-error-required" class="err-message">
+								Rest API URL is required
+							</small> 
+						</div>
+					</div>	
+					
+					<div [ngClass]="(applicationObj.isEnabled || applicationObj.isCentralAuth) ? 'property required' : 'property'" 
+						[hidden] ="applicationObj.restrictedApp">
+						<div id="username-property-label" class="property-label">Username</div>					
+						<input type="text" id="input-username-property"  [(ngModel)]="applicationObj.username" name="username"
+						maxlength="256" ng-required="!appDetails.app.restrictedApp" />
+						
+						<div id="error-container-edit" class="error-container" 
+							*ngIf="((applicationObj.isEnabled || applicationObj.isCentralAuth) && applicationObj.username =='')">
+							<small id="app-name-error-required" class="err-message">
+								App Username is required
+							</small> 
+						</div>
+					</div>
+	
+					<div [ngClass]="(applicationObj.isEnabled && !applicationObj.isCentralAuth) ? 'property required' : 'property'"
+						[hidden] ="applicationObj.restrictedApp">
+						<div id="pwd-property-label" class="property-label">Password</div>
+						<input type="password" id="input-mylogins-password"
+							[(ngModel)]="applicationObj.appPassword" autocomplete="new-password"
+						name="appPassword" maxlength="256"/>
+
+						<div id="error-container-edit" class="error-container" 
+							*ngIf="(applicationObj.isEnabled && !applicationObj.isCentralAuth && applicationObj.appPassword =='')">
+							<small id="app-name-error-required" class="err-message">
+								Password is required
+							</small> 
+						</div>
+					</div>
+				</div>
+				
+				<!-- Right container-->
+				<div class="right-container">
+				<div class="property">
+					<div class="property-label">Upload Image</div>
+					<input type="file" id="input-app-image-upload"
+						class="input-file-field input-app-image-upload-ht"
+						accept="image/*" [(ngModel)]="applicationObj.originalImage"
+						name="appImage" image-upload="applicationObj.originalImage"
+						image-upload-resize-max-height="300"
+						image-upload-resize-max-width="360"
+						image-upload-resize-quality="0.7"
+						image-upload-api="appDetails.imageApi" 
+						(change)="appImageHandler($event)" />
+	
+					<div id="app-error-image-upload-type" class="error-container"
+						*ngIf="appImageTypeError" class="ng-hide">
+						<div class="error-container">
+							<small id="error-app-invalid-image-size" class="err-message">File must be an image</small>
+						</div>
+					</div>
+	
+					<div id="app-error-image-upload" class="error-container"
+						*ngIf="(applicationObj.originalImage && applicationObj.originalImage.dirty)">
+						<div ng-messages="appForm.appImage.$error"
+						class="error-container">
+						<small id="error-app-invalid-image-size" class="err-message"
+							ng-message="imageSize">Image file must be smaller than
+							1MB</small>
+						</div>
+					</div>
+					
+					<div class="property-label preview">
+						<span  class="left-label">Preview</span>
+						<span  class="remove" (click)="removeImage()">Remove</span>
+					</div>
+					<img id="image-app-preview" class="image-preview"
+								src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" />
+	
+					<br/>
+					<div id="property-active" class="property-active">
+						<mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled"
+							[checked]="applicationObj.isEnabled"
+							id="checkbox-app-is-enabled">Active
+						</mat-checkbox>
+					</div>
+					
+					<div id="property-guest-access" class="property-guest-access">
+						<mat-checkbox name="isOpen" [(ngModel)]="applicationObj.isOpen" id="checkbox-app-is-open"
+						[checked]="(applicationObj.isOpen || applicationObj.restrictedApp)"
+						[disabled]="applicationObj.restrictedApp">Allow guest access</mat-checkbox>
+					</div>
+						
+					<div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+						<div id="property-is-central-auth" class="property"	[hidden] ="applicationObj.restrictedApp">
+							<mat-checkbox name="isCentralAuth" [(ngModel)]="applicationObj.isCentralAuth"
+								id="checkbox-app-is-central-auth" [checked]="applicationObj.isCentralAuth">
+								Centralized
+							</mat-checkbox>
+						</div>
+					
+						<div class="centralized-key" aria-haspopup="true"  style="padding-left: 150px;"> 
+							<div b2b-flyout-toggler class="notification-div" >
+								<div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+								b2b-accessibility-click="13,32" aria-label="notifications"
+								aria-haspopup="true" 
+								role="button"></div>
+							</div>
+						
+							<!--<div id="notification" align="left">
+								<p class="uuid-text"
+								style="font: normal 12px Omnes-ECOMP-W02, Arial;">
+								To convert the non-centralized app to centralized app please
+								follow below steps. <a href="https://wiki.web.att.com/display/ECops/BulkUpload" target="_blank">
+									https://wiki.web.att.com/display/ECops/BulkUpload</a>
+								</p>
+							</div>-->
+						</div>
+					</div>
+										
+					<div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+						<div id="property-communication-key" class="property"
+							[hidden] ="applicationObj.restrictedApp" style="width: 250px;">
+							<div id="property-communication-key-label" class="property-label">Application UUID</div>
+							<input type="text" id="input-UEB-communication-key"
+							[(ngModel)]="applicationObj.uebKey" name="uebKey" 
+							readonly="readonly" [disabled]="true"/>
+						</div>
+
+						<div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
+						<div b2b-flyout-toggler class="notification-div">
+							<div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+							b2b-accessibility-click="13,32" aria-label="notifications"
+							aria-haspopup="true"
+							role="button"></div>
+						</div>
+						<!--<div id="notification" align="left">
+							<p class="uuid-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">Application UUID is used as a communication
+							key between application and portal.Please place this value in
+							portal.properties</p>
+						</div>-->
+						</div>	    
+					</div>  
+	
+					<div class="table-control" style="display: inline-flex;" [hidden] ="applicationObj.restrictedApp">
+						
+					<div [ngClass]="(applicationObj.isCentralAuth) ? 'property required' : 'property'"  
+						[hidden] ="applicationObj.restrictedApp" style="width: 250px;">
+						<div id="pwd-property-label" class="property-label" >Name Space</div>
+						<input type="text" id="input-mylogins-auth-namespace"
+							[(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace"
+							maxlength="256" [disabled]="!applicationObj.isCentralAuth" />
+					</div>
+					<div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
+					
+						<div b2b-flyout-toggler class="notification-div">
+							<div id="tooltip" class="icon-primary-flat-info" tabindex="0"
+							b2b-accessibility-click="13,32" aria-label="notifications"
+							aria-haspopup="true"
+							role="button"></div>
+						</div>	  
+						<!--<div id="notification" align="left">
+							<p class="nameSpace-text"  style="font: normal 12px Omnes-ECOMP-W02, Arial;">NameSpace should be created in AAF and portal mechid should be admin of the given namespace.</p>
+						</div>-->
+						</div>	
+					</div>	
+				</div>
+				</div>
+			</form>
+			</div>
+		</div>
+	 </div>
+	 <div class="modal-footer">
+		<button type="button" class="btn btn-primary" [disabled]="(!applicationObj.name ||  applicationObj.name.length == 0)" (click)="saveChanges()">Save</button> &nbsp;
+		<button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
+	</div>
+</div>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss
new file mode 100644
index 00000000..0e042a96
--- /dev/null
+++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.scss
@@ -0,0 +1,163 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 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.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+   
+.application-details-modal .app-properties-mainapp-properties-main{
+       padding-left: 40px;
+       padding-top: 16px;
+       padding-bottom: 16px;
+}
+
+.application-details-modal .app-properties-main .left-container{
+    display: inline-block;
+    width: 48%;
+
+}
+
+.application-details-modal .app-properties-main .right-container{
+    display: inline-block;
+    width: 48%;
+    float: right;
+    margin-right:10px;
+
+}
+   
+.application-details-modal .app-properties-main .property{
+    position: relative;
+    margin-bottom: 18px;
+}
+.application-details-modal .app-properties-main .checkbox-label{
+    display: inline-block;
+    padding-left: 3px;
+}
+.application-details-modal .app-properties-main .checkbox-field{
+    padding: 0;
+    margin: 0;
+    vertical-align: middle;
+    position: relative;
+    top: -1px;
+}
+.application-details-modal .app-properties-main .preview{
+    width: 220px;
+    margin-top: 22px;
+    display: block;
+}
+   
+.application-details-modal .app-properties-main .left-label{
+    display:inline-block;
+    float: left;
+}
+.application-details-modal .app-properties-main .remove{
+    cursor: pointer;
+    display: inline-block;
+    float: right;
+}
+   
+.application-details-modal .app-properties-main .input-field{
+    width: 220px;
+}
+   
+.application-details-modal .app-properties-main .input-file-field{
+    width: 220px;
+    border: 0px solid #d2d2d2;
+    box-shadow: 0px 0px 2px -2px rgba(0, 0, 0, 0.08) inset;
+    padding-left: 2px;
+}
+ 
+.application-details-modal .app-properties-main .image-preview{
+    background: gray;
+    background-size: cover;
+    width: 220px;
+    height: 184px;
+    margin-top: 10px;
+    border: 2px solid #e8e8e8;
+    border-radius: 4px;
+}
+   
+.application-details-modal .app-properties-main .error-container{
+    position: absolute;
+    width: 220px;
+    display: block;
+    height: 12px;
+    line-height: 12px;
+}
+   
+.application-details-modal .app-properties-main .err-message{
+    font-size: 10px;
+}
+       
+.application-details-modal .app-properties-main .checkbox .skin {
+    left: 0px;
+    top: 0px;
+}
+
+.application-details-modal input[type="text"] {
+    width: 16em;
+}
+
+.application-details-modal input[type="url"] {
+    width: 16em;
+}
+
+.application-details-modal input[type="number"] {
+    width: 16em;
+}
+
+.application-details-modal input[type="password"] {
+    width: 16em;
+}
+
+::ng-deep .modal-dialog { 
+    max-width: 700px;
+    width: 630px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+.required::before {
+    color: rgb(207, 42, 42);
+    margin-right: 2px;
+    content: "* ";
+    position: absolute;
+    top: 28px;
+    left: -10px;
+}
+.remove{
+    cursor: pointer;
+    color: #007bff;
+}
+   
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/header/header.component.spec.ts b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts
index 1bcd2ffb..0ea27629 100644
--- a/portal-FE-os/src/app/layout/components/header/header.component.spec.ts
+++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.spec.ts
@@ -38,21 +38,21 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeaderComponent } from './header.component';
+import { ApplicationDetailsDialogComponent } from './application-details-dialog.component';
 
-describe('HeaderComponent', () => {
-  let component: HeaderComponent;
-  let fixture: ComponentFixture<HeaderComponent>;
+describe('ApplicationDetailsDialogComponent', () => {
+  let component: ApplicationDetailsDialogComponent;
+  let fixture: ComponentFixture<ApplicationDetailsDialogComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeaderComponent ]
+      declarations: [ ApplicationDetailsDialogComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HeaderComponent);
+    fixture = TestBed.createComponent(ApplicationDetailsDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts
new file mode 100644
index 00000000..60654461
--- /dev/null
+++ b/portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts
@@ -0,0 +1,380 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 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.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ *
+ */
+
+import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { IApplications } from 'src/app/shared/model/applications-onboarding/applications';
+import { ApplicationsService } from 'src/app/shared/services';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+
+@Component({
+  selector: 'app-application-details-dialog',
+  templateUrl: './application-details-dialog.component.html',
+  styleUrls: ['./application-details-dialog.component.scss'],
+})
+export class ApplicationDetailsDialogComponent implements OnInit {
+
+  emptyImg = null;
+  emptyImgForPreview:string;
+  conflictMessages = {};
+  result: any;
+  isEditMode: boolean = false;
+  appImageTypeError: boolean = false;
+  isSaving: boolean = false;
+  originalImage: any;
+  ECOMP_URL_REGEX = "/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i";
+
+  constructor(public activeModal: NgbActiveModal, public ngbModal: NgbModal,
+    public applicationsService : ApplicationsService) { }
+
+  @Input() applicationObj: IApplications;
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+
+  newAppModel = {
+    'id': null,
+    'name': null,
+    'imageUrl': null,
+    'description': null,
+    'notes': null,
+    'url': null,
+    'alternateUrl': null,
+    'restUrl': null,
+    'isOpen': false,
+    'username': null,
+    'appPassword': null,
+    'thumbnail': this.emptyImg,
+    'isEnabled': false,
+    'restrictedApp': false,
+    'nameSpace':null,
+    'isCentralAuth': false,
+    'uebTopicName':null,
+    'uebKey': null,
+    'uebSecret': null,
+    'imageLink': null
+  };
+
+
+  ngOnInit() {
+    if(this.applicationObj.id){
+      this.isEditMode = true;
+    }else{
+      this.isEditMode = false;
+    }
+    //console.log("isEditMode :: ",this.isEditMode);
+    this.originalImage = null
+    this.emptyImgForPreview = '../../../assets/images/default_app_image.gif';
+  }
+
+  appImageHandler(event: any){
+    var reader = new FileReader();
+    if(event.target.files && event.target.files[0]){
+      reader.readAsDataURL(event.target.files[0]); // read file as data url
+      var fileName = event.target.files[0].name;
+      var validFormats = ['jpg', 'jpeg', 'bmp', 'gif', 'png'];
+      //Get file extension
+      var ext = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
+      //console.log("fileName::>>",fileName ,ext)
+      //console.log("fileExtetion::>>",ext)
+      //Check for valid format
+      if(validFormats.indexOf(ext) == -1){
+          this.newAppModel.thumbnail = this.emptyImg;
+          this.originalImage = null;
+          this.applicationObj.imageUrl = null;
+          this.applicationObj.imageLink = null;
+          this.applicationObj.thumbnail = null;
+          if(!this.isEditMode){
+            this.newAppModel.imageUrl = null;
+            this.newAppModel.imageLink = null;
+            this.newAppModel.thumbnail = null;
+          }
+          this.appImageTypeError=true;
+      }else{
+        reader.onload = (event: any) => { // called once readAsDataURL is completed
+          this.applicationObj.imageLink = event.target.result;
+          this.applicationObj.imageUrl = event.target.result;
+          this.applicationObj.thumbnail = event.target.result;
+          this.originalImage =  event.target.result;
+          if(!this.isEditMode){
+            this.newAppModel.imageLink = event.target.result;
+            this.newAppModel.imageUrl = event.target.result;
+            this.newAppModel.thumbnail = event.target.result;
+            this.originalImage =  event.target.result;
+          }
+        }
+      }
+    }
+  }
+
+  removeImage(){
+    let confirmationMsg = 'Are you sure you want to remove the image?';
+    this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => {
+      if (result === 'Ok') {
+        //this.imageApi.clearFile();
+        this.applicationObj.thumbnail = this.emptyImg;
+        this.originalImage = null;
+        this.applicationObj.imageUrl = null;
+        this.applicationObj.imageLink = null;
+        this.emptyImgForPreview = '../../../assets/images/default_app_image.gif';
+      }
+    }, (resut) => {
+      return;
+    })
+  }
+
+  /** Add/Edit Application Method*/
+  saveChanges() {
+    //console.log("addNewApplication getting called..");
+    if(this.applicationObj.isCentralAuth){
+        //if valid.
+        if(!this.applicationObj.isEnabled){
+          if(((this.applicationObj.name == 'undefined' || !this.applicationObj.name)||(this.applicationObj.nameSpace == 'undefined'
+          || !this.applicationObj.nameSpace) ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username))) {
+            this.openConfirmationModal('','Please fill in all required fields(*) for centralized application');
+            return;
+          }
+        }
+        if(this.applicationObj.isEnabled){
+          if(((this.applicationObj.name == 'undefined' || !this.applicationObj.name)
+          ||(this.applicationObj.url == 'undefined'|| !this.applicationObj.url)
+          ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username)||(this.applicationObj.nameSpace == 'undefined'
+          || !this.applicationObj.nameSpace))) {
+
+            this.openConfirmationModal('','Please fill in all required fields(*) for centralized active application');
+            return;
+          }
+        }
+    }else{
+        if(!this.applicationObj.isEnabled) {
+            if((this.applicationObj.name == 'undefined' || !this.applicationObj.name)){
+                this.openConfirmationModal('','Please fill in all required field(*) ApplicationName to Save the applictaion');
+                return;
+            }
+        }else if(this.applicationObj.isEnabled && !this.applicationObj.restrictedApp){
+          if((this.applicationObj.name == 'undefined' || !this.applicationObj.name)
+            ||(this.applicationObj.url == 'undefined'|| !this.applicationObj.url)
+            ||(this.applicationObj.username == 'undefined' || !this.applicationObj.username)||
+            (this.applicationObj.appPassword== 'undefined' || !this.applicationObj.appPassword)) {
+
+              this.openConfirmationModal('','Please fill in all required fields(*) along with password as the app is not centralized');
+              return;
+          }
+        }else if(this.applicationObj.isEnabled && this.applicationObj.restrictedApp){
+            if((this.applicationObj.name == 'undefined' || !this.applicationObj.name) ||(this.applicationObj.url == 'undefined'
+            || !this.applicationObj.url)){
+                this.openConfirmationModal('','Please fill in all required fields(*)');
+                return;
+            }
+        }
+    }
+
+    //URL Validation
+    if(this.applicationObj.isEnabled){
+      if(this.applicationObj.url && this.applicationObj.url !='undefined' && this.applicationObj.url != ''){
+        let isValidURL = this.isUrlValid(this.applicationObj.url);
+        if(!isValidURL){
+          this.openConfirmationModal('Error','Application URL must be a valid URL.');
+          return;
+        }
+      }else{
+        this.openConfirmationModal('Error','Application URL is required.');
+        return;
+      }
+    }
+
+
+    this.isSaving = true;
+    // For a restricted app, null out all irrelevant fields
+    if(this.applicationObj.restrictedApp) {
+      this.newAppModel.restUrl = null;
+      this.newAppModel.isOpen = true;
+      this.newAppModel.username = null;
+      this.newAppModel.appPassword = null;
+      this.newAppModel.uebTopicName = null;
+      this.newAppModel.uebKey = null;
+      this.newAppModel.uebSecret = null;
+
+      /**Need to set below fields values based on input provided in the dialog */
+      this.newAppModel.restrictedApp = this.applicationObj.restrictedApp;
+      this.newAppModel.name = this.applicationObj.name;
+      this.newAppModel.url = this.applicationObj.url;
+      if(this.applicationObj.isEnabled){
+        this.newAppModel.isEnabled = this.applicationObj.isEnabled;
+      }else{
+        this.newAppModel.isEnabled = false;
+      }
+
+    }else{
+
+       /**Need to set below fields values based on input provided in the dialog */
+       this.newAppModel.restrictedApp = false;
+       this.newAppModel.name = this.applicationObj.name;
+       this.newAppModel.url = this.applicationObj.url;
+       this.newAppModel.restUrl = this.applicationObj.restUrl;
+       this.newAppModel.username = this.applicationObj.username;
+       this.newAppModel.appPassword = this.applicationObj.appPassword;
+
+       if(this.applicationObj.isEnabled){
+        this.newAppModel.isEnabled = this.applicationObj.isEnabled;
+       }else{
+        this.newAppModel.isEnabled = false;
+       }
+
+       if(this.applicationObj.isOpen){
+        this.newAppModel.isOpen = this.applicationObj.isOpen;
+       }else{
+        this.newAppModel.isOpen = false;
+       }
+       //console.log("this.applicationObj.isOpen",this.applicationObj.isOpen);
+
+       if(this.applicationObj.isCentralAuth){
+        this.newAppModel.isCentralAuth = this.applicationObj.isCentralAuth;
+       }else{
+        this.newAppModel.isCentralAuth = false;
+       }
+
+    }
+
+    if (this.applicationObj.nameSpace=="") {
+      this.newAppModel.nameSpace = null;
+    }
+
+    if(this.isEditMode){
+      this.applicationsService.updateOnboardingApp(this.applicationObj)
+        .subscribe( _data => {
+          this.result = _data;
+          //console.log("update application response :: ",this.result);
+          if(this.result !=null && this.result.httpStatusCode ==200){
+            this.passEntry.emit(this.result);
+            this.ngbModal.dismissAll();
+          }else{
+            this.openConfirmationModal('Error','There was a problem updating the application changes. Please try again. If the problem persists, then try again later. Error: '+this.result);
+            return
+          }
+        }, error => {
+          console.log(error);
+          if(error.status == 409){
+            this.openConfirmationModal('Error', 'There was a problem updating the application changes. ' +
+            'The Application Name and URL should  be unique.  Error: ' +
+            error.status);
+            return;
+          }else if(error.status == 500){
+            this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
+            'Please try again later. Error: ' +error.status);
+            return;
+          }else if(error.status == 404 || error.status == 403){
+            this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
+            'Invalid namespace. Error: ' +error.status);
+            return;
+          }else if(error.status == 401){
+            this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
+            'Portal Mechid is unauthorized to access the given namespace. Error: ' +error.status);
+            return;
+          }else if(error.status == 400){
+            this.openConfirmationModal('Error','Bad Request Error: ' + error.status);
+            return;
+          } else{
+            this.openConfirmationModal('Error', 'There was a problem updating the application changes. ' +
+            'Please try again. If the problem persists, then try again later. Error: ' +
+            error.status);
+            return;
+          }
+      });
+
+    }else{
+      //console.log("Coming inside add application",this.newAppModel);
+
+      this.applicationsService.addOnboardingApp(this.newAppModel)
+        .subscribe( _data => {
+          this.result = _data;
+          //console.log("Add application response :: ",this.result);
+          if(this.result !=null && this.result.httpStatusCode ==200){
+            this.passEntry.emit(this.result);
+            this.ngbModal.dismissAll();
+          }else{
+            this.openConfirmationModal('Error','There was a problem adding the application changes. Please try again. If the problem persists, then try again later. Error: '+this.result);
+            return
+          }
+        }, error => {
+          console.log(error);
+          if(error.status == 409){
+            this.openConfirmationModal('Error', 'There was a problem adding the application changes. ' +
+            'The Application Name and URL should  be unique.  Error: ' +
+            error.status);
+            return;
+          } else if(error.status == 500){
+            this.openConfirmationModal('Error', 'There was a problem adding the application information. ' +
+            'Please try again later. Error: ' +error.status);
+            return;
+          }else if(error.status == 400){
+            this.openConfirmationModal('Error','Bad Request Error: ' + error.status);
+            return;
+          } else{
+            this.openConfirmationModal('Error', 'There was a problem adding the application changes. ' +
+            'Please try again. If the problem persists, then try again later. Error: ' +
+            error.status);
+            return;
+          }
+      });
+    }
+  }
+
+  isUrlValid(userInput){
+    //let  regexQuery = "/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i";
+    let  regexQuery = "https?://.+";
+    let res = userInput.match(regexQuery);
+    if(res == null){
+      return false;
+    }else{
+      return true;
+    }
+  }
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+
+  openInformationModal(_title: string, _message: string){
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+    return modalInfoRef;
+  }
+}
diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html
new file mode 100644
index 00000000..8a678917
--- /dev/null
+++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.html
@@ -0,0 +1,144 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 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.
+ 
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+ 
+              https://creativecommons.org/licenses/by/4.0/
+ 
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ 
+  ============LICENSE_END============================================
+   
+  -->
+  
+<div class="container">
+    <div class="w-ecomp-main-container">
+        <div class="applications-page-main" id="page-content">
+            <div id="microservice-onboarding-title" class="w-ecomp-main-view-title">
+                <h1 class="heading-page"> Application Onboarding</h1>
+            </div>   
+            
+            <mat-form-field>
+                <input matInput type="text" (keyup)="applyFilter($event.target.value)" placeholder="Search in entire table">
+            </mat-form-field>
+
+            <button type="button" style="float: right;" class="btn btn-primary" (click)="openAddApplicationModal('')">
+            <i class="icon ion-md-person-add"></i>&nbsp;Add App
+            </button>
+          
+            <div class="apps-table">
+                <!-- Applications Table goes here-->
+                <table mat-table [dataSource]="dataSource" matSort>
+                    <!-- Thumbnail Column -->
+                    <ng-container matColumnDef="thumbnail">
+                        <th id="col1" mat-header-cell *matHeaderCellDef> Thumbnail  </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-thumbnail" 
+                            mat-cell *matCellDef="let element; let i = index;">
+                            <div><img class="small-thumbnail" src={{element.imageLink}}></div>
+                        </td>
+                    </ng-container>  
+                    
+                    <!-- Application Name Column -->
+                    <ng-container matColumnDef="applicationName">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> Application Name </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-applicationName" 
+                            mat-cell *matCellDef="let element; let i=index;"> {{element.name}} </td>
+                    </ng-container>
+
+                    <!-- Active Column -->
+                    <ng-container matColumnDef="active">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> Active </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-active" 
+                            mat-cell *matCellDef="let element; let i=index;"> {{(element.isEnabled) ? 'yes' : 'no'}} </td>
+                    </ng-container>
+
+                    <!-- Integration Type Column -->
+                    <ng-container matColumnDef="integrationType">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> Integration Type </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-integrationType" 
+                            mat-cell *matCellDef="let element; let i=index;"> {{(element.restrictedApp) ? 'link' : 'standard'}} </td>
+                    </ng-container>
+
+                    <!-- Guest Access Column-->
+                    <ng-container matColumnDef="guestAccess">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> Guest Access </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-guestAccess" 
+                            mat-cell *matCellDef="let element; let i=index;">{{(element.isOpen) ? 'yes' : 'no'}} </td>
+                    </ng-container>
+
+                    <!-- url  column -->
+                    <ng-container matColumnDef="url">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> Url </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-url" 
+                            mat-cell *matCellDef="let element; let i=index;">{{element.url}} </td>
+                    </ng-container>
+
+                        <!-- rest url  column -->
+                        <ng-container matColumnDef="restURL">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> REST Url </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-restURL" 
+                            mat-cell *matCellDef="let element; let i=index;">{{element.restUrl}} </td>
+                    </ng-container>
+
+                    <!-- communicationKey column -->
+                    <ng-container matColumnDef="communicationKey">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> Communication Key </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-communicationKey" 
+                            mat-cell *matCellDef="let element; let i=index;">{{element.uebKey}} </td>
+                    </ng-container>
+
+                    <!-- applicationNamespace column -->
+                    <ng-container matColumnDef="applicationNamespace">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> Application Namespace </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-applicationNamespace" 
+                            mat-cell *matCellDef="let element; let i=index;">{{element.nameSpace}} </td>
+                    </ng-container>
+
+                    <!-- centralAuthAccess column -->
+                    <ng-container matColumnDef="centralAuthAccess">
+                        <th id="col2" mat-header-cell *matHeaderCellDef> Central Auth Access </th>
+                        <td (click)="openAddApplicationModal(element)" id="rowheader_t1_{{i}}-centralAuthAccess" 
+                            mat-cell *matCellDef="let element; let i=index;">{{(element.isCentralAuth) ? 'yes' : 'no'}} </td>
+                    </ng-container>
+
+                    <!-- Delete Column -->
+                    <ng-container matColumnDef="delete">
+                        <th id="col4" mat-header-cell *matHeaderCellDef> Delete </th>
+                        <td id="rowheader_t1_{{i}}" mat-cell *matCellDef="let element; let i=index;">
+                        <span class="icon-trash" id="{{i}}-button-portal-admin-remove" (click)="deleteApplication(element)">
+                            <i class="icon ion-md-trash"></i>
+                        </span>
+                        </td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table>
+                <mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>
+              </div>
+          </div>
+      </div>
+  </div>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/footer/footer.component.ts b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.scss
index bfbc292a..6bca524d 100644
--- a/portal-FE-os/src/app/layout/components/footer/footer.component.ts
+++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.scss
@@ -2,7 +2,7 @@
  * ============LICENSE_START==========================================
  * ONAP Portal
  * ===================================================================
- * Copyright (C) 2017-2018 AT&T Intellectual Property. All rights reserved.
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
  * ===================================================================
  *
  * Unless otherwise specified, all software contained herein is licensed
@@ -33,26 +33,27 @@
  *
  * ============LICENSE_END============================================
  *
- *
+ * 
  */
- 
-import { Component, OnInit } from '@angular/core';
-import { ManifestService } from '../shared/services';
 
-@Component({
-  selector: 'app-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
-})
-export class FooterComponent implements OnInit {
-
-  buildVersion;
-  constructor(private manifest: ManifestService) { }
+ 
+.container{
+    overflow-y: auto;
+}
 
-  ngOnInit() {
-    this.manifest.getManifest().subscribe((_res: any) => {
-      this.buildVersion = _res;
-    })
-  }
+.container .apps-table .small-thumbnail {
+    width: 72px;
+    height: 60px;
+    border: 1px solid#d2d2d2;
+    border-radius: 2px;
+}
 
+.container .apps-table th{
+    padding-bottom: 15px;
+    padding-right: 40px;
+    font-weight: bold;
 }
+
+.ion-md-trash{
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/search-users/search-users.component.spec.ts b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.spec.ts
index 66a966cf..8e198387 100644
--- a/portal-FE-os/src/app/layout/components/search-users/search-users.component.spec.ts
+++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.spec.ts
@@ -38,21 +38,21 @@
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SearchUsersComponent } from './search-users.component';
+import { ApplicationOnboardingComponent } from './application-onboarding.component';
 
-describe('SearchUsersComponent', () => {
-  let component: SearchUsersComponent;
-  let fixture: ComponentFixture<SearchUsersComponent>;
+describe('ApplicationOnboardingComponent', () => {
+  let component: ApplicationOnboardingComponent;
+  let fixture: ComponentFixture<ApplicationOnboardingComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SearchUsersComponent ]
+      declarations: [ ApplicationOnboardingComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SearchUsersComponent);
+    fixture = TestBed.createComponent(ApplicationOnboardingComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts
new file mode 100644
index 00000000..8cbf1d28
--- /dev/null
+++ b/portal-FE-os/src/app/pages/application-onboarding/application-onboarding.component.ts
@@ -0,0 +1,188 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 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.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+
+import { Component, OnInit, ViewChild, Input} from '@angular/core';
+import { MatTableDataSource } from '@angular/material';
+import { MatSort, MatPaginator } from '@angular/material';
+import { ApplicationsService } from '../../shared/services/index';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { IApplications } from 'src/app/shared/model/applications-onboarding/applications';
+import { environment } from '../../../environments/environment';
+import { ApplicationDetailsDialogComponent } from './application-details-dialog/application-details-dialog.component';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+
+@Component({
+  selector: 'app-application-onboarding',
+  templateUrl: './application-onboarding.component.html',
+  styleUrls: ['./application-onboarding.component.scss']
+})
+export class ApplicationOnboardingComponent implements OnInit {
+
+  api = environment.api;
+  appsList: Array<IApplications> = [];
+  result: any;
+  isEditMode: boolean = false;
+  emptyImgForPreview: string;
+  isUserSuperAdmin: boolean = false;
+  displayedColumns: string[] = ['thumbnail', 'applicationName','active', 
+  'integrationType', 'guestAccess', 'url','restURL',
+  'communicationKey', 'applicationNamespace', 'centralAuthAccess'];
+  dataSource = new MatTableDataSource(this.appsList);
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  constructor(public applicationsService: ApplicationsService, public ngbModal: NgbModal) { }
+
+  ngOnInit() {
+    this.emptyImgForPreview = '../../../assets/images/default_app_image.gif';
+    this.checkIfUserIsSuperAdmin();
+    this.getOnboardingApps();
+  }
+
+  getOnboardingApps(){
+    //console.log("getOnboardingApps called");
+    this.applicationsService.getOnboardingApps()
+      .subscribe(_data => {
+          this.result = _data;
+          if (this.result == null || this.result == 'undefined') {
+              console.log('WidgetOnboardingService::getOnboardingWidgets Failed: Result or result.data is null');
+          }else {
+            this.appsList = _data;
+            for (var i = 0; i < this.appsList.length; i++) {
+              this.appsList[i].imageLink = '';
+              if (this.appsList[i].imageUrl){
+                this.appsList[i].imageLink = this.api.appThumbnail.replace(':appId', this.appsList[i].id);
+                this.appsList[i].imageLink = this.appsList[i].imageLink+'?' + new Date().getTime();
+              }else{
+                this.appsList[i].imageLink = this.emptyImgForPreview;
+              }                    			
+            }
+            this.populateTableData(this.appsList);
+          }
+      }, error =>{
+        console.log(error);
+        this.openConfirmationModal('Error', error.message);
+    });
+  }
+
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  };
+
+  
+  populateTableData(appsList: Array<IApplications>){
+    this.dataSource = new MatTableDataSource(appsList);
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  };
+
+  openAddApplicationModal(rowData: any) {
+    const modalRef = this.ngbModal.open(ApplicationDetailsDialogComponent, { size: 'lg' });
+    modalRef.componentInstance.title = 'Application Details';
+    //console.log("selectedData in parent",rowData);
+    if(rowData != 'undefined' && rowData){
+      modalRef.componentInstance.applicationObj = rowData;
+      this.isEditMode = true;
+    }else{
+      modalRef.componentInstance.applicationObj  = {};
+      this.isEditMode = false;
+    }
+    modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
+      //console.log("receivedEntry >>> ",receivedEntry);
+      if(receivedEntry){
+        this.appsList.push(receivedEntry);
+        //this.populateTableData(this.appsList);
+        this.getOnboardingApps();
+      }
+    });
+  }
+
+  deleteApplication(application: IApplications){
+    let confirmationMsg = 'You are about to delete this App : ' + application.name+ '. Click OK to continue.';
+    this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => {
+      if (result === 'Ok') {
+        if(!application || application == null){
+          console.log('ApplicationOnboardingCtrl::deleteApplication: No apllication or ID... cannot delete');
+          return;
+        }
+        this.appsList.splice(this.appsList.indexOf(application), 1);
+        this.applicationsService.deleteOnboardingApp(application.id)
+          .subscribe( data => {
+            this.result = data;
+            this.getOnboardingApps();
+          }, error => {
+            console.log(error);
+            this.openConfirmationModal('Error', error);
+        });
+      }
+    }, (resut) => {
+      return;
+    })
+  }
+
+  checkIfUserIsSuperAdmin(){
+    this.applicationsService.checkIfUserIsSuperAdmin()
+      .subscribe(res => {
+        if(res) {
+          this.isUserSuperAdmin = true;
+          this.displayedColumns = ['thumbnail', 'applicationName','active', 
+          'integrationType', 'guestAccess', 'url','restURL',
+          'communicationKey', 'applicationNamespace', 'centralAuthAccess', 'delete'];
+        }  
+        //console.log("isUserSuperAdmin :: ",this.isUserSuperAdmin);
+      }, error =>{
+        console.log(error);
+        this.openConfirmationModal('Error', 'ApplicationsCtrl.checkIfUserIsSuperAdmin:: Failed '+error.message);
+    });
+  }
+
+  openConfirmationModal(_title: string, _message: string) {
+    const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+  }
+
+  openInformationModal(_title: string, _message: string){
+    const modalInfoRef = this.ngbModal.open(InformationModalComponent);
+    modalInfoRef.componentInstance.title = _title;
+    modalInfoRef.componentInstance.message = _message;
+    return modalInfoRef;
+  }
+
+}
diff --git a/portal-FE-os/src/app/pages/pages-routing.module.ts b/portal-FE-os/src/app/pages/pages-routing.module.ts
new file mode 100644
index 00000000..d39db03c
--- /dev/null
+++ b/portal-FE-os/src/app/pages/pages-routing.module.ts
@@ -0,0 +1,89 @@
+/*
+ * ============LICENSE_START==========================================
+ * ONAP Portal SDK
+ * ===================================================================
+ * Copyright � 2019 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.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AdminsComponent } from './admins/admins.component';
+import { DashboardComponent } from '../pages/dashboard/dashboard.component';
+import { PortalAdminsComponent } from './portal-admins/portal-admins.component';
+import { RoleComponent } from './role/role.component';
+import { UsersComponent } from './users/users.component';
+import { FunctionalMenuComponent } from './functional-menu/functional-menu.component';
+import { UserNotificationAdminComponent } from './user-notification-admin/user-notification-admin.component';
+import { WebAnalyticsComponent } from './web-analytics/web-analytics.component';
+import { ApplicationCatalogComponent } from './application-catalog/application-catalog.component';
+import { WidgetCatalogComponent } from './widget-catalog/widget-catalog.component';
+import { MicroserviceOnboardingComponent } from './microservice-onboarding/microservice-onboarding.component';
+import { ApplicationOnboardingComponent } from './application-onboarding/application-onboarding.component';
+import { WidgetOnboardingComponent } from './widget-onboarding/widget-onboarding.component';
+import { AccountOnboardingComponent } from './account-onboarding/account-onboarding.component';
+import { ContactUsComponent } from './contact-us/contact-us.component';
+import { RoleFunctionsComponent } from './role/role-functions/role-functions.component';
+import { NotificationHistoryComponent } from './notification-history/notification-history.component';
+import { GetAccessComponent } from './get-access/get-access.component';
+
+const routes: Routes = [
+    { path: '', component: DashboardComponent },
+    { path: 'applicationsHome', component: DashboardComponent },
+    { path: 'admins', component: AdminsComponent },
+    { path: 'portalAdmins', component: PortalAdminsComponent },
+    { path: 'appCatalog', component: ApplicationCatalogComponent },
+    { path: 'widgetCatalog', component: WidgetCatalogComponent },
+    { path: 'roles', component: RoleComponent },
+    { path: 'roleFunctions', component: RoleFunctionsComponent },
+    { path: 'users', component: UsersComponent },
+    { path: 'applications', component: ApplicationOnboardingComponent },
+    { path: 'widgetOnboarding', component: WidgetOnboardingComponent },
+    { path: 'functionalMenu', component: FunctionalMenuComponent },
+    { path: 'userNotifications', component: UserNotificationAdminComponent },
+    { path: 'microserviceOnboarding', component: MicroserviceOnboardingComponent },
+    { path: 'accountOnboarding', component: AccountOnboardingComponent },
+    { path: 'webAnlayticsSource', component: WebAnalyticsComponent },
+    { path: 'contactUs', component: ContactUsComponent },
+    { path: 'getAccess', component: GetAccessComponent },
+    { path: 'recentNotifications', component: NotificationHistoryComponent },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class PagesRoutingModule { }
+
+
+
diff --git a/portal-FE-os/src/app/layout/layout.component.html b/portal-FE-os/src/app/pages/pages.component.html
index 757c9860..9196ffe5 100644
--- a/portal-FE-os/src/app/layout/layout.component.html
+++ b/portal-FE-os/src/app/pages/pages.component.html
@@ -36,10 +36,4 @@
   
   -->
 
-  <app-header></app-header>
-  <app-tabbar></app-tabbar>
-  <app-footer></app-footer>
-  
-  
-  
-  
\ No newline at end of file
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/footer/footer.component.scss b/portal-FE-os/src/app/pages/pages.component.scss
index deb2b804..b7697e62 100644
--- a/portal-FE-os/src/app/layout/components/footer/footer.component.scss
+++ b/portal-FE-os/src/app/pages/pages.component.scss
@@ -1,8 +1,8 @@
-/*
+/*-
  * ============LICENSE_START==========================================
- * ONAP Portal SDK
+ * ONAP Portal
  * ===================================================================
- * Copyright � 2019 AT&T Intellectual Property. All rights reserved.
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
  * ===================================================================
  *
  * Unless otherwise specified, all software contained herein is licensed
@@ -35,18 +35,15 @@
  *
  * 
  */
- 
-$topnav-background-color: #222;
-.footerText {
-  background-color: $topnav-background-color;
+/* ecomp page main title */
+.ecomp-main-view-title {
+  color: #191919;
+  font-size: 24px;
+  width: 1170px;
+  padding-bottom: 15px;
+  margin: auto;
 }
 
-.copyright-text {
-  background-color: $topnav-background-color;
-  color: #fff;
-  font-size: 11px;
-  margin-bottom: 0;
-  line-height: 3rem;
-  margin-top: 20px;
-  margin-left: 100px;
-}
+.heading-page {
+  margin-bottom: 40px;
+}
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/layout.component.spec.ts b/portal-FE-os/src/app/pages/pages.component.spec.ts
index 5184fe43..1bef834a 100644
--- a/portal-FE-os/src/app/layout/layout.component.spec.ts
+++ b/portal-FE-os/src/app/pages/pages.component.spec.ts
@@ -37,21 +37,21 @@
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LayoutComponent } from './layout.component';
+import { PagesComponent } from './pages.component';
 
-describe('LayoutComponent', () => {
-  let component: LayoutComponent;
-  let fixture: ComponentFixture<LayoutComponent>;
+describe('PagesComponent', () => {
+  let component: PagesComponent;
+  let fixture: ComponentFixture<PagesComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LayoutComponent ]
+      declarations: [ PagesComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LayoutComponent);
+    fixture = TestBed.createComponent(PagesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/portal-FE-os/src/app/layout/layout.component.ts b/portal-FE-os/src/app/pages/pages.component.ts
index b512988d..69153667 100644
--- a/portal-FE-os/src/app/layout/layout.component.ts
+++ b/portal-FE-os/src/app/pages/pages.component.ts
@@ -1,8 +1,8 @@
-/*
+/*-
  * ============LICENSE_START==========================================
- * ONAP Portal SDK
+ * ONAP Portal
  * ===================================================================
- * Copyright © 2019 AT&T Intellectual Property. All rights reserved.
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
  * ===================================================================
  *
  * Unless otherwise specified, all software contained herein is licensed
@@ -38,19 +38,15 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-    selector: 'app-layout',
-    templateUrl: './layout.component.html',
-    styleUrls: ['./layout.component.scss']
+  selector: 'app-pages',
+  templateUrl: './pages.component.html',
+  styleUrls: ['./pages.component.scss']
 })
-export class LayoutComponent implements OnInit {
+export class PagesComponent implements OnInit {
 
-    collapedSideBar: boolean;
+  constructor() { }
 
-    constructor() {}
+  ngOnInit() {
+  }
 
-    ngOnInit() {}
-
-    receiveCollapsed($event) {
-        this.collapedSideBar = $event;
-    }
 }
diff --git a/portal-FE-os/src/app/pages/pages.module.ts b/portal-FE-os/src/app/pages/pages.module.ts
new file mode 100644
index 00000000..7ccb3f95
--- /dev/null
+++ b/portal-FE-os/src/app/pages/pages.module.ts
@@ -0,0 +1,230 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 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.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ *
+ */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { AdminsComponent } from './admins/admins.component';
+import { ApplicationCatalogComponent } from './application-catalog/application-catalog.component';
+import { ApplicationOnboardingComponent } from './application-onboarding/application-onboarding.component';
+import { ApplicationDetailsDialogComponent } from './application-onboarding/application-details-dialog/application-details-dialog.component';
+import { AccountOnboardingComponent } from './account-onboarding/account-onboarding.component';
+import { ApplicationCatalogService } from '../shared/services/application-catalog/application-catalog.service';
+import { ContactUsComponent } from './contact-us/contact-us.component';
+import { ContactUsManageComponent } from './contact-us/contact-us-manage/contact-us-manage.component';
+import { ConfirmationModalComponent } from '../modals/confirmation-modal/confirmation-modal.component';
+import { CatalogModalComponent } from './catalog-modal/catalog-modal.component';
+import { DashboardComponent } from '../pages/dashboard/dashboard.component';
+import { FunctionalMenuComponent } from './functional-menu/functional-menu.component';
+import { GridsterModule } from 'angular-gridster2';
+import { InformationModalComponent } from '../modals/information-modal/information-modal.component';
+import { NgMaterialModule } from '../ng-material-module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NewPortalAdminComponent } from './portal-admins/new-portal-admin/new-portal-admin.component';
+import { NotificationHistoryComponent } from './notification-history/notification-history.component';
+import { PagesComponent } from './pages.component';
+import { PagesRoutingModule } from './pages-routing.module';
+import { PortalAdminsComponent } from './portal-admins/portal-admins.component';
+import { RoleComponent } from './role/role.component';
+import { SearchUsersComponent } from '../layout/components/search-users/search-users.component';
+import { SchedulerComponent } from './scheduler/scheduler.component';
+import { UserNotificationAdminComponent } from './user-notification-admin/user-notification-admin.component';
+import { WidgetsComponent } from './widgets/widgets.component';
+import { WidgetCatalogComponent } from './widget-catalog/widget-catalog.component';
+import { WebAnalyticsComponent } from './web-analytics/web-analytics.component';
+import { NewAdminComponent } from './admins/new-admin/new-admin.component';
+import { ExternalRequestAccessService } from '../shared/services/external-request-access-service/external-request-access.service';
+import { UsersService } from '../shared/services/users/users.service';
+import { DynamicWidgetComponent } from './dynamic-widget/dynamic-widget.component';
+import { MicroserviceOnboardingComponent } from './microservice-onboarding/microservice-onboarding.component';
+import { WidgetOnboardingComponent } from './widget-onboarding/widget-onboarding.component';
+import { WebAnalyticsDetailsDialogComponent } from './web-analytics/web-analytics-details-dialog/web-analytics-details-dialog.component';
+import { BulkUploadRoleComponent } from './role/bulk-upload-role/bulk-upload-role.component';
+import { AddRoleComponent } from './role/add-role/add-role.component';
+import { RoleFunctionsComponent } from './role/role-functions/role-functions.component';
+import { RoleFunctionModalComponent } from './role/role-functions/role-function-modal/role-function-modal.component';
+import { NewNotificationModalComponent } from './user-notification-admin/new-notification-modal/new-notification-modal.component';
+import { AccountAddDetailsComponent } from './account-onboarding/account-add-details/account-add-details.component';
+import { MicroserviceAddDetailsComponent } from './microservice-onboarding/microservice-add-details/microservice-add-details.component';
+import { DashboardApplicationCatalogComponent } from './dashboard-application-catalog/dashboard-application-catalog.component';
+import { DashboardWidgetCatalogComponent } from './dashboard-widget-catalog/dashboard-widget-catalog.component';
+import { WidgetDetailsDialogComponent } from './widget-onboarding/widget-details-dialog/widget-details-dialog.component';
+import { FunctionalMenuDialogComponent } from './functional-menu/functional-menu-dialog/functional-menu-dialog.component';
+import { GetAccessComponent } from './get-access/get-access.component';
+import { PluginModule } from '../shared/plugin/plugin.module';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HeaderInterceptor } from '../shared/interceptors/header-interceptor';
+import { ApplicationPipesModule } from '../shared/pipes/application-pipes.module';
+import { UsersComponent } from './users/users.component';
+import { NewUserModalComponent } from './users/new-user-modal/new-user-modal.component';
+import { BulkUserComponent } from './users/bulk-user/bulk-user.component';
+import { UserDetailsFormComponent } from './users/user-details-form/user-details-form.component';
+
+
+@NgModule({
+  declarations: [
+    PagesComponent,
+    DashboardComponent,
+    PortalAdminsComponent,
+    AccountOnboardingComponent,
+    FunctionalMenuComponent,
+    MicroserviceOnboardingComponent,
+    NotificationHistoryComponent,
+    RoleComponent,
+    SchedulerComponent,
+    UserNotificationAdminComponent,
+    UsersComponent,
+    WidgetCatalogComponent,
+    WidgetOnboardingComponent,
+    WidgetsComponent,
+    WebAnalyticsComponent,
+    NewAdminComponent,
+    NewUserModalComponent,
+    BulkUserComponent,
+    SearchUsersComponent,
+    InformationModalComponent,
+    ConfirmationModalComponent,
+    AdminsComponent,
+    NewPortalAdminComponent,
+    SchedulerComponent,
+    UserNotificationAdminComponent,
+    WidgetCatalogComponent,
+    ApplicationOnboardingComponent,
+    AccountOnboardingComponent,
+    ApplicationDetailsDialogComponent,
+    ContactUsComponent,
+    ContactUsManageComponent,
+    WebAnalyticsDetailsDialogComponent,
+    ApplicationCatalogComponent,
+    WidgetCatalogComponent,
+    CatalogModalComponent,
+    DynamicWidgetComponent,
+    BulkUploadRoleComponent,
+    AddRoleComponent,
+    RoleFunctionsComponent,
+    RoleFunctionModalComponent,
+    NewNotificationModalComponent,
+    AccountAddDetailsComponent,
+    MicroserviceAddDetailsComponent,
+    WidgetDetailsDialogComponent,
+    DashboardApplicationCatalogComponent,
+    DashboardWidgetCatalogComponent,
+    FunctionalMenuDialogComponent,
+    GetAccessComponent,
+    UserDetailsFormComponent
+  ],
+  imports: [
+    CommonModule,
+    NgMaterialModule,
+    ReactiveFormsModule,
+    FormsModule,
+    PagesRoutingModule,
+    ApplicationPipesModule,
+    NgbModule,
+    GridsterModule,
+    MatIconModule,
+    MatCheckboxModule,
+    FormsModule,
+    PluginModule
+  ],
+  entryComponents: [
+    SchedulerComponent,
+    InformationModalComponent,
+    SearchUsersComponent,
+    ConfirmationModalComponent,
+    NewPortalAdminComponent,
+    NewAdminComponent,
+    BulkUserComponent,
+    NewUserModalComponent,
+    ApplicationDetailsDialogComponent,
+    ContactUsManageComponent,
+    CatalogModalComponent,
+    WebAnalyticsDetailsDialogComponent,
+    AddRoleComponent,
+    BulkUploadRoleComponent,
+    RoleFunctionModalComponent,
+    NewNotificationModalComponent,
+    AccountAddDetailsComponent,
+    MicroserviceAddDetailsComponent,
+    WidgetDetailsDialogComponent,
+    FunctionalMenuDialogComponent
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: HeaderInterceptor,
+      multi: true,
+    }],
+
+
+})
+export class PagesModule {
+
+  constructor(public ngbModalService: NgbModal) {
+    this.addSchdulerEventListners();
+  }
+
+
+  addSchdulerEventListners() {
+    let eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+    let eventer = window[eventMethod];
+    let messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
+
+    eventer(messageEvent, function (e) {
+      if (e.data != null && e.data['widgetName'] == 'Portal-Common-Scheduler') {
+        this.openAddSchedulerModal(e.data);
+      }
+    }.bind(this), false);
+
+  }
+
+  openAddSchedulerModal(rowData: any) {
+    const modalRef = this.ngbModalService.open(SchedulerComponent, { size: 'lg' });
+    modalRef.componentInstance.title = 'Scheduler Change';
+    console.log("selectedData in parent", rowData);
+    if (rowData != 'undefined' && rowData) {
+      modalRef.componentInstance.payload = rowData;
+    } else {
+      modalRef.componentInstance.payload = {};
+    }
+
+  }
+}
diff --git a/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.html b/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.html
new file mode 100644
index 00000000..927b5073
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.html
@@ -0,0 +1,125 @@
+<!--
+  ============LICENSE_START==========================================
+  ONAP Portal
+  ===================================================================
+  Copyright (C) 2019 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.
+
+  Unless otherwise specified, all documentation contained herein is licensed
+  under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+  you may not use this documentation except in compliance with the License.
+  You may obtain a copy of the License at
+
+              https://creativecommons.org/licenses/by/4.0/
+
+  Unless required by applicable law or agreed to in writing, documentation
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+  ============LICENSE_END============================================
+
+
+  -->
+<div class="container" *ngIf="dialogState===1">
+  <div class="modal-header">
+    <h4 class="modal-title">{{title}}</h4>
+    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body" *ngIf="!addUserFlag">
+    <app-search-users [searchTitle]="searchTitleText" [isSystemUser]="isSystemUserCheck" [placeHolder]="placeholderText"
+      (passBackSelectedUser)='changeSelectedUser($event)' (userNotFoundFlag)='addNewUser($event)'></app-search-users>
+  </div>
+  <div *ngIf="addUserFlag">
+    <app-user-details-form></app-user-details-form>
+  </div>
+  <div class="modal-footer" *ngIf="!addUserFlag">
+    <button type="submit" class="btn btn-primary" [disabled]='!changedSelectedUser && !isSystemUserCheck'
+      (click)="getUserAppsRoles()">Next</button> &nbsp;
+    <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Close</button>
+  </div>
+</div>
+<div class="container" *ngIf="dialogState===2">
+  <div class="modal-header">
+    <h4 class="modal-title">{{userTitle}}</h4>
+    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body adminApps">
+    <!-- User App Roles List -->
+    <span class="ecomp-spinner" *ngIf="adminApps.length === 0"></span>
+    <div class="container adminApps" *ngIf="adminApps.length > 0">
+      Access and roles:
+      <table mat-table [dataSource]="userAdminAppsSource">
+        <!-- Search Result Column-->
+        <ng-container matColumnDef="applications">
+          <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Application
+          <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">{{element.name}}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="roles">
+          <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Roles
+          <td id="rowheader_t1_{{i}}-roles" mat-cell *matCellDef="let element; let i=index;">
+            <mat-form-field
+              [hidden]="element.isError || element.showSpinner || element.noChanges || element.isUpdating || element.isDoneUpdating || element.isErrorUpdating">
+              <mat-select (selectionChange)="roleSelectChange(element)"
+                [(ngModel)]="modelSelectedRoles" multiple>
+                <mat-option *ngFor="let appRole of element.appRoles; let j = index;" [value]="appRole">
+                  {{appRole.roleName}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <span id="app-item-no-contact" class="app-item-right-error"
+              [hidden]="!element.isError">{{element.errorMessage}}</span>
+            <span id="app-item-contacting" class="app-item-right-contacting" [hidden]="!element.showSpinner">Contacting
+              application... <span class="ecomp-small-spinner" *ngIf="showSpinner"></span></span>
+            <span id="app-item-no-changes" class="app-item-right-contacting" [hidden]="!element.noChanges">No
+              changes</span>
+            <span id="app-item-no-updating" class="app-item-right-contacting" [hidden]="!element.isUpdating">Updating
+              application... <span class="ecomp-small-spinner" *ngIf="showSpinner"></span></span>
+            <span id="app-item-done-updating" class="app-item-right-contacting"
+              [hidden]="!element.isDoneUpdating">Finished updating application</span>
+            <span id="app-item-cannot-update" class="app-item-right-error" [hidden]="!element.isErrorUpdating">Could not
+              update application... </span>
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="delete">
+          <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Delete
+          <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
+            <span class="icon-trash" id="app-item-delete-{{i}}" [hidden]="element.showSpinner || element.isError"
+              (click)="deleteApp(element)">
+              <i class="icon ion-md-trash"></i>
+            </span>
+          </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+        <tr [hidden]="row.isDeleted" mat-row id="table-row-{{i}}"
+          *matRowDef="let row; columns: displayedColumns; let i = index;"></tr>
+      </table>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button [hidden]="disableBack" type="submit" class="btn btn-primary" [disabled]='!changedSelectedUser'
+      (click)="navigateBack()">Back</button> &nbsp;
+    <button type="submit" class="btn btn-primary" [disabled]='!anyChanges' (click)="updateUserAppsRoles()">Save</button>
+    &nbsp;
+    <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Close</button>
+  </div>
+</div>
diff --git a/portal-FE-os/src/app/layout/components/search-users/search-users.component.scss b/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.scss
index 95a2a5ec..b919f362 100644
--- a/portal-FE-os/src/app/layout/components/search-users/search-users.component.scss
+++ b/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.scss
@@ -35,22 +35,17 @@
  *
  * 
  */
- 
-@import "../../../pages/pages.component";
-
-.mat-row {
+.icon-trash {
   cursor: pointer;
-  background-color: #f2f2f2;
-}
-.selected {
-  background-color: #ffffff !important;
+  font-size: 20px;
 }
 
-.search-user-container {
-  overflow-y: auto;
-  height: 250px;
+.app-item-right-error {
+  color: red;
 }
 
-.ecomp-spinner{
-  opacity: 10;
-}
+::ng-deep .mat-pseudo-checkbox-checked::after {
+  left: 1px !important;
+  width: 11px !important;
+  height: 5px !important;
+}
\ No newline at end of file
diff --git a/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.spec.ts b/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.spec.ts
index 889f499a..beb998cf 100644
--- a/portal-FE-os/src/app/layout/components/header-menu/header-menu.component.spec.ts
+++ b/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.spec.ts
@@ -37,21 +37,21 @@
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeaderMenuComponent } from './header-menu.component';
+import { NewUserModalComponent } from './new-user-modal.component';
 
-describe('HeaderMenuComponent', () => {
-  let component: HeaderMenuComponent;
-  let fixture: ComponentFixture<HeaderMenuComponent>;
+describe('NewUserModalComponent', () => {
+  let component: NewUserModalComponent;
+  let fixture: ComponentFixture<NewUserModalComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeaderMenuComponent ]
+      declarations: [ NewUserModalComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HeaderMenuComponent);
+    fixture = TestBed.createComponent(NewUserModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.ts b/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.ts
new file mode 100644
index 00000000..76c14f17
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/new-user-modal/new-user-modal.component.ts
@@ -0,0 +1,322 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 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.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ *
+ */
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ApplicationsService, UsersService } from 'src/app/shared/services';
+import { MatTableDataSource, MatRadioChange } from '@angular/material';
+import { UserAdminApps, UserAccessRoles } from 'src/app/shared/model';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
+import { HttpErrorResponse } from '@angular/common/http';
+
+@Component({
+  selector: 'app-new-user-modal',
+  templateUrl: './new-user-modal.component.html',
+  styleUrls: ['./new-user-modal.component.scss']
+})
+export class NewUserModalComponent implements OnInit {
+  @Input() dialogState: number;
+  @Input() userTitle: string;
+  @Input() disableBack: boolean;
+  @Input() adminModalData: any;
+  @Input() userModalData: any;
+  @Output() passBackNewUserPopup: EventEmitter<any> = new EventEmitter();
+  changedSelectedUser: any;
+  showSpinner: boolean;
+  isGettingAdminApps: boolean;
+  adminApps: any;
+  modelSelectedRoles: any;
+  appRoles: Array<UserAccessRoles>;
+  numberAppsProcessed: number;
+  isSystemUserCheck = false;
+  extRequestValue = false;
+  searchTitleText = 'Enter First Name, Last Name or Org-ID';
+  placeholderText = 'Search';
+  ngRepeatDemo = [
+    { id: 'userButton', value: 'true', labelValue: 'User' },
+    { id: 'systemUserButton', value: 'false', labelValue: 'System' }
+  ]
+  selectedvalueradioButtonGroup = {
+    type: 'true'
+  }
+  userRadioSearchButton = this.ngRepeatDemo[0].labelValue;
+  displayedColumns: string[] = ['applications', 'roles', 'delete'];
+  userAdminAppsSource = new MatTableDataSource(this.adminApps);
+  showAppSpinner: boolean;
+  isError: boolean;
+  errorMessage: any;
+  originalSelectedRoles: any;
+  numberAppsSucceeded: number;
+  anyChanges: boolean;
+  orgUserIdValue: string;
+  constructor(public ngbModal: NgbModal, public activeModal: NgbActiveModal, private applicationsService: ApplicationsService, private usersService: UsersService) { }
+
+  ngOnInit() {
+    this.appRoles = [];
+    this.adminApps = [];
+    this.anyChanges = false;
+    this.modelSelectedRoles = [];
+    this.originalSelectedRoles = [];
+    this.changedSelectedUser = null;
+    if (this.dialogState === 2) {
+      this.changedSelectedUser = this.userModalData;
+      this.orgUserIdValue = this.changedSelectedUser.orgUserId;
+      this.getUserAppsRoles();
+    }
+  }
+
+  addUserFlag : boolean = false;
+
+  addNewUser(newUserFlag : boolean){
+    console.log("New user flag ", newUserFlag);
+    this.addUserFlag = true;
+  }
+
+  changeSelectedUser(user: any) {
+    this.changedSelectedUser = user;
+    if (this.changedSelectedUser.firstName === undefined || this.changedSelectedUser.lastName === undefined) {
+      this.userTitle = this.changedSelectedUser;
+      this.orgUserIdValue = this.changedSelectedUser;
+    }
+    else {
+      this.orgUserIdValue = this.changedSelectedUser.orgUserId;
+      this.userTitle = `${this.changedSelectedUser.firstName}, ` + ` ${this.changedSelectedUser.lastName} ` + ` (${this.changedSelectedUser.orgUserId})`;
+    }
+  }
+
+  searchUserRadioChange($event: MatRadioChange) {
+    if ($event.value === 'System') {
+      this.searchTitleText = 'Enter System UserID';
+      this.placeholderText = 'xxxxxx@org.com';
+      this.isSystemUserCheck = true;
+    } else {
+      this.searchTitleText = 'Enter First Name, Last Name or ATTUID';
+      this.placeholderText = 'Search';
+      this.isSystemUserCheck = false;
+    }
+  }
+
+  navigateBack() {
+    this.anyChanges = false;
+    this.dialogState = 1;
+  }
+
+  roleSelectChange(element: any) { // update this.adminApps list when user select roles from dropdown
+    let existingSelectedRoles = this.modelSelectedRoles;
+    this.modelSelectedRoles = [];
+    this.anyChanges = true;
+    this.adminApps.forEach(_item => {
+      if (_item.id === element.id) {
+        _item['isChanged'] = true;
+      }
+      let appRoleList = _item.appRoles;
+      if (appRoleList != undefined) {
+        appRoleList.forEach(_itemRole => {
+          if (_itemRole.appId === element.id) {
+            const index = existingSelectedRoles.indexOf(_itemRole);
+            if (index != -1) {
+              _itemRole.isApplied = true;
+            } else {
+              _itemRole.isApplied = false;
+            }
+          }
+          if (_itemRole.isApplied)
+            this.modelSelectedRoles.push(_itemRole);
+        });
+      }
+    });
+  }
+
+  getUserAppsRoles() {
+    if (this.changedSelectedUser === undefined) {
+      this.dialogState = 1;
+      return;
+    }
+    this.isGettingAdminApps = true;
+    this.applicationsService.getAdminApps().subscribe((apps: Array<UserAdminApps>) => {
+      this.isGettingAdminApps = false;
+      if (!apps || !apps.length) {
+        return null;
+      }
+      this.adminApps = apps;
+      this.dialogState = 2;
+      this.numberAppsProcessed = 0;
+      this.showSpinner = true;
+      apps.forEach(app => {
+        //$log.debug('NewUserModalCtrl::getUserAppsRoles: app: id: ', app.id, 'name: ',app.name);
+        // Keep track of which app has changed, so we know which apps to update using a BE API
+        app['isChanged'] = false;
+        // Each of these specifies a state, which corresponds to a different message and style that gets displayed
+        app['showSpinner'] = true;
+        app['isError'] = false;
+        app['isDeleted'] = false;
+        app['printNoChanges'] = false;
+        app['isUpdating'] = false;
+        app['isErrorUpdating'] = false;
+        app['isDoneUpdating'] = false;
+        app['errorMessage'] = "";
+        this.usersService.getUserAppRoles(app.id, this.orgUserIdValue, this.extRequestValue, this.isSystemUserCheck).toPromise().then((userAppRolesResult) => {
+          app['appRoles'] = userAppRolesResult;
+          app['showSpinner'] = false;
+          for (var i = 0; i < app['appRoles'].length; i++) {
+            app['appRoles'][i]['appId'] = app.id;
+            if (app['appRoles'][i].roleName.indexOf('global_') != -1) {
+              app['appRoles'][i].roleName = '*' + app['appRoles'][i].roleName;
+            }
+            if (app['appRoles'][i].isApplied)
+              this.modelSelectedRoles.push(app['appRoles'][i]);
+          }
+        }).catch((err: HttpErrorResponse) => {
+          app['isError'] = true;
+          app['showSpinner'] = false;
+          if (err.status == 200 || err.message.toLowerCase().includes("rollback"))
+            app['errorMessage'] = 'Error: ' + 500;
+          else
+            app['errorMessage'] = 'Error: ' + err.status;
+        }).finally(() => {
+          this.numberAppsProcessed++;
+          if (this.numberAppsProcessed === this.adminApps.length) {
+            this.originalSelectedRoles = this.modelSelectedRoles;
+            this.showSpinner = false;
+          }
+        });
+      })
+      this.userAdminAppsSource = new MatTableDataSource(this.adminApps);
+    }, (_err) => {
+
+    })
+  }
+
+  updateUserAppsRoles() {
+    this.anyChanges = false;
+    if (!this.changedSelectedUser ||
+        (this.changedSelectedUser.orgUserId == undefined && !this.isSystemUserCheck) ||
+          !this.adminApps) {
+      return;
+    }
+    this.showSpinner = true;
+    this.numberAppsProcessed = 0;
+    this.numberAppsSucceeded = 0;
+    this.adminApps.forEach(app => {
+      if (app.isChanged) {
+        app.isUpdating = true;
+        for (var i = 0; i < app.appRoles.length; i++) {
+          if (app.appRoles[i].roleName.indexOf('*global_') != -1) {
+            app.appRoles[i].roleName = app.appRoles[i].roleName.replace('*', '');
+          }
+        }
+        var newUserAppRoles = {
+          orgUserId: this.orgUserIdValue,
+          appId: app.id,
+          appRoles: app.appRoles,
+          appName: app.name,
+          isSystemUser: this.isSystemUserCheck
+        };
+        this.usersService.updateUserAppRoles(newUserAppRoles).toPromise()
+          .then((res: any) => {
+            if (res.status && res.status.toLowerCase() === 'error') {
+              const modalErrorRef = this.ngbModal.open(ConfirmationModalComponent);
+              modalErrorRef.componentInstance.message = "Error: " + res.message;
+            }
+            app.isUpdating = false;
+            app.isDoneUpdating = true;
+            this.numberAppsSucceeded++;
+          }).catch(err => {
+            var errorMessage = 'Failed to update the user application roles: ' + err;
+            if (err.status == 504) {
+              this.numberAppsSucceeded++;
+              errorMessage = 'Request is being processed, please check back later!';
+            } else {
+              app.isErrorUpdating = true;
+            }
+            const modalErrorRef = this.ngbModal.open(ConfirmationModalComponent);
+            modalErrorRef.componentInstance.message = errorMessage;
+          }).finally(() => {
+            this.numberAppsProcessed++;
+            if (this.numberAppsProcessed === this.adminApps.length) {
+              this.showSpinner = false; // hide the spinner
+            }
+            if (this.numberAppsSucceeded === this.adminApps.length) {
+              this.passBackNewUserPopup.emit();
+              this.activeModal.close('Close');//close and resolve dialog promise with true (to update the table)
+            }
+          })
+      } else {
+        app.noChanges = true;
+        app.isError = false; //remove the error message; just show the No Changes messages
+        this.numberAppsProcessed++;
+        this.numberAppsSucceeded++;
+        if (this.numberAppsProcessed === this.adminApps.length) {
+          this.showSpinner = false; // hide the spinner
+        }
+        if (this.numberAppsSucceeded === this.adminApps.length) {
+          this.activeModal.close('Close');
+        }
+      }
+    });
+  }
+
+  deleteApp(app) {
+    let appMessage = this.changedSelectedUser.firstName + ' ' + this.changedSelectedUser.lastName;
+    const ngbModalConfirm = this.ngbModal.open(InformationModalComponent);
+    ngbModalConfirm.componentInstance.title = 'Confirmation';
+    ngbModalConfirm.componentInstance.message = 'Are you sure you want to delete ' + appMessage;
+    ngbModalConfirm.result.then((_res) => {
+      if (_res === 'Ok') {
+        this.anyChanges = true;
+        app.isChanged = true;
+        app.isDeleted = true; // use this to hide the app in the display
+        app.appRoles.forEach((role) => {
+          role.isApplied = false;
+        });
+        // remove app roles if user app delete option is selected
+        this.modelSelectedRoles.forEach((_role, index) => {
+          if (_role.appId === app.id) this.modelSelectedRoles.splice(index, 1);
+        })
+        this.roleSelectChange(app);
+      }
+    }).catch(err => {
+      // $log.error('NewUserModalCtrl::deleteApp error: ',err);
+      const ngbModalError = this.ngbModal.open(InformationModalComponent);
+      ngbModalError.componentInstance.title = 'Error';
+      ngbModalError.componentInstance.message = 'There was a problem deleting the the applications. ' +
+        'Please try again later. Error: ' + err.status;
+    });
+  }
+
+}
diff --git a/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.html b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.html
new file mode 100644
index 00000000..7fc35e44
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.html
@@ -0,0 +1,118 @@
+<div class="modal-body">
+  <form [formGroup]="addNewUserForm">
+    <div class="modal-body">
+      <div class="new-users-details-modal">
+        <div class="new-users-main">
+  
+          <!-- First Name -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*First Name</div>
+              <input class="form-control" formControlName="firstName" type="text"
+                [ngClass]="{ 'is-invalid': submitted && formValue.firstName.errors }" />
+              <div *ngIf="submitted && formValue.firstName.errors" class="invalid-feedback">
+                <div *ngIf="formValue.firstName.errors.required">
+                  First Name is required
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Middle Name -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>Middle Name</div>
+              <input class="form-control" formControlName="middleInitial" type="text" />
+            </div>
+          </div>
+  
+          <!-- Last Name -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Last Name</div>
+              <input class="form-control" formControlName="lastName" type="text"
+                [ngClass]="{ 'is-invalid': submitted && formValue.lastName.errors }" />
+              <div *ngIf="submitted && formValue.lastName.errors" class="invalid-feedback">
+                <div *ngIf="formValue.lastName.errors.required">
+                  Last Name is required
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Email Address ID -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Email Address ID</div>
+              <input class="form-control" formControlName="email" type="text"
+                [ngClass]="{ 'is-invalid': submitted && formValue.email.errors }" />
+              <div *ngIf="submitted && formValue.email.errors" class="invalid-feedback">
+                <div *ngIf="formValue.email.errors.required">
+                  Email Address is required
+                </div>
+                <div *ngIf="formValue.email.errors.email">
+                  Email Address is invalid
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Login ID -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Login ID</div>
+              <input class="form-control" formControlName="loginId" type="text"
+                [ngClass]="{ 'is-invalid': submitted && formValue.loginId.errors }" />
+              <div *ngIf="submitted && formValue.loginId.errors" class="invalid-feedback">
+                <div *ngIf="formValue.loginId.errors.required">
+                  Login ID is required
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Login Password -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Login Password</div>
+              <input class="form-control" formControlName="loginPwd" type="password"
+                [ngClass]="{ 'is-invalid': submitted && formValue.loginPwd.errors }" />
+              <div *ngIf="submitted && formValue.loginPwd.errors" class="invalid-feedback">
+                <div *ngIf="formValue.loginPwd.errors.required">
+                  Password is required
+                </div>
+                <div *ngIf="formValue.loginPwd.errors.minlength">
+                  Password must be at least 8 characters
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Confirm Login Password -->
+          <div class="new-users-container">
+            <div class="form-group">
+              <div>*Confirm Password</div>
+              <input class="form-control" formControlName="confirmPassword" type="password"
+                [ngClass]="{ 'is-invalid': submitted && formValue.confirmPassword.errors }"
+                appEqualValidator="password" />
+              <div *ngIf="submitted && formValue.confirmPassword.errors" class="invalid-feedback">
+                <div *ngIf="formValue.confirmPassword.errors.required">
+                  Confirm Login password
+                </div>
+                <div *ngIf="formValue.confirmPassword.errors.mustMatch">
+                  Password Must Match
+                </div>
+              </div>
+            </div>
+          </div>
+  
+  
+        </div>
+      </div>
+    </div>
+  </form>  
+</div>
+<div class="modal-footer">
+  <button type="submit" class="btn btn-primary" (click)="addUser()" [disabled]="addNewUserForm.invalid">Next</button> &nbsp;
+    <button type="button" class="btn btn-primary" aria-label="Close" (click)="activeModal.dismiss('Cross')">Close</button>
+</div>
diff --git a/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.scss b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.scss
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.scss
diff --git a/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.spec.ts b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.spec.ts
new file mode 100644
index 00000000..3262174f
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDetailsFormComponent } from './user-details-form.component';
+
+describe('UserDetailsFormComponent', () => {
+  let component: UserDetailsFormComponent;
+  let fixture: ComponentFixture<UserDetailsFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserDetailsFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserDetailsFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.ts b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.ts
new file mode 100644
index 00000000..bea0fcdb
--- /dev/null
+++ b/portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MustMatch } from 'src/app/shared/helpers/must-match-validator';
+import { UsersService } from 'src/app/shared/services';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-user-details-form',
+  templateUrl: './user-details-form.component.html',
+  styleUrls: ['./user-details-form.component.scss']
+})
+export class UserDetailsFormComponent implements OnInit {
+  addNewUserForm: FormGroup;
+  submitted = false;
+
+  constructor(private formBuilder: FormBuilder, 
+    private usersService: UsersService,
+    public activeModal: NgbActiveModal) { }
+
+  ngOnInit() {
+    this.addNewUserForm = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      middleInitial: [''],
+      lastName: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      loginId: ['', Validators.required],
+      loginPwd: ['', [Validators.required, Validators.minLength(6)]],
+      confirmPassword: ['', Validators.required]
+    }, {
+        validator: MustMatch('loginPwd', 'confirmPassword')
+      });
+  }
+
+  get formValue() {
+    return this.addNewUserForm.controls;
+  }
+
+  addUser() {
+    this.submitted = true;
+    if (this.addNewUserForm.invalid) {
+      console.log("Invalid form!!");
+      return;
+    }
+    console.log("New user Json : " + JSON.stringify(this.addNewUserForm.value));
+    console.log("Get Raw value : " + this.addNewUserForm.getRawValue());
+    let newUserFormData = JSON.stringify(this.addNewUserForm.getRawValue());
+    this.usersService.addNewUser(newUserFormData);
+    this.activeModal.close();
+  }
+
+}
diff --git a/portal-FE-os/src/app/layout/components/global-search/global-search.component.scss b/portal-FE-os/src/app/shared/interceptors/header-interceptor.ts
index 70f1b34c..bb76e14b 100644
--- a/portal-FE-os/src/app/layout/components/global-search/global-search.component.scss
+++ b/portal-FE-os/src/app/shared/interceptors/header-interceptor.ts
@@ -36,39 +36,38 @@
  * 
  */
 
- .search-div {
-    margin-bottom: -14px;
-  }
+import {
+    HttpEvent,
+    HttpInterceptor,
+    HttpHandler,
+    HttpRequest,
+    HttpHeaders,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { v4 as uuid } from 'uuid';
+import { Injectable } from '@angular/core';
+declare const getWebJunctionXSRFToken: any;
 
-  .search-res-dialog{
-    position: fixed;
-      background: white;
-      box-shadow: rgba(0, 0, 0, 0.247059) 0px 5px 6px 0px;
-      top: 2.5em;
-      border-radius: 0.25rem;
-      padding: 20px;
-      opacity: 1;
-      z-index: 1;
-  }
-  .searchUl {
-    list-style: none; 
-    border-bottom: 1px solid #bbb; 
-    padding-bottom: 20px;
-    padding-left: 4px;
+@Injectable()
+export class HeaderInterceptor implements HttpInterceptor {
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        // Clone the request to add the new header
+        // HttpHeader object immutable - copy values
+        const headerSettings: { [name: string]: string | string[]; } = {};
+        headerSettings['X-ECOMP-RequestID'] = uuid();
+        const requestType = req.params.get('requestType');
+       
+        if(requestType!=null && requestType==='fileUpload'){
+          //headerSettings['Content-Type'] = 'multipart/form-data';
+        }else if(requestType!=null && requestType==='downloadWidgetFile'){
+           headerSettings['X-Widgets-Type'] = 'all';
+           headerSettings['Content-Type'] = 'application/octet-stream';
+        }else{
+            headerSettings['Content-Type'] = 'application/json';
+        }
+        const newHeader = new HttpHeaders(headerSettings);
+        const clonedRequest = req.clone({ headers: newHeader, withCredentials: true });
+        // Pass the cloned request instead of the original request to the next handle
+        return next.handle(clonedRequest);
     }
-    .searchLiHeader {
-      font-weight: bold; 
-      color: #0574ac; 
-      font-size: 16px;
-      padding-bottom: 10px;
-      line-height: 1.5;
-      font-family: Omnes-ECOMP-W02,Arial;
-      
-      }
-      .searchLiItems{
-        cursor: pointer;
-        font-weight: normal; 
-        font-size: 12px;
-        color: #444444;
-        font-family: Omnes-ECOMP-W02,Arial;
-        }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/portal-FE-os/src/app/shared/utils/utils.js b/portal-FE-os/src/app/shared/utils/utils.js
new file mode 100644
index 00000000..3c99f4ac
--- /dev/null
+++ b/portal-FE-os/src/app/shared/utils/utils.js
@@ -0,0 +1,21 @@
+function getCookies() {
+    var cookies = { };
+    if (document.cookie && document.cookie != '') {
+        var split = document.cookie.split(';');
+        for (var i = 0; i < split.length; i++) {
+            var name_value = split[i].split("=");
+            name_value[0] = name_value[0].replace(/^ /, '');
+            cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
+        }
+    }
+    return cookies;
+}
+
+function getContextRoot(){
+	var pathName = window.location.pathname;
+	var pathArray = pathName.split( '/' );
+	var contextRoot='';
+	if(pathArray.length!=0 && pathArray.length>=1)
+		contextRoot = pathArray[1];
+	return contextRoot;
+}
\ No newline at end of file
diff --git a/portal-FE-os/src/assets/plugins-config.json b/portal-FE-os/src/assets/plugins-config.json
new file mode 100644
index 00000000..eb5f171f
--- /dev/null
+++ b/portal-FE-os/src/assets/plugins-config.json
@@ -0,0 +1,31 @@
+{
+  "plugin1": {
+    "name": "Plugin 2",
+    "path": "/assets/plugins/plugin1.js",
+    "deps": ["shared"]
+  },
+  "plugin2": {
+    "name": "Plugin 2",
+    "path": "/assets/plugins/plugin2.js",
+    "deps": ["shared"]
+  },
+  "News": {
+    "name": "News",
+    "path": "/assets/plugins/News.js",
+    "deps": ["shared"]
+  },
+  "Resources": {
+    "name": "Resources",
+    "path": "/assets/plugins/Resources.js",
+    "deps": ["shared"]
+  },
+  "Events": {
+    "name": "Events",
+    "path": "/assets/plugins/Events.js",
+    "deps": ["shared"]
+  },
+  "shared": {
+    "name": "Shared",
+    "path": "/assets/plugins/shared.js"
+  }
+}
diff --git a/portal-FE-os/src/assets/plugins/Events.js b/portal-FE-os/src/assets/plugins/Events.js
new file mode 100644
index 00000000..171e710d
--- /dev/null
+++ b/portal-FE-os/src/assets/plugins/Events.js
@@ -0,0 +1 @@
+!function (t, e) { "object" == typeof exports && "object" == typeof module ? module.exports = e(require("ng.common"), require("tslib"), require("rxjs"), require("ng.core")) : "function" == typeof define && define.amd ? define(["ng.common", "tslib", "rxjs", "ng.core"], e) : "object" == typeof exports ? exports.listWidgetPlugin = e(require("ng.common"), require("tslib"), require("rxjs"), require("ng.core")) : t.listWidgetPlugin = e(t["ng.common"], t.tslib, t.rxjs, t["ng.core"]) }("undefined" != typeof self ? self : this, function (t, e, n, r) { return function (t) { var e = {}; function n(r) { if (e[r]) return e[r].exports; var o = e[r] = { i: r, l: !1, exports: {} }; return t[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports } return n.m = t, n.c = e, n.d = function (t, e, r) { n.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: r }) }, n.r = function (t) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t, "__esModule", { value: !0 }) }, n.t = function (t, e) { if (1 & e && (t = n(t)), 8 & e) return t; if (4 & e && "object" == typeof t && t && t.__esModule) return t; var r = Object.create(null); if (n.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: t }), 2 & e && "string" != typeof t) for (var o in t) n.d(r, o, (function (e) { return t[e] }).bind(null, o)); return r }, n.n = function (t) { var e = t && t.__esModule ? function () { return t.default } : function () { return t }; return n.d(e, "a", e), e }, n.o = function (t, e) { return Object.prototype.hasOwnProperty.call(t, e) }, n.p = "", n(n.s = 0) }({ 0: function (t, e, n) { t.exports = n("zUnb") }, "0S4P": function (e, n) { e.exports = t }, "17wl": function (t, n) { t.exports = e }, Vgaj: function (t, e) { t.exports = n }, vOrQ: function (t, e) { t.exports = r }, zUnb: function (t, e, n) { "use strict"; n.r(e); var r = n("vOrQ"), o = function () { function t(t) { this.api = t } return t.prototype.ngOnInit = function () { this.getNewsWidgetCatalog() }, t.prototype.getNewsWidgetCatalog = function () { var t = this; return console.log("getNewsWidgetCatalog called"), this.api.get("portalApi/dashboard/widgetData/?resourceType=EVENTS", { withCredentials: !0 }).subscribe(function (e) { e && (console.log("data from microservice " + e), t.newsData = e.response.items) }, function (t) { console.log("getAppCatalogServices Error Object" + t) }) }, t }(), i = function () { function t() { } return t.entry = o, t }(), s = n("0S4P"), u = n("17wl"), a = n("Vgaj"); function l(t) { return "function" == typeof t } var c = !1, p = { Promise: void 0, set useDeprecatedSynchronousErrorHandling(t) { c = t }, get useDeprecatedSynchronousErrorHandling() { return c } }; function h(t) { setTimeout(function () { throw t }) } var d = { closed: !0, next: function (t) { }, error: function (t) { if (p.useDeprecatedSynchronousErrorHandling) throw t; h(t) }, complete: function () { } }, f = Array.isArray || function (t) { return t && "number" == typeof t.length }; function y(t) { return null != t && "object" == typeof t } var b, m = { e: {} }; function v() { try { return b.apply(this, arguments) } catch (t) { return m.e = t, m } } function g(t) { return b = t, v } function w(t) { return Error.call(this), this.message = t ? t.length + " errors occurred during unsubscription:\n" + t.map(function (t, e) { return e + 1 + ") " + t.toString() }).join("\n  ") : "", this.name = "UnsubscriptionError", this.errors = t, this } w.prototype = Object.create(Error.prototype); var _ = w, x = function () { function t(t) { this.closed = !1, this._parent = null, this._parents = null, this._subscriptions = null, t && (this._unsubscribe = t) } var e; return t.prototype.unsubscribe = function () { var t, e = !1; if (!this.closed) { var n = this._parent, r = this._parents, o = this._unsubscribe, i = this._subscriptions; this.closed = !0, this._parent = null, this._parents = null, this._subscriptions = null; for (var s = -1, u = r ? r.length : 0; n;)n.remove(this), n = ++s < u && r[s] || null; if (l(o) && g(o).call(this) === m && (e = !0, t = t || (m.e instanceof _ ? E(m.e.errors) : [m.e])), f(i)) for (s = -1, u = i.length; ++s < u;) { var a = i[s]; if (y(a) && g(a.unsubscribe).call(a) === m) { e = !0, t = t || []; var c = m.e; c instanceof _ ? t = t.concat(E(c.errors)) : t.push(c) } } if (e) throw new _(t) } }, t.prototype.add = function (e) { if (!e || e === t.EMPTY) return t.EMPTY; if (e === this) return this; var n = e; switch (typeof e) { case "function": n = new t(e); case "object": if (n.closed || "function" != typeof n.unsubscribe) return n; if (this.closed) return n.unsubscribe(), n; if ("function" != typeof n._addParent) { var r = n; (n = new t)._subscriptions = [r] } break; default: throw new Error("unrecognized teardown " + e + " added to Subscription.") }return (this._subscriptions || (this._subscriptions = [])).push(n), n._addParent(this), n }, t.prototype.remove = function (t) { var e = this._subscriptions; if (e) { var n = e.indexOf(t); -1 !== n && e.splice(n, 1) } }, t.prototype._addParent = function (t) { var e = this._parent, n = this._parents; e && e !== t ? n ? -1 === n.indexOf(t) && n.push(t) : this._parents = [t] : this._parent = t }, t.EMPTY = ((e = new t).closed = !0, e), t }(); function E(t) { return t.reduce(function (t, e) { return t.concat(e instanceof _ ? e.errors : e) }, []) } var T = "function" == typeof Symbol ? Symbol("rxSubscriber") : "@@rxSubscriber_" + Math.random(), S = function (t) { function e(n, r, o) { var i = t.call(this) || this; switch (i.syncErrorValue = null, i.syncErrorThrown = !1, i.syncErrorThrowable = !1, i.isStopped = !1, i._parentSubscription = null, arguments.length) { case 0: i.destination = d; break; case 1: if (!n) { i.destination = d; break } if ("object" == typeof n) { n instanceof e ? (i.syncErrorThrowable = n.syncErrorThrowable, i.destination = n, n.add(i)) : (i.syncErrorThrowable = !0, i.destination = new O(i, n)); break } default: i.syncErrorThrowable = !0, i.destination = new O(i, n, r, o) }return i } return u.__extends(e, t), e.prototype[T] = function () { return this }, e.create = function (t, n, r) { var o = new e(t, n, r); return o.syncErrorThrowable = !1, o }, e.prototype.next = function (t) { this.isStopped || this._next(t) }, e.prototype.error = function (t) { this.isStopped || (this.isStopped = !0, this._error(t)) }, e.prototype.complete = function () { this.isStopped || (this.isStopped = !0, this._complete()) }, e.prototype.unsubscribe = function () { this.closed || (this.isStopped = !0, t.prototype.unsubscribe.call(this)) }, e.prototype._next = function (t) { this.destination.next(t) }, e.prototype._error = function (t) { this.destination.error(t), this.unsubscribe() }, e.prototype._complete = function () { this.destination.complete(), this.unsubscribe() }, e.prototype._unsubscribeAndRecycle = function () { var t = this._parent, e = this._parents; return this._parent = null, this._parents = null, this.unsubscribe(), this.closed = !1, this.isStopped = !1, this._parent = t, this._parents = e, this._parentSubscription = null, this }, e }(x), O = function (t) { function e(e, n, r, o) { var i, s = t.call(this) || this; s._parentSubscriber = e; var u = s; return l(n) ? i = n : n && (i = n.next, r = n.error, o = n.complete, n !== d && (l((u = Object.create(n)).unsubscribe) && s.add(u.unsubscribe.bind(u)), u.unsubscribe = s.unsubscribe.bind(s))), s._context = u, s._next = i, s._error = r, s._complete = o, s } return u.__extends(e, t), e.prototype.next = function (t) { if (!this.isStopped && this._next) { var e = this._parentSubscriber; p.useDeprecatedSynchronousErrorHandling && e.syncErrorThrowable ? this.__tryOrSetError(e, this._next, t) && this.unsubscribe() : this.__tryOrUnsub(this._next, t) } }, e.prototype.error = function (t) { if (!this.isStopped) { var e = this._parentSubscriber, n = p.useDeprecatedSynchronousErrorHandling; if (this._error) n && e.syncErrorThrowable ? (this.__tryOrSetError(e, this._error, t), this.unsubscribe()) : (this.__tryOrUnsub(this._error, t), this.unsubscribe()); else if (e.syncErrorThrowable) n ? (e.syncErrorValue = t, e.syncErrorThrown = !0) : h(t), this.unsubscribe(); else { if (this.unsubscribe(), n) throw t; h(t) } } }, e.prototype.complete = function () { var t = this; if (!this.isStopped) { var e = this._parentSubscriber; if (this._complete) { var n = function () { return t._complete.call(t._context) }; p.useDeprecatedSynchronousErrorHandling && e.syncErrorThrowable ? (this.__tryOrSetError(e, n), this.unsubscribe()) : (this.__tryOrUnsub(n), this.unsubscribe()) } else this.unsubscribe() } }, e.prototype.__tryOrUnsub = function (t, e) { try { t.call(this._context, e) } catch (n) { if (this.unsubscribe(), p.useDeprecatedSynchronousErrorHandling) throw n; h(n) } }, e.prototype.__tryOrSetError = function (t, e, n) { if (!p.useDeprecatedSynchronousErrorHandling) throw new Error("bad call"); try { e.call(this._context, n) } catch (r) { return p.useDeprecatedSynchronousErrorHandling ? (t.syncErrorValue = r, t.syncErrorThrown = !0, !0) : (h(r), !0) } return !1 }, e.prototype._unsubscribe = function () { var t = this._parentSubscriber; this._context = null, this._parentSubscriber = null, t.unsubscribe() }, e }(S), j = function (t) { function e(e, n, r) { var o = t.call(this) || this; return o.parent = e, o.outerValue = n, o.outerIndex = r, o.index = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { this.parent.notifyNext(this.outerValue, t, this.outerIndex, this.index++, this) }, e.prototype._error = function (t) { this.parent.notifyError(t, this), this.unsubscribe() }, e.prototype._complete = function () { this.parent.notifyComplete(this), this.unsubscribe() }, e }(S), C = "function" == typeof Symbol && Symbol.observable || "@@observable"; var N = function () { function t(t) { this._isScalar = !1, t && (this._subscribe = t) } return t.prototype.lift = function (e) { var n = new t; return n.source = this, n.operator = e, n }, t.prototype.subscribe = function (t, e, n) { var r = this.operator, o = function (t, e, n) { if (t) { if (t instanceof S) return t; if (t[T]) return t[T]() } return t || e || n ? new S(t, e, n) : new S(d) }(t, e, n); if (r ? r.call(o, this.source) : o.add(this.source || p.useDeprecatedSynchronousErrorHandling && !o.syncErrorThrowable ? this._subscribe(o) : this._trySubscribe(o)), p.useDeprecatedSynchronousErrorHandling && o.syncErrorThrowable && (o.syncErrorThrowable = !1, o.syncErrorThrown)) throw o.syncErrorValue; return o }, t.prototype._trySubscribe = function (t) { try { return this._subscribe(t) } catch (e) { p.useDeprecatedSynchronousErrorHandling && (t.syncErrorThrown = !0, t.syncErrorValue = e), function (t) { for (; t;) { var e = t.destination; if (t.closed || t.isStopped) return !1; t = e && e instanceof S ? e : null } return !0 }(t) ? t.error(e) : console.warn(e) } }, t.prototype.forEach = function (t, e) { var n = this; return new (e = P(e))(function (e, r) { var o; o = n.subscribe(function (e) { try { t(e) } catch (n) { r(n), o && o.unsubscribe() } }, r, e) }) }, t.prototype._subscribe = function (t) { var e = this.source; return e && e.subscribe(t) }, t.prototype[C] = function () { return this }, t.prototype.pipe = function () { for (var t = [], e = 0; e < arguments.length; e++)t[e] = arguments[e]; return 0 === t.length ? this : ((n = t) ? 1 === n.length ? n[0] : function (t) { return n.reduce(function (t, e) { return e(t) }, t) } : function () { })(this); var n }, t.prototype.toPromise = function (t) { var e = this; return new (t = P(t))(function (t, n) { var r; e.subscribe(function (t) { return r = t }, function (t) { return n(t) }, function () { return t(r) }) }) }, t.create = function (e) { return new t(e) }, t }(); function P(t) { if (t || (t = p.Promise || Promise), !t) throw new Error("no Promise impl found"); return t } var k = function (t) { return function (e) { for (var n = 0, r = t.length; n < r && !e.closed; n++)e.next(t[n]); e.closed || e.complete() } }, I = function (t) { return function (e) { return t.then(function (t) { e.closed || (e.next(t), e.complete()) }, function (t) { return e.error(t) }).then(null, h), e } }; function A() { return "function" == typeof Symbol && Symbol.iterator ? Symbol.iterator : "@@iterator" } var R = A(), z = function (t) { return function (e) { for (var n = t[R](); ;) { var r = n.next(); if (r.done) { e.complete(); break } if (e.next(r.value), e.closed) break } return "function" == typeof n.return && e.add(function () { n.return && n.return() }), e } }, D = function (t) { return function (e) { var n = t[C](); if ("function" != typeof n.subscribe) throw new TypeError("Provided object does not correctly implement Symbol.observable"); return n.subscribe(e) } }, H = function (t) { return t && "number" == typeof t.length && "function" != typeof t }; function U(t) { return t && "function" != typeof t.subscribe && "function" == typeof t.then } var F = function (t) { if (t instanceof N) return function (e) { return t._isScalar ? (e.next(t.value), void e.complete()) : t.subscribe(e) }; if (t && "function" == typeof t[C]) return D(t); if (H(t)) return k(t); if (U(t)) return I(t); if (t && "function" == typeof t[R]) return z(t); var e = y(t) ? "an invalid object" : "'" + t + "'"; throw new TypeError("You provided " + e + " where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.") }, L = function (t) { function e() { return null !== t && t.apply(this, arguments) || this } return u.__extends(e, t), e.prototype.notifyNext = function (t, e, n, r, o) { this.destination.next(e) }, e.prototype.notifyError = function (t, e) { this.destination.error(t) }, e.prototype.notifyComplete = function (t) { this.destination.complete() }, e }(S); function M(t, e) { return function (n) { if ("function" != typeof t) throw new TypeError("argument is not a function. Are you looking for `mapTo()`?"); return n.lift(new q(t, e)) } } var q = function () { function t(t, e) { this.project = t, this.thisArg = e } return t.prototype.call = function (t, e) { return e.subscribe(new V(t, this.project, this.thisArg)) }, t }(), V = function (t) { function e(e, n, r) { var o = t.call(this, e) || this; return o.project = n, o.count = 0, o.thisArg = r || o, o } return u.__extends(e, t), e.prototype._next = function (t) { var e; try { e = this.project.call(this.thisArg, t, this.count++) } catch (n) { return void this.destination.error(n) } this.destination.next(e) }, e }(S), W = function () { function t(t, e) { void 0 === e && (e = Number.POSITIVE_INFINITY), this.project = t, this.concurrent = e } return t.prototype.call = function (t, e) { return e.subscribe(new B(t, this.project, this.concurrent)) }, t }(), B = function (t) { function e(e, n, r) { void 0 === r && (r = Number.POSITIVE_INFINITY); var o = t.call(this, e) || this; return o.project = n, o.concurrent = r, o.hasCompleted = !1, o.buffer = [], o.active = 0, o.index = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { this.active < this.concurrent ? this._tryNext(t) : this.buffer.push(t) }, e.prototype._tryNext = function (t) { var e, n = this.index++; try { e = this.project(t, n) } catch (r) { return void this.destination.error(r) } this.active++ , this._innerSub(e, t, n) }, e.prototype._innerSub = function (t, e, n) { var r, o, i = new j(this, void 0, void 0); this.destination.add(i), r = t, void 0 === (o = i) && (o = new j(this, e, n)), o.closed || F(r)(o) }, e.prototype._complete = function () { this.hasCompleted = !0, 0 === this.active && 0 === this.buffer.length && this.destination.complete(), this.unsubscribe() }, e.prototype.notifyNext = function (t, e, n, r, o) { this.destination.next(e) }, e.prototype.notifyComplete = function (t) { var e = this.buffer; this.remove(t), this.active-- , e.length > 0 ? this._next(e.shift()) : 0 === this.active && this.hasCompleted && this.destination.complete() }, e }(L); var K = function () { function t(t, e) { this.predicate = t, this.thisArg = e } return t.prototype.call = function (t, e) { return e.subscribe(new J(t, this.predicate, this.thisArg)) }, t }(), J = function (t) { function e(e, n, r) { var o = t.call(this, e) || this; return o.predicate = n, o.thisArg = r, o.count = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { var e; try { e = this.predicate.call(this.thisArg, t, this.count++) } catch (n) { return void this.destination.error(n) } e && this.destination.next(t) }, e }(S), X = function () { return function () { } }(), Y = function () { return function () { } }(), G = function () { function t(t) { var e = this; this.normalizedNames = new Map, this.lazyUpdate = null, t ? this.lazyInit = "string" == typeof t ? function () { e.headers = new Map, t.split("\n").forEach(function (t) { var n = t.indexOf(":"); if (n > 0) { var r = t.slice(0, n), o = r.toLowerCase(), i = t.slice(n + 1).trim(); e.maybeSetNormalizedName(r, o), e.headers.has(o) ? e.headers.get(o).push(i) : e.headers.set(o, [i]) } }) } : function () { e.headers = new Map, Object.keys(t).forEach(function (n) { var r = t[n], o = n.toLowerCase(); "string" == typeof r && (r = [r]), r.length > 0 && (e.headers.set(o, r), e.maybeSetNormalizedName(n, o)) }) } : this.headers = new Map } return t.prototype.has = function (t) { return this.init(), this.headers.has(t.toLowerCase()) }, t.prototype.get = function (t) { this.init(); var e = this.headers.get(t.toLowerCase()); return e && e.length > 0 ? e[0] : null }, t.prototype.keys = function () { return this.init(), Array.from(this.normalizedNames.values()) }, t.prototype.getAll = function (t) { return this.init(), this.headers.get(t.toLowerCase()) || null }, t.prototype.append = function (t, e) { return this.clone({ name: t, value: e, op: "a" }) }, t.prototype.set = function (t, e) { return this.clone({ name: t, value: e, op: "s" }) }, t.prototype.delete = function (t, e) { return this.clone({ name: t, value: e, op: "d" }) }, t.prototype.maybeSetNormalizedName = function (t, e) { this.normalizedNames.has(e) || this.normalizedNames.set(e, t) }, t.prototype.init = function () { var e = this; this.lazyInit && (this.lazyInit instanceof t ? this.copyFrom(this.lazyInit) : this.lazyInit(), this.lazyInit = null, this.lazyUpdate && (this.lazyUpdate.forEach(function (t) { return e.applyUpdate(t) }), this.lazyUpdate = null)) }, t.prototype.copyFrom = function (t) { var e = this; t.init(), Array.from(t.headers.keys()).forEach(function (n) { e.headers.set(n, t.headers.get(n)), e.normalizedNames.set(n, t.normalizedNames.get(n)) }) }, t.prototype.clone = function (e) { var n = new t; return n.lazyInit = this.lazyInit && this.lazyInit instanceof t ? this.lazyInit : this, n.lazyUpdate = (this.lazyUpdate || []).concat([e]), n }, t.prototype.applyUpdate = function (t) { var e = t.name.toLowerCase(); switch (t.op) { case "a": case "s": var n = t.value; if ("string" == typeof n && (n = [n]), 0 === n.length) return; this.maybeSetNormalizedName(t.name, e); var r = ("a" === t.op ? this.headers.get(e) : void 0) || []; r.push.apply(r, Object(u.__spread)(n)), this.headers.set(e, r); break; case "d": var o = t.value; if (o) { var i = this.headers.get(e); if (!i) return; 0 === (i = i.filter(function (t) { return -1 === o.indexOf(t) })).length ? (this.headers.delete(e), this.normalizedNames.delete(e)) : this.headers.set(e, i) } else this.headers.delete(e), this.normalizedNames.delete(e) } }, t.prototype.forEach = function (t) { var e = this; this.init(), Array.from(this.normalizedNames.keys()).forEach(function (n) { return t(e.normalizedNames.get(n), e.headers.get(n)) }) }, t }(), $ = function () { function t() { } return t.prototype.encodeKey = function (t) { return Q(t) }, t.prototype.encodeValue = function (t) { return Q(t) }, t.prototype.decodeKey = function (t) { return decodeURIComponent(t) }, t.prototype.decodeValue = function (t) { return decodeURIComponent(t) }, t }(); function Q(t) { return encodeURIComponent(t).replace(/%40/gi, "@").replace(/%3A/gi, ":").replace(/%24/gi, "$").replace(/%2C/gi, ",").replace(/%3B/gi, ";").replace(/%2B/gi, "+").replace(/%3D/gi, "=").replace(/%3F/gi, "?").replace(/%2F/gi, "/") } var Z = function () { function t(t) { void 0 === t && (t = {}); var e, n, r, o = this; if (this.updates = null, this.cloneFrom = null, this.encoder = t.encoder || new $, t.fromString) { if (t.fromObject) throw new Error("Cannot specify both fromString and fromObject."); this.map = (e = t.fromString, n = this.encoder, r = new Map, e.length > 0 && e.split("&").forEach(function (t) { var e = t.indexOf("="), o = Object(u.__read)(-1 == e ? [n.decodeKey(t), ""] : [n.decodeKey(t.slice(0, e)), n.decodeValue(t.slice(e + 1))], 2), i = o[0], s = o[1], a = r.get(i) || []; a.push(s), r.set(i, a) }), r) } else t.fromObject ? (this.map = new Map, Object.keys(t.fromObject).forEach(function (e) { var n = t.fromObject[e]; o.map.set(e, Array.isArray(n) ? n : [n]) })) : this.map = null } return t.prototype.has = function (t) { return this.init(), this.map.has(t) }, t.prototype.get = function (t) { this.init(); var e = this.map.get(t); return e ? e[0] : null }, t.prototype.getAll = function (t) { return this.init(), this.map.get(t) || null }, t.prototype.keys = function () { return this.init(), Array.from(this.map.keys()) }, t.prototype.append = function (t, e) { return this.clone({ param: t, value: e, op: "a" }) }, t.prototype.set = function (t, e) { return this.clone({ param: t, value: e, op: "s" }) }, t.prototype.delete = function (t, e) { return this.clone({ param: t, value: e, op: "d" }) }, t.prototype.toString = function () { var t = this; return this.init(), this.keys().map(function (e) { var n = t.encoder.encodeKey(e); return t.map.get(e).map(function (e) { return n + "=" + t.encoder.encodeValue(e) }).join("&") }).join("&") }, t.prototype.clone = function (e) { var n = new t({ encoder: this.encoder }); return n.cloneFrom = this.cloneFrom || this, n.updates = (this.updates || []).concat([e]), n }, t.prototype.init = function () { var t = this; null === this.map && (this.map = new Map), null !== this.cloneFrom && (this.cloneFrom.init(), this.cloneFrom.keys().forEach(function (e) { return t.map.set(e, t.cloneFrom.map.get(e)) }), this.updates.forEach(function (e) { switch (e.op) { case "a": case "s": var n = ("a" === e.op ? t.map.get(e.param) : void 0) || []; n.push(e.value), t.map.set(e.param, n); break; case "d": if (void 0 === e.value) { t.map.delete(e.param); break } var r = t.map.get(e.param) || [], o = r.indexOf(e.value); -1 !== o && r.splice(o, 1), r.length > 0 ? t.map.set(e.param, r) : t.map.delete(e.param) } }), this.cloneFrom = null) }, t }(); function tt(t) { return "undefined" != typeof ArrayBuffer && t instanceof ArrayBuffer } function et(t) { return "undefined" != typeof Blob && t instanceof Blob } function nt(t) { return "undefined" != typeof FormData && t instanceof FormData } var rt = function () { function t(t, e, n, r) { var o; if (this.url = e, this.body = null, this.reportProgress = !1, this.withCredentials = !1, this.responseType = "json", this.method = t.toUpperCase(), function (t) { switch (t) { case "DELETE": case "GET": case "HEAD": case "OPTIONS": case "JSONP": return !1; default: return !0 } }(this.method) || r ? (this.body = void 0 !== n ? n : null, o = r) : o = n, o && (this.reportProgress = !!o.reportProgress, this.withCredentials = !!o.withCredentials, o.responseType && (this.responseType = o.responseType), o.headers && (this.headers = o.headers), o.params && (this.params = o.params)), this.headers || (this.headers = new G), this.params) { var i = this.params.toString(); if (0 === i.length) this.urlWithParams = e; else { var s = e.indexOf("?"); this.urlWithParams = e + (-1 === s ? "?" : s < e.length - 1 ? "&" : "") + i } } else this.params = new Z, this.urlWithParams = e } return t.prototype.serializeBody = function () { return null === this.body ? null : tt(this.body) || et(this.body) || nt(this.body) || "string" == typeof this.body ? this.body : this.body instanceof Z ? this.body.toString() : "object" == typeof this.body || "boolean" == typeof this.body || Array.isArray(this.body) ? JSON.stringify(this.body) : this.body.toString() }, t.prototype.detectContentTypeHeader = function () { return null === this.body ? null : nt(this.body) ? null : et(this.body) ? this.body.type || null : tt(this.body) ? null : "string" == typeof this.body ? "text/plain" : this.body instanceof Z ? "application/x-www-form-urlencoded;charset=UTF-8" : "object" == typeof this.body || "number" == typeof this.body || Array.isArray(this.body) ? "application/json" : null }, t.prototype.clone = function (e) { void 0 === e && (e = {}); var n = e.method || this.method, r = e.url || this.url, o = e.responseType || this.responseType, i = void 0 !== e.body ? e.body : this.body, s = void 0 !== e.withCredentials ? e.withCredentials : this.withCredentials, u = void 0 !== e.reportProgress ? e.reportProgress : this.reportProgress, a = e.headers || this.headers, l = e.params || this.params; return void 0 !== e.setHeaders && (a = Object.keys(e.setHeaders).reduce(function (t, n) { return t.set(n, e.setHeaders[n]) }, a)), e.setParams && (l = Object.keys(e.setParams).reduce(function (t, n) { return t.set(n, e.setParams[n]) }, l)), new t(n, r, i, { params: l, headers: a, reportProgress: u, responseType: o, withCredentials: s }) }, t }(), ot = function (t) { return t[t.Sent = 0] = "Sent", t[t.UploadProgress = 1] = "UploadProgress", t[t.ResponseHeader = 2] = "ResponseHeader", t[t.DownloadProgress = 3] = "DownloadProgress", t[t.Response = 4] = "Response", t[t.User = 5] = "User", t }({}), it = function () { return function (t, e, n) { void 0 === e && (e = 200), void 0 === n && (n = "OK"), this.headers = t.headers || new G, this.status = void 0 !== t.status ? t.status : e, this.statusText = t.statusText || n, this.url = t.url || null, this.ok = this.status >= 200 && this.status < 300 } }(), st = function (t) { function e(e) { void 0 === e && (e = {}); var n = t.call(this, e) || this; return n.type = ot.ResponseHeader, n } return Object(u.__extends)(e, t), e.prototype.clone = function (t) { return void 0 === t && (t = {}), new e({ headers: t.headers || this.headers, status: void 0 !== t.status ? t.status : this.status, statusText: t.statusText || this.statusText, url: t.url || this.url || void 0 }) }, e }(it), ut = function (t) { function e(e) { void 0 === e && (e = {}); var n = t.call(this, e) || this; return n.type = ot.Response, n.body = void 0 !== e.body ? e.body : null, n } return Object(u.__extends)(e, t), e.prototype.clone = function (t) { return void 0 === t && (t = {}), new e({ body: void 0 !== t.body ? t.body : this.body, headers: t.headers || this.headers, status: void 0 !== t.status ? t.status : this.status, statusText: t.statusText || this.statusText, url: t.url || this.url || void 0 }) }, e }(it), at = function (t) { function e(e) { var n = t.call(this, e, 0, "Unknown Error") || this; return n.name = "HttpErrorResponse", n.ok = !1, n.message = n.status >= 200 && n.status < 300 ? "Http failure during parsing for " + (e.url || "(unknown url)") : "Http failure response for " + (e.url || "(unknown url)") + ": " + e.status + " " + e.statusText, n.error = e.error || null, n } return Object(u.__extends)(e, t), e }(it); function lt(t, e) { return { body: e, headers: t.headers, observe: t.observe, params: t.params, reportProgress: t.reportProgress, responseType: t.responseType, withCredentials: t.withCredentials } } var ct = function () { function t(t) { this.handler = t } return t.prototype.request = function (t, e, n) { var r, o = this; if (void 0 === n && (n = {}), t instanceof rt) r = t; else { var i; i = n.headers instanceof G ? n.headers : new G(n.headers); var s = void 0; n.params && (s = n.params instanceof Z ? n.params : new Z({ fromObject: n.params })), r = new rt(t, e, void 0 !== n.body ? n.body : null, { headers: i, params: s, reportProgress: n.reportProgress, responseType: n.responseType || "json", withCredentials: n.withCredentials }) } var u, l = Object(a.of)(r).pipe(function t(e, n, r) { return void 0 === r && (r = Number.POSITIVE_INFINITY), "function" == typeof n ? function (o) { return o.pipe(t(function (t, r) { return (o = e(t, r), o instanceof N ? o : new N(F(o))).pipe(M(function (e, o) { return n(t, e, r, o) })); var o }, r)) } : ("number" == typeof n && (r = n), function (t) { return t.lift(new W(e, r)) }) }(function (t) { return o.handler.handle(t) }, u, 1)); if (t instanceof rt || "events" === n.observe) return l; var c, p = l.pipe((c = function (t) { return t instanceof ut }, function (t) { return t.lift(new K(c, void 0)) })); switch (n.observe || "body") { case "body": switch (r.responseType) { case "arraybuffer": return p.pipe(M(function (t) { if (null !== t.body && !(t.body instanceof ArrayBuffer)) throw new Error("Response is not an ArrayBuffer."); return t.body })); case "blob": return p.pipe(M(function (t) { if (null !== t.body && !(t.body instanceof Blob)) throw new Error("Response is not a Blob."); return t.body })); case "text": return p.pipe(M(function (t) { if (null !== t.body && "string" != typeof t.body) throw new Error("Response is not a string."); return t.body })); case "json": default: return p.pipe(M(function (t) { return t.body })) }case "response": return p; default: throw new Error("Unreachable: unhandled observe type " + n.observe + "}") } }, t.prototype.delete = function (t, e) { return void 0 === e && (e = {}), this.request("DELETE", t, e) }, t.prototype.get = function (t, e) { return void 0 === e && (e = {}), this.request("GET", t, e) }, t.prototype.head = function (t, e) { return void 0 === e && (e = {}), this.request("HEAD", t, e) }, t.prototype.jsonp = function (t, e) { return this.request("JSONP", t, { params: (new Z).append(e, "JSONP_CALLBACK"), observe: "body", responseType: "json" }) }, t.prototype.options = function (t, e) { return void 0 === e && (e = {}), this.request("OPTIONS", t, e) }, t.prototype.patch = function (t, e, n) { return void 0 === n && (n = {}), this.request("PATCH", t, lt(n, e)) }, t.prototype.post = function (t, e, n) { return void 0 === n && (n = {}), this.request("POST", t, lt(n, e)) }, t.prototype.put = function (t, e, n) { return void 0 === n && (n = {}), this.request("PUT", t, lt(n, e)) }, t }(), pt = function () { function t(t, e) { this.next = t, this.interceptor = e } return t.prototype.handle = function (t) { return this.interceptor.intercept(t, this.next) }, t }(), ht = new r.InjectionToken("HTTP_INTERCEPTORS"), dt = function () { function t() { } return t.prototype.intercept = function (t, e) { return e.handle(t) }, t }(), ft = /^\)\]\}',?\n/, yt = function () { return function () { } }(), bt = function () { function t() { } return t.prototype.build = function () { return new XMLHttpRequest }, t }(), mt = function () { function t(t) { this.xhrFactory = t } return t.prototype.handle = function (t) { var e = this; if ("JSONP" === t.method) throw new Error("Attempted to construct Jsonp request without JsonpClientModule installed."); return new a.Observable(function (n) { var r = e.xhrFactory.build(); if (r.open(t.method, t.urlWithParams), t.withCredentials && (r.withCredentials = !0), t.headers.forEach(function (t, e) { return r.setRequestHeader(t, e.join(",")) }), t.headers.has("Accept") || r.setRequestHeader("Accept", "application/json, text/plain, */*"), !t.headers.has("Content-Type")) { var o = t.detectContentTypeHeader(); null !== o && r.setRequestHeader("Content-Type", o) } if (t.responseType) { var i = t.responseType.toLowerCase(); r.responseType = "json" !== i ? i : "text" } var s = t.serializeBody(), u = null, a = function () { if (null !== u) return u; var e = 1223 === r.status ? 204 : r.status, n = r.statusText || "OK", o = new G(r.getAllResponseHeaders()), i = function (t) { return "responseURL" in t && t.responseURL ? t.responseURL : /^X-Request-URL:/m.test(t.getAllResponseHeaders()) ? t.getResponseHeader("X-Request-URL") : null }(r) || t.url; return u = new st({ headers: o, status: e, statusText: n, url: i }) }, l = function () { var e = a(), o = e.headers, i = e.status, s = e.statusText, u = e.url, l = null; 204 !== i && (l = void 0 === r.response ? r.responseText : r.response), 0 === i && (i = l ? 200 : 0); var c = i >= 200 && i < 300; if ("json" === t.responseType && "string" == typeof l) { var p = l; l = l.replace(ft, ""); try { l = "" !== l ? JSON.parse(l) : null } catch (h) { l = p, c && (c = !1, l = { error: h, text: l }) } } c ? (n.next(new ut({ body: l, headers: o, status: i, statusText: s, url: u || void 0 })), n.complete()) : n.error(new at({ error: l, headers: o, status: i, statusText: s, url: u || void 0 })) }, c = function (t) { var e = a().url, o = new at({ error: t, status: r.status || 0, statusText: r.statusText || "Unknown Error", url: e || void 0 }); n.error(o) }, p = !1, h = function (e) { p || (n.next(a()), p = !0); var o = { type: ot.DownloadProgress, loaded: e.loaded }; e.lengthComputable && (o.total = e.total), "text" === t.responseType && r.responseText && (o.partialText = r.responseText), n.next(o) }, d = function (t) { var e = { type: ot.UploadProgress, loaded: t.loaded }; t.lengthComputable && (e.total = t.total), n.next(e) }; return r.addEventListener("load", l), r.addEventListener("error", c), t.reportProgress && (r.addEventListener("progress", h), null !== s && r.upload && r.upload.addEventListener("progress", d)), r.send(s), n.next({ type: ot.Sent }), function () { r.removeEventListener("error", c), r.removeEventListener("load", l), t.reportProgress && (r.removeEventListener("progress", h), null !== s && r.upload && r.upload.removeEventListener("progress", d)), r.abort() } }) }, t }(), vt = new r.InjectionToken("XSRF_COOKIE_NAME"), gt = new r.InjectionToken("XSRF_HEADER_NAME"), wt = function () { return function () { } }(), _t = function () { function t(t, e, n) { this.doc = t, this.platform = e, this.cookieName = n, this.lastCookieString = "", this.lastToken = null, this.parseCount = 0 } return t.prototype.getToken = function () { if ("server" === this.platform) return null; var t = this.doc.cookie || ""; return t !== this.lastCookieString && (this.parseCount++ , this.lastToken = Object(s["\u0275parseCookieValue"])(t, this.cookieName), this.lastCookieString = t), this.lastToken }, t }(), xt = function () { function t(t, e) { this.tokenService = t, this.headerName = e } return t.prototype.intercept = function (t, e) { var n = t.url.toLowerCase(); if ("GET" === t.method || "HEAD" === t.method || n.startsWith("http://") || n.startsWith("https://")) return e.handle(t); var r = this.tokenService.getToken(); return null === r || t.headers.has(this.headerName) || (t = t.clone({ headers: t.headers.set(this.headerName, r) })), e.handle(t) }, t }(), Et = function () { function t(t, e) { this.backend = t, this.injector = e, this.chain = null } return t.prototype.handle = function (t) { if (null === this.chain) { var e = this.injector.get(ht, []); this.chain = e.reduceRight(function (t, e) { return new pt(t, e) }, this.backend) } return this.chain.handle(t) }, t }(), Tt = function () { function t() { } var e; return e = t, t.disable = function () { return { ngModule: e, providers: [{ provide: xt, useClass: dt }] } }, t.withOptions = function (t) { return void 0 === t && (t = {}), { ngModule: e, providers: [t.cookieName ? { provide: vt, useValue: t.cookieName } : [], t.headerName ? { provide: gt, useValue: t.headerName } : []] } }, t }(), St = function () { return function () { } }(), Ot = r["\u0275crt"]({ encapsulation: 0, styles: [[""]], data: {} }); function jt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 2, "li", [], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 1, "a", [["target", "_blank"]], [[8, "href", 4]], null, null, null, null)), (t()(), r["\u0275ted"](2, null, ["", ""]))], null, function (t, e) { t(e, 1, 0, r["\u0275inlineInterpolate"](1, "", e.context.$implicit.href, "")), t(e, 2, 0, e.context.$implicit.title) }) } function Ct(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 2, "ul", [], null, null, null, null, null)), (t()(), r["\u0275and"](16777216, null, null, 1, null, jt)), r["\u0275did"](2, 278528, null, 0, s.NgForOf, [r.ViewContainerRef, r.TemplateRef, r.IterableDiffers], { ngForOf: [0, "ngForOf"] }, null)], function (t, e) { t(e, 2, 0, e.component.newsData) }, null) } function Nt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 6, "div", [], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 5, "div", [["class", "activity-error-container"], ["style", "background: rgb(255, 255, 255); overflow: hidden !important; width: 100%;"]], null, null, null, null, null)), (t()(), r["\u0275eld"](2, 0, null, null, 4, "div", [["class", "activity-error-block"]], null, null, null, null, null)), (t()(), r["\u0275eld"](3, 0, null, null, 0, "i", [["class", "icon-information full-linear-icon-information"], ["style", "margin-left: 125px; font-size: 90px"]], null, null, null, null, null)), (t()(), r["\u0275eld"](4, 0, null, null, 0, "br", [], null, null, null, null, null)), (t()(), r["\u0275eld"](5, 0, null, null, 1, "div", [["class", "activity-error-msg1"]], null, null, null, null, null)), (t()(), r["\u0275ted"](-1, null, ["There's currently no news available."]))], null, null) } function Pt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 6, "div", [["class", "widget-news-main"], ["id", "widget-news"]], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 5, "div", [["att-gridster-item-body", ""], ["class", "information-section-gridsterContent"]], null, null, null, null, null)), (t()(), r["\u0275eld"](2, 0, null, null, 4, "div", [["class", "resources"]], null, null, null, null, null)), (t()(), r["\u0275and"](16777216, null, null, 1, null, Ct)), r["\u0275did"](4, 16384, null, 0, s.NgIf, [r.ViewContainerRef, r.TemplateRef], { ngIf: [0, "ngIf"] }, null), (t()(), r["\u0275and"](16777216, null, null, 1, null, Nt)), r["\u0275did"](6, 16384, null, 0, s.NgIf, [r.ViewContainerRef, r.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (t, e) { var n = e.component; t(e, 4, 0, n.newsData && 0 != n.newsData.length), t(e, 6, 0, n.newsData && 0 != n.newsData.length) }, null) } function kt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 1, "app-list-widget", [], null, null, null, Pt, Ot)), r["\u0275did"](1, 114688, null, 0, o, [ct], null, null)], function (t, e) { t(e, 1, 0) }, null) } var It = r["\u0275ccf"]("app-list-widget", o, kt, {}, {}, []), At = r["\u0275cmf"](i, [], function (t) { return r["\u0275mod"]([r["\u0275mpd"](512, r.ComponentFactoryResolver, r["\u0275CodegenComponentFactoryResolver"], [[8, [It]], [3, r.ComponentFactoryResolver], r.NgModuleRef]), r["\u0275mpd"](4608, s.NgLocalization, s.NgLocaleLocalization, [r.LOCALE_ID, [2, s["\u0275angular_packages_common_common_a"]]]), r["\u0275mpd"](4608, wt, _t, [s.DOCUMENT, r.PLATFORM_ID, vt]), r["\u0275mpd"](4608, xt, xt, [wt, gt]), r["\u0275mpd"](5120, ht, function (t) { return [t] }, [xt]), r["\u0275mpd"](4608, bt, bt, []), r["\u0275mpd"](6144, yt, null, [bt]), r["\u0275mpd"](4608, mt, mt, [yt]), r["\u0275mpd"](6144, Y, null, [mt]), r["\u0275mpd"](4608, X, Et, [Y, r.Injector]), r["\u0275mpd"](4608, ct, ct, [X]), r["\u0275mpd"](1073742336, s.CommonModule, s.CommonModule, []), r["\u0275mpd"](1073742336, Tt, Tt, []), r["\u0275mpd"](1073742336, St, St, []), r["\u0275mpd"](1073742336, i, i, []), r["\u0275mpd"](256, vt, "XSRF-TOKEN", []), r["\u0275mpd"](256, gt, "X-XSRF-TOKEN", [])]) }); n.d(e, "DynamicWidgetModule", function () { return i }), n.d(e, "DynamicWidgetModuleNgFactory", function () { return At }), e.default = At } }) });
\ No newline at end of file
diff --git a/portal-FE-os/src/assets/plugins/News.js b/portal-FE-os/src/assets/plugins/News.js
new file mode 100644
index 00000000..ecfe8487
--- /dev/null
+++ b/portal-FE-os/src/assets/plugins/News.js
@@ -0,0 +1 @@
+!function (t, e) { "object" == typeof exports && "object" == typeof module ? module.exports = e(require("ng.common"), require("tslib"), require("rxjs"), require("ng.core")) : "function" == typeof define && define.amd ? define(["ng.common", "tslib", "rxjs", "ng.core"], e) : "object" == typeof exports ? exports.listWidgetPlugin = e(require("ng.common"), require("tslib"), require("rxjs"), require("ng.core")) : t.listWidgetPlugin = e(t["ng.common"], t.tslib, t.rxjs, t["ng.core"]) }("undefined" != typeof self ? self : this, function (t, e, n, r) { return function (t) { var e = {}; function n(r) { if (e[r]) return e[r].exports; var o = e[r] = { i: r, l: !1, exports: {} }; return t[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports } return n.m = t, n.c = e, n.d = function (t, e, r) { n.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: r }) }, n.r = function (t) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t, "__esModule", { value: !0 }) }, n.t = function (t, e) { if (1 & e && (t = n(t)), 8 & e) return t; if (4 & e && "object" == typeof t && t && t.__esModule) return t; var r = Object.create(null); if (n.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: t }), 2 & e && "string" != typeof t) for (var o in t) n.d(r, o, (function (e) { return t[e] }).bind(null, o)); return r }, n.n = function (t) { var e = t && t.__esModule ? function () { return t.default } : function () { return t }; return n.d(e, "a", e), e }, n.o = function (t, e) { return Object.prototype.hasOwnProperty.call(t, e) }, n.p = "", n(n.s = 0) }({ 0: function (t, e, n) { t.exports = n("zUnb") }, "0S4P": function (e, n) { e.exports = t }, "17wl": function (t, n) { t.exports = e }, Vgaj: function (t, e) { t.exports = n }, vOrQ: function (t, e) { t.exports = r }, zUnb: function (t, e, n) { "use strict"; n.r(e); var r = n("vOrQ"), o = function () { function t(t) { this.api = t } return t.prototype.ngOnInit = function () { this.getNewsWidgetCatalog() }, t.prototype.getNewsWidgetCatalog = function () { var t = this; return console.log("getNewsWidgetCatalog called"), this.api.get("portalApi/dashboard/widgetData/?resourceType=NEWS", { withCredentials: !0 }).subscribe(function (e) { e && (console.log("data from microservice " + e), t.newsData = e.response.items) }, function (t) { console.log("getAppCatalogServices Error Object" + t) }) }, t }(), i = function () { function t() { } return t.entry = o, t }(), s = n("0S4P"), u = n("17wl"), a = n("Vgaj"); function l(t) { return "function" == typeof t } var c = !1, p = { Promise: void 0, set useDeprecatedSynchronousErrorHandling(t) { c = t }, get useDeprecatedSynchronousErrorHandling() { return c } }; function h(t) { setTimeout(function () { throw t }) } var d = { closed: !0, next: function (t) { }, error: function (t) { if (p.useDeprecatedSynchronousErrorHandling) throw t; h(t) }, complete: function () { } }, f = Array.isArray || function (t) { return t && "number" == typeof t.length }; function y(t) { return null != t && "object" == typeof t } var b, m = { e: {} }; function v() { try { return b.apply(this, arguments) } catch (t) { return m.e = t, m } } function g(t) { return b = t, v } function w(t) { return Error.call(this), this.message = t ? t.length + " errors occurred during unsubscription:\n" + t.map(function (t, e) { return e + 1 + ") " + t.toString() }).join("\n  ") : "", this.name = "UnsubscriptionError", this.errors = t, this } w.prototype = Object.create(Error.prototype); var _ = w, x = function () { function t(t) { this.closed = !1, this._parent = null, this._parents = null, this._subscriptions = null, t && (this._unsubscribe = t) } var e; return t.prototype.unsubscribe = function () { var t, e = !1; if (!this.closed) { var n = this._parent, r = this._parents, o = this._unsubscribe, i = this._subscriptions; this.closed = !0, this._parent = null, this._parents = null, this._subscriptions = null; for (var s = -1, u = r ? r.length : 0; n;)n.remove(this), n = ++s < u && r[s] || null; if (l(o) && g(o).call(this) === m && (e = !0, t = t || (m.e instanceof _ ? E(m.e.errors) : [m.e])), f(i)) for (s = -1, u = i.length; ++s < u;) { var a = i[s]; if (y(a) && g(a.unsubscribe).call(a) === m) { e = !0, t = t || []; var c = m.e; c instanceof _ ? t = t.concat(E(c.errors)) : t.push(c) } } if (e) throw new _(t) } }, t.prototype.add = function (e) { if (!e || e === t.EMPTY) return t.EMPTY; if (e === this) return this; var n = e; switch (typeof e) { case "function": n = new t(e); case "object": if (n.closed || "function" != typeof n.unsubscribe) return n; if (this.closed) return n.unsubscribe(), n; if ("function" != typeof n._addParent) { var r = n; (n = new t)._subscriptions = [r] } break; default: throw new Error("unrecognized teardown " + e + " added to Subscription.") }return (this._subscriptions || (this._subscriptions = [])).push(n), n._addParent(this), n }, t.prototype.remove = function (t) { var e = this._subscriptions; if (e) { var n = e.indexOf(t); -1 !== n && e.splice(n, 1) } }, t.prototype._addParent = function (t) { var e = this._parent, n = this._parents; e && e !== t ? n ? -1 === n.indexOf(t) && n.push(t) : this._parents = [t] : this._parent = t }, t.EMPTY = ((e = new t).closed = !0, e), t }(); function E(t) { return t.reduce(function (t, e) { return t.concat(e instanceof _ ? e.errors : e) }, []) } var T = "function" == typeof Symbol ? Symbol("rxSubscriber") : "@@rxSubscriber_" + Math.random(), S = function (t) { function e(n, r, o) { var i = t.call(this) || this; switch (i.syncErrorValue = null, i.syncErrorThrown = !1, i.syncErrorThrowable = !1, i.isStopped = !1, i._parentSubscription = null, arguments.length) { case 0: i.destination = d; break; case 1: if (!n) { i.destination = d; break } if ("object" == typeof n) { n instanceof e ? (i.syncErrorThrowable = n.syncErrorThrowable, i.destination = n, n.add(i)) : (i.syncErrorThrowable = !0, i.destination = new O(i, n)); break } default: i.syncErrorThrowable = !0, i.destination = new O(i, n, r, o) }return i } return u.__extends(e, t), e.prototype[T] = function () { return this }, e.create = function (t, n, r) { var o = new e(t, n, r); return o.syncErrorThrowable = !1, o }, e.prototype.next = function (t) { this.isStopped || this._next(t) }, e.prototype.error = function (t) { this.isStopped || (this.isStopped = !0, this._error(t)) }, e.prototype.complete = function () { this.isStopped || (this.isStopped = !0, this._complete()) }, e.prototype.unsubscribe = function () { this.closed || (this.isStopped = !0, t.prototype.unsubscribe.call(this)) }, e.prototype._next = function (t) { this.destination.next(t) }, e.prototype._error = function (t) { this.destination.error(t), this.unsubscribe() }, e.prototype._complete = function () { this.destination.complete(), this.unsubscribe() }, e.prototype._unsubscribeAndRecycle = function () { var t = this._parent, e = this._parents; return this._parent = null, this._parents = null, this.unsubscribe(), this.closed = !1, this.isStopped = !1, this._parent = t, this._parents = e, this._parentSubscription = null, this }, e }(x), O = function (t) { function e(e, n, r, o) { var i, s = t.call(this) || this; s._parentSubscriber = e; var u = s; return l(n) ? i = n : n && (i = n.next, r = n.error, o = n.complete, n !== d && (l((u = Object.create(n)).unsubscribe) && s.add(u.unsubscribe.bind(u)), u.unsubscribe = s.unsubscribe.bind(s))), s._context = u, s._next = i, s._error = r, s._complete = o, s } return u.__extends(e, t), e.prototype.next = function (t) { if (!this.isStopped && this._next) { var e = this._parentSubscriber; p.useDeprecatedSynchronousErrorHandling && e.syncErrorThrowable ? this.__tryOrSetError(e, this._next, t) && this.unsubscribe() : this.__tryOrUnsub(this._next, t) } }, e.prototype.error = function (t) { if (!this.isStopped) { var e = this._parentSubscriber, n = p.useDeprecatedSynchronousErrorHandling; if (this._error) n && e.syncErrorThrowable ? (this.__tryOrSetError(e, this._error, t), this.unsubscribe()) : (this.__tryOrUnsub(this._error, t), this.unsubscribe()); else if (e.syncErrorThrowable) n ? (e.syncErrorValue = t, e.syncErrorThrown = !0) : h(t), this.unsubscribe(); else { if (this.unsubscribe(), n) throw t; h(t) } } }, e.prototype.complete = function () { var t = this; if (!this.isStopped) { var e = this._parentSubscriber; if (this._complete) { var n = function () { return t._complete.call(t._context) }; p.useDeprecatedSynchronousErrorHandling && e.syncErrorThrowable ? (this.__tryOrSetError(e, n), this.unsubscribe()) : (this.__tryOrUnsub(n), this.unsubscribe()) } else this.unsubscribe() } }, e.prototype.__tryOrUnsub = function (t, e) { try { t.call(this._context, e) } catch (n) { if (this.unsubscribe(), p.useDeprecatedSynchronousErrorHandling) throw n; h(n) } }, e.prototype.__tryOrSetError = function (t, e, n) { if (!p.useDeprecatedSynchronousErrorHandling) throw new Error("bad call"); try { e.call(this._context, n) } catch (r) { return p.useDeprecatedSynchronousErrorHandling ? (t.syncErrorValue = r, t.syncErrorThrown = !0, !0) : (h(r), !0) } return !1 }, e.prototype._unsubscribe = function () { var t = this._parentSubscriber; this._context = null, this._parentSubscriber = null, t.unsubscribe() }, e }(S), j = function (t) { function e(e, n, r) { var o = t.call(this) || this; return o.parent = e, o.outerValue = n, o.outerIndex = r, o.index = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { this.parent.notifyNext(this.outerValue, t, this.outerIndex, this.index++, this) }, e.prototype._error = function (t) { this.parent.notifyError(t, this), this.unsubscribe() }, e.prototype._complete = function () { this.parent.notifyComplete(this), this.unsubscribe() }, e }(S), C = "function" == typeof Symbol && Symbol.observable || "@@observable"; var N = function () { function t(t) { this._isScalar = !1, t && (this._subscribe = t) } return t.prototype.lift = function (e) { var n = new t; return n.source = this, n.operator = e, n }, t.prototype.subscribe = function (t, e, n) { var r = this.operator, o = function (t, e, n) { if (t) { if (t instanceof S) return t; if (t[T]) return t[T]() } return t || e || n ? new S(t, e, n) : new S(d) }(t, e, n); if (r ? r.call(o, this.source) : o.add(this.source || p.useDeprecatedSynchronousErrorHandling && !o.syncErrorThrowable ? this._subscribe(o) : this._trySubscribe(o)), p.useDeprecatedSynchronousErrorHandling && o.syncErrorThrowable && (o.syncErrorThrowable = !1, o.syncErrorThrown)) throw o.syncErrorValue; return o }, t.prototype._trySubscribe = function (t) { try { return this._subscribe(t) } catch (e) { p.useDeprecatedSynchronousErrorHandling && (t.syncErrorThrown = !0, t.syncErrorValue = e), function (t) { for (; t;) { var e = t.destination; if (t.closed || t.isStopped) return !1; t = e && e instanceof S ? e : null } return !0 }(t) ? t.error(e) : console.warn(e) } }, t.prototype.forEach = function (t, e) { var n = this; return new (e = P(e))(function (e, r) { var o; o = n.subscribe(function (e) { try { t(e) } catch (n) { r(n), o && o.unsubscribe() } }, r, e) }) }, t.prototype._subscribe = function (t) { var e = this.source; return e && e.subscribe(t) }, t.prototype[C] = function () { return this }, t.prototype.pipe = function () { for (var t = [], e = 0; e < arguments.length; e++)t[e] = arguments[e]; return 0 === t.length ? this : ((n = t) ? 1 === n.length ? n[0] : function (t) { return n.reduce(function (t, e) { return e(t) }, t) } : function () { })(this); var n }, t.prototype.toPromise = function (t) { var e = this; return new (t = P(t))(function (t, n) { var r; e.subscribe(function (t) { return r = t }, function (t) { return n(t) }, function () { return t(r) }) }) }, t.create = function (e) { return new t(e) }, t }(); function P(t) { if (t || (t = p.Promise || Promise), !t) throw new Error("no Promise impl found"); return t } var k = function (t) { return function (e) { for (var n = 0, r = t.length; n < r && !e.closed; n++)e.next(t[n]); e.closed || e.complete() } }, I = function (t) { return function (e) { return t.then(function (t) { e.closed || (e.next(t), e.complete()) }, function (t) { return e.error(t) }).then(null, h), e } }; function A() { return "function" == typeof Symbol && Symbol.iterator ? Symbol.iterator : "@@iterator" } var R = A(), z = function (t) { return function (e) { for (var n = t[R](); ;) { var r = n.next(); if (r.done) { e.complete(); break } if (e.next(r.value), e.closed) break } return "function" == typeof n.return && e.add(function () { n.return && n.return() }), e } }, D = function (t) { return function (e) { var n = t[C](); if ("function" != typeof n.subscribe) throw new TypeError("Provided object does not correctly implement Symbol.observable"); return n.subscribe(e) } }, H = function (t) { return t && "number" == typeof t.length && "function" != typeof t }; function U(t) { return t && "function" != typeof t.subscribe && "function" == typeof t.then } var F = function (t) { if (t instanceof N) return function (e) { return t._isScalar ? (e.next(t.value), void e.complete()) : t.subscribe(e) }; if (t && "function" == typeof t[C]) return D(t); if (H(t)) return k(t); if (U(t)) return I(t); if (t && "function" == typeof t[R]) return z(t); var e = y(t) ? "an invalid object" : "'" + t + "'"; throw new TypeError("You provided " + e + " where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.") }, L = function (t) { function e() { return null !== t && t.apply(this, arguments) || this } return u.__extends(e, t), e.prototype.notifyNext = function (t, e, n, r, o) { this.destination.next(e) }, e.prototype.notifyError = function (t, e) { this.destination.error(t) }, e.prototype.notifyComplete = function (t) { this.destination.complete() }, e }(S); function M(t, e) { return function (n) { if ("function" != typeof t) throw new TypeError("argument is not a function. Are you looking for `mapTo()`?"); return n.lift(new q(t, e)) } } var q = function () { function t(t, e) { this.project = t, this.thisArg = e } return t.prototype.call = function (t, e) { return e.subscribe(new V(t, this.project, this.thisArg)) }, t }(), V = function (t) { function e(e, n, r) { var o = t.call(this, e) || this; return o.project = n, o.count = 0, o.thisArg = r || o, o } return u.__extends(e, t), e.prototype._next = function (t) { var e; try { e = this.project.call(this.thisArg, t, this.count++) } catch (n) { return void this.destination.error(n) } this.destination.next(e) }, e }(S), W = function () { function t(t, e) { void 0 === e && (e = Number.POSITIVE_INFINITY), this.project = t, this.concurrent = e } return t.prototype.call = function (t, e) { return e.subscribe(new B(t, this.project, this.concurrent)) }, t }(), B = function (t) { function e(e, n, r) { void 0 === r && (r = Number.POSITIVE_INFINITY); var o = t.call(this, e) || this; return o.project = n, o.concurrent = r, o.hasCompleted = !1, o.buffer = [], o.active = 0, o.index = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { this.active < this.concurrent ? this._tryNext(t) : this.buffer.push(t) }, e.prototype._tryNext = function (t) { var e, n = this.index++; try { e = this.project(t, n) } catch (r) { return void this.destination.error(r) } this.active++ , this._innerSub(e, t, n) }, e.prototype._innerSub = function (t, e, n) { var r, o, i = new j(this, void 0, void 0); this.destination.add(i), r = t, void 0 === (o = i) && (o = new j(this, e, n)), o.closed || F(r)(o) }, e.prototype._complete = function () { this.hasCompleted = !0, 0 === this.active && 0 === this.buffer.length && this.destination.complete(), this.unsubscribe() }, e.prototype.notifyNext = function (t, e, n, r, o) { this.destination.next(e) }, e.prototype.notifyComplete = function (t) { var e = this.buffer; this.remove(t), this.active-- , e.length > 0 ? this._next(e.shift()) : 0 === this.active && this.hasCompleted && this.destination.complete() }, e }(L); var K = function () { function t(t, e) { this.predicate = t, this.thisArg = e } return t.prototype.call = function (t, e) { return e.subscribe(new J(t, this.predicate, this.thisArg)) }, t }(), J = function (t) { function e(e, n, r) { var o = t.call(this, e) || this; return o.predicate = n, o.thisArg = r, o.count = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { var e; try { e = this.predicate.call(this.thisArg, t, this.count++) } catch (n) { return void this.destination.error(n) } e && this.destination.next(t) }, e }(S), X = function () { return function () { } }(), Y = function () { return function () { } }(), G = function () { function t(t) { var e = this; this.normalizedNames = new Map, this.lazyUpdate = null, t ? this.lazyInit = "string" == typeof t ? function () { e.headers = new Map, t.split("\n").forEach(function (t) { var n = t.indexOf(":"); if (n > 0) { var r = t.slice(0, n), o = r.toLowerCase(), i = t.slice(n + 1).trim(); e.maybeSetNormalizedName(r, o), e.headers.has(o) ? e.headers.get(o).push(i) : e.headers.set(o, [i]) } }) } : function () { e.headers = new Map, Object.keys(t).forEach(function (n) { var r = t[n], o = n.toLowerCase(); "string" == typeof r && (r = [r]), r.length > 0 && (e.headers.set(o, r), e.maybeSetNormalizedName(n, o)) }) } : this.headers = new Map } return t.prototype.has = function (t) { return this.init(), this.headers.has(t.toLowerCase()) }, t.prototype.get = function (t) { this.init(); var e = this.headers.get(t.toLowerCase()); return e && e.length > 0 ? e[0] : null }, t.prototype.keys = function () { return this.init(), Array.from(this.normalizedNames.values()) }, t.prototype.getAll = function (t) { return this.init(), this.headers.get(t.toLowerCase()) || null }, t.prototype.append = function (t, e) { return this.clone({ name: t, value: e, op: "a" }) }, t.prototype.set = function (t, e) { return this.clone({ name: t, value: e, op: "s" }) }, t.prototype.delete = function (t, e) { return this.clone({ name: t, value: e, op: "d" }) }, t.prototype.maybeSetNormalizedName = function (t, e) { this.normalizedNames.has(e) || this.normalizedNames.set(e, t) }, t.prototype.init = function () { var e = this; this.lazyInit && (this.lazyInit instanceof t ? this.copyFrom(this.lazyInit) : this.lazyInit(), this.lazyInit = null, this.lazyUpdate && (this.lazyUpdate.forEach(function (t) { return e.applyUpdate(t) }), this.lazyUpdate = null)) }, t.prototype.copyFrom = function (t) { var e = this; t.init(), Array.from(t.headers.keys()).forEach(function (n) { e.headers.set(n, t.headers.get(n)), e.normalizedNames.set(n, t.normalizedNames.get(n)) }) }, t.prototype.clone = function (e) { var n = new t; return n.lazyInit = this.lazyInit && this.lazyInit instanceof t ? this.lazyInit : this, n.lazyUpdate = (this.lazyUpdate || []).concat([e]), n }, t.prototype.applyUpdate = function (t) { var e = t.name.toLowerCase(); switch (t.op) { case "a": case "s": var n = t.value; if ("string" == typeof n && (n = [n]), 0 === n.length) return; this.maybeSetNormalizedName(t.name, e); var r = ("a" === t.op ? this.headers.get(e) : void 0) || []; r.push.apply(r, Object(u.__spread)(n)), this.headers.set(e, r); break; case "d": var o = t.value; if (o) { var i = this.headers.get(e); if (!i) return; 0 === (i = i.filter(function (t) { return -1 === o.indexOf(t) })).length ? (this.headers.delete(e), this.normalizedNames.delete(e)) : this.headers.set(e, i) } else this.headers.delete(e), this.normalizedNames.delete(e) } }, t.prototype.forEach = function (t) { var e = this; this.init(), Array.from(this.normalizedNames.keys()).forEach(function (n) { return t(e.normalizedNames.get(n), e.headers.get(n)) }) }, t }(), $ = function () { function t() { } return t.prototype.encodeKey = function (t) { return Q(t) }, t.prototype.encodeValue = function (t) { return Q(t) }, t.prototype.decodeKey = function (t) { return decodeURIComponent(t) }, t.prototype.decodeValue = function (t) { return decodeURIComponent(t) }, t }(); function Q(t) { return encodeURIComponent(t).replace(/%40/gi, "@").replace(/%3A/gi, ":").replace(/%24/gi, "$").replace(/%2C/gi, ",").replace(/%3B/gi, ";").replace(/%2B/gi, "+").replace(/%3D/gi, "=").replace(/%3F/gi, "?").replace(/%2F/gi, "/") } var Z = function () { function t(t) { void 0 === t && (t = {}); var e, n, r, o = this; if (this.updates = null, this.cloneFrom = null, this.encoder = t.encoder || new $, t.fromString) { if (t.fromObject) throw new Error("Cannot specify both fromString and fromObject."); this.map = (e = t.fromString, n = this.encoder, r = new Map, e.length > 0 && e.split("&").forEach(function (t) { var e = t.indexOf("="), o = Object(u.__read)(-1 == e ? [n.decodeKey(t), ""] : [n.decodeKey(t.slice(0, e)), n.decodeValue(t.slice(e + 1))], 2), i = o[0], s = o[1], a = r.get(i) || []; a.push(s), r.set(i, a) }), r) } else t.fromObject ? (this.map = new Map, Object.keys(t.fromObject).forEach(function (e) { var n = t.fromObject[e]; o.map.set(e, Array.isArray(n) ? n : [n]) })) : this.map = null } return t.prototype.has = function (t) { return this.init(), this.map.has(t) }, t.prototype.get = function (t) { this.init(); var e = this.map.get(t); return e ? e[0] : null }, t.prototype.getAll = function (t) { return this.init(), this.map.get(t) || null }, t.prototype.keys = function () { return this.init(), Array.from(this.map.keys()) }, t.prototype.append = function (t, e) { return this.clone({ param: t, value: e, op: "a" }) }, t.prototype.set = function (t, e) { return this.clone({ param: t, value: e, op: "s" }) }, t.prototype.delete = function (t, e) { return this.clone({ param: t, value: e, op: "d" }) }, t.prototype.toString = function () { var t = this; return this.init(), this.keys().map(function (e) { var n = t.encoder.encodeKey(e); return t.map.get(e).map(function (e) { return n + "=" + t.encoder.encodeValue(e) }).join("&") }).join("&") }, t.prototype.clone = function (e) { var n = new t({ encoder: this.encoder }); return n.cloneFrom = this.cloneFrom || this, n.updates = (this.updates || []).concat([e]), n }, t.prototype.init = function () { var t = this; null === this.map && (this.map = new Map), null !== this.cloneFrom && (this.cloneFrom.init(), this.cloneFrom.keys().forEach(function (e) { return t.map.set(e, t.cloneFrom.map.get(e)) }), this.updates.forEach(function (e) { switch (e.op) { case "a": case "s": var n = ("a" === e.op ? t.map.get(e.param) : void 0) || []; n.push(e.value), t.map.set(e.param, n); break; case "d": if (void 0 === e.value) { t.map.delete(e.param); break } var r = t.map.get(e.param) || [], o = r.indexOf(e.value); -1 !== o && r.splice(o, 1), r.length > 0 ? t.map.set(e.param, r) : t.map.delete(e.param) } }), this.cloneFrom = null) }, t }(); function tt(t) { return "undefined" != typeof ArrayBuffer && t instanceof ArrayBuffer } function et(t) { return "undefined" != typeof Blob && t instanceof Blob } function nt(t) { return "undefined" != typeof FormData && t instanceof FormData } var rt = function () { function t(t, e, n, r) { var o; if (this.url = e, this.body = null, this.reportProgress = !1, this.withCredentials = !1, this.responseType = "json", this.method = t.toUpperCase(), function (t) { switch (t) { case "DELETE": case "GET": case "HEAD": case "OPTIONS": case "JSONP": return !1; default: return !0 } }(this.method) || r ? (this.body = void 0 !== n ? n : null, o = r) : o = n, o && (this.reportProgress = !!o.reportProgress, this.withCredentials = !!o.withCredentials, o.responseType && (this.responseType = o.responseType), o.headers && (this.headers = o.headers), o.params && (this.params = o.params)), this.headers || (this.headers = new G), this.params) { var i = this.params.toString(); if (0 === i.length) this.urlWithParams = e; else { var s = e.indexOf("?"); this.urlWithParams = e + (-1 === s ? "?" : s < e.length - 1 ? "&" : "") + i } } else this.params = new Z, this.urlWithParams = e } return t.prototype.serializeBody = function () { return null === this.body ? null : tt(this.body) || et(this.body) || nt(this.body) || "string" == typeof this.body ? this.body : this.body instanceof Z ? this.body.toString() : "object" == typeof this.body || "boolean" == typeof this.body || Array.isArray(this.body) ? JSON.stringify(this.body) : this.body.toString() }, t.prototype.detectContentTypeHeader = function () { return null === this.body ? null : nt(this.body) ? null : et(this.body) ? this.body.type || null : tt(this.body) ? null : "string" == typeof this.body ? "text/plain" : this.body instanceof Z ? "application/x-www-form-urlencoded;charset=UTF-8" : "object" == typeof this.body || "number" == typeof this.body || Array.isArray(this.body) ? "application/json" : null }, t.prototype.clone = function (e) { void 0 === e && (e = {}); var n = e.method || this.method, r = e.url || this.url, o = e.responseType || this.responseType, i = void 0 !== e.body ? e.body : this.body, s = void 0 !== e.withCredentials ? e.withCredentials : this.withCredentials, u = void 0 !== e.reportProgress ? e.reportProgress : this.reportProgress, a = e.headers || this.headers, l = e.params || this.params; return void 0 !== e.setHeaders && (a = Object.keys(e.setHeaders).reduce(function (t, n) { return t.set(n, e.setHeaders[n]) }, a)), e.setParams && (l = Object.keys(e.setParams).reduce(function (t, n) { return t.set(n, e.setParams[n]) }, l)), new t(n, r, i, { params: l, headers: a, reportProgress: u, responseType: o, withCredentials: s }) }, t }(), ot = function (t) { return t[t.Sent = 0] = "Sent", t[t.UploadProgress = 1] = "UploadProgress", t[t.ResponseHeader = 2] = "ResponseHeader", t[t.DownloadProgress = 3] = "DownloadProgress", t[t.Response = 4] = "Response", t[t.User = 5] = "User", t }({}), it = function () { return function (t, e, n) { void 0 === e && (e = 200), void 0 === n && (n = "OK"), this.headers = t.headers || new G, this.status = void 0 !== t.status ? t.status : e, this.statusText = t.statusText || n, this.url = t.url || null, this.ok = this.status >= 200 && this.status < 300 } }(), st = function (t) { function e(e) { void 0 === e && (e = {}); var n = t.call(this, e) || this; return n.type = ot.ResponseHeader, n } return Object(u.__extends)(e, t), e.prototype.clone = function (t) { return void 0 === t && (t = {}), new e({ headers: t.headers || this.headers, status: void 0 !== t.status ? t.status : this.status, statusText: t.statusText || this.statusText, url: t.url || this.url || void 0 }) }, e }(it), ut = function (t) { function e(e) { void 0 === e && (e = {}); var n = t.call(this, e) || this; return n.type = ot.Response, n.body = void 0 !== e.body ? e.body : null, n } return Object(u.__extends)(e, t), e.prototype.clone = function (t) { return void 0 === t && (t = {}), new e({ body: void 0 !== t.body ? t.body : this.body, headers: t.headers || this.headers, status: void 0 !== t.status ? t.status : this.status, statusText: t.statusText || this.statusText, url: t.url || this.url || void 0 }) }, e }(it), at = function (t) { function e(e) { var n = t.call(this, e, 0, "Unknown Error") || this; return n.name = "HttpErrorResponse", n.ok = !1, n.message = n.status >= 200 && n.status < 300 ? "Http failure during parsing for " + (e.url || "(unknown url)") : "Http failure response for " + (e.url || "(unknown url)") + ": " + e.status + " " + e.statusText, n.error = e.error || null, n } return Object(u.__extends)(e, t), e }(it); function lt(t, e) { return { body: e, headers: t.headers, observe: t.observe, params: t.params, reportProgress: t.reportProgress, responseType: t.responseType, withCredentials: t.withCredentials } } var ct = function () { function t(t) { this.handler = t } return t.prototype.request = function (t, e, n) { var r, o = this; if (void 0 === n && (n = {}), t instanceof rt) r = t; else { var i; i = n.headers instanceof G ? n.headers : new G(n.headers); var s = void 0; n.params && (s = n.params instanceof Z ? n.params : new Z({ fromObject: n.params })), r = new rt(t, e, void 0 !== n.body ? n.body : null, { headers: i, params: s, reportProgress: n.reportProgress, responseType: n.responseType || "json", withCredentials: n.withCredentials }) } var u, l = Object(a.of)(r).pipe(function t(e, n, r) { return void 0 === r && (r = Number.POSITIVE_INFINITY), "function" == typeof n ? function (o) { return o.pipe(t(function (t, r) { return (o = e(t, r), o instanceof N ? o : new N(F(o))).pipe(M(function (e, o) { return n(t, e, r, o) })); var o }, r)) } : ("number" == typeof n && (r = n), function (t) { return t.lift(new W(e, r)) }) }(function (t) { return o.handler.handle(t) }, u, 1)); if (t instanceof rt || "events" === n.observe) return l; var c, p = l.pipe((c = function (t) { return t instanceof ut }, function (t) { return t.lift(new K(c, void 0)) })); switch (n.observe || "body") { case "body": switch (r.responseType) { case "arraybuffer": return p.pipe(M(function (t) { if (null !== t.body && !(t.body instanceof ArrayBuffer)) throw new Error("Response is not an ArrayBuffer."); return t.body })); case "blob": return p.pipe(M(function (t) { if (null !== t.body && !(t.body instanceof Blob)) throw new Error("Response is not a Blob."); return t.body })); case "text": return p.pipe(M(function (t) { if (null !== t.body && "string" != typeof t.body) throw new Error("Response is not a string."); return t.body })); case "json": default: return p.pipe(M(function (t) { return t.body })) }case "response": return p; default: throw new Error("Unreachable: unhandled observe type " + n.observe + "}") } }, t.prototype.delete = function (t, e) { return void 0 === e && (e = {}), this.request("DELETE", t, e) }, t.prototype.get = function (t, e) { return void 0 === e && (e = {}), this.request("GET", t, e) }, t.prototype.head = function (t, e) { return void 0 === e && (e = {}), this.request("HEAD", t, e) }, t.prototype.jsonp = function (t, e) { return this.request("JSONP", t, { params: (new Z).append(e, "JSONP_CALLBACK"), observe: "body", responseType: "json" }) }, t.prototype.options = function (t, e) { return void 0 === e && (e = {}), this.request("OPTIONS", t, e) }, t.prototype.patch = function (t, e, n) { return void 0 === n && (n = {}), this.request("PATCH", t, lt(n, e)) }, t.prototype.post = function (t, e, n) { return void 0 === n && (n = {}), this.request("POST", t, lt(n, e)) }, t.prototype.put = function (t, e, n) { return void 0 === n && (n = {}), this.request("PUT", t, lt(n, e)) }, t }(), pt = function () { function t(t, e) { this.next = t, this.interceptor = e } return t.prototype.handle = function (t) { return this.interceptor.intercept(t, this.next) }, t }(), ht = new r.InjectionToken("HTTP_INTERCEPTORS"), dt = function () { function t() { } return t.prototype.intercept = function (t, e) { return e.handle(t) }, t }(), ft = /^\)\]\}',?\n/, yt = function () { return function () { } }(), bt = function () { function t() { } return t.prototype.build = function () { return new XMLHttpRequest }, t }(), mt = function () { function t(t) { this.xhrFactory = t } return t.prototype.handle = function (t) { var e = this; if ("JSONP" === t.method) throw new Error("Attempted to construct Jsonp request without JsonpClientModule installed."); return new a.Observable(function (n) { var r = e.xhrFactory.build(); if (r.open(t.method, t.urlWithParams), t.withCredentials && (r.withCredentials = !0), t.headers.forEach(function (t, e) { return r.setRequestHeader(t, e.join(",")) }), t.headers.has("Accept") || r.setRequestHeader("Accept", "application/json, text/plain, */*"), !t.headers.has("Content-Type")) { var o = t.detectContentTypeHeader(); null !== o && r.setRequestHeader("Content-Type", o) } if (t.responseType) { var i = t.responseType.toLowerCase(); r.responseType = "json" !== i ? i : "text" } var s = t.serializeBody(), u = null, a = function () { if (null !== u) return u; var e = 1223 === r.status ? 204 : r.status, n = r.statusText || "OK", o = new G(r.getAllResponseHeaders()), i = function (t) { return "responseURL" in t && t.responseURL ? t.responseURL : /^X-Request-URL:/m.test(t.getAllResponseHeaders()) ? t.getResponseHeader("X-Request-URL") : null }(r) || t.url; return u = new st({ headers: o, status: e, statusText: n, url: i }) }, l = function () { var e = a(), o = e.headers, i = e.status, s = e.statusText, u = e.url, l = null; 204 !== i && (l = void 0 === r.response ? r.responseText : r.response), 0 === i && (i = l ? 200 : 0); var c = i >= 200 && i < 300; if ("json" === t.responseType && "string" == typeof l) { var p = l; l = l.replace(ft, ""); try { l = "" !== l ? JSON.parse(l) : null } catch (h) { l = p, c && (c = !1, l = { error: h, text: l }) } } c ? (n.next(new ut({ body: l, headers: o, status: i, statusText: s, url: u || void 0 })), n.complete()) : n.error(new at({ error: l, headers: o, status: i, statusText: s, url: u || void 0 })) }, c = function (t) { var e = a().url, o = new at({ error: t, status: r.status || 0, statusText: r.statusText || "Unknown Error", url: e || void 0 }); n.error(o) }, p = !1, h = function (e) { p || (n.next(a()), p = !0); var o = { type: ot.DownloadProgress, loaded: e.loaded }; e.lengthComputable && (o.total = e.total), "text" === t.responseType && r.responseText && (o.partialText = r.responseText), n.next(o) }, d = function (t) { var e = { type: ot.UploadProgress, loaded: t.loaded }; t.lengthComputable && (e.total = t.total), n.next(e) }; return r.addEventListener("load", l), r.addEventListener("error", c), t.reportProgress && (r.addEventListener("progress", h), null !== s && r.upload && r.upload.addEventListener("progress", d)), r.send(s), n.next({ type: ot.Sent }), function () { r.removeEventListener("error", c), r.removeEventListener("load", l), t.reportProgress && (r.removeEventListener("progress", h), null !== s && r.upload && r.upload.removeEventListener("progress", d)), r.abort() } }) }, t }(), vt = new r.InjectionToken("XSRF_COOKIE_NAME"), gt = new r.InjectionToken("XSRF_HEADER_NAME"), wt = function () { return function () { } }(), _t = function () { function t(t, e, n) { this.doc = t, this.platform = e, this.cookieName = n, this.lastCookieString = "", this.lastToken = null, this.parseCount = 0 } return t.prototype.getToken = function () { if ("server" === this.platform) return null; var t = this.doc.cookie || ""; return t !== this.lastCookieString && (this.parseCount++ , this.lastToken = Object(s["\u0275parseCookieValue"])(t, this.cookieName), this.lastCookieString = t), this.lastToken }, t }(), xt = function () { function t(t, e) { this.tokenService = t, this.headerName = e } return t.prototype.intercept = function (t, e) { var n = t.url.toLowerCase(); if ("GET" === t.method || "HEAD" === t.method || n.startsWith("http://") || n.startsWith("https://")) return e.handle(t); var r = this.tokenService.getToken(); return null === r || t.headers.has(this.headerName) || (t = t.clone({ headers: t.headers.set(this.headerName, r) })), e.handle(t) }, t }(), Et = function () { function t(t, e) { this.backend = t, this.injector = e, this.chain = null } return t.prototype.handle = function (t) { if (null === this.chain) { var e = this.injector.get(ht, []); this.chain = e.reduceRight(function (t, e) { return new pt(t, e) }, this.backend) } return this.chain.handle(t) }, t }(), Tt = function () { function t() { } var e; return e = t, t.disable = function () { return { ngModule: e, providers: [{ provide: xt, useClass: dt }] } }, t.withOptions = function (t) { return void 0 === t && (t = {}), { ngModule: e, providers: [t.cookieName ? { provide: vt, useValue: t.cookieName } : [], t.headerName ? { provide: gt, useValue: t.headerName } : []] } }, t }(), St = function () { return function () { } }(), Ot = r["\u0275crt"]({ encapsulation: 0, styles: [[""]], data: {} }); function jt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 2, "li", [], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 1, "a", [["target", "_blank"]], [[8, "href", 4]], null, null, null, null)), (t()(), r["\u0275ted"](2, null, ["", ""]))], null, function (t, e) { t(e, 1, 0, r["\u0275inlineInterpolate"](1, "", e.context.$implicit.href, "")), t(e, 2, 0, e.context.$implicit.title) }) } function Ct(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 2, "ul", [], null, null, null, null, null)), (t()(), r["\u0275and"](16777216, null, null, 1, null, jt)), r["\u0275did"](2, 278528, null, 0, s.NgForOf, [r.ViewContainerRef, r.TemplateRef, r.IterableDiffers], { ngForOf: [0, "ngForOf"] }, null)], function (t, e) { t(e, 2, 0, e.component.newsData) }, null) } function Nt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 6, "div", [], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 5, "div", [["class", "activity-error-container"], ["style", "background: rgb(255, 255, 255); overflow: hidden !important; width: 100%;"]], null, null, null, null, null)), (t()(), r["\u0275eld"](2, 0, null, null, 4, "div", [["class", "activity-error-block"]], null, null, null, null, null)), (t()(), r["\u0275eld"](3, 0, null, null, 0, "i", [["class", "icon-information full-linear-icon-information"], ["style", "margin-left: 125px; font-size: 90px"]], null, null, null, null, null)), (t()(), r["\u0275eld"](4, 0, null, null, 0, "br", [], null, null, null, null, null)), (t()(), r["\u0275eld"](5, 0, null, null, 1, "div", [["class", "activity-error-msg1"]], null, null, null, null, null)), (t()(), r["\u0275ted"](-1, null, ["There's currently no news available."]))], null, null) } function Pt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 6, "div", [["class", "widget-news-main"], ["id", "widget-news"]], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 5, "div", [["att-gridster-item-body", ""], ["class", "information-section-gridsterContent"]], null, null, null, null, null)), (t()(), r["\u0275eld"](2, 0, null, null, 4, "div", [["class", "resources"]], null, null, null, null, null)), (t()(), r["\u0275and"](16777216, null, null, 1, null, Ct)), r["\u0275did"](4, 16384, null, 0, s.NgIf, [r.ViewContainerRef, r.TemplateRef], { ngIf: [0, "ngIf"] }, null), (t()(), r["\u0275and"](16777216, null, null, 1, null, Nt)), r["\u0275did"](6, 16384, null, 0, s.NgIf, [r.ViewContainerRef, r.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (t, e) { var n = e.component; t(e, 4, 0, n.newsData && 0 != n.newsData.length), t(e, 6, 0, n.newsData && 0 != n.newsData.length) }, null) } function kt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 1, "app-list-widget", [], null, null, null, Pt, Ot)), r["\u0275did"](1, 114688, null, 0, o, [ct], null, null)], function (t, e) { t(e, 1, 0) }, null) } var It = r["\u0275ccf"]("app-list-widget", o, kt, {}, {}, []), At = r["\u0275cmf"](i, [], function (t) { return r["\u0275mod"]([r["\u0275mpd"](512, r.ComponentFactoryResolver, r["\u0275CodegenComponentFactoryResolver"], [[8, [It]], [3, r.ComponentFactoryResolver], r.NgModuleRef]), r["\u0275mpd"](4608, s.NgLocalization, s.NgLocaleLocalization, [r.LOCALE_ID, [2, s["\u0275angular_packages_common_common_a"]]]), r["\u0275mpd"](4608, wt, _t, [s.DOCUMENT, r.PLATFORM_ID, vt]), r["\u0275mpd"](4608, xt, xt, [wt, gt]), r["\u0275mpd"](5120, ht, function (t) { return [t] }, [xt]), r["\u0275mpd"](4608, bt, bt, []), r["\u0275mpd"](6144, yt, null, [bt]), r["\u0275mpd"](4608, mt, mt, [yt]), r["\u0275mpd"](6144, Y, null, [mt]), r["\u0275mpd"](4608, X, Et, [Y, r.Injector]), r["\u0275mpd"](4608, ct, ct, [X]), r["\u0275mpd"](1073742336, s.CommonModule, s.CommonModule, []), r["\u0275mpd"](1073742336, Tt, Tt, []), r["\u0275mpd"](1073742336, St, St, []), r["\u0275mpd"](1073742336, i, i, []), r["\u0275mpd"](256, vt, "XSRF-TOKEN", []), r["\u0275mpd"](256, gt, "X-XSRF-TOKEN", [])]) }); n.d(e, "DynamicWidgetModule", function () { return i }), n.d(e, "DynamicWidgetModuleNgFactory", function () { return At }), e.default = At } }) });
\ No newline at end of file
diff --git a/portal-FE-os/src/assets/plugins/Resources.js b/portal-FE-os/src/assets/plugins/Resources.js
new file mode 100644
index 00000000..717fe665
--- /dev/null
+++ b/portal-FE-os/src/assets/plugins/Resources.js
@@ -0,0 +1 @@
+!function (t, e) { "object" == typeof exports && "object" == typeof module ? module.exports = e(require("ng.common"), require("tslib"), require("rxjs"), require("ng.core")) : "function" == typeof define && define.amd ? define(["ng.common", "tslib", "rxjs", "ng.core"], e) : "object" == typeof exports ? exports.listWidgetPlugin = e(require("ng.common"), require("tslib"), require("rxjs"), require("ng.core")) : t.listWidgetPlugin = e(t["ng.common"], t.tslib, t.rxjs, t["ng.core"]) }("undefined" != typeof self ? self : this, function (t, e, n, r) { return function (t) { var e = {}; function n(r) { if (e[r]) return e[r].exports; var o = e[r] = { i: r, l: !1, exports: {} }; return t[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports } return n.m = t, n.c = e, n.d = function (t, e, r) { n.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: r }) }, n.r = function (t) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(t, "__esModule", { value: !0 }) }, n.t = function (t, e) { if (1 & e && (t = n(t)), 8 & e) return t; if (4 & e && "object" == typeof t && t && t.__esModule) return t; var r = Object.create(null); if (n.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: t }), 2 & e && "string" != typeof t) for (var o in t) n.d(r, o, (function (e) { return t[e] }).bind(null, o)); return r }, n.n = function (t) { var e = t && t.__esModule ? function () { return t.default } : function () { return t }; return n.d(e, "a", e), e }, n.o = function (t, e) { return Object.prototype.hasOwnProperty.call(t, e) }, n.p = "", n(n.s = 0) }({ 0: function (t, e, n) { t.exports = n("zUnb") }, "0S4P": function (e, n) { e.exports = t }, "17wl": function (t, n) { t.exports = e }, Vgaj: function (t, e) { t.exports = n }, vOrQ: function (t, e) { t.exports = r }, zUnb: function (t, e, n) { "use strict"; n.r(e); var r = n("vOrQ"), o = function () { function t(t) { this.api = t } return t.prototype.ngOnInit = function () { this.getNewsWidgetCatalog() }, t.prototype.getNewsWidgetCatalog = function () { var t = this; return console.log("getNewsWidgetCatalog called"), this.api.get("portalApi/dashboard/widgetData/?resourceType=IMPORTANTRESOURCES", { withCredentials: !0 }).subscribe(function (e) { e && (console.log("data from microservice " + e), t.newsData = e.response.items) }, function (t) { console.log("getAppCatalogServices Error Object" + t) }) }, t }(), i = function () { function t() { } return t.entry = o, t }(), s = n("0S4P"), u = n("17wl"), a = n("Vgaj"); function l(t) { return "function" == typeof t } var c = !1, p = { Promise: void 0, set useDeprecatedSynchronousErrorHandling(t) { c = t }, get useDeprecatedSynchronousErrorHandling() { return c } }; function h(t) { setTimeout(function () { throw t }) } var d = { closed: !0, next: function (t) { }, error: function (t) { if (p.useDeprecatedSynchronousErrorHandling) throw t; h(t) }, complete: function () { } }, f = Array.isArray || function (t) { return t && "number" == typeof t.length }; function y(t) { return null != t && "object" == typeof t } var b, m = { e: {} }; function v() { try { return b.apply(this, arguments) } catch (t) { return m.e = t, m } } function g(t) { return b = t, v } function w(t) { return Error.call(this), this.message = t ? t.length + " errors occurred during unsubscription:\n" + t.map(function (t, e) { return e + 1 + ") " + t.toString() }).join("\n  ") : "", this.name = "UnsubscriptionError", this.errors = t, this } w.prototype = Object.create(Error.prototype); var _ = w, x = function () { function t(t) { this.closed = !1, this._parent = null, this._parents = null, this._subscriptions = null, t && (this._unsubscribe = t) } var e; return t.prototype.unsubscribe = function () { var t, e = !1; if (!this.closed) { var n = this._parent, r = this._parents, o = this._unsubscribe, i = this._subscriptions; this.closed = !0, this._parent = null, this._parents = null, this._subscriptions = null; for (var s = -1, u = r ? r.length : 0; n;)n.remove(this), n = ++s < u && r[s] || null; if (l(o) && g(o).call(this) === m && (e = !0, t = t || (m.e instanceof _ ? E(m.e.errors) : [m.e])), f(i)) for (s = -1, u = i.length; ++s < u;) { var a = i[s]; if (y(a) && g(a.unsubscribe).call(a) === m) { e = !0, t = t || []; var c = m.e; c instanceof _ ? t = t.concat(E(c.errors)) : t.push(c) } } if (e) throw new _(t) } }, t.prototype.add = function (e) { if (!e || e === t.EMPTY) return t.EMPTY; if (e === this) return this; var n = e; switch (typeof e) { case "function": n = new t(e); case "object": if (n.closed || "function" != typeof n.unsubscribe) return n; if (this.closed) return n.unsubscribe(), n; if ("function" != typeof n._addParent) { var r = n; (n = new t)._subscriptions = [r] } break; default: throw new Error("unrecognized teardown " + e + " added to Subscription.") }return (this._subscriptions || (this._subscriptions = [])).push(n), n._addParent(this), n }, t.prototype.remove = function (t) { var e = this._subscriptions; if (e) { var n = e.indexOf(t); -1 !== n && e.splice(n, 1) } }, t.prototype._addParent = function (t) { var e = this._parent, n = this._parents; e && e !== t ? n ? -1 === n.indexOf(t) && n.push(t) : this._parents = [t] : this._parent = t }, t.EMPTY = ((e = new t).closed = !0, e), t }(); function E(t) { return t.reduce(function (t, e) { return t.concat(e instanceof _ ? e.errors : e) }, []) } var T = "function" == typeof Symbol ? Symbol("rxSubscriber") : "@@rxSubscriber_" + Math.random(), S = function (t) { function e(n, r, o) { var i = t.call(this) || this; switch (i.syncErrorValue = null, i.syncErrorThrown = !1, i.syncErrorThrowable = !1, i.isStopped = !1, i._parentSubscription = null, arguments.length) { case 0: i.destination = d; break; case 1: if (!n) { i.destination = d; break } if ("object" == typeof n) { n instanceof e ? (i.syncErrorThrowable = n.syncErrorThrowable, i.destination = n, n.add(i)) : (i.syncErrorThrowable = !0, i.destination = new O(i, n)); break } default: i.syncErrorThrowable = !0, i.destination = new O(i, n, r, o) }return i } return u.__extends(e, t), e.prototype[T] = function () { return this }, e.create = function (t, n, r) { var o = new e(t, n, r); return o.syncErrorThrowable = !1, o }, e.prototype.next = function (t) { this.isStopped || this._next(t) }, e.prototype.error = function (t) { this.isStopped || (this.isStopped = !0, this._error(t)) }, e.prototype.complete = function () { this.isStopped || (this.isStopped = !0, this._complete()) }, e.prototype.unsubscribe = function () { this.closed || (this.isStopped = !0, t.prototype.unsubscribe.call(this)) }, e.prototype._next = function (t) { this.destination.next(t) }, e.prototype._error = function (t) { this.destination.error(t), this.unsubscribe() }, e.prototype._complete = function () { this.destination.complete(), this.unsubscribe() }, e.prototype._unsubscribeAndRecycle = function () { var t = this._parent, e = this._parents; return this._parent = null, this._parents = null, this.unsubscribe(), this.closed = !1, this.isStopped = !1, this._parent = t, this._parents = e, this._parentSubscription = null, this }, e }(x), O = function (t) { function e(e, n, r, o) { var i, s = t.call(this) || this; s._parentSubscriber = e; var u = s; return l(n) ? i = n : n && (i = n.next, r = n.error, o = n.complete, n !== d && (l((u = Object.create(n)).unsubscribe) && s.add(u.unsubscribe.bind(u)), u.unsubscribe = s.unsubscribe.bind(s))), s._context = u, s._next = i, s._error = r, s._complete = o, s } return u.__extends(e, t), e.prototype.next = function (t) { if (!this.isStopped && this._next) { var e = this._parentSubscriber; p.useDeprecatedSynchronousErrorHandling && e.syncErrorThrowable ? this.__tryOrSetError(e, this._next, t) && this.unsubscribe() : this.__tryOrUnsub(this._next, t) } }, e.prototype.error = function (t) { if (!this.isStopped) { var e = this._parentSubscriber, n = p.useDeprecatedSynchronousErrorHandling; if (this._error) n && e.syncErrorThrowable ? (this.__tryOrSetError(e, this._error, t), this.unsubscribe()) : (this.__tryOrUnsub(this._error, t), this.unsubscribe()); else if (e.syncErrorThrowable) n ? (e.syncErrorValue = t, e.syncErrorThrown = !0) : h(t), this.unsubscribe(); else { if (this.unsubscribe(), n) throw t; h(t) } } }, e.prototype.complete = function () { var t = this; if (!this.isStopped) { var e = this._parentSubscriber; if (this._complete) { var n = function () { return t._complete.call(t._context) }; p.useDeprecatedSynchronousErrorHandling && e.syncErrorThrowable ? (this.__tryOrSetError(e, n), this.unsubscribe()) : (this.__tryOrUnsub(n), this.unsubscribe()) } else this.unsubscribe() } }, e.prototype.__tryOrUnsub = function (t, e) { try { t.call(this._context, e) } catch (n) { if (this.unsubscribe(), p.useDeprecatedSynchronousErrorHandling) throw n; h(n) } }, e.prototype.__tryOrSetError = function (t, e, n) { if (!p.useDeprecatedSynchronousErrorHandling) throw new Error("bad call"); try { e.call(this._context, n) } catch (r) { return p.useDeprecatedSynchronousErrorHandling ? (t.syncErrorValue = r, t.syncErrorThrown = !0, !0) : (h(r), !0) } return !1 }, e.prototype._unsubscribe = function () { var t = this._parentSubscriber; this._context = null, this._parentSubscriber = null, t.unsubscribe() }, e }(S), j = function (t) { function e(e, n, r) { var o = t.call(this) || this; return o.parent = e, o.outerValue = n, o.outerIndex = r, o.index = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { this.parent.notifyNext(this.outerValue, t, this.outerIndex, this.index++, this) }, e.prototype._error = function (t) { this.parent.notifyError(t, this), this.unsubscribe() }, e.prototype._complete = function () { this.parent.notifyComplete(this), this.unsubscribe() }, e }(S), C = "function" == typeof Symbol && Symbol.observable || "@@observable"; var N = function () { function t(t) { this._isScalar = !1, t && (this._subscribe = t) } return t.prototype.lift = function (e) { var n = new t; return n.source = this, n.operator = e, n }, t.prototype.subscribe = function (t, e, n) { var r = this.operator, o = function (t, e, n) { if (t) { if (t instanceof S) return t; if (t[T]) return t[T]() } return t || e || n ? new S(t, e, n) : new S(d) }(t, e, n); if (r ? r.call(o, this.source) : o.add(this.source || p.useDeprecatedSynchronousErrorHandling && !o.syncErrorThrowable ? this._subscribe(o) : this._trySubscribe(o)), p.useDeprecatedSynchronousErrorHandling && o.syncErrorThrowable && (o.syncErrorThrowable = !1, o.syncErrorThrown)) throw o.syncErrorValue; return o }, t.prototype._trySubscribe = function (t) { try { return this._subscribe(t) } catch (e) { p.useDeprecatedSynchronousErrorHandling && (t.syncErrorThrown = !0, t.syncErrorValue = e), function (t) { for (; t;) { var e = t.destination; if (t.closed || t.isStopped) return !1; t = e && e instanceof S ? e : null } return !0 }(t) ? t.error(e) : console.warn(e) } }, t.prototype.forEach = function (t, e) { var n = this; return new (e = P(e))(function (e, r) { var o; o = n.subscribe(function (e) { try { t(e) } catch (n) { r(n), o && o.unsubscribe() } }, r, e) }) }, t.prototype._subscribe = function (t) { var e = this.source; return e && e.subscribe(t) }, t.prototype[C] = function () { return this }, t.prototype.pipe = function () { for (var t = [], e = 0; e < arguments.length; e++)t[e] = arguments[e]; return 0 === t.length ? this : ((n = t) ? 1 === n.length ? n[0] : function (t) { return n.reduce(function (t, e) { return e(t) }, t) } : function () { })(this); var n }, t.prototype.toPromise = function (t) { var e = this; return new (t = P(t))(function (t, n) { var r; e.subscribe(function (t) { return r = t }, function (t) { return n(t) }, function () { return t(r) }) }) }, t.create = function (e) { return new t(e) }, t }(); function P(t) { if (t || (t = p.Promise || Promise), !t) throw new Error("no Promise impl found"); return t } var k = function (t) { return function (e) { for (var n = 0, r = t.length; n < r && !e.closed; n++)e.next(t[n]); e.closed || e.complete() } }, I = function (t) { return function (e) { return t.then(function (t) { e.closed || (e.next(t), e.complete()) }, function (t) { return e.error(t) }).then(null, h), e } }; function A() { return "function" == typeof Symbol && Symbol.iterator ? Symbol.iterator : "@@iterator" } var R = A(), z = function (t) { return function (e) { for (var n = t[R](); ;) { var r = n.next(); if (r.done) { e.complete(); break } if (e.next(r.value), e.closed) break } return "function" == typeof n.return && e.add(function () { n.return && n.return() }), e } }, D = function (t) { return function (e) { var n = t[C](); if ("function" != typeof n.subscribe) throw new TypeError("Provided object does not correctly implement Symbol.observable"); return n.subscribe(e) } }, H = function (t) { return t && "number" == typeof t.length && "function" != typeof t }; function U(t) { return t && "function" != typeof t.subscribe && "function" == typeof t.then } var F = function (t) { if (t instanceof N) return function (e) { return t._isScalar ? (e.next(t.value), void e.complete()) : t.subscribe(e) }; if (t && "function" == typeof t[C]) return D(t); if (H(t)) return k(t); if (U(t)) return I(t); if (t && "function" == typeof t[R]) return z(t); var e = y(t) ? "an invalid object" : "'" + t + "'"; throw new TypeError("You provided " + e + " where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.") }, L = function (t) { function e() { return null !== t && t.apply(this, arguments) || this } return u.__extends(e, t), e.prototype.notifyNext = function (t, e, n, r, o) { this.destination.next(e) }, e.prototype.notifyError = function (t, e) { this.destination.error(t) }, e.prototype.notifyComplete = function (t) { this.destination.complete() }, e }(S); function M(t, e) { return function (n) { if ("function" != typeof t) throw new TypeError("argument is not a function. Are you looking for `mapTo()`?"); return n.lift(new q(t, e)) } } var q = function () { function t(t, e) { this.project = t, this.thisArg = e } return t.prototype.call = function (t, e) { return e.subscribe(new V(t, this.project, this.thisArg)) }, t }(), V = function (t) { function e(e, n, r) { var o = t.call(this, e) || this; return o.project = n, o.count = 0, o.thisArg = r || o, o } return u.__extends(e, t), e.prototype._next = function (t) { var e; try { e = this.project.call(this.thisArg, t, this.count++) } catch (n) { return void this.destination.error(n) } this.destination.next(e) }, e }(S), W = function () { function t(t, e) { void 0 === e && (e = Number.POSITIVE_INFINITY), this.project = t, this.concurrent = e } return t.prototype.call = function (t, e) { return e.subscribe(new B(t, this.project, this.concurrent)) }, t }(), B = function (t) { function e(e, n, r) { void 0 === r && (r = Number.POSITIVE_INFINITY); var o = t.call(this, e) || this; return o.project = n, o.concurrent = r, o.hasCompleted = !1, o.buffer = [], o.active = 0, o.index = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { this.active < this.concurrent ? this._tryNext(t) : this.buffer.push(t) }, e.prototype._tryNext = function (t) { var e, n = this.index++; try { e = this.project(t, n) } catch (r) { return void this.destination.error(r) } this.active++ , this._innerSub(e, t, n) }, e.prototype._innerSub = function (t, e, n) { var r, o, i = new j(this, void 0, void 0); this.destination.add(i), r = t, void 0 === (o = i) && (o = new j(this, e, n)), o.closed || F(r)(o) }, e.prototype._complete = function () { this.hasCompleted = !0, 0 === this.active && 0 === this.buffer.length && this.destination.complete(), this.unsubscribe() }, e.prototype.notifyNext = function (t, e, n, r, o) { this.destination.next(e) }, e.prototype.notifyComplete = function (t) { var e = this.buffer; this.remove(t), this.active-- , e.length > 0 ? this._next(e.shift()) : 0 === this.active && this.hasCompleted && this.destination.complete() }, e }(L); var K = function () { function t(t, e) { this.predicate = t, this.thisArg = e } return t.prototype.call = function (t, e) { return e.subscribe(new J(t, this.predicate, this.thisArg)) }, t }(), J = function (t) { function e(e, n, r) { var o = t.call(this, e) || this; return o.predicate = n, o.thisArg = r, o.count = 0, o } return u.__extends(e, t), e.prototype._next = function (t) { var e; try { e = this.predicate.call(this.thisArg, t, this.count++) } catch (n) { return void this.destination.error(n) } e && this.destination.next(t) }, e }(S), X = function () { return function () { } }(), Y = function () { return function () { } }(), G = function () { function t(t) { var e = this; this.normalizedNames = new Map, this.lazyUpdate = null, t ? this.lazyInit = "string" == typeof t ? function () { e.headers = new Map, t.split("\n").forEach(function (t) { var n = t.indexOf(":"); if (n > 0) { var r = t.slice(0, n), o = r.toLowerCase(), i = t.slice(n + 1).trim(); e.maybeSetNormalizedName(r, o), e.headers.has(o) ? e.headers.get(o).push(i) : e.headers.set(o, [i]) } }) } : function () { e.headers = new Map, Object.keys(t).forEach(function (n) { var r = t[n], o = n.toLowerCase(); "string" == typeof r && (r = [r]), r.length > 0 && (e.headers.set(o, r), e.maybeSetNormalizedName(n, o)) }) } : this.headers = new Map } return t.prototype.has = function (t) { return this.init(), this.headers.has(t.toLowerCase()) }, t.prototype.get = function (t) { this.init(); var e = this.headers.get(t.toLowerCase()); return e && e.length > 0 ? e[0] : null }, t.prototype.keys = function () { return this.init(), Array.from(this.normalizedNames.values()) }, t.prototype.getAll = function (t) { return this.init(), this.headers.get(t.toLowerCase()) || null }, t.prototype.append = function (t, e) { return this.clone({ name: t, value: e, op: "a" }) }, t.prototype.set = function (t, e) { return this.clone({ name: t, value: e, op: "s" }) }, t.prototype.delete = function (t, e) { return this.clone({ name: t, value: e, op: "d" }) }, t.prototype.maybeSetNormalizedName = function (t, e) { this.normalizedNames.has(e) || this.normalizedNames.set(e, t) }, t.prototype.init = function () { var e = this; this.lazyInit && (this.lazyInit instanceof t ? this.copyFrom(this.lazyInit) : this.lazyInit(), this.lazyInit = null, this.lazyUpdate && (this.lazyUpdate.forEach(function (t) { return e.applyUpdate(t) }), this.lazyUpdate = null)) }, t.prototype.copyFrom = function (t) { var e = this; t.init(), Array.from(t.headers.keys()).forEach(function (n) { e.headers.set(n, t.headers.get(n)), e.normalizedNames.set(n, t.normalizedNames.get(n)) }) }, t.prototype.clone = function (e) { var n = new t; return n.lazyInit = this.lazyInit && this.lazyInit instanceof t ? this.lazyInit : this, n.lazyUpdate = (this.lazyUpdate || []).concat([e]), n }, t.prototype.applyUpdate = function (t) { var e = t.name.toLowerCase(); switch (t.op) { case "a": case "s": var n = t.value; if ("string" == typeof n && (n = [n]), 0 === n.length) return; this.maybeSetNormalizedName(t.name, e); var r = ("a" === t.op ? this.headers.get(e) : void 0) || []; r.push.apply(r, Object(u.__spread)(n)), this.headers.set(e, r); break; case "d": var o = t.value; if (o) { var i = this.headers.get(e); if (!i) return; 0 === (i = i.filter(function (t) { return -1 === o.indexOf(t) })).length ? (this.headers.delete(e), this.normalizedNames.delete(e)) : this.headers.set(e, i) } else this.headers.delete(e), this.normalizedNames.delete(e) } }, t.prototype.forEach = function (t) { var e = this; this.init(), Array.from(this.normalizedNames.keys()).forEach(function (n) { return t(e.normalizedNames.get(n), e.headers.get(n)) }) }, t }(), $ = function () { function t() { } return t.prototype.encodeKey = function (t) { return Q(t) }, t.prototype.encodeValue = function (t) { return Q(t) }, t.prototype.decodeKey = function (t) { return decodeURIComponent(t) }, t.prototype.decodeValue = function (t) { return decodeURIComponent(t) }, t }(); function Q(t) { return encodeURIComponent(t).replace(/%40/gi, "@").replace(/%3A/gi, ":").replace(/%24/gi, "$").replace(/%2C/gi, ",").replace(/%3B/gi, ";").replace(/%2B/gi, "+").replace(/%3D/gi, "=").replace(/%3F/gi, "?").replace(/%2F/gi, "/") } var Z = function () { function t(t) { void 0 === t && (t = {}); var e, n, r, o = this; if (this.updates = null, this.cloneFrom = null, this.encoder = t.encoder || new $, t.fromString) { if (t.fromObject) throw new Error("Cannot specify both fromString and fromObject."); this.map = (e = t.fromString, n = this.encoder, r = new Map, e.length > 0 && e.split("&").forEach(function (t) { var e = t.indexOf("="), o = Object(u.__read)(-1 == e ? [n.decodeKey(t), ""] : [n.decodeKey(t.slice(0, e)), n.decodeValue(t.slice(e + 1))], 2), i = o[0], s = o[1], a = r.get(i) || []; a.push(s), r.set(i, a) }), r) } else t.fromObject ? (this.map = new Map, Object.keys(t.fromObject).forEach(function (e) { var n = t.fromObject[e]; o.map.set(e, Array.isArray(n) ? n : [n]) })) : this.map = null } return t.prototype.has = function (t) { return this.init(), this.map.has(t) }, t.prototype.get = function (t) { this.init(); var e = this.map.get(t); return e ? e[0] : null }, t.prototype.getAll = function (t) { return this.init(), this.map.get(t) || null }, t.prototype.keys = function () { return this.init(), Array.from(this.map.keys()) }, t.prototype.append = function (t, e) { return this.clone({ param: t, value: e, op: "a" }) }, t.prototype.set = function (t, e) { return this.clone({ param: t, value: e, op: "s" }) }, t.prototype.delete = function (t, e) { return this.clone({ param: t, value: e, op: "d" }) }, t.prototype.toString = function () { var t = this; return this.init(), this.keys().map(function (e) { var n = t.encoder.encodeKey(e); return t.map.get(e).map(function (e) { return n + "=" + t.encoder.encodeValue(e) }).join("&") }).join("&") }, t.prototype.clone = function (e) { var n = new t({ encoder: this.encoder }); return n.cloneFrom = this.cloneFrom || this, n.updates = (this.updates || []).concat([e]), n }, t.prototype.init = function () { var t = this; null === this.map && (this.map = new Map), null !== this.cloneFrom && (this.cloneFrom.init(), this.cloneFrom.keys().forEach(function (e) { return t.map.set(e, t.cloneFrom.map.get(e)) }), this.updates.forEach(function (e) { switch (e.op) { case "a": case "s": var n = ("a" === e.op ? t.map.get(e.param) : void 0) || []; n.push(e.value), t.map.set(e.param, n); break; case "d": if (void 0 === e.value) { t.map.delete(e.param); break } var r = t.map.get(e.param) || [], o = r.indexOf(e.value); -1 !== o && r.splice(o, 1), r.length > 0 ? t.map.set(e.param, r) : t.map.delete(e.param) } }), this.cloneFrom = null) }, t }(); function tt(t) { return "undefined" != typeof ArrayBuffer && t instanceof ArrayBuffer } function et(t) { return "undefined" != typeof Blob && t instanceof Blob } function nt(t) { return "undefined" != typeof FormData && t instanceof FormData } var rt = function () { function t(t, e, n, r) { var o; if (this.url = e, this.body = null, this.reportProgress = !1, this.withCredentials = !1, this.responseType = "json", this.method = t.toUpperCase(), function (t) { switch (t) { case "DELETE": case "GET": case "HEAD": case "OPTIONS": case "JSONP": return !1; default: return !0 } }(this.method) || r ? (this.body = void 0 !== n ? n : null, o = r) : o = n, o && (this.reportProgress = !!o.reportProgress, this.withCredentials = !!o.withCredentials, o.responseType && (this.responseType = o.responseType), o.headers && (this.headers = o.headers), o.params && (this.params = o.params)), this.headers || (this.headers = new G), this.params) { var i = this.params.toString(); if (0 === i.length) this.urlWithParams = e; else { var s = e.indexOf("?"); this.urlWithParams = e + (-1 === s ? "?" : s < e.length - 1 ? "&" : "") + i } } else this.params = new Z, this.urlWithParams = e } return t.prototype.serializeBody = function () { return null === this.body ? null : tt(this.body) || et(this.body) || nt(this.body) || "string" == typeof this.body ? this.body : this.body instanceof Z ? this.body.toString() : "object" == typeof this.body || "boolean" == typeof this.body || Array.isArray(this.body) ? JSON.stringify(this.body) : this.body.toString() }, t.prototype.detectContentTypeHeader = function () { return null === this.body ? null : nt(this.body) ? null : et(this.body) ? this.body.type || null : tt(this.body) ? null : "string" == typeof this.body ? "text/plain" : this.body instanceof Z ? "application/x-www-form-urlencoded;charset=UTF-8" : "object" == typeof this.body || "number" == typeof this.body || Array.isArray(this.body) ? "application/json" : null }, t.prototype.clone = function (e) { void 0 === e && (e = {}); var n = e.method || this.method, r = e.url || this.url, o = e.responseType || this.responseType, i = void 0 !== e.body ? e.body : this.body, s = void 0 !== e.withCredentials ? e.withCredentials : this.withCredentials, u = void 0 !== e.reportProgress ? e.reportProgress : this.reportProgress, a = e.headers || this.headers, l = e.params || this.params; return void 0 !== e.setHeaders && (a = Object.keys(e.setHeaders).reduce(function (t, n) { return t.set(n, e.setHeaders[n]) }, a)), e.setParams && (l = Object.keys(e.setParams).reduce(function (t, n) { return t.set(n, e.setParams[n]) }, l)), new t(n, r, i, { params: l, headers: a, reportProgress: u, responseType: o, withCredentials: s }) }, t }(), ot = function (t) { return t[t.Sent = 0] = "Sent", t[t.UploadProgress = 1] = "UploadProgress", t[t.ResponseHeader = 2] = "ResponseHeader", t[t.DownloadProgress = 3] = "DownloadProgress", t[t.Response = 4] = "Response", t[t.User = 5] = "User", t }({}), it = function () { return function (t, e, n) { void 0 === e && (e = 200), void 0 === n && (n = "OK"), this.headers = t.headers || new G, this.status = void 0 !== t.status ? t.status : e, this.statusText = t.statusText || n, this.url = t.url || null, this.ok = this.status >= 200 && this.status < 300 } }(), st = function (t) { function e(e) { void 0 === e && (e = {}); var n = t.call(this, e) || this; return n.type = ot.ResponseHeader, n } return Object(u.__extends)(e, t), e.prototype.clone = function (t) { return void 0 === t && (t = {}), new e({ headers: t.headers || this.headers, status: void 0 !== t.status ? t.status : this.status, statusText: t.statusText || this.statusText, url: t.url || this.url || void 0 }) }, e }(it), ut = function (t) { function e(e) { void 0 === e && (e = {}); var n = t.call(this, e) || this; return n.type = ot.Response, n.body = void 0 !== e.body ? e.body : null, n } return Object(u.__extends)(e, t), e.prototype.clone = function (t) { return void 0 === t && (t = {}), new e({ body: void 0 !== t.body ? t.body : this.body, headers: t.headers || this.headers, status: void 0 !== t.status ? t.status : this.status, statusText: t.statusText || this.statusText, url: t.url || this.url || void 0 }) }, e }(it), at = function (t) { function e(e) { var n = t.call(this, e, 0, "Unknown Error") || this; return n.name = "HttpErrorResponse", n.ok = !1, n.message = n.status >= 200 && n.status < 300 ? "Http failure during parsing for " + (e.url || "(unknown url)") : "Http failure response for " + (e.url || "(unknown url)") + ": " + e.status + " " + e.statusText, n.error = e.error || null, n } return Object(u.__extends)(e, t), e }(it); function lt(t, e) { return { body: e, headers: t.headers, observe: t.observe, params: t.params, reportProgress: t.reportProgress, responseType: t.responseType, withCredentials: t.withCredentials } } var ct = function () { function t(t) { this.handler = t } return t.prototype.request = function (t, e, n) { var r, o = this; if (void 0 === n && (n = {}), t instanceof rt) r = t; else { var i; i = n.headers instanceof G ? n.headers : new G(n.headers); var s = void 0; n.params && (s = n.params instanceof Z ? n.params : new Z({ fromObject: n.params })), r = new rt(t, e, void 0 !== n.body ? n.body : null, { headers: i, params: s, reportProgress: n.reportProgress, responseType: n.responseType || "json", withCredentials: n.withCredentials }) } var u, l = Object(a.of)(r).pipe(function t(e, n, r) { return void 0 === r && (r = Number.POSITIVE_INFINITY), "function" == typeof n ? function (o) { return o.pipe(t(function (t, r) { return (o = e(t, r), o instanceof N ? o : new N(F(o))).pipe(M(function (e, o) { return n(t, e, r, o) })); var o }, r)) } : ("number" == typeof n && (r = n), function (t) { return t.lift(new W(e, r)) }) }(function (t) { return o.handler.handle(t) }, u, 1)); if (t instanceof rt || "events" === n.observe) return l; var c, p = l.pipe((c = function (t) { return t instanceof ut }, function (t) { return t.lift(new K(c, void 0)) })); switch (n.observe || "body") { case "body": switch (r.responseType) { case "arraybuffer": return p.pipe(M(function (t) { if (null !== t.body && !(t.body instanceof ArrayBuffer)) throw new Error("Response is not an ArrayBuffer."); return t.body })); case "blob": return p.pipe(M(function (t) { if (null !== t.body && !(t.body instanceof Blob)) throw new Error("Response is not a Blob."); return t.body })); case "text": return p.pipe(M(function (t) { if (null !== t.body && "string" != typeof t.body) throw new Error("Response is not a string."); return t.body })); case "json": default: return p.pipe(M(function (t) { return t.body })) }case "response": return p; default: throw new Error("Unreachable: unhandled observe type " + n.observe + "}") } }, t.prototype.delete = function (t, e) { return void 0 === e && (e = {}), this.request("DELETE", t, e) }, t.prototype.get = function (t, e) { return void 0 === e && (e = {}), this.request("GET", t, e) }, t.prototype.head = function (t, e) { return void 0 === e && (e = {}), this.request("HEAD", t, e) }, t.prototype.jsonp = function (t, e) { return this.request("JSONP", t, { params: (new Z).append(e, "JSONP_CALLBACK"), observe: "body", responseType: "json" }) }, t.prototype.options = function (t, e) { return void 0 === e && (e = {}), this.request("OPTIONS", t, e) }, t.prototype.patch = function (t, e, n) { return void 0 === n && (n = {}), this.request("PATCH", t, lt(n, e)) }, t.prototype.post = function (t, e, n) { return void 0 === n && (n = {}), this.request("POST", t, lt(n, e)) }, t.prototype.put = function (t, e, n) { return void 0 === n && (n = {}), this.request("PUT", t, lt(n, e)) }, t }(), pt = function () { function t(t, e) { this.next = t, this.interceptor = e } return t.prototype.handle = function (t) { return this.interceptor.intercept(t, this.next) }, t }(), ht = new r.InjectionToken("HTTP_INTERCEPTORS"), dt = function () { function t() { } return t.prototype.intercept = function (t, e) { return e.handle(t) }, t }(), ft = /^\)\]\}',?\n/, yt = function () { return function () { } }(), bt = function () { function t() { } return t.prototype.build = function () { return new XMLHttpRequest }, t }(), mt = function () { function t(t) { this.xhrFactory = t } return t.prototype.handle = function (t) { var e = this; if ("JSONP" === t.method) throw new Error("Attempted to construct Jsonp request without JsonpClientModule installed."); return new a.Observable(function (n) { var r = e.xhrFactory.build(); if (r.open(t.method, t.urlWithParams), t.withCredentials && (r.withCredentials = !0), t.headers.forEach(function (t, e) { return r.setRequestHeader(t, e.join(",")) }), t.headers.has("Accept") || r.setRequestHeader("Accept", "application/json, text/plain, */*"), !t.headers.has("Content-Type")) { var o = t.detectContentTypeHeader(); null !== o && r.setRequestHeader("Content-Type", o) } if (t.responseType) { var i = t.responseType.toLowerCase(); r.responseType = "json" !== i ? i : "text" } var s = t.serializeBody(), u = null, a = function () { if (null !== u) return u; var e = 1223 === r.status ? 204 : r.status, n = r.statusText || "OK", o = new G(r.getAllResponseHeaders()), i = function (t) { return "responseURL" in t && t.responseURL ? t.responseURL : /^X-Request-URL:/m.test(t.getAllResponseHeaders()) ? t.getResponseHeader("X-Request-URL") : null }(r) || t.url; return u = new st({ headers: o, status: e, statusText: n, url: i }) }, l = function () { var e = a(), o = e.headers, i = e.status, s = e.statusText, u = e.url, l = null; 204 !== i && (l = void 0 === r.response ? r.responseText : r.response), 0 === i && (i = l ? 200 : 0); var c = i >= 200 && i < 300; if ("json" === t.responseType && "string" == typeof l) { var p = l; l = l.replace(ft, ""); try { l = "" !== l ? JSON.parse(l) : null } catch (h) { l = p, c && (c = !1, l = { error: h, text: l }) } } c ? (n.next(new ut({ body: l, headers: o, status: i, statusText: s, url: u || void 0 })), n.complete()) : n.error(new at({ error: l, headers: o, status: i, statusText: s, url: u || void 0 })) }, c = function (t) { var e = a().url, o = new at({ error: t, status: r.status || 0, statusText: r.statusText || "Unknown Error", url: e || void 0 }); n.error(o) }, p = !1, h = function (e) { p || (n.next(a()), p = !0); var o = { type: ot.DownloadProgress, loaded: e.loaded }; e.lengthComputable && (o.total = e.total), "text" === t.responseType && r.responseText && (o.partialText = r.responseText), n.next(o) }, d = function (t) { var e = { type: ot.UploadProgress, loaded: t.loaded }; t.lengthComputable && (e.total = t.total), n.next(e) }; return r.addEventListener("load", l), r.addEventListener("error", c), t.reportProgress && (r.addEventListener("progress", h), null !== s && r.upload && r.upload.addEventListener("progress", d)), r.send(s), n.next({ type: ot.Sent }), function () { r.removeEventListener("error", c), r.removeEventListener("load", l), t.reportProgress && (r.removeEventListener("progress", h), null !== s && r.upload && r.upload.removeEventListener("progress", d)), r.abort() } }) }, t }(), vt = new r.InjectionToken("XSRF_COOKIE_NAME"), gt = new r.InjectionToken("XSRF_HEADER_NAME"), wt = function () { return function () { } }(), _t = function () { function t(t, e, n) { this.doc = t, this.platform = e, this.cookieName = n, this.lastCookieString = "", this.lastToken = null, this.parseCount = 0 } return t.prototype.getToken = function () { if ("server" === this.platform) return null; var t = this.doc.cookie || ""; return t !== this.lastCookieString && (this.parseCount++ , this.lastToken = Object(s["\u0275parseCookieValue"])(t, this.cookieName), this.lastCookieString = t), this.lastToken }, t }(), xt = function () { function t(t, e) { this.tokenService = t, this.headerName = e } return t.prototype.intercept = function (t, e) { var n = t.url.toLowerCase(); if ("GET" === t.method || "HEAD" === t.method || n.startsWith("http://") || n.startsWith("https://")) return e.handle(t); var r = this.tokenService.getToken(); return null === r || t.headers.has(this.headerName) || (t = t.clone({ headers: t.headers.set(this.headerName, r) })), e.handle(t) }, t }(), Et = function () { function t(t, e) { this.backend = t, this.injector = e, this.chain = null } return t.prototype.handle = function (t) { if (null === this.chain) { var e = this.injector.get(ht, []); this.chain = e.reduceRight(function (t, e) { return new pt(t, e) }, this.backend) } return this.chain.handle(t) }, t }(), Tt = function () { function t() { } var e; return e = t, t.disable = function () { return { ngModule: e, providers: [{ provide: xt, useClass: dt }] } }, t.withOptions = function (t) { return void 0 === t && (t = {}), { ngModule: e, providers: [t.cookieName ? { provide: vt, useValue: t.cookieName } : [], t.headerName ? { provide: gt, useValue: t.headerName } : []] } }, t }(), St = function () { return function () { } }(), Ot = r["\u0275crt"]({ encapsulation: 0, styles: [[""]], data: {} }); function jt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 2, "li", [], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 1, "a", [["target", "_blank"]], [[8, "href", 4]], null, null, null, null)), (t()(), r["\u0275ted"](2, null, ["", ""]))], null, function (t, e) { t(e, 1, 0, r["\u0275inlineInterpolate"](1, "", e.context.$implicit.href, "")), t(e, 2, 0, e.context.$implicit.title) }) } function Ct(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 2, "ul", [], null, null, null, null, null)), (t()(), r["\u0275and"](16777216, null, null, 1, null, jt)), r["\u0275did"](2, 278528, null, 0, s.NgForOf, [r.ViewContainerRef, r.TemplateRef, r.IterableDiffers], { ngForOf: [0, "ngForOf"] }, null)], function (t, e) { t(e, 2, 0, e.component.newsData) }, null) } function Nt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 6, "div", [], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 5, "div", [["class", "activity-error-container"], ["style", "background: rgb(255, 255, 255); overflow: hidden !important; width: 100%;"]], null, null, null, null, null)), (t()(), r["\u0275eld"](2, 0, null, null, 4, "div", [["class", "activity-error-block"]], null, null, null, null, null)), (t()(), r["\u0275eld"](3, 0, null, null, 0, "i", [["class", "icon-information full-linear-icon-information"], ["style", "margin-left: 125px; font-size: 90px"]], null, null, null, null, null)), (t()(), r["\u0275eld"](4, 0, null, null, 0, "br", [], null, null, null, null, null)), (t()(), r["\u0275eld"](5, 0, null, null, 1, "div", [["class", "activity-error-msg1"]], null, null, null, null, null)), (t()(), r["\u0275ted"](-1, null, ["There's currently no news available."]))], null, null) } function Pt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 6, "div", [["class", "widget-news-main"], ["id", "widget-news"]], null, null, null, null, null)), (t()(), r["\u0275eld"](1, 0, null, null, 5, "div", [["att-gridster-item-body", ""], ["class", "information-section-gridsterContent"]], null, null, null, null, null)), (t()(), r["\u0275eld"](2, 0, null, null, 4, "div", [["class", "resources"]], null, null, null, null, null)), (t()(), r["\u0275and"](16777216, null, null, 1, null, Ct)), r["\u0275did"](4, 16384, null, 0, s.NgIf, [r.ViewContainerRef, r.TemplateRef], { ngIf: [0, "ngIf"] }, null), (t()(), r["\u0275and"](16777216, null, null, 1, null, Nt)), r["\u0275did"](6, 16384, null, 0, s.NgIf, [r.ViewContainerRef, r.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (t, e) { var n = e.component; t(e, 4, 0, n.newsData && 0 != n.newsData.length), t(e, 6, 0, n.newsData && 0 != n.newsData.length) }, null) } function kt(t) { return r["\u0275vid"](0, [(t()(), r["\u0275eld"](0, 0, null, null, 1, "app-list-widget", [], null, null, null, Pt, Ot)), r["\u0275did"](1, 114688, null, 0, o, [ct], null, null)], function (t, e) { t(e, 1, 0) }, null) } var It = r["\u0275ccf"]("app-list-widget", o, kt, {}, {}, []), At = r["\u0275cmf"](i, [], function (t) { return r["\u0275mod"]([r["\u0275mpd"](512, r.ComponentFactoryResolver, r["\u0275CodegenComponentFactoryResolver"], [[8, [It]], [3, r.ComponentFactoryResolver], r.NgModuleRef]), r["\u0275mpd"](4608, s.NgLocalization, s.NgLocaleLocalization, [r.LOCALE_ID, [2, s["\u0275angular_packages_common_common_a"]]]), r["\u0275mpd"](4608, wt, _t, [s.DOCUMENT, r.PLATFORM_ID, vt]), r["\u0275mpd"](4608, xt, xt, [wt, gt]), r["\u0275mpd"](5120, ht, function (t) { return [t] }, [xt]), r["\u0275mpd"](4608, bt, bt, []), r["\u0275mpd"](6144, yt, null, [bt]), r["\u0275mpd"](4608, mt, mt, [yt]), r["\u0275mpd"](6144, Y, null, [mt]), r["\u0275mpd"](4608, X, Et, [Y, r.Injector]), r["\u0275mpd"](4608, ct, ct, [X]), r["\u0275mpd"](1073742336, s.CommonModule, s.CommonModule, []), r["\u0275mpd"](1073742336, Tt, Tt, []), r["\u0275mpd"](1073742336, St, St, []), r["\u0275mpd"](1073742336, i, i, []), r["\u0275mpd"](256, vt, "XSRF-TOKEN", []), r["\u0275mpd"](256, gt, "X-XSRF-TOKEN", [])]) }); n.d(e, "DynamicWidgetModule", function () { return i }), n.d(e, "DynamicWidgetModuleNgFactory", function () { return At }), e.default = At } }) });
\ No newline at end of file
diff --git a/portal-FE-os/src/assets/plugins/plugin1.js b/portal-FE-os/src/assets/plugins/plugin1.js
new file mode 100644
index 00000000..56a5f165
--- /dev/null
+++ b/portal-FE-os/src/assets/plugins/plugin1.js
@@ -0,0 +1 @@
+!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("ng.common"),require("shared"),require("ng.core")):"function"==typeof define&&define.amd?define(["ng.common","shared","ng.core"],e):"object"==typeof exports?exports.plugin1=e(require("ng.common"),require("shared"),require("ng.core")):n.plugin1=e(n["ng.common"],n.shared,n["ng.core"])}("undefined"!=typeof self?self:this,function(n,e,l){return function(n){var e={};function l(t){if(e[t])return e[t].exports;var u=e[t]={i:t,l:!1,exports:{}};return n[t].call(u.exports,u,u.exports,l),u.l=!0,u.exports}return l.m=n,l.c=e,l.d=function(n,e,t){l.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:t})},l.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},l.t=function(n,e){if(1&e&&(n=l(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var u in n)l.d(t,u,(function(e){return n[e]}).bind(null,u));return t},l.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return l.d(e,"a",e),e},l.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},l.p="",l(l.s=0)}({0:function(n,e,l){n.exports=l("zUnb")},"0S4P":function(e,l){e.exports=n},cfyg:function(n,l){n.exports=e},vOrQ:function(n,e){n.exports=l},zUnb:function(n,e,l){"use strict";l.r(e);var t=function(){return function(){this.x=!1}}(),u=function(){function n(){}return n.entry=t,n}(),o=l("vOrQ"),r=l("0S4P"),i=l("cfyg"),d=o["\u0275crt"]({encapsulation:2,styles:[],data:{}});function c(n){return o["\u0275vid"](0,[(n()(),o["\u0275eld"](0,0,null,null,1,"p",[],null,null,null,null,null)),(n()(),o["\u0275ted"](-1,null,["Hidden text"]))],null,null)}function a(n){return o["\u0275vid"](0,[(n()(),o["\u0275eld"](0,0,null,null,1,"h3",[],null,null,null,null,null)),(n()(),o["\u0275ted"](-1,null,["Plugin 1"])),(n()(),o["\u0275and"](16777216,null,null,1,null,c)),o["\u0275did"](3,16384,null,0,r.NgIf,[o.ViewContainerRef,o.TemplateRef],{ngIf:[0,"ngIf"]},null),(n()(),o["\u0275eld"](4,0,null,null,2,"button",[["sharedBtn",""]],null,[[null,"click"]],function(n,e,l){var t=!0,u=n.component;return"click"===e&&(t=0!=(u.x=!u.x)&&t),t},i["View_\u0275a_0"],i["RenderType_\u0275a"])),o["\u0275did"](5,49152,null,0,i["\u0275a"],[],null,null),(n()(),o["\u0275ted"](-1,0,["Shared Button Example"])),(n()(),o["\u0275eld"](7,0,null,null,10,"shared-tabs",[],null,null,null,i["View_\u0275c_0"],i["RenderType_\u0275c"])),o["\u0275did"](8,49152,null,0,i["\u0275c"],[],null,null),(n()(),o["\u0275eld"](9,0,null,0,2,"shared-tab",[["title","Tab 1"]],[[8,"hidden",0]],null,null,i["View_\u0275b_0"],i["RenderType_\u0275b"])),o["\u0275did"](10,49152,null,0,i["\u0275b"],[i["\u0275c"]],{title:[0,"title"]},null),(n()(),o["\u0275ted"](-1,0,[" Tab 1 contents "])),(n()(),o["\u0275eld"](12,0,null,0,2,"shared-tab",[["title","Tab 2"]],[[8,"hidden",0]],null,null,i["View_\u0275b_0"],i["RenderType_\u0275b"])),o["\u0275did"](13,49152,null,0,i["\u0275b"],[i["\u0275c"]],{title:[0,"title"]},null),(n()(),o["\u0275ted"](-1,0,[" Tab 2 contents "])),(n()(),o["\u0275eld"](15,0,null,0,2,"shared-tab",[["title","Tab 3"]],[[8,"hidden",0]],null,null,i["View_\u0275b_0"],i["RenderType_\u0275b"])),o["\u0275did"](16,49152,null,0,i["\u0275b"],[i["\u0275c"]],{title:[0,"title"]},null),(n()(),o["\u0275ted"](-1,0,[" Tab 3 contents "]))],function(n,e){n(e,3,0,e.component.x),n(e,10,0,"Tab 1"),n(e,13,0,"Tab 2"),n(e,16,0,"Tab 3")},function(n,e){n(e,9,0,o["\u0275nov"](e,10).hidden),n(e,12,0,o["\u0275nov"](e,13).hidden),n(e,15,0,o["\u0275nov"](e,16).hidden)})}function f(n){return o["\u0275vid"](0,[(n()(),o["\u0275eld"](0,0,null,null,1,"app-plugin-1",[],null,null,null,a,d)),o["\u0275did"](1,49152,null,0,t,[],null,null)],null,null)}var p=o["\u0275ccf"]("app-plugin-1",t,f,{},{},[]),s=o["\u0275cmf"](u,[],function(n){return o["\u0275mod"]([o["\u0275mpd"](512,o.ComponentFactoryResolver,o["\u0275CodegenComponentFactoryResolver"],[[8,[p]],[3,o.ComponentFactoryResolver],o.NgModuleRef]),o["\u0275mpd"](4608,r.NgLocalization,r.NgLocaleLocalization,[o.LOCALE_ID,[2,r["\u0275angular_packages_common_common_a"]]]),o["\u0275mpd"](1073742336,r.CommonModule,r.CommonModule,[]),o["\u0275mpd"](1073742336,i.SharedModule,i.SharedModule,[]),o["\u0275mpd"](1073742336,u,u,[])])});l.d(e,"Plugin1Module",function(){return u}),l.d(e,"Plugin1ModuleNgFactory",function(){return s}),e.default=s}})});
\ No newline at end of file
diff --git a/portal-FE-os/src/assets/plugins/plugin2.js b/portal-FE-os/src/assets/plugins/plugin2.js
new file mode 100644
index 00000000..80772e2e
--- /dev/null
+++ b/portal-FE-os/src/assets/plugins/plugin2.js
@@ -0,0 +1 @@
+!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("ng.common"),require("shared"),require("ng.core")):"function"==typeof define&&define.amd?define(["ng.common","shared","ng.core"],e):"object"==typeof exports?exports.plugin2=e(require("ng.common"),require("shared"),require("ng.core")):n.plugin2=e(n["ng.common"],n.shared,n["ng.core"])}("undefined"!=typeof self?self:this,function(n,e,l){return function(n){var e={};function l(t){if(e[t])return e[t].exports;var u=e[t]={i:t,l:!1,exports:{}};return n[t].call(u.exports,u,u.exports,l),u.l=!0,u.exports}return l.m=n,l.c=e,l.d=function(n,e,t){l.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:t})},l.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},l.t=function(n,e){if(1&e&&(n=l(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var u in n)l.d(t,u,(function(e){return n[e]}).bind(null,u));return t},l.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return l.d(e,"a",e),e},l.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},l.p="",l(l.s=0)}({0:function(n,e,l){n.exports=l("zUnb")},"0S4P":function(e,l){e.exports=n},cfyg:function(n,l){n.exports=e},vOrQ:function(n,e){n.exports=l},zUnb:function(n,e,l){"use strict";l.r(e);var t=function(){return function(){}}(),u=function(){function n(){}return n.entry=t,n}(),o=l("vOrQ"),r=l("cfyg"),i=o["\u0275crt"]({encapsulation:2,styles:[],data:{}});function d(n){return o["\u0275vid"](0,[(n()(),o["\u0275eld"](0,0,null,null,1,"h3",[],null,null,null,null,null)),(n()(),o["\u0275ted"](-1,null,["Plugin 2"])),(n()(),o["\u0275eld"](2,0,null,null,10,"shared-tabs",[],null,null,null,r["View_\u0275c_0"],r["RenderType_\u0275c"])),o["\u0275did"](3,49152,null,0,r["\u0275c"],[],null,null),(n()(),o["\u0275eld"](4,0,null,0,2,"shared-tab",[["title","Tab 1"]],[[8,"hidden",0]],null,null,r["View_\u0275b_0"],r["RenderType_\u0275b"])),o["\u0275did"](5,49152,null,0,r["\u0275b"],[r["\u0275c"]],{title:[0,"title"]},null),(n()(),o["\u0275ted"](-1,0,[" Tab 1 contents "])),(n()(),o["\u0275eld"](7,0,null,0,2,"shared-tab",[["title","Tab 2"]],[[8,"hidden",0]],null,null,r["View_\u0275b_0"],r["RenderType_\u0275b"])),o["\u0275did"](8,49152,null,0,r["\u0275b"],[r["\u0275c"]],{title:[0,"title"]},null),(n()(),o["\u0275ted"](-1,0,[" Tab 2 contents "])),(n()(),o["\u0275eld"](10,0,null,0,2,"shared-tab",[["title","Tab 3"]],[[8,"hidden",0]],null,null,r["View_\u0275b_0"],r["RenderType_\u0275b"])),o["\u0275did"](11,49152,null,0,r["\u0275b"],[r["\u0275c"]],{title:[0,"title"]},null),(n()(),o["\u0275ted"](-1,0,[" Tab 3 contents "]))],function(n,e){n(e,5,0,"Tab 1"),n(e,8,0,"Tab 2"),n(e,11,0,"Tab 3")},function(n,e){n(e,4,0,o["\u0275nov"](e,5).hidden),n(e,7,0,o["\u0275nov"](e,8).hidden),n(e,10,0,o["\u0275nov"](e,11).hidden)})}function c(n){return o["\u0275vid"](0,[(n()(),o["\u0275eld"](0,0,null,null,1,"app-plugin-2",[],null,null,null,d,i)),o["\u0275did"](1,49152,null,0,t,[],null,null)],null,null)}var a=o["\u0275ccf"]("app-plugin-2",t,c,{},{},[]),f=l("0S4P"),p=o["\u0275cmf"](u,[],function(n){return o["\u0275mod"]([o["\u0275mpd"](512,o.ComponentFactoryResolver,o["\u0275CodegenComponentFactoryResolver"],[[8,[a]],[3,o.ComponentFactoryResolver],o.NgModuleRef]),o["\u0275mpd"](4608,f.NgLocalization,f.NgLocaleLocalization,[o.LOCALE_ID,[2,f["\u0275angular_packages_common_common_a"]]]),o["\u0275mpd"](1073742336,f.CommonModule,f.CommonModule,[]),o["\u0275mpd"](1073742336,r.SharedModule,r.SharedModule,[]),o["\u0275mpd"](1073742336,u,u,[])])});l.d(e,"Plugin2Module",function(){return u}),l.d(e,"Plugin2ModuleNgFactory",function(){return p}),e.default=p}})});
\ No newline at end of file
diff --git a/portal-FE-os/src/assets/plugins/shared.js b/portal-FE-os/src/assets/plugins/shared.js
new file mode 100644
index 00000000..e4e0ca6d
--- /dev/null
+++ b/portal-FE-os/src/assets/plugins/shared.js
@@ -0,0 +1 @@
+!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("ng.common"),require("tslib"),require("ng.core")):"function"==typeof define&&define.amd?define(["ng.common","tslib","ng.core"],t):"object"==typeof exports?exports.shared=t(require("ng.common"),require("tslib"),require("ng.core")):n.shared=t(n["ng.common"],n.tslib,n["ng.core"])}("undefined"!=typeof self?self:this,function(n,t,e){return function(n){var t={};function e(l){if(t[l])return t[l].exports;var u=t[l]={i:l,l:!1,exports:{}};return n[l].call(u.exports,u,u.exports,e),u.l=!0,u.exports}return e.m=n,e.c=t,e.d=function(n,t,l){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:l})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var l=Object.create(null);if(e.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var u in n)e.d(l,u,(function(t){return n[t]}).bind(null,u));return l},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=0)}({0:function(n,t,e){n.exports=e("zUnb")},"0S4P":function(t,e){t.exports=n},"17wl":function(n,e){n.exports=t},vOrQ:function(n,t){n.exports=e},zUnb:function(n,t,e){"use strict";e.r(t),e("17wl");var l=e("0S4P"),u=e("vOrQ"),o=function(){return function(){}}(),r=function(){function n(){this.tabs=[],this.selected=new u.EventEmitter}return n.prototype.addTab=function(n){this.tabs.length||(n.hidden=!1),this.tabs.push(n)},n.prototype.selectTab=function(n){this.tabs.map(function(n){return n.hidden=!0}),n.hidden=!1,this.selected.emit(n)},n}(),i=function(){return function(n){this.hidden=!0,n.addTab(this)}}(),c=function(){return function(){}}(),d=function(){return function(){}}(),a=u["\u0275cmf"](d,[],function(n){return u["\u0275mod"]([u["\u0275mpd"](512,u.ComponentFactoryResolver,u["\u0275CodegenComponentFactoryResolver"],[[8,[]],[3,u.ComponentFactoryResolver],u.NgModuleRef]),u["\u0275mpd"](4608,l.NgLocalization,l.NgLocaleLocalization,[u.LOCALE_ID,[2,l["\u0275angular_packages_common_common_a"]]]),u["\u0275mpd"](1073742336,l.CommonModule,l.CommonModule,[]),u["\u0275mpd"](1073742336,d,d,[])])}),f=u["\u0275crt"]({encapsulation:2,styles:[],data:{}});function s(n){return u["\u0275vid"](0,[(n()(),u["\u0275eld"](0,0,null,null,1,"h4",[],null,null,null,null,null)),(n()(),u["\u0275ted"](-1,null,[" Shared component "]))],null,null)}function p(n){return u["\u0275vid"](0,[(n()(),u["\u0275eld"](0,0,null,null,1,"shared-component",[],null,null,null,s,f)),u["\u0275did"](1,49152,null,0,o,[],null,null)],null,null)}var b=u["\u0275ccf"]("shared-component",o,p,{},{},[]),m=u["\u0275crt"]({encapsulation:0,styles:["[_nghost-%COMP%]{padding:0 15px;border:1px solid #d8dde6;border-radius:6px;line-height:40px;cursor:pointer;background:#fff}[_nghost-%COMP%]:hover{background:#f3f7fb}"],data:{}});function h(n){return u["\u0275vid"](0,[u["\u0275ncd"](null,0)],null,null)}function g(n){return u["\u0275vid"](0,[(n()(),u["\u0275eld"](0,0,null,null,1,"button",[["sharedBtn",""]],null,null,null,h,m)),u["\u0275did"](1,49152,null,0,c,[],null,null)],null,null)}var _=u["\u0275ccf"]("button[sharedBtn]",c,g,{},{},["*"]),y=u["\u0275crt"]({encapsulation:2,styles:[],data:{}});function v(n){return u["\u0275vid"](0,[u["\u0275ncd"](null,0)],null,null)}function x(n){return u["\u0275vid"](0,[(n()(),u["\u0275eld"](0,0,null,null,1,"shared-tab",[],[[8,"hidden",0]],null,null,v,y)),u["\u0275did"](1,49152,null,0,i,[r],null,null)],null,function(n,t){n(t,0,0,u["\u0275nov"](t,1).hidden)})}var C=u["\u0275ccf"]("shared-tab",i,x,{title:"title"},{},["*"]),O=u["\u0275crt"]({encapsulation:0,styles:["[_nghost-%COMP%]{display:block}.tabs[_ngcontent-%COMP%]{display:flex;list-style:none;margin:0;padding:0;border-bottom:1px solid #ebeef2}.tab[_ngcontent-%COMP%]{position:relative;padding:0 20px;line-height:40px;cursor:pointer}.tab-body[_ngcontent-%COMP%]{padding:20px}.tab--active[_ngcontent-%COMP%]:before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:#03a9f4}"],data:{}});function M(n){return u["\u0275vid"](0,[(n()(),u["\u0275eld"](0,0,null,null,1,"li",[["class","tab"]],[[2,"tab--active",null]],[[null,"click"]],function(n,t,e){var l=!0;return"click"===t&&(l=!1!==n.component.selectTab(n.context.$implicit)&&l),l},null,null)),(n()(),u["\u0275ted"](1,null,[" "," "]))],null,function(n,t){n(t,0,0,!t.context.$implicit.hidden),n(t,1,0,t.context.$implicit.title)})}function S(n){return u["\u0275vid"](0,[(n()(),u["\u0275eld"](0,0,null,null,2,"ul",[["class","tabs"]],null,null,null,null,null)),(n()(),u["\u0275and"](16777216,null,null,1,null,M)),u["\u0275did"](2,278528,null,0,l.NgForOf,[u.ViewContainerRef,u.TemplateRef,u.IterableDiffers],{ngForOf:[0,"ngForOf"]},null),(n()(),u["\u0275eld"](3,0,null,null,1,"div",[["class","tab-body"]],null,null,null,null,null)),u["\u0275ncd"](null,0)],function(n,t){n(t,2,0,t.component.tabs)},null)}function P(n){return u["\u0275vid"](0,[(n()(),u["\u0275eld"](0,0,null,null,1,"shared-tabs",[],null,null,null,S,O)),u["\u0275did"](1,49152,null,0,r,[],null,null)],null,null)}var w=u["\u0275ccf"]("shared-tabs",r,P,{},{selected:"selected"},["*"]);e.d(t,"SharedComponent",function(){return o}),e.d(t,"SharedModule",function(){return d}),e.d(t,"\u0275a",function(){return c}),e.d(t,"\u0275b",function(){return i}),e.d(t,"\u0275c",function(){return r}),e.d(t,"SharedModuleNgFactory",function(){return a}),e.d(t,"RenderType_SharedComponent",function(){return f}),e.d(t,"View_SharedComponent_0",function(){return s}),e.d(t,"View_SharedComponent_Host_0",function(){return p}),e.d(t,"SharedComponentNgFactory",function(){return b}),e.d(t,"RenderType_\u0275a",function(){return m}),e.d(t,"View_\u0275a_0",function(){return h}),e.d(t,"View_\u0275a_Host_0",function(){return g}),e.d(t,"\u0275aNgFactory",function(){return _}),e.d(t,"RenderType_\u0275b",function(){return y}),e.d(t,"View_\u0275b_0",function(){return v}),e.d(t,"View_\u0275b_Host_0",function(){return x}),e.d(t,"\u0275bNgFactory",function(){return C}),e.d(t,"RenderType_\u0275c",function(){return O}),e.d(t,"View_\u0275c_0",function(){return S}),e.d(t,"View_\u0275c_Host_0",function(){return P}),e.d(t,"\u0275cNgFactory",function(){return w}),t.default=a}})});
\ No newline at end of file
diff --git a/portal-FE-os/src/environments/environment.prod.ts b/portal-FE-os/src/environments/environment.prod.ts
index 2c026468..e8770249 100644
--- a/portal-FE-os/src/environments/environment.prod.ts
+++ b/portal-FE-os/src/environments/environment.prod.ts
@@ -102,7 +102,7 @@ export const environment = {
     "getAllWebAnalytics": "portalApi/getAllWebAnalytics",
     "modifyWebAnalyticsReport": "portalApi/modifyWebAnalyticsReport",
     "appsFullList": "portalApi/appsFullList",
-    "ecompTitle": "portalApi/ecompTitle",
+    "portalTitle": "portalApi/ecompTitle",
     "getRecommendations": "portalApi/getRecommendations",
     "centralizedApps": "portalApi/centralizedApps",
     "getSchedulerId": "portalApi/post_create_new_vnf_change",
@@ -114,7 +114,16 @@ export const environment = {
     "checkIfUserIsSuperAdmin": "portalApi/checkIfUserIsSuperAdmin",
     "getCurrentLang": "auxapi/languageSetting/user/:loginId",
     "getLanguages": "auxapi/language",
-    "updateLang": "auxapi/languageSetting/user/:loginId"
+    "updateLang": "auxapi/languageSetting/user/:loginId",
+    "linkQ": "",
+    "linkPic": "",
+    "brandName": "ONAP Portal",
+    "brandLogoImagePath": "",
+    "footerLink": "",
+    "footerLinkText": "",
+    "footerMessage": "",
+    "footerLogoImagePath": "",
+    "footerLogoText": ""
 },
 "cookieDomain": "att.com"
 };
diff --git a/portal-FE-os/src/environments/environment.ts b/portal-FE-os/src/environments/environment.ts
index c539817e..3b13f085 100644
--- a/portal-FE-os/src/environments/environment.ts
+++ b/portal-FE-os/src/environments/environment.ts
@@ -119,9 +119,15 @@ export const environment = {
     "getCurrentLang": "http://www.portal.onap.org:9080/portal-be-os/auxapi/languageSetting/user/:loginId",
     "getLanguages": "http://www.portal.onap.org:9080/portal-be-os/auxapi/language",
     "updateLang": "http://www.portal.onap.org:9080/portal-be-os/auxapi/languageSetting/user/:loginId",
-	"linkQ": "",
-	"linkPic": ""
-
+    "linkQ": "",
+    "linkPic": "",
+    "brandName": "ONAP Portal",
+    "brandLogoImagePath": "",
+    "footerLink": "",
+    "footerLinkText": "",
+    "footerMessage": "",
+    "footerLogoImagePath": "",
+    "footerLogoText": ""
   },
   "cookieDomain": "att.com"
 };
diff --git a/portal-FE-os/src/tsconfig.app.json b/portal-FE-os/src/tsconfig.app.json
index 190fd300..685bb80c 100644
--- a/portal-FE-os/src/tsconfig.app.json
+++ b/portal-FE-os/src/tsconfig.app.json
@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "types": []
+    "types": ["jquery", "jqtree"]
   },
   "exclude": [
     "test.ts",
diff --git a/portal-FE-os/src/typings.d.ts b/portal-FE-os/src/typings.d.ts
new file mode 100644
index 00000000..940827f5
--- /dev/null
+++ b/portal-FE-os/src/typings.d.ts
@@ -0,0 +1,7 @@
+interface Window {
+  define: (name: string, deps: string[], definitionFn: () => any) => void;
+
+  System: {
+    import: (path) => Promise<any>;
+  };
+}