@firestitch/app-acl 9.0.18 → 9.0.19

package/bundles/firestitch-app-acl.umd.js

@@ -218,880 +218,884 @@
         return value;
     }
 
-    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 = {}));
 
-    // start:ng42.barrel
+    // start:ng42.barrel
     // end:ng42.barrel
 
-    var AclRoleAccesses = [
-        { name: 'None', value: AclRoleAccess.None },
-        { name: 'Read', value: AclRoleAccess.Read },
-        { name: 'Write', value: AclRoleAccess.Write },
-        { name: 'Full', value: AclRoleAccess.Full }
+    var AclRoleAccesses = [
+        { name: 'None', value: AclRoleAccess.None },
+        { name: 'Read', value: AclRoleAccess.Read },
+        { name: 'Write', value: AclRoleAccess.Write },
+        { name: 'Full', value: AclRoleAccess.Full }
     ];
 
     var FS_APP_ACL_CONFIG = new core.InjectionToken('fs-app-acl-config');
 
-    var snakecaseKeys = _snakecaseKeys;
-    var camelcaseKeys = _camelcaseKeys;
-    var FsAppAclService = /** @class */ (function () {
-        function FsAppAclService(_appAclConfig) {
-            this._appAclConfig = _appAclConfig;
-        }
-        FsAppAclService.prototype.getPermissions = function () {
-            var _this = this;
-            if (!this._permissions$) {
-                this._permissions$ = new rxjs.ReplaySubject();
-                this._appAclConfig.permissions
-                    .pipe(operators.map(function (data) { return _this.input(data); }))
-                    .subscribe(function (permissions) {
-                    _this._permissions$.next(permissions);
-                    _this._permissions$.complete();
-                });
-            }
-            return this._permissions$;
-        };
-        FsAppAclService.prototype.getLevels = function () {
-            var _this = this;
-            if (!this._levels$) {
-                this._levels$ = new rxjs.ReplaySubject();
-                this._appAclConfig.levels
-                    .pipe(operators.map(function (data) { return _this.input(data); }))
-                    .subscribe(function (levels) {
-                    _this._levels$.next(levels);
-                    _this._levels$.complete();
-                });
-            }
-            return this._levels$;
-        };
-        FsAppAclService.prototype.getIndexedLevels = function () {
-            return this.getLevels()
-                .pipe(operators.map(function (data) {
-                return common$1.list(data, 'name', 'value');
-            }));
-        };
-        FsAppAclService.prototype.input = function (data) {
-            var _this = this;
-            if (lodashEs.isArray(data)) {
-                return data.map(function (item) {
-                    return _this._appAclConfig.case === 'snake' ? camelcaseKeys(item, { deep: true }) : item;
-                });
-            }
-            else {
-                return this._appAclConfig.case === 'snake' ? camelcaseKeys(data, { deep: true }) : data;
-            }
-        };
-        FsAppAclService.prototype.output = function (data) {
-            var _this = this;
-            if (lodashEs.isArray(data)) {
-                return data.map(function (item) {
-                    return _this._appAclConfig.case === 'snake' ? snakecaseKeys(item, { deep: true }) : item;
-                });
-            }
-            else {
-                return this._appAclConfig.case === 'snake' ? snakecaseKeys(data, { deep: true }) : data;
-            }
-        };
-        FsAppAclService.ctorParameters = function () { return [
-            { type: undefined, decorators: [{ type: core.Inject, args: [FS_APP_ACL_CONFIG,] }] }
-        ]; };
-        FsAppAclService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function FsAppAclService_Factory() { return new FsAppAclService(core["ɵɵinject"](FS_APP_ACL_CONFIG)); }, token: FsAppAclService, providedIn: "root" });
-        FsAppAclService = __decorate([
-            core.Injectable({
-                providedIn: 'root',
-            }),
-            __param(0, core.Inject(FS_APP_ACL_CONFIG)),
-            __metadata("design:paramtypes", [Object])
-        ], FsAppAclService);
-        return FsAppAclService;
+    var snakecaseKeys = _snakecaseKeys;
+    var camelcaseKeys = _camelcaseKeys;
+    var FsAppAclService = /** @class */ (function () {
+        function FsAppAclService(_appAclConfig) {
+            this._appAclConfig = _appAclConfig;
+        }
+        FsAppAclService.prototype.getPermissions = function () {
+            var _this = this;
+            if (!this._permissions$) {
+                this._permissions$ = new rxjs.ReplaySubject();
+                this._appAclConfig.permissions
+                    .pipe(operators.map(function (data) { return _this.input(data); }))
+                    .subscribe(function (permissions) {
+                    _this._permissions$.next(permissions);
+                    _this._permissions$.complete();
+                });
+            }
+            return this._permissions$;
+        };
+        FsAppAclService.prototype.getLevels = function () {
+            var _this = this;
+            if (!this._levels$) {
+                this._levels$ = new rxjs.ReplaySubject();
+                this._appAclConfig.levels
+                    .pipe(operators.map(function (data) { return _this.input(data); }))
+                    .subscribe(function (levels) {
+                    _this._levels$.next(levels);
+                    _this._levels$.complete();
+                });
+            }
+            return this._levels$;
+        };
+        FsAppAclService.prototype.getIndexedLevels = function () {
+            return this.getLevels()
+                .pipe(operators.map(function (data) {
+                return common$1.list(data, 'name', 'value');
+            }));
+        };
+        FsAppAclService.prototype.input = function (data) {
+            var _this = this;
+            if (lodashEs.isArray(data)) {
+                return data.map(function (item) {
+                    return _this._appAclConfig.case === 'snake' ? camelcaseKeys(item, { deep: true }) : item;
+                });
+            }
+            else {
+                return this._appAclConfig.case === 'snake' ? camelcaseKeys(data, { deep: true }) : data;
+            }
+        };
+        FsAppAclService.prototype.output = function (data) {
+            var _this = this;
+            if (lodashEs.isArray(data)) {
+                return data.map(function (item) {
+                    return _this._appAclConfig.case === 'snake' ? snakecaseKeys(item, { deep: true }) : item;
+                });
+            }
+            else {
+                return this._appAclConfig.case === 'snake' ? snakecaseKeys(data, { deep: true }) : data;
+            }
+        };
+        FsAppAclService.ctorParameters = function () { return [
+            { type: undefined, decorators: [{ type: core.Inject, args: [FS_APP_ACL_CONFIG,] }] }
+        ]; };
+        FsAppAclService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function FsAppAclService_Factory() { return new FsAppAclService(core["ɵɵinject"](FS_APP_ACL_CONFIG)); }, token: FsAppAclService, providedIn: "root" });
+        FsAppAclService = __decorate([
+            core.Injectable({
+                providedIn: 'root',
+            }),
+            __param(0, core.Inject(FS_APP_ACL_CONFIG)),
+            __metadata("design:paramtypes", [Object])
+        ], FsAppAclService);
+        return FsAppAclService;
     }());
 
