Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>

24 files changed, 320 insertions, 784 deletions

diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
deleted file mode 100644
index 872bf90329..0000000000
--- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="checkbox-container {{checkboxStyle}}">
-    <div class="checkbox-animation"></div><!--[@checkEffect]="checked"-->
-    <label class="checkbox-label" >
-        <input type="checkbox" class="checkbox-hidden" [ngModel]="checked" (ngModelChange)="toggleState($event)" [disabled]="disabled" />
-        <div class="checkbox-icon"></div>
-        <span *ngIf="label" class="checkbox-label-content">{{label}}</span>
-    </label>
-</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
deleted file mode 100644
index 3a28c5fb42..0000000000
--- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less
+++ /dev/null
@@ -1,67 +0,0 @@
- @import '../../../../assets/styles/tlv-sprite';
-@import '../../../../assets/styles/sprite';
-
- 
-.checkbox-container {
-    display:inline-block;
-    position:relative;
-    text-align: left;
-    height: 20px;
-
-
-    .checkbox-icon {
-        display: inline-block;
-    }
-    
-    .checkbox-label {
-        font-weight: inherit;
-        font-size: inherit;
-    }
-
-    .checkbox-label-content {
-        margin-left:2px;
-    }
-
-    .checkbox-icon::before {
-        .tlv-sprite;
-        background-position: -10px -60px;
-        width: 14px;
-        height: 14px;
-        content: '';
-        display: inline-block;
-        margin-right: 0px;
-        margin-top: -2px;
-        vertical-align: middle;
-    }
-
-    input[type=checkbox].checkbox-hidden {
-        width:0;
-        height:0;
-        display:none;
-        &:checked ~ .checkbox-icon::before{
-            .sprite-new;
-            .filled-checkbox-icon
-        }
-        &[disabled] ~ .checkbox-icon::before {
-            /* TODO: add disabled styles here */
-            background-image: none;
-            background-color: #EFEFEF;
-            border-radius: 2px;
-            border: solid #CCC 1px;
-        }
-    }
-    
-    .checkbox-animation {
-        background-color: #009fdb;
-        position: absolute;
-        left: 2px;
-        top: 4px;
-        width:10px;
-        height:10px;
-        border-radius: 50%;
-        z-index: 1;
-        pointer-events: none;
-        opacity:0;
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
deleted file mode 100644
index c8da016174..0000000000
--- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-//import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
-
-@Component({
-    selector: 'checkbox',
-    templateUrl: './checkbox.component.html',
-    styleUrls: ['./checkbox.component.less'],
-    encapsulation: ViewEncapsulation.None
-    // animations: [
-    //     trigger('checkEffect', [
-    //         state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })),
-    //         state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })),
-    //         transition('1 => 0', animate('150ms ease-out')),
-    //         transition('0 => 1', animate('150ms ease-in'))
-    //     ])
-    // ]
-})
-export class CheckboxComponent  {
-    
-    @Input() checkboxStyle: string;
-    @Input() label: string;
-    @Input() checked: boolean;
-    @Input() disabled: boolean;
-    @Output() checkedChange: EventEmitter<any> = new EventEmitter<any>();
-
-    toggleState(newValue:boolean) {
-        this.checkedChange.emit(newValue);
-    }
-}
-
diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts
deleted file mode 100644
index 4ac7f2d7cd..0000000000
--- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import { CheckboxComponent } from './checkbox.component';
-
-
-@NgModule({
-    imports: [CommonModule, BrowserModule, FormsModule],
-    declarations: [CheckboxComponent],
-    bootstrap: [],
-    exports: [CheckboxComponent]
-})
-export class CheckboxModule { }
-
-/** README: **/
-
-/** USAGE Example:
- *In page.module.ts: import CheckboxModule
- *In HTML:
- *<checkbox checkboxStyle="class-goes-here" [label]="'Text goes here'" [disabled]="variable-goes-here" [(checked)]="default-or-variable-goes-here" (checkedChange)="change-event-goes-here()"></checkbox>
- */
-
-/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized)
- *
- * To create or override styles:
- * Use /deep/ or >>> prefix to override styles via other components stylesheets
- */
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html
deleted file mode 100644
index d783be4c27..0000000000
--- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<nav class="navbar navbar-dark">
-  <div class="clearfix">
-    <button (click)="isCollapsed = !isCollapsed"
-            class="navbar-toggler pull-xs-right hidden-sm-up" type="button"
-            aria-controls="bd-main-nav"
-            aria-label="Toggle navigation">
-      {{menuIcon}}
-    </button>
-    <a (click)="isCollapsed = true" class="navbar-brand hidden-sm-up" [routerLink]="[brandMenu.path]">
-      {{brandMenu.title}}
-    </a>
-  </div>
-  <div class="navbar-toggleable-xs navbar-collapse" id="bd-main-nav" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
-    <ul class="nav navbar-nav">
-      <li (click)="isCollapsed = true" class="nav-item" routerLinkActive="active">
-        <a class="navbar-brand hidden-xs-down" [routerLink]="[brandMenu.path]">{{brandMenu.title}}</a>
-      </li>
-      <li (click)="isCollapsed = true" *ngFor="let menuItem of menuItems" class="nav-item" routerLinkActive="active" [ngClass]="getMenuItemClasses(menuItem)">
-        <a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
-      </li>
-    </ul>
-  </div>
-</nav>
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less
deleted file mode 100644
index 3e5165b798..0000000000
--- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.active {
-  color: #ffffff;
-}
-.navbar-toggler {
-  border: solid 1px #cccccc;
-  color: #ff0000;
-}
-.navbar {
-  background-color: #0000ff;
-  border-radius: 0;
-}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts
deleted file mode 100644
index 68a26c4780..0000000000
--- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
-import { ROUTES } from './navbar-routes.config';
-import { MenuType, RouteInfo } from './navbar.metadata';
-
-@Component({
-  selector: 'app-navbar',
-  templateUrl: './navbar.component.html',
-  styleUrls: [ './navbar.component.less' ],
-  encapsulation: ViewEncapsulation.None
-})
-export class NavbarComponent implements OnInit {
-  public menuItems: Array<RouteInfo>;
-  public brandMenu: RouteInfo;
-  isCollapsed = true;
-
-  constructor() {}
-
-  ngOnInit() {
-    this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND);
-    this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0];
-  }
-
-  public get menuIcon(): string {
-    return this.isCollapsed ? '☰' : '✖';
-  }
-
-  public getMenuItemClasses(menuItem: any) {
-    return {
-      'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT
-    };
-  }
-}
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts
deleted file mode 100644
index 4a754dfe99..0000000000
--- a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { NavbarComponent } from "./navbar.component";
-
-@NgModule({
-  imports: [
-    RouterModule,
-    CommonModule
-  ],
-  declarations: [ NavbarComponent ],
-  exports: [
-    NavbarComponent
-  ]
-})
-export class NavbarModule {}
diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html
deleted file mode 100644
index 36629594b0..0000000000
--- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="search-bar-container {{class}}">
-    <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
-    <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
-    <button class="search-bar-button" (click)="searchButtonClick()"></button>
-</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less
deleted file mode 100644
index cfeb8d3b01..0000000000
--- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less
+++ /dev/null
@@ -1,58 +0,0 @@
-.search-bar-container {
-    display:flex;
-    border-radius: 4px;
-    box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
-
-    .search-bar-input {
-        border: 1px solid #cdcdcd;
-        border-radius: 4px;
-        border-right:none;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        outline:none;
-        padding:2px 50px 2px 10px;
-        color:  #5a5a5a;
-        font-size: 1em;
-        font-style: italic;
-    }
-
-    .clear-search-x {
-        position:absolute;
-        right:40px;
-        top:5px;
-        padding: 0 5px;
-        
-        &:hover {
-            border-radius:2px;
-            background-color: #ebebeb;
-            cursor:pointer;
-        }
-    }
-
-    .search-bar-button {
-        //background: url('../../../../assets/styles/svg/source/search-magnify.svg') no-repeat 50%;
-        background: url('../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px;
-        background-color:  rgba(234, 234, 234, 0.88);
-        width: 30px;
-        height: 30px;
-        padding: 0;
-        cursor:pointer;
-        border:solid 1px #cdcdcd;
-        border-top-right-radius: 4px;
-        border-bottom-right-radius: 4px;
-
-        &:hover {
-            background-position:-126px -1275px;
-        }
-
-        &:active {
-            background-color:  rgba(31, 171, 223, 0.88);
-            background-position:-45px -1275px;
-            border-left:none;
-        }
-        &:focus {
-            outline:none;
-        }
-
-    }
-}
diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts
deleted file mode 100644
index 08bdf2030f..0000000000
--- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-
-@Component({
-    selector: 'search-bar',
-    templateUrl: './search-bar.component.html',
-    styleUrls: ['./search-bar.component.less'],
-    encapsulation: ViewEncapsulation.None
-})
-export class SearchBarComponent {
-
-    @Input() placeholder: string;
-    @Input() class: string;
-    @Input() searchQuery: string;
-    @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>();
-    @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>();
-
-    searchButtonClick = (): void => {
-        if (this.searchQuery) { //do not allow empty search
-            this.searchButtonClicked.emit(this.searchQuery);
-        }
-    }
-
-    searchQueryChange = ($event): void => {
-        this.searchChanged.emit($event);
-    }
-
-    private clearSearchQuery = (): void => {
-        this.searchQuery = "";
-        this.searchButtonClicked.emit(this.searchQuery);
-    }
-}
-
diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html
deleted file mode 100644
index c9769ba5ae..0000000000
--- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="search-with-autocomplete-container {{searchBarClass}}" [class.autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
-    <search-bar [placeholder]="searchPlaceholder" [searchQuery]="searchQuery" (searchButtonClicked)="updateSearch($event)" (searchChanged)="searchChange($event)"></search-bar>
-    <div class="autocomplete-results">
-        <div *ngFor="let item of autoCompleteValues" class="autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less
deleted file mode 100644
index 92b054cd85..0000000000
--- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less
+++ /dev/null
@@ -1,35 +0,0 @@
-
-.search-with-autocomplete-container{  
-    &.autocomplete-visible {
-
-        .search-bar-input {
-            border-bottom-left-radius: 0;
-        }
-        .search-bar-button {
-            border-bottom-right-radius: 0;
-        }
-        .autocomplete-results {
-            border: solid 1px #d2d2d2;
-            border-top:none;
-            border-bottom-left-radius: 4px;
-            border-bottom-right-radius: 4px;
-            background-color: #fff;
-            padding: 10px 20px;
-            width:100%;
-            position:absolute;
-            max-height: 200px;
-            overflow-y: scroll;
-        }
-
-        .autocomplete-result-item {
-            color:#5a5a5a;
-            padding: 5px 0;
-            cursor:pointer;
-
-            &:hover {
-                color: #999;
-            }
-        }
-    }
-}
-
diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts
deleted file mode 100644
index ced056d1fc..0000000000
--- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
-import { SearchBarComponent } from '../search-bar/search-bar.component';
-
-@Component({
-    selector: 'search-with-autocomplete',
-    templateUrl: './search-with-autocomplete.component.html',
-    styleUrls: ['./search-with-autocomplete.component.less'],
-    encapsulation: ViewEncapsulation.None
-})
-export class SearchWithAutoCompleteComponent {
-
-    @Input() searchPlaceholder: string;
-    @Input() searchBarClass: string;
-    @Input() searchQuery: string;
-    @Input() autoCompleteValues: Array<string>;
-    @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>();
-    @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>();
-
-    searchChange = (searchTerm: string) => {
-        this.searchQuery = searchTerm;
-        this.searchChanged.emit(searchTerm);
-    }
-
-    updateSearch = (searchTerm: string) => {
-        this.searchQuery = searchTerm;
-        this.searchButtonClicked.emit(searchTerm);
-        this.autoCompleteValues = [];
-    }
-}
-
diff --git a/catalog-ui/src/app/ng2/shared/shared.module.ts b/catalog-ui/src/app/ng2/shared/shared.module.ts
deleted file mode 100644
index 2bc7d52ab8..0000000000
--- a/catalog-ui/src/app/ng2/shared/shared.module.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { NgModule } from '@angular/core';
-
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { NavbarModule } from "./navbar/navbar.module";
-
-@NgModule({
-  declarations: [
-
-  ],
-  imports: [
-    CommonModule,
-    RouterModule,
-    NavbarModule
-  ],
-  exports: [
-  ]
-})
-
-export class SharedModule {}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts
deleted file mode 100644
index bad7b80a51..0000000000
--- a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { Component, Input } from '@angular/core';
-import { ViewEncapsulation } from '@angular/core';
-
-@Component({
-    selector: 'tab',
-    template: `
-    <div *ngIf="active" class="tab-content">
-      <ng-content></ng-content>
-    </div>
-    `,
-    encapsulation: ViewEncapsulation.None
-})
-export class Tab {
-    @Input('tabTitle') title: string;
-    @Input() active:boolean = false;
-    @Input() indication?: number;
-
-}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html
deleted file mode 100644
index 3e263a3862..0000000000
--- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="tabs {{tabStyle}}">
-    <div class="tab" *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
-        {{tab.title}}
-        <div class="tab-indication" *ngIf="tab.indication" [@indicatorAnimation]="tab.indication">{{tab.indication}}</div>
-    </div>
-</div>
-<div class="tab-content-container">
-    <ng-content></ng-content>
-</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
deleted file mode 100644
index 6f9e57aaf2..0000000000
--- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less
+++ /dev/null
@@ -1,84 +0,0 @@
-@import '../../../../assets/styles/variables';
-
-tab {
-    height: 100%;
-}
-
-.tabs {
-    display:flex;
-    flex: 0 0 auto;
-    flex-direction:row;
-}
-
-.tab {
-    flex: 1 0 auto;
-    cursor: pointer;
-    padding: .5em;
-}
-
-.tab-content-container {
-    flex: 1;
-    width:100%;
-    overflow-y:hidden;
-}
-
-.tab-content {
-    height:100%;
-}
-
-/*Tab styles*/
-.tabs{
-    &.round-tabs .tab{
-        background-color: #f8f8f8;
-        color: #959595;
-        border: solid 1px #d2d2d2;
-        border-bottom:none;
-        border-left:none;
-        position:relative;
-
-        &:first-child {
-            border-left:solid 1px #d2d2d2;
-        }
-
-        &.active {
-            background-color:#009fdb;
-            color:#e9e9e9;
-            border-color:#009fdb;
-        }
-
-        .tab-indication {
-            position: absolute;
-            top: -10px;
-            background-color: #009fdb;
-            right: 10px;
-            padding: 2px 0;
-            border-radius: 15px;
-            border: solid 1px #d2d2d2;
-            color:white;
-            width: 25px;
-            height: 25px;
-            text-align: center;
-
-        }
-    }
-
-    &.simple-tabs .tab {
-        font-size: 12px;
-        color: @main_color_n;
-
-        &:after {
-            display:block;
-            content: '';
-            border-bottom: 2px solid @main_color_a;
-            transform: scaleX(0);
-            transition: transform 200ms ease-in-out;
-        }
-
-        &.active {
-            color: @main_color_a;
-            &:after {
-                transform: scaleX(1.2);
-            }
-        }
-    }
-}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts
deleted file mode 100644
index 21d2bbad43..0000000000
--- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core';
-import { Tab } from './tab/tab.component';
-import { ViewEncapsulation } from '@angular/core';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/core';
-
-@Component({
-    selector: 'tabs',
-    templateUrl: './tabs.component.html',
-    styleUrls: ['./tabs.component.less'],
-    encapsulation: ViewEncapsulation.None,
-    animations: [
-        trigger('indicatorAnimation', [
-            transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]),
-            transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ])
-        ])
-    ]
-})
-export class Tabs implements AfterContentInit {
-
-    @Input() tabStyle: string;
-    @Input() hideIndicationOnTabChange?: boolean = false;
-    @ContentChildren(Tab) tabs: QueryList<Tab>;
-    @Output() tabChanged: EventEmitter<Tab> = new EventEmitter<Tab>();
-
-
-    ngAfterContentInit() {  
-        //after contentChildren are set, determine active tab. If no active tab set, activate the first one
-        let activeTabs = this.tabs.filter((tab) => tab.active);
- 
-        if (activeTabs.length === 0) {
-            this.selectTab(this.tabs.first);
-        }
-    }
-
-    selectTab(tab: Tab) {
-        //activate the tab the user clicked.
-        this.tabs.toArray().forEach(tab => {
-            tab.active = false;
-            if (this.hideIndicationOnTabChange && tab.indication) {
-                tab.indication = null;
-            }
-        });
-        tab.active = true;
-        this.tabChanged.emit(tab);
-    }
-
-    triggerTabChange(tabTitle) {
-        this.tabs.toArray().forEach(tab => {
-            tab.active = (tab.title == tabTitle) ? true : false;
-        });
-    }
-
-    setTabIndication(tabTitle:string, indication?:number) {
-        let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle);
-        selectedTab.indication = indication || null;
-    }
-
-}
diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts
deleted file mode 100644
index 6bf19d4099..0000000000
--- a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import { Component, NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
-
-import { Tabs } from './tabs.component';
-import { Tab } from './tab/tab.component';
-
-
-@NgModule({
-    imports: [BrowserModule],
-    declarations: [Tabs, Tab],
-    bootstrap: [],
-    exports: [Tabs, Tab]
-})
-export class TabModule { }
-
-/** README: **/
-
-/** USAGE Example:
- *In page.module.ts: import TabModule
- *In HTML:
- *<tabs tabStyle="class-goes-here" (tabChanged)="tabChangedEvent($event) [hideIndicationOnTabChange]="optional-boolean">
- *   <tab [tabTitle]="'Tab 1'">Content of tab 1</tab>
- *   <tab tabTitle="Tab 2" >Content of tab 2</tab>
- *   ...
- *</tabs>
- */
-
-/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized)
- * Existing options:
- * tabStyle="round-tabs" will provide generic rounded tab look
- *
- * To create or override styles:
- * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active".
- * Use /deep/ or >>> prefix to override styles via other components stylesheets
- */
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/shared/translator/translate.module.ts
index ac58cbd063..feaec03bbd 100644
--- a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.module.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,10 +18,15 @@
  * ============LICENSE_END=========================================================
  */
 
