Refactor feature management to use @angular/aria tabs

Replaces ng-bootstrap nav components with @angular/aria tab components in the feature management UI for improved accessibility and alignment with Angular's latest standards. Updates dependencies and imports accordingly, and adds @angular/aria as a peer dependency.

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

@@ -10,6 +10,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/feature-management/src/lib/components/feature-management/feature-management.component.html

@@ -12,18 +12,26 @@
     <ng-template #abpBody>
       <div class="row">
         @if (groups.length) {
-          <div class="col-md-4">
+          <div ngTabs orientation="vertical" class="row">
-            <ul
+            <div class="col-md-4">
-              ngbNav
+              <div ngTabList orientation="vertical" selectionMode="follow" [(selectedTab)]="selectedGroupDisplayName" class="nav nav-pills flex-column">
-              #nav="ngbNav"
+                @for (group of groups; track group.name) {
-              [(activeId)]="selectedGroupDisplayName"
+                  <button ngTab #tab="ngTab" [value]="group.displayName" class="nav-link text-start" [class.active]="tab.selected()">
-              class="nav-pills"
+                    {{ group.displayName }}
-              orientation="vertical"
+                  </button>
-            >
+                }
+              </div>
+            </div>
+            <ng-template #descTmp let-description>
+              @if (description) {
+                <small class="d-block form-text text-muted">{{ description }}</small>
+              }
+            </ng-template>
+
+            <div class="col-md-8">
               @for (group of groups; track group.name) {
-                <li [ngbNavItem]="group.displayName">
+                <div ngTabPanel [value]="group.displayName">
-                  <a ngbNavLink>{{ group.displayName }}</a>
+                  <ng-template ngTabContent>
-                  <ng-template ngbNavContent>
                     <h4>{{ selectedGroupDisplayName }}</h4>
                     <hr class="mt-2 mb-3" />
 
@@ -128,18 +136,10 @@
                       </div>
                     }
                   </ng-template>
-                </li>
+                </div>
               }
-            </ul>
+            </div>
           </div>
-
-          <ng-template #descTmp let-description>
-            @if (description) {
-              <small class="d-block form-text text-muted">{{ description }}</small>
-            }
-          </ng-template>
-
-          <div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div>
         }
 
         @if (!groups.length) {

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output, inject, DOCUMENT } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet, NgStyle } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStateService, LocalizationPipe, TrackByService } from '@abp/ng.core';
 import {
@@ -17,7 +17,7 @@ import {
   ModalComponent,
   ToasterService,
 } from '@abp/ng.theme.shared';
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { Tabs, TabList, Tab, TabPanel, TabContent } from '@angular/aria/tabs';
 import { finalize } from 'rxjs/operators';
 import { FreeTextInputDirective } from '../../directives';
 import { FeatureManagement } from '../../models';
@@ -36,11 +36,16 @@ const DEFAULT_PROVIDER_NAME = 'D';
   exportAs: 'abpFeatureManagement',
   imports: [
     NgTemplateOutlet,
+    NgStyle,
     ButtonComponent,
     ModalComponent,
     LocalizationPipe,
     FormsModule,
-    NgbNavModule,
+    Tabs,
+    TabList,
+    Tab,
+    TabPanel,
+    TabContent,
     FreeTextInputDirective,
     ModalCloseDirective,
   ],