From 4ee83415227a85d0d396a95d605bee24d9a34ee4 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Mon, 23 Jun 2025 11:51:32 -0400
Subject: [PATCH] finish migrating anon-layout

---
 .../anon-layout/anon-layout.component.html    | 12 +++---
 .../src/anon-layout/anon-layout.component.ts  | 38 +++++++------------
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/libs/components/src/anon-layout/anon-layout.component.html b/libs/components/src/anon-layout/anon-layout.component.html
index 2999a615cdd..c4996666eb7 100644
--- a/libs/components/src/anon-layout/anon-layout.component.html
+++ b/libs/components/src/anon-layout/anon-layout.component.html
@@ -15,29 +15,29 @@
 
   <div
     class="tw-text-center tw-mb-4 sm:tw-mb-6"
-    [ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth === 'md' }"
+    [ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth() === 'md' }"
   >
     <div *ngIf="!hideIcon()" class="tw-mx-auto tw-max-w-24 sm:tw-max-w-28 md:tw-max-w-32">
       <bit-icon [icon]="icon"></bit-icon>
     </div>
 
-    <ng-container *ngIf="title">
+    <ng-container *ngIf="title()">
       <!-- Small screens -->
       <h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">
-        {{ title }}
+        {{ title() }}
       </h1>
       <!-- Medium to Larger screens -->
       <h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">
-        {{ title }}
+        {{ title() }}
       </h1>
     </ng-container>
 
-    <div *ngIf="subtitle" class="tw-text-sm sm:tw-text-base">{{ subtitle }}</div>
+    <div *ngIf="subtitle()" class="tw-text-sm sm:tw-text-base">{{ subtitle() }}</div>
   </div>
 
   <div
     class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
-    [ngClass]="{ 'tw-max-w-md': maxWidth === 'md', 'tw-max-w-3xl': maxWidth === '3xl' }"
+    [ngClass]="{ 'tw-max-w-md': maxWidth() === 'md', 'tw-max-w-3xl': maxWidth() === '3xl' }"
   >
     <div
       class="tw-rounded-2xl tw-mb-6 sm:tw-mb-10 tw-mx-auto tw-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts
index f72e1064dd2..9440ce5ded5 100644
--- a/libs/components/src/anon-layout/anon-layout.component.ts
+++ b/libs/components/src/anon-layout/anon-layout.component.ts
@@ -4,11 +4,11 @@ import { CommonModule } from "@angular/common";
 import {
   Component,
   HostBinding,
-  Input,
   OnChanges,
   OnInit,
   SimpleChanges,
   input,
+  model,
 } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
@@ -34,18 +34,10 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
     return ["tw-h-full"];
   }
 
-  // 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() title: string;
-  // 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;
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input() icon: Icon;
-  readonly showReadonlyHostname = input<boolean>(undefined);
+  readonly title = input<string>();
+  readonly subtitle = input<string>();
+  icon = model<Icon>();
+  readonly showReadonlyHostname = input<boolean>(false);
   readonly hideLogo = input<boolean>(false);
   readonly hideFooter = input<boolean>(false);
   readonly hideIcon = input<boolean>(false);
@@ -53,20 +45,16 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   /**
    * Max width of the title area content
    *
-   * @default null
+   * @default undefined
    */
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input() titleAreaMaxWidth?: "md";
+  titleAreaMaxWidth = model<"md">();
 
   /**
    * Max width of the layout content
    *
    * @default 'md'
    */
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input() maxWidth: "md" | "3xl" = "md";
+  maxWidth = model<"md" | "3xl">("md");
 
   protected logo = BitwardenLogo;
   protected year = "2024";
@@ -86,20 +74,20 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   }
 
   async ngOnInit() {
-    this.maxWidth = this.maxWidth ?? "md";
-    this.titleAreaMaxWidth = this.titleAreaMaxWidth ?? null;
+    this.maxWidth.set(this.maxWidth() ?? "md");
+    this.titleAreaMaxWidth.set(this.titleAreaMaxWidth() ?? null);
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
     this.version = await this.platformUtilsService.getApplicationVersion();
 
     // If there is no icon input, then use the default icon
-    if (this.icon == null) {
-      this.icon = BitwardenShield;
+    if (this.icon() == null) {
+      this.icon.set(BitwardenShield);
     }
   }
 
   async ngOnChanges(changes: SimpleChanges) {
     if (changes.maxWidth) {
-      this.maxWidth = changes.maxWidth.currentValue ?? "md";
+      this.maxWidth.set(changes.maxWidth.currentValue ?? "md");
     }
   }
 }