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

* Migrate component library to standalone components

* Fix tests

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;