add advanced tabs testg

src/components/tabs/tabs.js

@@ -1,40 +1,66 @@
-import {NgElement, Component, Template, Foreach, Parent} from 'angular2/angular2'
-import {NavViewport} from 'ionic2/components'
+import {NgElement, Component, Template, Parent, For} from 'angular2/angular2'
 import {IonicComponent} from 'ionic2/config/component'
 
 @Component({
   selector: 'ion-tabs',
   bind: {
     placement: 'placement'
-  },
+  }
 })
 @Template({
   inline: `
     <div class="toolbar tab-bar toolbar-ios toolbar-bottom">
       <div class="tab-bar-content">
-        <a class="tab-bar-item tab-active" href="#">
-          Tab 1
-        </a>
-        <a class="tab-bar-item" href="#">
-          Tab 2
-        </a>
-        <a class="tab-bar-item" href="#">
-          Tab 3
+        <a *for="#tab of tabs"
+          class="tab-bar-item tab-active" 
+          [class.active]="tab.isSelected"
+          (click)="onClickTabItem($event, tab)">
+          {{tab.title}}
         </a>
       </div>
     </div>
+    <content></content>
   `,
-  directives: []
+  directives: [For]
 })
-export class Tabs extends NavViewport {
+export class Tabs  {
   constructor(
     element: NgElement
   ) {
-    super()
     this.domElement = element.domElement
     this.domElement.classList.add('pane')
     this.config = Tabs.config.invoke(this)
+
+    this.tabs = []
   }
+
+  addTab(tab) {
+    this.tabs.push(tab)
+    if (this.tabs.length == 1) {
+      this.select(tab)
+    }
+  }
+
+  onClickTabItem(ev, tab) {
+    ev.preventDefault()
+    if (this.selectedTab !== tab) {
+      this.select(tab)
+    } else if (tab._stack.length >= 2) {
+      while (tab._stack.length > 2) {
+        tab.pop({ sync: true }) // pop with no animation
+      }
+      tab.pop() //pop last one with animation
+    }
+  }
+
+  select(tab) {
+    this.tabs.forEach(otherTab => {
+      otherTab.setSelected(false)
+    })
+    tab.setSelected(true)
+    this.selectedTab = tab
+  }
+
 }
 
 new IonicComponent(Tabs, {