summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/shared
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/shared')
-rw-r--r--catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html8
-rw-r--r--catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less67
-rw-r--r--catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts50
-rw-r--r--catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts48
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.component.html23
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.component.less11
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts52
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts36
-rw-r--r--catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html5
-rw-r--r--catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less58
-rw-r--r--catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts32
-rw-r--r--catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html6
-rw-r--r--catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less35
-rw-r--r--catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts30
-rw-r--r--catalog-ui/src/app/ng2/shared/shared.module.ts40
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts38
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tabs.component.html9
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tabs.component.less84
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts78
-rw-r--r--catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts55
-rw-r--r--catalog-ui/src/app/ng2/shared/translator/translate.module.ts (renamed from catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts)21
-rw-r--r--catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts62
-rw-r--r--catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts (renamed from catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts)21
-rw-r--r--catalog-ui/src/app/ng2/shared/translator/translate.service.ts235
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;
+ }
+}