-    var FsAclRoleComponent = /** @class */ (function () {
-        function FsAclRoleComponent(_appAclService, _dialogRef, _message, _data) {
-            var _this = this;
-            this._appAclService = _appAclService;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this._data = _data;
-            this.aclRole = null;
-            this.permissions = [];
-            this.levelPermissions = [];
-            this.AclRoleAccesses = AclRoleAccesses;
-            this.indexedAccesses = {};
-            this.aclLevels = [];
-            this.indexedAclLevels = {};
-            this.onlyFullAccess = false;
-            this.AclLevels = {};
-            this.aclRoleConfigs = [];
-            this.levelAclRoleConfigs = [];
-            this._destroy$ = new rxjs.Subject();
-            this.save = function () {
-                var aclRole = __assign(__assign({}, _this.aclRole), { permissions: _this.levelPermissions.map(function (permission) {
-                        return {
-                            value: permission.value,
-                            access: _this.aclRole.permissions[permission.value] || 0,
-                        };
-                    }), aclRoleConfigs: _this.levelAclRoleConfigs.map(function (item) {
-                        return {
-                            id: item.id,
-                            value: item.value,
-                            data: item.data,
-                        };
-                    }) });
-                return _this._data.saveAclRole(_this._appAclService.output(aclRole))
-                    .pipe(operators.tap(function (response) {
-                    _this._message.success('Saved Changes');
-                    _this.close(response);
-                }));
-            };
-        }
-        FsAclRoleComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            rxjs.forkJoin(this.getRole(), this._appAclService.getPermissions())
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (_a) {
-                var _b = __read(_a, 2), aclRole = _b[0], aclPermissions = _b[1];
-                _this.permissions = aclPermissions;
-                _this.aclLevels = _this._data.aclLevels;
-                _this.indexedAclLevels = common$1.list(_this.aclLevels, 'name', 'value');
-                _this.indexedAccesses = common$1.list(AclRoleAccesses, 'name', 'value');
-                _this.aclRole = __assign({
-                    aclPermissions: [],
-                    allPermissions: true,
-                    aclRoleConfigs: [],
-                    permissions: {},
-                    level: _this.aclLevels[0].value,
-                }, aclRole);
-                if (_this.aclRole.id) {
-                    _this.permissions.forEach(function (permission) {
-                        var access = 0;
-                        var aclPermission = _this.aclRole.aclPermissions.find(function (item) {
-                            return item.permission === permission.value;
-                        });
-                        if (aclPermission) {
-                            access = aclPermission.access;
-                        }
-                        _this.aclRole.permissions[permission.value] = access;
-                    });
-                }
-                if (_this.aclRole.allPermissions) {
-                    _this._applyMaxPermissionAccess();
-                }
-                _this._updatePermissions();
-                _this._updateAclRoleConfigs();
-            });
-            this.listConfig = {
-                status: false,
-                paging: false,
-                noResults: {
-                    message: '',
-                },
-                group: {
-                    initialExpand: true,
-                    groupBy: function (data) {
-                        return data;
-                    },
-                    compareBy: function (data) {
-                        return data.category || 'General';
-                    },
-                },
-                fetch: function () {
-                    return rxjs.of({
-                        data: _this.levelPermissions.sort(function (a, b) {
-                            a = a.name.toUpperCase();
-                            b = b.name.toUpperCase();
-                            if (a < b) {
-                                return -1;
-                            }
-                            else if (a > b) {
-                                return 1;
-                            }
-                            return 0;
-                        }),
-                    });
-                },
-            };
-        };
-        FsAclRoleComponent.prototype.levelChange = function () {
-            var _this = this;
-            this._updatePermissions();
-            this._updateAclRoleConfigs();
-            setTimeout(function () {
-                _this.list.reload();
-            });
-        };
-        FsAclRoleComponent.prototype.getRole = function () {
-            var _this = this;
-            if (!this._data.aclRole.id) {
-                return rxjs.of(this._data.aclRole);
-            }
-            var query = {
-                aclPermissions: true,
-                aclRoleConfigs: true,
-            };
-            if (!this.environment) {
-                query.environmentId = null;
-            }
-            return this._data.loadAclRole(this._data.aclRole, query)
-                .pipe(operators.map(function (data) { return _this._appAclService.input(data); }));
-        };
-        FsAclRoleComponent.prototype.close = function (data) {
-            if (data === void 0) { data = null; }
-            this._dialogRef.close(data);
-        };
-        FsAclRoleComponent.prototype.allPermissionsChange = function (all) {
-            this._updatePermissions();
-            if (all) {
-                this._applyMaxPermissionAccess();
-            }
-        };
-        FsAclRoleComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsAclRoleComponent.prototype._updatePermissions = function () {
-            var _this = this;
-            this.levelPermissions = this.permissions.filter(function (permission) {
-                return permission.levels.some(function (item) {
-                    return item === _this.aclRole.level;
-                });
-            });
-        };
-        FsAclRoleComponent.prototype._updateAclRoleConfigs = function () {
-            var _this = this;
-            this.levelAclRoleConfigs = this.aclRoleConfigs.filter(function (item) {
-                return _this.aclRole.level === item.level;
-            });
-        };
-        FsAclRoleComponent.prototype._applyMaxPermissionAccess = function () {
-            var _this = this;
-            this.permissions.forEach(function (permission) {
-                _this.aclRole.permissions[permission.value] = Math.max.apply(Math, __spread(permission.accesses));
-            });
-        };
-        FsAclRoleComponent.ctorParameters = function () { return [
-            { type: FsAppAclService },
-            { type: dialog.MatDialogRef },
-            { type: message.FsMessage },
-            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
-        ]; };
-        __decorate([
-            core.ViewChild(list.FsListComponent),
-            __metadata("design:type", list.FsListComponent)
-        ], FsAclRoleComponent.prototype, "list", void 0);
-        FsAclRoleComponent = __decorate([
-            core.Component({
-                template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>{{ aclRole.id ? 'Edit' : 'Create' }} Role</div>\n      <mat-dialog-content>\n        <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"40px\" fxLayoutGap.lt-md=\"0\">\n          <div fxLayout=\"column\" fxFlex fxFlex.lt-md=\"0\">\n            <mat-form-field>\n              <input matInput placeholder=\"Name\" [(ngModel)]=\"aclRole.name\" name=\"name\" fsFormRequired>\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                  (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\"\n                name=\"allPermissions\">\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div fxLayout=\"column\" *ngFor=\"let config of levelAclRoleConfigs\">\n              <fs-label-field *ngIf=\"config.interface === 'checkbox'\">\n                <fs-label>{{config.name}}</fs-label>\n                <mat-checkbox\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.name\">\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{config.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"config.interface === 'select'\">\n                <mat-select\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.value\"\n                  [required]=\"config.required\"\n                  [placeholder]=\"config.name\">\n                    <mat-option\n                      *ngFor=\"let item of config.values\"\n                      [value]=\"item.value\">\n                        {{ item.name }}\n                    </mat-option>\n                </mat-select>\n                <mat-hint>{{config.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div fxLayout=\"column\" fxFlex=\"65\" fxFlex.lt-md=\"0\" *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions\">\n\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template colspan=\"2\" fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <small><b>{{row.category || 'General'}}</b></small>\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 fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions; else elseAll\">\n                    {{ indexedAccesses[aclRole.permissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <mat-form-field>\n                      <mat-select\n                        [(ngModel)]=\"aclRole.permissions[permission.value]\"\n                        [disabled]=\"!!aclRole.protected\"\n                        fsFormRequired\n                        name=\"access-{{ permission.value }}\">\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-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 mat-button type=\"submit\" color=\"primary\">{{ aclRole.id ? 'Save' : 'Create' }}</button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">Cancel</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n",
-                styles: [":host .permissions ::ng-deep .fs-list-row-group{background-color:#f6f6f6}:host .permissions ::ng-deep fs-list .access{white-space:nowrap}:host .permissions ::ng-deep .mat-form-field{width:100px}:host .permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}:host ::ng-deep fs-radio-group{width:100%}:host ::ng-deep fs-label-field{width:100%}:host .level{width:100%}"]
-            }),
-            __param(3, core.Inject(dialog.MAT_DIALOG_DATA)),
-            __metadata("design:paramtypes", [FsAppAclService,
-                dialog.MatDialogRef,
-                message.FsMessage, Object])
-        ], FsAclRoleComponent);
-        return FsAclRoleComponent;
+    var FsAclRoleComponent = /** @class */ (function () {
+        function FsAclRoleComponent(_appAclService, _dialogRef, _message, _data, _cdRef) {
+            var _this = this;
+            this._appAclService = _appAclService;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._data = _data;
+            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.aclRoleConfigs = [];
+            this.levelAclRoleConfigs = [];
+            this._destroy$ = new rxjs.Subject();
+            this.save = function () {
+                var aclRole = __assign(__assign({}, _this.aclRole), { permissions: _this.levelPermissions.map(function (permission) {
+                        return {
+                            value: permission.value,
+                            access: _this.aclRole.permissions[permission.value] || 0,
+                        };
+                    }), aclRoleConfigs: _this.levelAclRoleConfigs.map(function (item) {
+                        return {
+                            id: item.id,
+                            value: item.value,
+                            data: item.data,
+                        };
+                    }) });
+                return _this._data.saveAclRole(_this._appAclService.output(aclRole))
+                    .pipe(operators.tap(function (response) {
+                    _this._message.success('Saved Changes');
+                    _this.close(response);
+                }));
+            };
+        }
+        FsAclRoleComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            rxjs.forkJoin(this.getRole(), this._appAclService.getPermissions())
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), aclRole = _b[0], aclPermissions = _b[1];
+                _this.permissions = aclPermissions;
+                _this.aclLevels = _this._data.aclLevels;
+                _this.indexedAclLevels = common$1.list(_this.aclLevels, 'name', 'value');
+                _this.indexedAccesses = common$1.list(AclRoleAccesses, 'name', 'value');
+                _this.aclRole = __assign({
+                    aclPermissions: [],
+                    allPermissions: true,
+                    aclRoleConfigs: [],
+                    permissions: {},
+                    level: _this.aclLevels[0].value,
+                }, aclRole);
+                if (_this.aclRole.id) {
+                    _this.permissions.forEach(function (permission) {
+                        var access = 0;
+                        var aclPermission = _this.aclRole.aclPermissions.find(function (item) {
+                            return item.permission === permission.value;
+                        });
+                        if (aclPermission) {
+                            access = aclPermission.access;
+                        }
+                        _this.aclRole.permissions[permission.value] = access;
+                    });
+                }
+                if (_this.aclRole.allPermissions) {
+                    _this._applyMaxPermissionAccess();
+                }
+                _this._updatePermissions();
+                _this._updateAclRoleConfigs();
+                _this._cdRef.markForCheck();
+            });
+            this.listConfig = {
+                status: false,
+                paging: false,
+                noResults: {
+                    message: '',
+                },
+                group: {
+                    initialExpand: true,
+                    groupBy: function (data) {
+                        return data;
+                    },
+                    compareBy: function (data) {
+                        return data.category || 'General';
+                    },
+                },
+                fetch: function () {
+                    return rxjs.of({
+                        data: _this.levelPermissions.sort(function (a, b) {
+                            a = a.name.toUpperCase();
+                            b = b.name.toUpperCase();
+                            if (a < b) {
+                                return -1;
+                            }
+                            else if (a > b) {
+                                return 1;
+                            }
+                            return 0;
+                        }),
+                    });
+                },
+            };
+        };
+        FsAclRoleComponent.prototype.levelChange = function () {
+            var _this = this;
+            this._updatePermissions();
+            this._updateAclRoleConfigs();
+            setTimeout(function () {
+                _this.list.reload();
+            });
+        };
+        FsAclRoleComponent.prototype.getRole = function () {
+            var _this = this;
+            if (!this._data.aclRole.id) {
+                return rxjs.of(this._data.aclRole);
+            }
+            var query = {
+                aclPermissions: true,
+                aclRoleConfigs: true,
+            };
+            if (!this.environment) {
+                query.environmentId = null;
+            }
+            return this._data.loadAclRole(this._data.aclRole, query)
+                .pipe(operators.map(function (data) { return _this._appAclService.input(data); }));
+        };
+        FsAclRoleComponent.prototype.close = function (data) {
+            if (data === void 0) { data = null; }
+            this._dialogRef.close(data);
+        };
+        FsAclRoleComponent.prototype.allPermissionsChange = function (all) {
+            this._updatePermissions();
+            if (all) {
+                this._applyMaxPermissionAccess();
+            }
+        };
+        FsAclRoleComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsAclRoleComponent.prototype._updatePermissions = function () {
+            var _this = this;
+            this.levelPermissions = this.permissions.filter(function (permission) {
+                return permission.levels.some(function (item) {
+                    return item === _this.aclRole.level;
+                });
+            });
+        };
+        FsAclRoleComponent.prototype._updateAclRoleConfigs = function () {
+            var _this = this;
+            this.levelAclRoleConfigs = this.aclRoleConfigs.filter(function (item) {
+                return _this.aclRole.level === item.level;
+            });
+        };
+        FsAclRoleComponent.prototype._applyMaxPermissionAccess = function () {
+            var _this = this;
+            this.permissions.forEach(function (permission) {
+                _this.aclRole.permissions[permission.value] = Math.max.apply(Math, __spread(permission.accesses));
+            });
+        };
+        FsAclRoleComponent.ctorParameters = function () { return [
+            { type: FsAppAclService },
+            { type: dialog.MatDialogRef },
+            { type: message.FsMessage },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.ViewChild(list.FsListComponent),
+            __metadata("design:type", list.FsListComponent)
+        ], FsAclRoleComponent.prototype, "list", void 0);
+        FsAclRoleComponent = __decorate([
+            core.Component({
+                template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>{{ aclRole.id ? 'Edit' : 'Create' }} Role</div>\n      <mat-dialog-content>\n        <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"40px\" fxLayoutGap.lt-md=\"0\">\n          <div fxLayout=\"column\" fxFlex fxFlex.lt-md=\"0\">\n            <mat-form-field>\n              <input matInput placeholder=\"Name\" [(ngModel)]=\"aclRole.name\" name=\"name\" fsFormRequired>\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                  (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\"\n                name=\"allPermissions\">\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div fxLayout=\"column\" *ngFor=\"let config of levelAclRoleConfigs\">\n              <fs-label-field *ngIf=\"config.interface === 'checkbox'\">\n                <fs-label>{{config.name}}</fs-label>\n                <mat-checkbox\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.name\">\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{config.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"config.interface === 'select'\">\n                <mat-select\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.value\"\n                  [required]=\"config.required\"\n                  [placeholder]=\"config.name\">\n                    <mat-option\n                      *ngFor=\"let item of config.values\"\n                      [value]=\"item.value\">\n                        {{ item.name }}\n                    </mat-option>\n                </mat-select>\n                <mat-hint>{{config.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div fxLayout=\"column\" fxFlex=\"65\" fxFlex.lt-md=\"0\" *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions\">\n\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template colspan=\"2\" fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <small><b>{{row.category || 'General'}}</b></small>\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 fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions; else elseAll\">\n                    {{ indexedAccesses[aclRole.permissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <mat-form-field>\n                      <mat-select\n                        [(ngModel)]=\"aclRole.permissions[permission.value]\"\n                        [disabled]=\"!!aclRole.protected\"\n                        fsFormRequired\n                        name=\"access-{{ permission.value }}\">\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-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 mat-button type=\"submit\" color=\"primary\">{{ aclRole.id ? 'Save' : 'Create' }}</button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">Cancel</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [":host .permissions ::ng-deep .fs-list-row-group{background-color:#f6f6f6}:host .permissions ::ng-deep fs-list .access{white-space:nowrap}:host .permissions ::ng-deep .mat-form-field{width:100px}:host .permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}:host ::ng-deep fs-radio-group{width:100%}:host ::ng-deep fs-label-field{width:100%}:host .level{width:100%}"]
+            }),
+            __param(3, core.Inject(dialog.MAT_DIALOG_DATA)),
+            __metadata("design:paramtypes", [FsAppAclService,
+                dialog.MatDialogRef,
+                message.FsMessage, Object, core.ChangeDetectorRef])
+        ], FsAclRoleComponent);
+        return FsAclRoleComponent;
     }());
 
