From 13fac376888a71f9fd06f9fafb3301137e9b6f11 Mon Sep 17 00:00:00 2001
From: Confusedfish <ben@bmcintyre.co.uk>
Date: Mon, 26 Sep 2016 11:41:43 +0100
Subject: [PATCH] feat(tabs): added custom class option

fixes #766, fixes #842
* chore(package): update typescript to version 2.0.3

https://greenkeeper.io/

* Add customClass property to the Tab directive to make it easy to add class names to the outputted nav-items

* tslint fix

* Clicking on some tabs would sometime result in reloading the application (tested in Chrome). This will probably fix issue #842 which sounds exactly like the scenario this fixes for me.
---
 components/tabs/readme.md           | 1 +
 components/tabs/tab.directive.ts    | 1 +
 components/tabs/tabset.component.ts | 4 ++--
 demo/assets/css/style.css           | 7 +++++++
 demo/components/tabs/tabs-demo.html | 3 ++-
 demo/components/tabs/tabs-demo.ts   | 3 ++-
 package.json                        | 2 +-
 7 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/tabs/readme.md b/components/tabs/readme.md
index 06bfc6456f..4d4181e758 100644
--- a/components/tabs/readme.md
+++ b/components/tabs/readme.md
@@ -58,6 +58,7 @@ export class TabHeadingDirective {}
   - `active` (`?boolean=false`) - if tab is active equals true, or set `true` to activate tab
   - `disabled` (`?boolean=false`) - if `true` tab can not be activated
   - `removable` (`?boolean=false`) - if `true` tab can be removable, additional button will appear
+  - `customClass` (`?string`) - if set, will be added to the tab's class atribute
 
 ### Tab events
   - `select` - fired when `tab` became active, `$event:Tab` equals to selected instance of `Tab` component
diff --git a/components/tabs/tab.directive.ts b/components/tabs/tab.directive.ts
index b20530b21a..5e73c2db06 100644
--- a/components/tabs/tab.directive.ts
+++ b/components/tabs/tab.directive.ts
@@ -11,6 +11,7 @@ export class TabDirective implements OnDestroy {
   @Input() public heading:string;
   @Input() public disabled:boolean;
   @Input() public removable:boolean;
+  @Input() public customClass:string;
 
   /** tab active state toggle */
   @HostBinding('class.active')
diff --git a/components/tabs/tabset.component.ts b/components/tabs/tabset.component.ts
index e79301a307..36e228260e 100644
--- a/components/tabs/tabset.component.ts
+++ b/components/tabs/tabset.component.ts
@@ -7,9 +7,9 @@ import { TabDirective } from './tab.directive';
   selector: 'tabset',
   template: `
     <ul class="nav" [ngClass]="classMap" (click)="$event.preventDefault()">
-        <li *ngFor="let tabz of tabs" class="nav-item"
+        <li *ngFor="let tabz of tabs" class="nav-item {{tabz.customClass}}"
           [class.active]="tabz.active" [class.disabled]="tabz.disabled">
-          <a href class="nav-link"
+          <a href="javascript:void(0);" class="nav-link"
             [class.active]="tabz.active" [class.disabled]="tabz.disabled"
             (click)="tabz.active = true">
             <span [ngTransclude]="tabz.headingRef">{{tabz.heading}}</span>
diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
index f815679acb..e2bbd8dd0a 100644
--- a/demo/assets/css/style.css
+++ b/demo/assets/css/style.css
@@ -607,4 +607,11 @@ pre {
 /* Hide arrow */
 .tooltip.customClass .tooltip-arrow {
   display: none;
+}
+
+.nav-item.customClass {
+	float: right;
+}
+.nav-item.customClass a {
+	background-color: #50ff50;
 }
\ No newline at end of file
diff --git a/demo/components/tabs/tabs-demo.html b/demo/components/tabs/tabs-demo.html
index de79c0c3d4..7ab0568f81 100644
--- a/demo/components/tabs/tabs-demo.html
+++ b/demo/components/tabs/tabs-demo.html
@@ -17,7 +17,8 @@
          (deselect)="tabz.active = false"
          [disabled]="tabz.disabled"
          [removable]="tabz.removable"
-         (removed)="removeTabHandler(tabz)">
+         (removed)="removeTabHandler(tabz)"
+         [customClass]="tabz.customClass">
       {{tabz?.content}}
     </tab>
     <tab (select)="alertMe()">
diff --git a/demo/components/tabs/tabs-demo.ts b/demo/components/tabs/tabs-demo.ts
index 42c0fe077c..33e4581936 100644
--- a/demo/components/tabs/tabs-demo.ts
+++ b/demo/components/tabs/tabs-demo.ts
@@ -12,7 +12,8 @@ export class TabsDemoComponent {
   public tabs:Array<any> = [
     {title: 'Dynamic Title 1', content: 'Dynamic content 1'},
     {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true},
-    {title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true}
+    {title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true},
+    {title: 'Dynamic Title 4', content: 'Dynamic content 4', customClass: 'customClass'}
   ];
 
   public alertMe():void {
diff --git a/package.json b/package.json
index 4f13d7590a..5d52a97f45 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "systemjs-builder": "0.15.31",
     "tslint-config-valorsoft": "1.1.1",
     "typedoc": "0.4.5",
-    "typescript": "2.0.2",
+    "typescript": "2.0.3",
     "zone.js": "0.6.23"
   }
 }