Replace NgbNav with @angular/aria tabs in users component

Migrates the users component from ng-bootstrap's NgbNav to @angular/aria tab components for tab navigation. Updates the HTML structure and imports, adds a selectedTab property for tab state, and ensures the tab resets when opening the modal. Also updates peerDependencies for @angular/aria in package.json files.

npm/ng-packs/packages/feature-management/package.json

@@ -11,7 +11,7 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/aria": ">=21.0.0"
+    "@angular/aria": "21.0.0"
   },
   "publishConfig": {
     "access": "public"

npm/ng-packs/packages/identity/package.json

@@ -12,6 +12,9 @@
     "@abp/ng.theme.shared": "~10.1.0-rc.1",
     "tslib": "^2.0.0"
   },
+  "peerDependencies": {
+    "@angular/aria": "21.0.0"
+  },
   "publishConfig": {
     "access": "public"
   }

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -28,39 +28,47 @@
     <ng-template #abpBody>
       @if (form) {
         <form [formGroup]="form" (ngSubmit)="save()">
-          <ul ngbNav #nav="ngbNav" class="nav-tabs">
-            <li ngbNavItem>
-              <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
-              <ng-template ngbNavContent>
-                <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-              </ng-template>
-            </li>
+          <div ngTabs selectionMode="follow">
+            <div ngTabList [(selectedTab)]="selectedTab" class="nav nav-tabs">
+              <button ngTab #tabInfo="ngTab" [value]="'0'" class="nav-link" [class.active]="tabInfo.selected()" type="button">
+                {{ 'AbpIdentity::UserInformations' | abpLocalization }}
+              </button>
+              <button ngTab #tabRoles="ngTab" [value]="'1'" class="nav-link" [class.active]="tabRoles.selected()" type="button">
+                {{ 'AbpIdentity::Roles' | abpLocalization }}
+              </button>
+            </div>
 
-            <li ngbNavItem>
-              <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
-              <ng-template ngbNavContent>
-                @for (roleGroup of roleGroups; track $index; let i = $index) {
-                  <div class="form-check mb-2">
-                    <abp-checkbox
-                      *abpReplaceableTemplate="{
-                        inputs: {
-                          checkboxId: 'roles-' + i,
-                          label: roles[i].name,
-                          formControl: roleGroup.controls[roles[i].name]
-                        },
-                        componentKey: inputKey
-                      }"
-                      [checkboxId]="'roles-' + i"
-                      [formControl]="roleGroup.controls[roles[i].name]"
-                      [label]="roles[i].name"
-                    >
-                    </abp-checkbox>
-                  </div>
-                }
-              </ng-template>
-            </li>
-          </ul>
-          <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
+            <div class="mt-2 fade-in-top">
+              <div ngTabPanel [value]="'0'">
+                <ng-template ngTabContent>
+                  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+                </ng-template>
+              </div>
+
+              <div ngTabPanel [value]="'1'">
+                <ng-template ngTabContent>
+                  @for (roleGroup of roleGroups; track $index; let i = $index) {
+                    <div class="form-check mb-2">
+                      <abp-checkbox
+                        *abpReplaceableTemplate="{
+                          inputs: {
+                            checkboxId: 'roles-' + i,
+                            label: roles[i].name,
+                            formControl: roleGroup.controls[roles[i].name]
+                          },
+                          componentKey: inputKey
+                        }"
+                        [checkboxId]="'roles-' + i"
+                        [formControl]="roleGroup.controls[roles[i].name]"
+                        [label]="roles[i].name"
+                      >
+                      </abp-checkbox>
+                    </div>
+                  }
+                </ng-template>
+              </div>
+            </div> 
+          </div>
         </form>
       } @else {
         <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -52,7 +52,8 @@ import {
 import { finalize, switchMap, tap } from 'rxjs/operators';
 import { eIdentityComponents } from '../../enums/components';
 import { PageComponent } from '@abp/ng.components/page';
-import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { Tabs, TabList, Tab, TabPanel, TabContent } from '@angular/aria/tabs';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
@@ -70,7 +71,11 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
     FormsModule,
     PermissionManagementComponent,
     PageComponent,
-    NgbNavModule,
+    Tabs,
+    TabList,
+    Tab,
+    TabPanel,
+    TabContent,
     NgbDropdownModule,
     NgxValidateCoreModule,
     LocalizationPipe,
@@ -101,6 +106,8 @@ export class UsersComponent implements OnInit {
 
   selected?: IdentityUserDto;
 
+  selectedTab = '0';
+
   selectedUserRoles?: IdentityRoleDto[];
 
   roles?: IdentityRoleDto[];
@@ -159,6 +166,7 @@ export class UsersComponent implements OnInit {
   }
 
   openModal() {
+    this.selectedTab = '0';
     this.buildForm();
     this.isModalVisible = true;
   }