[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-nav-bar.component.ts

@@ -0,0 +1,43 @@
+import { FocusKeyManager } from "@angular/cdk/a11y";
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  forwardRef,
+  Input,
+  QueryList,
+} from "@angular/core";
+
+import { TabLinkComponent } from "./tab-link.component";
+
+@Component({
+  selector: "bit-tab-nav-bar",
+  templateUrl: "tab-nav-bar.component.html",
+})
+export class TabNavBarComponent implements AfterContentInit {
+  @ContentChildren(forwardRef(() => TabLinkComponent)) tabLabels: QueryList<TabLinkComponent>;
+  @Input() label = "";
+
+  /**
+   * Focus key manager for keeping tab controls accessible.
+   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role#keyboard_interactions
+   */
+  keyManager: FocusKeyManager<TabLinkComponent>;
+
+  ngAfterContentInit(): void {
+    this.keyManager = new FocusKeyManager(this.tabLabels)
+      .withHorizontalOrientation("ltr")
+      .withWrap()
+      .withHomeAndEnd();
+  }
+
+  updateActiveLink() {
+    // Keep the keyManager in sync with active tabs
+    const items = this.tabLabels.toArray();
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].active) {
+        this.keyManager.updateActiveItem(i);
+      }
+    }
+  }
+}