fix(tabs): Use [ngClass] to avoid conflicts with [class.x] bindings (#…

…1651)

* fix(tab.component): Use [ngClass] to avoid conflicts with [class.x] bindings

* Added tests, handle undefined customClass

src/spec/tabset.component.spec.ts

@@ -10,6 +10,7 @@ const html = `
     <tab heading="tab0">tab0 content</tab>
     <tab *ngFor="let tab of tabs"
          [disabled]="tab.disabled"
+         [customClass]="tab.customClass"
          [active]="tab.active"
          [removable]="tab.removable"
          (select)="_select($event)"
@@ -19,6 +20,10 @@ const html = `
   </tabset>
 `;
 
+function getTabItems(nativeEl: HTMLElement): NodeListOf<Element> {
+  return nativeEl.querySelectorAll('.nav-item');
+}
+
 function getTabTitles(nativeEl: HTMLElement): NodeListOf<Element> {
   return nativeEl.querySelectorAll('.nav-link');
 }
@@ -28,18 +33,18 @@ function getTabContent(nativeEl: HTMLElement): NodeListOf<Element> {
 }
 
 function expectActiveTabs(nativeEl: HTMLElement, active: boolean[]): void {
-  const tabTitles = getTabTitles(nativeEl);
+  const tabItems = getTabItems(nativeEl);
   const tabContent = getTabContent(nativeEl);
 
-  expect(tabTitles.length).toBe(active.length);
+  expect(tabItems.length).toBe(active.length);
   expect(tabContent.length).toBe(active.length);
 
   for (let i = 0; i < active.length; i++) {
     if (active[i]) {
-      expect(tabTitles[i].classList).toContain('active');
+      expect(tabItems[i].classList).toContain('active');
       expect(tabContent[i].classList).toContain('active');
     } else {
-      expect(tabTitles[i].classList).not.toContain('active');
+      expect(tabItems[i].classList).not.toContain('active');
       expect(tabContent[i].classList).not.toContain('active');
     }
   }
@@ -175,6 +180,31 @@ describe('Component: Tabs', () => {
       heading: 'tab3'
     }));
   });
+
+  it('should set class on a tab item through [customClass]', () => {
+    const tabItems = getTabItems(element);
+
+    expect(tabItems[1].classList).toContain('testCustomClass');
+  });
+
+  it('should prevent interference of [customClass] and state classes', () => {
+    const tabItems = getTabItems(element);
+    const tabTitles = getTabTitles(element);
+
+    expect(tabItems[1].classList).toContain('testCustomClass');
+
+    (tabTitles[1] as HTMLAnchorElement).click();
+    fixture.detectChanges();
+    expect(tabItems[1].classList).toContain('testCustomClass');
+    expectActiveTabs(element, [false, true, false, false]);
+
+    context.tabs[0].customClass = 'otherCustomClass';
+    fixture.detectChanges();
+
+    expect(tabItems[1].classList).not.toContain('testCustomClass');
+    expect(tabItems[1].classList).toContain('otherCustomClass');
+    expectActiveTabs(element, [false, true, false, false]);
+  });
 });
 
 @Component({
@@ -186,7 +216,7 @@ class TestTabsetComponent {
   public isVertical:Boolean = false;
   public isJustified:Boolean = false;
   public tabs:any[] = [
-    {title: 'tab1', content: 'tab1 content'},
+    {title: 'tab1', content: 'tab1 content', customClass:'testCustomClass'},
     {title: 'tab2', content: 'tab2 content', disabled: true},
     {title: 'tab3', content: 'tab3 content', removable: true}
   ];

src/tabs/tabset.component.ts

@@ -8,7 +8,7 @@ import { TabsetConfig } from './tabset.config';
   selector: 'tabset',
   template: `
     <ul class="nav" [ngClass]="classMap" (click)="$event.preventDefault()">
-        <li *ngFor="let tabz of tabs" class="nav-item {{tabz.customClass}}"
+        <li *ngFor="let tabz of tabs" [ngClass]="['nav-item', tabz.customClass || '']"
           [class.active]="tabz.active" [class.disabled]="tabz.disabled">
           <a href="javascript:void(0);" class="nav-link"
             [class.active]="tabz.active" [class.disabled]="tabz.disabled"