i'm all about that base

ionic/components/tabs/tab-button.js

@@ -1,6 +1,5 @@
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {Tabs} from './tabs';
 
@@ -32,6 +31,6 @@ export class TabButton {
   onClick(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    this.tabs.select(this.tab);
+    this.tabs.selectTab(this.tab);
   }
 }

ionic/components/tabs/tab.js

@@ -8,12 +8,11 @@ import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_compone
 import {Injector} from 'angular2/di';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
-import {Nav} from '../nav/nav';
+import {Tabs} from './tabs';
 import {NavBase} from '../nav/nav-base';
 import {NavItem} from '../nav/nav-item';
-import {Tabs} from './tabs';
 import {Content} from '../content/content';
-import {IonicComponent} from 'ionic/config/component';
+import {IonicComponent} from '../../config/component';
 
 
 @Component({
@@ -40,25 +39,26 @@ import {IonicComponent} from 'ionic/config/component';
   `,
   directives: [TabContentAnchor]
 })
-export class Tab {
-  constructor(
-      @Parent() tabs: Tabs,
-      compiler: Compiler,
-      elementRef: ElementRef,
-      loader: DynamicComponentLoader,
-      injector: Injector,
-      viewContainerRef: ViewContainerRef
-    ) {
+export class Tab extends NavBase {
 
-    this.navBase = new NavBase(tabs.navBase, compiler, elementRef, loader, injector);
-    if (tabs.navBase.parent) {
-      this.sections = tabs.navBase.parent.panes['_n'].sections;
+  constructor(
+    @Parent() tabs: Tabs,
+    compiler: Compiler,
+    elementRef: ElementRef,
+    loader: DynamicComponentLoader,
+    injector: Injector,
+    viewContainerRef: ViewContainerRef
+  ) {
+
+    super(tabs, compiler, elementRef, loader, injector);
+    if (tabs.parent) {
+      this.sections = tabs.parent.panes['_n'].sections;
     }
 
-    this.item = new NavItem(this.navBase);
+    this.item = new NavItem(this);
     this.item.setInstance(this);
     this.item.setViewElement(elementRef.domElement);
-    tabs.add(this.item);
+    tabs.addTab(this.item);
     this.tabs = tabs;
 
     this.panelId = 'tab-panel-' + this.item.id;
@@ -68,27 +68,26 @@ export class Tab {
 
     this.viewContainerRef = viewContainerRef;
 
-    this.navBase.panes['_n'] = this;
+    this.panes['_n'] = this;
 
     this.domElement = elementRef.domElement;
-    this.config = Nav.config.invoke(this);
   }
 
   onInit() {
-    if ( this.tabs.navBase.isActive(this.item) || this.tabs.navBase.isStagedEntering(this.item) ) {
+    if ( this.tabs.isActive(this.item) || this.tabs.isStagedEntering(this.item) ) {
       this.loadInitial();
     }
   }
 
   loadInitial() {
     if (this.initial && !this._loaded) {
-      this.navBase.initial(this.initial);
+      this.push(this.initial);
       this._loaded = true;
     }
   }
 
   get isSelected() {
-    return this.tabs.navBase.isActive(this.item);
+    return this.tabs.isActive(this.item);
   }
 
 }

ionic/components/tabs/tabs.js

@@ -9,12 +9,11 @@ import {Injector} from 'angular2/di';
 import {NgFor} from 'angular2/angular2';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
-import {IonicComponent} from '../../config/component';
-import {Tab} from './tab';
 import {TabButton} from './tab-button';
+import {NavBase} from '../nav/nav-base';
 import {Icon} from '../icon/icon';
 import {NavItem} from '../nav/nav-item';
-import {NavBase} from '../nav/nav-base';
+import {IonicComponent} from '../../config/component';
 
 
 @Component({
@@ -40,40 +39,41 @@ import {NavBase} from '../nav/nav-base';
   `,
   directives: [NgFor, TabButton, Icon]
 })
-export class Tabs {
+export class Tabs extends NavBase {
+
   constructor(
     @Optional() parentNavBase: NavBase,
-      compiler: Compiler,
-      elementRef: ElementRef,
-      loader: DynamicComponentLoader,
-      injector: Injector
+    compiler: Compiler,
+    elementRef: ElementRef,
+    loader: DynamicComponentLoader,
+    injector: Injector
   ) {
-    this.navBase = new NavBase(parentNavBase, compiler, elementRef, loader, injector);
+    super(parentNavBase, compiler, elementRef, loader, injector);
 
     this.domElement = elementRef.domElement;
     this.config = Tabs.config.invoke(this);
   }
 
-  add(tabItem) {
-    this.navBase.add(tabItem);
+  addTab(tabItem) {
+    this.add(tabItem);
 
-    if (this.navBase.length() === 1) {
-      this.select(0);
+    if (this.length() === 1) {
+      this.selectTab(0);
     }
   }
 
+  selectTab(tab) {
+    let item = null;
+    if (typeof tab === 'number') {
+      item = this.getByIndex(tab);
+    } else {
+      item = this.getByInstance(tab)
+    }
+    this.select(item);
+  }
+
   get tabs() {
-    return this.navBase.instances();
-  }
-
-  select(tab) {
-    let item = null;
-    if (typeof tab === 'number') {
-      item = this.navBase.getByIndex(tab);
-    } else {
-      item = this.navBase.getByInstance(tab)
-    }
-    this.navBase.select(item);
+    return this.instances();
   }
 
 }