Final commit to master merge from

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

5 files changed, 265 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts
new file mode 100644
index 0000000000..bad7b80a51
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============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/components/ui/tabs/tabs.component.html b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html
new file mode 100644
index 0000000000..57cf5d46c9
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html
@@ -0,0 +1,9 @@
+<div class="tabs {{tabStyle}}">
+    <div class="tab" *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active"  [attr.data-tests-id]="tab.title">
+        {{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/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
new file mode 100644
index 0000000000..f7b18b1cc8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
@@ -0,0 +1,85 @@
+@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;
+    overflow-x: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/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
new file mode 100644
index 0000000000..21d2bbad43
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts
@@ -0,0 +1,78 @@
+/*-
+ * ============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/components/ui/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts
new file mode 100644
index 0000000000..1300c41a90
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts
@@ -0,0 +1,55 @@
+/*-
+ * ============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 { 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
+ */