Replace custom tabs with NgbNav; add NgbNavModule

Replace the previous ngTabs/ngTab implementation in users.component.html with ng-bootstrap's ngbNav/ngbNavItem/ngbNavContent and an ngbNavOutlet for rendering tab content. Update users.component.ts to import and declare NgbNavModule and remove the removed @angular/aria tab imports. Also remove the @angular/aria peerDependency from the package.json for the identity package. These changes migrate the users UI to use ngbNav for tabbing and keep existing form/roles markup and localization intact.

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

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

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

@@ -28,47 +28,39 @@
     <ng-template #abpBody>
       @if (form) {
         <form [formGroup]="form" (ngSubmit)="save()">
-          <div ngTabs selectionMode="follow">
-            <div ngTabList [(selectedTab)]="selectedTab" class="nav nav-tabs">
-              <button ngTab #tabInfo="ngTab" [value]="'user-info'" class="nav-link" [class.active]="tabInfo.selected()" type="button">
-                {{ 'AbpIdentity::UserInformations' | abpLocalization }}
-              </button>
-              <button ngTab #tabRoles="ngTab" [value]="'roles'" class="nav-link" [class.active]="tabRoles.selected()" type="button">
-                {{ 'AbpIdentity::Roles' | abpLocalization }}
-              </button>
-            </div>
+          <ul ngbNav #newUserNav="ngbNav" class="nav-tabs" [(activeId)]="selectedTab">
+            <li ngbNavItem="user-info">
+              <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
+              <ng-template ngbNavContent>
+                <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+              </ng-template>
+            </li>
+            <li ngbNavItem="roles">
+              <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">
-              <div ngTabPanel [value]="'user-info'">
-                <ng-template ngTabContent>
-                  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-                </ng-template>
-              </div>
-
-              <div ngTabPanel [value]="'roles'">
-                <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>
+          <div class="mt-2 fade-in-top" [ngbNavOutlet]="newUserNav"></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,8 +52,7 @@ import {
 import { finalize, switchMap, tap } from 'rxjs/operators';
 import { eIdentityComponents } from '../../enums/components';
 import { PageComponent } from '@abp/ng.components/page';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { Tabs, TabList, Tab, TabPanel, TabContent } from '@angular/aria/tabs';
+import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @Component({
@@ -71,12 +70,8 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
     FormsModule,
     PermissionManagementComponent,
     PageComponent,
-    Tabs,
-    TabList,
-    Tab,
-    TabPanel,
-    TabContent,
     NgbDropdownModule,
+    NgbNavModule,
     NgxValidateCoreModule,
     LocalizationPipe,
     ExtensibleTableComponent,