@firestitch/app-acl 13.0.0 → 14.0.0

package/fesm2020/firestitch-app-acl.mjs

@@ -1,964 +1,962 @@
-import * as i18 from '@angular/material/input';
+import * as i12 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/material/radio';
+import * as i11 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i14 from '@angular/material/button';
+import * as i10 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i10 from '@angular/material/select';
+import * as i8 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i9 from '@angular/material/checkbox';
+import * as i7 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Inject, Pipe, Component, ChangeDetectionStrategy, ViewChild, Input, QueryList, ViewChildren, EventEmitter, Output, NgModule } from '@angular/core';
-import * as i7$1 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i12 from '@firestitch/list';
+import * as i13 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
 import * as i2$1 from '@firestitch/popover';
 import { FsPopoverModule } from '@firestitch/popover';
-import * as i4 from '@firestitch/dialog';
+import * as i14 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import * as i16 from '@firestitch/form';
+import * as i15 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
-import * as i6 from '@firestitch/label';
+import * as i16 from '@firestitch/label';
 import { FsLabelModule } from '@firestitch/label';
-import * as i7 from '@firestitch/radiogroup';
+import * as i17 from '@firestitch/radiogroup';
 import { FsRadioGroupModule } from '@firestitch/radiogroup';
-import * as i5$1 from '@firestitch/badge';
+import * as i6$1 from '@firestitch/badge';
 import { FsBadgeModule } from '@firestitch/badge';
-import * as i1 from '@firestitch/checkboxgroup';
+import * as i8$1 from '@firestitch/checkboxgroup';
 import { FsCheckboxGroupModule } from '@firestitch/checkboxgroup';
-import * as i13 from '@firestitch/menu';
+import * as i18 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
 import { map, tap, takeUntil, filter } from 'rxjs/operators';
 import { ItemType } from '@firestitch/filter';
 import { list } from '@firestitch/common';
 import { ReplaySubject, Subject, forkJoin, of, Observable } from 'rxjs';
 import * as i3 from '@firestitch/message';
-import * as i5 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i11 from '@angular/material/core';
-import * as i15 from '@angular/forms';
+import * as i5 from '@angular/forms';
 import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
+import * as i6 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i9 from '@angular/material/core';
 import { groupBy, sortBy } from 'lodash-es';
 import * as i3$1 from '@firestitch/prompt';
 
-var AclRoleAccess;
-(function (AclRoleAccess) {
-    AclRoleAccess[AclRoleAccess["None"] = 0] = "None";
-    AclRoleAccess[AclRoleAccess["Read"] = 5] = "Read";
-    AclRoleAccess[AclRoleAccess["Write"] = 10] = "Write";
-    AclRoleAccess[AclRoleAccess["Full"] = 15] = "Full";
+var AclRoleAccess;
+(function (AclRoleAccess) {
+    AclRoleAccess[AclRoleAccess["None"] = 0] = "None";
+    AclRoleAccess[AclRoleAccess["Read"] = 5] = "Read";
+    AclRoleAccess[AclRoleAccess["Write"] = 10] = "Write";
+    AclRoleAccess[AclRoleAccess["Full"] = 15] = "Full";
 })(AclRoleAccess || (AclRoleAccess = {}));
 
-const AclRoleAccesses = [
-    { name: 'None', value: AclRoleAccess.None },
-    { name: 'Read', value: AclRoleAccess.Read },
-    { name: 'Write', value: AclRoleAccess.Write },
-    { name: 'Full', value: AclRoleAccess.Full }
+const AclRoleAccesses = [
+    { name: 'None', value: AclRoleAccess.None },
+    { name: 'Read', value: AclRoleAccess.Read },
+    { name: 'Write', value: AclRoleAccess.Write },
+    { name: 'Full', value: AclRoleAccess.Full }
 ];
 
 const FS_APP_ACL_CONFIG = new InjectionToken('fs-app-acl-config');
 
-class FsAppAclService {
-    constructor(_appAclConfig) {
-        this._appAclConfig = _appAclConfig;
-    }
-    getPermissions() {
-        if (!this._permissions$) {
-            this._permissions$ = new ReplaySubject();
-            this._appAclConfig.permissions
-                .subscribe((permissions) => {
-                this._permissions$.next(permissions);
-                this._permissions$.complete();
-            });
-        }
-        return this._permissions$;
-    }
-    getLevels() {
-        if (!this._levels$) {
-            this._levels$ = new ReplaySubject();
-            this._appAclConfig.levels
-                .subscribe((levels) => {
-                this._levels$.next(levels);
-                this._levels$.complete();
-            });
-        }
-        return this._levels$;
-    }
-    getIndexedLevels() {
-        return this.getLevels()
-            .pipe(map((data) => {
-            return list(data, 'name', 'value');
-        }));
-    }
-}
-FsAppAclService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAppAclService, deps: [{ token: FS_APP_ACL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-FsAppAclService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAppAclService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAppAclService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_ACL_CONFIG]
+class FsAppAclService {
+    constructor(_appAclConfig) {
+        this._appAclConfig = _appAclConfig;
+    }
+    getPermissions() {
+        if (!this._permissions$) {
+            this._permissions$ = new ReplaySubject();
+            this._appAclConfig.permissions
+                .subscribe((permissions) => {
+                this._permissions$.next(permissions);
+                this._permissions$.complete();
+            });
+        }
+        return this._permissions$;
+    }
+    getLevels() {
+        if (!this._levels$) {
+            this._levels$ = new ReplaySubject();
+            this._appAclConfig.levels
+                .subscribe((levels) => {
+                this._levels$.next(levels);
+                this._levels$.complete();
+            });
+        }
+        return this._levels$;
+    }
+    getIndexedLevels() {
+        return this.getLevels()
+            .pipe(map((data) => {
+            return list(data, 'name', 'value');
+        }));
+    }
+}
+FsAppAclService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAppAclService, deps: [{ token: FS_APP_ACL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+FsAppAclService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAppAclService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAppAclService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_ACL_CONFIG]
                 }] }]; } });
 
-class BulkOptionsFilterPipe {
-    transform(rolesList, children) {
-        const accessLevels = this._uniqListOfAccessLevels(children);
-        return rolesList.filter((permission) => {
-            return permission.value === 0 || accessLevels.has(permission.value);
-        });
-    }
-    _uniqListOfAccessLevels(children) {
-        return children.reduce((acc, value) => {
-            value.accesses.forEach((access) => {
-                acc.add(access);
-            });
-            return acc;
-        }, (new Set));
-    }
-}
-BulkOptionsFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BulkOptionsFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-BulkOptionsFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BulkOptionsFilterPipe, name: "builkOptionsFilter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BulkOptionsFilterPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'builkOptionsFilter'
-                }]
+class BulkOptionsFilterPipe {
+    transform(rolesList, children) {
+        const accessLevels = this._uniqListOfAccessLevels(children);
+        return rolesList.filter((permission) => {
+            return permission.value === 0 || accessLevels.has(permission.value);
+        });
+    }
+    _uniqListOfAccessLevels(children) {
+        return children.reduce((acc, value) => {
+            value.accesses.forEach((access) => {
+                acc.add(access);
+            });
+            return acc;
+        }, (new Set));
+    }
+}
+BulkOptionsFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BulkOptionsFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+BulkOptionsFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: BulkOptionsFilterPipe, name: "builkOptionsFilter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BulkOptionsFilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'builkOptionsFilter'
+                }]
         }] });
 
-class AclRolePermissionAvailablePipe {
-    transform(permission, aclRolePermissions) {
-        if (permission.requires && permission.requires.length) {
-            const exists = permission.requires
-                .every((item) => aclRolePermissions[item]);
-            return exists;
-        }
-        return true;
-    }
-}
-AclRolePermissionAvailablePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AclRolePermissionAvailablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-AclRolePermissionAvailablePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AclRolePermissionAvailablePipe, name: "aclRolePermissionAvailable" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AclRolePermissionAvailablePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'aclRolePermissionAvailable'
-                }]
+class AclRolePermissionAvailablePipe {
+    transform(permission, aclRolePermissions) {
+        if (permission.requires && permission.requires.length) {
+            const exists = permission.requires
+                .every((item) => aclRolePermissions[item]);
+            return exists;
+        }
+        return true;
+    }
+}
+AclRolePermissionAvailablePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AclRolePermissionAvailablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+AclRolePermissionAvailablePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: AclRolePermissionAvailablePipe, name: "aclRolePermissionAvailable" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AclRolePermissionAvailablePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'aclRolePermissionAvailable'
+                }]
         }] });
 
