Integrate @angular/aria tabs into permission management

Refactored the permission management component to use @angular/aria tab components for group navigation, improving accessibility and structure. Updated the template and styles to support ngTabs, TabList, Tab, TabPanel, and TabContent. Added @angular/aria as a peer dependency in package.json.

npm/ng-packs/packages/permission-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/permission-management/src/lib/components/permission-management.component.html

@@ -43,18 +43,27 @@
         <legend class="px-1 h5 mb-0">
           {{ 'AbpPermissionManagement::PermissionGroup' | abpLocalization }}
         </legend>
-        <div class="row">
+        <div class="row" ngTabs orientation="vertical">
           <div class="col-md-4">
-            <div class="overflow-auto lpx-scroll-pills-container scroll-in-modal">
+            <div
-              <ul class="nav nav-pills flex-column">
+              class="overflow-auto lpx-scroll-pills-container scroll-in-modal"
+              ngTabList
+              orientation="vertical"
+              selectionMode="follow"
+              [selectedTab]="selectedGroup?.name"
+              (selectedTabChange)="onTabChange($event)"
+            >
+              <div class="nav nav-pills flex-column">
                 @for (group of permissionGroups(); track $index) {
-                  <li class="border nav-item">
+                  <div class="border nav-item">
                     @if ({ assignedCount: getAssignedCount(group.name) }; as count) {
-                      <a
+                      <button
-                        class="nav-link pointer"
+                        ngTab
-                        [class.active]="selectedGroup?.name === group?.name"
+                        [value]="group.name"
-                        (click)="onChangeGroup(group)"
+                        class="nav-link pointer text-start w-100"
-                        (select)="setDisabled(group.permissions)"
+                        #tab="ngTab"
+                        [class.active]="tab.selected()"
+                        type="button"
                       >
                         <div [class.font-weight-bold]="count.assignedCount">
                           {{ group?.displayName }}
@@ -62,59 +71,65 @@
                             <span>({{ count.assignedCount }})</span>
                           }
                         </div>
-                      </a>
+                      </button>
                     }
-                  </li>
+                  </div>
                 }
-              </ul>
+              </div>
             </div>
           </div>
 
           <div class="col-md-8 scroll-in-modal">
