[CL-135] Migrate component library to standalone components (#12389)

* Migrate component library to standalone components

* Fix tests

libs/components/src/navigation/nav-divider.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 
 import { SideNavService } from "./side-nav.service";
@@ -5,6 +6,8 @@ import { SideNavService } from "./side-nav.service";
 @Component({
   selector: "bit-nav-divider",
   templateUrl: "./nav-divider.component.html",
+  standalone: true,
+  imports: [CommonModule],
 })
 export class NavDividerComponent {
   constructor(protected sideNavService: SideNavService) {}

libs/components/src/navigation/nav-group.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from "@angular/common";
 import {
   AfterContentInit,
   booleanAttribute,
@@ -11,13 +12,22 @@ import {
   SkipSelf,
 } from "@angular/core";
 
+import { IconButtonModule } from "../icon-button";
+import { I18nPipe } from "../shared/i18n.pipe";
+
 import { NavBaseComponent } from "./nav-base.component";
+import { NavGroupAbstraction, NavItemComponent } from "./nav-item.component";
 import { SideNavService } from "./side-nav.service";
 
 @Component({
   selector: "bit-nav-group",
   templateUrl: "./nav-group.component.html",
-  providers: [{ provide: NavBaseComponent, useExisting: NavGroupComponent }],
+  providers: [
+    { provide: NavBaseComponent, useExisting: NavGroupComponent },
+    { provide: NavGroupAbstraction, useExisting: NavGroupComponent },
+  ],
+  standalone: true,
+  imports: [CommonModule, NavItemComponent, IconButtonModule, I18nPipe],
 })
 export class NavGroupComponent extends NavBaseComponent implements AfterContentInit {
   @ContentChildren(NavBaseComponent, {

libs/components/src/navigation/nav-item.component.ts

@@ -1,14 +1,24 @@
+import { CommonModule } from "@angular/common";
 import { Component, HostListener, Input, Optional } from "@angular/core";
+import { RouterModule } from "@angular/router";
 import { BehaviorSubject, map } from "rxjs";
 
+import { IconButtonModule } from "../icon-button";
+
 import { NavBaseComponent } from "./nav-base.component";
-import { NavGroupComponent } from "./nav-group.component";
 import { SideNavService } from "./side-nav.service";
 
+// Resolves a circular dependency between `NavItemComponent` and `NavItemGroup` when using standalone components.
+export abstract class NavGroupAbstraction {
+  abstract setOpen(open: boolean): void;
+}
+
 @Component({
   selector: "bit-nav-item",
   templateUrl: "./nav-item.component.html",
   providers: [{ provide: NavBaseComponent, useExisting: NavItemComponent }],
+  standalone: true,
+  imports: [CommonModule, IconButtonModule, RouterModule],
 })
 export class NavItemComponent extends NavBaseComponent {
   /** Forces active styles to be shown, regardless of the `routerLinkActiveOptions` */
@@ -52,7 +62,7 @@ export class NavItemComponent extends NavBaseComponent {
 
   constructor(
     protected sideNavService: SideNavService,
-    @Optional() private parentNavGroup: NavGroupComponent,
+    @Optional() private parentNavGroup: NavGroupAbstraction,
   ) {
     super();
   }

libs/components/src/navigation/nav-logo.component.ts

@@ -1,14 +1,20 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgIf } from "@angular/common";
 import { Component, Input } from "@angular/core";
+import { RouterLinkActive, RouterLink } from "@angular/router";
 
 import { Icon } from "../icon";
+import { BitIconComponent } from "../icon/icon.component";
 
+import { NavItemComponent } from "./nav-item.component";
 import { SideNavService } from "./side-nav.service";
 
 @Component({
   selector: "bit-nav-logo",
   templateUrl: "./nav-logo.component.html",
+  standalone: true,
+  imports: [NgIf, RouterLinkActive, RouterLink, BitIconComponent, NavItemComponent],
 })
 export class NavLogoComponent {
   /** Icon that is displayed when the side nav is closed */

libs/components/src/navigation/navigation.module.ts

@@ -1,13 +1,4 @@
-import { A11yModule } from "@angular/cdk/a11y";
-import { OverlayModule } from "@angular/cdk/overlay";
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-import { IconModule } from "../icon";
-import { IconButtonModule } from "../icon-button/icon-button.module";
-import { LinkModule } from "../link";
-import { SharedModule } from "../shared/shared.module";
 
 import { NavDividerComponent } from "./nav-divider.component";
 import { NavGroupComponent } from "./nav-group.component";
@@ -17,16 +8,6 @@ import { SideNavComponent } from "./side-nav.component";
 
 @NgModule({
   imports: [
-    CommonModule,
-    SharedModule,
-    IconButtonModule,
-    OverlayModule,
-    RouterModule,
-    IconModule,
-    A11yModule,
-    LinkModule,
-  ],
-  declarations: [
     NavDividerComponent,
     NavGroupComponent,
     NavItemComponent,

libs/components/src/navigation/side-nav.component.ts

@@ -1,7 +1,13 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { CdkTrapFocus } from "@angular/cdk/a11y";
+import { CommonModule } from "@angular/common";
 import { Component, ElementRef, Input, ViewChild } from "@angular/core";
 
+import { BitIconButtonComponent } from "../icon-button/icon-button.component";
+import { I18nPipe } from "../shared/i18n.pipe";
+
+import { NavDividerComponent } from "./nav-divider.component";
 import { SideNavService } from "./side-nav.service";
 
 export type SideNavVariant = "primary" | "secondary";
@@ -9,6 +15,8 @@ export type SideNavVariant = "primary" | "secondary";
 @Component({
   selector: "bit-side-nav",
   templateUrl: "side-nav.component.html",
+  standalone: true,
+  imports: [CommonModule, CdkTrapFocus, NavDividerComponent, BitIconButtonComponent, I18nPipe],
 })
 export class SideNavComponent {
   @Input() variant: SideNavVariant = "primary";