Tabs Component

#### Tabs:

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

Base specifications: bootstrap 3 or bootstrap 4.

#### Default Tabset:

Select a tab by setting active binding to true:

Select new tab type:

#### Static content

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.

Base specifications: bootstrap 3 or bootstrap 4

#### Alert content

I have got an HTML heading, and a select callback. Pretty cool!

#### {{tabz?.content}}

#### Default Tabset Example Code:

                 // Tabset template
                 <tabset>
                   <tab heading="Static title">
                     <h4>Static content</h4>
                     <div class="common-tab-content">
                       <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.</p>
                       <p>Base specifications: bootstrap 3 or bootstrap 4</p>
                     </div>
                   </tab>
                   <tab (select)="alertTab()">
                     <template tabHeading><i class="glyphicon glyphicon-bell text-danger"></i> Alert!</template>
                     <div class="common-tab-content">
                       <h4>Alert content</h4>
                       <div>I have got an HTML heading, and a select callback. Pretty cool!</div>
                     </div>
                   </tab>
                   <tab *ngFor="let tabz of tabs" [active]="tabz.active" (select)="tabz.active = true" (deselect)="tabz.active = false" [disabled]="tabz.disabled" [removable]="tabz.removable" (removed)="removeTabHandler(tabz)">
                     <template tabHeading>
                       <i *ngIf="tabz.type=='warning'" class="glyphicon glyphicon-bell text-warning"></i>
                       <i *ngIf="tabz.type=='error'" class="glyphicon glyphicon-remove-sign text-danger"></i>
                       <i *ngIf="tabz.type=='success'" class="glyphicon glyphicon-ok-sign text-success"></i>
                       <i *ngIf="tabz.type=='info'" class="glyphicon glyphicon-info-sign text-info"></i>
                       { { tabz?.title } }
                     </template>
                     <div class="common-tab-content">
                       <h4>{ { tabz?.content } }</h4>
                     </div>
                   </tab>
                 </tabset>

#### Vertical Tabset:

Vertical content 1
Vertical content 2

#### Vertical Tabset Example Code:

                 // Vertical Tabset template
                 <tabset [vertical]="true" type="pills">
                   <tab heading="Vertical 1">
                     <div class="common-verticalTab-content">Vertical content 1</div>
                   </tab>
                   <tab heading="Vertical 2">
                     <div class="common-verticalTab-content">Vertical content 2</div>
                   </tab>
                 </tabset>

#### Justified Tabset:

Justified Tabset is base on bootstrap 3, because Bootstrap 4 doesn't have justified classes.

Justified content
Short Labeled Justified content
Long Labeled Justified content

#### Justified Tabset Example Code:

                 // Justified Tabset template
                 <tabset [justified]="true">
                   <tab heading="Justified">
                     <div class="common-tab-content">Justified content</div>
                   </tab>
                   <tab heading="SJ">
                     <div class="common-tab-content">Short Labeled Justified content</div>
                   </tab>
                   <tab heading="Long Justified">
                     <div class="common-tab-content">Long Labeled Justified content</div>
                   </tab>
                 </tabset>

#### Tabset properties:

- `vertical` (`?boolean=false`) - if `true` tabs will be placed vertically
- `justified` (`?boolean=false`) - if `true` tabs fill the container and have a consistent width
- `type` (`?string='tabs'`) - navigation context class: 'tabs' or 'pills'

#### Tab properties:

- `heading` (`string`) - tab header text
- `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

#### Tab events:

- `select` - fired when `tab` became active, `$event:Tab` equals to selected instance of `Tab` component
- `deselect` - fired when `tab` became inactive, `$event:Tab` equals to deselected instance of `Tab` component
- `removed` - fired before `tab` will be removed

#### Tab heading:

Should be used to mark `<template>` element as a template for tab heading