-    var FsAclRolesComponent = /** @class */ (function () {
-        function FsAclRolesComponent(_appAclService, _dialog, _cdRef) {
-            this._appAclService = _appAclService;
-            this._dialog = _dialog;
-            this._cdRef = _cdRef;
-            this.aclLevels = [];
-            this.list = new core.QueryList();
-            this.indexedAclRoleLevels = {};
-            this._destroy$ = new rxjs.Subject();
-        }
-        FsAclRolesComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            new rxjs.Observable(function (observer) {
-                if (_this.aclLevels.length) {
-                    observer.next(_this.aclLevels);
-                    observer.complete();
-                }
-                else {
-                    _this._appAclService.getLevels()
-                        .subscribe(function (aclLevels) {
-                        observer.next(aclLevels);
-                        observer.complete();
-                    });
-                }
-            })
-                .subscribe(function (aclLevels) {
-                _this.aclLevels = aclLevels;
-                _this.indexedAclRoleLevels = common$1.list(_this.aclLevels, 'name', 'value');
-                _this._loadListConfig();
-            });
-        };
-        FsAclRolesComponent.prototype.openDialog = function (aclRole) {
-            var _this = this;
-            if (aclRole === void 0) { aclRole = { id: null }; }
-            var dialogRef = this._dialog.open(FsAclRoleComponent, {
-                width: '70%',
-                data: {
-                    aclRole: aclRole,
-                    aclLevels: this.aclLevels,
-                    loadAclRole: this.loadAclRole,
-                    saveAclRole: this.saveAclRole,
-                },
-            });
-            dialogRef.afterClosed()
-                .pipe(operators.takeUntil(this._destroy$), operators.filter(function (response) { return !!response; }))
-                .subscribe(function (response) {
-                _this.list.forEach(function (list) {
-                    list.reload();
-                });
-            });
-        };
-        FsAclRolesComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsAclRolesComponent.prototype._loadListConfig = function () {
-            var _this = this;
-            this.listConfig = {
-                sort: { value: 'hierarchy' },
-                filters: [
-                    {
-                        name: 'keyword',
-                        type: filter.ItemType.Keyword,
-                        label: 'Search',
-                    },
-                    {
-                        name: 'level',
-                        label: 'Level',
-                        type: filter.ItemType.Select,
-                        values: this.aclLevels,
-                        hide: this.aclLevels.length <= 1
-                    },
-                    {
-                        name: 'state',
-                        label: 'Show Deleted',
-                        type: filter.ItemType.Checkbox,
-                        unchecked: 'active',
-                        checked: 'deleted',
-                    },
-                ],
-                actions: [
-                    {
-                        click: function (event) {
-                            _this.openDialog();
-                        },
-                        label: 'Create',
-                    },
-                ],
-                rowActions: [
-                    {
-                        click: function (data) {
-                            return _this.deleteAclRole(_this._appAclService.output(data));
-                        },
-                        remove: {
-                            title: 'Confirm',
-                            template: 'Are you sure you would like to delete this role?',
-                        },
-                        menu: true,
-                        label: 'Delete',
-                        show: function (row) { return row.state !== 'deleted'; },
-                    },
-                ],
-                fetch: function (query) {
-                    query.permissions = true;
-                    return _this.loadAclRoles(query)
-                        .pipe(operators.map(function (data) { return _this._appAclService.input(data); }));
-                },
-            };
-        };
-        FsAclRolesComponent.ctorParameters = function () { return [
-            { type: FsAppAclService },
-            { type: dialog.MatDialog },
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], FsAclRolesComponent.prototype, "deleteAclRole", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], FsAclRolesComponent.prototype, "saveAclRole", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], FsAclRolesComponent.prototype, "loadAclRoles", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], FsAclRolesComponent.prototype, "loadAclRole", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Array)
-        ], FsAclRolesComponent.prototype, "aclLevels", void 0);
-        __decorate([
-            core.ViewChildren(list.FsListComponent),
-            __metadata("design:type", Object)
-        ], FsAclRolesComponent.prototype, "list", void 0);
-        FsAclRolesComponent = __decorate([
-            core.Component({
-                selector: 'fs-acl-roles',
-                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      <a (click)=\"openDialog(row)\">{{ row.name }}</a>\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",
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [".permissions .permission+.permission::before{content:\", \"}"]
-            }),
-            __metadata("design:paramtypes", [FsAppAclService,
-                dialog.MatDialog,
-                core.ChangeDetectorRef])
-        ], FsAclRolesComponent);
-        return FsAclRolesComponent;
+    var FsAclRolesComponent = /** @class */ (function () {
+        function FsAclRolesComponent(_appAclService, _dialog, _cdRef) {
+            this._appAclService = _appAclService;
+            this._dialog = _dialog;
+            this._cdRef = _cdRef;
+            this.aclLevels = [];
+            this.list = new core.QueryList();
+            this.indexedAclRoleLevels = {};
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsAclRolesComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            new rxjs.Observable(function (observer) {
+                if (_this.aclLevels.length) {
+                    observer.next(_this.aclLevels);
+                    observer.complete();
+                }
+                else {
+                    _this._appAclService.getLevels()
+                        .subscribe(function (aclLevels) {
+                        observer.next(aclLevels);
+                        observer.complete();
+                    });
+                }
+            })
+                .subscribe(function (aclLevels) {
+                _this.aclLevels = aclLevels;
+                _this.indexedAclRoleLevels = common$1.list(_this.aclLevels, 'name', 'value');
+                _this._loadListConfig();
+            });
+        };
+        FsAclRolesComponent.prototype.openDialog = function (aclRole) {
+            var _this = this;
+            if (aclRole === void 0) { aclRole = { id: null }; }
+            var dialogRef = this._dialog.open(FsAclRoleComponent, {
+                width: '70%',
+                data: {
+                    aclRole: aclRole,
+                    aclLevels: this.aclLevels,
+                    loadAclRole: this.loadAclRole,
+                    saveAclRole: this.saveAclRole,
+                },
+            });
+            dialogRef.afterClosed()
+                .pipe(operators.takeUntil(this._destroy$), operators.filter(function (response) { return !!response; }))
+                .subscribe(function (response) {
+                _this.list.forEach(function (list) {
+                    list.reload();
+                });
+            });
+        };
+        FsAclRolesComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsAclRolesComponent.prototype._loadListConfig = function () {
+            var _this = this;
+            this.listConfig = {
+                sort: { value: 'hierarchy' },
+                filters: [
+                    {
+                        name: 'keyword',
+                        type: filter.ItemType.Keyword,
+                        label: 'Search',
+                    },
+                    {
+                        name: 'level',
+                        label: 'Level',
+                        type: filter.ItemType.Select,
+                        values: this.aclLevels,
+                        hide: this.aclLevels.length <= 1
+                    },
+                    {
+                        name: 'state',
+                        label: 'Show Deleted',
+                        type: filter.ItemType.Checkbox,
+                        unchecked: 'active',
+                        checked: 'deleted',
+                    },
+                ],
+                actions: [
+                    {
+                        click: function (event) {
+                            _this.openDialog();
+                        },
+                        label: 'Create',
+                    },
+                ],
+                rowActions: [
+                    {
+                        click: function (data) {
+                            return _this.deleteAclRole(_this._appAclService.output(data));
+                        },
+                        remove: {
+                            title: 'Confirm',
+                            template: 'Are you sure you would like to delete this role?',
+                        },
+                        menu: true,
+                        label: 'Delete',
+                        show: function (row) { return row.state !== 'deleted'; },
+                    },
+                ],
+                fetch: function (query) {
+                    query.permissions = true;
+                    return _this.loadAclRoles(query)
+                        .pipe(operators.map(function (data) { return _this._appAclService.input(data); }));
+                },
+            };
+        };
+        FsAclRolesComponent.ctorParameters = function () { return [
+            { type: FsAppAclService },
+            { type: dialog.MatDialog },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], FsAclRolesComponent.prototype, "deleteAclRole", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], FsAclRolesComponent.prototype, "saveAclRole", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], FsAclRolesComponent.prototype, "loadAclRoles", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], FsAclRolesComponent.prototype, "loadAclRole", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Array)
+        ], FsAclRolesComponent.prototype, "aclLevels", void 0);
+        __decorate([
+            core.ViewChildren(list.FsListComponent),
+            __metadata("design:type", Object)
+        ], FsAclRolesComponent.prototype, "list", void 0);
+        FsAclRolesComponent = __decorate([
+            core.Component({
+                selector: 'fs-acl-roles',
+                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      <a (click)=\"openDialog(row)\">{{ row.name }}</a>\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",
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [".permissions .permission+.permission::before{content:\", \"}"]
+            }),
+            __metadata("design:paramtypes", [FsAppAclService,
+                dialog.MatDialog,
+                core.ChangeDetectorRef])
+        ], FsAclRolesComponent);
+        return FsAclRolesComponent;
     }());
 
