@abp/ng.permission-management 7.2.2 → 7.3.0-rc.2

package/{fesm2020 → fesm2022}/abp-ng.permission-management.mjs

@@ -10,267 +10,267 @@ import * as i4 from '@angular/forms';
 import * as i5 from '@abp/ng.theme.shared';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 
-class PermissionManagementComponent {
-    constructor(service, configState) {
-        this.service = service;
-        this.configState = configState;
-        this.hideBadges = false;
-        this._visible = false;
-        this.visibleChange = new EventEmitter();
-        this.data = { groups: [], entityDisplayName: '' };
-        this.permissions = [];
-        this.selectThisTab = false;
-        this.selectAllTab = false;
-        this.disableSelectAllTab = false;
-        this.disabledSelectAllInAllTabs = false;
-        this.modalBusy = false;
-        this.selectedGroupPermissions = [];
-        this.trackByFn = (_, item) => item.name;
-    }
-    get visible() {
-        return this._visible;
-    }
-    set visible(value) {
-        if (value === this._visible)
-            return;
-        if (value) {
-            this.openModal().subscribe(() => {
-                this._visible = true;
-                this.visibleChange.emit(true);
-                concat(this.selectAllInAllTabsRef.changes, this.selectAllInThisTabsRef.changes)
-                    .pipe(take(1))
-                    .subscribe(() => {
-                    this.initModal();
-                });
-            });
-        }
-        else {
-            this.setSelectedGroup(null);
-            this._visible = false;
-            this.visibleChange.emit(false);
-        }
-    }
-    getChecked(name) {
-        return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
-    }
-    setSelectedGroup(group) {
-        this.selectedGroup = group;
-        if (!this.selectedGroup) {
-            this.selectedGroupPermissions = [];
-            return;
-        }
-        const margin = `margin-${document.body.dir === 'rtl' ? 'right' : 'left'}.px`;
-        const permissions = (this.data.groups.find(group => group.name === this.selectedGroup?.name) || {}).permissions ||
-            [];
-        this.selectedGroupPermissions = permissions.map(permission => ({
-            ...permission,
-            style: { [margin]: findMargin(permissions, permission) },
-            isGranted: (this.permissions.find(per => per.name === permission.name) || {}).isGranted,
-        }));
-    }
-    setDisabled(permissions) {
-        if (permissions.length) {
-            this.disableSelectAllTab = permissions.every(permission => permission.isGranted &&
-                permission.grantedProviders?.every(p => p.providerName !== this.providerName));
-        }
-        else {
-            this.disableSelectAllTab = false;
-        }
-    }
-    isGrantedByOtherProviderName(grantedProviders) {
-        if (grantedProviders.length) {
-            return grantedProviders.findIndex(p => p.providerName !== this.providerName) > -1;
-        }
-        return false;
-    }
-    onClickCheckbox(clickedPermission) {
-        if (clickedPermission.isGranted &&
-            this.isGrantedByOtherProviderName(clickedPermission.grantedProviders))
-            return;
-        setTimeout(() => {
-            this.permissions = this.permissions.map(per => {
-                if (clickedPermission.name === per.name) {
-                    return { ...per, isGranted: !per.isGranted };
-                }
-                else if (clickedPermission.name === per.parentName && clickedPermission.isGranted) {
-                    return { ...per, isGranted: false };
-                }
-                else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) {
-                    return { ...per, isGranted: true };
-                }
-                return per;
-            });
-            this.setTabCheckboxState();
-            this.setGrantCheckboxState();
-        }, 0);
-    }
-    setTabCheckboxState() {
-        const selectableGroupPermissions = this.selectedGroupPermissions.filter(per => per.grantedProviders.every(p => p.providerName === this.providerName));
-        const selectedPermissions = selectableGroupPermissions.filter(per => per.isGranted);
-        const element = document.querySelector('#select-all-in-this-tabs');
-        if (selectedPermissions.length === selectableGroupPermissions.length) {
-            element.indeterminate = false;
-            this.selectThisTab = true;
-        }
-        else if (selectedPermissions.length === 0) {
-            element.indeterminate = false;
-            this.selectThisTab = false;
-        }
-        else {
-            element.indeterminate = true;
-        }
-    }
-    setGrantCheckboxState() {
-        const selectablePermissions = this.permissions.filter(per => per.grantedProviders.every(p => p.providerName === this.providerName));
-        const selectedAllPermissions = selectablePermissions.filter(per => per.isGranted);
-        const checkboxElement = document.querySelector('#select-all-in-all-tabs');
-        if (selectedAllPermissions.length === selectablePermissions.length) {
-            checkboxElement.indeterminate = false;
-            this.selectAllTab = true;
-        }
-        else if (selectedAllPermissions.length === 0) {
-            checkboxElement.indeterminate = false;
-            this.selectAllTab = false;
-        }
-        else {
-            checkboxElement.indeterminate = true;
-        }
-    }
-    onClickSelectThisTab() {
-        this.selectedGroupPermissions.forEach(permission => {
-            if (permission.isGranted && this.isGrantedByOtherProviderName(permission.grantedProviders))
-                return;
-            const index = this.permissions.findIndex(per => per.name === permission.name);
-            this.permissions = [
-                ...this.permissions.slice(0, index),
-                { ...this.permissions[index], isGranted: !this.selectThisTab },
-                ...this.permissions.slice(index + 1),
-            ];
-        });
-        this.setGrantCheckboxState();
-    }
-    onClickSelectAll() {
-        this.permissions = this.permissions.map(permission => ({
-            ...permission,
-            isGranted: this.isGrantedByOtherProviderName(permission.grantedProviders) || !this.selectAllTab,
-        }));
-        if (!this.disableSelectAllTab) {
-            this.selectThisTab = !this.selectAllTab;
-            this.setTabCheckboxState();
-        }
-    }
-    onChangeGroup(group) {
-        this.setDisabled(group.permissions);
-        this.setSelectedGroup(group);
-        this.setTabCheckboxState();
-    }
-    submit() {
-        const unchangedPermissions = getPermissions(this.data.groups);
-        const changedPermissions = this.permissions
-            .filter(per => (unchangedPermissions.find(unchanged => unchanged.name === per.name) || {}).isGranted ===
-            per.isGranted
-            ? false
-            : true)
-            .map(({ name, isGranted }) => ({ name, isGranted }));
-        if (!changedPermissions.length) {
-            this.visible = false;
-            return;
-        }
-        this.modalBusy = true;
-        this.service
-            .update(this.providerName, this.providerKey, { permissions: changedPermissions })
-            .pipe(switchMap(() => this.shouldFetchAppConfig() ? this.configState.refreshAppState() : of(null)), finalize(() => (this.modalBusy = false)))
-            .subscribe(() => {
-            this.visible = false;
-        });
-    }
-    openModal() {
-        if (!this.providerKey || !this.providerName) {
-            throw new Error('Provider Key and Provider Name are required.');
-        }
-        return this.service.get(this.providerName, this.providerKey).pipe(tap((permissionRes) => {
-            this.data = permissionRes;
-            this.permissions = getPermissions(permissionRes.groups);
-            this.setSelectedGroup(permissionRes.groups[0]);
-            this.disabledSelectAllInAllTabs = this.permissions.every(per => per.isGranted &&
-                per.grantedProviders.every(provider => provider.providerName !== this.providerName));
-        }));
-    }
-    initModal() {
-        // TODO: Refactor
-        setTimeout(() => {
-            this.setDisabled(this.selectedGroup?.permissions || []);
-            this.setTabCheckboxState();
-            this.setGrantCheckboxState();
-        });
-    }
-    getAssignedCount(groupName) {
-        return this.permissions.reduce((acc, val) => (val.groupName === groupName && val.isGranted ? acc + 1 : acc), 0);
-    }
-    shouldFetchAppConfig() {
-        const currentUser = this.configState.getOne('currentUser');
-        if (this.providerName === 'R')
-            return currentUser.roles.some(role => role === this.providerKey);
-        if (this.providerName === 'U')
-            return currentUser.id === this.providerKey;
-        return false;
-    }
-}
-PermissionManagementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PermissionManagementComponent, deps: [{ token: i1.PermissionsService }, { token: i2.ConfigStateService }], target: i0.ɵɵFactoryTarget.Component });
-PermissionManagementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PermissionManagementComponent, selector: "abp-permission-management", inputs: { providerName: "providerName", providerKey: "providerKey", hideBadges: "hideBadges", entityDisplayName: "entityDisplayName", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "selectAllInThisTabsRef", predicate: ["selectAllInThisTabsRef"], descendants: true }, { propertyName: "selectAllInAllTabsRef", predicate: ["selectAllInAllTabsRef"], descendants: true }], exportAs: ["abpPermissionManagement"], ngImport: i0, template: "<abp-modal [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-container *ngIf=\"data.entityDisplayName || entityDisplayName\">\r\n    <ng-template #abpHeader>\r\n      <h4>\r\n        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -\r\n        {{ entityDisplayName || data.entityDisplayName }}\r\n      </h4>\r\n    </ng-template>\r\n    <ng-template #abpBody>\r\n      <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n          <div class=\"form-check mb-2\">\r\n            <input\r\n              #selectAllInAllTabsRef\r\n              type=\"checkbox\"\r\n              id=\"select-all-in-all-tabs\"\r\n              name=\"select-all-in-all-tabs\"\r\n              class=\"form-check-input\"\r\n              [(ngModel)]=\"selectAllTab\"\r\n              (click)=\"onClickSelectAll()\"\r\n              [disabled]=\"disabledSelectAllInAllTabs\"\r\n            />\r\n            <label class=\"form-check-label\" for=\"select-all-in-all-tabs\">{{\r\n              'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\r\n            }}</label>\r\n          </div>\r\n\r\n          <hr class=\"mt-2 mb-2\" />\r\n          <div class=\"overflow-auto\">\r\n            <ul class=\"nav nav-pills flex-column\">\r\n              <li *ngFor=\"let group of data.groups; trackBy: trackByFn\" class=\"nav-item\">\r\n                <a\r\n                  *ngIf=\"{ assignedCount: getAssignedCount(group.name) } as count\"\r\n                  class=\"nav-link pointer\"\r\n                  [class.active]=\"selectedGroup?.name === group?.name\"\r\n                  (click)=\"onChangeGroup(group)\"\r\n                  (select)=\"setDisabled(group.permissions)\"\r\n                >\r\n                  <div [class.font-weight-bold]=\"count.assignedCount\">\r\n                    {{ group?.displayName }}\r\n                    <span *ngIf=\"count.assignedCount > 0\">({{ count.assignedCount }})</span>\r\n                  </div>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-8 overflow-auto\">\r\n          <div class=\"ps-1\">\r\n            <div class=\"form-check mb-2\">\r\n              <input\r\n                #selectAllInThisTabsRef\r\n                type=\"checkbox\"\r\n                id=\"select-all-in-this-tabs\"\r\n                name=\"select-all-in-this-tabs\"\r\n                class=\"form-check-input\"\r\n                [(ngModel)]=\"selectThisTab\"\r\n                [disabled]=\"disableSelectAllTab\"\r\n                (click)=\"onClickSelectThisTab()\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"select-all-in-this-tabs\">{{\r\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\r\n              }}</label>\r\n            </div>\r\n            <hr class=\"my-2\" />\r\n            <div\r\n              *ngFor=\"let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn\"\r\n              [ngStyle]=\"permission.style\"\r\n              class=\"form-check mb-2\"\r\n            >\r\n              <input\r\n                #permissionCheckbox\r\n                type=\"checkbox\"\r\n                [checked]=\"getChecked(permission.name)\"\r\n                [value]=\"getChecked(permission.name)\"\r\n                [attr.id]=\"permission.name\"\r\n                class=\"form-check-input\"\r\n                [disabled]=\"isGrantedByOtherProviderName(permission.grantedProviders)\"\r\n                (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\r\n              />\r\n              <label class=\"form-check-label\" [attr.for]=\"permission.name\"\r\n                >{{ permission.displayName }}\r\n                <ng-container *ngIf=\"!hideBadges\">\r\n                  <span\r\n                    *ngFor=\"let provider of permission.grantedProviders\"\r\n                    class=\"badge bg-light text-dark\"\r\n                    >{{ provider.providerName }}: {{ provider.providerKey }}</span\r\n                  >\r\n                </ng-container>\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #abpFooter>\r\n      <button type=\"button\" class=\"btn btn-secondary\" abpClose>\r\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\r\n      </button>\r\n      <abp-button iconClass=\"fa fa-check\" (click)=\"submit()\">{{\r\n        'AbpIdentity::Save' | abpLocalization\r\n      }}</abp-button>\r\n    </ng-template>\r\n  </ng-container>\r\n</abp-modal>\r\n", styles: [".overflow-scroll{max-height:70vh;overflow-y:scroll}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i5.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i5.ModalCloseDirective, selector: "[abpClose]" }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PermissionManagementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'abp-permission-management', exportAs: 'abpPermissionManagement', template: "<abp-modal [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-container *ngIf=\"data.entityDisplayName || entityDisplayName\">\r\n    <ng-template #abpHeader>\r\n      <h4>\r\n        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -\r\n        {{ entityDisplayName || data.entityDisplayName }}\r\n      </h4>\r\n    </ng-template>\r\n    <ng-template #abpBody>\r\n      <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n          <div class=\"form-check mb-2\">\r\n            <input\r\n              #selectAllInAllTabsRef\r\n              type=\"checkbox\"\r\n              id=\"select-all-in-all-tabs\"\r\n              name=\"select-all-in-all-tabs\"\r\n              class=\"form-check-input\"\r\n              [(ngModel)]=\"selectAllTab\"\r\n              (click)=\"onClickSelectAll()\"\r\n              [disabled]=\"disabledSelectAllInAllTabs\"\r\n            />\r\n            <label class=\"form-check-label\" for=\"select-all-in-all-tabs\">{{\r\n              'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\r\n            }}</label>\r\n          </div>\r\n\r\n          <hr class=\"mt-2 mb-2\" />\r\n          <div class=\"overflow-auto\">\r\n            <ul class=\"nav nav-pills flex-column\">\r\n              <li *ngFor=\"let group of data.groups; trackBy: trackByFn\" class=\"nav-item\">\r\n                <a\r\n                  *ngIf=\"{ assignedCount: getAssignedCount(group.name) } as count\"\r\n                  class=\"nav-link pointer\"\r\n                  [class.active]=\"selectedGroup?.name === group?.name\"\r\n                  (click)=\"onChangeGroup(group)\"\r\n                  (select)=\"setDisabled(group.permissions)\"\r\n                >\r\n                  <div [class.font-weight-bold]=\"count.assignedCount\">\r\n                    {{ group?.displayName }}\r\n                    <span *ngIf=\"count.assignedCount > 0\">({{ count.assignedCount }})</span>\r\n                  </div>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-8 overflow-auto\">\r\n          <div class=\"ps-1\">\r\n            <div class=\"form-check mb-2\">\r\n              <input\r\n                #selectAllInThisTabsRef\r\n                type=\"checkbox\"\r\n                id=\"select-all-in-this-tabs\"\r\n                name=\"select-all-in-this-tabs\"\r\n                class=\"form-check-input\"\r\n                [(ngModel)]=\"selectThisTab\"\r\n                [disabled]=\"disableSelectAllTab\"\r\n                (click)=\"onClickSelectThisTab()\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"select-all-in-this-tabs\">{{\r\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\r\n              }}</label>\r\n            </div>\r\n            <hr class=\"my-2\" />\r\n            <div\r\n              *ngFor=\"let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn\"\r\n              [ngStyle]=\"permission.style\"\r\n              class=\"form-check mb-2\"\r\n            >\r\n              <input\r\n                #permissionCheckbox\r\n                type=\"checkbox\"\r\n                [checked]=\"getChecked(permission.name)\"\r\n                [value]=\"getChecked(permission.name)\"\r\n                [attr.id]=\"permission.name\"\r\n                class=\"form-check-input\"\r\n                [disabled]=\"isGrantedByOtherProviderName(permission.grantedProviders)\"\r\n                (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\r\n              />\r\n              <label class=\"form-check-label\" [attr.for]=\"permission.name\"\r\n                >{{ permission.displayName }}\r\n                <ng-container *ngIf=\"!hideBadges\">\r\n                  <span\r\n                    *ngFor=\"let provider of permission.grantedProviders\"\r\n                    class=\"badge bg-light text-dark\"\r\n                    >{{ provider.providerName }}: {{ provider.providerKey }}</span\r\n                  >\r\n                </ng-container>\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #abpFooter>\r\n      <button type=\"button\" class=\"btn btn-secondary\" abpClose>\r\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\r\n      </button>\r\n      <abp-button iconClass=\"fa fa-check\" (click)=\"submit()\">{{\r\n        'AbpIdentity::Save' | abpLocalization\r\n      }}</abp-button>\r\n    </ng-template>\r\n  </ng-container>\r\n</abp-modal>\r\n", styles: [".overflow-scroll{max-height:70vh;overflow-y:scroll}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.PermissionsService }, { type: i2.ConfigStateService }]; }, propDecorators: { providerName: [{
-                type: Input
-            }], providerKey: [{
-                type: Input
-            }], hideBadges: [{
-                type: Input
-            }], entityDisplayName: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], visibleChange: [{
-                type: Output
-            }], selectAllInThisTabsRef: [{
-                type: ViewChildren,
-                args: ['selectAllInThisTabsRef']
-            }], selectAllInAllTabsRef: [{
-                type: ViewChildren,
-                args: ['selectAllInAllTabsRef']
-            }] } });
-function findMargin(permissions, permission) {
-    const parentPermission = permissions.find(per => per.name === permission.parentName);
-    if (parentPermission && parentPermission.parentName) {
-        let margin = 20;
-        return (margin += findMargin(permissions, parentPermission));
-    }
-    return parentPermission ? 20 : 0;
-}
-function getPermissions(groups) {
-    return groups.reduce((acc, val) => [
-        ...acc,
-        ...val.permissions.map(p => ({ ...p, groupName: val.name || '' })),
-    ], []);
+class PermissionManagementComponent {
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        if (value === this._visible)
+            return;
+        if (value) {
+            this.openModal().subscribe(() => {
+                this._visible = true;
+                this.visibleChange.emit(true);
+                concat(this.selectAllInAllTabsRef.changes, this.selectAllInThisTabsRef.changes)
+                    .pipe(take(1))
+                    .subscribe(() => {
+                    this.initModal();
+                });
+            });
+        }
+        else {
+            this.setSelectedGroup(null);
+            this._visible = false;
+            this.visibleChange.emit(false);
+        }
+    }
+    constructor(service, configState) {
+        this.service = service;
+        this.configState = configState;
+        this.hideBadges = false;
+        this._visible = false;
+        this.visibleChange = new EventEmitter();
+        this.data = { groups: [], entityDisplayName: '' };
+        this.permissions = [];
+        this.selectThisTab = false;
+        this.selectAllTab = false;
+        this.disableSelectAllTab = false;
+        this.disabledSelectAllInAllTabs = false;
+        this.modalBusy = false;
+        this.selectedGroupPermissions = [];
+        this.trackByFn = (_, item) => item.name;
+    }
+    getChecked(name) {
+        return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
+    }
+    setSelectedGroup(group) {
+        this.selectedGroup = group;
+        if (!this.selectedGroup) {
+            this.selectedGroupPermissions = [];
+            return;
+        }
+        const margin = `margin-${document.body.dir === 'rtl' ? 'right' : 'left'}.px`;
+        const permissions = (this.data.groups.find(group => group.name === this.selectedGroup?.name) || {}).permissions ||
+            [];
+        this.selectedGroupPermissions = permissions.map(permission => ({
+            ...permission,
+            style: { [margin]: findMargin(permissions, permission) },
+            isGranted: (this.permissions.find(per => per.name === permission.name) || {}).isGranted,
+        }));
+    }
+    setDisabled(permissions) {
+        if (permissions.length) {
+            this.disableSelectAllTab = permissions.every(permission => permission.isGranted &&
+                permission.grantedProviders?.every(p => p.providerName !== this.providerName));
+        }
+        else {
+            this.disableSelectAllTab = false;
+        }
+    }
+    isGrantedByOtherProviderName(grantedProviders) {
+        if (grantedProviders.length) {
+            return grantedProviders.findIndex(p => p.providerName !== this.providerName) > -1;
+        }
+        return false;
+    }
+    onClickCheckbox(clickedPermission) {
+        if (clickedPermission.isGranted &&
+            this.isGrantedByOtherProviderName(clickedPermission.grantedProviders))
+            return;
+        setTimeout(() => {
+            this.permissions = this.permissions.map(per => {
+                if (clickedPermission.name === per.name) {
+                    return { ...per, isGranted: !per.isGranted };
+                }
+                else if (clickedPermission.name === per.parentName && clickedPermission.isGranted) {
+                    return { ...per, isGranted: false };
+                }
+                else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) {
+                    return { ...per, isGranted: true };
+                }
+                return per;
+            });
+            this.setTabCheckboxState();
+            this.setGrantCheckboxState();
+        }, 0);
+    }
+    setTabCheckboxState() {
+        const selectableGroupPermissions = this.selectedGroupPermissions.filter(per => per.grantedProviders.every(p => p.providerName === this.providerName));
+        const selectedPermissions = selectableGroupPermissions.filter(per => per.isGranted);
+        const element = document.querySelector('#select-all-in-this-tabs');
+        if (selectedPermissions.length === selectableGroupPermissions.length) {
+            element.indeterminate = false;
+            this.selectThisTab = true;
+        }
+        else if (selectedPermissions.length === 0) {
+            element.indeterminate = false;
+            this.selectThisTab = false;
+        }
+        else {
+            element.indeterminate = true;
+        }
+    }
+    setGrantCheckboxState() {
+        const selectablePermissions = this.permissions.filter(per => per.grantedProviders.every(p => p.providerName === this.providerName));
+        const selectedAllPermissions = selectablePermissions.filter(per => per.isGranted);
+        const checkboxElement = document.querySelector('#select-all-in-all-tabs');
+        if (selectedAllPermissions.length === selectablePermissions.length) {
+            checkboxElement.indeterminate = false;
+            this.selectAllTab = true;
+        }
+        else if (selectedAllPermissions.length === 0) {
+            checkboxElement.indeterminate = false;
+            this.selectAllTab = false;
+        }
+        else {
+            checkboxElement.indeterminate = true;
+        }
+    }
+    onClickSelectThisTab() {
+        this.selectedGroupPermissions.forEach(permission => {
+            if (permission.isGranted && this.isGrantedByOtherProviderName(permission.grantedProviders))
+                return;
+            const index = this.permissions.findIndex(per => per.name === permission.name);
+            this.permissions = [
+                ...this.permissions.slice(0, index),
+                { ...this.permissions[index], isGranted: !this.selectThisTab },
+                ...this.permissions.slice(index + 1),
+            ];
+        });
+        this.setGrantCheckboxState();
+    }
+    onClickSelectAll() {
+        this.permissions = this.permissions.map(permission => ({
+            ...permission,
+            isGranted: this.isGrantedByOtherProviderName(permission.grantedProviders) || !this.selectAllTab,
+        }));
+        if (!this.disableSelectAllTab) {
+            this.selectThisTab = !this.selectAllTab;
+            this.setTabCheckboxState();
+        }
+    }
+    onChangeGroup(group) {
+        this.setDisabled(group.permissions);
+        this.setSelectedGroup(group);
+        this.setTabCheckboxState();
+    }
+    submit() {
+        const unchangedPermissions = getPermissions(this.data.groups);
+        const changedPermissions = this.permissions
+            .filter(per => (unchangedPermissions.find(unchanged => unchanged.name === per.name) || {}).isGranted ===
+            per.isGranted
+            ? false
+            : true)
+            .map(({ name, isGranted }) => ({ name, isGranted }));
+        if (!changedPermissions.length) {
+            this.visible = false;
+            return;
+        }
+        this.modalBusy = true;
+        this.service
+            .update(this.providerName, this.providerKey, { permissions: changedPermissions })
+            .pipe(switchMap(() => this.shouldFetchAppConfig() ? this.configState.refreshAppState() : of(null)), finalize(() => (this.modalBusy = false)))
+            .subscribe(() => {
+            this.visible = false;
+        });
+    }
+    openModal() {
+        if (!this.providerKey || !this.providerName) {
+            throw new Error('Provider Key and Provider Name are required.');
+        }
+        return this.service.get(this.providerName, this.providerKey).pipe(tap((permissionRes) => {
+            this.data = permissionRes;
+            this.permissions = getPermissions(permissionRes.groups);
+            this.setSelectedGroup(permissionRes.groups[0]);
+            this.disabledSelectAllInAllTabs = this.permissions.every(per => per.isGranted &&
+                per.grantedProviders.every(provider => provider.providerName !== this.providerName));
+        }));
+    }
+    initModal() {
+        // TODO: Refactor
+        setTimeout(() => {
+            this.setDisabled(this.selectedGroup?.permissions || []);
+            this.setTabCheckboxState();
+            this.setGrantCheckboxState();
+        });
+    }
+    getAssignedCount(groupName) {
+        return this.permissions.reduce((acc, val) => (val.groupName === groupName && val.isGranted ? acc + 1 : acc), 0);
+    }
+    shouldFetchAppConfig() {
+        const currentUser = this.configState.getOne('currentUser');
+        if (this.providerName === 'R')
+            return currentUser.roles.some(role => role === this.providerKey);
+        if (this.providerName === 'U')
+            return currentUser.id === this.providerKey;
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PermissionManagementComponent, deps: [{ token: i1.PermissionsService }, { token: i2.ConfigStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PermissionManagementComponent, selector: "abp-permission-management", inputs: { providerName: "providerName", providerKey: "providerKey", hideBadges: "hideBadges", entityDisplayName: "entityDisplayName", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "selectAllInThisTabsRef", predicate: ["selectAllInThisTabsRef"], descendants: true }, { propertyName: "selectAllInAllTabsRef", predicate: ["selectAllInAllTabsRef"], descendants: true }], exportAs: ["abpPermissionManagement"], ngImport: i0, template: "<abp-modal [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-container *ngIf=\"data.entityDisplayName || entityDisplayName\">\r\n    <ng-template #abpHeader>\r\n      <h4>\r\n        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -\r\n        {{ entityDisplayName || data.entityDisplayName }}\r\n      </h4>\r\n    </ng-template>\r\n    <ng-template #abpBody>\r\n      <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n          <div class=\"form-check mb-2\">\r\n            <input\r\n              #selectAllInAllTabsRef\r\n              type=\"checkbox\"\r\n              id=\"select-all-in-all-tabs\"\r\n              name=\"select-all-in-all-tabs\"\r\n              class=\"form-check-input\"\r\n              [(ngModel)]=\"selectAllTab\"\r\n              (click)=\"onClickSelectAll()\"\r\n              [disabled]=\"disabledSelectAllInAllTabs\"\r\n            />\r\n            <label class=\"form-check-label\" for=\"select-all-in-all-tabs\">{{\r\n              'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\r\n            }}</label>\r\n          </div>\r\n\r\n          <hr class=\"mt-2 mb-2\" />\r\n          <div class=\"overflow-auto\">\r\n            <ul class=\"nav nav-pills flex-column\">\r\n              <li *ngFor=\"let group of data.groups; trackBy: trackByFn\" class=\"nav-item\">\r\n                <a\r\n                  *ngIf=\"{ assignedCount: getAssignedCount(group.name) } as count\"\r\n                  class=\"nav-link pointer\"\r\n                  [class.active]=\"selectedGroup?.name === group?.name\"\r\n                  (click)=\"onChangeGroup(group)\"\r\n                  (select)=\"setDisabled(group.permissions)\"\r\n                >\r\n                  <div [class.font-weight-bold]=\"count.assignedCount\">\r\n                    {{ group?.displayName }}\r\n                    <span *ngIf=\"count.assignedCount > 0\">({{ count.assignedCount }})</span>\r\n                  </div>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-8 overflow-auto\">\r\n          <div class=\"ps-1\">\r\n            <div class=\"form-check mb-2\">\r\n              <input\r\n                #selectAllInThisTabsRef\r\n                type=\"checkbox\"\r\n                id=\"select-all-in-this-tabs\"\r\n                name=\"select-all-in-this-tabs\"\r\n                class=\"form-check-input\"\r\n                [(ngModel)]=\"selectThisTab\"\r\n                [disabled]=\"disableSelectAllTab\"\r\n                (click)=\"onClickSelectThisTab()\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"select-all-in-this-tabs\">{{\r\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\r\n              }}</label>\r\n            </div>\r\n            <hr class=\"my-2\" />\r\n            <div\r\n              *ngFor=\"let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn\"\r\n              [ngStyle]=\"permission.style\"\r\n              class=\"form-check mb-2\"\r\n            >\r\n              <input\r\n                #permissionCheckbox\r\n                type=\"checkbox\"\r\n                [checked]=\"getChecked(permission.name)\"\r\n                [value]=\"getChecked(permission.name)\"\r\n                [attr.id]=\"permission.name\"\r\n                class=\"form-check-input\"\r\n                [disabled]=\"isGrantedByOtherProviderName(permission.grantedProviders)\"\r\n                (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\r\n              />\r\n              <label class=\"form-check-label\" [attr.for]=\"permission.name\"\r\n                >{{ permission.displayName }}\r\n                <ng-container *ngIf=\"!hideBadges\">\r\n                  <span\r\n                    *ngFor=\"let provider of permission.grantedProviders\"\r\n                    class=\"badge bg-light text-dark\"\r\n                    >{{ provider.providerName }}: {{ provider.providerKey }}</span\r\n                  >\r\n                </ng-container>\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #abpFooter>\r\n      <button type=\"button\" class=\"btn btn-secondary\" abpClose>\r\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\r\n      </button>\r\n      <abp-button iconClass=\"fa fa-check\" (click)=\"submit()\">{{\r\n        'AbpIdentity::Save' | abpLocalization\r\n      }}</abp-button>\r\n    </ng-template>\r\n  </ng-container>\r\n</abp-modal>\r\n", styles: [".overflow-scroll{max-height:70vh;overflow-y:scroll}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i5.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i5.ModalCloseDirective, selector: "[abpClose]" }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PermissionManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-permission-management', exportAs: 'abpPermissionManagement', template: "<abp-modal [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-container *ngIf=\"data.entityDisplayName || entityDisplayName\">\r\n    <ng-template #abpHeader>\r\n      <h4>\r\n        {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -\r\n        {{ entityDisplayName || data.entityDisplayName }}\r\n      </h4>\r\n    </ng-template>\r\n    <ng-template #abpBody>\r\n      <div class=\"row\">\r\n        <div class=\"col-md-4\">\r\n          <div class=\"form-check mb-2\">\r\n            <input\r\n              #selectAllInAllTabsRef\r\n              type=\"checkbox\"\r\n              id=\"select-all-in-all-tabs\"\r\n              name=\"select-all-in-all-tabs\"\r\n              class=\"form-check-input\"\r\n              [(ngModel)]=\"selectAllTab\"\r\n              (click)=\"onClickSelectAll()\"\r\n              [disabled]=\"disabledSelectAllInAllTabs\"\r\n            />\r\n            <label class=\"form-check-label\" for=\"select-all-in-all-tabs\">{{\r\n              'AbpPermissionManagement::SelectAllInAllTabs' | abpLocalization\r\n            }}</label>\r\n          </div>\r\n\r\n          <hr class=\"mt-2 mb-2\" />\r\n          <div class=\"overflow-auto\">\r\n            <ul class=\"nav nav-pills flex-column\">\r\n              <li *ngFor=\"let group of data.groups; trackBy: trackByFn\" class=\"nav-item\">\r\n                <a\r\n                  *ngIf=\"{ assignedCount: getAssignedCount(group.name) } as count\"\r\n                  class=\"nav-link pointer\"\r\n                  [class.active]=\"selectedGroup?.name === group?.name\"\r\n                  (click)=\"onChangeGroup(group)\"\r\n                  (select)=\"setDisabled(group.permissions)\"\r\n                >\r\n                  <div [class.font-weight-bold]=\"count.assignedCount\">\r\n                    {{ group?.displayName }}\r\n                    <span *ngIf=\"count.assignedCount > 0\">({{ count.assignedCount }})</span>\r\n                  </div>\r\n                </a>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-8 overflow-auto\">\r\n          <div class=\"ps-1\">\r\n            <div class=\"form-check mb-2\">\r\n              <input\r\n                #selectAllInThisTabsRef\r\n                type=\"checkbox\"\r\n                id=\"select-all-in-this-tabs\"\r\n                name=\"select-all-in-this-tabs\"\r\n                class=\"form-check-input\"\r\n                [(ngModel)]=\"selectThisTab\"\r\n                [disabled]=\"disableSelectAllTab\"\r\n                (click)=\"onClickSelectThisTab()\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"select-all-in-this-tabs\">{{\r\n                'AbpPermissionManagement::SelectAllInThisTab' | abpLocalization\r\n              }}</label>\r\n            </div>\r\n            <hr class=\"my-2\" />\r\n            <div\r\n              *ngFor=\"let permission of selectedGroupPermissions; let i = index; trackBy: trackByFn\"\r\n              [ngStyle]=\"permission.style\"\r\n              class=\"form-check mb-2\"\r\n            >\r\n              <input\r\n                #permissionCheckbox\r\n                type=\"checkbox\"\r\n                [checked]=\"getChecked(permission.name)\"\r\n                [value]=\"getChecked(permission.name)\"\r\n                [attr.id]=\"permission.name\"\r\n                class=\"form-check-input\"\r\n                [disabled]=\"isGrantedByOtherProviderName(permission.grantedProviders)\"\r\n                (click)=\"onClickCheckbox(permission, permissionCheckbox.value)\"\r\n              />\r\n              <label class=\"form-check-label\" [attr.for]=\"permission.name\"\r\n                >{{ permission.displayName }}\r\n                <ng-container *ngIf=\"!hideBadges\">\r\n                  <span\r\n                    *ngFor=\"let provider of permission.grantedProviders\"\r\n                    class=\"badge bg-light text-dark\"\r\n                    >{{ provider.providerName }}: {{ provider.providerKey }}</span\r\n                  >\r\n                </ng-container>\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n    <ng-template #abpFooter>\r\n      <button type=\"button\" class=\"btn btn-secondary\" abpClose>\r\n        {{ 'AbpIdentity::Cancel' | abpLocalization }}\r\n      </button>\r\n      <abp-button iconClass=\"fa fa-check\" (click)=\"submit()\">{{\r\n        'AbpIdentity::Save' | abpLocalization\r\n      }}</abp-button>\r\n    </ng-template>\r\n  </ng-container>\r\n</abp-modal>\r\n", styles: [".overflow-scroll{max-height:70vh;overflow-y:scroll}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.PermissionsService }, { type: i2.ConfigStateService }]; }, propDecorators: { providerName: [{
+                type: Input
+            }], providerKey: [{
+                type: Input
+            }], hideBadges: [{
+                type: Input
+            }], entityDisplayName: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }], selectAllInThisTabsRef: [{
+                type: ViewChildren,
+                args: ['selectAllInThisTabsRef']
+            }], selectAllInAllTabsRef: [{
+                type: ViewChildren,
+                args: ['selectAllInAllTabsRef']
+            }] } });
+function findMargin(permissions, permission) {
+    const parentPermission = permissions.find(per => per.name === permission.parentName);
+    if (parentPermission && parentPermission.parentName) {
+        let margin = 20;
+        return (margin += findMargin(permissions, parentPermission));
+    }
+    return parentPermission ? 20 : 0;
+}
+function getPermissions(groups) {
+    return groups.reduce((acc, val) => [
+        ...acc,
+        ...val.permissions.map(p => ({ ...p, groupName: val.name || '' })),
+    ], []);
 }
 
-class PermissionManagementModule {
-}
-PermissionManagementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PermissionManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PermissionManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: PermissionManagementModule, declarations: [PermissionManagementComponent], imports: [CoreModule, ThemeSharedModule], exports: [PermissionManagementComponent] });
-PermissionManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PermissionManagementModule, imports: [CoreModule, ThemeSharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PermissionManagementModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [PermissionManagementComponent],
-                    imports: [CoreModule, ThemeSharedModule],
-                    exports: [PermissionManagementComponent],
-                }]
+class PermissionManagementModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PermissionManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: PermissionManagementModule, declarations: [PermissionManagementComponent], imports: [CoreModule, ThemeSharedModule], exports: [PermissionManagementComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PermissionManagementModule, imports: [CoreModule, ThemeSharedModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PermissionManagementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PermissionManagementComponent],
+                    imports: [CoreModule, ThemeSharedModule],
+                    exports: [PermissionManagementComponent],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PermissionManagementComponent, PermissionManagementModule };