-class FsAclRoleComponent {
-    constructor(_data, _appAclService, _dialogRef, _message, _cdRef) {
-        this._data = _data;
-        this._appAclService = _appAclService;
-        this._dialogRef = _dialogRef;
-        this._message = _message;
-        this._cdRef = _cdRef;
-        this.aclRole = null;
-        this.permissions = [];
-        this.levelPermissions = [];
-        this.AclRoleAccesses = AclRoleAccesses;
-        this.indexedAccesses = {};
-        this.aclLevels = [];
-        this.indexedAclLevels = {};
-        this.onlyFullAccess = false;
-        this.AclLevels = {};
-        this.roleConfigs = [];
-        this.aclRoleConfigValues = {};
-        this.aclRolePermissions = {};
-        this._destroy$ = new Subject();
-        this.save = () => {
-            const aclRoleConfigs = this.roleConfigs
-                .map((roleConfig) => {
-                return {
-                    name: roleConfig.name,
-                    value: this.aclRoleConfigValues[roleConfig.name],
-                };
-            });
-            const aclRole = {
-                ...this.aclRole,
-                permissions: this.levelPermissions.map((permission) => {
-                    return {
-                        value: permission.value,
-                        access: this.aclRolePermissions[permission.value] || 0,
-                    };
-                }),
-                aclRoleConfigs,
-            };
-            return this._data.saveAclRole(aclRole)
-                .pipe(tap((response) => {
-                this._message.success('Saved Changes');
-                this.close(response);
-            }));
-        };
-    }
-    ngOnInit() {
-        forkJoin(this.getRole(), this._appAclService.getPermissions())
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(([aclRole, aclPermissions,]) => {
-            this.permissions = aclPermissions;
-            this.aclLevels = this._data.aclLevels;
-            this.disabled = this._data.disabled;
-            this.indexedAclLevels = list(this.aclLevels, 'name', 'value');
-            this.indexedAccesses = list(AclRoleAccesses, 'name', 'value');
-            this.aclRole = {
-                ...{
-                    aclPermissions: [],
-                    allPermissions: true,
-                    aclRoleConfigs: [],
-                    permissions: {},
-                    level: this.aclLevels[0].value,
-                },
-                ...aclRole,
-            };
-            this.aclRoleConfigValues = (aclRole.aclRoleConfigs || [])
-                .reduce((accum, aclRoleConfig) => {
-                return {
-                    ...accum,
-                    [aclRoleConfig.name]: aclRoleConfig.value,
-                };
-            }, {});
-            if (this.aclRole.id) {
-                this.permissions.forEach((permission) => {
-                    let access = 0;
-                    const aclPermission = this.aclRole.aclPermissions.find((item) => {
-                        return item.permission === permission.value;
-                    });
-                    if (aclPermission) {
-                        access = aclPermission.access;
-                    }
-                    this.aclRolePermissions[permission.value] = access;
-                });
-            }
-            if (this.aclRole.allPermissions) {
-                this._applyMaxPermissionAccess();
-            }
-            this._updatePermissions();
-            this._updateRoleConfigs();
-            this._cdRef.markForCheck();
-        });
-        this.listConfig = {
-            status: false,
-            paging: false,
-            rowHighlight: false,
-            noResults: {
-                message: '',
-            },
-            group: {
-                initialExpand: true,
-                groupBy: (data) => {
-                    return data;
-                },
-                compareBy: (data) => {
-                    return data.category || 'General';
-                },
-            },
-            fetch: () => {
-                return of({
-                    data: this.levelPermissions.sort((a, b) => {
-                        a = a.name.toUpperCase();
-                        b = b.name.toUpperCase();
-                        if (a < b) {
-                            return -1;
-                        }
-                        else if (a > b) {
-                            return 1;
-                        }
-                        return 0;
-                    }),
-                });
-            },
-        };
-    }
-    bulkChange(value, groupChildren, group) {
-        groupChildren
-            .forEach((permission) => {
-            const access = permission.accesses
-                .find((access) => value === access);
-            if (access || !value) {
-                this.aclRolePermissions[permission.value] = value;
-            }
-        });
-        setTimeout(() => {
-            this.submitButton.disabled = false;
-            this.permissionChange();
-        });
-    }
-    permissionChange() {
-        this.aclRolePermissions = {
-            ...this.aclRolePermissions,
-        };
-        this._cdRef.markForCheck();
-    }
-    levelChange() {
-        this._updatePermissions();
-        this._updateRoleConfigs();
-        this.list.reload();
-    }
-    getRole() {
-        if (!this._data.aclRole.id) {
-            return of(this._data.aclRole);
-        }
-        const query = {
-            aclPermissions: true,
-            aclRoleConfigs: true,
-        };
-        if (!this.environment) {
-            query.environmentId = null;
-        }
-        return this._data.loadAclRole(this._data.aclRole, query);
-    }
-    close(data = null) {
-        this._dialogRef.close(data);
-    }
-    allPermissionsChange(all) {
-        this._updatePermissions();
-        if (all) {
-            this._applyMaxPermissionAccess();
-        }
-        else {
-            this._applyNonePermissionAccess();
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _updatePermissions() {
-        this.levelPermissions = this.permissions
-            .filter((permission) => {
-            return permission.levels.some((item) => {
-                return item === this.aclRole.level;
-            });
-        });
-    }
-    _updateRoleConfigs() {
-        if (this._data.loadRoleConfigs) {
-            this._data.loadRoleConfigs()
-                .subscribe((roleConfigs) => {
-                this.roleConfigs = roleConfigs
-                    .filter((roleConfig) => roleConfig.level === this.aclRole.level);
-                this._cdRef.markForCheck();
-            });
-        }
-    }
-    _applyMaxPermissionAccess() {
-        this.permissions.forEach((permission) => {
-            this.aclRolePermissions[permission.value] = Math.max(...permission.accesses);
-        });
-    }
-    _applyNonePermissionAccess() {
-        this.permissions.forEach((permission) => {
-            this.aclRolePermissions[permission.value] = AclRoleAccess.None;
-        });
-    }
-}
-FsAclRoleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclRoleComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }, { propertyName: "submitButton", first: true, predicate: ["submit"], descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>\n        <ng-container *ngIf=\"!disabled\">{{ aclRole.id ? 'Edit' : 'Create' }}</ng-container>\n        <ng-container *ngIf=\"disabled\">View</ng-container>\n        Role\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-row.gap-large.align-start\">\n          <div class=\"fs-column left-column\">\n            <mat-form-field>            \n              <mat-label>Name</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.name\"\n                [disabled]=\"disabled\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n\n            <mat-form-field>\n              <mat-label>Description</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.description\"\n                [disabled]=\"disabled\"\n                name=\"description\">\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                    [(ngModel)]=\"aclRole.level\"\n                    [disabled]=\"disabled\"\n                    (ngModelChange)=\"levelChange()\"\n                    fsFormRequired\n                    label=\"Level\"\n                    orientation=\"vertical\"\n                    name=\"level\">\n                  <mat-radio-button\n                      *ngFor=\"let item of aclLevels\"\n                      [value]=\"item.value\"\n                      [disabled]=\"!!aclRole.protected\">\n                    {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>All Permissions</fs-label>\n              <mat-checkbox\n                  [(ngModel)]=\"aclRole.allPermissions\"\n                  (ngModelChange)=\"allPermissionsChange($event)\"\n                  [disabled]=\"!!aclRole.protected || disabled\"\n                  name=\"allPermissions\">\n                Enable\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div class=\"fs-column\" *ngFor=\"let roleConfig of roleConfigs\">\n              <fs-label-field *ngIf=\"roleConfig.type === 'checkbox'\">\n                <fs-label>{{roleConfig.label}}</fs-label>\n                <mat-checkbox\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [disabled]=\"disabled\"\n                    [name]=\"roleConfig.name\">\n                  Enable\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{roleConfig.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"roleConfig.type === 'select'\">\n                <mat-select\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\"\n                    [required]=\"roleConfig.required\"\n                    [disabled]=\"disabled\"\n                    [placeholder]=\"roleConfig.label\">\n                  <mat-option\n                      *ngFor=\"let item of roleConfig.values\"\n                      [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                </mat-select>\n                <mat-hint>{{roleConfig.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions fs-column\">\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <div class=\"permission-group\">{{row.category || 'General'}}</div>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"row\">\n                  <div class=\"permission\">{{ row.name }}</div>\n                  <div class=\"description small\">{{ row.description }}</div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column title=\"Access\" width=\"1%\" class=\"access\">\n                <ng-template \n                    fs-list-group-cell\n                    let-row=\"row\"\n                    let-group=\"group\"\n                    let-groupChildren=\"groupChildren\"\n                    class=\"permission-group\"\n                    align=\"right\">\n                  <ng-container *ngIf=\"!aclRole.allPermissions && !disabled\">\n                    <fs-menu>\n                      <ng-container *ngFor=\"let access of AclRoleAccesses | builkOptionsFilter: groupChildren\">\n                        <ng-template\n                            fs-menu-item\n                            (click)=\"bulkChange(access.value, groupChildren, group)\">\n                          {{ access.name }}\n                        </ng-template>\n                      </ng-container>\n                    </fs-menu>\n                  </ng-container>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions || disabled; else elseAll\">\n                    {{indexedAccesses[aclRolePermissions[permission.value]]}}\n                  </span>\n                  <ng-template #elseAll>\n                    <ng-container *ngIf=\"permission|aclRolePermissionAvailable:aclRolePermissions; else permissionRequires\">\n                      <mat-form-field>\n                        <mat-select\n                            [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                            [disabled]=\"!!aclRole.protected\"\n                            required\n                            [name]=\"'access-' + permission.value\"\n                            (ngModelChange)=\"permissionChange()\">\n                          <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                            <mat-option\n                                *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                                [value]=\"access.value\">\n                              {{access.name}}\n                            </mat-option>\n                          </ng-container>\n                        </mat-select>\n                      </mat-form-field>\n                    </ng-container>\n                    <ng-template #permissionRequires>\n                      Unavailable\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button\n            *ngIf=\"!disabled\"\n            #submit\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n          {{ aclRole.id ? 'Save' : 'Create' }}\n        </button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">{{ disabled ? 'Done' : 'Cancel' }}</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n", styles: [".permissions{flex:1}.permissions ::ng-deep .fs-list-row-group{background-color:#e4e4e4;font-size:112%}.permissions ::ng-deep fs-list .access{white-space:nowrap}.permissions ::ng-deep .mat-form-field{width:100px}.permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}.permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}.permissions ::ng-deep fs-radio-group{width:100%}.permissions ::ng-deep fs-label-field{width:100%}.permissions .level{width:100%}.left-column{width:40%;max-width:400px}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6.FsLabelComponent, selector: "fs-label" }, { type: i7.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i13.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i14.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i15.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5.MatLabel, selector: "mat-label" }, { type: i18.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i15.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i16.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i15.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i15.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { type: i12.FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]" }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i13.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "builkOptionsFilter": BulkOptionsFilterPipe, "aclRolePermissionAvailable": AclRolePermissionAvailablePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclRoleComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>\n        <ng-container *ngIf=\"!disabled\">{{ aclRole.id ? 'Edit' : 'Create' }}</ng-container>\n        <ng-container *ngIf=\"disabled\">View</ng-container>\n        Role\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-row.gap-large.align-start\">\n          <div class=\"fs-column left-column\">\n            <mat-form-field>            \n              <mat-label>Name</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.name\"\n                [disabled]=\"disabled\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n\n            <mat-form-field>\n              <mat-label>Description</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.description\"\n                [disabled]=\"disabled\"\n                name=\"description\">\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                    [(ngModel)]=\"aclRole.level\"\n                    [disabled]=\"disabled\"\n                    (ngModelChange)=\"levelChange()\"\n                    fsFormRequired\n                    label=\"Level\"\n                    orientation=\"vertical\"\n                    name=\"level\">\n                  <mat-radio-button\n                      *ngFor=\"let item of aclLevels\"\n                      [value]=\"item.value\"\n                      [disabled]=\"!!aclRole.protected\">\n                    {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>All Permissions</fs-label>\n              <mat-checkbox\n                  [(ngModel)]=\"aclRole.allPermissions\"\n                  (ngModelChange)=\"allPermissionsChange($event)\"\n                  [disabled]=\"!!aclRole.protected || disabled\"\n                  name=\"allPermissions\">\n                Enable\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div class=\"fs-column\" *ngFor=\"let roleConfig of roleConfigs\">\n              <fs-label-field *ngIf=\"roleConfig.type === 'checkbox'\">\n                <fs-label>{{roleConfig.label}}</fs-label>\n                <mat-checkbox\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [disabled]=\"disabled\"\n                    [name]=\"roleConfig.name\">\n                  Enable\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{roleConfig.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"roleConfig.type === 'select'\">\n                <mat-select\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\"\n                    [required]=\"roleConfig.required\"\n                    [disabled]=\"disabled\"\n                    [placeholder]=\"roleConfig.label\">\n                  <mat-option\n                      *ngFor=\"let item of roleConfig.values\"\n                      [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                </mat-select>\n                <mat-hint>{{roleConfig.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions fs-column\">\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <div class=\"permission-group\">{{row.category || 'General'}}</div>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"row\">\n                  <div class=\"permission\">{{ row.name }}</div>\n                  <div class=\"description small\">{{ row.description }}</div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column title=\"Access\" width=\"1%\" class=\"access\">\n                <ng-template \n                    fs-list-group-cell\n                    let-row=\"row\"\n                    let-group=\"group\"\n                    let-groupChildren=\"groupChildren\"\n                    class=\"permission-group\"\n                    align=\"right\">\n                  <ng-container *ngIf=\"!aclRole.allPermissions && !disabled\">\n                    <fs-menu>\n                      <ng-container *ngFor=\"let access of AclRoleAccesses | builkOptionsFilter: groupChildren\">\n                        <ng-template\n                            fs-menu-item\n                            (click)=\"bulkChange(access.value, groupChildren, group)\">\n                          {{ access.name }}\n                        </ng-template>\n                      </ng-container>\n                    </fs-menu>\n                  </ng-container>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions || disabled; else elseAll\">\n                    {{indexedAccesses[aclRolePermissions[permission.value]]}}\n                  </span>\n                  <ng-template #elseAll>\n                    <ng-container *ngIf=\"permission|aclRolePermissionAvailable:aclRolePermissions; else permissionRequires\">\n                      <mat-form-field>\n                        <mat-select\n                            [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                            [disabled]=\"!!aclRole.protected\"\n                            required\n                            [name]=\"'access-' + permission.value\"\n                            (ngModelChange)=\"permissionChange()\">\n                          <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                            <mat-option\n                                *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                                [value]=\"access.value\">\n                              {{access.name}}\n                            </mat-option>\n                          </ng-container>\n                        </mat-select>\n                      </mat-form-field>\n                    </ng-container>\n                    <ng-template #permissionRequires>\n                      Unavailable\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button\n            *ngIf=\"!disabled\"\n            #submit\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n          {{ aclRole.id ? 'Save' : 'Create' }}\n        </button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">{{ disabled ? 'Done' : 'Cancel' }}</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n", styles: [".permissions{flex:1}.permissions ::ng-deep .fs-list-row-group{background-color:#e4e4e4;font-size:112%}.permissions ::ng-deep fs-list .access{white-space:nowrap}.permissions ::ng-deep .mat-form-field{width:100px}.permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}.permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}.permissions ::ng-deep fs-radio-group{width:100%}.permissions ::ng-deep fs-label-field{width:100%}.permissions .level{width:100%}.left-column{width:40%;max-width:400px}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: FsAppAclService }, { type: i2.MatDialogRef }, { type: i3.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent]
-            }], submitButton: [{
-                type: ViewChild,
-                args: ['submit', { static: false }]
+class FsAclRoleComponent {
+    constructor(_data, _appAclService, _dialogRef, _message, _cdRef) {
+        this._data = _data;
+        this._appAclService = _appAclService;
+        this._dialogRef = _dialogRef;
+        this._message = _message;
+        this._cdRef = _cdRef;
+        this.aclRole = null;
+        this.permissions = [];
+        this.levelPermissions = [];
+        this.AclRoleAccesses = AclRoleAccesses;
+        this.indexedAccesses = {};
+        this.aclLevels = [];
+        this.indexedAclLevels = {};
+        this.onlyFullAccess = false;
+        this.AclLevels = {};
+        this.roleConfigs = [];
+        this.aclRoleConfigValues = {};
+        this.aclRolePermissions = {};
+        this._destroy$ = new Subject();
+        this.save = () => {
+            const aclRoleConfigs = this.roleConfigs
+                .map((roleConfig) => {
+                return {
+                    name: roleConfig.name,
+                    value: this.aclRoleConfigValues[roleConfig.name],
+                };
+            });
+            const aclRole = {
+                ...this.aclRole,
+                permissions: this.levelPermissions.map((permission) => {
+                    return {
+                        value: permission.value,
+                        access: this.aclRolePermissions[permission.value] || 0,
+                    };
+                }),
+                aclRoleConfigs,
+            };
+            return this._data.saveAclRole(aclRole)
+                .pipe(tap((response) => {
+                this._message.success('Saved Changes');
+                this.close(response);
+            }));
+        };
+    }
+    ngOnInit() {
+        forkJoin(this.getRole(), this._appAclService.getPermissions())
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(([aclRole, aclPermissions,]) => {
+            this.permissions = aclPermissions;
+            this.aclLevels = this._data.aclLevels;
+            this.disabled = this._data.disabled;
+            this.indexedAclLevels = list(this.aclLevels, 'name', 'value');
+            this.indexedAccesses = list(AclRoleAccesses, 'name', 'value');
+            this.aclRole = {
+                ...{
+                    aclPermissions: [],
+                    allPermissions: true,
+                    aclRoleConfigs: [],
+                    permissions: {},
+                    level: this.aclLevels[0].value,
+                },
+                ...aclRole,
+            };
+            this.aclRoleConfigValues = (aclRole.aclRoleConfigs || [])
+                .reduce((accum, aclRoleConfig) => {
+                return {
+                    ...accum,
+                    [aclRoleConfig.name]: aclRoleConfig.value,
+                };
+            }, {});
+            if (this.aclRole.id) {
+                this.permissions.forEach((permission) => {
+                    let access = 0;
+                    const aclPermission = this.aclRole.aclPermissions.find((item) => {
+                        return item.permission === permission.value;
+                    });
+                    if (aclPermission) {
+                        access = aclPermission.access;
+                    }
+                    this.aclRolePermissions[permission.value] = access;
+                });
+            }
+            if (this.aclRole.allPermissions) {
+                this._applyMaxPermissionAccess();
+            }
+            this._updatePermissions();
+            this._updateRoleConfigs();
+            this._cdRef.markForCheck();
+        });
+        this.listConfig = {
+            status: false,
+            paging: false,
+            rowHighlight: false,
+            noResults: {
+                message: '',
+            },
+            group: {
+                initialExpand: true,
+                groupBy: (data) => {
+                    return data;
+                },
+                compareBy: (data) => {
+                    return data.category || 'General';
+                },
+            },
+            fetch: () => {
+                return of({
+                    data: this.levelPermissions.sort((a, b) => {
+                        a = a.name.toUpperCase();
+                        b = b.name.toUpperCase();
+                        if (a < b) {
+                            return -1;
+                        }
+                        else if (a > b) {
+                            return 1;
+                        }
+                        return 0;
+                    }),
+                });
+            },
+        };
+    }
+    bulkChange(value, groupChildren, group) {
+        groupChildren
+            .forEach((permission) => {
+            const access = permission.accesses
+                .find((access) => value === access);
+            if (access || !value) {
+                this.aclRolePermissions[permission.value] = value;
+            }
+        });
+        setTimeout(() => {
+            this.submitButton.disabled = false;
+            this.permissionChange();
+        });
+    }
+    permissionChange() {
+        this.aclRolePermissions = {
+            ...this.aclRolePermissions,
+        };
+        this._cdRef.markForCheck();
+    }
+    levelChange() {
+        this._updatePermissions();
+        this._updateRoleConfigs();
+        this.list.reload();
+    }
+    getRole() {
+        if (!this._data.aclRole.id) {
+            return of(this._data.aclRole);
+        }
+        const query = {
+            aclPermissions: true,
+            aclRoleConfigs: true,
+        };
+        if (!this.environment) {
+            query.environmentId = null;
+        }
+        return this._data.loadAclRole(this._data.aclRole, query);
+    }
+    close(data = null) {
+        this._dialogRef.close(data);
+    }
+    allPermissionsChange(all) {
+        this._updatePermissions();
+        if (all) {
+            this._applyMaxPermissionAccess();
+        }
+        else {
+            this._applyNonePermissionAccess();
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _updatePermissions() {
+        this.levelPermissions = this.permissions
+            .filter((permission) => {
+            return permission.levels.some((item) => {
+                return item === this.aclRole.level;
+            });
+        });
+    }
+    _updateRoleConfigs() {
+        if (this._data.loadRoleConfigs) {
+            this._data.loadRoleConfigs()
+                .subscribe((roleConfigs) => {
+                this.roleConfigs = roleConfigs
+                    .filter((roleConfig) => roleConfig.level === this.aclRole.level);
+                this._cdRef.markForCheck();
+            });
+        }
+    }
+    _applyMaxPermissionAccess() {
+        this.permissions.forEach((permission) => {
+            this.aclRolePermissions[permission.value] = Math.max(...permission.accesses);
+        });
+    }
+    _applyNonePermissionAccess() {
+        this.permissions.forEach((permission) => {
+            this.aclRolePermissions[permission.value] = AclRoleAccess.None;
+        });
+    }
+}
+FsAclRoleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclRoleComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FsAclRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }, { propertyName: "submitButton", first: true, predicate: ["submit"], descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>\n        <ng-container *ngIf=\"!disabled\">{{ aclRole.id ? 'Edit' : 'Create' }}</ng-container>\n        <ng-container *ngIf=\"disabled\">View</ng-container>\n        Role\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-row.gap-large.align-start\">\n          <div class=\"fs-column left-column\">\n            <mat-form-field>            \n              <mat-label>Name</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.name\"\n                [disabled]=\"disabled\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n\n            <mat-form-field>\n              <mat-label>Description</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.description\"\n                [disabled]=\"disabled\"\n                name=\"description\">\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                    [(ngModel)]=\"aclRole.level\"\n                    [disabled]=\"disabled\"\n                    (ngModelChange)=\"levelChange()\"\n                    fsFormRequired\n                    label=\"Level\"\n                    orientation=\"vertical\"\n                    name=\"level\">\n                  <mat-radio-button\n                      *ngFor=\"let item of aclLevels\"\n                      [value]=\"item.value\"\n                      [disabled]=\"!!aclRole.protected\">\n                    {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>All Permissions</fs-label>\n              <mat-checkbox\n                  [(ngModel)]=\"aclRole.allPermissions\"\n                  (ngModelChange)=\"allPermissionsChange($event)\"\n                  [disabled]=\"!!aclRole.protected || disabled\"\n                  name=\"allPermissions\">\n                Enable\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div class=\"fs-column\" *ngFor=\"let roleConfig of roleConfigs\">\n              <fs-label-field *ngIf=\"roleConfig.type === 'checkbox'\">\n                <fs-label>{{roleConfig.label}}</fs-label>\n                <mat-checkbox\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [disabled]=\"disabled\"\n                    [name]=\"roleConfig.name\">\n                  Enable\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{roleConfig.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"roleConfig.type === 'select'\">\n                <mat-select\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\"\n                    [required]=\"roleConfig.required\"\n                    [disabled]=\"disabled\"\n                    [placeholder]=\"roleConfig.label\">\n                  <mat-option\n                      *ngFor=\"let item of roleConfig.values\"\n                      [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                </mat-select>\n                <mat-hint>{{roleConfig.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions fs-column\">\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <div class=\"permission-group\">{{row.category || 'General'}}</div>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"row\">\n                  <div class=\"permission\">{{ row.name }}</div>\n                  <div class=\"description small\">{{ row.description }}</div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column title=\"Access\" width=\"1%\" class=\"access\">\n                <ng-template \n                    fs-list-group-cell\n                    let-row=\"row\"\n                    let-group=\"group\"\n                    let-groupChildren=\"groupChildren\"\n                    class=\"permission-group\"\n                    align=\"right\">\n                  <ng-container *ngIf=\"!aclRole.allPermissions && !disabled\">\n                    <fs-menu>\n                      <ng-container *ngFor=\"let access of AclRoleAccesses | builkOptionsFilter: groupChildren\">\n                        <ng-template\n                            fs-menu-item\n                            (click)=\"bulkChange(access.value, groupChildren, group)\">\n                          {{ access.name }}\n                        </ng-template>\n                      </ng-container>\n                    </fs-menu>\n                  </ng-container>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions || disabled; else elseAll\">\n                    {{indexedAccesses[aclRolePermissions[permission.value]]}}\n                  </span>\n                  <ng-template #elseAll>\n                    <ng-container *ngIf=\"permission|aclRolePermissionAvailable:aclRolePermissions; else permissionRequires\">\n                      <mat-form-field>\n                        <mat-select\n                            [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                            [disabled]=\"!!aclRole.protected\"\n                            required\n                            [name]=\"'access-' + permission.value\"\n                            (ngModelChange)=\"permissionChange()\">\n                          <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                            <mat-option\n                                *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                                [value]=\"access.value\">\n                              {{access.name}}\n                            </mat-option>\n                          </ng-container>\n                        </mat-select>\n                      </mat-form-field>\n                    </ng-container>\n                    <ng-template #permissionRequires>\n                      Unavailable\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button\n            *ngIf=\"!disabled\"\n            #submit\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n          {{ aclRole.id ? 'Save' : 'Create' }}\n        </button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">{{ disabled ? 'Done' : 'Cancel' }}</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n", styles: [".permissions{flex:1}.permissions ::ng-deep .fs-list-row-group{background-color:#e4e4e4;font-size:112%}.permissions ::ng-deep fs-list .access{white-space:nowrap}.permissions ::ng-deep .mat-form-field{width:100px}.permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}.permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}.permissions ::ng-deep fs-radio-group{width:100%}.permissions ::ng-deep fs-label-field{width:100%}.permissions .level{width:100%}.left-column{width:40%;max-width:400px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i13.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i13.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i13.FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]" }, { kind: "component", type: i14.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i15.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i15.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i15.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i16.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i16.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i16.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "component", type: i17.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { kind: "component", type: i18.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i18.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "pipe", type: BulkOptionsFilterPipe, name: "builkOptionsFilter" }, { kind: "pipe", type: AclRolePermissionAvailablePipe, name: "aclRolePermissionAvailable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclRoleComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>\n        <ng-container *ngIf=\"!disabled\">{{ aclRole.id ? 'Edit' : 'Create' }}</ng-container>\n        <ng-container *ngIf=\"disabled\">View</ng-container>\n        Role\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-row.gap-large.align-start\">\n          <div class=\"fs-column left-column\">\n            <mat-form-field>            \n              <mat-label>Name</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.name\"\n                [disabled]=\"disabled\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n\n            <mat-form-field>\n              <mat-label>Description</mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.description\"\n                [disabled]=\"disabled\"\n                name=\"description\">\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                    [(ngModel)]=\"aclRole.level\"\n                    [disabled]=\"disabled\"\n                    (ngModelChange)=\"levelChange()\"\n                    fsFormRequired\n                    label=\"Level\"\n                    orientation=\"vertical\"\n                    name=\"level\">\n                  <mat-radio-button\n                      *ngFor=\"let item of aclLevels\"\n                      [value]=\"item.value\"\n                      [disabled]=\"!!aclRole.protected\">\n                    {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>All Permissions</fs-label>\n              <mat-checkbox\n                  [(ngModel)]=\"aclRole.allPermissions\"\n                  (ngModelChange)=\"allPermissionsChange($event)\"\n                  [disabled]=\"!!aclRole.protected || disabled\"\n                  name=\"allPermissions\">\n                Enable\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div class=\"fs-column\" *ngFor=\"let roleConfig of roleConfigs\">\n              <fs-label-field *ngIf=\"roleConfig.type === 'checkbox'\">\n                <fs-label>{{roleConfig.label}}</fs-label>\n                <mat-checkbox\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [disabled]=\"disabled\"\n                    [name]=\"roleConfig.name\">\n                  Enable\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{roleConfig.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"roleConfig.type === 'select'\">\n                <mat-select\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\"\n                    [required]=\"roleConfig.required\"\n                    [disabled]=\"disabled\"\n                    [placeholder]=\"roleConfig.label\">\n                  <mat-option\n                      *ngFor=\"let item of roleConfig.values\"\n                      [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                </mat-select>\n                <mat-hint>{{roleConfig.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions fs-column\">\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <div class=\"permission-group\">{{row.category || 'General'}}</div>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"row\">\n                  <div class=\"permission\">{{ row.name }}</div>\n                  <div class=\"description small\">{{ row.description }}</div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column title=\"Access\" width=\"1%\" class=\"access\">\n                <ng-template \n                    fs-list-group-cell\n                    let-row=\"row\"\n                    let-group=\"group\"\n                    let-groupChildren=\"groupChildren\"\n                    class=\"permission-group\"\n                    align=\"right\">\n                  <ng-container *ngIf=\"!aclRole.allPermissions && !disabled\">\n                    <fs-menu>\n                      <ng-container *ngFor=\"let access of AclRoleAccesses | builkOptionsFilter: groupChildren\">\n                        <ng-template\n                            fs-menu-item\n                            (click)=\"bulkChange(access.value, groupChildren, group)\">\n                          {{ access.name }}\n                        </ng-template>\n                      </ng-container>\n                    </fs-menu>\n                  </ng-container>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions || disabled; else elseAll\">\n                    {{indexedAccesses[aclRolePermissions[permission.value]]}}\n                  </span>\n                  <ng-template #elseAll>\n                    <ng-container *ngIf=\"permission|aclRolePermissionAvailable:aclRolePermissions; else permissionRequires\">\n                      <mat-form-field>\n                        <mat-select\n                            [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                            [disabled]=\"!!aclRole.protected\"\n                            required\n                            [name]=\"'access-' + permission.value\"\n                            (ngModelChange)=\"permissionChange()\">\n                          <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                            <mat-option\n                                *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                                [value]=\"access.value\">\n                              {{access.name}}\n                            </mat-option>\n                          </ng-container>\n                        </mat-select>\n                      </mat-form-field>\n                    </ng-container>\n                    <ng-template #permissionRequires>\n                      Unavailable\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button\n            *ngIf=\"!disabled\"\n            #submit\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n          {{ aclRole.id ? 'Save' : 'Create' }}\n        </button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">{{ disabled ? 'Done' : 'Cancel' }}</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n", styles: [".permissions{flex:1}.permissions ::ng-deep .fs-list-row-group{background-color:#e4e4e4;font-size:112%}.permissions ::ng-deep fs-list .access{white-space:nowrap}.permissions ::ng-deep .mat-form-field{width:100px}.permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}.permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}.permissions ::ng-deep fs-radio-group{width:100%}.permissions ::ng-deep fs-label-field{width:100%}.permissions .level{width:100%}.left-column{width:40%;max-width:400px}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: FsAppAclService }, { type: i2.MatDialogRef }, { type: i3.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }], submitButton: [{
+                type: ViewChild,
+                args: ['submit', { static: false }]
             }] } });
 
-class FsAclPermissionPopoverComponent {
-    constructor(_appAclService) {
-        this._appAclService = _appAclService;
-    }
-    ngOnInit() {
-        this._appAclService.getPermissions()
-            .subscribe(permissions => {
-            this.description = permissions.filter(item => {
-                return item.value === this.permission.value;
-            }).map(item => {
-                return item.description;
-            })[0];
-        });
-    }
-}
-FsAclPermissionPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclPermissionPopoverComponent, deps: [{ token: FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
-FsAclPermissionPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], components: [{ type: i2$1.FsPopoverComponent, selector: "fs-popover" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclPermissionPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'acl-permission-popover', template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: FsAppAclService }]; }, propDecorators: { permission: [{
-                type: Input
+class FsAclPermissionPopoverComponent {
+    constructor(_appAclService) {
+        this._appAclService = _appAclService;
+    }
+    ngOnInit() {
+        this._appAclService.getPermissions()
+            .subscribe(permissions => {
+            this.description = permissions.filter(item => {
+                return item.value === this.permission.value;
+            }).map(item => {
+                return item.description;
+            })[0];
+        });
+    }
+}
+FsAclPermissionPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclPermissionPopoverComponent, deps: [{ token: FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
+FsAclPermissionPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2$1.FsPopoverComponent, selector: "fs-popover" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclPermissionPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acl-permission-popover', template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: FsAppAclService }]; }, propDecorators: { permission: [{
+                type: Input
             }] } });
 
-class FsAclRolesComponent {
-    constructor(_appAclService, _dialog) {
-        this._appAclService = _appAclService;
-        this._dialog = _dialog;
-        this.aclLevels = [];
-        this.list = new QueryList();
-        this.indexedAclRoleLevels = {};
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        new Observable(observer => {
-            if (this.aclLevels.length) {
-                observer.next(this.aclLevels);
-                observer.complete();
-            }
-            else {
-                this._appAclService.getLevels()
-                    .subscribe((aclLevels) => {
-                    observer.next(aclLevels);
-                    observer.complete();
-                });
-            }
-        })
-            .subscribe((aclLevels) => {
-            this.aclLevels = aclLevels;
-            this.indexedAclRoleLevels = list(this.aclLevels, 'name', 'value');
-            this._loadListConfig();
-        });
-    }
-    openDialog(aclRole = { id: null }) {
-        this._dialog.open(FsAclRoleComponent, {
-            width: '70%',
-            data: {
-                aclRole,
-                aclLevels: this.aclLevels,
-                loadAclRole: this.loadAclRole,
-                saveAclRole: this.saveAclRole,
-                loadRoleConfigs: this.loadRoleConfigs,
-                disabled: this.disabledAclRole
-                    ? this.disabledAclRole(aclRole)
-                    : false,
-            },
-        })
-            .afterClosed()
-            .pipe(takeUntil(this._destroy$), filter((response) => !!response))
-            .subscribe((response) => {
-            this.list.forEach((list) => {
-                list.reload();
-            });
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _loadListConfig() {
-        this.listConfig = {
-            sort: { value: 'hierarchy' },
-            filters: [
-                {
-                    name: 'keyword',
-                    type: ItemType.Keyword,
-                    label: 'Search',
-                },
-                {
-                    name: 'level',
-                    label: 'Level',
-                    type: ItemType.Select,
-                    values: this.aclLevels,
-                    hide: this.aclLevels.length <= 1
-                },
-                {
-                    name: 'state',
-                    label: 'Show Deleted',
-                    type: ItemType.Checkbox,
-                    unchecked: 'active',
-                    checked: 'deleted',
-                },
-            ],
-            actions: [
-                {
-                    click: (event) => {
-                        this.openDialog();
-                    },
-                    label: 'Create',
-                },
-            ],
-            rowActions: [
-                {
-                    click: (data) => {
-                        return this.deleteAclRole(data);
-                    },
-                    remove: {
-                        title: 'Confirm',
-                        template: 'Are you sure you would like to delete this role?',
-                    },
-                    menu: true,
-                    label: 'Delete',
-                    show: (row) => {
-                        const hideDelete = !!this.disabledAclRole
-                            ? this.disabledAclRole(row)
-                            : false;
-                        return !!this.deleteAclRole
-                            && row.state !== 'deleted'
-                            && !hideDelete;
-                    },
-                },
-                {
-                    click: (data) => {
-                        return this.restoreAclRole(data)
-                            .pipe(tap(() => {
-                            this.list.forEach((l) => {
-                                l.reload();
-                            });
-                        }), takeUntil(this._destroy$))
-                            .subscribe();
-                    },
-                    label: 'Restore',
-                    show: (row) => !!this.restoreAclRole && row.state === 'deleted',
-                },
-            ],
-            fetch: (query) => {
-                query.permissions = true;
-                return this.loadAclRoles(query)
-                    .pipe(map((data) => data));
-            },
-        };
-    }
-}
-FsAclRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclRolesComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", restoreAclRole: "restoreAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", loadRoleConfigs: "loadRoleConfigs", aclLevels: "aclLevels", disabledAclRole: "disabledAclRole" }, viewQueries: [{ propertyName: "list", predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== 'deleted' else deletedRole\">\n        <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n      </ng-container>\n      <ng-template #deletedRole>\n        {{ row.name }}\n      </ng-template>\n      <div class=\"small\">{{row.description}}</div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], components: [{ type: i12.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclRolesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-acl-roles', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== 'deleted' else deletedRole\">\n        <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n      </ng-container>\n      <ng-template #deletedRole>\n        {{ row.name }}\n      </ng-template>\n      <div class=\"small\">{{row.description}}</div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"] }]
-        }], ctorParameters: function () { return [{ type: FsAppAclService }, { type: i2.MatDialog }]; }, propDecorators: { deleteAclRole: [{
-                type: Input
-            }], restoreAclRole: [{
-                type: Input
-            }], saveAclRole: [{
-                type: Input
-            }], loadAclRoles: [{
-                type: Input
-            }], loadAclRole: [{
-                type: Input
-            }], loadRoleConfigs: [{
-                type: Input
-            }], aclLevels: [{
-                type: Input
-            }], disabledAclRole: [{
-                type: Input
-            }], list: [{
-                type: ViewChildren,
-                args: [FsListComponent]
+class FsAclRolesComponent {
+    constructor(_appAclService, _dialog) {
+        this._appAclService = _appAclService;
+        this._dialog = _dialog;
+        this.aclLevels = [];
+        this.list = new QueryList();
+        this.indexedAclRoleLevels = {};
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        new Observable(observer => {
+            if (this.aclLevels.length) {
+                observer.next(this.aclLevels);
+                observer.complete();
+            }
+            else {
+                this._appAclService.getLevels()
+                    .subscribe((aclLevels) => {
+                    observer.next(aclLevels);
+                    observer.complete();
+                });
+            }
+        })
+            .subscribe((aclLevels) => {
+            this.aclLevels = aclLevels;
+            this.indexedAclRoleLevels = list(this.aclLevels, 'name', 'value');
+            this._loadListConfig();
+        });
+    }
+    openDialog(aclRole = { id: null }) {
+        this._dialog.open(FsAclRoleComponent, {
+            width: '70%',
+            data: {
+                aclRole,
+                aclLevels: this.aclLevels,
+                loadAclRole: this.loadAclRole,
+                saveAclRole: this.saveAclRole,
+                loadRoleConfigs: this.loadRoleConfigs,
+                disabled: this.disabledAclRole
+                    ? this.disabledAclRole(aclRole)
+                    : false,
+            },
+        })
+            .afterClosed()
+            .pipe(takeUntil(this._destroy$), filter((response) => !!response))
+            .subscribe((response) => {
+            this.list.forEach((list) => {
+                list.reload();
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _loadListConfig() {
+        this.listConfig = {
+            sort: { value: 'hierarchy' },
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search',
+                },
+                {
+                    name: 'level',
+                    label: 'Level',
+                    type: ItemType.Select,
+                    values: this.aclLevels,
+                    hide: this.aclLevels.length <= 1
+                },
+                {
+                    name: 'state',
+                    label: 'Show Deleted',
+                    type: ItemType.Checkbox,
+                    unchecked: 'active',
+                    checked: 'deleted',
+                },
+            ],
+            actions: [
+                {
+                    click: (event) => {
+                        this.openDialog();
+                    },
+                    label: 'Create',
+                },
+            ],
+            rowActions: [
+                {
+                    click: (data) => {
+                        return this.deleteAclRole(data);
+                    },
+                    remove: {
+                        title: 'Confirm',
+                        template: 'Are you sure you would like to delete this role?',
+                    },
+                    menu: true,
+                    label: 'Delete',
+                    show: (row) => {
+                        const hideDelete = !!this.disabledAclRole
+                            ? this.disabledAclRole(row)
+                            : false;
+                        return !!this.deleteAclRole
+                            && row.state !== 'deleted'
+                            && !hideDelete;
+                    },
+                },
+                {
+                    click: (data) => {
+                        return this.restoreAclRole(data)
+                            .pipe(tap(() => {
+                            this.list.forEach((l) => {
+                                l.reload();
+                            });
+                        }), takeUntil(this._destroy$))
+                            .subscribe();
+                    },
+                    label: 'Restore',
+                    show: (row) => !!this.restoreAclRole && row.state === 'deleted',
+                },
+            ],
+            fetch: (query) => {
+                query.permissions = true;
+                return this.loadAclRoles(query)
+                    .pipe(map((data) => data));
+            },
+        };
+    }
+}
+FsAclRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclRolesComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FsAclRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", restoreAclRole: "restoreAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", loadRoleConfigs: "loadRoleConfigs", aclLevels: "aclLevels", disabledAclRole: "disabledAclRole" }, viewQueries: [{ propertyName: "list", predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== 'deleted' else deletedRole\">\n        <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n      </ng-container>\n      <ng-template #deletedRole>\n        {{ row.name }}\n      </ng-template>\n      <div class=\"small\">{{row.description}}</div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i13.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i13.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i13.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclRolesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-acl-roles', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== 'deleted' else deletedRole\">\n        <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n      </ng-container>\n      <ng-template #deletedRole>\n        {{ row.name }}\n      </ng-template>\n      <div class=\"small\">{{row.description}}</div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"] }]
+        }], ctorParameters: function () { return [{ type: FsAppAclService }, { type: i2.MatDialog }]; }, propDecorators: { deleteAclRole: [{
+                type: Input
+            }], restoreAclRole: [{
+                type: Input
+            }], saveAclRole: [{
+                type: Input
+            }], loadAclRoles: [{
+                type: Input
+            }], loadAclRole: [{
+                type: Input
+            }], loadRoleConfigs: [{
+                type: Input
+            }], aclLevels: [{
+                type: Input
+            }], disabledAclRole: [{
+                type: Input
+            }], list: [{
+                type: ViewChildren,
+                args: [FsListComponent]
             }] } });
 
