feat(tabs): added config

Author: musienkoyuriy

src/spec/tabset.component.spec.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TabsetConfig } from '../tabs/tabset.config';
 
 import { TabsModule } from '../tabs/tabs.module';
 
@@ -18,15 +19,15 @@ const html = `
   </tabset>
 `;
 
-function getTabTitles(nativeEl:HTMLElement):NodeListOf<Element> {
+function getTabTitles(nativeEl: HTMLElement): NodeListOf<Element> {
   return nativeEl.querySelectorAll('.nav-link');
 }
 
-function getTabContent(nativeEl:HTMLElement):NodeListOf<Element> {
+function getTabContent(nativeEl: HTMLElement): NodeListOf<Element> {
   return nativeEl.querySelectorAll('.tab-content .tab-pane');
 }
 
-function expectActiveTabs(nativeEl:HTMLElement, active:boolean[]):void {
+function expectActiveTabs(nativeEl: HTMLElement, active: boolean[]): void {
   const tabTitles = getTabTitles(nativeEl);
   const tabContent = getTabContent(nativeEl);
 
@@ -67,7 +68,7 @@ describe('Component: Tabs', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestTabsetComponent],
-      imports: [TabsModule]
+      imports: [TabsModule.forRoot()]
     });
     TestBed.overrideComponent(TestTabsetComponent, {set: {template: html}});
     fixture = TestBed.createComponent(TestTabsetComponent);
@@ -190,15 +191,19 @@ class TestTabsetComponent {
     {title: 'tab3', content: 'tab3 content', removable: true}
   ];
 
-  public _select(e:TabsModule):TabsModule {
+  public constructor(config: TabsetConfig) {
+    Object.assign(this, config);
+  }
+
+  public _select(e: TabsModule): TabsModule {
     return e;
   }
 
-  public _deselect(e:TabsModule):TabsModule {
+  public _deselect(e: TabsModule): TabsModule {
     return e;
   }
 
-  public _removed(e:TabsModule):TabsModule {
+  public _removed(e: TabsModule): TabsModule {
     return e;
   }
 }

src/tabs/index.ts

@@ -3,3 +3,4 @@ export { TabsetComponent } from './tabset.component';
 export { TabDirective } from './tab.directive';
 export { TabsModule } from './tabs.module';
 export { NgTranscludeDirective } from './ng-transclude.directive';
+export { TabsetConfig } from './tabset.config';

src/tabs/tabs.module.ts

@@ -5,6 +5,7 @@ import { NgTranscludeDirective } from './ng-transclude.directive';
 import { TabHeadingDirective } from './tab-heading.directive';
 import { TabDirective } from './tab.directive';
 import { TabsetComponent } from './tabset.component';
+import { TabsetConfig } from './tabset.config';
 
 @NgModule({
   imports: [CommonModule],
@@ -15,7 +16,7 @@ export class TabsModule {
   public static forRoot(): ModuleWithProviders {
     return {
       ngModule: TabsModule,
-      providers: []
+      providers: [TabsetConfig]
     };
   }
 }

src/tabs/tabset.component.ts

@@ -1,6 +1,7 @@
-import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input, OnDestroy } from '@angular/core';
 
 import { TabDirective } from './tab.directive';
+import { TabsetConfig } from './tabset.config';
 // todo: add active event to tab
 // todo: fix? mixing static and dynamic tabs position tabs in order of creation
 @Component({
@@ -24,7 +25,7 @@ import { TabDirective } from './tab.directive';
     </div>
   `
 })
-export class TabsetComponent implements OnInit, OnDestroy {
+export class TabsetComponent implements OnDestroy {
   @Input()
   public get vertical():boolean {
     return this._vertical;
@@ -62,8 +63,8 @@ export class TabsetComponent implements OnInit, OnDestroy {
   protected _justified:boolean;
   protected _type:string;
 
-  public ngOnInit():void {
-    this.type = this.type !== 'undefined' ? this.type : 'tabs';
+  public constructor(config: TabsetConfig) {
+    Object.assign(this, config);
   }
 
   public ngOnDestroy():void {
@@ -127,7 +128,7 @@ export class TabsetComponent implements OnInit, OnDestroy {
     this.classMap = {
       'nav-stacked': this.vertical,
       'nav-justified': this.justified,
-      ['nav-' + (this.type || 'tabs')]: true
+      [`nav-${this.type}`]: true
     };
   }
 }

src/tabs/tabset.config.ts

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TabsetConfig {
+  public type: string = 'tabs';
+}