Merge pull request #24623 from abpframework/issue-24565

Refactor setting management to use @angular/aria tabs - issue-24565

npm/ng-packs/package.json

@@ -56,6 +56,7 @@
     "@angular-eslint/eslint-plugin-template": "~21.0.0",
     "@angular-eslint/template-parser": "~21.0.0",
     "@angular/animations": "21.0.0",
+    "@angular/aria": "~21.0.0",
     "@angular/build": "~21.0.0",
     "@angular/cli": "~21.0.0",
     "@angular/common": "~21.0.0",
@@ -147,4 +148,4 @@
   "dependencies": {
     "openid-client": "^6.6.4"
   }
-}
+}

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

@@ -11,6 +11,9 @@
     "@abp/ng.theme.shared": "~10.1.0-rc.1",
     "tslib": "^2.0.0"
   },
+  "peerDependencies": {
+    "@angular/aria": "^21.0.0"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -28,4 +31,4 @@
     "csharp",
     "webapp"
   ]
-}
+}

npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html

@@ -2,41 +2,29 @@
   <div id="SettingManagementWrapper">
     <div class="card">
       <div class="card-body">
-        <div class="row">
+        <div class="row" ngTabs>
           <div class="col-12 col-md-3 mb-2 mb-md-0">
-            <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
+            <div class="nav flex-column nav-pills" id="nav-tab" ngTabList orientation="vertical"
+              [selectedTab]="selected?.name">
               <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
-                <li
-                  (click)="selected = setting"
-                  class="nav-item pointer"
-                  *abpPermission="setting.requiredPolicy"
-                >
-                  <a
-                    class="nav-link"
-                    [id]="setting.name + '-tab'"
-                    role="tab"
-                    [class.active]="setting.name === selected.name"
-                    >{{ setting.name | abpLocalization }}</a
-                  >
-                </li>
+                <button ngTab #tab="ngTab" [value]="setting.name" (click)="selected = setting"
+                  class="nav-link text-start" [class.active]="tab.selected()" *abpPermission="setting.requiredPolicy">
+                  {{ setting.name | abpLocalization }}
+                </button>
               </ng-container>
-            </ul>
+            </div>
           </div>
           <div class="col-12 col-md-9">
             @if (settings.length) {
-              <div class="tab-content pt-0">
-                <div
-                  class="tab-pane fade show active"
-                  [id]="selected.name + '-tab'"
-                  role="tabpanel"
-                >
-                  <ng-container *ngComponentOutlet="selected.component" />
-                </div>
+            <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
+              <div ngTabPanel [value]="setting.name" class="tab-pane" *abpPermission="setting.requiredPolicy">
+                <ng-container *ngComponentOutlet="setting.component" />
               </div>
+            </ng-container>
             }
           </div>
         </div>
       </div>
     </div>
   </div>
-</abp-page>
+</abp-page>

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

@@ -4,11 +4,17 @@ import { Component, inject, OnDestroy, OnInit, TrackByFunction } from '@angular/
 import { Subscription } from 'rxjs';
 import { NgComponentOutlet } from '@angular/common';
 import { PageComponent } from '@abp/ng.components/page';
+import { Tab, Tabs, TabList, TabPanel } from '@angular/aria/tabs';
 
 @Component({
   selector: 'abp-setting-management',
   templateUrl: './setting-management.component.html',
-  imports: [NgComponentOutlet, PageComponent, LocalizationPipe, PermissionDirective, ForDirective],
+  imports: [NgComponentOutlet, PageComponent, LocalizationPipe, PermissionDirective, ForDirective, Tabs, TabList, Tab, TabPanel],
+  styles: [`
+    :host [ngTabPanel][inert] {
+      display: none;
+    }
+  `],
 })
 export class SettingManagementComponent implements OnDestroy, OnInit {
   private settingTabsService = inject(SettingTabsService);

templates/app-nolayers/angular/package.json

@@ -22,6 +22,7 @@
     "@abp/ng.theme.lepton-x": "~5.1.0-rc.1",
     "@abp/ng.theme.shared": "~10.1.0-rc.1",
     "@angular/animations": "~21.0.0",
+    "@angular/aria": "~21.0.0",
     "@angular/common": "~21.0.0",
     "@angular/compiler": "~21.0.0",
     "@angular/core": "~21.0.0",
@@ -59,4 +60,4 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "typescript": "~5.9.0"
   }
-}
+}

templates/app/angular/package.json

@@ -22,6 +22,7 @@
     "@abp/ng.theme.lepton-x": "~5.1.0-rc.1",
     "@abp/ng.theme.shared": "~10.1.0-rc.1",
     "@angular/animations": "~21.0.0",
+    "@angular/aria": "~21.0.0",
     "@angular/common": "~21.0.0",
     "@angular/compiler": "~21.0.0",
     "@angular/core": "~21.0.0",
@@ -59,4 +60,4 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "typescript": "~5.9.3"
   }
-}
+}

templates/module/angular/package.json

@@ -23,6 +23,7 @@
     "@abp/ng.theme.basic": "~10.1.0-rc.1",
     "@abp/ng.theme.shared": "~10.1.0-rc.1",
     "@angular/animations": "~21.0.0",
+    "@angular/aria": "~21.0.0",
     "@angular/common": "~21.0.0",
     "@angular/compiler": "~21.0.0",
     "@angular/core": "~21.0.0",
@@ -61,4 +62,4 @@
     "symlink": "^2.0.0",
     "typescript": "~5.9.0"
   }
-}
+}