-class FsAclRolePopoverComponent {
-    constructor(_appAclService) {
-        this._appAclService = _appAclService;
-        this.permissions = [];
-    }
-    ngOnInit() {
-        const aclRolePermissions = this.aclRole.permissions || [];
-        this._appAclService.getPermissions()
-            .subscribe((response) => {
-            this.permissions = response.filter(item => {
-                return aclRolePermissions.some(permission => {
-                    return item.value === permission.value;
-                });
-            });
-        });
-    }
-}
-FsAclRolePopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclRolePopoverComponent, deps: [{ token: FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRolePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], components: [{ type: i2$1.FsPopoverComponent, selector: "fs-popover" }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclRolePopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-acl-role-popover', template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: FsAppAclService }]; }, propDecorators: { aclRole: [{
-                type: Input
-            }], objectName: [{
-                type: Input
+class FsAclRolePopoverComponent {
+    constructor(_appAclService) {
+        this._appAclService = _appAclService;
+        this.permissions = [];
+    }
+    ngOnInit() {
+        const aclRolePermissions = this.aclRole.permissions || [];
+        this._appAclService.getPermissions()
+            .subscribe((response) => {
+            this.permissions = response.filter(item => {
+                return aclRolePermissions.some(permission => {
+                    return item.value === permission.value;
+                });
+            });
+        });
+    }
+}
+FsAclRolePopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclRolePopoverComponent, deps: [{ token: FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
+FsAclRolePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FsPopoverComponent, selector: "fs-popover" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclRolePopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-acl-role-popover', template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: FsAppAclService }]; }, propDecorators: { aclRole: [{
+                type: Input
+            }], objectName: [{
+                type: Input
             }] } });
 
