@firestitch/app-acl 9.0.15 → 9.0.19

package/fesm2015/firestitch-app-acl.js

@@ -6,7 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule } from '@angular/material/select';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { InjectionToken, Inject, ɵɵdefineInjectable, ɵɵinject, Injectable, ViewChild, Component, QueryList, ChangeDetectorRef, Input, ViewChildren, ChangeDetectionStrategy, EventEmitter, Output, NgModule } from '@angular/core';
+import { InjectionToken, Inject, ɵɵdefineInjectable, ɵɵinject, Injectable, ChangeDetectorRef, ViewChild, Component, ChangeDetectionStrategy, QueryList, Input, ViewChildren, EventEmitter, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FsListComponent, FsListModule } from '@firestitch/list';
 import { FsPopoverModule } from '@firestitch/popover';
@@ -28,843 +28,855 @@ import { FsPrompt } from '@firestitch/prompt';
 import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
-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
 
-const AclRoleAccesses = [
-    { name: 'None', value: AclRoleAccess.None },
-    { name: 'Read', value: AclRoleAccess.Read },
-    { name: 'Write', value: AclRoleAccess.Write },
-    { name: 'Full', value: AclRoleAccess.Full }
+const AclRoleAccesses = [
+    { name: 'None', value: AclRoleAccess.None },
+    { name: 'Read', value: AclRoleAccess.Read },
+    { name: 'Write', value: AclRoleAccess.Write },
+    { name: 'Full', value: AclRoleAccess.Full }
 ];
 
 const FS_APP_ACL_CONFIG = new InjectionToken('fs-app-acl-config');
 
-const snakecaseKeys = _snakecaseKeys;
-const camelcaseKeys = _camelcaseKeys;
-let FsAppAclService = class FsAppAclService {
-    constructor(_appAclConfig) {
-        this._appAclConfig = _appAclConfig;
-    }
-    getPermissions() {
-        if (!this._permissions$) {
-            this._permissions$ = new ReplaySubject();
-            this._appAclConfig.permissions
-                .pipe(map((data) => this.input(data)))
-                .subscribe((permissions) => {
-                this._permissions$.next(permissions);
-                this._permissions$.complete();
-            });
-        }
-        return this._permissions$;
-    }
-    getLevels() {
-        if (!this._levels$) {
-            this._levels$ = new ReplaySubject();
-            this._appAclConfig.levels
-                .pipe(map((data) => this.input(data)))
-                .subscribe((levels) => {
-                this._levels$.next(levels);
-                this._levels$.complete();
-            });
-        }
-        return this._levels$;
-    }
-    getIndexedLevels() {
-        return this.getLevels()
-            .pipe(map((data) => {
-            return list(data, 'name', 'value');
-        }));
-    }
-    input(data) {
-        if (isArray(data)) {
-            return data.map(item => {
-                return this._appAclConfig.case === 'snake' ? camelcaseKeys(item, { deep: true }) : item;
-            });
-        }
-        else {
-            return this._appAclConfig.case === 'snake' ? camelcaseKeys(data, { deep: true }) : data;
-        }
-    }
-    output(data) {
-        if (isArray(data)) {
-            return data.map(item => {
-                return this._appAclConfig.case === 'snake' ? snakecaseKeys(item, { deep: true }) : item;
-            });
-        }
-        else {
-            return this._appAclConfig.case === 'snake' ? snakecaseKeys(data, { deep: true }) : data;
-        }
-    }
-};
-FsAppAclService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [FS_APP_ACL_CONFIG,] }] }
-];
-FsAppAclService.ɵprov = ɵɵdefineInjectable({ factory: function FsAppAclService_Factory() { return new FsAppAclService(ɵɵinject(FS_APP_ACL_CONFIG)); }, token: FsAppAclService, providedIn: "root" });
-FsAppAclService = __decorate([
-    Injectable({
-        providedIn: 'root',
-    }),
-    __param(0, Inject(FS_APP_ACL_CONFIG)),
-    __metadata("design:paramtypes", [Object])
+const snakecaseKeys = _snakecaseKeys;
+const camelcaseKeys = _camelcaseKeys;
+let FsAppAclService = class FsAppAclService {
+    constructor(_appAclConfig) {
+        this._appAclConfig = _appAclConfig;
+    }
+    getPermissions() {
+        if (!this._permissions$) {
+            this._permissions$ = new ReplaySubject();
+            this._appAclConfig.permissions
+                .pipe(map((data) => this.input(data)))
+                .subscribe((permissions) => {
+                this._permissions$.next(permissions);
+                this._permissions$.complete();
+            });
+        }
+        return this._permissions$;
+    }
+    getLevels() {
+        if (!this._levels$) {
+            this._levels$ = new ReplaySubject();
+            this._appAclConfig.levels
+                .pipe(map((data) => this.input(data)))
+                .subscribe((levels) => {
+                this._levels$.next(levels);
+                this._levels$.complete();
+            });
+        }
+        return this._levels$;
+    }
+    getIndexedLevels() {
+        return this.getLevels()
+            .pipe(map((data) => {
+            return list(data, 'name', 'value');
+        }));
+    }
+    input(data) {
+        if (isArray(data)) {
+            return data.map(item => {
+                return this._appAclConfig.case === 'snake' ? camelcaseKeys(item, { deep: true }) : item;
+            });
+        }
+        else {
+            return this._appAclConfig.case === 'snake' ? camelcaseKeys(data, { deep: true }) : data;
+        }
+    }
+    output(data) {
+        if (isArray(data)) {
+            return data.map(item => {
+                return this._appAclConfig.case === 'snake' ? snakecaseKeys(item, { deep: true }) : item;
+            });
+        }
+        else {
+            return this._appAclConfig.case === 'snake' ? snakecaseKeys(data, { deep: true }) : data;
+        }
+    }
+};
+FsAppAclService.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [FS_APP_ACL_CONFIG,] }] }
+];
+FsAppAclService.ɵprov = ɵɵdefineInjectable({ factory: function FsAppAclService_Factory() { return new FsAppAclService(ɵɵinject(FS_APP_ACL_CONFIG)); }, token: FsAppAclService, providedIn: "root" });
+FsAppAclService = __decorate([
+    Injectable({
+        providedIn: 'root',
+    }),
+    __param(0, Inject(FS_APP_ACL_CONFIG)),
+    __metadata("design:paramtypes", [Object])
 ], FsAppAclService);
 
