[CL-553] Migrate CL to Control Flow syntax (#12390)

libs/components/src/navigation/nav-divider.component.html

@@ -1 +1,3 @@
-<div *ngIf="sideNavService.open$ | async" class="tw-h-px tw-w-full tw-bg-secondary-300"></div>
+@if (sideNavService.open$ | async) {
+  <div class="tw-h-px tw-w-full tw-bg-secondary-300"></div>
+}

libs/components/src/navigation/nav-group.component.html

@@ -1,5 +1,5 @@
 <!-- This a higher order component that composes `NavItemComponent`  -->
-<ng-container *ngIf="!hideIfEmpty || nestedNavComponents.length > 0">
+@if (!hideIfEmpty || nestedNavComponents.length > 0) {
   <bit-nav-item
     [text]="text"
     [icon]="icon"
@@ -29,28 +29,29 @@
         [attr.aria-label]="['toggleCollapse' | i18n, text].join(' ')"
       ></button>
     </ng-template>
-
     <!-- Show toggle to the left for trees otherwise to the right -->
-    <ng-container slot="start" *ngIf="variant === 'tree'">
-      <ng-container *ngTemplateOutlet="button"></ng-container>
-    </ng-container>
-    <ng-container slot="end">
-      <ng-content select="[slot=end]"></ng-content>
-      <ng-container *ngIf="variant !== 'tree'">
+    @if (variant === "tree") {
+      <ng-container slot="start">
         <ng-container *ngTemplateOutlet="button"></ng-container>
       </ng-container>
+    }
+    <ng-container slot="end">
+      <ng-content select="[slot=end]"></ng-content>
+      @if (variant !== "tree") {
+        <ng-container *ngTemplateOutlet="button"></ng-container>
+      }
     </ng-container>
   </bit-nav-item>
-
   <!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
-  <ng-container *ngIf="sideNavService.open$ | async">
-    <div
-      *ngIf="open"
-      [attr.id]="contentId"
-      [attr.aria-label]="[text, 'submenu' | i18n].join(' ')"
-      role="group"
-    >
-      <ng-content></ng-content>
-    </div>
-  </ng-container>
-</ng-container>
+  @if (sideNavService.open$ | async) {
+    @if (open) {
+      <div
+        [attr.id]="contentId"
+        [attr.aria-label]="[text, 'submenu' | i18n].join(' ')"
+        role="group"
+      >
+        <ng-content></ng-content>
+      </div>
+    }
+  }
+}

libs/components/src/navigation/nav-group.component.ts

@@ -29,6 +29,7 @@ import { SideNavService } from "./side-nav.service";
   ],
   standalone: true,
   imports: [CommonModule, NavItemComponent, IconButtonModule, I18nPipe],