-class FsAclObjectRolesComponent {
-    constructor() {
-        this.aclRoles = [];
-        this.required = false;
-        this.multiple = false;
-        this.disabled = false;
-        this.aclObjectRoles = [];
-        this.rolesLabel = 'Roles';
-        this.levelLabel = '';
-        this.change = new EventEmitter();
-        this.compareAclRole = (o1, o2) => {
-            return o1 && o2 && o1.id === o2.id;
-        };
-    }
-    changed() {
-        this.change.emit(this.aclObjectRoles);
-    }
-}
-FsAclObjectRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclObjectRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsAclObjectRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: { aclRoles: "aclRoles", required: "required", multiple: "multiple", disabled: "disabled", aclObjectRoles: "aclObjectRoles", rolesLabel: "rolesLabel", levelLabel: "levelLabel" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"$any(aclRole)\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"], components: [{ type: i1.FsCheckboxGroupComponent, selector: "fs-checkbox-group", inputs: ["orientation", "position", "label", "disabled", "compareWith"], outputs: ["change"] }, { type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i15.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i16.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclObjectRolesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-acl-object-roles', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"$any(aclRole)\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"] }]
-        }], propDecorators: { aclRoles: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], aclObjectRoles: [{
-                type: Input
-            }], rolesLabel: [{
-                type: Input
-            }], levelLabel: [{
-                type: Input
-            }], change: [{
-                type: Output
+class FsAclObjectRolesComponent {
+    constructor() {
+        this.aclRoles = [];
+        this.required = false;
+        this.multiple = false;
+        this.disabled = false;
+        this.aclObjectRoles = [];
+        this.rolesLabel = 'Roles';
+        this.levelLabel = '';
+        this.change = new EventEmitter();
+        this.compareAclRole = (o1, o2) => {
+            return o1 && o2 && o1.id === o2.id;
+        };
+    }
+    changed() {
+        this.change.emit(this.aclObjectRoles);
+    }
+}
+FsAclObjectRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclObjectRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FsAclObjectRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: { aclRoles: "aclRoles", required: "required", multiple: "multiple", disabled: "disabled", aclObjectRoles: "aclObjectRoles", rolesLabel: "rolesLabel", levelLabel: "levelLabel" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"$any(aclRole)\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i15.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i15.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: i8$1.FsCheckboxGroupComponent, selector: "fs-checkbox-group", inputs: ["orientation", "position", "label", "disabled", "compareWith"], outputs: ["change"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclObjectRolesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-acl-object-roles', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"$any(aclRole)\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"] }]
+        }], propDecorators: { aclRoles: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], aclObjectRoles: [{
+                type: Input
+            }], rolesLabel: [{
+                type: Input
+            }], levelLabel: [{
+                type: Input
+            }], change: [{
+                type: Output
             }] } });
 