-            <div class="ps-1">
+            @for (group of permissionGroups(); track $index) {
-              @if (selectedGroupPermissions.length) {
+              <div ngTabPanel [value]="group.name">
-                <div class="form-check mb-2">
+                <ng-template ngTabContent>
-                  <input
+                  <div class="ps-1">
-                    #selectAllInThisTabsRef
+                    @if (selectedGroupPermissions.length) {
-                    type="checkbox"
+                      <div class="form-check mb-2">
-                    id="select-all-in-this-tabs"
+                        <input
-                    name="select-all-in-this-tabs"
+                          #selectAllInThisTabsRef
-                    class="form-check-input"
+                          type="checkbox"
-                    [(ngModel)]="selectThisTab"
+                          id="select-all-in-this-tabs"
-                    [disabled]="disableSelectAllTab"
+                          name="select-all-in-this-tabs"
-                    (click)="onClickSelectThisTab()"
+                          class="form-check-input"
-                  />
+                          [(ngModel)]="selectThisTab"
-                  <label class="form-check-label" for="select-all-in-this-tabs">{{
+                          [disabled]="disableSelectAllTab"
-                    'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
+                          (click)="onClickSelectThisTab()"
-                  }}</label>
+                        />
-                </div>
+                        <label class="form-check-label" for="select-all-in-this-tabs">{{
-                <hr class="my-2" />
+                          'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization
-                @for (permission of selectedGroupPermissions; track $index; let i = $index) {
+                        }}</label>
-                  <div [ngStyle]="permission.style" class="form-check mb-2">
+                      </div>
-                    <input
+                      <hr class="my-2" />
-                      #permissionCheckbox
+                      @for (permission of selectedGroupPermissions; track $index; let i = $index) {
-                      type="checkbox"
+                        <div [ngStyle]="permission.style" class="form-check mb-2">
-                      [checked]="getChecked(permission.name)"
+                          <input
-                      [value]="getChecked(permission.name)"
+                            #permissionCheckbox
-                      [attr.id]="permission.name"
+                            type="checkbox"
-                      class="form-check-input"
+                            [checked]="getChecked(permission.name)"
-                      [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
+                            [value]="getChecked(permission.name)"
-                      (click)="onClickCheckbox(permission, permissionCheckbox.value)"
+                            [attr.id]="permission.name"
-                    />
+                            class="form-check-input"
-                    <label class="form-check-label" [attr.for]="permission.name"
+                            [disabled]="isGrantedByOtherProviderName(permission.grantedProviders)"
-                      >{{ permission.displayName }}
+                            (click)="onClickCheckbox(permission, permissionCheckbox.value)"
-                      @if (!hideBadges) {
+                          />
-                        @for (provider of permission.grantedProviders; track $index) {
+                          <label class="form-check-label" [attr.for]="permission.name"
-                          <span class="badge bg-primary text-dark"
+                            >{{ permission.displayName }}
-                            >{{ provider.providerName }}: {{ provider.providerKey }}</span
+                            @if (!hideBadges) {
-                          >
+                              @for (provider of permission.grantedProviders; track $index) {
-                        }
+                                <span class="badge bg-primary text-dark"
+                                  >{{ provider.providerName }}: {{ provider.providerKey }}</span
+                                >
+                              }
+                            }
+                          </label>
+                        </div>
                       }
-                    </label>
+                    }
                   </div>
-                }
+                </ng-template>
-              }
+              </div>
-            </div>
+            }
           </div>
         </div>
       </fieldset>

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

@@ -34,6 +34,8 @@ import { PermissionManagement } from '../models';
 import { NgStyle } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
+import { Tabs, TabList, Tab, TabPanel, TabContent } from '@angular/aria/tabs';
+
 type PermissionWithStyle = PermissionGrantInfoDto & {
   style: string;
 };
@@ -56,7 +58,7 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
         max-height: calc(100vh - 23.1rem);
       }
 
-      .lpx-scroll-pills-container ul {
+      .lpx-scroll-pills-container .nav-pills {
         display: block;
         overflow-y: auto;
       }
@@ -66,7 +68,7 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
         .scroll-in-modal {
           max-height: calc(100vh - 15rem);
         }
-        .lpx-scroll-pills-container ul {
+        .lpx-scroll-pills-container .nav-pills {
           max-height: 500px;
         }
       }
@@ -81,12 +83,12 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
         padding-bottom: 0 !important;
       }
 
-      .lpx-scroll-pills-container ul li {
+      .lpx-scroll-pills-container .nav-item {
         margin-bottom: 10px;
         border-radius: 10px;
       }
 
-      .lpx-scroll-pills-container ul li a.active {
+      .lpx-scroll-pills-container .nav-item .nav-link.active {
         color: #fff !important;
         border-color: #6c5dd3 !important;
         background-color: #6c5dd3 !important;
@@ -100,6 +102,11 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
     LocalizationPipe,
     ButtonComponent,
     ModalCloseDirective,
+    Tabs,
+    TabList,
+    Tab,
+    TabPanel,
+    TabContent,
   ],
 })
 export class PermissionManagementComponent
@@ -418,6 +425,13 @@ export class PermissionManagementComponent
     this.onChangeGroup(this.selectedGroup);
   }
 
+  onTabChange(groupName: string) {
+    const group = this.permissionGroups().find(g => g.name === groupName);
+    if (group) {
+      this.onChangeGroup(group);
+    }
+  }
+
   onChangeGroup(group: PermissionGroupDto) {
     this.setDisabled(group.permissions);
     this.setSelectedGroup(group);