@firestitch/app-acl 18.0.4 → 18.0.7

package/fesm2022/firestitch-app-acl.mjs

@@ -1,93 +1,57 @@
-import * as i12 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i11 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i10 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i8 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i7 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Pipe, Component, ChangeDetectionStrategy, ViewChild, Input, QueryList, ViewChildren, EventEmitter, Output, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i13 from '@firestitch/list';
+import { InjectionToken, inject, Injectable, Pipe, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewChild, Input, QueryList, ViewChildren, EventEmitter, Output } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
+import { list } from '@firestitch/common';
+import { ItemType } from '@firestitch/filter';
+import * as i1$1 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
-import * as i2$1 from '@firestitch/popover';
-import { FsPopoverModule } from '@firestitch/popover';
-import * as i14 from '@firestitch/dialog';
-import { FsDialogModule } from '@firestitch/dialog';
-import * as i15 from '@firestitch/form';
+import { Subject, forkJoin, of, Observable } from 'rxjs';
+import { shareReplay, map, takeUntil, tap, filter } from 'rxjs/operators';
+import { MatButton } from '@angular/material/button';
+import { FsMessage } from '@firestitch/message';
+import * as i1 from '@angular/forms';
+import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
+import * as i2 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
-import * as i16 from '@firestitch/label';
+import * as i3 from '@firestitch/dialog';
+import { FsDialogModule } from '@firestitch/dialog';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import * as i4 from '@firestitch/label';
 import { FsLabelModule } from '@firestitch/label';
-import * as i17 from '@firestitch/radiogroup';
+import * as i5 from '@firestitch/radiogroup';
 import { FsRadioGroupModule } from '@firestitch/radiogroup';
-import * as i6$1 from '@firestitch/badge';
-import { FsBadgeModule } from '@firestitch/badge';
-import * as i8$1 from '@firestitch/checkboxgroup';
-import { FsCheckboxGroupModule } from '@firestitch/checkboxgroup';
-import * as i18 from '@firestitch/menu';
+import { MatRadioButton } from '@angular/material/radio';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import * as i7 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
-import { map, takeUntil, tap, filter } from 'rxjs/operators';
-import { ItemType } from '@firestitch/filter';
-import { list } from '@firestitch/common';
-import { ReplaySubject, Subject, forkJoin, of, Observable } from 'rxjs';
-import * as i3 from '@firestitch/message';
-import * as i5 from '@angular/forms';
-import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
-import * as i6 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i9 from '@angular/material/core';
+import * as i1$2 from '@firestitch/popover';
+import { FsPopoverModule } from '@firestitch/popover';
 import { groupBy, sortBy } from 'lodash-es';
-import * as i3$1 from '@firestitch/prompt';
-
-var AclRoleAccess;
-(function (AclRoleAccess) {
-    AclRoleAccess[AclRoleAccess["None"] = 0] = "None";
-    AclRoleAccess[AclRoleAccess["Read"] = 5] = "Read";
-    AclRoleAccess[AclRoleAccess["Write"] = 10] = "Write";
-    AclRoleAccess[AclRoleAccess["Full"] = 15] = "Full";
-})(AclRoleAccess || (AclRoleAccess = {}));
-
-const AclRoleAccesses = [
-    { name: 'None', value: AclRoleAccess.None },
-    { name: 'Read', value: AclRoleAccess.Read },
-    { name: 'Write', value: AclRoleAccess.Write },
-    { name: 'Full', value: AclRoleAccess.Full }
-];
+import { FsPrompt } from '@firestitch/prompt';
+import * as i1$3 from '@firestitch/checkboxgroup';
+import { FsCheckboxGroupModule } from '@firestitch/checkboxgroup';
+import * as i2$1 from '@firestitch/badge';
+import { FsBadgeModule } from '@firestitch/badge';
 
 const FS_APP_ACL_CONFIG = new InjectionToken('fs-app-acl-config');
 
 class FsAppAclService {
-    _appAclConfig;
+    _appAclConfig = inject(FS_APP_ACL_CONFIG);
     _permissions$;
     _levels$;
-    constructor(_appAclConfig) {
-        this._appAclConfig = _appAclConfig;
-    }
     getPermissions() {
         if (!this._permissions$) {
-            this._permissions$ = new ReplaySubject();
-            this._appAclConfig.permissions
-                .subscribe((permissions) => {
-                this._permissions$.next(permissions);
-                this._permissions$.complete();
-            });
+            this._permissions$ = this._appAclConfig.permissions.pipe(shareReplay(1));
         }
         return this._permissions$;
     }
     getLevels() {
         if (!this._levels$) {
-            this._levels$ = new ReplaySubject();
-            this._appAclConfig.levels
-                .subscribe((levels) => {
-                this._levels$.next(levels);
-                this._levels$.complete();
-            });
+            this._levels$ = this._appAclConfig.levels.pipe(shareReplay(1));
         }
         return this._levels$;
     }
@@ -97,7 +61,7 @@ class FsAppAclService {
             return list(data, 'name', 'value');
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppAclService, deps: [{ token: FS_APP_ACL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppAclService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppAclService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppAclService, decorators: [{
@@ -105,10 +69,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_ACL_CONFIG]
-                }] }] });
+        }] });
+
+var AclRoleAccess;
+(function (AclRoleAccess) {
+    AclRoleAccess[AclRoleAccess["None"] = 0] = "None";
+    AclRoleAccess[AclRoleAccess["Read"] = 5] = "Read";
+    AclRoleAccess[AclRoleAccess["Write"] = 10] = "Write";
+    AclRoleAccess[AclRoleAccess["Full"] = 15] = "Full";
+})(AclRoleAccess || (AclRoleAccess = {}));
+
+const AclRoleAccesses = [
+    { name: 'None', value: AclRoleAccess.None },
+    { name: 'Read', value: AclRoleAccess.Read },
+    { name: 'Write', value: AclRoleAccess.Write },
+    { name: 'Full', value: AclRoleAccess.Full }
+];
 
 class BulkOptionsFilterPipe {
     transform(rolesList, children) {
@@ -126,12 +102,13 @@ class BulkOptionsFilterPipe {
         }, (new Set));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BulkOptionsFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: BulkOptionsFilterPipe, name: "builkOptionsFilter" });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: BulkOptionsFilterPipe, isStandalone: true, name: "builkOptionsFilter" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BulkOptionsFilterPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'builkOptionsFilter'
+                    name: 'builkOptionsFilter',
+                    standalone: true
                 }]
         }] });
 