-    var FsAclPermissionPopoverComponent = /** @class */ (function () {
-        function FsAclPermissionPopoverComponent(_appAclService) {
-            this._appAclService = _appAclService;
-        }
-        FsAclPermissionPopoverComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._appAclService.getPermissions()
-                .subscribe(function (permissions) {
-                _this.description = permissions.filter(function (item) {
-                    return item.value === _this.permission.value;
-                }).map(function (item) {
-                    return item.description;
-                })[0];
-            });
-        };
-        FsAclPermissionPopoverComponent.ctorParameters = function () { return [
-            { type: FsAppAclService }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclPermissionPopoverComponent.prototype, "permission", void 0);
-        FsAclPermissionPopoverComponent = __decorate([
-            core.Component({
-                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}"]
-            }),
-            __metadata("design:paramtypes", [FsAppAclService])
-        ], FsAclPermissionPopoverComponent);
-        return FsAclPermissionPopoverComponent;
+    var FsAclPermissionPopoverComponent = /** @class */ (function () {
+        function FsAclPermissionPopoverComponent(_appAclService) {
+            this._appAclService = _appAclService;
+        }
+        FsAclPermissionPopoverComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._appAclService.getPermissions()
+                .subscribe(function (permissions) {
+                _this.description = permissions.filter(function (item) {
+                    return item.value === _this.permission.value;
+                }).map(function (item) {
+                    return item.description;
+                })[0];
+            });
+        };
+        FsAclPermissionPopoverComponent.ctorParameters = function () { return [
+            { type: FsAppAclService }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclPermissionPopoverComponent.prototype, "permission", void 0);
+        FsAclPermissionPopoverComponent = __decorate([
+            core.Component({
+                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}"]
+            }),
+            __metadata("design:paramtypes", [FsAppAclService])
+        ], FsAclPermissionPopoverComponent);
+        return FsAclPermissionPopoverComponent;
     }());
 
