[EC 456] Component Library Content Switching Tabs (#3452)

* [EC-456] Rename bitTabItem -> bitTab

* [EC-456] Use templateRefs or text for tab label content

* [EC-456] Add bit-tab-nav-bar component

* [EC-456] Finish content tab switching and nav tabs

* [EC-456] Undo accidental eslintrc.json change

* [EC-456] Fix directive/component selector naming convention

* [EC-456] Cleanup unnecessary InjectionTokens and simplify template label property

* [EC-456] Cleanup one more unnecessary InjectionToken

* [EC-456] Cleanup tab styles to better match Figma. Add internal tab header component for styling header background according to Figma.

* [EC-456] Add sub-folders for nav, content, and shared tab components/directives

* [EC-456] Code/style cleanup

* [EC-456] Remove underscore from protected members

* [EC-456] Cleanup tab stories and forgotten any type.

* [EC-456] Fix dark theme story tab content text color

* [EC-456] Add missing padding to tab header

* [EC-456] Add tab content padding to align with tab headers

* [EC-456] Move bottom tab border to header to span entire content area

* [EC-456] Force text-main tab label color

* [EC-456] Undo text-main change

libs/components/src/tabs/tab-nav-bar/tab-link.component.ts

@@ -0,0 +1,51 @@
+import { FocusableOption } from "@angular/cdk/a11y";
+import { AfterViewInit, Component, HostListener, Input, OnDestroy, ViewChild } from "@angular/core";
+import { RouterLinkActive } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
+
+import { TabListItemDirective } from "../shared/tab-list-item.directive";
+
+import { TabNavBarComponent } from "./tab-nav-bar.component";
+
+@Component({
+  selector: "bit-tab-link",
+  templateUrl: "tab-link.component.html",
+})
+export class TabLinkComponent implements FocusableOption, AfterViewInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+
+  @ViewChild(TabListItemDirective) tabItem: TabListItemDirective;
+  @ViewChild("rla") routerLinkActive: RouterLinkActive;
+
+  @Input() route: string;
+  @Input() disabled = false;
+
+  @HostListener("keydown", ["$event"]) onKeyDown(event: KeyboardEvent) {
+    if (event.code === "Space") {
+      this.tabItem.click();
+    }
+  }
+
+  get active() {
+    return this.routerLinkActive?.isActive ?? false;
+  }
+
+  constructor(private _tabNavBar: TabNavBarComponent) {}
+
+  focus(): void {
+    this.tabItem.focus();
+  }
+
+  ngAfterViewInit() {
+    // The active state of tab links are tracked via the routerLinkActive directive
+    // We need to watch for changes to tell the parent nav group when the tab is active
+    this.routerLinkActive.isActiveChange
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((_) => this._tabNavBar.updateActiveLink());
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}