@firestitch/app-acl 12.4.8 → 12.4.11

package/app/components/acl-role/acl-role.component.d.ts

@@ -6,6 +6,7 @@ import { FsListComponent, FsListConfig } from '@firestitch/list';
 import { Observable } from 'rxjs';
 import { FsAppAclService } from './../../services/app-acl.service';
 import { RoleConfig } from '../../interfaces';
+import { AclRoleAccess } from '../../enums/acl-role-access';
 import * as i0 from "@angular/core";
 export declare class FsAclRoleComponent implements OnInit, OnDestroy {
     private readonly _data;
@@ -21,7 +22,7 @@ export declare class FsAclRoleComponent implements OnInit, OnDestroy {
     levelPermissions: any[];
     AclRoleAccesses: {
         name: string;
-        value: import("../../enums/acl-role-access").AclRoleAccess;
+        value: AclRoleAccess;
     }[];
     indexedAccesses: {};
     aclLevels: any[];
@@ -45,6 +46,7 @@ export declare class FsAclRoleComponent implements OnInit, OnDestroy {
     private _updatePermissions;
     private _updateRoleConfigs;
     private _applyMaxPermissionAccess;
+    private _applyNonePermissionAccess;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsAclRoleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FsAclRoleComponent, "ng-component", never, {}, {}, never, never>;
 }

package/app/components/acl-roles/acl-roles.component.d.ts

@@ -20,6 +20,7 @@ export declare class FsAclRolesComponent implements OnInit, OnDestroy {
     loadAclRole: (aclRole: AclRole, query: any) => Observable<AclRole>;
     loadRoleConfigs: (aclRole: AclRole, query: any) => Observable<RoleConfig[]>;
     aclLevels: AclLevel[];
+    hideDeleteAclRole: (data: any) => boolean;
     list: QueryList<FsListComponent>;
     listConfig: FsListConfig;
     permissions: any;
@@ -33,5 +34,5 @@ export declare class FsAclRolesComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     private _loadListConfig;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsAclRolesComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FsAclRolesComponent, "fs-acl-roles", never, { "deleteAclRole": "deleteAclRole"; "restoreAclRole": "restoreAclRole"; "saveAclRole": "saveAclRole"; "loadAclRoles": "loadAclRoles"; "loadAclRole": "loadAclRole"; "loadRoleConfigs": "loadRoleConfigs"; "aclLevels": "aclLevels"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FsAclRolesComponent, "fs-acl-roles", never, { "deleteAclRole": "deleteAclRole"; "restoreAclRole": "restoreAclRole"; "saveAclRole": "saveAclRole"; "loadAclRoles": "loadAclRoles"; "loadAclRole": "loadAclRole"; "loadRoleConfigs": "loadRoleConfigs"; "aclLevels": "aclLevels"; "hideDeleteAclRole": "hideDeleteAclRole"; }, {}, never, never>;
 }

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

@@ -758,6 +758,9 @@
           if (all) {
               this._applyMaxPermissionAccess();
           }
+          else {
+              this._applyNonePermissionAccess();
+          }
       };
       FsAclRoleComponent.prototype.ngOnDestroy = function () {
           this._destroy$.next();
@@ -765,7 +768,8 @@
       };
       FsAclRoleComponent.prototype._updatePermissions = function () {
           var _this = this;
-          this.levelPermissions = this.permissions.filter(function (permission) {
+          this.levelPermissions = this.permissions
+              .filter(function (permission) {
               return permission.levels.some(function (item) {
                   return item === _this.aclRole.level;
               });
@@ -788,10 +792,16 @@
               _this.aclRolePermissions[permission.value] = Math.max.apply(Math, __spreadArray([], __read(permission.accesses)));
           });
       };
+      FsAclRoleComponent.prototype._applyNonePermissionAccess = function () {
+          var _this = this;
+          this.permissions.forEach(function (permission) {
+              _this.aclRolePermissions[permission.value] = AclRoleAccess.None;
+          });
+      };
       return FsAclRoleComponent;
   }());
   FsAclRoleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclRoleComponent, deps: [{ token: i2.MAT_DIALOG_DATA }, { token: FsAppAclService }, { token: i2__namespace.MatDialogRef }, { token: i3__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FsAclRoleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: i12.FsListComponent, descendants: true }], ngImport: i0__namespace, 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\n                matInput\n                placeholder=\"Name\"\n                [(ngModel)]=\"aclRole.name\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n\n            <mat-form-field>\n              <input\n                matInput\n                placeholder=\"Description\"\n                [(ngModel)]=\"aclRole.description\"\n                name=\"description\">\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                  [(ngModel)]=\"aclRole.level\"\n                  (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                Enable\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div fxLayout=\"column\" *ngFor=\"let roleConfig of roleConfigs\">\n              <fs-label-field *ngIf=\"roleConfig.type === 'checkbox'\">\n                <fs-label>{{roleConfig.label}}</fs-label>\n                <mat-checkbox\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\">\n                  Enable\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{roleConfig.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"roleConfig.type === 'select'\">\n                <mat-select\n                  [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                  [name]=\"roleConfig.name\"\n                  [required]=\"roleConfig.required\"\n                  [placeholder]=\"roleConfig.label\">\n                    <mat-option\n                        *ngFor=\"let item of roleConfig.values\"\n                        [value]=\"item.value\">\n                      {{ item.name }}\n                    </mat-option>\n                </mat-select>\n                <mat-hint>{{roleConfig.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div fxLayout=\"column\" fxFlex=\"65\" fxFlex.lt-md=\"0\" *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions\">\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <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-group-cell\n                             let-row=\"row\"\n                             let-group=\"group\"\n                             let-groupChildren=\"groupChildren\"\n                             class=\"permission-group\"\n                             align=\"right\">\n                  <ng-container *ngIf=\"!aclRole.allPermissions\">\n                    <fs-menu>\n                      <ng-container *ngFor=\"let access of AclRoleAccesses | builkOptionsFilter: groupChildren\">\n                        <ng-template\n                          fs-menu-item\n                          (click)=\"bulkChange(access.value, groupChildren, group)\">\n                          {{ access.name }}\n                        </ng-template>\n                      </ng-container>\n                    </fs-menu>\n                  </ng-container>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions; else elseAll\">\n                    {{ indexedAccesses[aclRolePermissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <mat-form-field>\n                      <mat-select\n                          [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                          [disabled]=\"!!aclRole.protected\"\n                          required\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%}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6__namespace.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace.FsLabelComponent, selector: "fs-label" }, { type: i7__namespace.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { type: i8__namespace.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i9__namespace.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6__namespace.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i10__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12__namespace.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i13__namespace.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i14__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i7__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i18__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i18__namespace.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i18__namespace.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i19__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i15__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i16__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i15__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i7__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i15__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12__namespace.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12__namespace.FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]" }, { type: i12__namespace.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i13__namespace.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i2__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { type: i2__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "builkOptionsFilter": BulkOptionsFilterPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  FsAclRoleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: i12.FsListComponent, descendants: true }], ngImport: i0__namespace, 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\n                matInput\n                placeholder=\"Name\"\n                [(ngModel)]=\"aclRole.name\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n\n            <mat-form-field>\n              <input\n                matInput\n                placeholder=\"Description\"\n                [(ngModel)]=\"aclRole.description\"\n                name=\"description\">\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                  [(ngModel)]=\"aclRole.level\"\n                  (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                Enable\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div fxLayout=\"column\" *ngFor=\"let roleConfig of roleConfigs\">\n              <fs-label-field *ngIf=\"roleConfig.type === 'checkbox'\">\n                <fs-label>{{roleConfig.label}}</fs-label>\n                <mat-checkbox\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\">\n                  Enable\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{roleConfig.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"roleConfig.type === 'select'\">\n                <mat-select\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\"\n                    [required]=\"roleConfig.required\"\n                    [placeholder]=\"roleConfig.label\">\n                  <mat-option\n                      *ngFor=\"let item of roleConfig.values\"\n                      [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                </mat-select>\n                <mat-hint>{{roleConfig.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div fxLayout=\"column\" fxFlex=\"65\" fxFlex.lt-md=\"0\" *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions\">\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <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 \n                    fs-list-group-cell\n                    let-row=\"row\"\n                    let-group=\"group\"\n                    let-groupChildren=\"groupChildren\"\n                    class=\"permission-group\"\n                    align=\"right\">\n                  <ng-container *ngIf=\"!aclRole.allPermissions\">\n                    <fs-menu>\n                      <ng-container *ngFor=\"let access of AclRoleAccesses | builkOptionsFilter: groupChildren\">\n                        <ng-template\n                          fs-menu-item\n                          (click)=\"bulkChange(access.value, groupChildren, group)\">\n                          {{ access.name }}\n                        </ng-template>\n                      </ng-container>\n                    </fs-menu>\n                  </ng-container>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions; else elseAll\">\n                    {{ indexedAccesses[aclRolePermissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <mat-form-field>\n                      <mat-select\n                          [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                          [disabled]=\"!!aclRole.protected\"\n                          required\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%}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6__namespace.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace.FsLabelComponent, selector: "fs-label" }, { type: i7__namespace.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { type: i8__namespace.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i9__namespace.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6__namespace.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i10__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12__namespace.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i13__namespace.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i14__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i7__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i18__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i18__namespace.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i18__namespace.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i19__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i15__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i16__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i15__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i7__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i15__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12__namespace.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12__namespace.FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]" }, { type: i12__namespace.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i13__namespace.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i2__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i2__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "builkOptionsFilter": BulkOptionsFilterPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclRoleComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -827,7 +837,7 @@
       return FsAclPermissionPopoverComponent;
   }());
   FsAclPermissionPopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclPermissionPopoverComponent, deps: [{ token: FsAppAclService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FsAclPermissionPopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0__namespace, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], components: [{ type: i2__namespace$1.FsPopoverComponent, selector: "fs-popover", inputs: ["template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger"] }] });