-    var FsAclRolePopoverComponent = /** @class */ (function () {
-        function FsAclRolePopoverComponent(_appAclService) {
-            this._appAclService = _appAclService;
-            this.permissions = [];
-        }
-        FsAclRolePopoverComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            var aclRolePermissions = this.aclRole.permissions || [];
-            this._appAclService.getPermissions()
-                .subscribe(function (response) {
-                _this.permissions = response.filter(function (item) {
-                    return aclRolePermissions.some(function (permission) {
-                        return item.value === permission.value;
-                    });
-                });
-            });
-        };
-        FsAclRolePopoverComponent.ctorParameters = function () { return [
-            { type: FsAppAclService }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclRolePopoverComponent.prototype, "aclRole", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclRolePopoverComponent.prototype, "objectName", void 0);
-        FsAclRolePopoverComponent = __decorate([
-            core.Component({
-                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}"]
-            }),
-            __metadata("design:paramtypes", [FsAppAclService])
-        ], FsAclRolePopoverComponent);
-        return FsAclRolePopoverComponent;
+    var FsAclRolePopoverComponent = /** @class */ (function () {
+        function FsAclRolePopoverComponent(_appAclService) {
+            this._appAclService = _appAclService;
+            this.permissions = [];
+        }
+        FsAclRolePopoverComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var aclRolePermissions = this.aclRole.permissions || [];
+            this._appAclService.getPermissions()
+                .subscribe(function (response) {
+                _this.permissions = response.filter(function (item) {
+                    return aclRolePermissions.some(function (permission) {
+                        return item.value === permission.value;
+                    });
+                });
+            });
+        };
+        FsAclRolePopoverComponent.ctorParameters = function () { return [
+            { type: FsAppAclService }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclRolePopoverComponent.prototype, "aclRole", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclRolePopoverComponent.prototype, "objectName", void 0);
+        FsAclRolePopoverComponent = __decorate([
+            core.Component({
+                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}"]
+            }),
+            __metadata("design:paramtypes", [FsAppAclService])
+        ], FsAclRolePopoverComponent);
+        return FsAclRolePopoverComponent;
     }());
 