-import { MenuType, RouteInfo } from './navbar.metadata';
+import { NgModule } from '@angular/core'
 
-export const ROUTES: RouteInfo[] = [
-  { path: 'page1', title: 'Logo', menuType: MenuType.BRAND },
-  { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT },
-  { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT }
-];
+import { TranslateService } from "./translate.service";
+import { TranslatePipe } from "./translate.pipe";
+
+
+@NgModule({
+    providers: [TranslateService],
+    declarations: [TranslatePipe],
+    exports: [TranslatePipe]
+})
+export class TranslateModule { }
diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts
new file mode 100644
index 0000000000..42e019829f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts
@@ -0,0 +1,62 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService, ITranslateArgs } from "./translate.service";
+
+
+@Pipe({
+    name: 'translate',
+    pure: false
+})
+export class TranslatePipe implements PipeTransform {
+    private translated:string;
+    private lastParams: {
+        phrase: string;
+        args: {[index: string]: any};
+        language: string;
+    } = {
+        phrase: undefined,
+        args: undefined,
+        language: undefined
+    };
+
+    constructor(private translateService:TranslateService) {
+    }
+
+    private shouldUpdate(curParams:{[index:string]: any}) : boolean {
+        return (
+            curParams.language !== this.lastParams.language ||
+            curParams.args !== this.lastParams.args ||
+            curParams.phrase !== this.lastParams.phrase
+        );
+    }
+
+    public transform(phrase:string, args:ITranslateArgs, language:string=this.translateService.activeLanguage) : string {
+        const curParams = { phrase, args, language };
+        if (this.shouldUpdate(curParams)) {
+            this.lastParams = curParams;
+            this.translated = this.translateService.translate(phrase, args, language);
+            console.log('*updated:', this.translated);
+        }
+
+        return this.translated;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts
index 71cc3cb59f..a1d7833062 100644
--- a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -18,14 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-export enum MenuType {
-  BRAND,
-  LEFT,
-  RIGHT
-}
+import { OpaqueToken } from "@angular/core";
+
+export const TranslateServiceConfigToken = new OpaqueToken('TranslateServiceConfigToken');
 
-export interface RouteInfo {
-  path: string;
-  title: string;
-  menuType: MenuType;
+export interface ITranslateServiceConfig {
+    filePrefix:string;
+    fileSuffix:string;
+    allowedLanguages:string[];
+    defaultLanguage:string;
 }
diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts
new file mode 100644
index 0000000000..ff7c643b46
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts
@@ -0,0 +1,235 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import { Injectable, Inject } from "@angular/core";
+import { Response, Http } from "@angular/http";
+import { Observable, Observer, ConnectableObservable, Subscription } from "rxjs";
+import { ITranslateServiceConfig, TranslateServiceConfigToken } from "./translate.service.config";
+
+export { ITranslateServiceConfig, TranslateServiceConfigToken };
+
+export interface ITranslateLanguageJson {
+    [index:string]: string;
+}
+
+export interface ITranslateArgs {
+    [index:string]: any;
+}
+
+export class PhraseTranslator {
+    private _observable:ConnectableObservable<string>;
+    private _observer:Observer<string>;
+    private _languageChangeSubscription:Subscription;
+
+    private _phraseKey:string;
+    private _args:ITranslateArgs;
+    private _language:string;
+
+    private _markForCheck:boolean = false;
+    private _lastParams: {
+        phraseKey: string;
+        args: {[index: string]: any};
+        language: string;
+    } = {
+        phraseKey: undefined,
+        args: undefined,
+        language: undefined
+    };
+
+    constructor(private translateService:TranslateService) {
+        this._observable = Observable.create(observer => {
+            this._observer = observer;
+            this._languageChangeSubscription = this.translateService.languageChangedObservable.subscribe(language => {
+                // using the active language, then force update
+                if (!this._language) {
+                    this.update(true);
+                }
+            });
+        }).publishReplay(1).refCount();
+    }
+
+    public get observable() {
+        return this._observable;
+    }
+
+    public destroy() {
+        this._observer.complete();
+        this._languageChangeSubscription.unsubscribe();
+
+        delete this._observable;
+        delete this._observer;
+        delete this._languageChangeSubscription;
+    }
+
+    public shouldUpdate() : boolean {
+        if (!this._markForCheck) {
+            return false;
+        }
+        this._markForCheck = false;
+        return (
+            this._language !== this._lastParams.language ||
+            this._args !== this._lastParams.args ||
+            this._phraseKey !== this._lastParams.phraseKey
+        );
+    }
+
+    public update(forceUpdate:boolean=false) : void {
+        // only update translation when having subscriptions connected.
+        if (this._observer && !this._observer.closed) {
+            if (forceUpdate || this.shouldUpdate()) {
+                this._lastParams = {
+                    phraseKey: this._phraseKey,
+                    args: this._args,
+                    language: this._language
+                };
+                this._markForCheck = false;
+
+                const translated = this.translateService.translate(this._phraseKey, this._args, this._language);
+                this._observer.next(translated);
+            }
+        }
+    }
+
+    private _changeParam(paramKey:string, value:any, update:boolean) : void {
+        this[`_${paramKey}`] = value;
+        this._markForCheck = true;
+        if (update) {
+            this.update();
+        }
+    }
+
+    public changePhraseKey(phraseKey:string, update:boolean=true) : void {
+        this._changeParam('phraseKey', phraseKey, update);
+    }
+
+    public changeArgs(args:ITranslateArgs, update:boolean=true) :void {
+        this._changeParam('args', args, update);
+    }
+
+    public changeLangauge(language:string, update:boolean=true) :void {
+        this._changeParam('language', language, update);
+    }
+
+    public changeParams(phraseKey:string, args:ITranslateArgs={}, language?:string, forceUpdate:boolean=false) {
+        this._phraseKey = phraseKey;
+        this._args = args;
+        this._language = language;
+        this._markForCheck = true;
+        this.update(forceUpdate);
+    }
+}
+
+
+@Injectable()
+export class TranslateService {
+    private _activeLanguage:string;
+    private _languageChangedObservable:ConnectableObservable<string>;
+    private _languageChangedObserver:Observer<string>;
+    private _cacheLanguagesJsons:{[index:string]:ITranslateLanguageJson} = {};
+    private _cacheLanguagesLoaders:{[index:string]:Observable<ITranslateLanguageJson>} = {};
+
+    constructor(@Inject(TranslateServiceConfigToken) private config:ITranslateServiceConfig, private http:Http) {
+        this.initLanguageObservable();
+        this.loadAndActivateLanguage(this.config.defaultLanguage);
+    }
+
+    public get languageChangedObservable() : Observable<string> {
+        return this._languageChangedObservable;
+    }
+
+    public get activeLanguage() {
+        return this._activeLanguage;
+    }
+
+    private initLanguageObservable() {
+        this._languageChangedObservable = ConnectableObservable.create(observer => {
+            this._languageChangedObserver = observer;
+        }).publishReplay(1);  // replay last emitted change on subscribe
+        this._languageChangedObservable.connect();
+    }
+
+    private loadLanguageJsonFile(language:string, emitOnLoad:boolean=true) : Observable<ITranslateLanguageJson> {
+        if (this.config.allowedLanguages.indexOf(language) === -1) {
+            return Observable.throw(`Language "${language}" is not available.`);
+        }
+
+        if (this._cacheLanguagesJsons[language]) {
+            return Observable.of(this._cacheLanguagesJsons[language]);
+        }
+
+        if (!(language in this._cacheLanguagesLoaders)) {
+            const filePath = `${this.config.filePrefix}${language}${this.config.fileSuffix}`;
+            this._cacheLanguagesLoaders[language] = this.http.get(filePath)
+                .map<Response, ITranslateLanguageJson>(resp => resp.json())
+                .catch(() => Observable.throw(`Failed to load language file for "${language}"`))
+                .publish();
+            (<ConnectableObservable<ITranslateLanguageJson>>this._cacheLanguagesLoaders[language]).connect();
+            this._cacheLanguagesLoaders[language].subscribe(languageJson => {
+                    this._cacheLanguagesJsons[language] = languageJson;
+                    delete this._cacheLanguagesLoaders[language];
+                    if (emitOnLoad) {
+                        this._languageChangedObserver.next(language);
+                    }
+                    return languageJson;
+                });
+        }
+        return this._cacheLanguagesLoaders[language];
+    }
+
+    public activateLanguage(language:string) : boolean {
+        if (this._cacheLanguagesJsons[language]) {
+            if (language !== this._activeLanguage) {
+                this._activeLanguage = language;
+                this._languageChangedObserver.next(this._activeLanguage);
+            }
+            return true;
+        }
+        return false;
+    }
+
+    public loadAndActivateLanguage(language:string) : Observable<ITranslateLanguageJson> {
+        const loadLanguageObservable = this.loadLanguageJsonFile(language, false);
+        loadLanguageObservable.subscribe(() => {
+            this.activateLanguage(language);
+        }, () => {});
+        return loadLanguageObservable;
+    }
+
+    public translate(phraseKey:string, args:ITranslateArgs={}, language:string=this._activeLanguage) : string {
+        const phrase:string = (this._cacheLanguagesJsons[language] || {})[phraseKey] || '';
+        let translated:string;
+        if (typeof(phrase) === 'string') {
+            translated = phrase
+                .replace(
+                    /(^|[^\\]|\\\\)\{\{(\w+)\}\}/g,
+                    (m, p1, p2) => `${p1}${args[p2]||''}`
+                )
+                .replace('\\{{', '{{')
+                .replace('\\\\', '\\');
+        }
+        return translated;
+    }
+
+    public createPhraseTranslator(phraseKey?:string, args?:ITranslateArgs, language?:string) : PhraseTranslator {
+        const phraseTranslator = new PhraseTranslator(this);
+        phraseTranslator.changeParams(phraseKey, args, language);
+        return phraseTranslator;
+    }
+}