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

* Migrate component library to standalone components

* Fix tests

apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts

@@ -6,7 +6,7 @@ import { BehaviorSubject } from "rxjs";
 
 import { I18nPipe } from "@bitwarden/angular/platform/pipes/i18n.pipe";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { BitIconButtonComponent } from "@bitwarden/components/src/icon-button/icon-button.component";
+import { IconButtonModule, NavigationModule } from "@bitwarden/components";
 import { NavItemComponent } from "@bitwarden/components/src/navigation/nav-item.component";
 
 import { ProductSwitcherItem, ProductSwitcherService } from "../shared/product-switcher.service";
@@ -45,13 +45,8 @@ describe("NavigationProductSwitcherComponent", () => {
     mockProducts$.next({ bento: [], other: [] });
 
     await TestBed.configureTestingModule({
-      imports: [RouterModule],
-      declarations: [
-        NavigationProductSwitcherComponent,
-        NavItemComponent,
-        BitIconButtonComponent,
-        I18nPipe,
-      ],
+      imports: [RouterModule, NavigationModule, IconButtonModule],
+      declarations: [NavigationProductSwitcherComponent, I18nPipe],
       providers: [
         { provide: ProductSwitcherService, useValue: productSwitcherService },
         {

bitwarden_license/bit-web/src/app/tools/access-intelligence/password-health.component.spec.ts

@@ -13,7 +13,6 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { TableModule } from "@bitwarden/components";
-import { TableBodyDirective } from "@bitwarden/components/src/table/table.component";
 import { LooseComponentsModule } from "@bitwarden/web-vault/app/shared";
 import { PipesModule } from "@bitwarden/web-vault/app/vault/individual-vault/pipes/pipes.module";
 
@@ -27,7 +26,7 @@ describe("PasswordHealthComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [PasswordHealthComponent, PipesModule, TableModule, LooseComponentsModule],
-      declarations: [TableBodyDirective],
+      declarations: [],
       providers: [
         { provide: CipherService, useValue: mock<CipherService>() },
         { provide: I18nService, useValue: mock<I18nService>() },

libs/components/src/async-actions/async-actions.module.ts

@@ -1,14 +1,11 @@
 import { NgModule } from "@angular/core";
 
-import { SharedModule } from "../shared";
-
 import { BitActionDirective } from "./bit-action.directive";
 import { BitSubmitDirective } from "./bit-submit.directive";
 import { BitFormButtonDirective } from "./form-button.directive";
 
 @NgModule({
-  imports: [SharedModule],
-  declarations: [BitActionDirective, BitFormButtonDirective, BitSubmitDirective],
+  imports: [BitActionDirective, BitFormButtonDirective, BitSubmitDirective],
   exports: [BitActionDirective, BitFormButtonDirective, BitSubmitDirective],
 })
 export class AsyncActionsModule {}

libs/components/src/async-actions/bit-action.directive.ts

@@ -15,6 +15,7 @@ import { FunctionReturningAwaitable, functionToObservable } from "../utils/funct
  */
 @Directive({
   selector: "[bitAction]",
+  standalone: true,
 })
 export class BitActionDirective implements OnDestroy {
   private destroy$ = new Subject<void>();

libs/components/src/async-actions/bit-submit.directive.ts

@@ -14,6 +14,7 @@ import { FunctionReturningAwaitable, functionToObservable } from "../utils/funct
  */
 @Directive({
   selector: "[formGroup][bitSubmit]",
+  standalone: true,
 })
 export class BitSubmitDirective implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();

libs/components/src/async-actions/form-button.directive.ts

@@ -25,6 +25,7 @@ import { BitSubmitDirective } from "./bit-submit.directive";
  */
 @Directive({
   selector: "button[bitFormButton]",
+  standalone: true,
 })
 export class BitFormButtonDirective implements OnDestroy {
   private destroy$ = new Subject<void>();

libs/components/src/avatar/avatar.component.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgIf, NgClass } from "@angular/common";
 import { Component, Input, OnChanges } from "@angular/core";
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
 
@@ -18,6 +19,8 @@ const SizeClasses: Record<SizeTypes, string[]> = {
 @Component({
   selector: "bit-avatar",
   template: `<img *ngIf="src" [src]="src" title="{{ title || text }}" [ngClass]="classList" />`,
+  standalone: true,
+  imports: [NgIf, NgClass],
 })
 export class AvatarComponent implements OnChanges {
   @Input() border = false;

libs/components/src/avatar/avatar.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { AvatarComponent } from "./avatar.component";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [AvatarComponent],
   exports: [AvatarComponent],
-  declarations: [AvatarComponent],
 })
 export class AvatarModule {}

libs/components/src/badge-list/badge-list.component.ts

@@ -1,12 +1,16 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { CommonModule } from "@angular/common";
 import { Component, Input, OnChanges } from "@angular/core";
 
-import { BadgeVariant } from "../badge";
+import { BadgeModule, BadgeVariant } from "../badge";
+import { I18nPipe } from "../shared/i18n.pipe";
 
 @Component({
   selector: "bit-badge-list",
   templateUrl: "badge-list.component.html",
+  standalone: true,
+  imports: [CommonModule, BadgeModule, I18nPipe],
 })
 export class BadgeListComponent implements OnChanges {
   private _maxItems: number;

libs/components/src/badge-list/badge-list.module.ts

@@ -1,13 +1,9 @@
 import { NgModule } from "@angular/core";
 
-import { BadgeModule } from "../badge";
-import { SharedModule } from "../shared";
-
 import { BadgeListComponent } from "./badge-list.component";
 
 @NgModule({
-  imports: [SharedModule, BadgeModule],
+  imports: [BadgeListComponent],
   exports: [BadgeListComponent],
-  declarations: [BadgeListComponent],
 })
 export class BadgeListModule {}

libs/components/src/badge/badge.directive.ts

@@ -31,6 +31,7 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
 @Directive({
   selector: "span[bitBadge], a[bitBadge], button[bitBadge]",
   providers: [{ provide: FocusableElement, useExisting: BadgeDirective }],
+  standalone: true,
 })
 export class BadgeDirective implements FocusableElement {
   @HostBinding("class") get classList() {

libs/components/src/badge/badge.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { BadgeDirective } from "./badge.directive";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [BadgeDirective],
   exports: [BadgeDirective],
-  declarations: [BadgeDirective],
 })
 export class BadgeModule {}

libs/components/src/banner/banner.component.spec.ts

@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
-import { SharedModule } from "../shared/shared.module";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { BannerComponent } from "./banner.component";
@@ -13,8 +12,7 @@ describe("BannerComponent", () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SharedModule],
-      declarations: [BannerComponent],
+      imports: [BannerComponent],
       providers: [
         {
           provide: I18nService,

libs/components/src/banner/banner.component.ts

@@ -1,7 +1,11 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { CommonModule } from "@angular/common";
 import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
 
+import { IconButtonModule } from "../icon-button";
+import { I18nPipe } from "../shared/i18n.pipe";
+
 type BannerTypes = "premium" | "info" | "warning" | "danger";
 
 const defaultIcon: Record<BannerTypes, string> = {
@@ -14,6 +18,8 @@ const defaultIcon: Record<BannerTypes, string> = {
 @Component({
   selector: "bit-banner",
   templateUrl: "./banner.component.html",
+  standalone: true,
+  imports: [CommonModule, IconButtonModule, I18nPipe],
 })
 export class BannerComponent implements OnInit {
   @Input("bannerType") bannerType: BannerTypes = "info";

libs/components/src/banner/banner.module.ts

@@ -1,14 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { IconButtonModule } from "../icon-button";
-import { SharedModule } from "../shared/shared.module";
-
 import { BannerComponent } from "./banner.component";
 
 @NgModule({
-  imports: [CommonModule, SharedModule, IconButtonModule],
+  imports: [BannerComponent],
   exports: [BannerComponent],
-  declarations: [BannerComponent],
 })
 export class BannerModule {}

libs/components/src/breadcrumbs/breadcrumb.component.ts

@@ -1,11 +1,14 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgIf } from "@angular/common";
 import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from "@angular/core";
 import { QueryParamsHandling } from "@angular/router";
 
 @Component({
   selector: "bit-breadcrumb",
   templateUrl: "./breadcrumb.component.html",
+  standalone: true,
+  imports: [NgIf],
 })
 export class BreadcrumbComponent {
   @Input()

libs/components/src/breadcrumbs/breadcrumbs.component.ts

@@ -1,10 +1,18 @@
+import { CommonModule } from "@angular/common";
 import { Component, ContentChildren, Input, QueryList } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { IconButtonModule } from "../icon-button";
+import { LinkModule } from "../link";
+import { MenuModule } from "../menu";
 
 import { BreadcrumbComponent } from "./breadcrumb.component";
 
 @Component({
   selector: "bit-breadcrumbs",
   templateUrl: "./breadcrumbs.component.html",
+  standalone: true,
+  imports: [CommonModule, LinkModule, RouterModule, IconButtonModule, MenuModule],
 })
 export class BreadcrumbsComponent {
   @Input()

libs/components/src/breadcrumbs/breadcrumbs.module.ts

@@ -1,17 +1,10 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-
-import { IconButtonModule } from "../icon-button";
-import { LinkModule } from "../link";
-import { MenuModule } from "../menu";
 
 import { BreadcrumbComponent } from "./breadcrumb.component";
 import { BreadcrumbsComponent } from "./breadcrumbs.component";
 
 @NgModule({
-  imports: [CommonModule, LinkModule, IconButtonModule, MenuModule, RouterModule],
-  declarations: [BreadcrumbsComponent, BreadcrumbComponent],
+  imports: [BreadcrumbsComponent, BreadcrumbComponent],
   exports: [BreadcrumbsComponent, BreadcrumbComponent],
 })
 export class BreadcrumbsModule {}

libs/components/src/button/button.component.ts

@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { NgClass } from "@angular/common";
 import { Input, HostBinding, Component } from "@angular/core";
 
 import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
@@ -46,6 +47,8 @@ const buttonStyles: Record<ButtonType, string[]> = {
   selector: "button[bitButton], a[bitButton]",
   templateUrl: "button.component.html",
   providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
+  standalone: true,
+  imports: [NgClass],
 })
 export class ButtonComponent implements ButtonLikeAbstraction {
   @HostBinding("class") get classList() {

libs/components/src/button/button.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { ButtonComponent } from "./button.component";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [ButtonComponent],
   exports: [ButtonComponent],
-  declarations: [ButtonComponent],
 })
 export class ButtonModule {}

libs/components/src/checkbox/checkbox.component.ts

@@ -9,6 +9,7 @@ import { BitFormControlAbstraction } from "../form-control";
   selector: "input[type=checkbox][bitCheckbox]",
   template: "",
   providers: [{ provide: BitFormControlAbstraction, useExisting: CheckboxComponent }],
+  standalone: true,
 })
 export class CheckboxComponent implements BitFormControlAbstraction {
   @HostBinding("class")

libs/components/src/checkbox/checkbox.module.ts

@@ -1,14 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { FormControlModule } from "../form-control";
-import { SharedModule } from "../shared";
-
 import { CheckboxComponent } from "./checkbox.component";
 
 @NgModule({
-  imports: [SharedModule, CommonModule, FormControlModule],
-  declarations: [CheckboxComponent],
+  imports: [CheckboxComponent],
   exports: [CheckboxComponent],
 })
 export class CheckboxModule {}

libs/components/src/color-password/color-password.component.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgFor, NgIf } from "@angular/common";
 import { Component, HostBinding, Input } from "@angular/core";
 
 import { Utils } from "@bitwarden/common/platform/misc/utils";
@@ -23,6 +24,8 @@ enum CharacterType {
     }}</span>
   </span>`,
   preserveWhitespaces: false,
+  standalone: true,
+  imports: [NgFor, NgIf],
 })
 export class ColorPasswordComponent {
   @Input() password: string = null;

libs/components/src/color-password/color-password.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { ColorPasswordComponent } from "./color-password.component";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [ColorPasswordComponent],
   exports: [ColorPasswordComponent],
-  declarations: [ColorPasswordComponent],
 })
 export class ColorPasswordModule {}

libs/components/src/dialog/dialog.module.ts

@@ -1,44 +1,25 @@
 import { DialogModule as CdkDialogModule } from "@angular/cdk/dialog";
 import { NgModule } from "@angular/core";
-import { ReactiveFormsModule } from "@angular/forms";
-
-import { AsyncActionsModule } from "../async-actions";
-import { ButtonModule } from "../button";
-import { IconButtonModule } from "../icon-button";
-import { SharedModule } from "../shared";
-import { TypographyModule } from "../typography";
 
 import { DialogComponent } from "./dialog/dialog.component";
 import { DialogService } from "./dialog.service";
 import { DialogCloseDirective } from "./directives/dialog-close.directive";
-import { DialogTitleContainerDirective } from "./directives/dialog-title-container.directive";
-import { SimpleConfigurableDialogComponent } from "./simple-dialog/simple-configurable-dialog/simple-configurable-dialog.component";
 import { IconDirective, SimpleDialogComponent } from "./simple-dialog/simple-dialog.component";
 
 @NgModule({
   imports: [
-    SharedModule,
-    AsyncActionsModule,
-    ButtonModule,
     CdkDialogModule,
-    IconButtonModule,
-    ReactiveFormsModule,
-    TypographyModule,
-  ],
-  declarations: [
     DialogCloseDirective,
-    DialogTitleContainerDirective,
     DialogComponent,
     SimpleDialogComponent,
-    SimpleConfigurableDialogComponent,
     IconDirective,
   ],
   exports: [
     CdkDialogModule,
-    DialogComponent,
-    SimpleDialogComponent,
     DialogCloseDirective,
+    DialogComponent,
     IconDirective,
+    SimpleDialogComponent,
   ],
   providers: [DialogService],
 })

libs/components/src/dialog/dialog/dialog.component.ts

@@ -1,14 +1,29 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { CommonModule } from "@angular/common";
 import { Component, HostBinding, Input } from "@angular/core";
 
+import { BitIconButtonComponent } from "../../icon-button/icon-button.component";
+import { I18nPipe } from "../../shared/i18n.pipe";
+import { TypographyDirective } from "../../typography/typography.directive";
 import { fadeIn } from "../animations";
+import { DialogCloseDirective } from "../directives/dialog-close.directive";
+import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
 
 @Component({
   selector: "bit-dialog",
   templateUrl: "./dialog.component.html",
   animations: [fadeIn],
+  standalone: true,
+  imports: [
+    CommonModule,
+    DialogTitleContainerDirective,
+    TypographyDirective,
+    BitIconButtonComponent,
+    DialogCloseDirective,
+    I18nPipe,
+  ],
 })
 export class DialogComponent {
   /** Background color */

libs/components/src/dialog/directives/dialog-close.directive.ts

@@ -3,6 +3,7 @@ import { Directive, HostBinding, HostListener, Input, Optional } from "@angular/
 
 @Directive({
   selector: "[bitDialogClose]",
+  standalone: true,
 })
 export class DialogCloseDirective {
   @Input("bitDialogClose") dialogResult: any;

libs/components/src/dialog/directives/dialog-title-container.directive.ts

@@ -6,6 +6,7 @@ let nextId = 0;
 
 @Directive({
   selector: "[bitDialogTitleContainer]",
+  standalone: true,
 })
 export class DialogTitleContainerDirective implements OnInit {
   @HostBinding("id") id = `bit-dialog-title-${nextId++}`;

libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.component.ts

@@ -1,12 +1,17 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { NgIf } from "@angular/common";
 import { Component, Inject } from "@angular/core";
-import { FormGroup } from "@angular/forms";
+import { FormGroup, ReactiveFormsModule } from "@angular/forms";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { SimpleDialogOptions, SimpleDialogType, Translation } from "../..";
+import { BitSubmitDirective } from "../../../async-actions/bit-submit.directive";
+import { BitFormButtonDirective } from "../../../async-actions/form-button.directive";
+import { ButtonComponent } from "../../../button/button.component";
+import { SimpleDialogComponent, IconDirective } from "../simple-dialog.component";
 
 const DEFAULT_ICON: Record<SimpleDialogType, string> = {
   primary: "bwi-business",
@@ -26,6 +31,16 @@ const DEFAULT_COLOR: Record<SimpleDialogType, string> = {
 
 @Component({
   templateUrl: "./simple-configurable-dialog.component.html",
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    BitSubmitDirective,
+    SimpleDialogComponent,
+    IconDirective,
+    ButtonComponent,
+    BitFormButtonDirective,
+    NgIf,
+  ],
 })
 export class SimpleConfigurableDialogComponent {
   get iconClasses() {

libs/components/src/dialog/simple-dialog/simple-dialog.component.ts

@@ -1,14 +1,22 @@
+import { NgIf } from "@angular/common";
 import { Component, ContentChild, Directive } from "@angular/core";
 
+import { TypographyDirective } from "../../typography/typography.directive";
 import { fadeIn } from "../animations";
+import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
 
-@Directive({ selector: "[bitDialogIcon]" })
+@Directive({
+  selector: "[bitDialogIcon]",
+  standalone: true,
+})
 export class IconDirective {}
 
 @Component({
   selector: "bit-simple-dialog",
   templateUrl: "./simple-dialog.component.html",
   animations: [fadeIn],
+  standalone: true,
+  imports: [NgIf, DialogTitleContainerDirective, TypographyDirective],
 })
 export class SimpleDialogComponent {
   @ContentChild(IconDirective) icon!: IconDirective;

libs/components/src/form-control/form-control.component.ts

@@ -1,15 +1,21 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { NgClass, NgIf } from "@angular/common";
 import { Component, ContentChild, HostBinding, Input } from "@angular/core";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { I18nPipe } from "../shared/i18n.pipe";
+import { TypographyDirective } from "../typography/typography.directive";
+
 import { BitFormControlAbstraction } from "./form-control.abstraction";
 
 @Component({
   selector: "bit-form-control",
   templateUrl: "form-control.component.html",
+  standalone: true,
+  imports: [NgClass, TypographyDirective, NgIf, I18nPipe],
 })
 export class FormControlComponent {
   @Input() label: string;

libs/components/src/form-control/form-control.module.ts

@@ -1,15 +1,11 @@
 import { NgModule } from "@angular/core";
 
-import { SharedModule } from "../shared";
-import { TypographyModule } from "../typography";
-
 import { FormControlComponent } from "./form-control.component";
 import { BitHintComponent } from "./hint.component";
 import { BitLabel } from "./label.component";
 
 @NgModule({
-  imports: [SharedModule, BitLabel, TypographyModule],
-  declarations: [FormControlComponent, BitHintComponent],
+  imports: [BitLabel, FormControlComponent, BitHintComponent],
   exports: [FormControlComponent, BitLabel, BitHintComponent],
 })
 export class FormControlModule {}

libs/components/src/form-control/hint.component.ts

@@ -8,6 +8,7 @@ let nextId = 0;
   host: {
     class: "tw-text-muted tw-font-normal tw-inline-block tw-mt-1 tw-text-xs",
   },
+  standalone: true,
 })
 export class BitHintComponent {
   @HostBinding() id = `bit-hint-${nextId++}`;

libs/components/src/form-field/error-summary.component.ts

@@ -1,8 +1,11 @@
 // 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 { AbstractControl, UntypedFormGroup } from "@angular/forms";
 
+import { I18nPipe } from "../shared/i18n.pipe";
+
 @Component({
   selector: "bit-error-summary",
   template: ` <ng-container *ngIf="errorCount > 0">
@@ -12,6 +15,8 @@ import { AbstractControl, UntypedFormGroup } from "@angular/forms";
     class: "tw-block tw-text-danger tw-mt-2",
     "aria-live": "assertive",
   },
+  standalone: true,
+  imports: [NgIf, I18nPipe],
 })
 export class BitErrorSummary {
   @Input()

libs/components/src/form-field/error.component.ts

@@ -14,6 +14,7 @@ let nextId = 0;
     class: "tw-block tw-mt-1 tw-text-danger tw-text-xs",
     "aria-live": "assertive",
   },
+  standalone: true,
 })
 export class BitErrorComponent {
   @HostBinding() id = `bit-error-${nextId++}`;

libs/components/src/form-field/form-field.component.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { CommonModule } from "@angular/common";
 import {
   AfterContentChecked,
   booleanAttribute,
@@ -16,6 +17,7 @@ import {
 import { BitHintComponent } from "../form-control/hint.component";
 import { BitLabel } from "../form-control/label.component";
 import { inputBorderClasses } from "../input/input.directive";
+import { I18nPipe } from "../shared/i18n.pipe";
 
 import { BitErrorComponent } from "./error.component";
 import { BitFormFieldControl } from "./form-field-control";
@@ -23,6 +25,8 @@ import { BitFormFieldControl } from "./form-field-control";
 @Component({
   selector: "bit-form-field",
   templateUrl: "./form-field.component.html",
+  standalone: true,
+  imports: [CommonModule, BitErrorComponent, I18nPipe],
 })
 export class BitFormFieldComponent implements AfterContentChecked {
   @ContentChild(BitFormFieldControl) input: BitFormFieldControl;

libs/components/src/form-field/form-field.module.ts

@@ -1,11 +1,8 @@
 import { NgModule } from "@angular/core";
 
 import { FormControlModule } from "../form-control";
-import { BitInputDirective } from "../input/input.directive";
 import { InputModule } from "../input/input.module";
-import { MultiSelectComponent } from "../multi-select/multi-select.component";
 import { MultiSelectModule } from "../multi-select/multi-select.module";
-import { SharedModule } from "../shared";
 
 import { BitErrorSummary } from "./error-summary.component";
 import { BitErrorComponent } from "./error.component";
@@ -15,8 +12,11 @@ import { BitPrefixDirective } from "./prefix.directive";
 import { BitSuffixDirective } from "./suffix.directive";
 
 @NgModule({
-  imports: [SharedModule, FormControlModule, InputModule, MultiSelectModule],
-  declarations: [
+  imports: [
+    FormControlModule,
+    InputModule,
+    MultiSelectModule,
+
     BitErrorComponent,
     BitErrorSummary,
     BitFormFieldComponent,
@@ -25,15 +25,16 @@ import { BitSuffixDirective } from "./suffix.directive";
     BitSuffixDirective,
   ],
   exports: [
+    FormControlModule,
+    InputModule,
+    MultiSelectModule,
+
     BitErrorComponent,
     BitErrorSummary,
     BitFormFieldComponent,
-    BitInputDirective,
     BitPasswordInputToggleDirective,
     BitPrefixDirective,
     BitSuffixDirective,
-    MultiSelectComponent,
-    FormControlModule,
   ],
 })
 export class FormFieldModule {}

libs/components/src/form-field/password-input-toggle.directive.ts

@@ -18,6 +18,7 @@ import { BitFormFieldComponent } from "./form-field.component";
 
 @Directive({
   selector: "[bitPasswordInputToggle]",
+  standalone: true,
 })
 export class BitPasswordInputToggleDirective implements AfterContentInit, OnChanges {
   /**

libs/components/src/form-field/prefix.directive.ts

@@ -4,6 +4,7 @@ import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
 @Directive({
   selector: "[bitPrefix]",
+  standalone: true,
 })
 export class BitPrefixDirective implements OnInit {
   @HostBinding("class") @Input() get classList() {

libs/components/src/form-field/suffix.directive.ts

@@ -4,6 +4,7 @@ import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
 @Directive({
   selector: "[bitSuffix]",
+  standalone: true,
 })
 export class BitSuffixDirective implements OnInit {
   @HostBinding("class") @Input() get classList() {

libs/components/src/icon-button/icon-button.component.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgClass } from "@angular/common";
 import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
@@ -134,6 +135,8 @@ const sizes: Record<IconButtonSize, string[]> = {
     { provide: ButtonLikeAbstraction, useExisting: BitIconButtonComponent },
     { provide: FocusableElement, useExisting: BitIconButtonComponent },
   ],
+  standalone: true,
+  imports: [NgClass],
 })
 export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
   @Input("bitIconButton") icon: string;

libs/components/src/icon-button/icon-button.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { BitIconButtonComponent } from "./icon-button.component";
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [BitIconButtonComponent],
+  imports: [BitIconButtonComponent],
   exports: [BitIconButtonComponent],
 })
 export class IconButtonModule {}

libs/components/src/icon/icon.component.ts

@@ -8,6 +8,7 @@ import { Icon, isIcon } from "./icon";
 @Component({
   selector: "bit-icon",
   template: ``,
+  standalone: true,
 })
 export class BitIconComponent {
   @Input() set icon(icon: Icon) {

libs/components/src/icon/icon.components.spec.ts

@@ -9,7 +9,7 @@ describe("IconComponent", () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [BitIconComponent],
+      imports: [BitIconComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(BitIconComponent);

libs/components/src/icon/icon.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { BitIconComponent } from "./icon.component";
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [BitIconComponent],
+  imports: [BitIconComponent],
   exports: [BitIconComponent],
 })
 export class IconModule {}

libs/components/src/input/input.directive.ts

@@ -30,6 +30,7 @@ export function inputBorderClasses(error: boolean) {
 @Directive({
   selector: "input[bitInput], select[bitInput], textarea[bitInput]",
   providers: [{ provide: BitFormFieldControl, useExisting: BitInputDirective }],
+  standalone: true,
 })
 export class BitInputDirective implements BitFormFieldControl {
   @HostBinding("class") @Input() get classList() {

libs/components/src/input/input.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { BitInputDirective } from "./input.directive";
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [BitInputDirective],
+  imports: [BitInputDirective],
   exports: [BitInputDirective],
 })
 export class InputModule {}

libs/components/src/link/link.directive.ts

@@ -68,6 +68,7 @@ abstract class LinkDirective {
 
 @Directive({
   selector: "a[bitLink]",
+  standalone: true,
 })
 export class AnchorLinkDirective extends LinkDirective {
   @HostBinding("class") get classList() {
@@ -79,6 +80,7 @@ export class AnchorLinkDirective extends LinkDirective {
 
 @Directive({
   selector: "button[bitLink]",
+  standalone: true,
 })
 export class ButtonLinkDirective extends LinkDirective {
   @HostBinding("class") get classList() {

libs/components/src/link/link.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [AnchorLinkDirective, ButtonLinkDirective],
   exports: [AnchorLinkDirective, ButtonLinkDirective],
-  declarations: [AnchorLinkDirective, ButtonLinkDirective],
 })
 export class LinkModule {}

libs/components/src/menu/menu-divider.component.ts

@@ -3,5 +3,6 @@ import { Component } from "@angular/core";
 @Component({
   selector: "bit-menu-divider",
   templateUrl: "./menu-divider.component.html",
+  standalone: true,
 })
 export class MenuDividerComponent {}

libs/components/src/menu/menu-item.directive.ts

@@ -1,10 +1,13 @@
 import { FocusableOption } from "@angular/cdk/a11y";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { NgClass } from "@angular/common";
 import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 @Component({
   selector: "[bitMenuItem]",
   templateUrl: "menu-item.component.html",
+  standalone: true,
+  imports: [NgClass],
 })
 export class MenuItemDirective implements FocusableOption {
   @HostBinding("class") classList = [

libs/components/src/menu/menu-trigger-for.directive.ts

@@ -19,6 +19,7 @@ import { MenuComponent } from "./menu.component";
 @Directive({
   selector: "[bitMenuTriggerFor]",
   exportAs: "menuTrigger",
+  standalone: true,
 })
 export class MenuTriggerForDirective implements OnDestroy {
   @HostBinding("attr.aria-expanded") isOpen = false;

libs/components/src/menu/menu.component.ts

@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { FocusKeyManager } from "@angular/cdk/a11y";
+import { FocusKeyManager, CdkTrapFocus } from "@angular/cdk/a11y";
 import {
   Component,
   Output,
@@ -19,6 +19,8 @@ import { MenuItemDirective } from "./menu-item.directive";
   selector: "bit-menu",
   templateUrl: "./menu.component.html",
   exportAs: "menuComponent",
+  standalone: true,
+  imports: [CdkTrapFocus],
 })
 export class MenuComponent implements AfterContentInit {
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;

libs/components/src/menu/menu.module.ts

@@ -1,6 +1,3 @@
-import { A11yModule } from "@angular/cdk/a11y";
-import { OverlayModule } from "@angular/cdk/overlay";
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { MenuDividerComponent } from "./menu-divider.component";
@@ -9,8 +6,7 @@ import { MenuTriggerForDirective } from "./menu-trigger-for.directive";
 import { MenuComponent } from "./menu.component";
 
 @NgModule({
-  imports: [A11yModule, CommonModule, OverlayModule],
-  declarations: [MenuComponent, MenuTriggerForDirective, MenuItemDirective, MenuDividerComponent],
+  imports: [MenuComponent, MenuTriggerForDirective, MenuItemDirective, MenuDividerComponent],
   exports: [MenuComponent, MenuTriggerForDirective, MenuItemDirective, MenuDividerComponent],
 })
 export class MenuModule {}

libs/components/src/menu/menu.stories.ts

@@ -3,23 +3,15 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { ButtonModule } from "../button/button.module";
 
-import { MenuDividerComponent } from "./menu-divider.component";
-import { MenuItemDirective } from "./menu-item.directive";
 import { MenuTriggerForDirective } from "./menu-trigger-for.directive";
-import { MenuComponent } from "./menu.component";
+import { MenuModule } from "./menu.module";
 
 export default {
   title: "Component Library/Menu",
   component: MenuTriggerForDirective,
   decorators: [
     moduleMetadata({
-      declarations: [
-        MenuTriggerForDirective,
-        MenuComponent,
-        MenuItemDirective,
-        MenuDividerComponent,
-      ],
-      imports: [OverlayModule, ButtonModule],
+      imports: [MenuModule, OverlayModule, ButtonModule],
     }),
   ],
   parameters: {
@@ -51,7 +43,7 @@ export const OpenMenu: Story = {
           Disabled button
         </button>
       </bit-menu>
-  
+
       <div class="tw-h-40">
         <div class="cdk-overlay-pane bit-menu-panel">
           <ng-container *ngTemplateOutlet="myMenu.templateRef"></ng-container>
@@ -67,7 +59,7 @@ export const ClosedMenu: Story = {
       <div class="tw-h-40">
         <button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
       </div>
-  
+
       <bit-menu #myMenu>
         <a href="#" bitMenuItem>Anchor link</a>
         <a href="#" bitMenuItem>Another link</a>

libs/components/src/multi-select/multi-select.component.ts

@@ -2,6 +2,7 @@
 // @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { hasModifierKey } from "@angular/cdk/keycodes";
+import { NgIf } from "@angular/common";
 import {
   Component,
   Input,
@@ -13,12 +14,20 @@ import {
   Optional,
   Self,
 } from "@angular/core";
-import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
-import { NgSelectComponent } from "@ng-select/ng-select";
+import {
+  ControlValueAccessor,
+  NgControl,
+  Validators,
+  ReactiveFormsModule,
+  FormsModule,
+} from "@angular/forms";
+import { NgSelectComponent, NgSelectModule } from "@ng-select/ng-select";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { BadgeModule } from "../badge";
 import { BitFormFieldControl } from "../form-field/form-field-control";
+import { I18nPipe } from "../shared/i18n.pipe";
 
 import { SelectItemView } from "./models/select-item-view";
 
@@ -29,6 +38,8 @@ let nextId = 0;
   selector: "bit-multi-select",
   templateUrl: "./multi-select.component.html",
   providers: [{ provide: BitFormFieldControl, useExisting: MultiSelectComponent }],
+  standalone: true,
+  imports: [NgSelectModule, ReactiveFormsModule, FormsModule, BadgeModule, NgIf, I18nPipe],
 })
 /**
  * This component has been implemented to only support Multi-select list events

libs/components/src/multi-select/multi-select.module.ts

@@ -1,16 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { NgSelectModule } from "@ng-select/ng-select";
-
-import { BadgeModule } from "../badge";
-import { SharedModule } from "../shared";
 
 import { MultiSelectComponent } from "./multi-select.component";
 
 @NgModule({
-  imports: [CommonModule, FormsModule, NgSelectModule, BadgeModule, SharedModule],
+  imports: [MultiSelectComponent],
   exports: [MultiSelectComponent],
-  declarations: [MultiSelectComponent],
 })
 export class MultiSelectModule {}

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";

libs/components/src/no-items/no-items.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input } from "@angular/core";
 
 import { Icons } from "..";
+import { BitIconComponent } from "../icon/icon.component";
 
 /**
  * Component for displaying a message when there are no items to display. Expects title, description and button slots.
@@ -8,6 +9,8 @@ import { Icons } from "..";
 @Component({
   selector: "bit-no-items",
   templateUrl: "./no-items.component.html",
+  standalone: true,
+  imports: [BitIconComponent],
 })
 export class NoItemsComponent {
   @Input() icon = Icons.Search;

libs/components/src/no-items/no-items.module.ts

@@ -1,13 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { IconModule } from "../icon";
-
 import { NoItemsComponent } from "./no-items.component";
 
 @NgModule({
-  imports: [CommonModule, IconModule],
+  imports: [NoItemsComponent],
   exports: [NoItemsComponent],
-  declarations: [NoItemsComponent],
 })
 export class NoItemsModule {}

libs/components/src/progress/progress.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 
 type SizeTypes = "small" | "default" | "large";
@@ -19,6 +20,8 @@ const BackgroundClasses: Record<BackgroundTypes, string[]> = {
 @Component({
   selector: "bit-progress",
   templateUrl: "./progress.component.html",
+  standalone: true,
+  imports: [CommonModule],
 })
 export class ProgressComponent {
   @Input() barWidth = 0;

libs/components/src/progress/progress.module.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { ProgressComponent } from "./progress.component";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [ProgressComponent],
   exports: [ProgressComponent],
-  declarations: [ProgressComponent],
 })
 export class ProgressModule {}

libs/components/src/radio-button/radio-button.component.ts

@@ -1,12 +1,17 @@
 import { Component, HostBinding, Input } from "@angular/core";
 
+import { FormControlModule } from "../form-control/form-control.module";
+
 import { RadioGroupComponent } from "./radio-group.component";
+import { RadioInputComponent } from "./radio-input.component";
 
 let nextId = 0;
 
 @Component({
   selector: "bit-radio-button",
   templateUrl: "radio-button.component.html",
+  standalone: true,
+  imports: [FormControlModule, RadioInputComponent],
 })
 export class RadioButtonComponent {
   @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;

libs/components/src/radio-button/radio-button.module.ts

@@ -1,16 +1,13 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
 import { FormControlModule } from "../form-control";
-import { SharedModule } from "../shared";
 
 import { RadioButtonComponent } from "./radio-button.component";
 import { RadioGroupComponent } from "./radio-group.component";
 import { RadioInputComponent } from "./radio-input.component";
 
 @NgModule({
-  imports: [CommonModule, SharedModule, FormControlModule],
-  declarations: [RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
+  imports: [FormControlModule, RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
   exports: [FormControlModule, RadioInputComponent, RadioButtonComponent, RadioGroupComponent],
 })
 export class RadioButtonModule {}

libs/components/src/radio-button/radio-group.component.ts

@@ -1,15 +1,19 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgIf, NgTemplateOutlet } from "@angular/common";
 import { Component, ContentChild, HostBinding, Input, Optional, Self } from "@angular/core";
 import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
 
 import { BitLabel } from "../form-control/label.component";
+import { I18nPipe } from "../shared/i18n.pipe";
 
 let nextId = 0;
 
 @Component({
   selector: "bit-radio-group",
   templateUrl: "radio-group.component.html",
+  standalone: true,
+  imports: [NgIf, NgTemplateOutlet, I18nPipe],
 })
 export class RadioGroupComponent implements ControlValueAccessor {
   selected: unknown;

libs/components/src/radio-button/radio-input.component.ts

@@ -11,6 +11,7 @@ let nextId = 0;
   selector: "input[type=radio][bitRadio]",
   template: "",
   providers: [{ provide: BitFormControlAbstraction, useExisting: RadioInputComponent }],
+  standalone: true,
 })
 export class RadioInputComponent implements BitFormControlAbstraction {
   @HostBinding("attr.id") @Input() id = `bit-radio-input-${nextId++}`;

libs/components/src/search/search.component.ts

@@ -1,11 +1,18 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { Component, ElementRef, Input, ViewChild } from "@angular/core";
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+  FormsModule,
+} from "@angular/forms";
 
 import { isBrowserSafariApi } from "@bitwarden/platform";
 
+import { InputModule } from "../input/input.module";
 import { FocusableElement } from "../shared/focusable-element";
+import { I18nPipe } from "../shared/i18n.pipe";
 
 let nextId = 0;
 
@@ -23,6 +30,8 @@ let nextId = 0;
       useExisting: SearchComponent,
     },
   ],
+  standalone: true,
+  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe],
 })
 export class SearchComponent implements ControlValueAccessor, FocusableElement {
   private notifyOnChange: (v: string) => void;

libs/components/src/search/search.module.ts

@@ -1,14 +1,9 @@
 import { NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-
-import { InputModule } from "../input/input.module";
-import { SharedModule } from "../shared";
 
 import { SearchComponent } from "./search.component";
 
 @NgModule({
-  imports: [SharedModule, InputModule, FormsModule],
-  declarations: [SearchComponent],
+  imports: [SearchComponent],
   exports: [SearchComponent],
 })
 export class SearchModule {}

libs/components/src/select/option.component.ts

@@ -7,6 +7,7 @@ import { Option } from "./option";
 @Component({
   selector: "bit-option",
   template: `<ng-template><ng-content></ng-content></ng-template>`,
+  standalone: true,
 })
 export class OptionComponent<T = unknown> implements Option<T> {
   @Input()

libs/components/src/select/select.component.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgIf } from "@angular/common";
 import {
   Component,
   ContentChildren,
@@ -12,8 +13,14 @@ import {
   Output,
   EventEmitter,
 } from "@angular/core";
-import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
-import { NgSelectComponent } from "@ng-select/ng-select";
+import {
+  ControlValueAccessor,
+  NgControl,
+  Validators,
+  ReactiveFormsModule,
+  FormsModule,
+} from "@angular/forms";
+import { NgSelectComponent, NgSelectModule } from "@ng-select/ng-select";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -28,6 +35,8 @@ let nextId = 0;
   selector: "bit-select",
   templateUrl: "select.component.html",
   providers: [{ provide: BitFormFieldControl, useExisting: SelectComponent }],
+  standalone: true,
+  imports: [NgSelectModule, ReactiveFormsModule, FormsModule, NgIf],
 })
 export class SelectComponent<T> implements BitFormFieldControl, ControlValueAccessor {
   @ViewChild(NgSelectComponent) select: NgSelectComponent;

libs/components/src/select/select.module.ts

@@ -1,14 +1,10 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { NgSelectModule } from "@ng-select/ng-select";
 
 import { OptionComponent } from "./option.component";
 import { SelectComponent } from "./select.component";
 
 @NgModule({
-  imports: [CommonModule, NgSelectModule, FormsModule],
-  declarations: [SelectComponent, OptionComponent],
+  imports: [SelectComponent, OptionComponent],
   exports: [SelectComponent, OptionComponent],
 })
 export class SelectModule {}

libs/components/src/shared/i18n.pipe.ts

@@ -7,6 +7,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
  */
 @Pipe({
   name: "i18n",
+  standalone: true,
 })
 export class I18nPipe implements PipeTransform {
   constructor(private i18nService: I18nService) {}

libs/components/src/shared/shared.module.ts

@@ -4,8 +4,7 @@ import { NgModule } from "@angular/core";
 import { I18nPipe } from "./i18n.pipe";
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [I18nPipe],
+  imports: [CommonModule, I18nPipe],
   exports: [CommonModule, I18nPipe],
 })
 export class SharedModule {}

libs/components/src/table/cell.directive.ts

@@ -2,6 +2,7 @@ import { Directive, HostBinding } from "@angular/core";
 
 @Directive({
   selector: "th[bitCell], td[bitCell]",
+  standalone: true,
 })
 export class CellDirective {
   @HostBinding("class") get classList() {

libs/components/src/table/row.directive.ts

@@ -2,6 +2,7 @@ import { Directive, HostBinding, Input } from "@angular/core";
 
 @Directive({
   selector: "tr[bitRow]",
+  standalone: true,
 })
 export class RowDirective {
   @Input() alignContent: "top" | "middle" | "bottom" | "baseline" = "middle";

libs/components/src/table/sortable.component.ts

@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { NgClass } from "@angular/common";
 import { Component, HostBinding, Input, OnInit } from "@angular/core";
 
 import type { SortDirection, SortFn } from "./table-data-source";
@@ -14,6 +15,8 @@ import { TableComponent } from "./table.component";
       <i class="bwi tw-ml-2" [ngClass]="icon"></i>
     </button>
   `,
+  standalone: true,
+  imports: [NgClass],
 })
 export class SortableComponent implements OnInit {
   /**

libs/components/src/table/table-scroll.component.ts

@@ -1,5 +1,12 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import {
+  CdkVirtualScrollViewport,
+  CdkVirtualScrollableWindow,
+  CdkFixedSizeVirtualScroll,
+  CdkVirtualForOf,
+} from "@angular/cdk/scrolling";
+import { CommonModule } from "@angular/common";
 import {
   AfterContentChecked,
   Component,
@@ -14,6 +21,7 @@ import {
   TrackByFunction,
 } from "@angular/core";
 
+import { RowDirective } from "./row.directive";
 import { TableComponent } from "./table.component";
 
 /**
@@ -42,6 +50,15 @@ export class BitRowDef {
   selector: "bit-table-scroll",
   templateUrl: "./table-scroll.component.html",
   providers: [{ provide: TableComponent, useExisting: TableScrollComponent }],
+  standalone: true,
+  imports: [
+    CommonModule,
+    CdkVirtualScrollViewport,
+    CdkVirtualScrollableWindow,
+    CdkFixedSizeVirtualScroll,
+    CdkVirtualForOf,
+    RowDirective,
+  ],
 })
 export class TableScrollComponent
   extends TableComponent

libs/components/src/table/table.component.ts

@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { isDataSource } from "@angular/cdk/collections";
+import { CommonModule } from "@angular/common";
 import {
   AfterContentChecked,
   Component,
@@ -16,6 +17,7 @@ import { TableDataSource } from "./table-data-source";
 
 @Directive({
   selector: "ng-template[body]",
+  standalone: true,
 })
 export class TableBodyDirective {
   // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
@@ -25,6 +27,8 @@ export class TableBodyDirective {
 @Component({
   selector: "bit-table",
   templateUrl: "./table.component.html",
+  standalone: true,
+  imports: [CommonModule],
 })
 export class TableComponent implements OnDestroy, AfterContentChecked {
   @Input() dataSource: TableDataSource<any>;

libs/components/src/table/table.module.ts

@@ -9,8 +9,10 @@ import { BitRowDef, TableScrollComponent } from "./table-scroll.component";
 import { TableBodyDirective, TableComponent } from "./table.component";
 
 @NgModule({
-  imports: [CommonModule, ScrollingModule, BitRowDef],
-  declarations: [
+  imports: [
+    CommonModule,
+    ScrollingModule,
+    BitRowDef,
     CellDirective,
     RowDirective,
     SortableComponent,

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 {}

libs/components/src/toast/toast.module.ts

@@ -1,13 +1,10 @@
-import { CommonModule } from "@angular/common";
 import { ModuleWithProviders, NgModule } from "@angular/core";
 import { DefaultNoComponentGlobalConfig, GlobalConfig, TOAST_CONFIG } from "ngx-toastr";
 
-import { ToastComponent } from "./toast.component";
 import { BitwardenToastrComponent } from "./toastr.component";
 
 @NgModule({
-  imports: [CommonModule, ToastComponent],
-  declarations: [BitwardenToastrComponent],
+  imports: [BitwardenToastrComponent],
   exports: [BitwardenToastrComponent],
 })
 export class ToastModule {

libs/components/src/toast/toastr.component.ts

@@ -2,6 +2,8 @@ import { animate, state, style, transition, trigger } from "@angular/animations"
 import { Component } from "@angular/core";
 import { Toast as BaseToastrComponent } from "ngx-toastr";
 
+import { ToastComponent } from "./toast.component";
+
 @Component({
   template: `
     <bit-toast
@@ -22,5 +24,7 @@ import { Toast as BaseToastrComponent } from "ngx-toastr";
     ]),
   ],
   preserveWhitespaces: false,
+  standalone: true,
+  imports: [ToastComponent],
 })
 export class BitwardenToastrComponent extends BaseToastrComponent {}

libs/components/src/toggle-group/toggle-group.component.ts

@@ -13,6 +13,7 @@ let nextId = 0;
   selector: "bit-toggle-group",
   templateUrl: "./toggle-group.component.html",
   preserveWhitespaces: false,
+  standalone: true,
 })
 export class ToggleGroupComponent<TValue = unknown> {
   private id = nextId++;

libs/components/src/toggle-group/toggle-group.module.ts

@@ -1,14 +1,10 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { BadgeModule } from "../badge";
-
 import { ToggleGroupComponent } from "./toggle-group.component";
 import { ToggleComponent } from "./toggle.component";
 
 @NgModule({
-  imports: [CommonModule, BadgeModule],
+  imports: [ToggleGroupComponent, ToggleComponent],
   exports: [ToggleGroupComponent, ToggleComponent],
-  declarations: [ToggleGroupComponent, ToggleComponent],
 })
 export class ToggleGroupModule {}

libs/components/src/toggle-group/toggle.component.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { NgClass } from "@angular/common";
 import {
   AfterContentChecked,
   AfterViewInit,
@@ -19,6 +20,8 @@ let nextId = 0;
   selector: "bit-toggle",
   templateUrl: "./toggle.component.html",
   preserveWhitespaces: false,
+  standalone: true,
+  imports: [NgClass],
 })
 export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewInit {
   id = nextId++;

libs/components/src/typography/typography.directive.ts

@@ -31,6 +31,7 @@ const margins: Record<TypographyType, string[]> = {
 
 @Directive({
   selector: "[bitTypography]",
+  standalone: true,
 })
 export class TypographyDirective {
   @Input("bitTypography") bitTypography: TypographyType;