+  preserveWhitespaces: false,
 })
 export class NavGroupComponent extends NavBaseComponent implements AfterContentInit {
   @ContentChildren(NavBaseComponent, {

libs/components/src/navigation/nav-logo.component.html

@@ -1,20 +1,23 @@
-<div *ngIf="sideNavService.open" class="tw-sticky tw-top-0 tw-z-50">
-  <a
-    [routerLink]="route"
-    class="tw-px-5 tw-pb-5 tw-pt-7 tw-block tw-bg-background-alt3 tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-inset focus-visible:tw-ring-text-alt2"
-    [attr.aria-label]="label"
-    [title]="label"
-    routerLinkActive
-    [ariaCurrentWhenActive]="'page'"
-  >
-    <bit-icon [icon]="openIcon"></bit-icon>
-  </a>
-</div>
-<bit-nav-item
-  class="tw-block tw-pt-7"
-  [hideActiveStyles]="true"
-  [route]="route"
-  [icon]="closedIcon"
-  *ngIf="!sideNavService.open"
-  [text]="label"
-></bit-nav-item>
+@if (sideNavService.open) {
+  <div class="tw-sticky tw-top-0 tw-z-50">
+    <a
+      [routerLink]="route"
+      class="tw-px-5 tw-pb-5 tw-pt-7 tw-block tw-bg-background-alt3 tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-inset focus-visible:tw-ring-text-alt2"
+      [attr.aria-label]="label"
+      [title]="label"
+      routerLinkActive
+      [ariaCurrentWhenActive]="'page'"
+    >
+      <bit-icon [icon]="openIcon"></bit-icon>
+    </a>
+  </div>
+}
+@if (!sideNavService.open) {
+  <bit-nav-item
+    class="tw-block tw-pt-7"
+    [hideActiveStyles]="true"
+    [route]="route"
+    [icon]="closedIcon"
+    [text]="label"
+  ></bit-nav-item>
+}

libs/components/src/navigation/nav-logo.component.ts

@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { NgIf } from "@angular/common";
+
 import { Component, Input } from "@angular/core";
 import { RouterLinkActive, RouterLink } from "@angular/router";
 
@@ -14,7 +14,7 @@ import { SideNavService } from "./side-nav.service";
   selector: "bit-nav-logo",
   templateUrl: "./nav-logo.component.html",
   standalone: true,
-  imports: [NgIf, RouterLinkActive, RouterLink, BitIconComponent, NavItemComponent],
+  imports: [RouterLinkActive, RouterLink, BitIconComponent, NavItemComponent],
 })
 export class NavLogoComponent {
   /** Icon that is displayed when the side nav is closed */

libs/components/src/navigation/side-nav.component.html

@@ -1,42 +1,46 @@
-<nav
-  *ngIf="{
+@if (
+  {
     open: sideNavService.open$ | async,
     isOverlay: sideNavService.isOverlay$ | async,
-  } as data"
-  id="bit-side-nav"
-  class="tw-fixed md:tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-screen tw-flex-col tw-overscroll-none tw-overflow-auto tw-bg-background-alt3 tw-outline-none"
-  [ngClass]="{ 'tw-w-60': data.open }"
-  [ngStyle]="
-    variant === 'secondary' && {
-      '--color-text-alt2': 'var(--color-text-main)',
-      '--color-background-alt3': 'var(--color-secondary-100)',
-      '--color-background-alt4': 'var(--color-secondary-300)',
-    }
-  "
-  [cdkTrapFocus]="data.isOverlay"
-  [attr.role]="data.isOverlay ? 'dialog' : null"
-  [attr.aria-modal]="data.isOverlay ? 'true' : null"
-  (keydown)="handleKeyDown($event)"
->
-  <ng-content></ng-content>
-  <div class="tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3">
-    <bit-nav-divider></bit-nav-divider>
-    <ng-container *ngIf="data.open">
-      <ng-content select="[slot=footer]"></ng-content>
-    </ng-container>
-    <div class="tw-mx-0.5 tw-my-4 tw-w-[3.75rem]">
-      <button
-        #toggleButton
-        type="button"
-        class="tw-mx-auto tw-block tw-max-w-fit"
-        [bitIconButton]="data.open ? 'bwi-angle-left' : 'bwi-angle-right'"
-        buttonType="light"
-        size="small"
-        (click)="sideNavService.toggle()"
-        [attr.aria-label]="'toggleSideNavigation' | i18n"
-        [attr.aria-expanded]="data.open"
-        aria-controls="bit-side-nav"
-      ></button>
+  };
+  as data
+) {
+  <nav
+    id="bit-side-nav"
+    class="tw-fixed md:tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-screen tw-flex-col tw-overscroll-none tw-overflow-auto tw-bg-background-alt3 tw-outline-none"
+    [ngClass]="{ 'tw-w-60': data.open }"
+    [ngStyle]="
+      variant === 'secondary' && {
+        '--color-text-alt2': 'var(--color-text-main)',
+        '--color-background-alt3': 'var(--color-secondary-100)',
+        '--color-background-alt4': 'var(--color-secondary-300)',
+      }
+    "
+    [cdkTrapFocus]="data.isOverlay"
+    [attr.role]="data.isOverlay ? 'dialog' : null"
+    [attr.aria-modal]="data.isOverlay ? 'true' : null"
+    (keydown)="handleKeyDown($event)"
+  >
+    <ng-content></ng-content>
+    <div class="tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3">
+      <bit-nav-divider></bit-nav-divider>
+      @if (data.open) {
+        <ng-content select="[slot=footer]"></ng-content>
+      }
+      <div class="tw-mx-0.5 tw-my-4 tw-w-[3.75rem]">
+        <button
+          #toggleButton
+          type="button"
+          class="tw-mx-auto tw-block tw-max-w-fit"
+          [bitIconButton]="data.open ? 'bwi-angle-left' : 'bwi-angle-right'"
+          buttonType="light"
+          size="small"
+          (click)="sideNavService.toggle()"
+          [attr.aria-label]="'toggleSideNavigation' | i18n"
+          [attr.aria-expanded]="data.open"
+          aria-controls="bit-side-nav"
+        ></button>
+      </div>
     </div>
-  </div>
-</nav>
+  </nav>
+}