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

* Migrate component library to standalone components

* Fix tests

libs/components/src/tabs/shared/tab-header.component.ts

@@ -10,5 +10,6 @@ import { Component } from "@angular/core";
       "tw-h-16 tw-pl-4 tw-bg-background-alt tw-flex tw-items-end tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300",
   },
   template: `<ng-content></ng-content>`,
+  standalone: true,
 })
 export class TabHeaderComponent {}

libs/components/src/tabs/shared/tab-list-container.directive.ts

@@ -8,5 +8,6 @@ import { Directive } from "@angular/core";
   host: {
     class: "tw-inline-flex tw-flex-wrap tw-leading-5",
   },
+  standalone: true,
 })
 export class TabListContainerDirective {}

libs/components/src/tabs/shared/tab-list-item.directive.ts

@@ -7,7 +7,10 @@ import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
  * Directive used for styling tab header items for both nav links (anchor tags)
  * and content tabs (button tags)
  */
-@Directive({ selector: "[bitTabListItem]" })
+@Directive({
+  selector: "[bitTabListItem]",
+  standalone: true,
+})
 export class TabListItemDirective implements FocusableOption {
   @Input() active: boolean;
   @Input() disabled: boolean;

libs/components/src/tabs/tab-group/tab-body.component.ts

@@ -1,11 +1,13 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { TemplatePortal } from "@angular/cdk/portal";
+import { TemplatePortal, CdkPortalOutlet } from "@angular/cdk/portal";
 import { Component, HostBinding, Input } from "@angular/core";
 
 @Component({
   selector: "bit-tab-body",
   templateUrl: "tab-body.component.html",
+  standalone: true,
+  imports: [CdkPortalOutlet],
 })
 export class TabBodyComponent {
   private _firstRender: boolean;

libs/components/src/tabs/tab-group/tab-group.component.ts

@@ -2,6 +2,7 @@
 // @ts-strict-ignore
 import { FocusKeyManager } from "@angular/cdk/a11y";
 import { coerceNumberProperty } from "@angular/cdk/coercion";
+import { CommonModule } from "@angular/common";
 import {
   AfterContentChecked,
   AfterContentInit,
@@ -17,8 +18,11 @@ import {
 } from "@angular/core";
 import { Subject, takeUntil } from "rxjs";
 
+import { TabHeaderComponent } from "../shared/tab-header.component";
+import { TabListContainerDirective } from "../shared/tab-list-container.directive";
 import { TabListItemDirective } from "../shared/tab-list-item.directive";
 
+import { TabBodyComponent } from "./tab-body.component";
 import { TabComponent } from "./tab.component";
 
 /** Used to generate unique ID's for each tab component */
@@ -27,6 +31,14 @@ let nextId = 0;
 @Component({
   selector: "bit-tab-group",
   templateUrl: "./tab-group.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    TabHeaderComponent,
+    TabListContainerDirective,
+    TabListItemDirective,
+    TabBodyComponent,
+  ],
 })
 export class TabGroupComponent
   implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy

libs/components/src/tabs/tab-group/tab-label.directive.ts

@@ -16,6 +16,7 @@ import { Directive, TemplateRef } from "@angular/core";
  */
 @Directive({
   selector: "[bitTabLabel]",
+  standalone: true,
 })
 export class TabLabelDirective {
   constructor(public templateRef: TemplateRef<unknown>) {}

libs/components/src/tabs/tab-group/tab.component.ts

@@ -19,6 +19,7 @@ import { TabLabelDirective } from "./tab-label.directive";
   host: {
     role: "tabpanel",
   },
+  standalone: true,
 })
 export class TabComponent implements OnInit {
   @Input() disabled = false;

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

@@ -2,7 +2,7 @@
 // @ts-strict-ignore
 import { FocusableOption } from "@angular/cdk/a11y";
 import { AfterViewInit, Component, HostListener, Input, OnDestroy, ViewChild } from "@angular/core";
-import { IsActiveMatchOptions, RouterLinkActive } from "@angular/router";
+import { IsActiveMatchOptions, RouterLinkActive, RouterModule } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
 
 import { TabListItemDirective } from "../shared/tab-list-item.directive";
@@ -12,6 +12,8 @@ import { TabNavBarComponent } from "./tab-nav-bar.component";
 @Component({
   selector: "bit-tab-link",
   templateUrl: "tab-link.component.html",
+  standalone: true,
+  imports: [TabListItemDirective, RouterModule],
 })
 export class TabLinkComponent implements FocusableOption, AfterViewInit, OnDestroy {
   private destroy$ = new Subject<void>();

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

@@ -10,6 +10,9 @@ import {
   QueryList,
 } from "@angular/core";
 
+import { TabHeaderComponent } from "../shared/tab-header.component";
+import { TabListContainerDirective } from "../shared/tab-list-container.directive";
+
 import { TabLinkComponent } from "./tab-link.component";
 
 @Component({
@@ -18,6 +21,8 @@ import { TabLinkComponent } from "./tab-link.component";
   host: {
     class: "tw-block",
   },
+  standalone: true,
+  imports: [TabHeaderComponent, TabListContainerDirective],
 })
 export class TabNavBarComponent implements AfterContentInit {
   @ContentChildren(forwardRef(() => TabLinkComponent)) tabLabels: QueryList<TabLinkComponent>;

libs/components/src/tabs/tabs.module.ts

@@ -1,11 +1,6 @@
-import { PortalModule } from "@angular/cdk/portal";
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
 
-import { TabHeaderComponent } from "./shared/tab-header.component";
-import { TabListContainerDirective } from "./shared/tab-list-container.directive";
-import { TabListItemDirective } from "./shared/tab-list-item.directive";
 import { TabBodyComponent } from "./tab-group/tab-body.component";
 import { TabGroupComponent } from "./tab-group/tab-group.component";
 import { TabLabelDirective } from "./tab-group/tab-label.directive";
@@ -14,7 +9,15 @@ import { TabLinkComponent } from "./tab-nav-bar/tab-link.component";
 import { TabNavBarComponent } from "./tab-nav-bar/tab-nav-bar.component";
 
 @NgModule({
-  imports: [CommonModule, RouterModule, PortalModule],
+  imports: [
+    CommonModule,
+    TabGroupComponent,
+    TabComponent,
+    TabLabelDirective,
+    TabNavBarComponent,
+    TabLinkComponent,
+    TabBodyComponent,
+  ],
   exports: [
     TabGroupComponent,
     TabComponent,
@@ -22,16 +25,5 @@ import { TabNavBarComponent } from "./tab-nav-bar/tab-nav-bar.component";
     TabNavBarComponent,
     TabLinkComponent,
   ],
-  declarations: [
-    TabGroupComponent,
-    TabComponent,
-    TabLabelDirective,
-    TabListContainerDirective,
-    TabListItemDirective,
-    TabHeaderComponent,
-    TabNavBarComponent,
-    TabLinkComponent,
-    TabBodyComponent,
-  ],
 })
 export class TabsModule {}