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