demo(nav): add demos for navs and update demo application

demo/src/app/app.module.ts

@@ -12,6 +12,7 @@ import {NgbdCollapseModule} from './components/collapse/collapse.module';
 import {NgbdDatepickerModule} from './components/datepicker/datepicker.module';
 import {NgbdDropdownModule} from './components/dropdown/dropdown.module';
 import {NgbdModalModule} from './components/modal/modal.module';
+import {NgbdNavModule} from './components/nav/nav.module';
 import {NgbdPaginationModule} from './components/pagination/pagination.module';
 import {NgbdPopoverModule} from './components/popover/popover.module';
 import {NgbdProgressbarModule} from './components/progressbar/progressbar.module';
@@ -37,6 +38,7 @@ const DEMOS = [
   NgbdDatepickerModule,
   NgbdDropdownModule,
   NgbdModalModule,
+  NgbdNavModule,
   NgbdPaginationModule,
   NgbdPopoverModule,
   NgbdProgressbarModule,

demo/src/app/app.routing.ts

@@ -9,6 +9,7 @@ import {ROUTES as COLLAPSE_ROUTES} from './components/collapse/collapse.module';
 import {ROUTES as DATEPICKER_ROUTES} from './components/datepicker/datepicker.module';
 import {ROUTES as DROPDOWN_ROUTES} from './components/dropdown/dropdown.module';
 import {ROUTES as MODAL_ROUTES} from './components/modal/modal.module';
+import {ROUTES as NAV_ROUTES} from './components/nav/nav.module';
 import {ROUTES as PAGINATION_ROUTES} from './components/pagination/pagination.module';
 import {ROUTES as POPOVER_ROUTES} from './components/popover/popover.module';
 import {ROUTES as PROGRESSBAR_ROUTES} from './components/progressbar/progressbar.module';
@@ -37,6 +38,7 @@ const routes: Routes = [
   { path: 'components/datepicker', children: DATEPICKER_ROUTES },
   { path: 'components/dropdown', children: DROPDOWN_ROUTES },
   { path: 'components/modal', children: MODAL_ROUTES },
+  { path: 'components/nav', children: NAV_ROUTES },
   { path: 'components/pagination', children: PAGINATION_ROUTES },
   { path: 'components/popover', children: POPOVER_ROUTES },
   { path: 'components/progressbar', children: PROGRESSBAR_ROUTES },

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

@@ -0,0 +1,38 @@
+<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
+  <li [ngbNavItem]="1">
+    <a ngbNavLink>One</a>
+    <ng-template ngbNavContent>
+      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
+        master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
+        keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
+        salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+    </ng-template>
+  </li>
+  <li [ngbNavItem]="2">
+    <a ngbNavLink>Two</a>
+    <ng-template ngbNavContent>
+      <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
+        farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
+        ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar
+        helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson
+        8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester
+        stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
+    </ng-template>
+  </li>
+  <li [ngbNavItem]="3">
+    <a ngbNavLink>Three</a>
+    <ng-template ngbNavContent>
+      <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
+        Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
+        Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
+        egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec
+        tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget
+        neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>
+
+<pre>Active: {{ active }}</pre>

demo/src/app/components/nav/demos/basic/nav-basic.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { NgbdNavBasic } from './nav-basic';
+
+@NgModule({
+  imports: [BrowserModule, NgbModule],
+  declarations: [NgbdNavBasic],
+  exports: [NgbdNavBasic],
+  bootstrap: [NgbdNavBasic]
+})
+export class NgbdNavBasicModule {
+}

demo/src/app/components/nav/demos/basic/nav-basic.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngbd-nav-basic',
+  templateUrl: './nav-basic.html'
+})
+export class NgbdNavBasic {
+  active = 1;
+}

demo/src/app/components/nav/demos/config/nav-config.html

@@ -0,0 +1,16 @@
+<ul ngbNav #nav="ngbNav" class="nav-tabs">
+  <li ngbNavItem>
+    <a ngbNavLink>One</a>
+    <ng-template ngbNavContent>
+      <p>These navs will always stay in DOM and have no roles</p>
+    </ng-template>
+  </li>
+  <li ngbNavItem>
+    <a ngbNavLink>Two</a>
+    <ng-template ngbNavContent>
+      <p>Because default values have been customized in the config</p>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>