@@ -145,21 +122,22 @@ class AclRolePermissionAvailablePipe {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AclRolePermissionAvailablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: AclRolePermissionAvailablePipe, name: "aclRolePermissionAvailable" });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: AclRolePermissionAvailablePipe, isStandalone: true, name: "aclRolePermissionAvailable" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AclRolePermissionAvailablePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'aclRolePermissionAvailable'
+                    name: 'aclRolePermissionAvailable',
+                    standalone: true
                 }]
         }] });
 
 class FsAclRoleComponent {
-    _data;
-    _appAclService;
-    _dialogRef;
-    _message;
-    _cdRef;
+    _data = inject(MAT_DIALOG_DATA);
+    _appAclService = inject(FsAppAclService);
+    _dialogRef = inject(MatDialogRef);
+    _message = inject(FsMessage);
+    _cdRef = inject(ChangeDetectorRef);
     list;
     submitButton;
     aclRole = null;
@@ -179,13 +157,6 @@ class FsAclRoleComponent {
     loadRoleConfigs;
     disabled;
     _destroy$ = new Subject();
-    constructor(_data, _appAclService, _dialogRef, _message, _cdRef) {
-        this._data = _data;
-        this._appAclService = _appAclService;
-        this._dialogRef = _dialogRef;
-        this._message = _message;
-        this._cdRef = _cdRef;
-    }
     ngOnInit() {
         forkJoin(this.getRole(), this._appAclService.getPermissions())
             .pipe(takeUntil(this._destroy$))
@@ -370,16 +341,37 @@ class FsAclRoleComponent {
             this.aclRolePermissions[permission.value] = AclRoleAccess.None;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRoleComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }, { propertyName: "submitButton", first: true, predicate: ["submit"], descendants: true }], ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>\n        <ng-container *ngIf=\"!disabled\">\n          {{ aclRole.id ? 'Edit' : 'Create' }}\n        </ng-container>\n        <ng-container *ngIf=\"disabled\">\n          View\n        </ng-container>\n        Role\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-row.gap-lg.align-start\">\n          <div class=\"fs-column left-column\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.name\"\n                [disabled]=\"disabled\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Description\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.description\"\n                [disabled]=\"disabled\"\n                name=\"description\">\n            </mat-form-field>\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>\n                Level\n              </fs-label>\n              {{ indexedAclLevels[aclRole.level] }}\n            </fs-label-field>\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                    [(ngModel)]=\"aclRole.level\"\n                    [disabled]=\"disabled\"\n                    (ngModelChange)=\"levelChange()\"\n                    fsFormRequired\n                    label=\"Level\"\n                    orientation=\"vertical\"\n                    name=\"level\">\n                  <mat-radio-button\n                      *ngFor=\"let item of aclLevels\"\n                      [value]=\"item.value\"\n                      [disabled]=\"!!aclRole.protected\">\n                    {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>\n                All Permissions\n              </fs-label>\n              <mat-checkbox\n                  [(ngModel)]=\"aclRole.allPermissions\"\n                  (ngModelChange)=\"allPermissionsChange($event)\"\n                  [disabled]=\"!!aclRole.protected || disabled\"\n                  name=\"allPermissions\">\n                Enable\n              </mat-checkbox>\n            </fs-label-field>\n            <div\n                class=\"fs-column\"\n                *ngFor=\"let roleConfig of roleConfigs\">\n              <fs-label-field *ngIf=\"roleConfig.type === 'checkbox'\">\n                <fs-label>\n                  {{ roleConfig.label }}\n                </fs-label>\n                <mat-checkbox\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [disabled]=\"disabled\"\n                    [name]=\"roleConfig.name\">\n                  Enable\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>\n                    {{ roleConfig.description }}\n                  </mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n              <mat-form-field *ngIf=\"roleConfig.type === 'select'\">\n                <mat-select\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\"\n                    [required]=\"roleConfig.required\"\n                    [disabled]=\"disabled\"\n                    [placeholder]=\"roleConfig.label\">\n                  <mat-option\n                      *ngFor=\"let item of roleConfig.values\"\n                      [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                </mat-select>\n                <mat-hint>\n                  {{ roleConfig.description }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n          <div\n              *ngIf=\"aclRole.level\"\n              [hidden]=\"!levelPermissions.length\"\n              class=\"permissions fs-column\">\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template\n                    fs-list-group-cell\n                    let-row=\"row\"\n                    class=\"permission-group\">\n                  <div class=\"permission-group\">\n                    {{ row.category || 'General' }}\n                  </div>\n                </ng-template>\n                <ng-template\n                    fs-list-cell\n                    let-row=\"row\">\n                  <div class=\"permission\">\n                    {{ row.name }}\n                  </div>\n                  <div class=\"description small\">\n                    {{ row.description }}\n                  </div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column\n                  title=\"Access\"\n                  width=\"1%\"\n                  class=\"access\">\n                <ng-template\n                    fs-list-group-cell\n                    let-row=\"row\"\n                    let-group=\"group\"\n                    let-groupChildren=\"groupChildren\"\n                    class=\"permission-group\"\n                    align=\"right\">\n                  <ng-container *ngIf=\"!aclRole.allPermissions && !disabled\">\n                    <fs-menu>\n                      <ng-container *ngFor=\"let access of AclRoleAccesses | builkOptionsFilter: groupChildren\">\n                        <ng-template\n                            fs-menu-item\n                            (click)=\"bulkChange(access.value, groupChildren, group)\">\n                          {{ access.name }}\n                        </ng-template>\n                      </ng-container>\n                    </fs-menu>\n                  </ng-container>\n                </ng-template>\n                <ng-template\n                    fs-list-cell\n                    let-row=\"permission\"\n                    let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions || disabled; else elseAll\">\n                    {{ indexedAccesses[aclRolePermissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <ng-container *ngIf=\"permission|aclRolePermissionAvailable:aclRolePermissions; else permissionRequires\">\n                      <mat-form-field class=\"form-field-padless\">\n                        <mat-select\n                            [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                            [disabled]=\"!!aclRole.protected\"\n                            required\n                            [name]=\"'access-' + permission.value\"\n                            (ngModelChange)=\"permissionChange()\">\n                          <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                            <mat-option\n                                *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                                [value]=\"access.value\">\n                              {{ access.name }}\n                            </mat-option>\n                          </ng-container>\n                        </mat-select>\n                      </mat-form-field>\n                    </ng-container>\n                    <ng-template #permissionRequires>\n                      Unavailable\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button\n            *ngIf=\"!disabled\"\n            #submit\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n          {{ aclRole.id ? 'Save' : 'Create' }}\n        </button>\n        <button\n            mat-button\n            [mat-dialog-close]=\"null\"\n            type=\"button\">\n          {{ disabled ? 'Done' : 'Cancel' }}\n        </button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>", styles: [".permissions{flex:1}.permissions ::ng-deep .fs-list-row-group{background-color:#e4e4e4;font-size:112%}.permissions ::ng-deep fs-list .access{white-space:nowrap}.permissions ::ng-deep .mat-form-field{width:100px}.permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}.permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}.permissions ::ng-deep fs-radio-group{width:100%}.permissions ::ng-deep fs-label-field{width:100%}.permissions .level{width:100%}.left-column{width:40%;max-width:400px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i13.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i13.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i13.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i13.FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]" }, { kind: "component", type: i14.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i15.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i15.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i15.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i16.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i16.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i16.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "component", type: i17.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { kind: "component", type: i18.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i18.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "pipe", type: BulkOptionsFilterPipe, name: "builkOptionsFilter" }, { kind: "pipe", type: AclRolePermissionAvailablePipe, name: "aclRolePermissionAvailable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsAclRoleComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }, { propertyName: "submitButton", first: true, predicate: ["submit"], descendants: true }], ngImport: i0, template: "<form\n  fsForm\n  [submit]=\"save\">\n  <fs-dialog>\n    @if (aclRole) {\n      <div mat-dialog-title>\n        @if (!disabled) {\n          {{ aclRole.id ? 'Edit' : 'Create' }}\n        }\n        @if (disabled) {\n          View\n        }\n        role\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-row.gap-lg.align-start\">\n          <div class=\"fs-column left-column\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.name\"\n                [disabled]=\"disabled\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Description\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.description\"\n                [disabled]=\"disabled\"\n                name=\"description\">\n            </mat-form-field>\n            @if (aclRole.id || aclLevels.length === 1) {\n              <fs-label-field>\n                <fs-label>\n                  Level\n                </fs-label>\n                {{ indexedAclLevels[aclRole.level] }}\n              </fs-label-field>\n            } @else {\n              <div class=\"level\">\n                <fs-radio-group\n                  [(ngModel)]=\"aclRole.level\"\n                  [disabled]=\"disabled\"\n                  (ngModelChange)=\"levelChange()\"\n                  fsFormRequired\n                  label=\"Level\"\n                  orientation=\"vertical\"\n                  name=\"level\">\n                  @for (item of aclLevels; track item) {\n                    <mat-radio-button\n                      [value]=\"item.value\"\n                      [disabled]=\"!!aclRole.protected\">\n                      {{ item.name }}\n                    </mat-radio-button>\n                  }\n                </fs-radio-group>\n              </div>\n            }\n            @if (levelPermissions.length) {\n              <fs-label-field>\n                <fs-label>\n                  All permissions\n                </fs-label>\n                <mat-checkbox\n                  [(ngModel)]=\"aclRole.allPermissions\"\n                  (ngModelChange)=\"allPermissionsChange($event)\"\n                  [disabled]=\"!!aclRole.protected || disabled\"\n                  name=\"allPermissions\">\n                  Enable\n                </mat-checkbox>\n              </fs-label-field>\n            }\n            @for (roleConfig of roleConfigs; track roleConfig) {\n              <div\n                class=\"fs-column\"\n                >\n                @if (roleConfig.type === 'checkbox') {\n                  <fs-label-field>\n                    <fs-label>\n                      {{ roleConfig.label }}\n                    </fs-label>\n                    <mat-checkbox\n                      [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                      [disabled]=\"disabled\"\n                      [name]=\"roleConfig.name\">\n                      Enable\n                    </mat-checkbox>\n                    <fs-label-message>\n                      <mat-hint>\n                        {{ roleConfig.description }}\n                      </mat-hint>\n                    </fs-label-message>\n                  </fs-label-field>\n                }\n                @if (roleConfig.type === 'select') {\n                  <mat-form-field>\n                    <mat-select\n                      [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                      [name]=\"roleConfig.name\"\n                      [required]=\"roleConfig.required\"\n                      [disabled]=\"disabled\"\n                      [placeholder]=\"roleConfig.label\">\n                      @for (item of roleConfig.values; track item) {\n                        <mat-option\n                          [value]=\"item.value\">\n                          {{ item.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    <mat-hint>\n                      {{ roleConfig.description }}\n                    </mat-hint>\n                  </mat-form-field>\n                }\n              </div>\n            }\n          </div>\n          @if (aclRole.level) {\n            <div\n              [hidden]=\"!levelPermissions.length\"\n              class=\"permissions fs-column\">\n              <fs-list [config]=\"listConfig\">\n                <fs-list-column title=\"Permissions\">\n                  <ng-template\n                    fs-list-group-cell\n                    let-row=\"row\"\n                    class=\"permission-group\">\n                    <div class=\"permission-group\">\n                      {{ row.category || 'General' }}\n                    </div>\n                  </ng-template>\n                  <ng-template\n                    fs-list-cell\n                    let-row=\"row\">\n                    <div class=\"permission\">\n                      {{ row.name }}\n                    </div>\n                    <div class=\"description small\">\n                      {{ row.description }}\n                    </div>\n                  </ng-template>\n                </fs-list-column>\n                <fs-list-column\n                  title=\"Access\"\n                  width=\"1%\"\n                  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                    @if (!aclRole.allPermissions && !disabled) {\n                      <fs-menu>\n                        @for (access of AclRoleAccesses | builkOptionsFilter: groupChildren; track access) {\n                          <ng-template\n                            fs-menu-item\n                            (click)=\"bulkChange(access.value, groupChildren, group)\">\n                            {{ access.name }}\n                          </ng-template>\n                        }\n                      </fs-menu>\n                    }\n                  </ng-template>\n                  <ng-template\n                    fs-list-cell\n                    let-row=\"permission\"\n                    let-permission=\"row\">\n                    @if (aclRole.allPermissions || disabled) {\n                      <span>\n                        {{ indexedAccesses[aclRolePermissions[permission.value]] }}\n                      </span>\n                    } @else {\n                      @if (permission|aclRolePermissionAvailable:aclRolePermissions) {\n                        <mat-form-field class=\"form-field-padless\">\n                          <mat-select\n                            [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                            [disabled]=\"!!aclRole.protected\"\n                            required\n                            [name]=\"'access-' + permission.value\"\n                            (ngModelChange)=\"permissionChange()\">\n                            @for (access of AclRoleAccesses; track access) {\n                              @if (access.value === 0 || permission.accesses.indexOf(access.value) !== -1) {\n                                <mat-option\n                                  [value]=\"access.value\">\n                                  {{ access.name }}\n                                </mat-option>\n                              }\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      } @else {\n                        Unavailable\n                      }\n                    }\n                  </ng-template>\n                </fs-list-column>\n              </fs-list>\n            </div>\n          }\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        @if (!disabled) {\n          <button\n            #submit\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n            {{ aclRole.id ? 'Save' : 'Create' }}\n          </button>\n        }\n        <button\n          mat-button\n          [mat-dialog-close]=\"null\"\n          type=\"button\">\n          {{ disabled ? 'Done' : 'Cancel' }}\n        </button>\n      </mat-dialog-actions>\n    }\n  </fs-dialog>\n</form>", styles: [".permissions{flex:1}.permissions ::ng-deep .fs-list-row-group{background-color:#e4e4e4;font-size:112%}.permissions ::ng-deep fs-list .access{white-space:nowrap}.permissions ::ng-deep .mat-form-field{width:100px}.permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}.permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}.permissions ::ng-deep fs-radio-group{width:100%}.permissions ::ng-deep fs-label-field{width:100%}.permissions .level{width:100%}.left-column{width:40%;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i4.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "ngmodule", type: FsRadioGroupModule }, { kind: "component", type: i5.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$1.FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]" }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i7.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i7.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: BulkOptionsFilterPipe, name: "builkOptionsFilter" }, { kind: "pipe", type: AclRolePermissionAvailablePipe, name: "aclRolePermissionAvailable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRoleComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n    fsForm\n    [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>\n        <ng-container *ngIf=\"!disabled\">\n          {{ aclRole.id ? 'Edit' : 'Create' }}\n        </ng-container>\n        <ng-container *ngIf=\"disabled\">\n          View\n        </ng-container>\n        Role\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-row.gap-lg.align-start\">\n          <div class=\"fs-column left-column\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.name\"\n                [disabled]=\"disabled\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Description\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.description\"\n                [disabled]=\"disabled\"\n                name=\"description\">\n            </mat-form-field>\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>\n                Level\n              </fs-label>\n              {{ indexedAclLevels[aclRole.level] }}\n            </fs-label-field>\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                    [(ngModel)]=\"aclRole.level\"\n                    [disabled]=\"disabled\"\n                    (ngModelChange)=\"levelChange()\"\n                    fsFormRequired\n                    label=\"Level\"\n                    orientation=\"vertical\"\n                    name=\"level\">\n                  <mat-radio-button\n                      *ngFor=\"let item of aclLevels\"\n                      [value]=\"item.value\"\n                      [disabled]=\"!!aclRole.protected\">\n                    {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>\n                All Permissions\n              </fs-label>\n              <mat-checkbox\n                  [(ngModel)]=\"aclRole.allPermissions\"\n                  (ngModelChange)=\"allPermissionsChange($event)\"\n                  [disabled]=\"!!aclRole.protected || disabled\"\n                  name=\"allPermissions\">\n                Enable\n              </mat-checkbox>\n            </fs-label-field>\n            <div\n                class=\"fs-column\"\n                *ngFor=\"let roleConfig of roleConfigs\">\n              <fs-label-field *ngIf=\"roleConfig.type === 'checkbox'\">\n                <fs-label>\n                  {{ roleConfig.label }}\n                </fs-label>\n                <mat-checkbox\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [disabled]=\"disabled\"\n                    [name]=\"roleConfig.name\">\n                  Enable\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>\n                    {{ roleConfig.description }}\n                  </mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n              <mat-form-field *ngIf=\"roleConfig.type === 'select'\">\n                <mat-select\n                    [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                    [name]=\"roleConfig.name\"\n                    [required]=\"roleConfig.required\"\n                    [disabled]=\"disabled\"\n                    [placeholder]=\"roleConfig.label\">\n                  <mat-option\n                      *ngFor=\"let item of roleConfig.values\"\n                      [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                </mat-select>\n                <mat-hint>\n                  {{ roleConfig.description }}\n                </mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n          <div\n              *ngIf=\"aclRole.level\"\n              [hidden]=\"!levelPermissions.length\"\n              class=\"permissions fs-column\">\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template\n                    fs-list-group-cell\n                    let-row=\"row\"\n                    class=\"permission-group\">\n                  <div class=\"permission-group\">\n                    {{ row.category || 'General' }}\n                  </div>\n                </ng-template>\n                <ng-template\n                    fs-list-cell\n                    let-row=\"row\">\n                  <div class=\"permission\">\n                    {{ row.name }}\n                  </div>\n                  <div class=\"description small\">\n                    {{ row.description }}\n                  </div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column\n                  title=\"Access\"\n                  width=\"1%\"\n                  class=\"access\">\n                <ng-template\n                    fs-list-group-cell\n                    let-row=\"row\"\n                    let-group=\"group\"\n                    let-groupChildren=\"groupChildren\"\n                    class=\"permission-group\"\n                    align=\"right\">\n                  <ng-container *ngIf=\"!aclRole.allPermissions && !disabled\">\n                    <fs-menu>\n                      <ng-container *ngFor=\"let access of AclRoleAccesses | builkOptionsFilter: groupChildren\">\n                        <ng-template\n                            fs-menu-item\n                            (click)=\"bulkChange(access.value, groupChildren, group)\">\n                          {{ access.name }}\n                        </ng-template>\n                      </ng-container>\n                    </fs-menu>\n                  </ng-container>\n                </ng-template>\n                <ng-template\n                    fs-list-cell\n                    let-row=\"permission\"\n                    let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions || disabled; else elseAll\">\n                    {{ indexedAccesses[aclRolePermissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <ng-container *ngIf=\"permission|aclRolePermissionAvailable:aclRolePermissions; else permissionRequires\">\n                      <mat-form-field class=\"form-field-padless\">\n                        <mat-select\n                            [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                            [disabled]=\"!!aclRole.protected\"\n                            required\n                            [name]=\"'access-' + permission.value\"\n                            (ngModelChange)=\"permissionChange()\">\n                          <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                            <mat-option\n                                *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                                [value]=\"access.value\">\n                              {{ access.name }}\n                            </mat-option>\n                          </ng-container>\n                        </mat-select>\n                      </mat-form-field>\n                    </ng-container>\n                    <ng-template #permissionRequires>\n                      Unavailable\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button\n            *ngIf=\"!disabled\"\n            #submit\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n          {{ aclRole.id ? 'Save' : 'Create' }}\n        </button>\n        <button\n            mat-button\n            [mat-dialog-close]=\"null\"\n            type=\"button\">\n          {{ disabled ? 'Done' : 'Cancel' }}\n        </button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>", styles: [".permissions{flex:1}.permissions ::ng-deep .fs-list-row-group{background-color:#e4e4e4;font-size:112%}.permissions ::ng-deep fs-list .access{white-space:nowrap}.permissions ::ng-deep .mat-form-field{width:100px}.permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}.permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}.permissions ::ng-deep fs-radio-group{width:100%}.permissions ::ng-deep fs-label-field{width:100%}.permissions .level{width:100%}.left-column{width:40%;max-width:400px}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: FsAppAclService }, { type: i2.MatDialogRef }, { type: i3.FsMessage }, { type: i0.ChangeDetectorRef }], propDecorators: { list: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        FsLabelModule,
+                        FsRadioGroupModule,
+                        MatRadioButton,
+                        MatCheckbox,
+                        MatHint,
+                        MatSelect,
+                        MatOption,
+                        FsListModule,
+                        FsMenuModule,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                        BulkOptionsFilterPipe,
+                        AclRolePermissionAvailablePipe,
+                    ], template: "<form\n  fsForm\n  [submit]=\"save\">\n  <fs-dialog>\n    @if (aclRole) {\n      <div mat-dialog-title>\n        @if (!disabled) {\n          {{ aclRole.id ? 'Edit' : 'Create' }}\n        }\n        @if (disabled) {\n          View\n        }\n        role\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-row.gap-lg.align-start\">\n          <div class=\"fs-column left-column\">\n            <mat-form-field>\n              <mat-label>\n                Name\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.name\"\n                [disabled]=\"disabled\"\n                name=\"name\"\n                fsFormRequired>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>\n                Description\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"aclRole.description\"\n                [disabled]=\"disabled\"\n                name=\"description\">\n            </mat-form-field>\n            @if (aclRole.id || aclLevels.length === 1) {\n              <fs-label-field>\n                <fs-label>\n                  Level\n                </fs-label>\n                {{ indexedAclLevels[aclRole.level] }}\n              </fs-label-field>\n            } @else {\n              <div class=\"level\">\n                <fs-radio-group\n                  [(ngModel)]=\"aclRole.level\"\n                  [disabled]=\"disabled\"\n                  (ngModelChange)=\"levelChange()\"\n                  fsFormRequired\n                  label=\"Level\"\n                  orientation=\"vertical\"\n                  name=\"level\">\n                  @for (item of aclLevels; track item) {\n                    <mat-radio-button\n                      [value]=\"item.value\"\n                      [disabled]=\"!!aclRole.protected\">\n                      {{ item.name }}\n                    </mat-radio-button>\n                  }\n                </fs-radio-group>\n              </div>\n            }\n            @if (levelPermissions.length) {\n              <fs-label-field>\n                <fs-label>\n                  All permissions\n                </fs-label>\n                <mat-checkbox\n                  [(ngModel)]=\"aclRole.allPermissions\"\n                  (ngModelChange)=\"allPermissionsChange($event)\"\n                  [disabled]=\"!!aclRole.protected || disabled\"\n                  name=\"allPermissions\">\n                  Enable\n                </mat-checkbox>\n              </fs-label-field>\n            }\n            @for (roleConfig of roleConfigs; track roleConfig) {\n              <div\n                class=\"fs-column\"\n                >\n                @if (roleConfig.type === 'checkbox') {\n                  <fs-label-field>\n                    <fs-label>\n                      {{ roleConfig.label }}\n                    </fs-label>\n                    <mat-checkbox\n                      [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                      [disabled]=\"disabled\"\n                      [name]=\"roleConfig.name\">\n                      Enable\n                    </mat-checkbox>\n                    <fs-label-message>\n                      <mat-hint>\n                        {{ roleConfig.description }}\n                      </mat-hint>\n                    </fs-label-message>\n                  </fs-label-field>\n                }\n                @if (roleConfig.type === 'select') {\n                  <mat-form-field>\n                    <mat-select\n                      [(ngModel)]=\"aclRoleConfigValues[roleConfig.name]\"\n                      [name]=\"roleConfig.name\"\n                      [required]=\"roleConfig.required\"\n                      [disabled]=\"disabled\"\n                      [placeholder]=\"roleConfig.label\">\n                      @for (item of roleConfig.values; track item) {\n                        <mat-option\n                          [value]=\"item.value\">\n                          {{ item.name }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                    <mat-hint>\n                      {{ roleConfig.description }}\n                    </mat-hint>\n                  </mat-form-field>\n                }\n              </div>\n            }\n          </div>\n          @if (aclRole.level) {\n            <div\n              [hidden]=\"!levelPermissions.length\"\n              class=\"permissions fs-column\">\n              <fs-list [config]=\"listConfig\">\n                <fs-list-column title=\"Permissions\">\n                  <ng-template\n                    fs-list-group-cell\n                    let-row=\"row\"\n                    class=\"permission-group\">\n                    <div class=\"permission-group\">\n                      {{ row.category || 'General' }}\n                    </div>\n                  </ng-template>\n                  <ng-template\n                    fs-list-cell\n                    let-row=\"row\">\n                    <div class=\"permission\">\n                      {{ row.name }}\n                    </div>\n                    <div class=\"description small\">\n                      {{ row.description }}\n                    </div>\n                  </ng-template>\n                </fs-list-column>\n                <fs-list-column\n                  title=\"Access\"\n                  width=\"1%\"\n                  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                    @if (!aclRole.allPermissions && !disabled) {\n                      <fs-menu>\n                        @for (access of AclRoleAccesses | builkOptionsFilter: groupChildren; track access) {\n                          <ng-template\n                            fs-menu-item\n                            (click)=\"bulkChange(access.value, groupChildren, group)\">\n                            {{ access.name }}\n                          </ng-template>\n                        }\n                      </fs-menu>\n                    }\n                  </ng-template>\n                  <ng-template\n                    fs-list-cell\n                    let-row=\"permission\"\n                    let-permission=\"row\">\n                    @if (aclRole.allPermissions || disabled) {\n                      <span>\n                        {{ indexedAccesses[aclRolePermissions[permission.value]] }}\n                      </span>\n                    } @else {\n                      @if (permission|aclRolePermissionAvailable:aclRolePermissions) {\n                        <mat-form-field class=\"form-field-padless\">\n                          <mat-select\n                            [(ngModel)]=\"aclRolePermissions[permission.value]\"\n                            [disabled]=\"!!aclRole.protected\"\n                            required\n                            [name]=\"'access-' + permission.value\"\n                            (ngModelChange)=\"permissionChange()\">\n                            @for (access of AclRoleAccesses; track access) {\n                              @if (access.value === 0 || permission.accesses.indexOf(access.value) !== -1) {\n                                <mat-option\n                                  [value]=\"access.value\">\n                                  {{ access.name }}\n                                </mat-option>\n                              }\n                            }\n                          </mat-select>\n                        </mat-form-field>\n                      } @else {\n                        Unavailable\n                      }\n                    }\n                  </ng-template>\n                </fs-list-column>\n              </fs-list>\n            </div>\n          }\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        @if (!disabled) {\n          <button\n            #submit\n            mat-button\n            type=\"submit\"\n            color=\"primary\">\n            {{ aclRole.id ? 'Save' : 'Create' }}\n          </button>\n        }\n        <button\n          mat-button\n          [mat-dialog-close]=\"null\"\n          type=\"button\">\n          {{ disabled ? 'Done' : 'Cancel' }}\n        </button>\n      </mat-dialog-actions>\n    }\n  </fs-dialog>\n</form>", styles: [".permissions{flex:1}.permissions ::ng-deep .fs-list-row-group{background-color:#e4e4e4;font-size:112%}.permissions ::ng-deep fs-list .access{white-space:nowrap}.permissions ::ng-deep .mat-form-field{width:100px}.permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}.permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}.permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}.permissions ::ng-deep fs-radio-group{width:100%}.permissions ::ng-deep fs-label-field{width:100%}.permissions .level{width:100%}.left-column{width:40%;max-width:400px}\n"] }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }], submitButton: [{
@@ -388,12 +380,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsAclPermissionPopoverComponent {
-    _appAclService;
+    _appAclService = inject(FsAppAclService);
     permission;
     description;
-    constructor(_appAclService) {
-        this._appAclService = _appAclService;
-    }
     ngOnInit() {
         this._appAclService.getPermissions()
             .subscribe(permissions => {
@@ -404,19 +393,19 @@ class FsAclPermissionPopoverComponent {
             })[0];
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclPermissionPopoverComponent, deps: [{ token: FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2$1.FsPopoverComponent, selector: "fs-popover" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclPermissionPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsAclPermissionPopoverComponent, isStandalone: true, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FsPopoverModule }, { kind: "component", type: i1$2.FsPopoverComponent, selector: "fs-popover" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclPermissionPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'acl-permission-popover', template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: FsAppAclService }], propDecorators: { permission: [{
+            args: [{ selector: 'acl-permission-popover', standalone: true, imports: [FsPopoverModule], 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"] }]
+        }], propDecorators: { permission: [{
                 type: Input
             }] } });
 
 class FsAclRolesComponent {
-    _appAclService;
-    _dialog;
+    _appAclService = inject(FsAppAclService);
+    _dialog = inject(MatDialog);
     deleteAclRole;
     restoreAclRole;
     saveAclRole;
@@ -430,12 +419,8 @@ class FsAclRolesComponent {
     permissions;
     indexedAclRoleLevels = {};
     _destroy$ = new Subject();
-    constructor(_appAclService, _dialog) {
-        this._appAclService = _appAclService;
-        this._dialog = _dialog;
-    }
     ngOnInit() {
-        new Observable(observer => {
+        new Observable((observer) => {
             if (this.aclLevels.length) {
                 observer.next(this.aclLevels);
                 observer.complete();
@@ -494,7 +479,7 @@ class FsAclRolesComponent {
                     label: 'Level',
                     type: ItemType.Select,
                     values: this.aclLevels,
-                    hide: this.aclLevels.length <= 1
+                    hide: this.aclLevels.length <= 1,
                 },
                 {
                     name: 'state',
@@ -524,7 +509,7 @@ class FsAclRolesComponent {
                     menu: true,
                     label: 'Delete',
                     show: (row) => {
-                        const hideDelete = !!this.disabledAclRole
+                        const hideDelete = this.disabledAclRole
                             ? this.disabledAclRole(row)
                             : false;
                         return !!this.deleteAclRole
@@ -553,13 +538,13 @@ class FsAclRolesComponent {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRolesComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", restoreAclRole: "restoreAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", loadRoleConfigs: "loadRoleConfigs", aclLevels: "aclLevels", disabledAclRole: "disabledAclRole" }, viewQueries: [{ propertyName: "list", predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== 'deleted' else deletedRole\">\n        <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n      </ng-container>\n      <ng-template #deletedRole>\n        {{ row.name }}\n      </ng-template>\n      <div class=\"small\">{{row.description}}</div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i13.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i13.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i13.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsAclRolesComponent, isStandalone: true, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", restoreAclRole: "restoreAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", loadRoleConfigs: "loadRoleConfigs", aclLevels: "aclLevels", disabledAclRole: "disabledAclRole" }, viewQueries: [{ propertyName: "list", predicate: FsListComponent, descendants: true }], ngImport: i0, template: "@if (listConfig) {\n  <fs-list [config]=\"listConfig\">\n    <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n      <ng-template fs-list-cell let-row=\"row\">\n        @if (row.state !== 'deleted') {\n          <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n        } @else {\n          {{ row.name }}\n        }\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          @for (permission of row.permissions; track permission) {\n            @if (permission.access) {\n              <span class=\"permission\">\n                <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n              </span>\n            }\n          }\n        </div>\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n}\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRolesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-acl-roles', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== 'deleted' else deletedRole\">\n        <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n      </ng-container>\n      <ng-template #deletedRole>\n        {{ row.name }}\n      </ng-template>\n      <div class=\"small\">{{row.description}}</div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"] }]
-        }], ctorParameters: () => [{ type: FsAppAclService }, { type: i2.MatDialog }], propDecorators: { deleteAclRole: [{
+            args: [{ selector: 'fs-acl-roles', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsListModule, FsAclPermissionPopoverComponent], template: "@if (listConfig) {\n  <fs-list [config]=\"listConfig\">\n    <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n      <ng-template fs-list-cell let-row=\"row\">\n        @if (row.state !== 'deleted') {\n          <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n        } @else {\n          {{ row.name }}\n        }\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          @for (permission of row.permissions; track permission) {\n            @if (permission.access) {\n              <span class=\"permission\">\n                <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n              </span>\n            }\n          }\n        </div>\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n}\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"] }]
+        }], propDecorators: { deleteAclRole: [{
                 type: Input
             }], restoreAclRole: [{
                 type: Input
@@ -580,37 +565,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: [FsListComponent]
             }] } });
 
-class FsAclRolePopoverComponent {
-    _appAclService;
-    aclRole;
-    objectName;
-    permissions = [];
-    constructor(_appAclService) {
-        this._appAclService = _appAclService;
-    }
-    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;
-                });
-            });
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRolePopoverComponent, deps: [{ token: FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FsPopoverComponent, selector: "fs-popover" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRolePopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-acl-role-popover', template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: FsAppAclService }], propDecorators: { aclRole: [{
-                type: Input
-            }], objectName: [{
-                type: Input
-            }] } });
-
 class FsAclObjectRolesComponent {
     aclRoles = [];
     required = false;
@@ -627,11 +581,11 @@ class FsAclObjectRolesComponent {
         this.change.emit(this.aclObjectRoles);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclObjectRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: { aclRoles: "aclRoles", required: "required", multiple: "multiple", disabled: "disabled", aclObjectRoles: "aclObjectRoles", rolesLabel: "rolesLabel", levelLabel: "levelLabel" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"$any(aclRole)\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i15.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i15.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: i8$1.FsCheckboxGroupComponent, selector: "fs-checkbox-group", inputs: ["orientation", "position", "label", "disabled", "compareWith"], outputs: ["change"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsAclObjectRolesComponent, isStandalone: true, selector: "fs-acl-object-roles", inputs: { aclRoles: "aclRoles", required: "required", multiple: "multiple", disabled: "disabled", aclObjectRoles: "aclObjectRoles", rolesLabel: "rolesLabel", levelLabel: "levelLabel" }, outputs: { change: "change" }, ngImport: i0, template: "@if (!multiple) {\n  @for (aclObjectRole of aclObjectRoles; track aclObjectRole) {\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      @for (aclRole of aclRoles; track aclRole) {\n        <mat-checkbox [disabled]=\"disabled\" [value]=\"$any(aclRole)\">\n          {{ aclRole.name }}\n        </mat-checkbox>\n      }\n    </fs-checkbox-group>\n  }\n}\n\n@if (multiple) {\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    @for (aclObjectRole of aclObjectRoles; track aclObjectRole) {\n      <tr>\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              @for (aclRole of aclRoles; track aclRole) {\n                <mat-option [value]=\"aclRole\">\n                  {{ aclRole.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </td>\n      </tr>\n    }\n  </table>\n}\n", styles: ["table tr td:first-child{padding-right:15px}\n"], dependencies: [{ kind: "ngmodule", type: FsCheckboxGroupModule }, { kind: "component", type: i1$3.FsCheckboxGroupComponent, selector: "fs-checkbox-group", inputs: ["orientation", "position", "label", "disabled", "compareWith"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclObjectRolesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-acl-object-roles', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"$any(aclRole)\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"] }]
+            args: [{ selector: 'fs-acl-object-roles', viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [FsCheckboxGroupModule, FormsModule, FsFormModule, MatCheckbox, MatFormField, MatSelect, MatOption], template: "@if (!multiple) {\n  @for (aclObjectRole of aclObjectRoles; track aclObjectRole) {\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      @for (aclRole of aclRoles; track aclRole) {\n        <mat-checkbox [disabled]=\"disabled\" [value]=\"$any(aclRole)\">\n          {{ aclRole.name }}\n        </mat-checkbox>\n      }\n    </fs-checkbox-group>\n  }\n}\n\n@if (multiple) {\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    @for (aclObjectRole of aclObjectRoles; track aclObjectRole) {\n      <tr>\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              @for (aclRole of aclRoles; track aclRole) {\n                <mat-option [value]=\"aclRole\">\n                  {{ aclRole.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        </td>\n      </tr>\n    }\n  </table>\n}\n", styles: ["table tr td:first-child{padding-right:15px}\n"] }]
         }], propDecorators: { aclRoles: [{
                 type: Input
             }], required: [{
@@ -651,10 +605,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsAclEntryComponent {
-    _appAclService;
-    _dialogRef;
-    _message;
-    _data;
     aclRoles = [];
     aclObjectEntry;
     aclObjectRole;
@@ -663,11 +613,12 @@ class FsAclEntryComponent {
     titleEdit = 'Edit Roles';
     titleAdd = 'Assign Roles';
     required = true;
-    constructor(_appAclService, _dialogRef, _message, _data) {
-        this._appAclService = _appAclService;
-        this._dialogRef = _dialogRef;
-        this._message = _message;
-        this._data = _data;
+    _appAclService = inject(FsAppAclService);
+    _dialogRef = inject(MatDialogRef);
+    _message = inject(FsMessage);
+    _data = inject(MAT_DIALOG_DATA);
+    constructor() {
+        const _data = this._data;
         this.aclObjectEntry = { ..._data.aclObjectEntry };
         this.required = _data.required ?? true;
         if (_data.titleEdit) {
@@ -696,12 +647,12 @@ class FsAclEntryComponent {
     }
     aclObjectRoleChange(aclObjectRoles) {
         this.aclEntries = aclObjectRoles.reduce((aclEntries, aclObjectRole) => {
-            aclObjectRole.aclRoles.forEach(aclRole => {
+            aclObjectRole.aclRoles.forEach((aclRole) => {
                 aclEntries.push({
                     aclRoleId: aclRole.id,
                     aclRole: aclRole,
                     objectId: aclObjectRole.object ? aclObjectRole.object.id : null,
-                    object: aclObjectRole.object || null
+                    object: aclObjectRole.object || null,
                 });
             });
             return aclEntries;
@@ -721,21 +672,58 @@ class FsAclEntryComponent {
     close(data = null) {
         this._dialogRef.close(data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclEntryComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i10.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i14.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i15.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i16.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i16.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsAclEntryComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      @if (aclObjectRole) {\n        <div>\n          @if (aclObjectEntry.object) {\n            <fs-label-field>\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      }\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i2.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i4.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i4.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclEntryComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"] }]
-        }], ctorParameters: () => [{ type: FsAppAclService }, { type: i2.MatDialogRef }, { type: i3.FsMessage }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+            args: [{ standalone: true, imports: [
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        FsLabelModule,
+                        FsAclObjectRolesComponent,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      @if (aclObjectRole) {\n        <div>\n          @if (aclObjectEntry.object) {\n            <fs-label-field>\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      }\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class FsAclRolePopoverComponent {
+    _appAclService = inject(FsAppAclService);
+    aclRole;
+    objectName;
+    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;
+                });
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRolePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsAclRolePopoverComponent, isStandalone: true, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}@if (objectName) {\n    <span>: {{objectName}}</span>\n  }</div>\n\n  @if (permissions.length) {\n    @for (permission of permissions; track permission) {\n      <div class=\"permission\">\n        <div>{{permission.name}}</div>\n        <div class=\"small\">{{permission.description}}</div>\n      </div>\n    }\n  } @else {\n    None\n  }\n\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FsPopoverModule }, { kind: "component", type: i1$2.FsPopoverComponent, selector: "fs-popover" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclRolePopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-acl-role-popover', standalone: true, imports: [FsPopoverModule], 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}}@if (objectName) {\n    <span>: {{objectName}}</span>\n  }</div>\n\n  @if (permissions.length) {\n    @for (permission of permissions; track permission) {\n      <div class=\"permission\">\n        <div>{{permission.name}}</div>\n        <div class=\"small\">{{permission.description}}</div>\n      </div>\n    }\n  } @else {\n    None\n  }\n\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"] }]
+        }], propDecorators: { aclRole: [{
+                type: Input
+            }], objectName: [{
+                type: Input
+            }] } });
 
 class FsAclEntriesComponent {
-    _appAclService;
-    _dialog;
-    _confirm;
+    _appAclService = inject(FsAppAclService);
+    _dialog = inject(MatDialog);
+    _confirm = inject(FsPrompt);
     loadAclEntries;
     loadAclRoles;
     saveAclObjectEntry;
@@ -747,11 +735,6 @@ class FsAclEntriesComponent {
     aclEntriesConfig = null;
     permissions = [];
     _destroy$ = new Subject();
-    constructor(_appAclService, _dialog, _confirm) {
-        this._appAclService = _appAclService;
-        this._dialog = _dialog;
-        this._confirm = _confirm;
-    }
     ngOnInit() {
         this._appAclService.getPermissions()
             .subscribe(response => {
@@ -872,13 +855,13 @@ class FsAclEntriesComponent {
     reload() {
         this.aclEntriesList.reload();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclEntriesComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialog }, { token: i3$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsAclEntriesComponent, selector: "fs-acl-entries", inputs: { loadAclEntries: "loadAclEntries", loadAclRoles: "loadAclRoles", saveAclObjectEntry: "saveAclObjectEntry", environmentShow: "environmentShow", environmentLabel: "environmentLabel", environmentKey: "environmentKey", actions: "actions" }, viewQueries: [{ propertyName: "aclEntriesList", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Context\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <div\n          *ngIf=\"row.object; else elseObject\"\n          class=\"fs-row.gap-sm\">\n        <fs-badge\n          *ngIf=\"row.object.imageUrl\"\n          shape=\"circle\"\n          image=\"{{ row.object.imageUrl }}\">\n        </fs-badge>\n        <span>\n          <div>\n            <small>\n              {{ row.object.className }}\n            </small>\n          </div>\n          <a (click)=\"update(row)\">\n            {{ row.object.name }}\n          </a>\n        </span>\n      </div>\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">\n          App\n        </a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>\n      {{ environmentLabel }}\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.environment?.name }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Roles\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <div class=\"fs-column\">\n        <div\n            div\n            *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover\n                  [aclRole]=\"aclEntry.aclRole\"\n                  objectName=\"App\">\n                {{ aclEntry.aclRole.name }}\n              </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\">\n                  {{ aclEntry.aclRole.name }}\n                </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>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i13.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i13.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i13.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i13.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i6$1.FsBadgeComponent, selector: "fs-badge", inputs: ["color", "text", "tooltip", "size", "shape", "image", "icon", "iconSize", "iconSizePercent", "iconColor", "backgroundSize"] }, { kind: "component", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: ["aclRole", "objectName"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclEntriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsAclEntriesComponent, isStandalone: true, selector: "fs-acl-entries", inputs: { loadAclEntries: "loadAclEntries", loadAclRoles: "loadAclRoles", saveAclObjectEntry: "saveAclObjectEntry", environmentShow: "environmentShow", environmentLabel: "environmentLabel", environmentKey: "environmentKey", actions: "actions" }, viewQueries: [{ propertyName: "aclEntriesList", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Context\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.object) {\n        <div\n          class=\"fs-row.gap-sm\">\n          @if (row.object.imageUrl) {\n            <fs-badge\n              shape=\"circle\"\n              image=\"{{ row.object.imageUrl }}\">\n            </fs-badge>\n          }\n          <span>\n            <div>\n              <small>\n                {{ row.object.className }}\n              </small>\n            </div>\n            <a (click)=\"update(row)\">\n              {{ row.object.name }}\n            </a>\n          </span>\n        </div>\n      } @else {\n        <a (click)=\"update(row)\">\n          App\n        </a>\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>\n      {{ environmentLabel }}\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.environment?.name }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Roles\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <div class=\"fs-column\">\n        @for (aclEntry of row.aclEntries; track aclEntry) {\n          <div\n            div\n            >\n            @switch (row.level) {\n              @case ('app') {\n                <fs-acl-role-popover\n                  [aclRole]=\"aclEntry.aclRole\"\n                  objectName=\"App\">\n                  {{ aclEntry.aclRole.name }}\n                </fs-acl-role-popover>\n              }\n              @default {\n                @if (row.object) {\n                  <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">\n                    {{ aclEntry.aclRole.name }}\n                  </fs-acl-role-popover>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [""], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsBadgeModule }, { kind: "component", type: i2$1.FsBadgeComponent, selector: "fs-badge", inputs: ["color", "text", "tooltip", "size", "shape", "image", "icon", "iconSize", "iconSizePercent", "iconColor", "backgroundSize"] }, { kind: "component", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: ["aclRole", "objectName"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAclEntriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-acl-entries', template: "<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Context\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <div\n          *ngIf=\"row.object; else elseObject\"\n          class=\"fs-row.gap-sm\">\n        <fs-badge\n          *ngIf=\"row.object.imageUrl\"\n          shape=\"circle\"\n          image=\"{{ row.object.imageUrl }}\">\n        </fs-badge>\n        <span>\n          <div>\n            <small>\n              {{ row.object.className }}\n            </small>\n          </div>\n          <a (click)=\"update(row)\">\n            {{ row.object.name }}\n          </a>\n        </span>\n      </div>\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">\n          App\n        </a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>\n      {{ environmentLabel }}\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.environment?.name }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Roles\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <div class=\"fs-column\">\n        <div\n            div\n            *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover\n                  [aclRole]=\"aclEntry.aclRole\"\n                  objectName=\"App\">\n                {{ aclEntry.aclRole.name }}\n              </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\">\n                  {{ aclEntry.aclRole.name }}\n                </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>" }]
-        }], ctorParameters: () => [{ type: FsAppAclService }, { type: i2.MatDialog }, { type: i3$1.FsPrompt }], propDecorators: { loadAclEntries: [{
+            args: [{ selector: 'fs-acl-entries', standalone: true, imports: [FsListModule, FsBadgeModule, FsAclRolePopoverComponent], template: "<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Context\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.object) {\n        <div\n          class=\"fs-row.gap-sm\">\n          @if (row.object.imageUrl) {\n            <fs-badge\n              shape=\"circle\"\n              image=\"{{ row.object.imageUrl }}\">\n            </fs-badge>\n          }\n          <span>\n            <div>\n              <small>\n                {{ row.object.className }}\n              </small>\n            </div>\n            <a (click)=\"update(row)\">\n              {{ row.object.name }}\n            </a>\n          </span>\n        </div>\n      } @else {\n        <a (click)=\"update(row)\">\n          App\n        </a>\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>\n      {{ environmentLabel }}\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.environment?.name }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Roles\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <div class=\"fs-column\">\n        @for (aclEntry of row.aclEntries; track aclEntry) {\n          <div\n            div\n            >\n            @switch (row.level) {\n              @case ('app') {\n                <fs-acl-role-popover\n                  [aclRole]=\"aclEntry.aclRole\"\n                  objectName=\"App\">\n                  {{ aclEntry.aclRole.name }}\n                </fs-acl-role-popover>\n              }\n              @default {\n                @if (row.object) {\n                  <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">\n                    {{ aclEntry.aclRole.name }}\n                  </fs-acl-role-popover>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
+        }], propDecorators: { loadAclEntries: [{
                 type: Input
             }], loadAclRoles: [{
                 type: Input
@@ -897,108 +880,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: [FsListComponent]
             }] } });
 
-class FsAppAclModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppAclModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsAppAclModule, declarations: [FsAclRolesComponent,
-            FsAclPermissionPopoverComponent,
-            FsAclRoleComponent,
-            FsAclEntriesComponent,
-            FsAclRolePopoverComponent,
-            FsAclObjectRolesComponent,
-            FsAclEntryComponent,
-            BulkOptionsFilterPipe,
-            AclRolePermissionAvailablePipe], imports: [CommonModule,
-            FormsModule,
-            MatDialogModule,
-            MatFormFieldModule,
-            MatCheckboxModule,
-            MatSelectModule,
-            MatButtonModule,
-            MatRadioModule,
-            MatInputModule,
-            FsListModule,
-            FsPopoverModule,
-            FsDialogModule,
-            FsFormModule,
-            FsLabelModule,
-            FsRadioGroupModule,
-            FsBadgeModule,
-            FsCheckboxGroupModule,
-            FsMenuModule], exports: [FsAclRolesComponent,
-            FsAclPermissionPopoverComponent,
-            FsAclRoleComponent,
-            FsAclEntriesComponent,
-            FsAclRolePopoverComponent,
-            FsAclObjectRolesComponent,
-            FsAclEntryComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppAclModule, imports: [CommonModule,
-            FormsModule,
-            MatDialogModule,
-            MatFormFieldModule,
-            MatCheckboxModule,
-            MatSelectModule,
-            MatButtonModule,
-            MatRadioModule,
-            MatInputModule,
-            FsListModule,
-            FsPopoverModule,
-            FsDialogModule,
-            FsFormModule,
-            FsLabelModule,
-            FsRadioGroupModule,
-            FsBadgeModule,
-            FsCheckboxGroupModule,
-            FsMenuModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppAclModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatDialogModule,
-                        MatFormFieldModule,
-                        MatCheckboxModule,
-                        MatSelectModule,
-                        MatButtonModule,
-                        MatRadioModule,
-                        MatInputModule,
-                        FsListModule,
-                        FsPopoverModule,
-                        FsDialogModule,
-                        FsFormModule,
-                        FsLabelModule,
-                        FsRadioGroupModule,
-                        FsBadgeModule,
-                        FsCheckboxGroupModule,
-                        FsMenuModule,
-                    ],
-                    declarations: [
-                        FsAclRolesComponent,
-                        FsAclPermissionPopoverComponent,
-                        FsAclRoleComponent,
-                        FsAclEntriesComponent,
-                        FsAclRolePopoverComponent,
-                        FsAclObjectRolesComponent,
-                        FsAclEntryComponent,
-                        BulkOptionsFilterPipe,
-                        AclRolePermissionAvailablePipe,
-                    ],
-                    exports: [
-                        FsAclRolesComponent,
-                        FsAclPermissionPopoverComponent,
-                        FsAclRoleComponent,
-                        FsAclEntriesComponent,
-                        FsAclRolePopoverComponent,
-                        FsAclObjectRolesComponent,
-                        FsAclEntryComponent,
-                    ],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FS_APP_ACL_CONFIG, FsAclEntriesComponent, FsAclEntryComponent, FsAclObjectRolesComponent, FsAclPermissionPopoverComponent, FsAclRoleComponent, FsAclRolePopoverComponent, FsAclRolesComponent, FsAppAclModule, FsAppAclService };
+export { FS_APP_ACL_CONFIG, FsAclEntriesComponent, FsAclEntryComponent, FsAclObjectRolesComponent, FsAclPermissionPopoverComponent, FsAclRoleComponent, FsAclRolePopoverComponent, FsAclRolesComponent, FsAppAclService };
 //# sourceMappingURL=firestitch-app-acl.mjs.map