-let FsAclRoleComponent = class FsAclRoleComponent {
-    constructor(_appAclService, _dialogRef, _message, _data) {
-        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 Subject();
-        this.save = () => {
-            const aclRole = Object.assign(Object.assign({}, this.aclRole), { permissions: this.levelPermissions.map((permission) => {
-                    return {
-                        value: permission.value,
-                        access: this.aclRole.permissions[permission.value] || 0,
-                    };
-                }), aclRoleConfigs: this.levelAclRoleConfigs.map((item) => {
-                    return {
-                        id: item.id,
-                        value: item.value,
-                        data: item.data,
-                    };
-                }) });
-            return this._data.saveAclRole(this._appAclService.output(aclRole))
-                .pipe(tap((response) => {
-                this._message.success('Saved Changes');
-                this.close(response);
-            }));
-        };
-    }
-    ngOnInit() {
-        forkJoin(this.getRole(), this._appAclService.getPermissions())
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(([aclRole, aclPermissions,]) => {
-            this.permissions = aclPermissions;
-            this.aclLevels = this._data.aclLevels;
-            this.indexedAclLevels = list(this.aclLevels, 'name', 'value');
-            this.indexedAccesses = list(AclRoleAccesses, 'name', 'value');
-            this.aclRole = Object.assign({
-                aclPermissions: [],
-                allPermissions: true,
-                aclRoleConfigs: [],
-                permissions: {},
-                level: this.aclLevels[0].value,
-            }, aclRole);
-            if (this.aclRole.id) {
-                this.permissions.forEach((permission) => {
-                    let access = 0;
-                    const aclPermission = this.aclRole.aclPermissions.find((item) => {
-                        return item.permission === permission.value;
-                    });
-                    if (aclPermission) {
-                        access = aclPermission.access;
-                    }
-                    this.aclRole.permissions[permission.value] = access;
-                });
-            }
-            if (this.aclRole.allPermissions) {
-                this._applyMaxPermissionAccess();
-            }
-            this._updatePermissions();
-            this._updateAclRoleConfigs();
-        });
-        this.listConfig = {
-            status: false,
-            scrollable: false,
-            noResults: {
-                message: '',
-            },
-            group: {
-                groupBy: (row) => {
-                    return row;
-                },
-                compareBy: (group) => {
-                    return group.category || true;
-                },
-                actions: [
-                    {
-                        label: 'Group action',
-                    },
-                ],
-            },
-            fetch: (query) => {
-                return of({
-                    data: this.levelPermissions.sort((a, b) => {
-                        a = a.name.toUpperCase();
-                        b = b.name.toUpperCase();
-                        if (a < b) {
-                            return -1;
-                        }
-                        else if (a > b) {
-                            return 1;
-                        }
-                        return 0;
-                    }),
-                });
-            },
-        };
-    }
-    levelChange() {
-        this._updatePermissions();
-        this._updateAclRoleConfigs();
-        setTimeout(() => {
-            this.list.reload();
-        });
-    }
-    getRole() {
-        if (!this._data.aclRole.id) {
-            return of(this._data.aclRole);
-        }
-        const query = {
-            aclPermissions: true,
-            aclRoleConfigs: true,
-        };
-        if (!this.environment) {
-            query.environmentId = null;
-        }
-        return this._data.loadAclRole(this._data.aclRole, query)
-            .pipe(map((data) => this._appAclService.input(data)));
-    }
-    close(data = null) {
-        this._dialogRef.close(data);
-    }
-    allPermissionsChange(all) {
-        this._updatePermissions();
-        if (all) {
-            this._applyMaxPermissionAccess();
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _updatePermissions() {
-        this.levelPermissions = this.permissions.filter((permission) => {
-            return permission.levels.some((item) => {
-                return item === this.aclRole.level;
-            });
-        });
-    }
-    _updateAclRoleConfigs() {
-        this.levelAclRoleConfigs = this.aclRoleConfigs.filter((item) => {
-            return this.aclRole.level === item.level;
-        });
-    }
-    _applyMaxPermissionAccess() {
-        this.permissions.forEach((permission) => {
-            this.aclRole.permissions[permission.value] = Math.max(...permission.accesses);
-        });
-    }
-};
-FsAclRoleComponent.ctorParameters = () => [
-    { type: FsAppAclService },
-    { type: MatDialogRef },
-    { type: FsMessage },
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
-];
-__decorate([
-    ViewChild(FsListComponent),
-    __metadata("design:type", FsListComponent)
-], FsAclRoleComponent.prototype, "list", void 0);
-FsAclRoleComponent = __decorate([
-    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-permission=\"row\">\n                  <div class=\"permission\">{{ permission.name }}</div>\n                  <div class=\"description small\">{{ permission.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\n                  <ng-template #elseAll>\n\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, Inject(MAT_DIALOG_DATA)),
-    __metadata("design:paramtypes", [FsAppAclService,
-        MatDialogRef,
-        FsMessage, Object])
+let FsAclRoleComponent = class FsAclRoleComponent {
+    constructor(_appAclService, _dialogRef, _message, _data, _cdRef) {
+        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 Subject();
+        this.save = () => {
+            const aclRole = Object.assign(Object.assign({}, this.aclRole), { permissions: this.levelPermissions.map((permission) => {
+                    return {
+                        value: permission.value,
+                        access: this.aclRole.permissions[permission.value] || 0,
+                    };
+                }), aclRoleConfigs: this.levelAclRoleConfigs.map((item) => {
+                    return {
+                        id: item.id,
+                        value: item.value,
+                        data: item.data,
+                    };
+                }) });
+            return this._data.saveAclRole(this._appAclService.output(aclRole))
+                .pipe(tap((response) => {
+                this._message.success('Saved Changes');
+                this.close(response);
+            }));
+        };
+    }
+    ngOnInit() {
+        forkJoin(this.getRole(), this._appAclService.getPermissions())
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(([aclRole, aclPermissions,]) => {
+            this.permissions = aclPermissions;
+            this.aclLevels = this._data.aclLevels;
+            this.indexedAclLevels = list(this.aclLevels, 'name', 'value');
+            this.indexedAccesses = list(AclRoleAccesses, 'name', 'value');
+            this.aclRole = Object.assign({
+                aclPermissions: [],
+                allPermissions: true,
+                aclRoleConfigs: [],
+                permissions: {},
+                level: this.aclLevels[0].value,
+            }, aclRole);
+            if (this.aclRole.id) {
+                this.permissions.forEach((permission) => {
+                    let access = 0;
+                    const aclPermission = this.aclRole.aclPermissions.find((item) => {
+                        return item.permission === permission.value;
+                    });
+                    if (aclPermission) {
+                        access = aclPermission.access;
+                    }
+                    this.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: (data) => {
+                    return data;
+                },
+                compareBy: (data) => {
+                    return data.category || 'General';
+                },
+            },
+            fetch: () => {
+                return of({
+                    data: this.levelPermissions.sort((a, b) => {
+                        a = a.name.toUpperCase();
+                        b = b.name.toUpperCase();
+                        if (a < b) {
+                            return -1;
+                        }
+                        else if (a > b) {
+                            return 1;
+                        }
+                        return 0;
+                    }),
+                });
+            },
+        };
+    }
+    levelChange() {
+        this._updatePermissions();
+        this._updateAclRoleConfigs();
+        setTimeout(() => {
+            this.list.reload();
+        });
+    }
+    getRole() {
+        if (!this._data.aclRole.id) {
+            return of(this._data.aclRole);
+        }
+        const query = {
+            aclPermissions: true,
+            aclRoleConfigs: true,
+        };
+        if (!this.environment) {
+            query.environmentId = null;
+        }
+        return this._data.loadAclRole(this._data.aclRole, query)
+            .pipe(map((data) => this._appAclService.input(data)));
+    }
+    close(data = null) {
+        this._dialogRef.close(data);
+    }
+    allPermissionsChange(all) {
+        this._updatePermissions();
+        if (all) {
+            this._applyMaxPermissionAccess();
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _updatePermissions() {
+        this.levelPermissions = this.permissions.filter((permission) => {
+            return permission.levels.some((item) => {
+                return item === this.aclRole.level;
+            });
+        });
+    }
+    _updateAclRoleConfigs() {
+        this.levelAclRoleConfigs = this.aclRoleConfigs.filter((item) => {
+            return this.aclRole.level === item.level;
+        });
+    }
+    _applyMaxPermissionAccess() {
+        this.permissions.forEach((permission) => {
+            this.aclRole.permissions[permission.value] = Math.max(...permission.accesses);
+        });
+    }
+};
+FsAclRoleComponent.ctorParameters = () => [
+    { type: FsAppAclService },
+    { type: MatDialogRef },
+    { type: FsMessage },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    ViewChild(FsListComponent),
+    __metadata("design:type", FsListComponent)
+], FsAclRoleComponent.prototype, "list", void 0);
+FsAclRoleComponent = __decorate([
+    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: 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, Inject(MAT_DIALOG_DATA)),
+    __metadata("design:paramtypes", [FsAppAclService,
+        MatDialogRef,
+        FsMessage, Object, ChangeDetectorRef])
 ], FsAclRoleComponent);
 
-let FsAclRolesComponent = class FsAclRolesComponent {
-    constructor(_appAclService, _dialog, _cdRef) {
-        this._appAclService = _appAclService;
-        this._dialog = _dialog;
-        this._cdRef = _cdRef;
-        this.aclLevels = [];
-        this.list = new QueryList();
-        this.indexedAclRoleLevels = {};
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        new Observable(observer => {
-            if (this.aclLevels.length) {
-                observer.next(this.aclLevels);
-                observer.complete();
-            }
-            else {
-                this._appAclService.getLevels()
-                    .subscribe((aclLevels) => {
-                    observer.next(aclLevels);
-                    observer.complete();
-                });
-            }
-        })
-            .subscribe((aclLevels) => {
-            this.aclLevels = aclLevels;
-            this.indexedAclRoleLevels = list(this.aclLevels, 'name', 'value');
-            this._loadListConfig();
-        });
-    }
-    openDialog(aclRole = { id: null }) {
-        const dialogRef = this._dialog.open(FsAclRoleComponent, {
-            width: '70%',
-            data: {
-                aclRole,
-                aclLevels: this.aclLevels,
-                loadAclRole: this.loadAclRole,
-                saveAclRole: this.saveAclRole,
-            },
-        });
-        dialogRef.afterClosed()
-            .pipe(takeUntil(this._destroy$), filter((response) => !!response))
-            .subscribe((response) => {
-            this.list.forEach((list) => {
-                list.reload();
-            });
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _loadListConfig() {
-        this.listConfig = {
-            sort: { value: 'hierarchy' },
-            filters: [
-                {
-                    name: 'keyword',
-                    type: ItemType.Keyword,
-                    label: 'Search',
-                },
-                {
-                    name: 'level',
-                    label: 'Level',
-                    type: ItemType.Select,
-                    values: this.aclLevels,
-                    hide: this.aclLevels.length <= 1
-                },
-                {
-                    name: 'state',
-                    label: 'Show Deleted',
-                    type: ItemType.Checkbox,
-                    unchecked: 'active',
-                    checked: 'deleted',
-                },
-            ],
-            actions: [
-                {
-                    click: (event) => {
-                        this.openDialog();
-                    },
-                    label: 'Create',
-                },
-            ],
-            rowActions: [
-                {
-                    click: (data) => {
-                        return this.deleteAclRole(this._appAclService.output(data));
-                    },
-                    remove: {
-                        title: 'Confirm',
-                        template: 'Are you sure you would like to delete this role?',
-                    },
-                    menu: true,
-                    label: 'Delete',
-                    show: (row) => row.state !== 'deleted',
-                },
-            ],
-            fetch: (query) => {
-                query.permissions = true;
-                return this.loadAclRoles(query)
-                    .pipe(map((data) => this._appAclService.input(data)));
-            },
-        };
-    }
-};
-FsAclRolesComponent.ctorParameters = () => [
-    { type: FsAppAclService },
-    { type: MatDialog },
-    { type: ChangeDetectorRef }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FsAclRolesComponent.prototype, "deleteAclRole", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FsAclRolesComponent.prototype, "saveAclRole", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FsAclRolesComponent.prototype, "loadAclRoles", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FsAclRolesComponent.prototype, "loadAclRole", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsAclRolesComponent.prototype, "aclLevels", void 0);
-__decorate([
-    ViewChildren(FsListComponent),
-    __metadata("design:type", Object)
-], FsAclRolesComponent.prototype, "list", void 0);
-FsAclRolesComponent = __decorate([
-    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: ChangeDetectionStrategy.OnPush,
-        styles: [".permissions .permission+.permission::before{content:\", \"}"]
-    }),
-    __metadata("design:paramtypes", [FsAppAclService,
-        MatDialog,
-        ChangeDetectorRef])
+let FsAclRolesComponent = class FsAclRolesComponent {
+    constructor(_appAclService, _dialog, _cdRef) {
+        this._appAclService = _appAclService;
+        this._dialog = _dialog;
+        this._cdRef = _cdRef;
+        this.aclLevels = [];
+        this.list = new QueryList();
+        this.indexedAclRoleLevels = {};
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        new Observable(observer => {
+            if (this.aclLevels.length) {
+                observer.next(this.aclLevels);
+                observer.complete();
+            }
+            else {
+                this._appAclService.getLevels()
+                    .subscribe((aclLevels) => {
+                    observer.next(aclLevels);
+                    observer.complete();
+                });
+            }
+        })
+            .subscribe((aclLevels) => {
+            this.aclLevels = aclLevels;
+            this.indexedAclRoleLevels = list(this.aclLevels, 'name', 'value');
+            this._loadListConfig();
+        });
+    }
+    openDialog(aclRole = { id: null }) {
+        const dialogRef = this._dialog.open(FsAclRoleComponent, {
+            width: '70%',
+            data: {
+                aclRole,
+                aclLevels: this.aclLevels,
+                loadAclRole: this.loadAclRole,
+                saveAclRole: this.saveAclRole,
+            },
+        });
+        dialogRef.afterClosed()
+            .pipe(takeUntil(this._destroy$), filter((response) => !!response))
+            .subscribe((response) => {
+            this.list.forEach((list) => {
+                list.reload();
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _loadListConfig() {
+        this.listConfig = {
+            sort: { value: 'hierarchy' },
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search',
+                },
+                {
+                    name: 'level',
+                    label: 'Level',
+                    type: ItemType.Select,
+                    values: this.aclLevels,
+                    hide: this.aclLevels.length <= 1
+                },
+                {
+                    name: 'state',
+                    label: 'Show Deleted',
+                    type: ItemType.Checkbox,
+                    unchecked: 'active',
+                    checked: 'deleted',
+                },
+            ],
+            actions: [
+                {
+                    click: (event) => {
+                        this.openDialog();
+                    },
+                    label: 'Create',
+                },
+            ],
+            rowActions: [
+                {
+                    click: (data) => {
+                        return this.deleteAclRole(this._appAclService.output(data));
+                    },
+                    remove: {
+                        title: 'Confirm',
+                        template: 'Are you sure you would like to delete this role?',
+                    },
+                    menu: true,
+                    label: 'Delete',
+                    show: (row) => row.state !== 'deleted',
+                },
+            ],
+            fetch: (query) => {
+                query.permissions = true;
+                return this.loadAclRoles(query)
+                    .pipe(map((data) => this._appAclService.input(data)));
+            },
+        };
+    }
+};
+FsAclRolesComponent.ctorParameters = () => [
+    { type: FsAppAclService },
+    { type: MatDialog },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FsAclRolesComponent.prototype, "deleteAclRole", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FsAclRolesComponent.prototype, "saveAclRole", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FsAclRolesComponent.prototype, "loadAclRoles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FsAclRolesComponent.prototype, "loadAclRole", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FsAclRolesComponent.prototype, "aclLevels", void 0);
+__decorate([
+    ViewChildren(FsListComponent),
+    __metadata("design:type", Object)
+], FsAclRolesComponent.prototype, "list", void 0);
+FsAclRolesComponent = __decorate([
+    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: ChangeDetectionStrategy.OnPush,
+        styles: [".permissions .permission+.permission::before{content:\", \"}"]
+    }),
+    __metadata("design:paramtypes", [FsAppAclService,
+        MatDialog,
+        ChangeDetectorRef])
 ], FsAclRolesComponent);
 
-let FsAclPermissionPopoverComponent = class FsAclPermissionPopoverComponent {
-    constructor(_appAclService) {
-        this._appAclService = _appAclService;
-    }
-    ngOnInit() {
-        this._appAclService.getPermissions()
-            .subscribe(permissions => {
-            this.description = permissions.filter(item => {
-                return item.value === this.permission.value;
-            }).map(item => {
-                return item.description;
-            })[0];
-        });
-    }
-};
-FsAclPermissionPopoverComponent.ctorParameters = () => [
-    { type: FsAppAclService }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsAclPermissionPopoverComponent.prototype, "permission", void 0);
-FsAclPermissionPopoverComponent = __decorate([
-    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])
+let FsAclPermissionPopoverComponent = class FsAclPermissionPopoverComponent {
+    constructor(_appAclService) {
+        this._appAclService = _appAclService;
+    }
+    ngOnInit() {
+        this._appAclService.getPermissions()
+            .subscribe(permissions => {
+            this.description = permissions.filter(item => {
+                return item.value === this.permission.value;
+            }).map(item => {
+                return item.description;
+            })[0];
+        });
+    }
+};
+FsAclPermissionPopoverComponent.ctorParameters = () => [
+    { type: FsAppAclService }
+];
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclPermissionPopoverComponent.prototype, "permission", void 0);
+FsAclPermissionPopoverComponent = __decorate([
+    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);
 
-let FsAclRolePopoverComponent = class FsAclRolePopoverComponent {
-    constructor(_appAclService) {
-        this._appAclService = _appAclService;
-        this.permissions = [];
-    }
-    ngOnInit() {
-        const aclRolePermissions = this.aclRole.permissions || [];
-        this._appAclService.getPermissions()
-            .subscribe((response) => {
-            this.permissions = response.filter(item => {
-                return aclRolePermissions.some(permission => {
-                    return item.value === permission.value;
-                });
-            });
-        });
-    }
-};
-FsAclRolePopoverComponent.ctorParameters = () => [
-    { type: FsAppAclService }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsAclRolePopoverComponent.prototype, "aclRole", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsAclRolePopoverComponent.prototype, "objectName", void 0);
-FsAclRolePopoverComponent = __decorate([
-    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])
+let FsAclRolePopoverComponent = class FsAclRolePopoverComponent {
+    constructor(_appAclService) {
+        this._appAclService = _appAclService;
+        this.permissions = [];
+    }
+    ngOnInit() {
+        const aclRolePermissions = this.aclRole.permissions || [];
+        this._appAclService.getPermissions()
+            .subscribe((response) => {
+            this.permissions = response.filter(item => {
+                return aclRolePermissions.some(permission => {
+                    return item.value === permission.value;
+                });
+            });
+        });
+    }
+};
+FsAclRolePopoverComponent.ctorParameters = () => [
+    { type: FsAppAclService }
+];
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclRolePopoverComponent.prototype, "aclRole", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclRolePopoverComponent.prototype, "objectName", void 0);
+FsAclRolePopoverComponent = __decorate([
+    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);
 
-let FsAclEntryComponent = class FsAclEntryComponent {
-    constructor(_appAclService, _dialogRef, _message, _data) {
-        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 = () => {
-            return this._data.saveAclObjectEntry(this._appAclService.output(this.aclObjectEntry))
-                .subscribe((data) => {
-                this._message.success('Saved Changes');
-                this.close(data);
-            });
-        };
-        this.aclObjectEntry = Object.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;
-        }
-    }
-    ngOnInit() {
-        forkJoin(this._data.loadAclRoles({
-            level: this.aclObjectEntry.level,
-            environmentId: this.aclObjectEntry.environmentId,
-        })
-            .pipe(map((data) => this._appAclService.input(data))), this._appAclService.getIndexedLevels())
-            .subscribe(([aclRoles, levels,]) => {
-            this.aclRoles = aclRoles;
-            this.indexedAclRoleLevels = levels;
-            this.aclObjectRole = {
-                object: this.aclObjectEntry.object,
-                aclRoles: this.aclObjectEntry.aclEntries
-                    .map((aclEntry) => {
-                    return aclEntry.aclRole;
-                })
-            };
-        });
-    }
-    aclObjectRoleChange(aclObjectRoles) {
-        this.aclObjectEntry.aclEntries = aclObjectRoles.reduce((aclEntries, aclObjectRole) => {
-            aclObjectRole.aclRoles.forEach(aclRole => {
-                aclEntries.push({
-                    aclRoleId: aclRole.id,
-                    aclRole: aclRole,
-                    objectId: aclObjectRole.object ? aclObjectRole.object.id : null,
-                    object: aclObjectRole.object || null
-                });
-            });
-            return aclEntries;
-        }, []);
-    }
-    close(data = null) {
-        this._dialogRef.close(data);
-    }
-};
-FsAclEntryComponent.ctorParameters = () => [
-    { type: FsAppAclService },
-    { type: MatDialogRef },
-    { type: FsMessage },
-    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
-];
-FsAclEntryComponent = __decorate([
-    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, Inject(MAT_DIALOG_DATA)),
-    __metadata("design:paramtypes", [FsAppAclService,
-        MatDialogRef,
-        FsMessage, Object])
+let FsAclEntryComponent = class FsAclEntryComponent {
+    constructor(_appAclService, _dialogRef, _message, _data) {
+        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 = () => {
+            return this._data.saveAclObjectEntry(this._appAclService.output(this.aclObjectEntry))
+                .subscribe((data) => {
+                this._message.success('Saved Changes');
+                this.close(data);
+            });
+        };
+        this.aclObjectEntry = Object.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;
+        }
+    }
+    ngOnInit() {
+        forkJoin(this._data.loadAclRoles({
+            level: this.aclObjectEntry.level,
+            environmentId: this.aclObjectEntry.environmentId,
+        })
+            .pipe(map((data) => this._appAclService.input(data))), this._appAclService.getIndexedLevels())
+            .subscribe(([aclRoles, levels,]) => {
+            this.aclRoles = aclRoles;
+            this.indexedAclRoleLevels = levels;
+            this.aclObjectRole = {
+                object: this.aclObjectEntry.object,
+                aclRoles: this.aclObjectEntry.aclEntries
+                    .map((aclEntry) => {
+                    return aclEntry.aclRole;
+                })
+            };
+        });
+    }
+    aclObjectRoleChange(aclObjectRoles) {
+        this.aclObjectEntry.aclEntries = aclObjectRoles.reduce((aclEntries, aclObjectRole) => {
+            aclObjectRole.aclRoles.forEach(aclRole => {
+                aclEntries.push({
+                    aclRoleId: aclRole.id,
+                    aclRole: aclRole,
+                    objectId: aclObjectRole.object ? aclObjectRole.object.id : null,
+                    object: aclObjectRole.object || null
+                });
+            });
+            return aclEntries;
+        }, []);
+    }
+    close(data = null) {
+        this._dialogRef.close(data);
+    }
+};
+FsAclEntryComponent.ctorParameters = () => [
+    { type: FsAppAclService },
+    { type: MatDialogRef },
+    { type: FsMessage },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+FsAclEntryComponent = __decorate([
+    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, Inject(MAT_DIALOG_DATA)),
+    __metadata("design:paramtypes", [FsAppAclService,
+        MatDialogRef,
+        FsMessage, Object])
 ], FsAclEntryComponent);
 
-let FsAclEntriesComponent = class FsAclEntriesComponent {
-    constructor(_appAclService, _dialog, _confirm) {
-        this._appAclService = _appAclService;
-        this._dialog = _dialog;
-        this._confirm = _confirm;
-        this.aclEntriesList = null;
-        this.aclEntriesConfig = null;
-        this.permissions = [];
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this._appAclService.getPermissions()
-            .subscribe(response => {
-            this.permissions = response;
-        });
-        this.aclEntriesConfig = {
-            status: false,
-            paging: false,
-            scrollable: false,
-            rowActions: [
-                {
-                    label: 'Edit',
-                    click: (aclObjectEntry) => {
-                        this.update(aclObjectEntry);
-                    }
-                },
-                {
-                    label: 'Remove All Roles',
-                    click: (aclObjectEntry) => {
-                        this._confirm
-                            .confirm({
-                            title: 'Remove All Roles',
-                            template: 'Are you sure you would like to remove all roles?',
-                        }).subscribe(() => {
-                            const data = this._appAclService.output(Object.assign(Object.assign({}, aclObjectEntry), { aclEntries: [] }));
-                            this.saveAclObjectEntry(data)
-                                .subscribe(() => {
-                                this.aclEntriesList.reload();
-                            });
-                        });
-                    }
-                }
-            ],
-            fetch: (query) => {
-                return new Observable((observer) => {
-                    this.loadAclEntries({
-                        aclRoles: true,
-                        aclRolePermissions: true,
-                        objects: true,
-                        aclRoleState: 'active',
-                    })
-                        .pipe(map((response) => this._appAclService.input(response)))
-                        .subscribe((aclEntries) => {
-                        const objects = aclEntries.reduce((items, item) => {
-                            if (item.object) {
-                                items[item.object.id] = item.object;
-                            }
-                            return items;
-                        }, {});
-                        const environments = aclEntries.reduce((items, item) => {
-                            if (item.environment) {
-                                items[item.environment.id] = item.environment;
-                            }
-                            return items;
-                        }, {});
-                        let aclObjectEntry = [];
-                        const grouped = groupBy(aclEntries, (item) => {
-                            return [item.aclRole.level, item.environmentId, item.objectId];
-                        });
-                        forOwn(grouped, (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,
-                            });
-                        });
-                        const hasApp = aclObjectEntry.some((item) => {
-                            return item.aclEntries.some((entry) => {
-                                return !entry.objectId;
-                            });
-                        });
-                        if (!hasApp) {
-                            aclObjectEntry.unshift({
-                                object: null, aclEntries: [],
-                                level: 'app',
-                                environmentId: null,
-                            });
-                        }
-                        aclObjectEntry = sortBy(aclObjectEntry, (item) => {
-                            return item.object ? item.level : '';
-                        });
-                        observer.next({ data: aclObjectEntry });
-                        observer.complete();
-                    });
-                });
-            },
-        };
-    }
-    update(aclObjectEntry) {
-        const data = {
-            aclObjectEntry: aclObjectEntry,
-            required: false,
-            loadAclRoles: this.loadAclRoles,
-            saveAclObjectEntry: this.saveAclObjectEntry
-        };
-        this._dialog.open(FsAclEntryComponent, {
-            data: data
-        })
-            .afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.aclEntriesList.reload();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-};
-FsAclEntriesComponent.ctorParameters = () => [
-    { type: FsAppAclService },
-    { type: MatDialog },
-    { type: FsPrompt }
-];
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FsAclEntriesComponent.prototype, "loadAclEntries", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FsAclEntriesComponent.prototype, "loadAclRoles", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Function)
-], FsAclEntriesComponent.prototype, "saveAclObjectEntry", void 0);
-__decorate([
-    ViewChild(FsListComponent),
-    __metadata("design:type", FsListComponent)
-], FsAclEntriesComponent.prototype, "aclEntriesList", void 0);
-FsAclEntriesComponent = __decorate([
-    Component({
-        selector: 'fs-acl-entries',
-        template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Object</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            <small>{{ row.object.className }}</small>\n            <div>{{ row.object.name }}</div>\n          </span>\n      </div>\n\n      <ng-template #elseObject>\n        App\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Environment</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,
-        MatDialog,
-        FsPrompt])
+let FsAclEntriesComponent = class FsAclEntriesComponent {
+    constructor(_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 Subject();
+    }
+    ngOnInit() {
+        this._appAclService.getPermissions()
+            .subscribe(response => {
+            this.permissions = response;
+        });
+        this.aclEntriesConfig = {
+            status: false,
+            paging: false,
+            actions: this.actions,
+            rowActions: [
+                {
+                    label: 'Remove All Roles',
+                    click: (aclObjectEntry) => {
+                        this._confirm
+                            .confirm({
+                            title: 'Remove All Roles',
+                            template: 'Are you sure you would like to remove all roles?',
+                        }).subscribe(() => {
+                            const data = this._appAclService.output(Object.assign(Object.assign({}, aclObjectEntry), { aclEntries: [] }));
+                            this.saveAclObjectEntry(data)
+                                .subscribe(() => {
+                                this.aclEntriesList.reload();
+                            });
+                        });
+                    }
+                }
+            ],
+            fetch: () => {
+                return new Observable((observer) => {
+                    this.loadAclEntries({
+                        aclRoles: true,
+                        aclRolePermissions: true,
+                        objects: true,
+                        aclRoleState: 'active',
+                    })
+                        .pipe(map((response) => this._appAclService.input(response)))
+                        .subscribe((aclEntries) => {
+                        const objects = aclEntries.reduce((items, item) => {
+                            if (item.object) {
+                                items[item.object.id] = item.object;
+                            }
+                            return items;
+                        }, {});
+                        const environments = aclEntries.reduce((items, item) => {
+                            if (item.environment) {
+                                items[item.environment.id] = item.environment;
+                            }
+                            return items;
+                        }, {});
+                        let aclObjectEntry = [];
+                        const grouped = groupBy(aclEntries, (item) => {
+                            return [item.aclRole.level, item.environmentId, item.objectId];
+                        });
+                        forOwn(grouped, (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,
+                            });
+                        });
+                        const hasApp = aclObjectEntry.some((item) => {
+                            return item.aclEntries.some((entry) => {
+                                return !entry.objectId;
+                            });
+                        });
+                        if (!hasApp) {
+                            aclObjectEntry.unshift({
+                                object: null, aclEntries: [],
+                                level: 'app',
+                                environmentId: null,
+                            });
+                        }
+                        aclObjectEntry = sortBy(aclObjectEntry, (item) => {
+                            return item.object ? item.level : '';
+                        });
+                        observer.next({ data: aclObjectEntry });
+                        observer.complete();
+                    });
+                });
+            },
+        };
+    }
+    update(aclObjectEntry) {
+        const data = {
+            aclObjectEntry: aclObjectEntry,
+            required: false,
+            loadAclRoles: this.loadAclRoles,
+            saveAclObjectEntry: this.saveAclObjectEntry
+        };
+        this._dialog.open(FsAclEntryComponent, {
+            data: data
+        })
+            .afterClosed()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.aclEntriesList.reload();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    reload() {
+        this.aclEntriesList.reload();
+    }
+};
+FsAclEntriesComponent.ctorParameters = () => [
+    { type: FsAppAclService },
+    { type: MatDialog },
+    { type: FsPrompt }
+];
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FsAclEntriesComponent.prototype, "loadAclEntries", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FsAclEntriesComponent.prototype, "loadAclRoles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], FsAclEntriesComponent.prototype, "saveAclObjectEntry", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclEntriesComponent.prototype, "environmentShow", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclEntriesComponent.prototype, "environmentLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FsAclEntriesComponent.prototype, "actions", void 0);
+__decorate([
+    ViewChild(FsListComponent),
+    __metadata("design:type", FsListComponent)
+], FsAclEntriesComponent.prototype, "aclEntriesList", void 0);
+FsAclEntriesComponent = __decorate([
+    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,
+        MatDialog,
+        FsPrompt])
 ], FsAclEntriesComponent);
 
-let FsAclObjectRolesComponent = class FsAclObjectRolesComponent {
-    constructor() {
-        this.aclRoles = [];
-        this.required = false;
-        this.multiple = false;
-        this.disabled = false;
-        this.aclObjectRoles = [];
-        this.rolesLabel = 'Roles';
-        this.levelLabel = '';
-        this.change = new EventEmitter();
-        this.compareAclRole = (o1, o2) => {
-            return o1 && o2 && o1.id === o2.id;
-        };
-    }
-    changed() {
-        this.change.emit(this.aclObjectRoles);
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsAclObjectRolesComponent.prototype, "aclRoles", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsAclObjectRolesComponent.prototype, "required", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsAclObjectRolesComponent.prototype, "multiple", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsAclObjectRolesComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FsAclObjectRolesComponent.prototype, "aclObjectRoles", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsAclObjectRolesComponent.prototype, "rolesLabel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FsAclObjectRolesComponent.prototype, "levelLabel", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], FsAclObjectRolesComponent.prototype, "change", void 0);
-FsAclObjectRolesComponent = __decorate([
-    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: ControlContainer, useExisting: NgForm }],
-        styles: ["table tr td:first-child{padding-right:15px}"]
-    })
+let FsAclObjectRolesComponent = class FsAclObjectRolesComponent {
+    constructor() {
+        this.aclRoles = [];
+        this.required = false;
+        this.multiple = false;
+        this.disabled = false;
+        this.aclObjectRoles = [];
+        this.rolesLabel = 'Roles';
+        this.levelLabel = '';
+        this.change = new EventEmitter();
+        this.compareAclRole = (o1, o2) => {
+            return o1 && o2 && o1.id === o2.id;
+        };
+    }
+    changed() {
+        this.change.emit(this.aclObjectRoles);
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FsAclObjectRolesComponent.prototype, "aclRoles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclObjectRolesComponent.prototype, "required", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclObjectRolesComponent.prototype, "multiple", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclObjectRolesComponent.prototype, "disabled", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FsAclObjectRolesComponent.prototype, "aclObjectRoles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclObjectRolesComponent.prototype, "rolesLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], FsAclObjectRolesComponent.prototype, "levelLabel", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], FsAclObjectRolesComponent.prototype, "change", void 0);
+FsAclObjectRolesComponent = __decorate([
+    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: ControlContainer, useExisting: NgForm }],
+        styles: ["table tr td:first-child{padding-right:15px}"]
+    })
 ], FsAclObjectRolesComponent);
 
-var FsAppAclModule_1;
-let FsAppAclModule = FsAppAclModule_1 = class FsAppAclModule {
-    static forRoot() {
-        return {
-            ngModule: FsAppAclModule_1,
-        };
-    }
-};
-FsAppAclModule = FsAppAclModule_1 = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            FormsModule,
-            MatDialogModule,
-            MatFormFieldModule,
-            MatCheckboxModule,
-            MatSelectModule,
-            MatButtonModule,
-            MatRadioModule,
-            MatInputModule,
-            FlexLayoutModule,
-            FsListModule,
-            FsPopoverModule,
-            FsDialogModule,
-            FsFormModule,
-            FsLabelModule,
-            FsRadioGroupModule,
-            FsBadgeModule,
-            FsCheckboxGroupModule,
-        ],
-        declarations: [
-            FsAclRolesComponent,
-            FsAclPermissionPopoverComponent,
-            FsAclRoleComponent,
-            FsAclEntriesComponent,
-            FsAclRolePopoverComponent,
-            FsAclObjectRolesComponent,
-            FsAclEntryComponent,
-        ],
-        exports: [
-            FsAclRolesComponent,
-            FsAclPermissionPopoverComponent,
-            FsAclRoleComponent,
-            FsAclEntriesComponent,
-            FsAclRolePopoverComponent,
-            FsAclObjectRolesComponent,
-            FsAclEntryComponent,
-        ],
-        entryComponents: [
-            FsAclRoleComponent
-        ]
-    })
+var FsAppAclModule_1;
+let FsAppAclModule = FsAppAclModule_1 = class FsAppAclModule {
+    static forRoot() {
+        return {
+            ngModule: FsAppAclModule_1,
+        };
+    }
+};
+FsAppAclModule = FsAppAclModule_1 = __decorate([
+    NgModule({
+        imports: [
+            CommonModule,
+            FormsModule,
+            MatDialogModule,
+            MatFormFieldModule,
+            MatCheckboxModule,
+            MatSelectModule,
+            MatButtonModule,
+            MatRadioModule,
+            MatInputModule,
+            FlexLayoutModule,
+            FsListModule,
+            FsPopoverModule,
+            FsDialogModule,
+            FsFormModule,
+            FsLabelModule,
+            FsRadioGroupModule,
+            FsBadgeModule,
+            FsCheckboxGroupModule,
+        ],
+        declarations: [
+            FsAclRolesComponent,
+            FsAclPermissionPopoverComponent,
+            FsAclRoleComponent,
+            FsAclEntriesComponent,
+            FsAclRolePopoverComponent,
+            FsAclObjectRolesComponent,
+            FsAclEntryComponent,
+        ],
+        exports: [
+            FsAclRolesComponent,
+            FsAclPermissionPopoverComponent,
+            FsAclRoleComponent,
+            FsAclEntriesComponent,
+            FsAclRolePopoverComponent,
+            FsAclObjectRolesComponent,
+            FsAclEntryComponent,
+        ],
+        entryComponents: [
+            FsAclRoleComponent
+        ]
+    })
 ], FsAppAclModule);
 
-// start:ng42.barrel
+// start:ng42.barrel
 // end:ng42.barrel
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { FS_APP_ACL_CONFIG, FsAclRolesComponent, FsAppAclModule, FsAppAclService, FsAppAclService as ɵa, FsAclPermissionPopoverComponent as ɵb, FsAclRoleComponent as ɵc, FsAclEntriesComponent as ɵd, FsAclRolePopoverComponent as ɵe, FsAclObjectRolesComponent as ɵf, FsAclEntryComponent as ɵg };
+export { FS_APP_ACL_CONFIG, FsAclEntriesComponent, FsAclRolesComponent, FsAppAclModule, FsAppAclService, FsAppAclService as ɵa, FsAclPermissionPopoverComponent as ɵb, FsAclRoleComponent as ɵc, FsAclRolePopoverComponent as ɵd, FsAclObjectRolesComponent as ɵe, FsAclEntryComponent as ɵf };
 //# sourceMappingURL=firestitch-app-acl.js.map