demo/src/app/components/nav/demos/config/nav-config.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { NgbdNavConfig } from './nav-config';
+
+@NgModule({
+  imports: [BrowserModule, NgbModule],
+  declarations: [NgbdNavConfig],
+  exports: [NgbdNavConfig],
+  bootstrap: [NgbdNavConfig]
+})
+export class NgbdNavConfigModule {}

demo/src/app/components/nav/demos/config/nav-config.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {NgbNavConfig} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngbd-nav-config',
+  templateUrl: './nav-config.html',
+  providers: [NgbNavConfig] // add NgbNavConfig to the component providers
+})
+export class NgbdNavConfig {
+  constructor(config: NgbNavConfig) {
+    // customize default values of navs used by this component tree
+    config.destroyOnHide = false;
+    config.roles = false;
+  }
+}

demo/src/app/components/nav/demos/custom-style/nav-custom-style.html

@@ -0,0 +1,46 @@
+<ul ngbNav #nav="ngbNav" [activeId]="2" class="nav-tabs justify-content-center">
+  <li [ngbNavItem]="1">
+    <a ngbNavLink>Simple</a>
+    <ng-template ngbNavContent>
+      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
+        master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
+        keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
+        salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+    </ng-template>
+  </li>
+  <li [ngbNavItem]="2">
+    <a ngbNavLink><b>Fancy</b> title</a>
+    <ng-template ngbNavContent>
+      <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
+        farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
+        ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar
+        helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson
+        8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester
+        stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
+    </ng-template>
+  </li>
+  <li ngbDropdown class="nav-item">
+    <a href (click)="false" class="nav-link" ngbDropdownToggle>Dropdown</a>
+    <div ngbDropdownMenu>
+      <button ngbDropdownItem>Action</button>
+      <button ngbDropdownItem>Another action</button>
+      <button ngbDropdownItem>Something else here</button>
+      <div class="dropdown-divider"></div>
+      <button ngbDropdownItem>Separated link</button>
+    </div>
+  </li>
+  <li ngbNavItem [disabled]="true" class="ml-auto">
+    <a ngbNavLink>Disabled</a>
+    <ng-template ngbNavContent>
+      <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
+        Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
+        Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
+        egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec
+        tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget
+        neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>

demo/src/app/components/nav/demos/custom-style/nav-custom-style.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { NgbdNavCustomStyle } from './nav-custom-style';
+
+@NgModule({
+  imports: [BrowserModule, NgbModule],
+  declarations: [NgbdNavCustomStyle],
+  exports: [NgbdNavCustomStyle],
+  bootstrap: [NgbdNavCustomStyle]
+})
+export class NgbdNavCustomStyleModule {}

demo/src/app/components/nav/demos/custom-style/nav-custom-style.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngbd-nav-custom-style',
+  templateUrl: './nav-custom-style.html'
+})
+export class NgbdNavCustomStyle { }

demo/src/app/components/nav/demos/dynamic/nav-dynamic.html

@@ -0,0 +1,18 @@
+<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
+  <li *ngFor="let id of tabs" [ngbNavItem]="id">
+    <a ngbNavLink>
+      Tab {{ id }}
+      <span class="close position-relative pl-2 font-weight-light" (click)="close($event, id)">×</span>
+    </a>
+    <ng-template ngbNavContent>
+      <p>Tab {{ id }} content</p>
+    </ng-template>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href (click)="add($event)">...</a>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>
+
+<pre>Active: {{ active }}</pre>

demo/src/app/components/nav/demos/dynamic/nav-dynamic.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { NgbdNavDynamic } from './nav-dynamic';
+
+@NgModule({
+  imports: [BrowserModule, NgbModule],
+  declarations: [NgbdNavDynamic],
+  exports: [NgbdNavDynamic],
+  bootstrap: [NgbdNavDynamic]
+})
+export class NgbdNavDynamicModule {
+}