-    var FsAclEntryComponent = /** @class */ (function () {
-        function FsAclEntryComponent(_appAclService, _dialogRef, _message, _data) {
-            var _this = this;
-            var _a;
-            this._appAclService = _appAclService;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this._data = _data;
-            this.aclRoles = [];
-            this.indexedAclRoleLevels = {};
-            this.titleEdit = 'Edit Roles';
-            this.titleAdd = 'Assign Roles';
-            this.required = true;
-            this.save = function () {
-                return _this._data.saveAclObjectEntry(_this._appAclService.output(_this.aclObjectEntry))
-                    .subscribe(function (data) {
-                    _this._message.success('Saved Changes');
-                    _this.close(data);
-                });
-            };
-            this.aclObjectEntry = __assign({}, _data.aclObjectEntry);
-            this.required = (_a = _data.required, (_a !== null && _a !== void 0 ? _a : true));
-            if (_data.titleEdit) {
-                this.titleEdit = _data.titleEdit;
-            }
-            if (_data.titleAdd) {
-                this.titleAdd = _data.titleAdd;
-            }
-        }
-        FsAclEntryComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            rxjs.forkJoin(this._data.loadAclRoles({
-                level: this.aclObjectEntry.level,
-                environmentId: this.aclObjectEntry.environmentId,
-            })
-                .pipe(operators.map(function (data) { return _this._appAclService.input(data); })), this._appAclService.getIndexedLevels())
-                .subscribe(function (_a) {
-                var _b = __read(_a, 2), aclRoles = _b[0], levels = _b[1];
-                _this.aclRoles = aclRoles;
-                _this.indexedAclRoleLevels = levels;
-                _this.aclObjectRole = {
-                    object: _this.aclObjectEntry.object,
-                    aclRoles: _this.aclObjectEntry.aclEntries
-                        .map(function (aclEntry) {
-                        return aclEntry.aclRole;
-                    })
-                };
-            });
-        };
-        FsAclEntryComponent.prototype.aclObjectRoleChange = function (aclObjectRoles) {
-            this.aclObjectEntry.aclEntries = aclObjectRoles.reduce(function (aclEntries, aclObjectRole) {
-                aclObjectRole.aclRoles.forEach(function (aclRole) {
-                    aclEntries.push({
-                        aclRoleId: aclRole.id,
-                        aclRole: aclRole,
-                        objectId: aclObjectRole.object ? aclObjectRole.object.id : null,
-                        object: aclObjectRole.object || null
-                    });
-                });
-                return aclEntries;
-            }, []);
-        };
-        FsAclEntryComponent.prototype.close = function (data) {
-            if (data === void 0) { data = null; }
-            this._dialogRef.close(data);
-        };
-        FsAclEntryComponent.ctorParameters = function () { return [
-            { type: FsAppAclService },
-            { type: dialog.MatDialogRef },
-            { type: message.FsMessage },
-            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
-        ]; };
-        FsAclEntryComponent = __decorate([
-            core.Component({
-                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}"]
-            }),
-            __param(3, core.Inject(dialog.MAT_DIALOG_DATA)),
-            __metadata("design:paramtypes", [FsAppAclService,
-                dialog.MatDialogRef,
-                message.FsMessage, Object])
-        ], FsAclEntryComponent);
-        return FsAclEntryComponent;
+    var FsAclEntryComponent = /** @class */ (function () {
+        function FsAclEntryComponent(_appAclService, _dialogRef, _message, _data) {
+            var _this = this;
+            var _a;
+            this._appAclService = _appAclService;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._data = _data;
+            this.aclRoles = [];
+            this.indexedAclRoleLevels = {};
+            this.titleEdit = 'Edit Roles';
+            this.titleAdd = 'Assign Roles';
+            this.required = true;
+            this.save = function () {
+                return _this._data.saveAclObjectEntry(_this._appAclService.output(_this.aclObjectEntry))
+                    .subscribe(function (data) {
+                    _this._message.success('Saved Changes');
+                    _this.close(data);
+                });
+            };
+            this.aclObjectEntry = __assign({}, _data.aclObjectEntry);
+            this.required = (_a = _data.required, (_a !== null && _a !== void 0 ? _a : true));
+            if (_data.titleEdit) {
+                this.titleEdit = _data.titleEdit;
+            }
+            if (_data.titleAdd) {
+                this.titleAdd = _data.titleAdd;
+            }
+        }
+        FsAclEntryComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            rxjs.forkJoin(this._data.loadAclRoles({
+                level: this.aclObjectEntry.level,
+                environmentId: this.aclObjectEntry.environmentId,
+            })
+                .pipe(operators.map(function (data) { return _this._appAclService.input(data); })), this._appAclService.getIndexedLevels())
+                .subscribe(function (_a) {
+                var _b = __read(_a, 2), aclRoles = _b[0], levels = _b[1];
+                _this.aclRoles = aclRoles;
+                _this.indexedAclRoleLevels = levels;
+                _this.aclObjectRole = {
+                    object: _this.aclObjectEntry.object,
+                    aclRoles: _this.aclObjectEntry.aclEntries
+                        .map(function (aclEntry) {
+                        return aclEntry.aclRole;
+                    })
+                };
+            });
+        };
+        FsAclEntryComponent.prototype.aclObjectRoleChange = function (aclObjectRoles) {
+            this.aclObjectEntry.aclEntries = aclObjectRoles.reduce(function (aclEntries, aclObjectRole) {
+                aclObjectRole.aclRoles.forEach(function (aclRole) {
+                    aclEntries.push({
+                        aclRoleId: aclRole.id,
+                        aclRole: aclRole,
+                        objectId: aclObjectRole.object ? aclObjectRole.object.id : null,
+                        object: aclObjectRole.object || null
+                    });
+                });
+                return aclEntries;
+            }, []);
+        };
+        FsAclEntryComponent.prototype.close = function (data) {
+            if (data === void 0) { data = null; }
+            this._dialogRef.close(data);
+        };
+        FsAclEntryComponent.ctorParameters = function () { return [
+            { type: FsAppAclService },
+            { type: dialog.MatDialogRef },
+            { type: message.FsMessage },
+            { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
+        ]; };
+        FsAclEntryComponent = __decorate([
+            core.Component({
+                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}"]
+            }),
+            __param(3, core.Inject(dialog.MAT_DIALOG_DATA)),
+            __metadata("design:paramtypes", [FsAppAclService,
+                dialog.MatDialogRef,
+                message.FsMessage, Object])
+        ], FsAclEntryComponent);
+        return FsAclEntryComponent;
     }());
 