-class FsAclEntryComponent {
-    constructor(_appAclService, _dialogRef, _message, _data) {
-        this._appAclService = _appAclService;
-        this._dialogRef = _dialogRef;
-        this._message = _message;
-        this._data = _data;
-        this.aclRoles = [];
-        this.aclEntries = [];
-        this.indexedAclRoleLevels = {};
-        this.titleEdit = 'Edit Roles';
-        this.titleAdd = 'Assign Roles';
-        this.required = true;
-        this.save = () => {
-            const aclObjectEntry = {
-                ...this.aclObjectEntry,
-                aclEntries: this.aclEntries,
-            };
-            return this._data.saveAclObjectEntry(aclObjectEntry)
-                .pipe(tap((data) => {
-                this._message.success('Saved Changes');
-                this.close(data);
-            }));
-        };
-        this.aclObjectEntry = { ..._data.aclObjectEntry };
-        this.required = _data.required ?? true;
-        if (_data.titleEdit) {
-            this.titleEdit = _data.titleEdit;
-        }
-        if (_data.titleAdd) {
-            this.titleAdd = _data.titleAdd;
-        }
-    }
-    ngOnInit() {
-        forkJoin(this._data.loadAclRoles({
-            level: this.aclObjectEntry.level,
-            environmentId: this.aclObjectEntry.environmentId || null,
-        }), this._appAclService.getIndexedLevels())
-            .subscribe(([aclRoles, levels,]) => {
-            this.aclRoles = aclRoles;
-            this.indexedAclRoleLevels = levels;
-            this.aclObjectRole = {
-                object: this.aclObjectEntry.object,
-                aclRoles: this.aclObjectEntry.aclEntries
-                    .map((aclEntry) => {
-                    return aclEntry.aclRole;
-                }),
-            };
-        });
-    }
-    aclObjectRoleChange(aclObjectRoles) {
-        this.aclEntries = aclObjectRoles.reduce((aclEntries, aclObjectRole) => {
-            aclObjectRole.aclRoles.forEach(aclRole => {
-                aclEntries.push({
-                    aclRoleId: aclRole.id,
-                    aclRole: aclRole,
-                    objectId: aclObjectRole.object ? aclObjectRole.object.id : null,
-                    object: aclObjectRole.object || null
-                });
-            });
-            return aclEntries;
-        }, []);
-    }
-    close(data = null) {
-        this._dialogRef.close(data);
-    }
-}
-FsAclEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclEntryComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-FsAclEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: i6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6.FsLabelComponent, selector: "fs-label" }, { type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }, { type: i14.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i15.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclEntryComponent, decorators: [{
-            type: Component,
-            args: [{ template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: FsAppAclService }, { type: i2.MatDialogRef }, { type: i3.FsMessage }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class FsAclEntryComponent {
+    constructor(_appAclService, _dialogRef, _message, _data) {
+        this._appAclService = _appAclService;
+        this._dialogRef = _dialogRef;
+        this._message = _message;
+        this._data = _data;
+        this.aclRoles = [];
+        this.aclEntries = [];
+        this.indexedAclRoleLevels = {};
+        this.titleEdit = 'Edit Roles';
+        this.titleAdd = 'Assign Roles';
+        this.required = true;
+        this.save = () => {
+            const aclObjectEntry = {
+                ...this.aclObjectEntry,
+                aclEntries: this.aclEntries,
+            };
+            return this._data.saveAclObjectEntry(aclObjectEntry)
+                .pipe(tap((data) => {
+                this._message.success('Saved Changes');
+                this.close(data);
+            }));
+        };
+        this.aclObjectEntry = { ..._data.aclObjectEntry };
+        this.required = _data.required ?? true;
+        if (_data.titleEdit) {
+            this.titleEdit = _data.titleEdit;
+        }
+        if (_data.titleAdd) {
+            this.titleAdd = _data.titleAdd;
+        }
+    }
+    ngOnInit() {
+        forkJoin(this._data.loadAclRoles({
+            level: this.aclObjectEntry.level,
+            environmentId: this.aclObjectEntry.environmentId || null,
+        }), this._appAclService.getIndexedLevels())
+            .subscribe(([aclRoles, levels,]) => {
+            this.aclRoles = aclRoles;
+            this.indexedAclRoleLevels = levels;
+            this.aclObjectRole = {
+                object: this.aclObjectEntry.object,
+                aclRoles: this.aclObjectEntry.aclEntries
+                    .map((aclEntry) => {
+                    return aclEntry.aclRole;
+                }),
+            };
+        });
+    }
+    aclObjectRoleChange(aclObjectRoles) {
+        this.aclEntries = aclObjectRoles.reduce((aclEntries, aclObjectRole) => {
+            aclObjectRole.aclRoles.forEach(aclRole => {
+                aclEntries.push({
+                    aclRoleId: aclRole.id,
+                    aclRole: aclRole,
+                    objectId: aclObjectRole.object ? aclObjectRole.object.id : null,
+                    object: aclObjectRole.object || null
+                });
+            });
+            return aclEntries;
+        }, []);
+    }
+    close(data = null) {
+        this._dialogRef.close(data);
+    }
+}
+FsAclEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclEntryComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+FsAclEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i10.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i14.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i15.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i16.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i16.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclEntryComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FsAppAclService }, { type: i2.MatDialogRef }, { type: i3.FsMessage }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-class FsAclEntriesComponent {
-    constructor(_appAclService, _dialog, _confirm) {
-        this._appAclService = _appAclService;
-        this._dialog = _dialog;
-        this._confirm = _confirm;
-        this.environmentShow = true;
-        this.environmentLabel = 'Environment';
-        this.environmentKey = 'environment';
-        this.actions = [];
-        this.aclEntriesList = null;
-        this.aclEntriesConfig = null;
-        this.permissions = [];
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this._appAclService.getPermissions()
-            .subscribe(response => {
-            this.permissions = response;
-        });
-        this.aclEntriesConfig = {
-            status: false,
-            paging: false,
-            actions: this.actions,
-            rowActions: [
-                {
-                    label: 'Remove All Roles',
-                    click: (aclObjectEntry) => {
-                        this._confirm
-                            .confirm({
-                            title: 'Remove All Roles',
-                            commitLabel: 'Save',
+class FsAclEntriesComponent {
+    constructor(_appAclService, _dialog, _confirm) {
+        this._appAclService = _appAclService;
+        this._dialog = _dialog;
+        this._confirm = _confirm;
+        this.environmentShow = true;
+        this.environmentLabel = 'Environment';
+        this.environmentKey = 'environment';
+        this.actions = [];
+        this.aclEntriesList = null;
+        this.aclEntriesConfig = null;
+        this.permissions = [];
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this._appAclService.getPermissions()
+            .subscribe(response => {
+            this.permissions = response;
+        });
+        this.aclEntriesConfig = {
+            status: false,
+            paging: false,
+            actions: this.actions,
+            rowActions: [
+                {
+                    label: 'Remove All Roles',
+                    click: (aclObjectEntry) => {
+                        this._confirm
+                            .confirm({
+                            title: 'Remove All Roles',
+                            commitLabel: 'Save',
                             template: `Please note that removing roles may prevent users from being able to successfully login.<br>
                   These changes are effective immediately.<br>
-                  Are you sure you would like to continue?`,
-                        }).subscribe(() => {
-                            const data = { ...aclObjectEntry, aclEntries: [] };
-                            this.saveAclObjectEntry(data)
-                                .subscribe(() => {
-                                this.aclEntriesList.reload();
-                            });
-                        });
-                    }
-                }
-            ],
-            fetch: () => {
-                return new Observable((observer) => {
-                    this.loadAclEntries({
-                        aclRoles: true,
-                        aclRolePermissions: true,
-                        objects: true,
-                        aclRoleState: 'active',
-                    })
-                        .subscribe((aclEntries) => {
-                        const objects = aclEntries
-                            .filter((aclEntry) => (!!aclEntry.object))
-                            .reduce((items, item) => {
-                            return {
-                                ...items,
-                                [item.object.id]: item.object,
-                            };
-                        }, {});
-                        const environments = aclEntries
-                            .filter((aclEntry) => (!!aclEntry[this.environmentKey]))
-                            .reduce((items, item) => {
-                            const environment = item[this.environmentKey];
-                            return {
-                                ...items,
-                                [environment.id]: environment,
-                            };
-                        }, {});
-                        const groupedAclEntries = groupBy(aclEntries, (item) => {
-                            const environmentId = (item[this.environmentKey])?.id;
-                            return [item.aclRole.level, environmentId, item.objectId];
-                        });
-                        let aclObjectEntries = Object.keys(groupedAclEntries)
-                            .reduce((accum, key) => {
-                            const parts = key.split(',');
-                            return [
-                                ...accum,
-                                {
-                                    object: objects[parts[2]],
-                                    level: parts[0],
-                                    [`${this.environmentKey}Id`]: parts[1] ? parseInt(parts[1]) : null,
-                                    [this.environmentKey]: environments[parts[1]],
-                                    aclEntries: groupedAclEntries[key],
-                                }
-                            ];
-                        }, []);
-                        const hasApp = aclObjectEntries.some((item) => {
-                            return item.aclEntries.some((entry) => {
-                                return !entry.objectId;
-                            });
-                        });
-                        if (!hasApp) {
-                            aclObjectEntries.unshift({
-                                object: null,
-                                aclEntries: [],
-                                level: 'app',
-                                environmentId: null,
-                            });
-                        }
-                        aclObjectEntries = sortBy(aclObjectEntries, (item) => {
-                            return item.object ? item.level : '';
-                        });
-                        observer.next({ data: aclObjectEntries });
-                        observer.complete();
-                    });
-                });
-            },
-        };
-    }
-    update(aclObjectEntry) {
-        const data = {
-            aclObjectEntry,
-            required: false,
-            loadAclRoles: this.loadAclRoles,
-            saveAclObjectEntry: this.saveAclObjectEntry
-        };
-        this._dialog.open(FsAclEntryComponent, {
-            data: data
-        })
-            .afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.aclEntriesList.reload();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    reload() {
-        this.aclEntriesList.reload();
-    }
-}
-FsAclEntriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclEntriesComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialog }, { token: i3$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-FsAclEntriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsAclEntriesComponent, selector: "fs-acl-entries", inputs: { loadAclEntries: "loadAclEntries", loadAclRoles: "loadAclRoles", saveAclObjectEntry: "saveAclObjectEntry", environmentShow: "environmentShow", environmentLabel: "environmentLabel", environmentKey: "environmentKey", actions: "actions" }, viewQueries: [{ propertyName: "aclEntriesList", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Context</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div\n          *ngIf=\"row.object; else elseObject\"\n          class=\"fs-row.gap-small\">\n        <fs-badge *ngIf=\"row.object.imageUrl\" shape=\"circle\" image=\"{{ row.object.imageUrl }}\"></fs-badge>\n        <span>\n          <div><small>{{ row.object.className }}</small></div>\n          <a (click)=\"update(row)\">{{ row.object.name }}</a>\n        </span>\n      </div>\n\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">App</a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>{{environmentLabel}}</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.environment?.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Roles</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"fs-column\">\n        <div div *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\" objectName=\"App\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"row.object\">\n                <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i12.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$1.FsBadgeComponent, selector: "fs-badge", inputs: ["color", "text", "tooltip", "size", "shape", "image", "icon", "iconSize", "iconColor", "backgroundSize"] }, { type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: ["aclRole", "objectName"] }], directives: [{ type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { type: i12.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAclEntriesComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-acl-entries', template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Context</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div\n          *ngIf=\"row.object; else elseObject\"\n          class=\"fs-row.gap-small\">\n        <fs-badge *ngIf=\"row.object.imageUrl\" shape=\"circle\" image=\"{{ row.object.imageUrl }}\"></fs-badge>\n        <span>\n          <div><small>{{ row.object.className }}</small></div>\n          <a (click)=\"update(row)\">{{ row.object.name }}</a>\n        </span>\n      </div>\n\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">App</a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>{{environmentLabel}}</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.environment?.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Roles</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"fs-column\">\n        <div div *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\" objectName=\"App\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"row.object\">\n                <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: FsAppAclService }, { type: i2.MatDialog }, { type: i3$1.FsPrompt }]; }, propDecorators: { loadAclEntries: [{
-                type: Input
-            }], loadAclRoles: [{
-                type: Input
-            }], saveAclObjectEntry: [{
-                type: Input
-            }], environmentShow: [{
-                type: Input
-            }], environmentLabel: [{
-                type: Input
-            }], environmentKey: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], aclEntriesList: [{
-                type: ViewChild,
-                args: [FsListComponent]
+                  Are you sure you would like to continue?`,
+                        }).subscribe(() => {
+                            const data = { ...aclObjectEntry, aclEntries: [] };
+                            this.saveAclObjectEntry(data)
+                                .subscribe(() => {
+                                this.aclEntriesList.reload();
+                            });
+                        });
+                    }
+                }
+            ],
+            fetch: () => {
+                return new Observable((observer) => {
+                    this.loadAclEntries({
+                        aclRoles: true,
+                        aclRolePermissions: true,
+                        objects: true,
+                        aclRoleState: 'active',
+                    })
+                        .subscribe((aclEntries) => {
+                        const objects = aclEntries
+                            .filter((aclEntry) => (!!aclEntry.object))
+                            .reduce((items, item) => {
+                            return {
+                                ...items,
+                                [item.object.id]: item.object,
+                            };
+                        }, {});
+                        const environments = aclEntries
+                            .filter((aclEntry) => (!!aclEntry[this.environmentKey]))
+                            .reduce((items, item) => {
+                            const environment = item[this.environmentKey];
+                            return {
+                                ...items,
+                                [environment.id]: environment,
+                            };
+                        }, {});
+                        const groupedAclEntries = groupBy(aclEntries, (item) => {
+                            const environmentId = (item[this.environmentKey])?.id;
+                            return [item.aclRole.level, environmentId, item.objectId];
+                        });
+                        let aclObjectEntries = Object.keys(groupedAclEntries)
+                            .reduce((accum, key) => {
+                            const parts = key.split(',');
+                            return [
+                                ...accum,
+                                {
+                                    object: objects[parts[2]],
+                                    level: parts[0],
+                                    [`${this.environmentKey}Id`]: parts[1] ? parseInt(parts[1]) : null,
+                                    [this.environmentKey]: environments[parts[1]],
+                                    aclEntries: groupedAclEntries[key],
+                                }
+                            ];
+                        }, []);
+                        const hasApp = aclObjectEntries.some((item) => {
+                            return item.aclEntries.some((entry) => {
+                                return !entry.objectId;
+                            });
+                        });
+                        if (!hasApp) {
+                            aclObjectEntries.unshift({
+                                object: null,
+                                aclEntries: [],
+                                level: 'app',
+                                environmentId: null,
+                            });
+                        }
+                        aclObjectEntries = sortBy(aclObjectEntries, (item) => {
+                            return item.object ? item.level : '';
+                        });
+                        observer.next({ data: aclObjectEntries });
+                        observer.complete();
+                    });
+                });
+            },
+        };
+    }
+    update(aclObjectEntry) {
+        const data = {
+            aclObjectEntry,
+            required: false,
+            loadAclRoles: this.loadAclRoles,
+            saveAclObjectEntry: this.saveAclObjectEntry
+        };
+        this._dialog.open(FsAclEntryComponent, {
+            data: data
+        })
+            .afterClosed()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.aclEntriesList.reload();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    reload() {
+        this.aclEntriesList.reload();
+    }
+}
+FsAclEntriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclEntriesComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialog }, { token: i3$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
+FsAclEntriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsAclEntriesComponent, selector: "fs-acl-entries", inputs: { loadAclEntries: "loadAclEntries", loadAclRoles: "loadAclRoles", saveAclObjectEntry: "saveAclObjectEntry", environmentShow: "environmentShow", environmentLabel: "environmentLabel", environmentKey: "environmentKey", actions: "actions" }, viewQueries: [{ propertyName: "aclEntriesList", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Context</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div\n          *ngIf=\"row.object; else elseObject\"\n          class=\"fs-row.gap-small\">\n        <fs-badge *ngIf=\"row.object.imageUrl\" shape=\"circle\" image=\"{{ row.object.imageUrl }}\"></fs-badge>\n        <span>\n          <div><small>{{ row.object.className }}</small></div>\n          <a (click)=\"update(row)\">{{ row.object.name }}</a>\n        </span>\n      </div>\n\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">App</a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>{{environmentLabel}}</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.environment?.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Roles</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"fs-column\">\n        <div div *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\" objectName=\"App\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"row.object\">\n                <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i13.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i13.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i13.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i13.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i6$1.FsBadgeComponent, selector: "fs-badge", inputs: ["color", "text", "tooltip", "size", "shape", "image", "icon", "iconSize", "iconColor", "backgroundSize"] }, { kind: "component", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: ["aclRole", "objectName"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAclEntriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-acl-entries', template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Context</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div\n          *ngIf=\"row.object; else elseObject\"\n          class=\"fs-row.gap-small\">\n        <fs-badge *ngIf=\"row.object.imageUrl\" shape=\"circle\" image=\"{{ row.object.imageUrl }}\"></fs-badge>\n        <span>\n          <div><small>{{ row.object.className }}</small></div>\n          <a (click)=\"update(row)\">{{ row.object.name }}</a>\n        </span>\n      </div>\n\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">App</a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>{{environmentLabel}}</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.environment?.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Roles</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"fs-column\">\n        <div div *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\" objectName=\"App\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"row.object\">\n                <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n" }]
+        }], ctorParameters: function () { return [{ type: FsAppAclService }, { type: i2.MatDialog }, { type: i3$1.FsPrompt }]; }, propDecorators: { loadAclEntries: [{
+                type: Input
+            }], loadAclRoles: [{
+                type: Input
+            }], saveAclObjectEntry: [{
+                type: Input
+            }], environmentShow: [{
+                type: Input
+            }], environmentLabel: [{
+                type: Input
+            }], environmentKey: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], aclEntriesList: [{
+                type: ViewChild,
+                args: [FsListComponent]
             }] } });
 
-class FsAppAclModule {
-}
-FsAppAclModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAppAclModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsAppAclModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAppAclModule, declarations: [FsAclRolesComponent,
-        FsAclPermissionPopoverComponent,
-        FsAclRoleComponent,
-        FsAclEntriesComponent,
-        FsAclRolePopoverComponent,
-        FsAclObjectRolesComponent,
-        FsAclEntryComponent,
-        BulkOptionsFilterPipe,
-        AclRolePermissionAvailablePipe], imports: [CommonModule,
-        FormsModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatCheckboxModule,
-        MatSelectModule,
-        MatButtonModule,
-        MatRadioModule,
-        MatInputModule,
-        FsListModule,
-        FsPopoverModule,
-        FsDialogModule,
-        FsFormModule,
-        FsLabelModule,
-        FsRadioGroupModule,
-        FsBadgeModule,
-        FsCheckboxGroupModule,
-        FsMenuModule], exports: [FsAclRolesComponent,
-        FsAclPermissionPopoverComponent,
-        FsAclRoleComponent,
-        FsAclEntriesComponent,
-        FsAclRolePopoverComponent,
-        FsAclObjectRolesComponent,
-        FsAclEntryComponent] });
-FsAppAclModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAppAclModule, imports: [[
-            CommonModule,
-            FormsModule,
-            MatDialogModule,
-            MatFormFieldModule,
-            MatCheckboxModule,
-            MatSelectModule,
-            MatButtonModule,
-            MatRadioModule,
-            MatInputModule,
-            FsListModule,
-            FsPopoverModule,
-            FsDialogModule,
-            FsFormModule,
-            FsLabelModule,
-            FsRadioGroupModule,
-            FsBadgeModule,
-            FsCheckboxGroupModule,
-            FsMenuModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsAppAclModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatDialogModule,
-                        MatFormFieldModule,
-                        MatCheckboxModule,
-                        MatSelectModule,
-                        MatButtonModule,
-                        MatRadioModule,
-                        MatInputModule,
-                        FsListModule,
-                        FsPopoverModule,
-                        FsDialogModule,
-                        FsFormModule,
-                        FsLabelModule,
-                        FsRadioGroupModule,
-                        FsBadgeModule,
-                        FsCheckboxGroupModule,
-                        FsMenuModule,
-                    ],
-                    declarations: [
-                        FsAclRolesComponent,
-                        FsAclPermissionPopoverComponent,
-                        FsAclRoleComponent,
-                        FsAclEntriesComponent,
-                        FsAclRolePopoverComponent,
-                        FsAclObjectRolesComponent,
-                        FsAclEntryComponent,
-                        BulkOptionsFilterPipe,
-                        AclRolePermissionAvailablePipe,
-                    ],
-                    exports: [
-                        FsAclRolesComponent,
-                        FsAclPermissionPopoverComponent,
-                        FsAclRoleComponent,
-                        FsAclEntriesComponent,
-                        FsAclRolePopoverComponent,
-                        FsAclObjectRolesComponent,
-                        FsAclEntryComponent,
-                    ],
-                }]
+class FsAppAclModule {
+}
+FsAppAclModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAppAclModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsAppAclModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FsAppAclModule, declarations: [FsAclRolesComponent,
+        FsAclPermissionPopoverComponent,
+        FsAclRoleComponent,
+        FsAclEntriesComponent,
+        FsAclRolePopoverComponent,
+        FsAclObjectRolesComponent,
+        FsAclEntryComponent,
+        BulkOptionsFilterPipe,
+        AclRolePermissionAvailablePipe], imports: [CommonModule,
+        FormsModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatCheckboxModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatRadioModule,
+        MatInputModule,
+        FsListModule,
+        FsPopoverModule,
+        FsDialogModule,
+        FsFormModule,
+        FsLabelModule,
+        FsRadioGroupModule,
+        FsBadgeModule,
+        FsCheckboxGroupModule,
+        FsMenuModule], exports: [FsAclRolesComponent,
+        FsAclPermissionPopoverComponent,
+        FsAclRoleComponent,
+        FsAclEntriesComponent,
+        FsAclRolePopoverComponent,
+        FsAclObjectRolesComponent,
+        FsAclEntryComponent] });
+FsAppAclModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAppAclModule, imports: [CommonModule,
+        FormsModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatCheckboxModule,
+        MatSelectModule,
+        MatButtonModule,
+        MatRadioModule,
+        MatInputModule,
+        FsListModule,
+        FsPopoverModule,
+        FsDialogModule,
+        FsFormModule,
+        FsLabelModule,
+        FsRadioGroupModule,
+        FsBadgeModule,
+        FsCheckboxGroupModule,
+        FsMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsAppAclModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatDialogModule,
+                        MatFormFieldModule,
+                        MatCheckboxModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        MatRadioModule,
+                        MatInputModule,
+                        FsListModule,
+                        FsPopoverModule,
+                        FsDialogModule,
+                        FsFormModule,
+                        FsLabelModule,
+                        FsRadioGroupModule,
+                        FsBadgeModule,
+                        FsCheckboxGroupModule,
+                        FsMenuModule,
+                    ],
+                    declarations: [
+                        FsAclRolesComponent,
+                        FsAclPermissionPopoverComponent,
+                        FsAclRoleComponent,
+                        FsAclEntriesComponent,
+                        FsAclRolePopoverComponent,
+                        FsAclObjectRolesComponent,
+                        FsAclEntryComponent,
+                        BulkOptionsFilterPipe,
+                        AclRolePermissionAvailablePipe,
+                    ],
+                    exports: [
+                        FsAclRolesComponent,
+                        FsAclPermissionPopoverComponent,
+                        FsAclRoleComponent,
+                        FsAclEntriesComponent,
+                        FsAclRolePopoverComponent,
+                        FsAclObjectRolesComponent,
+                        FsAclEntryComponent,
+                    ],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { FS_APP_ACL_CONFIG, FsAclEntriesComponent, FsAclEntryComponent, FsAclObjectRolesComponent, FsAclPermissionPopoverComponent, FsAclRoleComponent, FsAclRolePopoverComponent, FsAclRolesComponent, FsAppAclModule, FsAppAclService };