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