feat: adding badge to tab header (#800)

* feat: adding badge to tab header

Author: itssharmasandeep

projects/components/src/tabs/content/tab-group.component.scss

@@ -75,9 +75,25 @@
 .tab-label {
   flex: 1;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
+  flex-direction: row;
+  align-items: center;
+
+  .tab-badge {
+    @include font-label($gray-5);
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    margin-left: 6px;
+    padding: 0 6px;
+    height: 16px;
+    background-color: $gray-2;
+    border-radius: 8px;
+
+    &.active {
+      background-color: $gray-9;
+      color: white;
+    }
+  }
 }
 
 .ink-bar {

projects/components/src/tabs/content/tab-group.component.ts

@@ -10,7 +10,12 @@ import { TabComponent } from './tab/tab.component';
       <mat-tab-group animationDuration="0ms" disableRipple (selectedTabChange)="this.activeTabIndex = $event.index">
         <mat-tab *ngFor="let tab of this.tabs; index as i">
           <ng-template mat-tab-label>
-            <div class="tab-label">{{ tab.label }}</div>
+            <div class="tab-label">
+              {{ tab.label }}
+              <div *ngIf="tab.badge" [ngClass]="{ active: activeTabIndex === i }" class="tab-badge">
+                {{ tab.badge }}
+              </div>
+            </div>
             <div class="ink-bar" [ngClass]="{ active: activeTabIndex === i }"></div>
           </ng-template>
           <ng-template matTabContent>

projects/components/src/tabs/content/tab/tab.component.ts

@@ -10,4 +10,7 @@ import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '../../../content/content
 export class TabComponent extends ContentHolder {
   @Input()
   public label!: string;
+
+  @Input()
+  public badge?: string;
 }