+  FsAclPermissionPopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0__namespace, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], components: [{ type: i2__namespace$1.FsPopoverComponent, selector: "fs-popover" }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclPermissionPopoverComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -938,7 +948,14 @@
                       },
                       menu: true,
                       label: 'Delete',
-                      show: function (row) { return !!_this.deleteAclRole && row.state !== 'deleted'; },
+                      show: function (row) {
+                          var hideDelete = !!_this.hideDeleteAclRole
+                              ? _this.hideDeleteAclRole(row)
+                              : false;
+                          return !!_this.deleteAclRole
+                              && row.state !== 'deleted'
+                              && !hideDelete;
+                      },
                   },
                   {
                       click: function (data) {
@@ -964,7 +981,7 @@
       return FsAclRolesComponent;
   }());
   FsAclRolesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclRolesComponent, deps: [{ token: FsAppAclService }, { token: i2__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FsAclRolesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", restoreAclRole: "restoreAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", loadRoleConfigs: "loadRoleConfigs", aclLevels: "aclLevels" }, viewQueries: [{ propertyName: "list", predicate: i12.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== 'deleted' else deletedRole\">\n        <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n      </ng-container>\n      <ng-template #deletedRole>\n        {{ row.name }}\n      </ng-template>\n      <div class=\"small\">{{row.description}}</div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], components: [{ type: i12__namespace.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], directives: [{ type: i7__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12__namespace.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12__namespace.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  FsAclRolesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", restoreAclRole: "restoreAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", loadRoleConfigs: "loadRoleConfigs", aclLevels: "aclLevels", hideDeleteAclRole: "hideDeleteAclRole" }, viewQueries: [{ propertyName: "list", predicate: i12.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== 'deleted' else deletedRole\">\n        <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n      </ng-container>\n      <ng-template #deletedRole>\n        {{ row.name }}\n      </ng-template>\n      <div class=\"small\">{{row.description}}</div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], components: [{ type: i12__namespace.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], directives: [{ type: i7__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12__namespace.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12__namespace.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclRolesComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -987,6 +1004,8 @@
                   type: i0.Input
               }], aclLevels: [{
                   type: i0.Input
+              }], hideDeleteAclRole: [{
+                  type: i0.Input
               }], list: [{
                   type: i0.ViewChildren,
                   args: [i12.FsListComponent]
@@ -1012,7 +1031,7 @@
       return FsAclRolePopoverComponent;
   }());
   FsAclRolePopoverComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclRolePopoverComponent, deps: [{ token: FsAppAclService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FsAclRolePopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0__namespace, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], components: [{ type: i2__namespace$1.FsPopoverComponent, selector: "fs-popover", inputs: ["template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger"] }], directives: [{ type: i7__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  FsAclRolePopoverComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0__namespace, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], components: [{ type: i2__namespace$1.FsPopoverComponent, selector: "fs-popover" }], directives: [{ type: i7__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclRolePopoverComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1143,7 +1162,7 @@
       return FsAclEntryComponent;
   }());
   FsAclEntryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclEntryComponent, deps: [{ token: FsAppAclService }, { token: i2__namespace.MatDialogRef }, { token: i3__namespace.FsMessage }, { token: i2.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  FsAclEntryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i6__namespace.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace.FsLabelComponent, selector: "fs-label" }, { type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }, { type: i14__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i2__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { type: i2__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+  FsAclEntryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i6__namespace.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace.FsLabelComponent, selector: "fs-label" }, { type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }, { type: i14__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i2__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i2__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAclEntryComponent, decorators: [{
               type: i0.Component,
               args: [{