finish migrating breadcrumbs

libs/components/src/breadcrumbs/breadcrumb.component.html

@@ -1,5 +1,5 @@
 <ng-template>
-  @if (icon) {
+  @if (icon(); as icon) {
     <i class="bwi {{ icon }} !tw-me-2" aria-hidden="true"></i>
   }
   <ng-content></ng-content>

libs/components/src/breadcrumbs/breadcrumb.component.ts

@@ -1,15 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  TemplateRef,
-  ViewChild,
-  input,
-} from "@angular/core";
+import { Component, EventEmitter, Output, TemplateRef, ViewChild, input } from "@angular/core";
 import { QueryParamsHandling } from "@angular/router";
 
 @Component({
@@ -17,17 +9,9 @@ import { QueryParamsHandling } from "@angular/router";
   templateUrl: "./breadcrumb.component.html",
 })
 export class BreadcrumbComponent {
-  // 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()
-  icon?: string;
+  readonly icon = input<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()
-  route?: string | any[] = undefined;
+  readonly route = input<string | any[]>(undefined);
 
   readonly queryParams = input<Record<string, string>>({});
 

libs/components/src/breadcrumbs/breadcrumbs.component.html

@@ -1,17 +1,16 @@
 @for (breadcrumb of beforeOverflow; track breadcrumb; let last = $last) {
-  @if (breadcrumb.route) {
+  @if (breadcrumb.route(); as route) {
     <a
       bitLink
       linkType="primary"
       class="tw-my-2 tw-inline-block"
-      [routerLink]="breadcrumb.route"
+      [routerLink]="route"
       [queryParams]="breadcrumb.queryParams()"
       [queryParamsHandling]="breadcrumb.queryParamsHandling()"
     >
       <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
     </a>
-  }
-  @if (!breadcrumb.route) {
+  } @else {
     <button
       type="button"
       bitLink
@@ -39,18 +38,17 @@
   ></button>
   <bit-menu #overflowMenu>
     @for (breadcrumb of overflow; track breadcrumb) {
-      @if (breadcrumb.route) {
+      @if (breadcrumb.route(); as route) {
         <a
           bitMenuItem
           linkType="primary"
-          [routerLink]="breadcrumb.route"
+          [routerLink]="route"
           [queryParams]="breadcrumb.queryParams()"
           [queryParamsHandling]="breadcrumb.queryParamsHandling()"
         >
           <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
         </a>
-      }
-      @if (!breadcrumb.route) {
+      } @else {
         <button type="button" bitMenuItem linkType="primary" (click)="breadcrumb.onClick($event)">
           <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
         </button>
@@ -59,19 +57,18 @@
   </bit-menu>
   <i class="bwi bwi-angle-right tw-mx-1.5 tw-text-main"></i>
   @for (breadcrumb of afterOverflow; track breadcrumb; let last = $last) {
-    @if (breadcrumb.route) {
+    @if (breadcrumb.route(); as route) {
       <a
         bitLink
         linkType="primary"
         class="tw-my-2 tw-inline-block"
-        [routerLink]="breadcrumb.route"
+        [routerLink]="route"
         [queryParams]="breadcrumb.queryParams()"
         [queryParamsHandling]="breadcrumb.queryParamsHandling()"
       >
         <ng-container [ngTemplateOutlet]="breadcrumb.content"></ng-container>
       </a>
-    }
-    @if (!breadcrumb.route) {
+    } @else {
       <button
         type="button"
         bitLink