@firestitch/app-acl 12.0.0 → 12.3.0

package/esm2015/app/components/acl-entries/acl-entries.component.js

@@ -139,7 +139,7 @@ export class FsAclEntriesComponent {
     }
 }
 FsAclEntriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclEntriesComponent, deps: [{ token: i1.FsAppAclService }, { token: i2.MatDialog }, { token: i3.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-FsAclEntriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclEntriesComponent, selector: "fs-acl-entries", inputs: { loadAclEntries: "loadAclEntries", loadAclRoles: "loadAclRoles", saveAclObjectEntry: "saveAclObjectEntry", environmentShow: "environmentShow", environmentLabel: "environmentLabel", actions: "actions" }, viewQueries: [{ propertyName: "aclEntriesList", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Context</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div\n        *ngIf=\"row.object; else elseObject\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"start center\"\n        fxLayoutGap=\"10px\">\n          <fs-badge *ngIf=\"row.object.imageUrl\" shape=\"circle\" image=\"{{ row.object.imageUrl }}\"></fs-badge>\n          <span>\n            <div><small>{{ row.object.className }}</small></div>\n            <a (click)=\"update(row)\">{{ row.object.name }}</a>\n          </span>\n      </div>\n\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">App</a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>{{environmentLabel}}</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.environment?.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Roles</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div fxLayout=\"column\" fxLayoutGap=\"10px\">\n        <div div *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\" objectName=\"App\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"row.object\">\n                <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i4.FsListComponent, selector: "fs-list", inputs: ["loaderLines", "config"], outputs: ["filtersReady"] }, { type: i5.ɵa, selector: "fs-badge", inputs: ["text", "shape", "color", "tooltip", "size", "image", "icon", "iconSize", "iconColor", "backgroundSize"] }, { type: i6.FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: ["aclRole", "objectName"] }], directives: [{ type: i4.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "customize", "title", "name", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i4.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i4.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i8.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+FsAclEntriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclEntriesComponent, selector: "fs-acl-entries", inputs: { loadAclEntries: "loadAclEntries", loadAclRoles: "loadAclRoles", saveAclObjectEntry: "saveAclObjectEntry", environmentShow: "environmentShow", environmentLabel: "environmentLabel", actions: "actions" }, viewQueries: [{ propertyName: "aclEntriesList", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Context</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div\n        *ngIf=\"row.object; else elseObject\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"start center\"\n        fxLayoutGap=\"10px\">\n          <fs-badge *ngIf=\"row.object.imageUrl\" shape=\"circle\" image=\"{{ row.object.imageUrl }}\"></fs-badge>\n          <span>\n            <div><small>{{ row.object.className }}</small></div>\n            <a (click)=\"update(row)\">{{ row.object.name }}</a>\n          </span>\n      </div>\n\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">App</a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>{{environmentLabel}}</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.environment?.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Roles</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div fxLayout=\"column\" fxLayoutGap=\"10px\">\n        <div div *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\" objectName=\"App\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"row.object\">\n                <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i4.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5.FsBadgeComponent, selector: "fs-badge", inputs: ["color", "text", "tooltip", "size", "shape", "image", "icon", "iconSize", "iconColor", "backgroundSize"] }, { type: i6.FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: ["aclRole", "objectName"] }], directives: [{ type: i4.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i4.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i4.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i8.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclEntriesComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/app/components/acl-entry/acl-entry.component.js

@@ -79,7 +79,7 @@ export class FsAclEntryComponent {
     }
 }
 FsAclEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclEntryComponent, deps: [{ token: i1.FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-FsAclEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.ɵb, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i5.ɵa, selector: "fs-label" }, { type: i6.FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "successDelay", "errorDelay", "submit", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+FsAclEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i5.FsLabelComponent, selector: "fs-label" }, { type: i6.FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }, { type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclEntryComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/app/components/acl-object-roles/acl-object-roles.component.js

@@ -28,7 +28,7 @@ export class FsAclObjectRolesComponent {
     }
 }
 FsAclObjectRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclObjectRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsAclObjectRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: { aclRoles: "aclRoles", required: "required", multiple: "multiple", disabled: "disabled", aclObjectRoles: "aclObjectRoles", rolesLabel: "rolesLabel", levelLabel: "levelLabel" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"], components: [{ type: i1.ɵa, selector: "fs-checkbox-group", inputs: ["orientation", "position", "disabled", "compareWith", "label"], outputs: ["change"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.ɵf, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+FsAclObjectRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: { aclRoles: "aclRoles", required: "required", multiple: "multiple", disabled: "disabled", aclObjectRoles: "aclObjectRoles", rolesLabel: "rolesLabel", levelLabel: "levelLabel" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"], components: [{ type: i1.FsCheckboxGroupComponent, selector: "fs-checkbox-group", inputs: ["orientation", "position", "label", "disabled", "compareWith"], outputs: ["change"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclObjectRolesComponent, decorators: [{
             type: Component,
             args: [{
@@ -54,4 +54,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], change: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNsLW9iamVjdC1yb2xlcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvYWNsLW9iamVjdC1yb2xlcy9hY2wtb2JqZWN0LXJvbGVzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvY29tcG9uZW50cy9hY2wtb2JqZWN0LXJvbGVzL2FjbC1vYmplY3Qtcm9sZXMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzFELE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7Ozs7QUFZdkUsTUFBTSxPQUFPLHlCQUF5QjtJQU50QztRQVFXLGFBQVEsR0FBYyxFQUFFLENBQUM7UUFDekIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsbUJBQWMsR0FBb0IsRUFBRSxDQUFDO1FBQ3JDLGVBQVUsR0FBRyxPQUFPLENBQUM7UUFDckIsZUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNmLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBbUIsQ0FBQztRQUVoRCxtQkFBYyxHQUFHLENBQUMsRUFBTyxFQUFFLEVBQU8sRUFBRSxFQUFFO1lBQzNDLE9BQU8sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFLENBQUM7UUFDckMsQ0FBQyxDQUFBO0tBS0Y7SUFIUSxPQUFPO1FBQ1osSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7O3VIQWpCVSx5QkFBeUI7MkdBQXpCLHlCQUF5QixvUkNidEMsby9DQWdEQSxxL0NEckNpQixDQUFFLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsQ0FBRTs0RkFFMUQseUJBQXlCO2tCQU5yQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFdBQVcsRUFBRSxtQ0FBbUM7b0JBQ2hELFNBQVMsRUFBRSxDQUFDLG1DQUFtQyxDQUFDO29CQUNoRCxhQUFhLEVBQUUsQ0FBRSxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLENBQUU7aUJBQ3RFOzhCQUdVLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0ksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29udHJvbENvbnRhaW5lciwgTmdGb3JtIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQWNsT2JqZWN0Um9sZSB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvYWNsLW9iamVjdC1yb2xlJztcbmltcG9ydCB7IEFjbFJvbGUgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2FjbC1yb2xlJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmcy1hY2wtb2JqZWN0LXJvbGVzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjbC1vYmplY3Qtcm9sZXMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hY2wtb2JqZWN0LXJvbGVzLmNvbXBvbmVudC5zY3NzJ10sXG4gIHZpZXdQcm92aWRlcnM6IFsgeyBwcm92aWRlOiBDb250cm9sQ29udGFpbmVyLCB1c2VFeGlzdGluZzogTmdGb3JtIH0gXVxufSlcbmV4cG9ydCBjbGFzcyBGc0FjbE9iamVjdFJvbGVzQ29tcG9uZW50IHtcblxuICBASW5wdXQoKSBhY2xSb2xlczogQWNsUm9sZVtdID0gW107XG4gIEBJbnB1dCgpIHJlcXVpcmVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIG11bHRpcGxlID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIGFjbE9iamVjdFJvbGVzOiBBY2xPYmplY3RSb2xlW10gPSBbXTtcbiAgQElucHV0KCkgcm9sZXNMYWJlbCA9ICdSb2xlcyc7XG4gIEBJbnB1dCgpIGxldmVsTGFiZWwgPSAnJztcbiAgQE91dHB1dCgpIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8QWNsT2JqZWN0Um9sZVtdPigpO1xuXG4gIHB1YmxpYyBjb21wYXJlQWNsUm9sZSA9IChvMTogYW55LCBvMjogYW55KSA9PiB7XG4gICAgcmV0dXJuIG8xICYmIG8yICYmIG8xLmlkID09PSBvMi5pZDtcbiAgfVxuXG4gIHB1YmxpYyBjaGFuZ2VkKCkge1xuICAgIHRoaXMuY2hhbmdlLmVtaXQodGhpcy5hY2xPYmplY3RSb2xlcyk7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCIhbXVsdGlwbGVcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYWNsT2JqZWN0Um9sZSBvZiBhY2xPYmplY3RSb2xlc1wiPlxuICAgIDxmcy1jaGVja2JveC1ncm91cFxuICAgICAgWyhuZ01vZGVsKV09XCJhY2xPYmplY3RSb2xlLmFjbFJvbGVzXCJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cImNoYW5nZWQoKVwiXG4gICAgICBuYW1lPVwicm9sZXNcIlxuICAgICAgW2NvbXBhcmVXaXRoXT1cImNvbXBhcmVBY2xSb2xlXCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICBbbGFiZWxdPVwicm9sZXNMYWJlbFwiXG4gICAgICBbZnNGb3JtUmVxdWlyZWRdPVwicmVxdWlyZWRcIlxuICAgICAgb3JpZW50YXRpb249XCJ2ZXJ0aWNhbFwiPlxuICAgICAgPG1hdC1jaGVja2JveCBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiAqbmdGb3I9XCJsZXQgYWNsUm9sZSBvZiBhY2xSb2xlc1wiIFt2YWx1ZV09XCJhY2xSb2xlXCI+XG4gICAgICAgIHt7IGFjbFJvbGUubmFtZSB9fVxuICAgICAgPC9tYXQtY2hlY2tib3g+XG4gICAgPC9mcy1jaGVja2JveC1ncm91cD5cbiAgPC9uZy1jb250YWluZXI+XG48L25nLWNvbnRhaW5lcj5cblxuPG5nLWNvbnRhaW5lciAqbmdJZj1cIm11bHRpcGxlXCI+XG4gIDx0YWJsZT5cbiAgICA8dHI+XG4gICAgICA8dGQ+XG4gICAgICAgIDxzbWFsbD57e2xldmVsTGFiZWx9fTwvc21hbGw+XG4gICAgICA8L3RkPlxuICAgICAgPHRkPlxuICAgICAgICA8c21hbGw+e3tyb2xlc0xhYmVsfX08L3NtYWxsPlxuICAgICAgPC90ZD5cbiAgICA8L3RyPlxuICAgIDx0ciAqbmdGb3I9XCJsZXQgYWNsT2JqZWN0Um9sZSBvZiBhY2xPYmplY3RSb2xlc1wiPlxuICAgICAgPHRkPnt7YWNsT2JqZWN0Um9sZS5vYmplY3QubmFtZX19PC90ZD5cbiAgICAgIDx0ZD5cbiAgICAgICAgPG1hdC1mb3JtLWZpZWxkIGNsYXNzPVwiZm9ybS1maWVsZC1wYWRsZXNzXCI+XG4gICAgICAgICAgPG1hdC1zZWxlY3RcbiAgICAgICAgICAgIFsobmdNb2RlbCldPVwiYWNsT2JqZWN0Um9sZS5hY2xSb2xlc1wiXG4gICAgICAgICAgICBtdWx0aXBsZT1cInRydWVcIlxuICAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgICAgIFtjb21wYXJlV2l0aF09XCJjb21wYXJlQWNsUm9sZVwiXG4gICAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJjaGFuZ2VkKClcIlxuICAgICAgICAgICAgbmFtZT1cImFjbFJvbGVfe3sgYWNsT2JqZWN0Um9sZS5vYmplY3QuaWQgfX1cIj5cbiAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBhY2xSb2xlIG9mIGFjbFJvbGVzXCIgW3ZhbHVlXT1cImFjbFJvbGVcIj5cbiAgICAgICAgICAgICAge3sgYWNsUm9sZS5uYW1lIH19XG4gICAgICAgICAgICA8L21hdC1vcHRpb24+XG4gICAgICAgICAgPC9tYXQtc2VsZWN0PlxuICAgICAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgICAgPC90ZD5cbiAgICA8L3RyPlxuICA8L3RhYmxlPlxuPC9uZy1jb250YWluZXI+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNsLW9iamVjdC1yb2xlcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYXBwL2NvbXBvbmVudHMvYWNsLW9iamVjdC1yb2xlcy9hY2wtb2JqZWN0LXJvbGVzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvY29tcG9uZW50cy9hY2wtb2JqZWN0LXJvbGVzL2FjbC1vYmplY3Qtcm9sZXMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzFELE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7Ozs7QUFZdkUsTUFBTSxPQUFPLHlCQUF5QjtJQU50QztRQVFXLGFBQVEsR0FBYyxFQUFFLENBQUM7UUFDekIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsbUJBQWMsR0FBb0IsRUFBRSxDQUFDO1FBQ3JDLGVBQVUsR0FBRyxPQUFPLENBQUM7UUFDckIsZUFBVSxHQUFHLEVBQUUsQ0FBQztRQUNmLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBbUIsQ0FBQztRQUVoRCxtQkFBYyxHQUFHLENBQUMsRUFBTyxFQUFFLEVBQU8sRUFBRSxFQUFFO1lBQzNDLE9BQU8sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFLENBQUM7UUFDckMsQ0FBQyxDQUFBO0tBS0Y7SUFIUSxPQUFPO1FBQ1osSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO0lBQ3hDLENBQUM7O3VIQWpCVSx5QkFBeUI7MkdBQXpCLHlCQUF5QixvUkNidEMsby9DQWdEQSxnaUREckNpQixDQUFFLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsQ0FBRTs0RkFFMUQseUJBQXlCO2tCQU5yQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFdBQVcsRUFBRSxtQ0FBbUM7b0JBQ2hELFNBQVMsRUFBRSxDQUFDLG1DQUFtQyxDQUFDO29CQUNoRCxhQUFhLEVBQUUsQ0FBRSxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLENBQUU7aUJBQ3RFOzhCQUdVLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0ksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29udHJvbENvbnRhaW5lciwgTmdGb3JtIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQWNsT2JqZWN0Um9sZSB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvYWNsLW9iamVjdC1yb2xlJztcbmltcG9ydCB7IEFjbFJvbGUgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2FjbC1yb2xlJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmcy1hY2wtb2JqZWN0LXJvbGVzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjbC1vYmplY3Qtcm9sZXMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hY2wtb2JqZWN0LXJvbGVzLmNvbXBvbmVudC5zY3NzJ10sXG4gIHZpZXdQcm92aWRlcnM6IFsgeyBwcm92aWRlOiBDb250cm9sQ29udGFpbmVyLCB1c2VFeGlzdGluZzogTmdGb3JtIH0gXVxufSlcbmV4cG9ydCBjbGFzcyBGc0FjbE9iamVjdFJvbGVzQ29tcG9uZW50IHtcblxuICBASW5wdXQoKSBhY2xSb2xlczogQWNsUm9sZVtdID0gW107XG4gIEBJbnB1dCgpIHJlcXVpcmVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIG11bHRpcGxlID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIGFjbE9iamVjdFJvbGVzOiBBY2xPYmplY3RSb2xlW10gPSBbXTtcbiAgQElucHV0KCkgcm9sZXNMYWJlbCA9ICdSb2xlcyc7XG4gIEBJbnB1dCgpIGxldmVsTGFiZWwgPSAnJztcbiAgQE91dHB1dCgpIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8QWNsT2JqZWN0Um9sZVtdPigpO1xuXG4gIHB1YmxpYyBjb21wYXJlQWNsUm9sZSA9IChvMTogYW55LCBvMjogYW55KSA9PiB7XG4gICAgcmV0dXJuIG8xICYmIG8yICYmIG8xLmlkID09PSBvMi5pZDtcbiAgfVxuXG4gIHB1YmxpYyBjaGFuZ2VkKCkge1xuICAgIHRoaXMuY2hhbmdlLmVtaXQodGhpcy5hY2xPYmplY3RSb2xlcyk7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCIhbXVsdGlwbGVcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYWNsT2JqZWN0Um9sZSBvZiBhY2xPYmplY3RSb2xlc1wiPlxuICAgIDxmcy1jaGVja2JveC1ncm91cFxuICAgICAgWyhuZ01vZGVsKV09XCJhY2xPYmplY3RSb2xlLmFjbFJvbGVzXCJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cImNoYW5nZWQoKVwiXG4gICAgICBuYW1lPVwicm9sZXNcIlxuICAgICAgW2NvbXBhcmVXaXRoXT1cImNvbXBhcmVBY2xSb2xlXCJcbiAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICBbbGFiZWxdPVwicm9sZXNMYWJlbFwiXG4gICAgICBbZnNGb3JtUmVxdWlyZWRdPVwicmVxdWlyZWRcIlxuICAgICAgb3JpZW50YXRpb249XCJ2ZXJ0aWNhbFwiPlxuICAgICAgPG1hdC1jaGVja2JveCBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIiAqbmdGb3I9XCJsZXQgYWNsUm9sZSBvZiBhY2xSb2xlc1wiIFt2YWx1ZV09XCJhY2xSb2xlXCI+XG4gICAgICAgIHt7IGFjbFJvbGUubmFtZSB9fVxuICAgICAgPC9tYXQtY2hlY2tib3g+XG4gICAgPC9mcy1jaGVja2JveC1ncm91cD5cbiAgPC9uZy1jb250YWluZXI+XG48L25nLWNvbnRhaW5lcj5cblxuPG5nLWNvbnRhaW5lciAqbmdJZj1cIm11bHRpcGxlXCI+XG4gIDx0YWJsZT5cbiAgICA8dHI+XG4gICAgICA8dGQ+XG4gICAgICAgIDxzbWFsbD57e2xldmVsTGFiZWx9fTwvc21hbGw+XG4gICAgICA8L3RkPlxuICAgICAgPHRkPlxuICAgICAgICA8c21hbGw+e3tyb2xlc0xhYmVsfX08L3NtYWxsPlxuICAgICAgPC90ZD5cbiAgICA8L3RyPlxuICAgIDx0ciAqbmdGb3I9XCJsZXQgYWNsT2JqZWN0Um9sZSBvZiBhY2xPYmplY3RSb2xlc1wiPlxuICAgICAgPHRkPnt7YWNsT2JqZWN0Um9sZS5vYmplY3QubmFtZX19PC90ZD5cbiAgICAgIDx0ZD5cbiAgICAgICAgPG1hdC1mb3JtLWZpZWxkIGNsYXNzPVwiZm9ybS1maWVsZC1wYWRsZXNzXCI+XG4gICAgICAgICAgPG1hdC1zZWxlY3RcbiAgICAgICAgICAgIFsobmdNb2RlbCldPVwiYWNsT2JqZWN0Um9sZS5hY2xSb2xlc1wiXG4gICAgICAgICAgICBtdWx0aXBsZT1cInRydWVcIlxuICAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgICAgIFtjb21wYXJlV2l0aF09XCJjb21wYXJlQWNsUm9sZVwiXG4gICAgICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJjaGFuZ2VkKClcIlxuICAgICAgICAgICAgbmFtZT1cImFjbFJvbGVfe3sgYWNsT2JqZWN0Um9sZS5vYmplY3QuaWQgfX1cIj5cbiAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBhY2xSb2xlIG9mIGFjbFJvbGVzXCIgW3ZhbHVlXT1cImFjbFJvbGVcIj5cbiAgICAgICAgICAgICAge3sgYWNsUm9sZS5uYW1lIH19XG4gICAgICAgICAgICA8L21hdC1vcHRpb24+XG4gICAgICAgICAgPC9tYXQtc2VsZWN0PlxuICAgICAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgICAgPC90ZD5cbiAgICA8L3RyPlxuICA8L3RhYmxlPlxuPC9uZy1jb250YWluZXI+XG4iXX0=

package/esm2015/app/components/acl-permission-popover/acl-permission-popover.component.js

@@ -19,7 +19,7 @@ export class FsAclPermissionPopoverComponent {
     }
 }
 FsAclPermissionPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclPermissionPopoverComponent, deps: [{ token: i1.FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
-FsAclPermissionPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" maxWidth=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], components: [{ type: i2.FsPopoverComponent, selector: "fs-popover", inputs: ["leaveDelay", "showDelay", "maxWidth", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "template", "data", "wrapperClass"] }] });
+FsAclPermissionPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" maxWidth=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], components: [{ type: i2.FsPopoverComponent, selector: "fs-popover", inputs: ["template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclPermissionPopoverComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/app/components/acl-role/acl-role.component.js

@@ -184,7 +184,7 @@ export class FsAclRoleComponent {
     }
 }
 FsAclRoleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRoleComponent, deps: [{ token: i1.FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>{{ aclRole.id ? 'Edit' : 'Create' }} Role</div>\n      <mat-dialog-content>\n        <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"40px\" fxLayoutGap.lt-md=\"0\">\n          <div fxLayout=\"column\" fxFlex fxFlex.lt-md=\"0\">\n            <mat-form-field>\n              <input matInput placeholder=\"Name\" [(ngModel)]=\"aclRole.name\" name=\"name\" fsFormRequired>\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                  [(ngModel)]=\"aclRole.level\"\n                  (ngModelChange)=\"levelChange()\"\n                  fsFormRequired\n                  label=\"Level\"\n                  orientation=\"vertical\"\n                  name=\"level\">\n                  <mat-radio-button\n                    *ngFor=\"let item of aclLevels\"\n                    [value]=\"item.value\"\n                    [disabled]=\"!!aclRole.protected\">\n                      {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>All Permissions</fs-label>\n              <mat-checkbox\n                [(ngModel)]=\"aclRole.allPermissions\"\n                (ngModelChange)=\"allPermissionsChange($event)\"\n                [disabled]=\"!!aclRole.protected\"\n                name=\"allPermissions\">\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div fxLayout=\"column\" *ngFor=\"let config of levelAclRoleConfigs\">\n              <fs-label-field *ngIf=\"config.interface === 'checkbox'\">\n                <fs-label>{{config.name}}</fs-label>\n                <mat-checkbox\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.name\">\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{config.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"config.interface === 'select'\">\n                <mat-select\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.value\"\n                  [required]=\"config.required\"\n                  [placeholder]=\"config.name\">\n                    <mat-option\n                      *ngFor=\"let item of config.values\"\n                      [value]=\"item.value\">\n                        {{ item.name }}\n                    </mat-option>\n                </mat-select>\n                <mat-hint>{{config.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div fxLayout=\"column\" fxFlex=\"65\" fxFlex.lt-md=\"0\" *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions\">\n\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template colspan=\"2\" fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <small><b>{{row.category || 'General'}}</b></small>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"row\">\n                  <div class=\"permission\">{{ row.name }}</div>\n                  <div class=\"description small\">{{ row.description }}</div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column title=\"Access\" width=\"1%\" class=\"access\">\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions; else elseAll\">\n                    {{ indexedAccesses[aclRole.permissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <mat-form-field>\n                      <mat-select\n                        [(ngModel)]=\"aclRole.permissions[permission.value]\"\n                        [disabled]=\"!!aclRole.protected\"\n                        fsFormRequired\n                        name=\"access-{{ permission.value }}\">\n                        <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                          <mat-option\n                            *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                            [value]=\"access.value\">\n                              {{ access.name }}\n                          </mat-option>\n                        </ng-container>\n                      </mat-select>\n                    </mat-form-field>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button mat-button type=\"submit\" color=\"primary\">{{ aclRole.id ? 'Save' : 'Create' }}</button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">Cancel</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n", styles: [":host .permissions ::ng-deep .fs-list-row-group{background-color:#f6f6f6}:host .permissions ::ng-deep fs-list .access{white-space:nowrap}:host .permissions ::ng-deep .mat-form-field{width:100px}:host .permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}:host ::ng-deep fs-radio-group{width:100%}:host ::ng-deep fs-label-field{width:100%}:host .level{width:100%}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6.ɵb, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6.ɵa, selector: "fs-label" }, { type: i7.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "radioPosition", "compareWith", "required", "disabled", "label", "name"] }, { type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.ɵc, selector: "fs-label-message" }, { type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12.FsListComponent, selector: "fs-list", inputs: ["loaderLines", "config"], outputs: ["filtersReady"] }, { type: i13.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "successDelay", "errorDelay", "submit", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i17.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i17.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i17.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i18.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.ɵf, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i14.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "customize", "title", "name", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12.ɵd, selector: "[fs-list-group-cell]" }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i15.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsAclRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>{{ aclRole.id ? 'Edit' : 'Create' }} Role</div>\n      <mat-dialog-content>\n        <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"40px\" fxLayoutGap.lt-md=\"0\">\n          <div fxLayout=\"column\" fxFlex fxFlex.lt-md=\"0\">\n            <mat-form-field>\n              <input matInput placeholder=\"Name\" [(ngModel)]=\"aclRole.name\" name=\"name\" fsFormRequired>\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                  [(ngModel)]=\"aclRole.level\"\n                  (ngModelChange)=\"levelChange()\"\n                  fsFormRequired\n                  label=\"Level\"\n                  orientation=\"vertical\"\n                  name=\"level\">\n                  <mat-radio-button\n                    *ngFor=\"let item of aclLevels\"\n                    [value]=\"item.value\"\n                    [disabled]=\"!!aclRole.protected\">\n                      {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>All Permissions</fs-label>\n              <mat-checkbox\n                [(ngModel)]=\"aclRole.allPermissions\"\n                (ngModelChange)=\"allPermissionsChange($event)\"\n                [disabled]=\"!!aclRole.protected\"\n                name=\"allPermissions\">\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div fxLayout=\"column\" *ngFor=\"let config of levelAclRoleConfigs\">\n              <fs-label-field *ngIf=\"config.interface === 'checkbox'\">\n                <fs-label>{{config.name}}</fs-label>\n                <mat-checkbox\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.name\">\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{config.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"config.interface === 'select'\">\n                <mat-select\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.value\"\n                  [required]=\"config.required\"\n                  [placeholder]=\"config.name\">\n                    <mat-option\n                      *ngFor=\"let item of config.values\"\n                      [value]=\"item.value\">\n                        {{ item.name }}\n                    </mat-option>\n                </mat-select>\n                <mat-hint>{{config.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div fxLayout=\"column\" fxFlex=\"65\" fxFlex.lt-md=\"0\" *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions\">\n\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template colspan=\"2\" fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <small><b>{{row.category || 'General'}}</b></small>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"row\">\n                  <div class=\"permission\">{{ row.name }}</div>\n                  <div class=\"description small\">{{ row.description }}</div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column title=\"Access\" width=\"1%\" class=\"access\">\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions; else elseAll\">\n                    {{ indexedAccesses[aclRole.permissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <mat-form-field>\n                      <mat-select\n                        [(ngModel)]=\"aclRole.permissions[permission.value]\"\n                        [disabled]=\"!!aclRole.protected\"\n                        fsFormRequired\n                        name=\"access-{{ permission.value }}\">\n                        <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                          <mat-option\n                            *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                            [value]=\"access.value\">\n                              {{ access.name }}\n                          </mat-option>\n                        </ng-container>\n                      </mat-select>\n                    </mat-form-field>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button mat-button type=\"submit\" color=\"primary\">{{ aclRole.id ? 'Save' : 'Create' }}</button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">Cancel</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n", styles: [":host .permissions ::ng-deep .fs-list-row-group{background-color:#f6f6f6}:host .permissions ::ng-deep fs-list .access{white-space:nowrap}:host .permissions ::ng-deep .mat-form-field{width:100px}:host .permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}:host ::ng-deep fs-radio-group{width:100%}:host ::ng-deep fs-label-field{width:100%}:host .level{width:100%}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6.FsLabelComponent, selector: "fs-label" }, { type: i7.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i13.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i17.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i17.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i17.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i18.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i14.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12.FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]" }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i15.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRoleComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/app/components/acl-role-popover/acl-role-popover.component.js

@@ -22,7 +22,7 @@ export class FsAclRolePopoverComponent {
     }
 }
 FsAclRolePopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRolePopoverComponent, deps: [{ token: i1.FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRolePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" maxWidth=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], components: [{ type: i2.FsPopoverComponent, selector: "fs-popover", inputs: ["leaveDelay", "showDelay", "maxWidth", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "template", "data", "wrapperClass"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+FsAclRolePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" maxWidth=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], components: [{ type: i2.FsPopoverComponent, selector: "fs-popover", inputs: ["template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRolePopoverComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/app/components/acl-roles/acl-roles.component.js

@@ -120,7 +120,7 @@ export class FsAclRolesComponent {
     }
 }
 FsAclRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRolesComponent, deps: [{ token: i1.FsAppAclService }, { token: i2.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", aclLevels: "aclLevels" }, viewQueries: [{ propertyName: "list", predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], components: [{ type: i3.FsListComponent, selector: "fs-list", inputs: ["loaderLines", "config"], outputs: ["filtersReady"] }, { type: i4.FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "customize", "title", "name", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i3.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsAclRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", aclLevels: "aclLevels" }, viewQueries: [{ propertyName: "list", predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], components: [{ type: i3.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i3.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRolesComponent, decorators: [{
             type: Component,
             args: [{

package/fesm2015/firestitch-app-acl.js

@@ -291,7 +291,7 @@ class FsAclRoleComponent {
     }
 }
 FsAclRoleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRoleComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>{{ aclRole.id ? 'Edit' : 'Create' }} Role</div>\n      <mat-dialog-content>\n        <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"40px\" fxLayoutGap.lt-md=\"0\">\n          <div fxLayout=\"column\" fxFlex fxFlex.lt-md=\"0\">\n            <mat-form-field>\n              <input matInput placeholder=\"Name\" [(ngModel)]=\"aclRole.name\" name=\"name\" fsFormRequired>\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                  [(ngModel)]=\"aclRole.level\"\n                  (ngModelChange)=\"levelChange()\"\n                  fsFormRequired\n                  label=\"Level\"\n                  orientation=\"vertical\"\n                  name=\"level\">\n                  <mat-radio-button\n                    *ngFor=\"let item of aclLevels\"\n                    [value]=\"item.value\"\n                    [disabled]=\"!!aclRole.protected\">\n                      {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>All Permissions</fs-label>\n              <mat-checkbox\n                [(ngModel)]=\"aclRole.allPermissions\"\n                (ngModelChange)=\"allPermissionsChange($event)\"\n                [disabled]=\"!!aclRole.protected\"\n                name=\"allPermissions\">\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div fxLayout=\"column\" *ngFor=\"let config of levelAclRoleConfigs\">\n              <fs-label-field *ngIf=\"config.interface === 'checkbox'\">\n                <fs-label>{{config.name}}</fs-label>\n                <mat-checkbox\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.name\">\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{config.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"config.interface === 'select'\">\n                <mat-select\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.value\"\n                  [required]=\"config.required\"\n                  [placeholder]=\"config.name\">\n                    <mat-option\n                      *ngFor=\"let item of config.values\"\n                      [value]=\"item.value\">\n                        {{ item.name }}\n                    </mat-option>\n                </mat-select>\n                <mat-hint>{{config.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div fxLayout=\"column\" fxFlex=\"65\" fxFlex.lt-md=\"0\" *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions\">\n\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template colspan=\"2\" fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <small><b>{{row.category || 'General'}}</b></small>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"row\">\n                  <div class=\"permission\">{{ row.name }}</div>\n                  <div class=\"description small\">{{ row.description }}</div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column title=\"Access\" width=\"1%\" class=\"access\">\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions; else elseAll\">\n                    {{ indexedAccesses[aclRole.permissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <mat-form-field>\n                      <mat-select\n                        [(ngModel)]=\"aclRole.permissions[permission.value]\"\n                        [disabled]=\"!!aclRole.protected\"\n                        fsFormRequired\n                        name=\"access-{{ permission.value }}\">\n                        <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                          <mat-option\n                            *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                            [value]=\"access.value\">\n                              {{ access.name }}\n                          </mat-option>\n                        </ng-container>\n                      </mat-select>\n                    </mat-form-field>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button mat-button type=\"submit\" color=\"primary\">{{ aclRole.id ? 'Save' : 'Create' }}</button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">Cancel</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n", styles: [":host .permissions ::ng-deep .fs-list-row-group{background-color:#f6f6f6}:host .permissions ::ng-deep fs-list .access{white-space:nowrap}:host .permissions ::ng-deep .mat-form-field{width:100px}:host .permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}:host ::ng-deep fs-radio-group{width:100%}:host ::ng-deep fs-label-field{width:100%}:host .level{width:100%}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6.ɵb, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6.ɵa, selector: "fs-label" }, { type: i7.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "radioPosition", "compareWith", "required", "disabled", "label", "name"] }, { type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.ɵc, selector: "fs-label-message" }, { type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12.FsListComponent, selector: "fs-list", inputs: ["loaderLines", "config"], outputs: ["filtersReady"] }, { type: i13.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "successDelay", "errorDelay", "submit", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i17.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i17.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i17.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i18.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.ɵf, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i14.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "customize", "title", "name", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12.ɵd, selector: "[fs-list-group-cell]" }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i15.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsAclRoleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRoleComponent, selector: "ng-component", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <ng-container *ngIf=\"aclRole\">\n      <div mat-dialog-title>{{ aclRole.id ? 'Edit' : 'Create' }} Role</div>\n      <mat-dialog-content>\n        <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap=\"40px\" fxLayoutGap.lt-md=\"0\">\n          <div fxLayout=\"column\" fxFlex fxFlex.lt-md=\"0\">\n            <mat-form-field>\n              <input matInput placeholder=\"Name\" [(ngModel)]=\"aclRole.name\" name=\"name\" fsFormRequired>\n            </mat-form-field>\n\n            <fs-label-field *ngIf=\"aclRole.id || aclLevels.length === 1; else levels\">\n              <fs-label>Level</fs-label>\n              {{indexedAclLevels[aclRole.level]}}\n            </fs-label-field>\n\n            <ng-template #levels>\n              <div class=\"level\">\n                <fs-radio-group\n                  [(ngModel)]=\"aclRole.level\"\n                  (ngModelChange)=\"levelChange()\"\n                  fsFormRequired\n                  label=\"Level\"\n                  orientation=\"vertical\"\n                  name=\"level\">\n                  <mat-radio-button\n                    *ngFor=\"let item of aclLevels\"\n                    [value]=\"item.value\"\n                    [disabled]=\"!!aclRole.protected\">\n                      {{ item.name }}\n                  </mat-radio-button>\n                </fs-radio-group>\n              </div>\n            </ng-template>\n\n            <fs-label-field *ngIf=\"levelPermissions.length\">\n              <fs-label>All Permissions</fs-label>\n              <mat-checkbox\n                [(ngModel)]=\"aclRole.allPermissions\"\n                (ngModelChange)=\"allPermissionsChange($event)\"\n                [disabled]=\"!!aclRole.protected\"\n                name=\"allPermissions\">\n              </mat-checkbox>\n            </fs-label-field>\n\n            <div fxLayout=\"column\" *ngFor=\"let config of levelAclRoleConfigs\">\n              <fs-label-field *ngIf=\"config.interface === 'checkbox'\">\n                <fs-label>{{config.name}}</fs-label>\n                <mat-checkbox\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.name\">\n                </mat-checkbox>\n                <fs-label-message>\n                  <mat-hint>{{config.description}}</mat-hint>\n                </fs-label-message>\n              </fs-label-field>\n\n              <mat-form-field *ngIf=\"config.interface === 'select'\">\n                <mat-select\n                  [(ngModel)]=\"config.data\"\n                  [name]=\"config.value\"\n                  [required]=\"config.required\"\n                  [placeholder]=\"config.name\">\n                    <mat-option\n                      *ngFor=\"let item of config.values\"\n                      [value]=\"item.value\">\n                        {{ item.name }}\n                    </mat-option>\n                </mat-select>\n                <mat-hint>{{config.description}}</mat-hint>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div fxLayout=\"column\" fxFlex=\"65\" fxFlex.lt-md=\"0\" *ngIf=\"aclRole.level\" [hidden]=\"!levelPermissions.length\" class=\"permissions\">\n\n            <fs-list [config]=\"listConfig\">\n              <fs-list-column title=\"Permissions\">\n                <ng-template colspan=\"2\" fs-list-group-cell let-row=\"row\" class=\"permission-group\">\n                  <small><b>{{row.category || 'General'}}</b></small>\n                </ng-template>\n                <ng-template fs-list-cell let-row=\"row\">\n                  <div class=\"permission\">{{ row.name }}</div>\n                  <div class=\"description small\">{{ row.description }}</div>\n                </ng-template>\n              </fs-list-column>\n              <fs-list-column title=\"Access\" width=\"1%\" class=\"access\">\n                <ng-template fs-list-cell let-row=\"permission\" let-permission=\"row\">\n                  <span *ngIf=\"aclRole.allPermissions; else elseAll\">\n                    {{ indexedAccesses[aclRole.permissions[permission.value]] }}\n                  </span>\n                  <ng-template #elseAll>\n                    <mat-form-field>\n                      <mat-select\n                        [(ngModel)]=\"aclRole.permissions[permission.value]\"\n                        [disabled]=\"!!aclRole.protected\"\n                        fsFormRequired\n                        name=\"access-{{ permission.value }}\">\n                        <ng-container *ngFor=\"let access of AclRoleAccesses\">\n                          <mat-option\n                            *ngIf=\"access.value === 0 || permission.accesses.indexOf(access.value) !== -1\"\n                            [value]=\"access.value\">\n                              {{ access.name }}\n                          </mat-option>\n                        </ng-container>\n                      </mat-select>\n                    </mat-form-field>\n                  </ng-template>\n                </ng-template>\n              </fs-list-column>\n            </fs-list>\n          </div>\n        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button mat-button type=\"submit\" color=\"primary\">{{ aclRole.id ? 'Save' : 'Create' }}</button>\n        <button mat-button [mat-dialog-close]=\"null\" type=\"button\">Cancel</button>\n      </mat-dialog-actions>\n    </ng-container>\n  </fs-dialog>\n</form>\n", styles: [":host .permissions ::ng-deep .fs-list-row-group{background-color:#f6f6f6}:host .permissions ::ng-deep fs-list .access{white-space:nowrap}:host .permissions ::ng-deep .mat-form-field{width:100px}:host .permissions ::ng-deep .mat-form-field .mat-form-field-wrapper{padding-bottom:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-infix{border-top:0}:host .permissions ::ng-deep .mat-form-field .mat-form-field-underline{bottom:0}:host ::ng-deep fs-radio-group{width:100%}:host ::ng-deep fs-label-field{width:100%}:host .level{width:100%}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6.FsLabelComponent, selector: "fs-label" }, { type: i7.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "label", "name", "disabled", "radioPosition", "compareWith", "required"] }, { type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i13.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i17.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i17.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i17.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i18.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i14.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12.FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]" }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i15.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRoleComponent, decorators: [{
             type: Component,
             args: [{
@@ -323,7 +323,7 @@ class FsAclPermissionPopoverComponent {
     }
 }
 FsAclPermissionPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclPermissionPopoverComponent, deps: [{ token: FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
-FsAclPermissionPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" maxWidth=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], components: [{ type: i2$1.FsPopoverComponent, selector: "fs-popover", inputs: ["leaveDelay", "showDelay", "maxWidth", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "template", "data", "wrapperClass"] }] });
+FsAclPermissionPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: { permission: "permission" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" maxWidth=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  {{permission.name}}\n  <div class=\"small\">{{description}}</div>\n</ng-template>\n\n", styles: [":host{cursor:pointer}\n"], components: [{ type: i2$1.FsPopoverComponent, selector: "fs-popover", inputs: ["template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclPermissionPopoverComponent, decorators: [{
             type: Component,
             args: [{
@@ -442,7 +442,7 @@ class FsAclRolesComponent {
     }
 }
 FsAclRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRolesComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", aclLevels: "aclLevels" }, viewQueries: [{ propertyName: "list", predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], components: [{ type: i12.FsListComponent, selector: "fs-list", inputs: ["loaderLines", "config"], outputs: ["filtersReady"] }, { type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "customize", "title", "name", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsAclRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRolesComponent, selector: "fs-acl-roles", inputs: { deleteAclRole: "deleteAclRole", saveAclRole: "saveAclRole", loadAclRoles: "loadAclRoles", loadAclRole: "loadAclRole", aclLevels: "aclLevels" }, viewQueries: [{ propertyName: "list", predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\" *ngIf=\"listConfig\">\n  <fs-list-column title=\"Name\" name=\"name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openDialog(row)\">{{ row.name }}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"hierarchy\" title=\"Level\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ indexedAclRoleLevels[row.level] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Permissions\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"permissions\">\n        <ng-container *ngFor=\"let permission of row.permissions\">\n          <span *ngIf=\"permission.access\" class=\"permission\">\n            <acl-permission-popover [permission]=\"permission\">{{permission.name}}</acl-permission-popover>\n          </span>\n        </ng-container>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [".permissions .permission+.permission:before{content:\", \"}\n"], components: [{ type: i12.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: FsAclPermissionPopoverComponent, selector: "acl-permission-popover", inputs: ["permission"] }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRolesComponent, decorators: [{
             type: Component,
             args: [{
@@ -484,7 +484,7 @@ class FsAclRolePopoverComponent {
     }
 }
 FsAclRolePopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRolePopoverComponent, deps: [{ token: FsAppAclService }], target: i0.ɵɵFactoryTarget.Component });
-FsAclRolePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" maxWidth=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], components: [{ type: i2$1.FsPopoverComponent, selector: "fs-popover", inputs: ["leaveDelay", "showDelay", "maxWidth", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "template", "data", "wrapperClass"] }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+FsAclRolePopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: { aclRole: "aclRole", objectName: "objectName" }, ngImport: i0, template: "\n<fs-popover [template]=\"popover\" maxWidth=\"400\">\n  <ng-content></ng-content>\n</fs-popover>\n\n<ng-template #popover>\n  <div class=\"name small\">{{aclRole.name}}<span *ngIf=\"objectName\">: {{objectName}}</span></div>\n\n  <ng-container *ngIf=\"permissions.length; else nonePermission\">\n    <div *ngFor=\"let permission of permissions\" class=\"permission\">\n      <div>{{permission.name}}</div>\n      <div class=\"small\">{{permission.description}}</div>\n    </div>\n  </ng-container>\n\n  <ng-template #nonePermission>\n    None\n  </ng-template>\n</ng-template>\n", styles: [".name{padding-bottom:10px}.permission+.permission{padding-top:5px}:host{cursor:pointer}\n"], components: [{ type: i2$1.FsPopoverComponent, selector: "fs-popover", inputs: ["template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger"] }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclRolePopoverComponent, decorators: [{
             type: Component,
             args: [{
@@ -517,7 +517,7 @@ class FsAclObjectRolesComponent {
     }
 }
 FsAclObjectRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclObjectRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsAclObjectRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: { aclRoles: "aclRoles", required: "required", multiple: "multiple", disabled: "disabled", aclObjectRoles: "aclObjectRoles", rolesLabel: "rolesLabel", levelLabel: "levelLabel" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"], components: [{ type: i1.ɵa, selector: "fs-checkbox-group", inputs: ["orientation", "position", "disabled", "compareWith", "label"], outputs: ["change"] }, { type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i15.ɵf, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
+FsAclObjectRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: { aclRoles: "aclRoles", required: "required", multiple: "multiple", disabled: "disabled", aclObjectRoles: "aclObjectRoles", rolesLabel: "rolesLabel", levelLabel: "levelLabel" }, outputs: { change: "change" }, ngImport: i0, template: "<ng-container *ngIf=\"!multiple\">\n  <ng-container *ngFor=\"let aclObjectRole of aclObjectRoles\">\n    <fs-checkbox-group\n      [(ngModel)]=\"aclObjectRole.aclRoles\"\n      (ngModelChange)=\"changed()\"\n      name=\"roles\"\n      [compareWith]=\"compareAclRole\"\n      [disabled]=\"disabled\"\n      [label]=\"rolesLabel\"\n      [fsFormRequired]=\"required\"\n      orientation=\"vertical\">\n      <mat-checkbox [disabled]=\"disabled\" *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n        {{ aclRole.name }}\n      </mat-checkbox>\n    </fs-checkbox-group>\n  </ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"multiple\">\n  <table>\n    <tr>\n      <td>\n        <small>{{levelLabel}}</small>\n      </td>\n      <td>\n        <small>{{rolesLabel}}</small>\n      </td>\n    </tr>\n    <tr *ngFor=\"let aclObjectRole of aclObjectRoles\">\n      <td>{{aclObjectRole.object.name}}</td>\n      <td>\n        <mat-form-field class=\"form-field-padless\">\n          <mat-select\n            [(ngModel)]=\"aclObjectRole.aclRoles\"\n            multiple=\"true\"\n            [disabled]=\"disabled\"\n            [compareWith]=\"compareAclRole\"\n            (ngModelChange)=\"changed()\"\n            name=\"aclRole_{{ aclObjectRole.object.id }}\">\n            <mat-option *ngFor=\"let aclRole of aclRoles\" [value]=\"aclRole\">\n              {{ aclRole.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </td>\n    </tr>\n  </table>\n</ng-container>\n", styles: ["table tr td:first-child{padding-right:15px}\n"], components: [{ type: i1.FsCheckboxGroupComponent, selector: "fs-checkbox-group", inputs: ["orientation", "position", "label", "disabled", "compareWith"], outputs: ["change"] }, { type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i15.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclObjectRolesComponent, decorators: [{
             type: Component,
             args: [{
@@ -608,7 +608,7 @@ class FsAclEntryComponent {
     }
 }
 FsAclEntryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclEntryComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialogRef }, { token: i3.FsMessage }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-FsAclEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i6.ɵb, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6.ɵa, selector: "fs-label" }, { type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }, { type: i13.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "successDelay", "errorDelay", "submit", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i15.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+FsAclEntryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclEntryComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>{{ titleEdit? titleEdit : titleAdd }}</div>\n    <mat-dialog-content>\n      <div *ngIf=\"aclObjectRole\">\n        <fs-label-field *ngIf=\"aclObjectEntry.object\">\n          <fs-label>{{indexedAclRoleLevels[aclObjectEntry.level]}}</fs-label>\n          {{aclObjectEntry.object.name}}\n        </fs-label-field>\n\n        <fs-acl-object-roles\n          [aclRoles]=\"aclRoles\"\n          [aclObjectRoles]=\"[aclObjectRole]\"\n          [required]=\"required\"\n          (change)=\"aclObjectRoleChange($event)\">\n        </fs-acl-object-roles>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\">Save</button>\n      <button mat-button mat-dialog-close type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .account-roles-autocomplete-panel .mat-option{line-height:normal}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text{display:flex;flex-direction:row;align-items:center}::ng-deep .account-roles-autocomplete-panel .mat-option .mat-option-text fs-badge{margin-right:5px}\n"], components: [{ type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6.FsLabelComponent, selector: "fs-label" }, { type: FsAclObjectRolesComponent, selector: "fs-acl-object-roles", inputs: ["aclRoles", "required", "multiple", "disabled", "aclObjectRoles", "rolesLabel", "levelLabel"], outputs: ["change"] }, { type: i13.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i15.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclEntryComponent, decorators: [{
             type: Component,
             args: [{
@@ -743,7 +743,7 @@ class FsAclEntriesComponent {
     }
 }
 FsAclEntriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclEntriesComponent, deps: [{ token: FsAppAclService }, { token: i2.MatDialog }, { token: i3$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-FsAclEntriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclEntriesComponent, selector: "fs-acl-entries", inputs: { loadAclEntries: "loadAclEntries", loadAclRoles: "loadAclRoles", saveAclObjectEntry: "saveAclObjectEntry", environmentShow: "environmentShow", environmentLabel: "environmentLabel", actions: "actions" }, viewQueries: [{ propertyName: "aclEntriesList", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Context</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div\n        *ngIf=\"row.object; else elseObject\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"start center\"\n        fxLayoutGap=\"10px\">\n          <fs-badge *ngIf=\"row.object.imageUrl\" shape=\"circle\" image=\"{{ row.object.imageUrl }}\"></fs-badge>\n          <span>\n            <div><small>{{ row.object.className }}</small></div>\n            <a (click)=\"update(row)\">{{ row.object.name }}</a>\n          </span>\n      </div>\n\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">App</a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>{{environmentLabel}}</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.environment?.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Roles</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div fxLayout=\"column\" fxLayoutGap=\"10px\">\n        <div div *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\" objectName=\"App\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"row.object\">\n                <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i12.FsListComponent, selector: "fs-list", inputs: ["loaderLines", "config"], outputs: ["filtersReady"] }, { type: i5$1.ɵa, selector: "fs-badge", inputs: ["text", "shape", "color", "tooltip", "size", "image", "icon", "iconSize", "iconColor", "backgroundSize"] }, { type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: ["aclRole", "objectName"] }], directives: [{ type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "customize", "title", "name", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i17.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i17.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+FsAclEntriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsAclEntriesComponent, selector: "fs-acl-entries", inputs: { loadAclEntries: "loadAclEntries", loadAclRoles: "loadAclRoles", saveAclObjectEntry: "saveAclObjectEntry", environmentShow: "environmentShow", environmentLabel: "environmentLabel", actions: "actions" }, viewQueries: [{ propertyName: "aclEntriesList", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "\n<fs-list [config]=\"aclEntriesConfig\">\n  <fs-list-column>\n    <ng-template fs-list-header>Context</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div\n        *ngIf=\"row.object; else elseObject\"\n        fxLayout=\"row\"\n        fxLayoutAlign=\"start center\"\n        fxLayoutGap=\"10px\">\n          <fs-badge *ngIf=\"row.object.imageUrl\" shape=\"circle\" image=\"{{ row.object.imageUrl }}\"></fs-badge>\n          <span>\n            <div><small>{{ row.object.className }}</small></div>\n            <a (click)=\"update(row)\">{{ row.object.name }}</a>\n          </span>\n      </div>\n\n      <ng-template #elseObject>\n        <a (click)=\"update(row)\">App</a>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column [show]=\"environmentShow\">\n    <ng-template fs-list-header>{{environmentLabel}}</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.environment?.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Roles</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div fxLayout=\"column\" fxLayoutGap=\"10px\">\n        <div div *ngFor=\"let aclEntry of row.aclEntries\">\n          <ng-container [ngSwitch]=\"row.level\">\n            <ng-container *ngSwitchCase=\"'app'\">\n              <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\" objectName=\"App\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n            </ng-container>\n            <ng-container *ngSwitchDefault>\n              <ng-container *ngIf=\"row.object\">\n                <fs-acl-role-popover [aclRole]=\"aclEntry.aclRole\">{{aclEntry.aclRole.name}}</fs-acl-role-popover>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i12.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$1.FsBadgeComponent, selector: "fs-badge", inputs: ["color", "text", "tooltip", "size", "shape", "image", "icon", "iconSize", "iconColor", "backgroundSize"] }, { type: FsAclRolePopoverComponent, selector: "fs-acl-role-popover", inputs: ["aclRole", "objectName"] }], directives: [{ type: i12.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i12.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i12.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i17.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i17.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAclEntriesComponent, decorators: [{
             type: Component,
             args: [{