feat(app-bar): add active indicator

Author: garygrossgarten

projects/core/src/lib/app-bar-tab-content/app-bar-tab-content.component.html

@@ -1,3 +1,3 @@
-  <fiv-ripple (fivClick)="emitPage()" class="tab" [ngClass]="{'active': template === currentPage}">
+  <fiv-ripple (fivClick)="emitPage()" class="tab" [ngClass]="{'active': active}">
       <fiv-icon [fivCenter] [name]="icon"></fiv-icon>
     </fiv-ripple>

projects/core/src/lib/app-bar-tab-content/app-bar-tab-content.component.ts

@@ -7,8 +7,8 @@ import { Component, OnInit, Input, TemplateRef, Output, EventEmitter, ContentChi
 })
 export class AppBarTabContentComponent implements OnInit {
 
-  @Input() currentPage: TemplateRef<any>;
   @Input() icon: string;
+  @Input() active = false;
   @Input() template: TemplateRef<any>;
 
   @Output() fivClick = new EventEmitter<TemplateRef<any>>();

projects/core/src/lib/app-bar/app-bar.component.html

@@ -3,14 +3,14 @@
 <div class="appbar" [ngClass]="{'cutout': cutoutVisible, 'left': left, 'right': right}">
   <div class="appbar-rect left">
     <div class="tabs">
-      <fiv-app-bar-tab-content [template]="tab.ref" (fivClick)="tabClick($event)" [icon]="tab.icon" *ngFor="let tab of tabs?.toArray() | slice : 0 : 2"></fiv-app-bar-tab-content>
+      <fiv-app-bar-tab-content [active]="currentPage === tab.ref" [template]="tab.ref" (fivClick)="tabClick($event)" [icon]="tab.icon" *ngFor="let tab of tabs?.toArray() | slice : 0 : 2"></fiv-app-bar-tab-content>
     </div>
   </div>
   <fiv-loading-fab (fivHidden)="onFabHidden()" [icon]="icon" [visible]="_fabVisible" #fab (click)="fabClick()"></fiv-loading-fab>
   <div class="rect"></div>
   <div class="appbar-rect right">
     <div class="tabs">
-      <fiv-app-bar-tab-content [template]="tab.ref" (fivClick)="tabClick($event)" [icon]="tab.icon" *ngFor="let tab of tabs?.toArray() | slice : 2 : 4"></fiv-app-bar-tab-content>
+      <fiv-app-bar-tab-content [active]="currentPage === tab.ref" [template]="tab.ref" (fivClick)="tabClick($event)" [icon]="tab.icon" *ngFor="let tab of tabs?.toArray() | slice : 2 : 4"></fiv-app-bar-tab-content>
     </div>
   </div>
 </div>