[CL-707] Migrate CL codebase to signals (#15340)

libs/components/src/dialog/dialog/dialog.component.html

@@ -6,7 +6,7 @@
   cdkTrapFocus
   cdkTrapFocusAutoCapture
 >
-  @let showHeaderBorder = !isDrawer || background === "alt" || bodyHasScrolledFrom().top;
+  @let showHeaderBorder = !isDrawer || background() === "alt" || bodyHasScrolledFrom().top;
   <header
     class="tw-flex tw-justify-between tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid"
     [ngClass]="{
@@ -22,10 +22,10 @@
       noMargin
       class="tw-text-main tw-mb-0 tw-truncate"
     >
-      {{ title }}
-      @if (subtitle) {
+      {{ title() }}
+      @if (subtitle(); as subtitleText) {
         <span class="tw-text-muted tw-font-normal tw-text-sm">
-          {{ subtitle }}
+          {{ subtitleText }}
         </span>
       }
       <ng-content select="[bitDialogTitle]"></ng-content>
@@ -46,12 +46,12 @@
   <div
     class="tw-relative tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden"
     [ngClass]="{
-      'tw-min-h-60': loading,
-      'tw-bg-background': background === 'default',
-      'tw-bg-background-alt': background === 'alt',
+      'tw-min-h-60': loading(),
+      'tw-bg-background': background() === 'default',
+      'tw-bg-background-alt': background() === 'alt',
     }"
   >
-    @if (loading) {
+    @if (loading()) {
       <div class="tw-absolute tw-flex tw-size-full tw-items-center tw-justify-center">
         <i class="bwi bwi-spinner bwi-spin bwi-lg" [attr.aria-label]="'loading' | i18n"></i>
       </div>
@@ -59,17 +59,17 @@
     <div
       cdkScrollable
       [ngClass]="{
-        'tw-p-4': !disablePadding && !isDrawer,
-        'tw-px-6 tw-py-4': !disablePadding && isDrawer,
-        'tw-overflow-y-auto': !loading,
-        'tw-invisible tw-overflow-y-hidden': loading,
+        'tw-p-4': !disablePadding() && !isDrawer,
+        'tw-px-6 tw-py-4': !disablePadding() && isDrawer,
+        'tw-overflow-y-auto': !loading(),
+        'tw-invisible tw-overflow-y-hidden': loading(),
       }"
     >
       <ng-content select="[bitDialogContent]"></ng-content>
     </div>
   </div>
 
-  @let showFooterBorder = !isDrawer || background === "alt" || bodyHasScrolledFrom().bottom;
+  @let showFooterBorder = !isDrawer || background() === "alt" || bodyHasScrolledFrom().bottom;
   <footer
     class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background"
     [ngClass]="[isDrawer ? 'tw-px-6 tw-py-4' : 'tw-p-4']"

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

@@ -1,10 +1,7 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { CdkTrapFocus } from "@angular/cdk/a11y";
-import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CdkScrollable } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { Component, HostBinding, Input, inject, viewChild } from "@angular/core";
+import { Component, HostBinding, inject, viewChild, input, booleanAttribute } from "@angular/core";
 
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -40,39 +37,32 @@ export class DialogComponent {
   protected bodyHasScrolledFrom = hasScrolledFrom(this.scrollableBody);
 
   /** Background color */
-  @Input()
-  background: "default" | "alt" = "default";
+  readonly background = input<"default" | "alt">("default");
 
   /**
    * Dialog size, more complex dialogs should use large, otherwise default is fine.
    */
-  @Input() dialogSize: "small" | "default" | "large" = "default";
+  readonly dialogSize = input<"small" | "default" | "large">("default");
 
   /**
    * Title to show in the dialog's header
    */
-  @Input() title: string;
+  readonly title = input<string>();
 
   /**
    * Subtitle to show in the dialog's header
    */
-  @Input() subtitle: string;
+  readonly subtitle = input<string>();
 
-  private _disablePadding = false;
   /**
    * Disable the built-in padding on the dialog, for use with tabbed dialogs.
    */
-  @Input() set disablePadding(value: boolean | "") {
-    this._disablePadding = coerceBooleanProperty(value);
-  }
-  get disablePadding() {
-    return this._disablePadding;
-  }
+  readonly disablePadding = input(false, { transform: booleanAttribute });
 
   /**
    * Mark the dialog as loading which replaces the content with a spinner.
    */
-  @Input() loading = false;
+  readonly loading = input(false);
 
   @HostBinding("class") get classes() {
     // `tw-max-h-[90vh]` is needed to prevent dialogs from overlapping the desktop header
@@ -94,7 +84,7 @@ export class DialogComponent {
   }
 
   get width() {
-    switch (this.dialogSize) {
+    switch (this.dialogSize()) {
       case "small": {
         return "md:tw-max-w-sm";
       }

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

@@ -1,11 +1,11 @@
 import { DialogRef } from "@angular/cdk/dialog";
-import { Directive, HostBinding, HostListener, Input, Optional } from "@angular/core";
+import { Directive, HostBinding, HostListener, Optional, input } from "@angular/core";
 
 @Directive({
   selector: "[bitDialogClose]",
 })
 export class DialogCloseDirective {
-  @Input("bitDialogClose") dialogResult: any;
+  readonly dialogResult = input<any>(undefined, { alias: "bitDialogClose" });
 
   constructor(@Optional() public dialogRef: DialogRef) {}
 
@@ -20,6 +20,6 @@ export class DialogCloseDirective {
       return;
     }
 
-    this.dialogRef.close(this.dialogResult);
+    this.dialogRef.close(this.dialogResult());
   }
 }

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

@@ -1,5 +1,5 @@
 import { CdkDialogContainer, DialogRef } from "@angular/cdk/dialog";
-import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
+import { Directive, HostBinding, OnInit, Optional, input } from "@angular/core";
 
 // Increments for each instance of this component
 let nextId = 0;
@@ -10,7 +10,7 @@ let nextId = 0;
 export class DialogTitleContainerDirective implements OnInit {
   @HostBinding("id") id = `bit-dialog-title-${nextId++}`;
 
-  @Input() simple = false;
+  readonly simple = input(false);
 
   constructor(@Optional() private dialogRef: DialogRef<any>) {}