refactor.

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

@@ -1,9 +1,9 @@
 <abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg', scrollable: false }">
-  @if (data.entityDisplayName || entityDisplayName()) {
+  @if (data.entityDisplayName || entityDisplayName) {
     <ng-template #abpHeader>
       <h4>
         {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -
-        {{ entityDisplayName() || data.entityDisplayName }}
+        {{ entityDisplayName || data.entityDisplayName }}
       </h4>
     </ng-template>
     <ng-template #abpBody>
@@ -115,7 +115,7 @@
                           />
                           <label class="form-check-label" [attr.for]="permission.name"
                             >{{ permission.displayName }}
-                            @if (!hideBadges()) {
+                            @if (!hideBadges) {
                               @for (provider of permission.grantedProviders; track $index) {
                                 <span class="badge bg-primary text-dark"
                                   >{{ provider.providerName }}: {{ provider.providerKey }}</span

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

@@ -20,13 +20,12 @@ import {
   DOCUMENT,
   ElementRef,
   inject,
-  input,
+  Input,
   output,
   QueryList,
   signal,
   TrackByFunction,
   ViewChildren,
-  effect,
 } from '@angular/core';
 import { concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
@@ -113,12 +112,11 @@ export class PermissionManagementComponent {
   protected readonly toasterService = inject(ToasterService);
   private document = inject(DOCUMENT);
 
-  // Signal inputs
-  readonly providerName = input.required<string>();
-  readonly providerKey = input.required<string>();
-  readonly hideBadges = input(false);
-  readonly entityDisplayName = input<string | undefined>(undefined);
-  readonly visibleInput = input(false, { alias: 'visible' });
+  // Classic inputs for ReplaceableTemplateDirective compatibility
+  @Input() providerName!: string;
+  @Input() providerKey!: string;
+  @Input() hideBadges = false;
+  @Input() entityDisplayName?: string;
 
   // Output signals
   readonly visibleChange = output<boolean>();
@@ -180,7 +178,8 @@ export class PermissionManagementComponent {
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
-  // Getter/setter for backward compatibility
+  // Getter/setter for visible - used by ReplaceableTemplateDirective
+  @Input()
   get visible(): boolean {
     return this._visible();
   }
@@ -208,30 +207,7 @@ export class PermissionManagementComponent {
     }
   }
 
-  constructor() {
-    // Sync visible input to internal signal
-    effect(() => {
-      const inputValue = this.visibleInput();
-      if (this._visible() !== inputValue) {
-        if (inputValue) {
-          this.openModal().subscribe(() => {
-            this._visible.set(true);
-            this.visibleChange.emit(true);
-            concat(this.selectAllInAllTabsRef.changes, this.selectAllInThisTabsRef.changes)
-              .pipe(take(1))
-              .subscribe(() => {
-                this.initModal();
-              });
-          });
-        } else {
-          this.setSelectedGroup(null);
-          this._visible.set(false);
-          this.visibleChange.emit(false);
-          this.filter.set('');
-        }
-      }
-    });
-  }
+
 
   getChecked(name: string) {
     return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
@@ -266,7 +242,7 @@ export class PermissionManagementComponent {
       this.disableSelectAllTab = permissions.every(
         permission =>
           permission.isGranted &&
-          permission.grantedProviders?.every(p => p.providerName !== this.providerName()),
+          permission.grantedProviders?.every(p => p.providerName !== this.providerName),
       );
     } else {
       this.disableSelectAllTab = false;
@@ -275,7 +251,7 @@ export class PermissionManagementComponent {
 
   isGrantedByOtherProviderName(grantedProviders: ProviderInfoDto[]): boolean {
     if (grantedProviders.length) {
-      return grantedProviders.findIndex(p => p.providerName !== this.providerName()) > -1;
+      return grantedProviders.findIndex(p => p.providerName !== this.providerName) > -1;
     }
     return false;
   }
@@ -364,7 +340,7 @@ export class PermissionManagementComponent {
   }
 
   setTabCheckboxState() {
-    const providerName = this.providerName();
+    const providerName = this.providerName;
     const selectablePermissions = this.selectedGroupPermissions.filter(per =>
       per.grantedProviders.every(p => p.providerName === providerName),
     );
@@ -387,7 +363,7 @@ export class PermissionManagementComponent {
   }
 
   setGrantCheckboxState() {
-    const providerName = this.providerName();
+    const providerName = this.providerName;
     const selectablePermissions = this.permissions.filter(per =>
       per.grantedProviders.every(p => p.providerName === providerName),
     );
@@ -475,7 +451,7 @@ export class PermissionManagementComponent {
 
     this.modalBusy = true;
     this.service
-      .update(this.providerName(), this.providerKey(), { permissions: changedPermissions })
+      .update(this.providerName, this.providerKey, { permissions: changedPermissions })
       .pipe(
         switchMap(() =>
           this.shouldFetchAppConfig() ? this.configState.refreshAppState() : of(null),
@@ -489,8 +465,8 @@ export class PermissionManagementComponent {
   }
 
   openModal() {
-    const providerName = this.providerName();
-    const providerKey = this.providerKey();
+    const providerName = this.providerName;
+    const providerKey = this.providerKey;
 
     if (!providerKey || !providerName) {
       throw new Error('Provider Key and Provider Name are required.');
@@ -532,8 +508,8 @@ export class PermissionManagementComponent {
 
   shouldFetchAppConfig() {
     const currentUser = this.configState.getOne('currentUser') as CurrentUserDto;
-    const providerName = this.providerName();
-    const providerKey = this.providerKey();
+    const providerName = this.providerName;
+    const providerKey = this.providerKey;
 
     if (providerName === 'R') return currentUser.roles.some(role => role === providerKey);