From 35119b6adee4f08a1eb092c4aaf42b60ffcf95b1 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Mon, 23 Jun 2025 16:01:23 -0400
Subject: [PATCH] finish migrating dialog

---
 .../src/dialog/dialog/dialog.component.html   | 12 +++++-----
 .../src/dialog/dialog/dialog.component.ts     | 22 ++++---------------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index a41a78e7113..c19dce7222c 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/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]="{
@@ -23,9 +23,9 @@
       class="tw-text-main tw-mb-0 tw-truncate"
     >
       {{ title() }}
-      @if (subtitle) {
+      @if (subtitle(); as subtitleText) {
         <span class="tw-text-muted tw-font-normal tw-text-sm">
-          {{ subtitle }}
+          {{ subtitleText }}
         </span>
       }
       <ng-content select="[bitDialogTitle]"></ng-content>
@@ -57,8 +57,8 @@
     <div
       cdkScrollable
       [ngClass]="{
-        'tw-p-4': !disablePadding && !isDrawer,
-        'tw-px-6 tw-py-4': !disablePadding && isDrawer,
+        '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(),
       }"
@@ -67,7 +67,7 @@
     </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']"
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts
index 2036caa3791..78afa7a7422 100644
--- a/libs/components/src/dialog/dialog/dialog.component.ts
+++ b/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, input } from "@angular/core";
+import { Component, HostBinding, inject, viewChild, input, booleanAttribute } from "@angular/core";
 
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -50,28 +47,17 @@ export class DialogComponent {
   /**
    * Title to show in the dialog's header
    */
-  readonly title = input<string>(undefined);
+  readonly title = input<string>();
 
   /**
    * Subtitle to show in the dialog's header
    */
-  // TODO: Skipped for migration because:
-  //  This input is used in a control flow expression (e.g. `@if` or `*ngIf`)
-  //  and migrating would break narrowing currently.
-  @Input() subtitle: string;
+  readonly subtitle = input<string>();
 
-  private _disablePadding = false;
   /**
    * Disable the built-in padding on the dialog, for use with tabbed dialogs.
    */
-  // TODO: Skipped for migration because:
-  //  Accessor inputs cannot be migrated as they are too complex.
-  @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.