chore: revert tabset implementation

demo/src/app/components/tabset/demos/basic/tabset-basic.html

@@ -1,4 +1,4 @@
-<ngb-tabset>
+<ngb-tabset [destroyOnHide]="false">
   <ngb-tab title="Simple">
     <ng-template ngbTabContent>
       <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth

demo/src/app/components/tabset/tabset.module.ts

@@ -9,8 +9,6 @@ import { NgbdTabsetBasic } from './demos/basic/tabset-basic';
 import { NgbdTabsetBasicModule } from './demos/basic/tabset-basic.module';
 import { NgbdTabsetConfig } from './demos/config/tabset-config';
 import { NgbdTabsetConfigModule } from './demos/config/tabset-config.module';
-import { NgbdTabsetDirectives } from './demos/directives/tabset-directives';
-import { NgbdTabsetDirectivesModule } from './demos/directives/tabset-directives.module';
 import { NgbdTabsetJustify } from './demos/justify/tabset-justify';
 import { NgbdTabsetJustifyModule } from './demos/justify/tabset-justify.module';
 import { NgbdTabsetOrientation } from './demos/orientation/tabset-orientation';
@@ -29,12 +27,6 @@ const DEMOS = {
     code: require('!!raw-loader!./demos/basic/tabset-basic').default,
     markup: require('!!raw-loader!./demos/basic/tabset-basic.html').default
   },