-    var FsAclEntriesComponent = /** @class */ (function () {
-        function FsAclEntriesComponent(_appAclService, _dialog, _confirm) {
-            this._appAclService = _appAclService;
-            this._dialog = _dialog;
-            this._confirm = _confirm;
-            this.environmentShow = true;
-            this.environmentLabel = 'Environment';
-            this.actions = [];
-            this.aclEntriesList = null;
-            this.aclEntriesConfig = null;
-            this.permissions = [];
-            this._destroy$ = new rxjs.Subject();
-        }
-        FsAclEntriesComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._appAclService.getPermissions()
-                .subscribe(function (response) {
-                _this.permissions = response;
-            });
-            this.aclEntriesConfig = {
-                status: false,
-                paging: false,
-                actions: this.actions,
-                rowActions: [
-                    {
-                        label: 'Remove All Roles',
-                        click: function (aclObjectEntry) {
-                            _this._confirm
-                                .confirm({
-                                title: 'Remove All Roles',
-                                template: 'Are you sure you would like to remove all roles?',
-                            }).subscribe(function () {
-                                var data = _this._appAclService.output(__assign(__assign({}, aclObjectEntry), { aclEntries: [] }));
-                                _this.saveAclObjectEntry(data)
-                                    .subscribe(function () {
-                                    _this.aclEntriesList.reload();
-                                });
-                            });
-                        }
-                    }
-                ],
-                fetch: function () {
-                    return new rxjs.Observable(function (observer) {
-                        _this.loadAclEntries({
-                            aclRoles: true,
-                            aclRolePermissions: true,
-                            objects: true,
-                            aclRoleState: 'active',
-                        })
-                            .pipe(operators.map(function (response) { return _this._appAclService.input(response); }))
-                            .subscribe(function (aclEntries) {
-                            var objects = aclEntries.reduce(function (items, item) {
-                                if (item.object) {
-                                    items[item.object.id] = item.object;
-                                }
-                                return items;
-                            }, {});
-                            var environments = aclEntries.reduce(function (items, item) {
-                                if (item.environment) {
-                                    items[item.environment.id] = item.environment;
-                                }
-                                return items;
-                            }, {});
-                            var aclObjectEntry = [];
-                            var grouped = lodashEs.groupBy(aclEntries, function (item) {
-                                return [item.aclRole.level, item.environmentId, item.objectId];
-                            });
-                            lodashEs.forOwn(grouped, function (group, key) {
-                                key = key.split(',');
-                                aclObjectEntry.push({
-                                    object: objects[key[2]],
-                                    level: key[0],
-                                    environmentId: key[1] ? parseInt(key[1]) : null,
-                                    environment: environments[key[1]],
-                                    aclEntries: group,
-                                });
-                            });
-                            var hasApp = aclObjectEntry.some(function (item) {
-                                return item.aclEntries.some(function (entry) {
-                                    return !entry.objectId;
-                                });
-                            });
-                            if (!hasApp) {
-                                aclObjectEntry.unshift({
-                                    object: null, aclEntries: [],
-                                    level: 'app',
-                                    environmentId: null,
-                                });
-                            }
-                            aclObjectEntry = lodashEs.sortBy(aclObjectEntry, function (item) {
-                                return item.object ? item.level : '';
-                            });
-                            observer.next({ data: aclObjectEntry });
-                            observer.complete();
-                        });
-                    });
-                },
-            };
-        };
-        FsAclEntriesComponent.prototype.update = function (aclObjectEntry) {
-            var _this = this;
-            var data = {
-                aclObjectEntry: aclObjectEntry,
-                required: false,
-                loadAclRoles: this.loadAclRoles,
-                saveAclObjectEntry: this.saveAclObjectEntry
-            };
-            this._dialog.open(FsAclEntryComponent, {
-                data: data
-            })
-                .afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.aclEntriesList.reload();
-            });
-        };
-        FsAclEntriesComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsAclEntriesComponent.prototype.reload = function () {
-            this.aclEntriesList.reload();
-        };
-        FsAclEntriesComponent.ctorParameters = function () { return [
-            { type: FsAppAclService },
-            { type: dialog.MatDialog },
-            { type: prompt.FsPrompt }
-        ]; };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], FsAclEntriesComponent.prototype, "loadAclEntries", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], FsAclEntriesComponent.prototype, "loadAclRoles", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Function)
-        ], FsAclEntriesComponent.prototype, "saveAclObjectEntry", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclEntriesComponent.prototype, "environmentShow", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclEntriesComponent.prototype, "environmentLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Array)
-        ], FsAclEntriesComponent.prototype, "actions", void 0);
-        __decorate([
-            core.ViewChild(list.FsListComponent),
-            __metadata("design:type", list.FsListComponent)
-        ], FsAclEntriesComponent.prototype, "aclEntriesList", void 0);
-        FsAclEntriesComponent = __decorate([
-            core.Component({
-                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        fxLayout=\"row\"\n        fxLayoutAlign=\"start center\"\n        fxLayoutGap=\"10px\">\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 fxLayout=\"column\" fxLayoutGap=\"10px\">\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: [""]
-            }),
-            __metadata("design:paramtypes", [FsAppAclService,
-                dialog.MatDialog,
-                prompt.FsPrompt])
-        ], FsAclEntriesComponent);
-        return FsAclEntriesComponent;
+    var FsAclEntriesComponent = /** @class */ (function () {
+        function FsAclEntriesComponent(_appAclService, _dialog, _confirm) {
+            this._appAclService = _appAclService;
+            this._dialog = _dialog;
+            this._confirm = _confirm;
+            this.environmentShow = true;
+            this.environmentLabel = 'Environment';
+            this.actions = [];
+            this.aclEntriesList = null;
+            this.aclEntriesConfig = null;
+            this.permissions = [];
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsAclEntriesComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._appAclService.getPermissions()
+                .subscribe(function (response) {
+                _this.permissions = response;
+            });
+            this.aclEntriesConfig = {
+                status: false,
+                paging: false,
+                actions: this.actions,
+                rowActions: [
+                    {
+                        label: 'Remove All Roles',
+                        click: function (aclObjectEntry) {
+                            _this._confirm
+                                .confirm({
+                                title: 'Remove All Roles',
+                                template: 'Are you sure you would like to remove all roles?',
+                            }).subscribe(function () {
+                                var data = _this._appAclService.output(__assign(__assign({}, aclObjectEntry), { aclEntries: [] }));
+                                _this.saveAclObjectEntry(data)
+                                    .subscribe(function () {
+                                    _this.aclEntriesList.reload();
+                                });
+                            });
+                        }
+                    }
+                ],
+                fetch: function () {
+                    return new rxjs.Observable(function (observer) {
+                        _this.loadAclEntries({
+                            aclRoles: true,
+                            aclRolePermissions: true,
+                            objects: true,
+                            aclRoleState: 'active',
+                        })
+                            .pipe(operators.map(function (response) { return _this._appAclService.input(response); }))
+                            .subscribe(function (aclEntries) {
+                            var objects = aclEntries.reduce(function (items, item) {
+                                if (item.object) {
+                                    items[item.object.id] = item.object;
+                                }
+                                return items;
+                            }, {});
+                            var environments = aclEntries.reduce(function (items, item) {
+                                if (item.environment) {
+                                    items[item.environment.id] = item.environment;
+                                }
+                                return items;
+                            }, {});
+                            var aclObjectEntry = [];
+                            var grouped = lodashEs.groupBy(aclEntries, function (item) {
+                                return [item.aclRole.level, item.environmentId, item.objectId];
+                            });
+                            lodashEs.forOwn(grouped, function (group, key) {
+                                key = key.split(',');
+                                aclObjectEntry.push({
+                                    object: objects[key[2]],
+                                    level: key[0],
+                                    environmentId: key[1] ? parseInt(key[1]) : null,
+                                    environment: environments[key[1]],
+                                    aclEntries: group,
+                                });
+                            });
+                            var hasApp = aclObjectEntry.some(function (item) {
+                                return item.aclEntries.some(function (entry) {
+                                    return !entry.objectId;
+                                });
+                            });
+                            if (!hasApp) {
+                                aclObjectEntry.unshift({
+                                    object: null, aclEntries: [],
+                                    level: 'app',
+                                    environmentId: null,
+                                });
+                            }
+                            aclObjectEntry = lodashEs.sortBy(aclObjectEntry, function (item) {
+                                return item.object ? item.level : '';
+                            });
+                            observer.next({ data: aclObjectEntry });
+                            observer.complete();
+                        });
+                    });
+                },
+            };
+        };
+        FsAclEntriesComponent.prototype.update = function (aclObjectEntry) {
+            var _this = this;
+            var data = {
+                aclObjectEntry: aclObjectEntry,
+                required: false,
+                loadAclRoles: this.loadAclRoles,
+                saveAclObjectEntry: this.saveAclObjectEntry
+            };
+            this._dialog.open(FsAclEntryComponent, {
+                data: data
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.aclEntriesList.reload();
+            });
+        };
+        FsAclEntriesComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsAclEntriesComponent.prototype.reload = function () {
+            this.aclEntriesList.reload();
+        };
+        FsAclEntriesComponent.ctorParameters = function () { return [
+            { type: FsAppAclService },
+            { type: dialog.MatDialog },
+            { type: prompt.FsPrompt }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], FsAclEntriesComponent.prototype, "loadAclEntries", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], FsAclEntriesComponent.prototype, "loadAclRoles", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Function)
+        ], FsAclEntriesComponent.prototype, "saveAclObjectEntry", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclEntriesComponent.prototype, "environmentShow", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclEntriesComponent.prototype, "environmentLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Array)
+        ], FsAclEntriesComponent.prototype, "actions", void 0);
+        __decorate([
+            core.ViewChild(list.FsListComponent),
+            __metadata("design:type", list.FsListComponent)
+        ], FsAclEntriesComponent.prototype, "aclEntriesList", void 0);
+        FsAclEntriesComponent = __decorate([
+            core.Component({
+                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        fxLayout=\"row\"\n        fxLayoutAlign=\"start center\"\n        fxLayoutGap=\"10px\">\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 fxLayout=\"column\" fxLayoutGap=\"10px\">\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: [""]
+            }),
+            __metadata("design:paramtypes", [FsAppAclService,
+                dialog.MatDialog,
+                prompt.FsPrompt])
+        ], FsAclEntriesComponent);
+        return FsAclEntriesComponent;
     }());
 
