feat(nav): initial nav implementation

src/index.ts

@@ -8,6 +8,7 @@ import {NgbCollapseModule} from './collapse/collapse.module';
 import {NgbDatepickerModule} from './datepicker/datepicker.module';
 import {NgbDropdownModule} from './dropdown/dropdown.module';
 import {NgbModalModule} from './modal/modal.module';
+import {NgbNavModule} from './nav/nav.module';
 import {NgbPaginationModule} from './pagination/pagination.module';
 import {NgbPopoverModule} from './popover/popover.module';
 import {NgbProgressbarModule} from './progressbar/progressbar.module';
@@ -88,6 +89,16 @@ export {
   NgbModalOptions,
   NgbModalRef
 } from './modal/modal.module';
+export {
+  NgbNavChangeEvent,
+  NgbNavConfig,
+  NgbNav,
+  NgbNavContent,
+  NgbNavContentContext,
+  NgbNavItem,
+  NgbNavLink,
+  NgbNavOutlet
+} from './nav/nav.module';
 export {
   NgbPagination,
   NgbPaginationConfig,
@@ -133,8 +144,8 @@ export {Placement} from './util/positioning';
 
 const NGB_MODULES = [
   NgbAccordionModule, NgbAlertModule, NgbButtonsModule, NgbCarouselModule, NgbCollapseModule, NgbDatepickerModule,
-  NgbDropdownModule, NgbModalModule, NgbPaginationModule, NgbPopoverModule, NgbProgressbarModule, NgbRatingModule,
-  NgbTabsetModule, NgbTimepickerModule, NgbToastModule, NgbTooltipModule, NgbTypeaheadModule
+  NgbDropdownModule, NgbModalModule, NgbNavModule, NgbPaginationModule, NgbPopoverModule, NgbProgressbarModule,
+  NgbRatingModule, NgbTabsetModule, NgbTimepickerModule, NgbToastModule, NgbTooltipModule, NgbTypeaheadModule
 ];
 
 @NgModule({imports: NGB_MODULES, exports: NGB_MODULES})

src/nav/nav-config.spec.ts

@@ -0,0 +1,11 @@
+import {NgbNavConfig} from './nav-config';
+
+describe('ngb-nav-config', () => {
+  it('should have sensible default values', () => {
+    const config = new NgbNavConfig();
+
+    expect(config.destroyOnHide).toBe(true);
+    expect(config.orientation).toBe('horizontal');
+    expect(config.roles).toBe('tablist');
+  });
+});

src/nav/nav-config.ts

@@ -0,0 +1,14 @@
+import {Injectable} from '@angular/core';
+
+/**
+ * A configuration service for the [`NgbNav`](#/components/nav/api#NgbNav) component.
+ *
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the navs used in the application.
+ */
+@Injectable({providedIn: 'root'})
+export class NgbNavConfig {
+  destroyOnHide = true;
+  orientation: 'horizontal' | 'vertical' = 'horizontal';
+  roles: 'tablist' | false = 'tablist';
+}

src/nav/nav-outlet.ts

@@ -0,0 +1,34 @@
+import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {NgbNav} from './nav';
+
+/**
+ * The outlet where currently active nav content will be displayed.
+ */
+@Component({
+  selector: '[ngbNavOutlet]',
+  host: {'[class.tab-content]': 'true'},
+  encapsulation: ViewEncapsulation.None,
+  template: `
+      <ng-template ngFor let-item [ngForOf]="nav.items">
+          <div class="tab-pane"
+               *ngIf="item.isPanelInDom()"
+               [id]="item.panelDomId"
+               [class.active]="item.active"
+               [attr.role]="paneRole ? paneRole : nav.roles ? 'tabpanel' : undefined"
+               [attr.aria-labelledby]="item.domId">
+              <ng-template [ngTemplateOutlet]="item.contentTpl?.templateRef" [ngTemplateOutletContext]="{$implicit: item.active}"></ng-template>
+          </div>
+      </ng-template>
+  `
+})
+export class NgbNavOutlet {
+  /**
+   * A role to set on the nav pane
+   */
+  @Input() paneRole;
+
+  /**
+   * Reference to the `NgbNav`
+   */
+  @Input('ngbNavOutlet') nav: NgbNav;
+}

src/nav/nav.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {NgbNav, NgbNavContent, NgbNavItem, NgbNavLink} from './nav';
+import {NgbNavOutlet} from './nav-outlet';
+
+export {NgbNav, NgbNavContent, NgbNavContentContext, NgbNavItem, NgbNavLink, NgbNavChangeEvent} from './nav';
+export {NgbNavOutlet} from './nav-outlet';
+export {NgbNavConfig} from './nav-config';
+
+const NGB_NAV_DIRECTIVES = [NgbNavContent, NgbNav, NgbNavItem, NgbNavLink, NgbNavOutlet];
+
+@NgModule({declarations: NGB_NAV_DIRECTIVES, exports: NGB_NAV_DIRECTIVES, imports: [CommonModule]})
+export class NgbNavModule {
+}