demo/src/app/components/nav/demos/dynamic/nav-dynamic.ts

@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngbd-nav-dynamic',
+  templateUrl: './nav-dynamic.html',
+  styles: [`
+    .close {
+      font-size: 1.4rem;
+      opacity: 0.1;
+      transition: opacity 0.3s;
+    }
+    .nav-link:hover > .close {
+      opacity: 0.8;
+    }
+  `]
+})
+export class NgbdNavDynamic {
+  tabs = [1, 2, 3, 4, 5];
+  counter = this.tabs.length + 1;
+  active;
+
+  close(event: MouseEvent, toRemove: number) {
+    this.tabs = this.tabs.filter(id => id !== toRemove);
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+
+  add(event: MouseEvent) {
+    this.tabs.push(this.counter++);
+    event.preventDefault();
+  }
+}

demo/src/app/components/nav/demos/keep-content/nav-keep-content.html

@@ -0,0 +1,50 @@
+<ul ngbNav #nav="ngbNav" [(activeId)]="active" [destroyOnHide]="false" class="nav-tabs">
+  <li [ngbNavItem]="1" [destroyOnHide]="true">
+    <a ngbNavLink>One</a>
+    <ng-template ngbNavContent>
+      <ngb-alert [dismissible]="false" class="d-block mt-3" type="danger">
+        This tab content DOM will de destroyed when not active
+      </ngb-alert>
+
+      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
+        master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
+        keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
+        salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+    </ng-template>
+  </li>
+  <li [ngbNavItem]="2">
+    <a ngbNavLink>Two</a>
+    <ng-template ngbNavContent>
+      <ngb-alert [dismissible]="false" class="d-block mt-3" type="success">
+        This tab content DOM will always stay in DOM
+      </ngb-alert>
+
+      <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
+        farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
+        ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar
+        helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson
+        8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester
+        stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
+    </ng-template>
+  </li>
+  <li [ngbNavItem]="3">
+    <a ngbNavLink>Three</a>
+    <ng-template ngbNavContent let-active>
+      <ngb-alert *ngIf="active" [dismissible]="false" class="d-block mt-3">
+        While tab content DOM is never destroyed, this alert exists only when current tab is active
+      </ngb-alert>
+
+      <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
+        Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
+        Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
+        egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec
+        tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget
+        neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
+    </ng-template>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>
+
+<pre>Active: {{ active }}</pre>

demo/src/app/components/nav/demos/keep-content/nav-keep-content.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { NgbdNavKeep } from './nav-keep-content';
+
+@NgModule({
+  imports: [BrowserModule, NgbModule],
+  declarations: [NgbdNavKeep],
+  exports: [NgbdNavKeep],
+  bootstrap: [NgbdNavKeep]
+})
+export class NgbdNavKeepModule {
+}

demo/src/app/components/nav/demos/keep-content/nav-keep-content.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngbd-nav-keep',
+  templateUrl: './nav-keep-content.html'
+})
+export class NgbdNavKeep {
+  active = 1;
+}

demo/src/app/components/nav/demos/markup/nav-markup.html

@@ -0,0 +1,38 @@
+<p>You can use alternative markup without <code>ul li</code> elements</p>
+
+<nav ngbNav #nav="ngbNav" class="nav-tabs">
+  <ng-container ngbNavItem>
+    <a ngbNavLink>One</a>
+    <ng-template ngbNavContent>
+      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
+        master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro
+        keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat
+        salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+    </ng-template>
+  </ng-container>
+  <ng-container ngbNavItem>
+    <a ngbNavLink>Two</a>
+    <ng-template ngbNavContent>
+      <p>Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko
+        farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts
+        ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar
+        helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson
+        8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester
+        stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
+    </ng-template>
+  </ng-container>
+  <ng-container ngbNavItem>
+    <a ngbNavLink>Three</a>
+    <ng-template ngbNavContent>
+      <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
+        Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
+        Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
+        egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec
+        tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget
+        neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
+    </ng-template>
+  </ng-container>
+</nav>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>