fix compile errors

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()">

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

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);

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>

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 }}"

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"

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"

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;
         }
       });
     }