-  directives: {
-    title: 'Directives',
-    type: NgbdTabsetDirectives,
-    code: require('!!raw-loader!./demos/directives/tabset-directives'),
-    markup: require('!!raw-loader!./demos/directives/tabset-directives.html')
-  },
   pills: {
     title: 'Pills',
     type: NgbdTabsetPills,
@@ -90,7 +82,6 @@ export const ROUTES = [
     NgbdSharedModule,
     NgbdComponentsSharedModule,
     NgbdTabsetBasicModule,
-    NgbdTabsetDirectivesModule,
     NgbdTabsetPillsModule,
     NgbdTabsetPreventChangeModule,
     NgbdTabsetSelectbyidModule,

src/index.ts

@@ -109,12 +109,7 @@ export {
   NgbTabset,
   NgbTabsetConfig,
   NgbTabsetModule,
-  NgbTabTitle,
-  NgbTabDirective,
-  NgbTabLinkDirective,
-  NgbTabsetDirective,
-  NgbTabsetOutlet,
-  NgbSelfControlledTabset
+  NgbTabTitle
 } from './tabset/tabset.module';
 export {
   NgbTimeAdapter,

src/tabset/tabset.module.ts

@@ -1,33 +1,14 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {NgbNavModule} from '../nav/nav.module';
 
-import {NgbTabset, NgbTab, NgbTabTitle} from './tabset';
-import {
-  NgbTabContent,
-  NgbTabsetDirective,
-  NgbTabDirective,
-  NgbTabLinkDirective,
-  NgbTabsetOutlet,
-  NgbSelfControlledTabset
-} from './tabset-directives';
+import {NgbTabset, NgbTab, NgbTabContent, NgbTabTitle} from './tabset';
 
-export {NgbTabset, NgbTab, NgbTabTitle} from './tabset';
-export {
-  NgbTabContent,
-  NgbTabsetDirective,
-  NgbTabDirective,
-  NgbTabLinkDirective,
-  NgbTabsetOutlet,
-  NgbTabChangeEvent,
-  NgbSelfControlledTabset
-} from './tabset-directives';
+export {NgbTabset, NgbTab, NgbTabContent, NgbTabTitle, NgbTabChangeEvent} from './tabset';
 export {NgbTabsetConfig} from './tabset-config';
 
-const NGB_TABSET_DIRECTIVES = [
-  NgbTabset, NgbTab, NgbTabContent, NgbTabsetDirective, NgbTabDirective, NgbTabLinkDirective, NgbTabTitle,
-  NgbTabsetOutlet, NgbSelfControlledTabset
-];
+const NGB_TABSET_DIRECTIVES = [NgbTabset, NgbTab, NgbTabContent, NgbTabTitle];
 
-@NgModule({declarations: NGB_TABSET_DIRECTIVES, exports: NGB_TABSET_DIRECTIVES, imports: [CommonModule]})
+@NgModule({declarations: NGB_TABSET_DIRECTIVES, exports: NGB_TABSET_DIRECTIVES, imports: [CommonModule, NgbNavModule]})
 export class NgbTabsetModule {
 }

src/tabset/tabset.ts

@@ -7,11 +7,11 @@ import {
   TemplateRef,
   AfterContentChecked,
   Output,
-  EventEmitter,
-  ViewChild
+  EventEmitter
 } from '@angular/core';
 import {NgbTabsetConfig} from './tabset-config';
-import {NgbTabContent, NgbTabChangeEvent, NgbSelfControlledTabset} from './tabset-directives';
+
+let nextId = 0;
 
 /**
  * A directive to wrap tab titles that need to contain HTML markup or other directives.
@@ -23,6 +23,14 @@ export class NgbTabTitle {
   constructor(public templateRef: TemplateRef<any>) {}
 }
 
+/**
+ * A directive to wrap content to be displayed in a tab.
+ */
+@Directive({selector: 'ng-template[ngbTabContent]'})
+export class NgbTabContent {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+
 /**
  * A directive representing an individual tab.
  */
@@ -33,7 +41,8 @@ export class NgbTab implements AfterContentChecked {
    *
    * Must be unique for the entire document for proper accessibility support.
    */
-  @Input() id: string;
+  @Input() id = `ngb-tab-${nextId++}`;
+
   /**
    * The tab title.
    *
@@ -62,33 +71,60 @@ export class NgbTab implements AfterContentChecked {
   }
 }
 
+/**
+ * The payload of the change event fired right before the tab change.
+ */
+export interface NgbTabChangeEvent {
+  /**
+   * The id of the currently active tab.
+   */
+  activeId: string;
+
+  /**
+   * The id of the newly selected tab.
+   */
+  nextId: string;
+
+  /**
+   * Calling this function will prevent tab switching.
+   */
+  preventDefault: () => void;
+}
+
 /**
  * A component that makes it easy to create tabbed interface.
  */
 @Component({
   selector: 'ngb-tabset',
   exportAs: 'ngbTabset',
   template: `
-    <ul ngbTabset selfControlled
-      (tabChange)="tabChange.next($event)"
-      [type]="type"
-      [justify]="justify"
-      [orientation]="orientation"
-      [destroyOnHide]="destroyOnHide"
-      [activeId]="activeId"
-      #tabset="ngbTabset"
-    >
-      <li ngbTab [domId]="tab.id" [disabled]="tab.disabled" *ngFor="let tab of tabs">
-        <a ngbTabLink>{{tab.title}}<ng-template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></ng-template></a>
-        <ng-template ngbTabContent><ng-template [ngTemplateOutlet]="tab.contentTpl?.templateRef"></ng-template></ng-template>
+    <ul [class]="'nav nav-' + type + (orientation == 'horizontal'?  ' ' + justifyClass : ' flex-column')" role="tablist">
+      <li class="nav-item" *ngFor="let tab of tabs">
+        <a [id]="tab.id" class="nav-link" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled"
+          href (click)="select(tab.id); $event.preventDefault()" role="tab" [attr.tabindex]="(tab.disabled ? '-1': undefined)"
+          [attr.aria-controls]="(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)"
+          [attr.aria-selected]="tab.id === activeId" [attr.aria-disabled]="tab.disabled">
+          {{tab.title}}<ng-template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></ng-template>
+        </a>
       </li>
     </ul>
-    <div [ngbTabsetOutlet]="tabset"></div>
+    <div class="tab-content">
+      <ng-template ngFor let-tab [ngForOf]="tabs">
+        <div
+          class="tab-pane {{tab.id === activeId ? 'active' : null}}"
+          *ngIf="!destroyOnHide || tab.id === activeId"
+          role="tabpanel"
+          [attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel">
+          <ng-template [ngTemplateOutlet]="tab.contentTpl?.templateRef"></ng-template>
+        </div>
+      </ng-template>
+    </div>
   `
 })
-export class NgbTabset {
+export class NgbTabset implements AfterContentChecked {
+  justifyClass: string;
+
   @ContentChildren(NgbTab) tabs: QueryList<NgbTab>;
-  @ViewChild(NgbSelfControlledTabset, {static: true}) control: NgbSelfControlledTabset;
 
   /**
    * The identifier of the tab that should be opened **initially**.
@@ -105,7 +141,14 @@ export class NgbTabset {
   /**
    * The horizontal alignment of the tabs with flexbox utilities.
    */
-  @Input() justify: 'start' | 'center' | 'end' | 'fill' | 'justified';
+  @Input()
+  set justify(className: 'start' | 'center' | 'end' | 'fill' | 'justified') {
+    if (className === 'fill' || className === 'justified') {
+      this.justifyClass = `nav-${className}`;
+    } else {
+      this.justifyClass = `justify-content-${className}`;
+    }
+  }
 
   /**
    * The orientation of the tabset.
@@ -140,5 +183,28 @@ export class NgbTabset {
    * Any other tab that was previously selected becomes unselected and its associated pane is removed from DOM or
    * hidden depending on the `destroyOnHide` value.
    */
-  select(tabId: string) { this.control.select(tabId); }
+  select(tabId: string) {
+    let selectedTab = this._getTabById(tabId);
+    if (selectedTab && !selectedTab.disabled && this.activeId !== selectedTab.id) {
+      let defaultPrevented = false;
+
+      this.tabChange.emit(
+          {activeId: this.activeId, nextId: selectedTab.id, preventDefault: () => { defaultPrevented = true; }});
+
+      if (!defaultPrevented) {
+        this.activeId = selectedTab.id;
+      }
+    }
+  }
+
+  ngAfterContentChecked() {
+    // auto-correct activeId that might have been set incorrectly as input
+    let activeTab = this._getTabById(this.activeId);
+    this.activeId = activeTab ? activeTab.id : (this.tabs.length ? this.tabs.first.id : null);
+  }
+
+  private _getTabById(id: string): NgbTab {
+    let tabsWithId: NgbTab[] = this.tabs.filter(tab => tab.id === id);
+    return tabsWithId.length ? tabsWithId[0] : null;
+  }
 }