[CL-707] Migrate CL codebase to signals (#15340)

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

@@ -1,28 +1,28 @@
 <!-- This a higher order component that composes `NavItemComponent`  -->
-@if (!hideIfEmpty || nestedNavComponents.length > 0) {
+@if (!hideIfEmpty() || nestedNavComponents.length > 0) {
   <bit-nav-item
-    [text]="text"
-    [icon]="icon"
-    [route]="route"
-    [relativeTo]="relativeTo"
-    [routerLinkActiveOptions]="routerLinkActiveOptions"
+    [text]="text()"
+    [icon]="icon()"
+    [route]="route()"
+    [relativeTo]="relativeTo()"
+    [routerLinkActiveOptions]="routerLinkActiveOptions()"
     (mainContentClicked)="handleMainContentClicked()"
-    [ariaLabel]="ariaLabel"
+    [ariaLabel]="ariaLabel()"
     [hideActiveStyles]="parentHideActiveStyles"
   >
     <ng-template #button>
       <button
         type="button"
         class="tw-ms-auto"
-        [bitIconButton]="open ? 'bwi-angle-up' : 'bwi-angle-down'"
+        [bitIconButton]="open() ? 'bwi-angle-up' : 'bwi-angle-down'"
         [buttonType]="'light'"
         (click)="toggle($event)"
         size="small"
         [title]="'toggleCollapse' | i18n"
         aria-haspopup="true"
-        [attr.aria-expanded]="open.toString()"
+        [attr.aria-expanded]="open().toString()"
         [attr.aria-controls]="contentId"
-        [attr.aria-label]="['toggleCollapse' | i18n, text].join(' ')"
+        [attr.aria-label]="['toggleCollapse' | i18n, text()].join(' ')"
       ></button>
     </ng-template>
     <ng-container slot="end">
@@ -32,10 +32,10 @@
   </bit-nav-item>
   <!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
   @if (sideNavService.open$ | async) {
-    @if (open) {
+    @if (open()) {
       <div
         [attr.id]="contentId"
-        [attr.aria-label]="[text, 'submenu' | i18n].join(' ')"
+        [attr.aria-label]="[text(), 'submenu' | i18n].join(' ')"
         role="group"
       >
         <ng-content></ng-content>