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

@@ -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

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')

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>

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;
 }

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()">

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 {

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"
   }
 }