From c265e724e26b8a5cba7fb6768573d26edbbea403 Mon Sep 17 00:00:00 2001
From: Roman Gotsiy <gotsijroman@gmail.com>
Date: Thu, 22 Oct 2015 20:52:03 +0300
Subject: [PATCH] Add tabs common component

---
 lib/common-components/Tabs/tabs.css | 20 ++++++++++
 lib/common-components/Tabs/tabs.js  | 61 +++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 lib/common-components/Tabs/tabs.css
 create mode 100644 lib/common-components/Tabs/tabs.js

diff --git a/lib/common-components/Tabs/tabs.css b/lib/common-components/Tabs/tabs.css
new file mode 100644
index 00000000..57f2c472
--- /dev/null
+++ b/lib/common-components/Tabs/tabs.css
@@ -0,0 +1,20 @@
+ul {
+  display: block;
+  margin: 0;
+  padding: 10px 0px 0 0;
+}
+
+li {
+  list-style: none;
+  margin: 0;
+  display: inline-block;
+  padding: 5px 15px;
+  background-color: #8F1B1B;
+  border-left: 1px solid #771D1D;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+}
+
+li.active {
+  border-bottom: 2px solid red;
+}
diff --git a/lib/common-components/Tabs/tabs.js b/lib/common-components/Tabs/tabs.js
new file mode 100644
index 00000000..e9d27e81
--- /dev/null
+++ b/lib/common-components/Tabs/tabs.js
@@ -0,0 +1,61 @@
+'use strict';
+
+import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
+
+@Component({
+  selector: 'tabs'
+})
+@View({
+  template: `
+    <ul>
+      <li *ng-for="#tab of tabs" [ng-class]="{active: tab.active}" (click)="selectTab(tab)">{{tab.tabTitle}}</li>
+    </ul>
+    <ng-content></ng-content>
+  `,
+  directives: [CORE_DIRECTIVES],
+  styleUrls: ['./lib/common-components/Tabs/tabs.css']
+})
+export class Tabs {
+  constructor() {
+    this.tabs = [];
+  }
+
+  selectTab(tab) {
+    this.tabs.forEach((tab) => {
+      tab.active = false;
+    });
+    tab.active = true;
+  }
+
+  addTab(tab: Tab) {
+    if (this.tabs.length === 0) {
+      tab.active = true;
+    }
+    this.tabs.push(tab);
+  }
+}
+
+@Component({
+  selector: 'tab',
+  inputs: ['tabTitle: tab-title']
+})
+@View({
+  template: `
+    <div class="tab-wrap" [hidden]="!active">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .tab-wrap {
+      padding: 5px;
+      background-color: #771D1D;
+    }
+  `]
+})
+export class Tab {
+  constructor(tabs) {
+    tabs.addTab(this);
+  }
+}
+
+Tab.parameters = [ [ Tabs ] ];