From fa5c6892d1423e47c1e850d3f6fe9f6455e4a851 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Wed, 25 Jun 2025 14:29:07 -0400
Subject: [PATCH] fix compile errors

---
 libs/components/src/anon-layout/anon-layout.component.html | 2 +-
 libs/components/src/form-field/form-field.component.html   | 4 ++--
 libs/components/src/form-field/form-field.component.ts     | 7 +++++--
 libs/components/src/icon-button/icon-button.component.html | 2 +-
 .../src/multi-select/multi-select.component.html           | 4 ++--
 libs/components/src/navigation/nav-group.component.html    | 2 +-
 libs/components/src/navigation/nav-item.component.html     | 2 +-
 .../read-only-cipher-card.component.ts                     | 2 +-
 8 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/libs/components/src/anon-layout/anon-layout.component.html b/libs/components/src/anon-layout/anon-layout.component.html
index c4996666eb7..e1581e54ea9 100644
--- a/libs/components/src/anon-layout/anon-layout.component.html
+++ b/libs/components/src/anon-layout/anon-layout.component.html
@@ -18,7 +18,7 @@
     [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>
+      <bit-icon [icon]="icon()"></bit-icon>
     </div>
 
     <ng-container *ngIf="title()">
diff --git a/libs/components/src/form-field/form-field.component.html b/libs/components/src/form-field/form-field.component.html
index db3f29fc1ea..c4fd018b3ba 100644
--- a/libs/components/src/form-field/form-field.component.html
+++ b/libs/components/src/form-field/form-field.component.html
@@ -85,8 +85,8 @@
     <div
       class="tw-gap-1 tw-flex tw-min-h-[1.85rem] tw-border-0 tw-border-solid"
       [ngClass]="{
-        'tw-border-secondary-300/50 tw-border-b tw-pb-[2px]': !disableReadOnlyBorder(),
-        'tw-border-transparent tw-pb-[3px]': disableReadOnlyBorder(),
+        'tw-border-secondary-300/50 tw-border-b tw-pb-[2px]': !disableReadOnlyBorder,
+        'tw-border-transparent tw-pb-[3px]': disableReadOnlyBorder,
       }"
     >
       <div
diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index 929e8ca1cf6..660fcd5c8d6 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -12,7 +12,7 @@ import {
   ViewChild,
   signal,
   input,
-  model,
+  Input,
 } from "@angular/core";
 
 import { I18nPipe } from "@bitwarden/ui-common";
@@ -42,7 +42,10 @@ export class BitFormFieldComponent implements AfterContentChecked {
   readonly disableMargin = input(false, { transform: booleanAttribute });
 
   /** If `true`, remove the bottom border for `readonly` inputs */
-  disableReadOnlyBorder = model(false);
+  // TODO: Skipped for signal migration because:
+  //  Your application code writes to the input. This prevents migration.
+  @Input({ transform: booleanAttribute })
+  disableReadOnlyBorder = false;
 
   protected prefixHasChildren = signal(false);
   protected suffixHasChildren = signal(false);
diff --git a/libs/components/src/icon-button/icon-button.component.html b/libs/components/src/icon-button/icon-button.component.html
index 0145f0b0ba5..ad8e32dec75 100644
--- a/libs/components/src/icon-button/icon-button.component.html
+++ b/libs/components/src/icon-button/icon-button.component.html
@@ -9,7 +9,7 @@
     <i
       class="bwi bwi-spinner bwi-spin"
       aria-hidden="true"
-      [ngClass]="{ 'bwi-lg': size === 'default' }"
+      [ngClass]="{ 'bwi-lg': size() === 'default' }"
     ></i>
   </span>
 </span>
diff --git a/libs/components/src/multi-select/multi-select.component.html b/libs/components/src/multi-select/multi-select.component.html
index 767b7e9d90d..1b6fb554403 100644
--- a/libs/components/src/multi-select/multi-select.component.html
+++ b/libs/components/src/multi-select/multi-select.component.html
@@ -1,11 +1,11 @@
 <ng-select
-  [items]="baseItems"
+  [items]="baseItems()"
   [(ngModel)]="selectedItems"
   (ngModelChange)="onChange($event)"
   (blur)="onBlur()"
   bindLabel="listName"
   groupBy="parentGrouping"
-  [placeholder]="placeholder"
+  [placeholder]="placeholder()"
   [loading]="loading()"
   [loadingText]="loadingText"
   notFoundText="{{ 'multiSelectNotFound' | i18n }}"
diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html
index 472c2941b18..ca23cc52cec 100644
--- a/libs/components/src/navigation/nav-group.component.html
+++ b/libs/components/src/navigation/nav-group.component.html
@@ -7,7 +7,7 @@
     [relativeTo]="relativeTo()"
     [routerLinkActiveOptions]="routerLinkActiveOptions()"
     [variant]="variant()"
-    [treeDepth]="treeDepth"
+    [treeDepth]="treeDepth()"
     (mainContentClicked)="handleMainContentClicked()"
     [ariaLabel]="ariaLabel()"
     [hideActiveStyles]="parentHideActiveStyles"
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index 96d2f32ecc7..d151da74671 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -16,7 +16,7 @@
       <div
         [ngStyle]="{
           'padding-left': data.open
-            ? (variant() === 'tree' ? 2.5 : 1) + treeDepth * 1.5 + 'rem'
+            ? (variant() === 'tree' ? 2.5 : 1) + treeDepth() * 1.5 + 'rem'
             : '0',
         }"
         class="tw-relative tw-flex"
diff --git a/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts
index 335297c95b7..8f6b9954a9f 100644
--- a/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts
+++ b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts
@@ -19,7 +19,7 @@ export class ReadOnlyCipherCardComponent implements AfterViewInit {
       // Delay model update until next change detection cycle
       setTimeout(() => {
         if (this.formFields) {
-          this.formFields.last.disableReadOnlyBorder.set(true);
+          this.formFields.last.disableReadOnlyBorder = true;
         }
       });
     }