@firestitch/app-acl 18.0.12 → 18.0.15

package/fesm2022/firestitch-app-acl.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, EventEmitter, Component, Input, Output, ChangeDetectorRef, ViewChild, Pipe, ChangeDetectionStrategy, QueryList, ViewChildren, NgModule } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
-import { shareReplay, map, tap, takeUntil, filter } from 'rxjs/operators';
-import { forkJoin, Subject, Observable, of } from 'rxjs';
-import { groupBy, sortBy } from 'lodash-es';
+import * as i2$1 from '@firestitch/badge';
+import { FsBadgeModule } from '@firestitch/badge';
 import * as i1$3 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
 import { FsPrompt } from '@firestitch/prompt';
-import * as i2$1 from '@firestitch/badge';
-import { FsBadgeModule } from '@firestitch/badge';
+import { forkJoin, Subject, Observable, of } from 'rxjs';
+import { shareReplay, map, tap, takeUntil, filter } from 'rxjs/operators';
+import { groupBy, sortBy } from 'lodash-es';
 import { list } from '@firestitch/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, ControlContainer, NgForm } from '@angular/forms';
@@ -87,11 +87,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: "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.FsCheckboxGroupComponent, selector: "fs-checkbox-group", inputs: ["orientation", "position", "label", "disabled", "compareWith"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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 }] });
+    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.object?.id) {\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.id) {\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.object?.id) {\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.id) {\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.FsCheckboxGroupComponent, selector: "fs-checkbox-group", inputs: ["orientation", "position", "label", "disabled", "compareWith"], outputs: ["change"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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 }], 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"] }]
+            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.object?.id) {\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.id) {\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.object?.id) {\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.id) {\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: [{
@@ -220,11 +220,11 @@ class FsAclRolePopoverComponent {
         });
     }
     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" }] });
+    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: "<fs-popover\n    [template]=\"popover\"\n    [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n<ng-template #popover>\n  <div class=\"name small\">\n    {{ aclRole.name }}\n    @if (objectName) {\n      <span>\n        : {{ objectName }}\n      </span>\n    }\n  </div>\n  @if (permissions.length) {\n    @for (permission of permissions; track permission.name) {\n      <div class=\"permission\">\n        <div>\n          {{ permission.name }}\n        </div>\n        <div class=\"small\">\n          {{ permission.description }}\n        </div>\n      </div>\n    }\n  } @else {\n    None\n  }\n</ng-template>", 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"] }]
+            args: [{ selector: 'fs-acl-role-popover', standalone: true, imports: [FsPopoverModule], template: "<fs-popover\n    [template]=\"popover\"\n    [maxWidth]=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n<ng-template #popover>\n  <div class=\"name small\">\n    {{ aclRole.name }}\n    @if (objectName) {\n      <span>\n        : {{ objectName }}\n      </span>\n    }\n  </div>\n  @if (permissions.length) {\n    @for (permission of permissions; track permission.name) {\n      <div class=\"permission\">\n        <div>\n          {{ permission.name }}\n        </div>\n        <div class=\"small\">\n          {{ permission.description }}\n        </div>\n      </div>\n    }\n  } @else {\n    None\n  }\n</ng-template>", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"] }]
         }], propDecorators: { aclRole: [{
                 type: Input
             }], objectName: [{
@@ -232,23 +232,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsAclEntriesComponent {
-    _appAclService = inject(FsAppAclService);
-    _dialog = inject(MatDialog);
-    _confirm = inject(FsPrompt);
     loadAclEntries;
     loadAclRoles;
     saveAclObjectEntry;
     environmentShow = true;
     environmentLabel = 'Environment';
     environmentKey = 'environment';
+    required = true;
     actions = [];
     aclEntriesList = null;
     aclEntriesConfig = null;
     permissions = [];
     _destroy$ = new Subject();
+    _appAclService = inject(FsAppAclService);
+    _dialog = inject(MatDialog);
+    _confirm = inject(FsPrompt);
     ngOnInit() {
         this._appAclService.getPermissions()
-            .subscribe(response => {
+            .subscribe((response) => {
             this.permissions = response;
         });
         this.aclEntriesConfig = {
@@ -273,8 +274,8 @@ class FsAclEntriesComponent {
                                 this.aclEntriesList.reload();
                             });
                         });
-                    }
-                }
+                    },
+                },
             ],
             fetch: () => {
                 return new Observable((observer) => {
@@ -317,7 +318,7 @@ class FsAclEntriesComponent {
                                     [`${this.environmentKey}Id`]: parts[1] ? parseInt(parts[1]) : null,
                                     [this.environmentKey]: environments[parts[1]],
                                     aclEntries: groupedAclEntries[key],
-                                }
+                                },
                             ];
                         }, []);
                         const hasApp = aclObjectEntries.some((item) => {
@@ -346,12 +347,12 @@ class FsAclEntriesComponent {
     update(aclObjectEntry) {
         const data = {
             aclObjectEntry,
-            required: false,
+            required: this.required,
             loadAclRoles: this.loadAclRoles,
-            saveAclObjectEntry: this.saveAclObjectEntry
+            saveAclObjectEntry: this.saveAclObjectEntry,
         };
         this._dialog.open(FsAclEntryComponent, {
-            data: data
+            data: data,
         })
             .afterClosed()
             .pipe(takeUntil(this._destroy$))
@@ -367,11 +368,11 @@ class FsAclEntriesComponent {
         this.aclEntriesList.reload();
     }
     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 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.class }}\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 div>\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$3.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$3.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$3.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$3.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"] }] });
+    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", required: "required", 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 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.class }}\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.id) {\n          <div div>\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$3.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$3.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$3.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$3.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', 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 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.class }}\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 div>\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>" }]
+            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 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.class }}\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.id) {\n          <div div>\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: [{
@@ -384,6 +385,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], environmentKey: [{
                 type: Input
+            }], required: [{
+                type: Input
             }], actions: [{
                 type: Input
             }], aclEntriesList: [{
@@ -686,7 +689,7 @@ class FsAclRoleComponent {
         });
     }
     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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.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$3.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$3.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$3.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$3.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 });
+    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.value) {\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.name) {\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.value) {\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.value) {\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.value) {\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.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$3.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$3.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$3.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$3.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,
@@ -714,7 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         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"] }]
+                    ], 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.value) {\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.name) {\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.value) {\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.value) {\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.value) {\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]
@@ -859,11 +862,11 @@ class FsAclRolesComponent {
         };
     }
     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$3.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$3.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$3.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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.id) {\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$3.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$3.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$3.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, 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"] }]
+            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.id) {\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: [{