-    var FsAclObjectRolesComponent = /** @class */ (function () {
-        function FsAclObjectRolesComponent() {
-            this.aclRoles = [];
-            this.required = false;
-            this.multiple = false;
-            this.disabled = false;
-            this.aclObjectRoles = [];
-            this.rolesLabel = 'Roles';
-            this.levelLabel = '';
-            this.change = new core.EventEmitter();
-            this.compareAclRole = function (o1, o2) {
-                return o1 && o2 && o1.id === o2.id;
-            };
-        }
-        FsAclObjectRolesComponent.prototype.changed = function () {
-            this.change.emit(this.aclObjectRoles);
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Array)
-        ], FsAclObjectRolesComponent.prototype, "aclRoles", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclObjectRolesComponent.prototype, "required", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclObjectRolesComponent.prototype, "multiple", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclObjectRolesComponent.prototype, "disabled", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Array)
-        ], FsAclObjectRolesComponent.prototype, "aclObjectRoles", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclObjectRolesComponent.prototype, "rolesLabel", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], FsAclObjectRolesComponent.prototype, "levelLabel", void 0);
-        __decorate([
-            core.Output(),
-            __metadata("design:type", Object)
-        ], FsAclObjectRolesComponent.prototype, "change", void 0);
-        FsAclObjectRolesComponent = __decorate([
-            core.Component({
-                selector: 'fs-acl-object-roles',
-                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]=\"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",
-                viewProviders: [{ provide: forms.ControlContainer, useExisting: forms.NgForm }],
-                styles: ["table tr td:first-child{padding-right:15px}"]
-            })
-        ], FsAclObjectRolesComponent);
-        return FsAclObjectRolesComponent;
+    var FsAclObjectRolesComponent = /** @class */ (function () {
+        function FsAclObjectRolesComponent() {
+            this.aclRoles = [];
+            this.required = false;
+            this.multiple = false;
+            this.disabled = false;
+            this.aclObjectRoles = [];
+            this.rolesLabel = 'Roles';
+            this.levelLabel = '';
+            this.change = new core.EventEmitter();
+            this.compareAclRole = function (o1, o2) {
+                return o1 && o2 && o1.id === o2.id;
+            };
+        }
+        FsAclObjectRolesComponent.prototype.changed = function () {
+            this.change.emit(this.aclObjectRoles);
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Array)
+        ], FsAclObjectRolesComponent.prototype, "aclRoles", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclObjectRolesComponent.prototype, "required", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclObjectRolesComponent.prototype, "multiple", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclObjectRolesComponent.prototype, "disabled", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Array)
+        ], FsAclObjectRolesComponent.prototype, "aclObjectRoles", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclObjectRolesComponent.prototype, "rolesLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], FsAclObjectRolesComponent.prototype, "levelLabel", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", Object)
+        ], FsAclObjectRolesComponent.prototype, "change", void 0);
+        FsAclObjectRolesComponent = __decorate([
+            core.Component({
+                selector: 'fs-acl-object-roles',
+                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]=\"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",
+                viewProviders: [{ provide: forms.ControlContainer, useExisting: forms.NgForm }],
+                styles: ["table tr td:first-child{padding-right:15px}"]
+            })
+        ], FsAclObjectRolesComponent);
+        return FsAclObjectRolesComponent;
     }());
 
-    var FsAppAclModule = /** @class */ (function () {
-        function FsAppAclModule() {
-        }
-        FsAppAclModule_1 = FsAppAclModule;
-        FsAppAclModule.forRoot = function () {
-            return {
-                ngModule: FsAppAclModule_1,
-            };
-        };
-        var FsAppAclModule_1;
-        FsAppAclModule = FsAppAclModule_1 = __decorate([
-            core.NgModule({
-                imports: [
-                    common.CommonModule,
-                    forms.FormsModule,
-                    dialog.MatDialogModule,
-                    formField.MatFormFieldModule,
-                    checkbox.MatCheckboxModule,
-                    select.MatSelectModule,
-                    button.MatButtonModule,
-                    radio.MatRadioModule,
-                    input.MatInputModule,
-                    flexLayout.FlexLayoutModule,
-                    list.FsListModule,
-                    popover.FsPopoverModule,
-                    dialog$1.FsDialogModule,
-                    form.FsFormModule,
-                    label.FsLabelModule,
-                    radiogroup.FsRadioGroupModule,
-                    badge.FsBadgeModule,
-                    checkboxgroup.FsCheckboxGroupModule,
-                ],
-                declarations: [
-                    FsAclRolesComponent,
-                    FsAclPermissionPopoverComponent,
-                    FsAclRoleComponent,
-                    FsAclEntriesComponent,
-                    FsAclRolePopoverComponent,
-                    FsAclObjectRolesComponent,
-                    FsAclEntryComponent,
-                ],
-                exports: [
-                    FsAclRolesComponent,
-                    FsAclPermissionPopoverComponent,
-                    FsAclRoleComponent,
-                    FsAclEntriesComponent,
-                    FsAclRolePopoverComponent,
-                    FsAclObjectRolesComponent,
-                    FsAclEntryComponent,
-                ],
-                entryComponents: [
-                    FsAclRoleComponent
-                ]
-            })
-        ], FsAppAclModule);
-        return FsAppAclModule;
+    var FsAppAclModule = /** @class */ (function () {
+        function FsAppAclModule() {
+        }
+        FsAppAclModule_1 = FsAppAclModule;
+        FsAppAclModule.forRoot = function () {
+            return {
+                ngModule: FsAppAclModule_1,
+            };
+        };
+        var FsAppAclModule_1;
+        FsAppAclModule = FsAppAclModule_1 = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    forms.FormsModule,
+                    dialog.MatDialogModule,
+                    formField.MatFormFieldModule,
+                    checkbox.MatCheckboxModule,
+                    select.MatSelectModule,
+                    button.MatButtonModule,
+                    radio.MatRadioModule,
+                    input.MatInputModule,
+                    flexLayout.FlexLayoutModule,
+                    list.FsListModule,
+                    popover.FsPopoverModule,
+                    dialog$1.FsDialogModule,
+                    form.FsFormModule,
+                    label.FsLabelModule,
+                    radiogroup.FsRadioGroupModule,
+                    badge.FsBadgeModule,
+                    checkboxgroup.FsCheckboxGroupModule,
+                ],
+                declarations: [
+                    FsAclRolesComponent,
+                    FsAclPermissionPopoverComponent,
+                    FsAclRoleComponent,
+                    FsAclEntriesComponent,
+                    FsAclRolePopoverComponent,
+                    FsAclObjectRolesComponent,
+                    FsAclEntryComponent,
+                ],
+                exports: [
+                    FsAclRolesComponent,
+                    FsAclPermissionPopoverComponent,
+                    FsAclRoleComponent,
+                    FsAclEntriesComponent,
+                    FsAclRolePopoverComponent,
+                    FsAclObjectRolesComponent,
+                    FsAclEntryComponent,
+                ],
+                entryComponents: [
+                    FsAclRoleComponent
+                ]
+            })
+        ], FsAppAclModule);
+        return FsAppAclModule;
     }());
 
     exports.FS_APP_ACL_CONFIG = FS_APP_ACL_CONFIG;