@valtimo/access-control-management 13.31.0 → 13.32.0

package/fesm2022/valtimo-access-control-management.mjs

@@ -1,22 +1,60 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild, NgModule } from '@angular/core';
-import { BehaviorSubject, tap, switchMap, take, catchError, of, combineLatest, map, Subject, finalize, delay, filter } from 'rxjs';
+import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild, Pipe, signal, NgModule } from '@angular/core';
+import { BehaviorSubject, tap, switchMap, take, catchError, of, shareReplay, map, combineLatest, Subject, finalize, delay, Subscription, skip, filter } from 'rxjs';
 import * as i1 from '@valtimo/shared';
 import { ROLE_ADMIN } from '@valtimo/shared';
 import * as i2 from '@angular/common/http';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5 from '@ngx-translate/core';
+import * as i4$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i3$1 from '@valtimo/components';
-import { CARBON_CONSTANTS, ViewType, CarbonListComponent, ConfirmationModalModule, EditorModule, RenderInPageHeaderDirective, OverflowMenuComponent, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, CarbonListModule } from '@valtimo/components';
-import * as i2$1 from '@angular/router';
+import * as i3 from '@valtimo/components';
+import { CARBON_CONSTANTS, ViewType, CarbonListComponent, EditorModule, OverflowMenuComponent, ConfirmationModalModule, RenderInPageHeaderDirective, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, CarbonListModule } from '@valtimo/components';
+import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { AuthGuardService } from '@valtimo/security';
-import * as i3 from 'carbon-components-angular';
-import { ButtonModule, ModalModule, InputModule, IconModule, LoadingModule, NotificationModule } from 'carbon-components-angular';
+import * as i2$1 from 'carbon-components-angular';
+import { ButtonModule, DropdownModule, IconModule, ModalModule, InputModule, LoadingModule, NotificationModule, TabsModule } from 'carbon-components-angular';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Filter16, TrashCan16 } from '@carbon/icons';
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var AccessControlEditorTab;
+(function (AccessControlEditorTab) {
+    AccessControlEditorTab["SUMMARY"] = "summary";
+    AccessControlEditorTab["JSON_EDITOR"] = "jsonEditor";
+})(AccessControlEditorTab || (AccessControlEditorTab = {}));
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -136,6 +174,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i2.HttpClient }] });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class PermissionSchemaMetadataService {
+    constructor(accessControlService) {
+        this.accessControlService = accessControlService;
+        this._knownResourceTypes$ = new BehaviorSubject(new Set());
+        this._fieldsByResourceType$ = new BehaviorSubject({});
+        this.schema$ = this.accessControlService
+            .getPermissionSchema()
+            .pipe(tap(schema => {
+            this._knownResourceTypes$.next(this.extractKnownResourceTypes(schema));
+            this._fieldsByResourceType$.next(this.extractFieldsByResourceType(schema));
+        }), shareReplay({ bufferSize: 1, refCount: false }));
+        this.actionsByResourceType$ = this.schema$.pipe(map(schema => this.extractActionsByResourceType(schema)));
+        this.allResourceTypes$ = this.actionsByResourceType$.pipe(map(actions => Object.keys(actions)));
+    }
+    isResourceTypeKnown(fqn) {
+        return this._knownResourceTypes$.value.has(fqn);
+    }
+    isFieldKnown(resourceType, field) {
+        return this._fieldsByResourceType$.value[resourceType]?.has(field) ?? false;
+    }
+    extractActionsByResourceType(schema) {
+        const branches = schema?.items?.allOf ?? [];
+        const result = {};
+        for (const branch of branches) {
+            const resourceType = branch?.if?.properties?.resourceType?.const;
+            const actions = branch?.then?.properties?.action?.enum;
+            if (resourceType && Array.isArray(actions)) {
+                result[resourceType] = [...actions];
+            }
+        }
+        return result;
+    }
+    extractKnownResourceTypes(schema) {
+        const entries = schema?.items?.properties?.resourceType?.oneOf ?? [];
+        const result = new Set();
+        for (const entry of entries) {
+            if (entry?.const)
+                result.add(entry.const);
+        }
+        return result;
+    }
+    extractFieldsByResourceType(schema) {
+        const definitions = schema?.definitions ?? {};
+        const result = {};
+        for (const [key, def] of Object.entries(definitions)) {
+            if (!key.startsWith('condList.'))
+                continue;
+            const resourceType = key.substring('condList.'.length);
+            const fields = new Set();
+            for (const variant of def?.items?.oneOf ?? []) {
+                for (const part of variant?.allOf ?? []) {
+                    for (const f of part?.properties?.field?.enum ?? [])
+                        fields.add(f);
+                }
+            }
+            result[resourceType] = fields;
+        }
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PermissionSchemaMetadataService, deps: [{ token: AccessControlService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PermissionSchemaMetadataService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PermissionSchemaMetadataService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: AccessControlService }] });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -256,7 +376,7 @@ class RoleMetadataModalComponent {
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RoleMetadataModalComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: RoleMetadataModalComponent, isStandalone: false, selector: "valtimo-role-metadata-modal", inputs: { open: "open", type: "type", defaultKeyValue: "defaultKeyValue" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{\n    isAdd: type === 'add',\n  } as vars\"\n  [open]=\"open\"\n  showFooter=\"true\"\n  [title]=\"vars.title\"\n  valtimoCdsModal\n  (close)=\"onCancel()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCancel()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        vars.isAdd\n          ? ('accessControl.roles.add' | translate)\n          : ('accessControl.roles.editRole' | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"form\">\n      <cds-label [invalid]=\"key.dirty && key.invalid\">\n        {{ 'accessControl.roles.name' | translate }}\n\n        <input\n          formControlName=\"key\"\n          cdsText\n          placeholder=\"{{ 'accessControl.roles.name' | translate }}\"\n          [attr.modal-primary-focus]=\"true\"\n          [invalid]=\"key.dirty && key.invalid\"\n        />\n      </cds-label>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCancel()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button [disabled]=\"this.form.invalid\" (click)=\"onConfirm()\" cdsButton=\"primary\">\n      {{ vars.isAdd ? ('interface.create' | translate) : ('interface.save' | translate) }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: RoleMetadataModalComponent, isStandalone: false, selector: "valtimo-role-metadata-modal", inputs: { open: "open", type: "type", defaultKeyValue: "defaultKeyValue" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{\n    isAdd: type === 'add',\n  } as vars\"\n  [open]=\"open\"\n  showFooter=\"true\"\n  [title]=\"vars.title\"\n  valtimoCdsModal\n  (close)=\"onCancel()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCancel()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        vars.isAdd\n          ? ('accessControl.roles.add' | translate)\n          : ('accessControl.roles.editRole' | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"form\">\n      <cds-label [invalid]=\"key.dirty && key.invalid\">\n        {{ 'accessControl.roles.name' | translate }}\n\n        <input\n          formControlName=\"key\"\n          cdsText\n          placeholder=\"{{ 'accessControl.roles.name' | translate }}\"\n          [attr.modal-primary-focus]=\"true\"\n          [invalid]=\"key.dirty && key.invalid\"\n        />\n      </cds-label>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCancel()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button [disabled]=\"this.form.invalid\" (click)=\"onConfirm()\" cdsButton=\"primary\">\n      {{ vars.isAdd ? ('interface.create' | translate) : ('interface.save' | translate) }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RoleMetadataModalComponent, decorators: [{
             type: Component,
@@ -294,7 +414,7 @@ class DeleteRoleModalComponent {
         this.deleteEvent.emit(roles);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DeleteRoleModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DeleteRoleModalComponent, isStandalone: false, selector: "valtimo-delete-role-modal", inputs: { deleteRowKeys: "deleteRowKeys", showDeleteModal$: "showDeleteModal$" }, outputs: { deleteEvent: "deleteEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"accessControl.roles.deleteModalContent\"\n  [outputOnConfirm]=\"deleteRowKeys\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete($event)\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "component", type: i3$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DeleteRoleModalComponent, isStandalone: false, selector: "valtimo-delete-role-modal", inputs: { deleteRowKeys: "deleteRowKeys", showDeleteModal$: "showDeleteModal$" }, outputs: { deleteEvent: "deleteEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"accessControl.roles.deleteModalContent\"\n  [outputOnConfirm]=\"deleteRowKeys\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDelete($event)\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "component", type: i3.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DeleteRoleModalComponent, decorators: [{
             type: Component,
@@ -359,7 +479,7 @@ class ExportRoleModalComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ExportRoleModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ExportRoleModalComponent, isStandalone: false, selector: "valtimo-export-role-modal", inputs: { open: "open", exportRowKeys: "exportRowKeys", reset$: "reset$", disabled: "disabled" }, outputs: { exportEvent: "exportEvent", closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{title: ('interface.export' | translate), selectedType: selectedType$ | async} as vars\"\n  valtimoCdsModal\n  [open]=\"open\"\n  size=\"sm\"\n  showFooter=\"true\"\n  [title]=\"vars.title\"\n  (close)=\"onCancel()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCancel()\">\n    <h3 cdsModalHeaderHeading>\n      {{ vars.title }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <div class=\"export-buttons\">\n      <button [disabled]=\"disabled\" cdsButton=\"secondary\" (click)=\"selectType('unified')\">\n        {{ 'accessControl.roles.singleExport' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"document\" size=\"16\"></svg>\n      </button>\n\n      <button [disabled]=\"disabled\" cdsButton=\"secondary\" (click)=\"selectType('separate')\">\n        {{ 'accessControl.roles.multipleExport' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"copy--file\" size=\"16\"></svg>\n      </button>\n    </div>\n  </section>\n\n  <cds-modal-footer>\n    <button [disabled]=\"disabled\" cdsButton=\"secondary\" (click)=\"onCancel()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      [disabled]=\"!vars.selectedType || disabled\"\n      cdsButton=\"primary\"\n      (click)=\"onConfirm(vars.selectedType)\"\n    >\n      {{ vars.title }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".export-buttons{display:grid;width:100%;grid-template-columns:1fr 1fr;column-gap:16px}.export-buttons button{width:100%}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ExportRoleModalComponent, isStandalone: false, selector: "valtimo-export-role-modal", inputs: { open: "open", exportRowKeys: "exportRowKeys", reset$: "reset$", disabled: "disabled" }, outputs: { exportEvent: "exportEvent", closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{title: ('interface.export' | translate), selectedType: selectedType$ | async} as vars\"\n  valtimoCdsModal\n  [open]=\"open\"\n  size=\"sm\"\n  showFooter=\"true\"\n  [title]=\"vars.title\"\n  (close)=\"onCancel()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCancel()\">\n    <h3 cdsModalHeaderHeading>\n      {{ vars.title }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <div class=\"export-buttons\">\n      <button [disabled]=\"disabled\" cdsButton=\"secondary\" (click)=\"selectType('unified')\">\n        {{ 'accessControl.roles.singleExport' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"document\" size=\"16\"></svg>\n      </button>\n\n      <button [disabled]=\"disabled\" cdsButton=\"secondary\" (click)=\"selectType('separate')\">\n        {{ 'accessControl.roles.multipleExport' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"copy--file\" size=\"16\"></svg>\n      </button>\n    </div>\n  </section>\n\n  <cds-modal-footer>\n    <button [disabled]=\"disabled\" cdsButton=\"secondary\" (click)=\"onCancel()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      [disabled]=\"!vars.selectedType || disabled\"\n      cdsButton=\"primary\"\n      (click)=\"onConfirm(vars.selectedType)\"\n    >\n      {{ vars.title }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".export-buttons{display:grid;width:100%;grid-template-columns:1fr 1fr;column-gap:16px}.export-buttons button{width:100%}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ExportRoleModalComponent, decorators: [{
             type: Component,
@@ -470,17 +590,494 @@ class AccessControlOverviewComponent {
     setSelectedRoleKeys() {
         this.selectedRowKeys$.next(this.carbonList.selectedItems.map((role) => role.roleKey));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlOverviewComponent, deps: [{ token: AccessControlService }, { token: AccessControlExportService }, { token: i2$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: AccessControlOverviewComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [header]=\"false\"\n  [items]=\"roles$ | async\"\n  [fields]=\"fields\"\n  [loading]=\"loading$ | async\"\n  [showSelectionColumn]=\"true\"\n  (rowClicked)=\"onRowClick($event)\"\n>\n  <ng-container header> {{ 'accessControl.roles.title' | translate }} </ng-container>\n\n  <div carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addRoleButton\"></ng-container>\n  </div>\n\n  <ng-container carbonToolbarActions>\n    <button cdsButton=\"primary\" (click)=\"showDeleteModal()\">\n      {{ 'interface.delete' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" (click)=\"showExportModal()\">\n      {{ 'interface.export' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addRoleButton\"\n    description=\"{{ 'accessControl.roles.noResults.description' | translate }}\"\n    title=\"{{ 'accessControl.roles.noResults.title' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-role-metadata-modal\n  [open]=\"showAddModal$ | async\"\n  (closeEvent)=\"onAdd($event)\"\n></valtimo-role-metadata-modal>\n\n<ng-container *ngIf=\"{selectedRowKeys: selectedRowKeys$ | async} as obs\">\n  <valtimo-delete-role-modal\n    [deleteRowKeys]=\"obs.selectedRowKeys\"\n    [showDeleteModal$]=\"showDeleteModal$\"\n    (deleteEvent)=\"onDelete($event)\"\n  >\n  </valtimo-delete-role-modal>\n\n  <valtimo-export-role-modal\n    [disabled]=\"exportDisabled$ | async\"\n    [exportRowKeys]=\"obs.selectedRowKeys\"\n    [open]=\"showExportModal$ | async\"\n    [reset$]=\"resetExportType$\"\n    (exportEvent)=\"onExport($event)\"\n    (closeEvent)=\"closeExportModal()\"\n  >\n  </valtimo-export-role-modal>\n</ng-container>\n\n<ng-template #addRoleButton>\n  <button cdsButton=\"primary\" (click)=\"openAddModal()\">\n    {{ 'accessControl.roles.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: RoleMetadataModalComponent, selector: "valtimo-role-metadata-modal", inputs: ["open", "type", "defaultKeyValue"], outputs: ["closeEvent"] }, { kind: "component", type: DeleteRoleModalComponent, selector: "valtimo-delete-role-modal", inputs: ["deleteRowKeys", "showDeleteModal$"], outputs: ["deleteEvent"] }, { kind: "component", type: ExportRoleModalComponent, selector: "valtimo-export-role-modal", inputs: ["open", "exportRowKeys", "reset$", "disabled"], outputs: ["exportEvent", "closeEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlOverviewComponent, deps: [{ token: AccessControlService }, { token: AccessControlExportService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: AccessControlOverviewComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [header]=\"false\"\n  [items]=\"roles$ | async\"\n  [fields]=\"fields\"\n  [loading]=\"loading$ | async\"\n  [showSelectionColumn]=\"true\"\n  (rowClicked)=\"onRowClick($event)\"\n>\n  <ng-container header> {{ 'accessControl.roles.title' | translate }} </ng-container>\n\n  <div carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addRoleButton\"></ng-container>\n  </div>\n\n  <ng-container carbonToolbarActions>\n    <button cdsButton=\"primary\" (click)=\"showDeleteModal()\">\n      {{ 'interface.delete' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" (click)=\"showExportModal()\">\n      {{ 'interface.export' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addRoleButton\"\n    description=\"{{ 'accessControl.roles.noResults.description' | translate }}\"\n    title=\"{{ 'accessControl.roles.noResults.title' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-role-metadata-modal\n  [open]=\"showAddModal$ | async\"\n  (closeEvent)=\"onAdd($event)\"\n></valtimo-role-metadata-modal>\n\n<ng-container *ngIf=\"{selectedRowKeys: selectedRowKeys$ | async} as obs\">\n  <valtimo-delete-role-modal\n    [deleteRowKeys]=\"obs.selectedRowKeys\"\n    [showDeleteModal$]=\"showDeleteModal$\"\n    (deleteEvent)=\"onDelete($event)\"\n  >\n  </valtimo-delete-role-modal>\n\n  <valtimo-export-role-modal\n    [disabled]=\"exportDisabled$ | async\"\n    [exportRowKeys]=\"obs.selectedRowKeys\"\n    [open]=\"showExportModal$ | async\"\n    [reset$]=\"resetExportType$\"\n    (exportEvent)=\"onExport($event)\"\n    (closeEvent)=\"closeExportModal()\"\n  >\n  </valtimo-export-role-modal>\n</ng-container>\n\n<ng-template #addRoleButton>\n  <button cdsButton=\"primary\" (click)=\"openAddModal()\">\n    {{ 'accessControl.roles.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: RoleMetadataModalComponent, selector: "valtimo-role-metadata-modal", inputs: ["open", "type", "defaultKeyValue"], outputs: ["closeEvent"] }, { kind: "component", type: DeleteRoleModalComponent, selector: "valtimo-delete-role-modal", inputs: ["deleteRowKeys", "showDeleteModal$"], outputs: ["deleteEvent"] }, { kind: "component", type: ExportRoleModalComponent, selector: "valtimo-export-role-modal", inputs: ["open", "exportRowKeys", "reset$", "disabled"], outputs: ["exportEvent", "closeEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlOverviewComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [header]=\"false\"\n  [items]=\"roles$ | async\"\n  [fields]=\"fields\"\n  [loading]=\"loading$ | async\"\n  [showSelectionColumn]=\"true\"\n  (rowClicked)=\"onRowClick($event)\"\n>\n  <ng-container header> {{ 'accessControl.roles.title' | translate }} </ng-container>\n\n  <div carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addRoleButton\"></ng-container>\n  </div>\n\n  <ng-container carbonToolbarActions>\n    <button cdsButton=\"primary\" (click)=\"showDeleteModal()\">\n      {{ 'interface.delete' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" (click)=\"showExportModal()\">\n      {{ 'interface.export' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addRoleButton\"\n    description=\"{{ 'accessControl.roles.noResults.description' | translate }}\"\n    title=\"{{ 'accessControl.roles.noResults.title' | translate }}\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-role-metadata-modal\n  [open]=\"showAddModal$ | async\"\n  (closeEvent)=\"onAdd($event)\"\n></valtimo-role-metadata-modal>\n\n<ng-container *ngIf=\"{selectedRowKeys: selectedRowKeys$ | async} as obs\">\n  <valtimo-delete-role-modal\n    [deleteRowKeys]=\"obs.selectedRowKeys\"\n    [showDeleteModal$]=\"showDeleteModal$\"\n    (deleteEvent)=\"onDelete($event)\"\n  >\n  </valtimo-delete-role-modal>\n\n  <valtimo-export-role-modal\n    [disabled]=\"exportDisabled$ | async\"\n    [exportRowKeys]=\"obs.selectedRowKeys\"\n    [open]=\"showExportModal$ | async\"\n    [reset$]=\"resetExportType$\"\n    (exportEvent)=\"onExport($event)\"\n    (closeEvent)=\"closeExportModal()\"\n  >\n  </valtimo-export-role-modal>\n</ng-container>\n\n<ng-template #addRoleButton>\n  <button cdsButton=\"primary\" (click)=\"openAddModal()\">\n    {{ 'accessControl.roles.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: AccessControlService }, { type: AccessControlExportService }, { type: i2$1.Router }], propDecorators: { carbonList: [{
+        }], ctorParameters: () => [{ type: AccessControlService }, { type: AccessControlExportService }, { type: i1$2.Router }], propDecorators: { carbonList: [{
                 type: ViewChild,
                 args: [CarbonListComponent]
             }] } });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const OPERATOR_LABEL = {
+    '==': 'accessControl.overview.operators.eq',
+    '!=': 'accessControl.overview.operators.neq',
+    '>': 'accessControl.overview.operators.gt',
+    '>=': 'accessControl.overview.operators.gte',
+    '<': 'accessControl.overview.operators.lt',
+    '<=': 'accessControl.overview.operators.lte',
+    in: 'accessControl.overview.operators.in',
+    list_contains: 'accessControl.overview.operators.list_contains',
+};
+const NO_CONTEXT_RESOURCE_TYPE = 'com.ritense.authorization.NoContext';
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const SPECIAL_VALUE_PATTERN = /^\$\{([A-Za-z_$][A-Za-z0-9_$]*)\}$/;
+function lowerFirst(s) {
+    return s.charAt(0).toLowerCase() + s.slice(1);
+}
+function upperFirst(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+function resourceTypeI18nKey(fqn) {
+    const lastSegment = fqn.split('.').pop();
+    if (!lastSegment)
+        return null;
+    return `accessControl.resourceTypes.${lowerFirst(lastSegment)}`;
+}
+function fieldI18nKey(resourceType, field) {
+    const resourceSegment = resourceType.split('.').pop();
+    if (!resourceSegment || !field)
+        return null;
+    const fieldSegment = field
+        .split('.')
+        .map((part, i) => (i === 0 ? part : upperFirst(part)))
+        .join('');
+    return `accessControl.overview.fields.${lowerFirst(resourceSegment)}.${fieldSegment}`;
+}
+function tryTranslate(translate, key) {
+    const translated = translate.instant(key);
+    return translated === key ? null : translated;
+}
+function formatResourceType(translate, fqn) {
+    const key = resourceTypeI18nKey(fqn);
+    const translated = key ? tryTranslate(translate, key) : null;
+    if (translated !== null)
+        return translated;
+    const segments = fqn.split('.');
+    return segments[segments.length - 1] || fqn;
+}
+function formatField(translate, resourceType, field) {
+    const key = fieldI18nKey(resourceType, field);
+    const translated = key ? tryTranslate(translate, key) : null;
+    if (translated !== null)
+        return translated;
+    return humanizeFieldPath(field);
+}
+function formatOperator(translate, operator) {
+    const key = OPERATOR_LABEL[operator];
+    return key ? translate.instant(key) : operator;
+}
+function formatValue(translate, value) {
+    if (value === null) {
+        return translate.instant('accessControl.overview.specialValues.null');
+    }
+    if (typeof value === 'string') {
+        if (value === '')
+            return translate.instant('accessControl.overview.specialValues.empty');
+        const match = SPECIAL_VALUE_PATTERN.exec(value);
+        if (match) {
+            const key = `accessControl.overview.specialValues.${match[1]}`;
+            const translated = tryTranslate(translate, key);
+            if (translated !== null)
+                return translated;
+        }
+        return value;
+    }
+    if (Array.isArray(value)) {
+        return value.map(item => formatValue(translate, item)).join(', ');
+    }
+    return String(value);
+}
+function humanizeFieldPath(field) {
+    return field
+        .split('.')
+        .map(part => part.replace(/([a-z0-9])([A-Z])/g, '$1 $2').toLowerCase())
+        .join(' ');
+}
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class AccessControlJsonEditorTabComponent {
+    constructor(activatedRoute, iconService, metadataService, router, translateService) {
+        this.activatedRoute = activatedRoute;
+        this.iconService = iconService;
+        this.metadataService = metadataService;
+        this.router = router;
+        this.translateService = translateService;
+        this.disabled = false;
+        this.validEvent = new EventEmitter();
+        this.valueChangeEvent = new EventEmitter();
+        this._sourceModel$ = new BehaviorSubject(null);
+        this._filter$ = new BehaviorSubject({
+            resourceType: null,
+            action: null,
+        });
+        this._subscriptions = new Subscription();
+        this.isFilterActive$ = this._filter$.pipe(map(({ resourceType, action }) => !!resourceType || !!action));
+        this.resourceTypeItems$ = combineLatest([
+            this._sourceModel$,
+            this._filter$,
+        ]).pipe(map(([sourceModel, currentFilter]) => {
+            const permissions = this.parsePermissions(sourceModel);
+            const resourceTypes = Array.from(new Set(permissions.map(p => p.resourceType).filter(Boolean))).sort();
+            return resourceTypes.map(resourceType => ({
+                content: formatResourceType(this.translateService, resourceType),
+                resourceType,
+                selected: currentFilter.resourceType === resourceType,
+            }));
+        }));
+        this.actionItems$ = combineLatest([
+            this._sourceModel$,
+            this._filter$,
+        ]).pipe(map(([sourceModel, currentFilter]) => {
+            const permissions = this.parsePermissions(sourceModel);
+            const scoped = currentFilter.resourceType
+                ? permissions.filter(p => p.resourceType === currentFilter.resourceType)
+                : permissions;
+            const actions = Array.from(new Set(scoped.flatMap(p => [...(p.actions ?? []), ...(p.action ? [p.action] : [])]))).sort();
+            return actions.map(action => ({
+                content: this.translateService.instant(`accessControl.actions.${action}`),
+                action,
+                selected: currentFilter.action === action,
+            }));
+        }));
+        this.filteredModel$ = combineLatest([
+            this._sourceModel$,
+            this._filter$,
+        ]).pipe(map(([sourceModel, currentFilter]) => {
+            if (!sourceModel)
+                return null;
+            if (!currentFilter.resourceType && !currentFilter.action)
+                return sourceModel;
+            const permissions = this.parsePermissions(sourceModel);
+            const filtered = permissions.filter(permission => {
+                const resourceMatch = !currentFilter.resourceType || permission.resourceType === currentFilter.resourceType;
+                const actionMatch = !currentFilter.action ||
+                    (permission.actions ?? []).includes(currentFilter.action) ||
+                    permission.action === currentFilter.action;
+                return resourceMatch && actionMatch;
+            });
+            return {
+                ...sourceModel,
+                value: JSON.stringify(filtered, null, 2),
+            };
+        }));
+        this.editorDisabled$ = this._filter$.pipe(map(({ resourceType, action }) => !!resourceType || !!action));
+        this.permissionSchema$ = this.metadataService.schema$;
+        this.iconService.registerAll([Filter16, TrashCan16]);
+    }
+    ngOnInit() {
+        this.activatedRoute.queryParamMap.pipe(take(1)).subscribe(params => {
+            this._filter$.next({
+                resourceType: params.get('filterResourceType'),
+                action: params.get('filterAction'),
+            });
+        });
+        this._subscriptions.add(this._filter$.pipe(skip(1)).subscribe(currentFilter => {
+            this.router.navigate([], {
+                relativeTo: this.activatedRoute,
+                queryParams: {
+                    filterResourceType: currentFilter.resourceType ?? null,
+                    filterAction: currentFilter.action ?? null,
+                },
+                queryParamsHandling: 'merge',
+                replaceUrl: true,
+            });
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes['model']) {
+            this._sourceModel$.next(this.model);
+        }
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onValid(valid) {
+        this.validEvent.emit(valid);
+    }
+    onValueChange(value) {
+        if (this._filter$.getValue().resourceType || this._filter$.getValue().action)
+            return;
+        this.valueChangeEvent.emit(value);
+    }
+    onResourceTypeSelected(event) {
+        const resourceType = event.item?.resourceType ?? null;
+        this._filter$.next({ ...this._filter$.getValue(), resourceType, action: null });
+    }
+    onActionSelected(event) {
+        const action = event.item?.action ?? null;
+        this._filter$.next({ ...this._filter$.getValue(), action });
+    }
+    onClearFilter() {
+        this._filter$.next({ resourceType: null, action: null });
+    }
+    parsePermissions(model) {
+        if (!model?.value)
+            return [];
+        try {
+            const parsed = JSON.parse(model.value);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlJsonEditorTabComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.IconService }, { token: PermissionSchemaMetadataService }, { token: i1$2.Router }, { token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: AccessControlJsonEditorTabComponent, isStandalone: true, selector: "valtimo-access-control-json-editor-tab", inputs: { disabled: "disabled", model: "model" }, outputs: { validEvent: "validEvent", valueChangeEvent: "valueChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    filteredModel: filteredModel$ | async,\n    editorDisabled: editorDisabled$ | async,\n    permissionSchema: permissionSchema$ | async,\n  } as obs\"\n  class=\"json-editor-tab\"\n>\n  <div class=\"json-editor-tab__toolbar\">\n    <v-overflow-menu placement=\"bottom-end\" [closeOnSelect]=\"false\">\n      <button\n        overflowTrigger\n        cdsButton=\"ghost\"\n        class=\"json-editor-tab__filter-trigger\"\n        [class.json-editor-tab__filter-trigger--active]=\"isFilterActive$ | async\"\n        [iconOnly]=\"true\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <div overflowPane>\n        <ng-container *ngTemplateOutlet=\"filterPane\"></ng-container>\n      </div>\n    </v-overflow-menu>\n  </div>\n\n  <valtimo-editor\n    *ngIf=\"obs.permissionSchema\"\n    [disabled]=\"obs.editorDisabled || disabled\"\n    [fitPage]=\"true\"\n    [jsonSchema]=\"obs.permissionSchema\"\n    [model]=\"obs.filteredModel\"\n    (validEvent)=\"onValid($event)\"\n    (valueChangeEvent)=\"onValueChange($event)\"\n  ></valtimo-editor>\n</div>\n\n<ng-template #filterPane>\n  <form class=\"json-editor-tab__filter\" (click)=\"$event.stopImmediatePropagation()\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      [label]=\"'accessControl.filter.resourceType' | translate\"\n      [placeholder]=\"'accessControl.filter.allResourceTypes' | translate\"\n      (selected)=\"onResourceTypeSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"resourceTypeItems$ | async\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [appendInline]=\"true\"\n      [label]=\"'accessControl.filter.action' | translate\"\n      [placeholder]=\"'accessControl.filter.allActions' | translate\"\n      (selected)=\"onActionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"actionItems$ | async\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n      {{ 'interface.clear' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </form>\n</ng-template>\n", styles: [":host{display:block;height:100%}.json-editor-tab{display:flex;flex-direction:column;height:100%}.json-editor-tab__toolbar{display:flex;justify-content:flex-end;padding:.25rem 0}.json-editor-tab__filter-trigger{position:relative}.json-editor-tab__filter-trigger--active:after{content:\"\";position:absolute;top:.375rem;right:.375rem;width:.5rem;height:.5rem;border-radius:50%;background-color:var(--cds-support-info, #0f62fe)}.json-editor-tab__filter{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-width:16rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i3.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageSpaceAdjustment"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlJsonEditorTabComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-access-control-json-editor-tab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ButtonModule,
+                        DropdownModule,
+                        EditorModule,
+                        IconModule,
+                        OverflowMenuComponent,
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    filteredModel: filteredModel$ | async,\n    editorDisabled: editorDisabled$ | async,\n    permissionSchema: permissionSchema$ | async,\n  } as obs\"\n  class=\"json-editor-tab\"\n>\n  <div class=\"json-editor-tab__toolbar\">\n    <v-overflow-menu placement=\"bottom-end\" [closeOnSelect]=\"false\">\n      <button\n        overflowTrigger\n        cdsButton=\"ghost\"\n        class=\"json-editor-tab__filter-trigger\"\n        [class.json-editor-tab__filter-trigger--active]=\"isFilterActive$ | async\"\n        [iconOnly]=\"true\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <div overflowPane>\n        <ng-container *ngTemplateOutlet=\"filterPane\"></ng-container>\n      </div>\n    </v-overflow-menu>\n  </div>\n\n  <valtimo-editor\n    *ngIf=\"obs.permissionSchema\"\n    [disabled]=\"obs.editorDisabled || disabled\"\n    [fitPage]=\"true\"\n    [jsonSchema]=\"obs.permissionSchema\"\n    [model]=\"obs.filteredModel\"\n    (validEvent)=\"onValid($event)\"\n    (valueChangeEvent)=\"onValueChange($event)\"\n  ></valtimo-editor>\n</div>\n\n<ng-template #filterPane>\n  <form class=\"json-editor-tab__filter\" (click)=\"$event.stopImmediatePropagation()\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      [label]=\"'accessControl.filter.resourceType' | translate\"\n      [placeholder]=\"'accessControl.filter.allResourceTypes' | translate\"\n      (selected)=\"onResourceTypeSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"resourceTypeItems$ | async\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [appendInline]=\"true\"\n      [label]=\"'accessControl.filter.action' | translate\"\n      [placeholder]=\"'accessControl.filter.allActions' | translate\"\n      (selected)=\"onActionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"actionItems$ | async\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n      {{ 'interface.clear' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </form>\n</ng-template>\n", styles: [":host{display:block;height:100%}.json-editor-tab{display:flex;flex-direction:column;height:100%}.json-editor-tab__toolbar{display:flex;justify-content:flex-end;padding:.25rem 0}.json-editor-tab__filter-trigger{position:relative}.json-editor-tab__filter-trigger--active:after{content:\"\";position:absolute;top:.375rem;right:.375rem;width:.5rem;height:.5rem;border-radius:50%;background-color:var(--cds-support-info, #0f62fe)}.json-editor-tab__filter{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-width:16rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2$1.IconService }, { type: PermissionSchemaMetadataService }, { type: i1$2.Router }, { type: i4$1.TranslateService }], propDecorators: { disabled: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], validEvent: [{
+                type: Output
+            }], valueChangeEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ResourceTypeLabelPipe {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    transform(fqn) {
+        if (!fqn)
+            return '';
+        return formatResourceType(this.translateService, fqn);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ResourceTypeLabelPipe, deps: [{ token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ResourceTypeLabelPipe, isStandalone: true, name: "resourceTypeLabel" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ResourceTypeLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'resourceTypeLabel',
+                }]
+        }], ctorParameters: () => [{ type: i4$1.TranslateService }] });
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class AccessControlOverviewTabComponent {
+    set permissions(value) {
+        this._permissions$.next(value ?? []);
+    }
+    constructor(metadataService, translateService) {
+        this.metadataService = metadataService;
+        this.translateService = translateService;
+        this.roleKey = null;
+        this._permissions$ = new BehaviorSubject([]);
+        this.overview$ = combineLatest([
+            this._permissions$,
+            this.metadataService.allResourceTypes$,
+            this.metadataService.actionsByResourceType$,
+        ]).pipe(map(([permissions, allResourceTypes, actionsByResourceType]) => this.buildOverview(permissions, allResourceTypes, actionsByResourceType)));
+    }
+    formatConditions(conditions, resourceType) {
+        return (conditions ?? []).map(condition => this.formatCondition(condition, resourceType));
+    }
+    isNoContext(contextResourceType) {
+        return contextResourceType === NO_CONTEXT_RESOURCE_TYPE;
+    }
+    buildOverview(permissions, allResourceTypes, actionsByResourceType) {
+        const knownResourceTypes = new Set(allResourceTypes);
+        const extraResourceTypes = permissions
+            .map(p => p.resourceType)
+            .filter(rt => !!rt && !knownResourceTypes.has(rt));
+        const resourceTypes = [...allResourceTypes, ...Array.from(new Set(extraResourceTypes))];
+        return resourceTypes.map(resourceType => {
+            const forResource = permissions.filter(p => p.resourceType === resourceType);
+            const allowedActions = actionsByResourceType[resourceType] ?? [];
+            const allowedSet = new Set(allowedActions);
+            const extraActions = forResource
+                .flatMap(p => [...(p.actions ?? []), ...(p.action ? [p.action] : [])])
+                .filter(a => !!a && !allowedSet.has(a));
+            const actions = [...allowedActions, ...Array.from(new Set(extraActions))];
+            return {
+                resourceType,
+                actions: actions.map(action => ({
+                    action,
+                    grants: forResource.filter(p => this.permissionGrants(p, action)),
+                })),
+            };
+        });
+    }
+    permissionGrants(permission, action) {
+        if (permission.action === action)
+            return true;
+        return (permission.actions ?? []).includes(action);
+    }
+    formatCondition(condition, resourceType) {
+        if (condition.type === 'container') {
+            return this.formatContainer(condition);
+        }
+        if (condition.type === 'expression') {
+            return this.formatExpression(condition, resourceType);
+        }
+        return this.formatField(condition, resourceType);
+    }
+    formatField(condition, resourceType) {
+        return {
+            kind: 'field',
+            field: formatField(this.translateService, resourceType, condition.field),
+            operator: formatOperator(this.translateService, condition.operator),
+            value: formatValue(this.translateService, condition.value),
+            customField: !this.metadataService.isFieldKnown(resourceType, condition.field),
+        };
+    }
+    formatExpression(condition, resourceType) {
+        return {
+            kind: 'expression',
+            field: formatField(this.translateService, resourceType, condition.field),
+            path: condition.path,
+            operator: formatOperator(this.translateService, condition.operator),
+            value: formatValue(this.translateService, condition.value),
+            clazz: condition.clazz,
+            customField: !this.metadataService.isFieldKnown(resourceType, condition.field),
+        };
+    }
+    formatContainer(condition) {
+        return {
+            kind: 'container',
+            resourceType: condition.resourceType,
+            conditions: condition.conditions ?? [],
+            customResource: !this.metadataService.isResourceTypeKnown(condition.resourceType),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlOverviewTabComponent, deps: [{ token: PermissionSchemaMetadataService }, { token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AccessControlOverviewTabComponent, isStandalone: true, selector: "valtimo-access-control-overview-tab", inputs: { roleKey: "roleKey", permissions: "permissions" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"overview$ | async as overview\" class=\"ac\">\n  @for (resource of overview; track resource.resourceType) {\n    <section class=\"ac__group\">\n      <h4 class=\"ac__heading\">\n        @if (roleKey) {\n          <a\n            class=\"ac__heading-link\"\n            [routerLink]=\"['/access-control', roleKey, 'json-editor']\"\n            [queryParams]=\"{filterResourceType: resource.resourceType}\"\n          >\n            {{ resource.resourceType | resourceTypeLabel }}\n            <span class=\"ac__fqn\">({{ resource.resourceType }})</span>\n          </a>\n        } @else {\n          {{ resource.resourceType | resourceTypeLabel }}\n          <span class=\"ac__fqn\">({{ resource.resourceType }})</span>\n        }\n      </h4>\n\n      @for (entry of resource.actions; track entry.action) {\n        <div class=\"ac__action\">\n          @if (entry.grants.length) {\n            <span class=\"ac__connective\">{{ 'accessControl.overview.can' | translate }}</span>\n            @if (roleKey) {\n              <a\n                class=\"ac__action-link\"\n                [routerLink]=\"['/access-control', roleKey, 'json-editor']\"\n                [queryParams]=\"{\n                  filterResourceType: resource.resourceType,\n                  filterAction: entry.action,\n                }\"\n              >\n                <span class=\"ac__action-name\">{{\n                  'accessControl.actions.' + entry.action | translate\n                }}</span>\n              </a>\n            } @else {\n              <span class=\"ac__action-name\">{{\n                'accessControl.actions.' + entry.action | translate\n              }}</span>\n            }\n\n            @for (perm of entry.grants; track $index; let isFirst = $first) {\n              @if (!isFirst) {\n                <div class=\"ac__or ac__connective\">{{\n                  'accessControl.overview.or' | translate\n                }}</div>\n              }\n              <div class=\"ac__grant\">\n                @if (perm.conditions?.length) {\n                  <div class=\"ac__connective\">{{\n                    'accessControl.overview.when' | translate\n                  }}</div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      conditionsTpl;\n                      context: {\n                        conditions: perm.conditions,\n                        resourceType: perm.resourceType,\n                      }\n                    \"\n                  ></ng-container>\n                } @else if (!perm.contextResourceType) {\n                  <div class=\"ac__connective\">{{\n                    'accessControl.overview.unconditional' | translate\n                  }}</div>\n                }\n\n                @if (perm.contextResourceType) {\n                  @if (isNoContext(perm.contextResourceType)) {\n                    <div class=\"ac__connective\">{{\n                      'accessControl.overview.noContext' | translate\n                    }}</div>\n                  } @else {\n                    <div>\n                      <span class=\"ac__connective\">{{\n                        'accessControl.overview.inContextOf' | translate\n                      }}</span>\n                      <span class=\"ac__resource-type\">{{\n                        perm.contextResourceType | resourceTypeLabel\n                      }}</span>\n                      @if (perm.contextConditions?.length) {\n                        <span class=\"ac__connective\">{{\n                          'accessControl.overview.where' | translate\n                        }}</span>\n                      }\n                    </div>\n                    @if (perm.contextConditions?.length) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          conditionsTpl;\n                          context: {\n                            conditions: perm.contextConditions,\n                            resourceType: perm.contextResourceType,\n                          }\n                        \"\n                      ></ng-container>\n                    }\n                  }\n                }\n              </div>\n            }\n          } @else {\n            <span class=\"ac__no-access\">{{\n              'accessControl.overview.cannot' | translate\n            }}</span>\n            @if (roleKey) {\n              <a\n                class=\"ac__action-link\"\n                [routerLink]=\"['/access-control', roleKey, 'json-editor']\"\n                [queryParams]=\"{\n                  filterResourceType: resource.resourceType,\n                  filterAction: entry.action,\n                }\"\n              >\n                <span class=\"ac__action-name\">{{\n                  'accessControl.actions.' + entry.action | translate\n                }}</span>\n              </a>\n            } @else {\n              <span class=\"ac__action-name\">{{\n                'accessControl.actions.' + entry.action | translate\n              }}</span>\n            }\n          }\n        </div>\n      }\n    </section>\n  }\n</div>\n\n<ng-template #conditionsTpl let-conditions=\"conditions\" let-resourceType=\"resourceType\">\n  <div class=\"ac__conditions\">\n    @for (\n      condition of formatConditions(conditions, resourceType);\n      track $index;\n      let isFirst = $first\n    ) {\n      <div class=\"ac__condition\">\n        @if (!isFirst) {\n          <span class=\"ac__connective\">{{ 'accessControl.overview.and' | translate }}</span>\n        }\n        @switch (condition.kind) {\n          @case ('field') {\n            <span>{{ condition.field }}</span>\n            @if (condition.customField) {\n              <span class=\"ac__connective\">{{\n                'accessControl.overview.customField' | translate\n              }}</span>\n            }\n            <span class=\"ac__operator\">{{ condition.operator }}</span>\n            <span>{{ condition.value }}</span>\n          }\n\n          @case ('expression') {\n            <span>{{ condition.field }}</span>\n            @if (condition.customField) {\n              <span class=\"ac__connective\">{{\n                'accessControl.overview.customField' | translate\n              }}</span>\n            }\n            <span class=\"ac__connective\">{{\n              'accessControl.overview.atJsonPath' | translate\n            }}</span>\n            <code class=\"ac__path\" [title]=\"condition.clazz\">{{ condition.path }}</code>\n            <span class=\"ac__operator\">{{ condition.operator }}</span>\n            <span>{{ condition.value }}</span>\n          }\n\n          @case ('container') {\n            <span class=\"ac__connective\">{{\n              'accessControl.overview.relatedResource' | translate\n            }}</span>\n            <span class=\"ac__resource-type\">{{\n              condition.resourceType | resourceTypeLabel\n            }}</span>\n            @if (condition.customResource) {\n              <span class=\"ac__connective\">{{\n                'accessControl.overview.customResource' | translate\n              }}</span>\n            }\n            <span class=\"ac__connective\">{{\n              'accessControl.overview.where' | translate\n            }}</span>\n            <ng-container\n              *ngTemplateOutlet=\"\n                conditionsTpl;\n                context: {\n                  conditions: condition.conditions,\n                  resourceType: condition.resourceType,\n                }\n              \"\n            ></ng-container>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".ac{display:flex;flex-direction:column;gap:2rem;padding:1rem}.ac__group{display:flex;flex-direction:column;gap:.75rem}.ac__heading{border-bottom:1px solid var(--cds-border-subtle, #c6c6c6);margin:0 0 .5rem;padding-bottom:.25rem}.ac__heading-link{color:inherit;text-decoration:none}.ac__heading-link:hover,.ac__heading-link:focus-visible{text-decoration:underline}.ac__action-link{color:inherit;text-decoration:none}.ac__action-link:hover,.ac__action-link:focus-visible{text-decoration:underline}.ac__fqn{color:var(--cds-text-secondary, #525252);font-family:var(--cds-code-01-font-family, monospace);font-size:.875rem;font-weight:400;margin-left:.5rem}.ac__action{line-height:1.6}.ac__action-name,.ac__resource-type{font-weight:600}.ac__operator{font-style:italic}.ac__connective{color:var(--cds-text-secondary, #525252);font-style:italic}.ac__no-access{color:var(--cds-text-error, #da1e28);font-style:italic}.ac__grant,.ac__or,.ac__conditions{padding-left:1.5rem}.ac__path{background-color:var(--cds-layer-accent, #e0e0e0);border-radius:2px;font-family:var(--cds-code-01-font-family, monospace);padding:0 .25rem}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ResourceTypeLabelPipe, name: "resourceTypeLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlOverviewTabComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'valtimo-access-control-overview-tab', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: true, imports: [CommonModule, RouterModule, TranslateModule, ResourceTypeLabelPipe], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"overview$ | async as overview\" class=\"ac\">\n  @for (resource of overview; track resource.resourceType) {\n    <section class=\"ac__group\">\n      <h4 class=\"ac__heading\">\n        @if (roleKey) {\n          <a\n            class=\"ac__heading-link\"\n            [routerLink]=\"['/access-control', roleKey, 'json-editor']\"\n            [queryParams]=\"{filterResourceType: resource.resourceType}\"\n          >\n            {{ resource.resourceType | resourceTypeLabel }}\n            <span class=\"ac__fqn\">({{ resource.resourceType }})</span>\n          </a>\n        } @else {\n          {{ resource.resourceType | resourceTypeLabel }}\n          <span class=\"ac__fqn\">({{ resource.resourceType }})</span>\n        }\n      </h4>\n\n      @for (entry of resource.actions; track entry.action) {\n        <div class=\"ac__action\">\n          @if (entry.grants.length) {\n            <span class=\"ac__connective\">{{ 'accessControl.overview.can' | translate }}</span>\n            @if (roleKey) {\n              <a\n                class=\"ac__action-link\"\n                [routerLink]=\"['/access-control', roleKey, 'json-editor']\"\n                [queryParams]=\"{\n                  filterResourceType: resource.resourceType,\n                  filterAction: entry.action,\n                }\"\n              >\n                <span class=\"ac__action-name\">{{\n                  'accessControl.actions.' + entry.action | translate\n                }}</span>\n              </a>\n            } @else {\n              <span class=\"ac__action-name\">{{\n                'accessControl.actions.' + entry.action | translate\n              }}</span>\n            }\n\n            @for (perm of entry.grants; track $index; let isFirst = $first) {\n              @if (!isFirst) {\n                <div class=\"ac__or ac__connective\">{{\n                  'accessControl.overview.or' | translate\n                }}</div>\n              }\n              <div class=\"ac__grant\">\n                @if (perm.conditions?.length) {\n                  <div class=\"ac__connective\">{{\n                    'accessControl.overview.when' | translate\n                  }}</div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      conditionsTpl;\n                      context: {\n                        conditions: perm.conditions,\n                        resourceType: perm.resourceType,\n                      }\n                    \"\n                  ></ng-container>\n                } @else if (!perm.contextResourceType) {\n                  <div class=\"ac__connective\">{{\n                    'accessControl.overview.unconditional' | translate\n                  }}</div>\n                }\n\n                @if (perm.contextResourceType) {\n                  @if (isNoContext(perm.contextResourceType)) {\n                    <div class=\"ac__connective\">{{\n                      'accessControl.overview.noContext' | translate\n                    }}</div>\n                  } @else {\n                    <div>\n                      <span class=\"ac__connective\">{{\n                        'accessControl.overview.inContextOf' | translate\n                      }}</span>\n                      <span class=\"ac__resource-type\">{{\n                        perm.contextResourceType | resourceTypeLabel\n                      }}</span>\n                      @if (perm.contextConditions?.length) {\n                        <span class=\"ac__connective\">{{\n                          'accessControl.overview.where' | translate\n                        }}</span>\n                      }\n                    </div>\n                    @if (perm.contextConditions?.length) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          conditionsTpl;\n                          context: {\n                            conditions: perm.contextConditions,\n                            resourceType: perm.contextResourceType,\n                          }\n                        \"\n                      ></ng-container>\n                    }\n                  }\n                }\n              </div>\n            }\n          } @else {\n            <span class=\"ac__no-access\">{{\n              'accessControl.overview.cannot' | translate\n            }}</span>\n            @if (roleKey) {\n              <a\n                class=\"ac__action-link\"\n                [routerLink]=\"['/access-control', roleKey, 'json-editor']\"\n                [queryParams]=\"{\n                  filterResourceType: resource.resourceType,\n                  filterAction: entry.action,\n                }\"\n              >\n                <span class=\"ac__action-name\">{{\n                  'accessControl.actions.' + entry.action | translate\n                }}</span>\n              </a>\n            } @else {\n              <span class=\"ac__action-name\">{{\n                'accessControl.actions.' + entry.action | translate\n              }}</span>\n            }\n          }\n        </div>\n      }\n    </section>\n  }\n</div>\n\n<ng-template #conditionsTpl let-conditions=\"conditions\" let-resourceType=\"resourceType\">\n  <div class=\"ac__conditions\">\n    @for (\n      condition of formatConditions(conditions, resourceType);\n      track $index;\n      let isFirst = $first\n    ) {\n      <div class=\"ac__condition\">\n        @if (!isFirst) {\n          <span class=\"ac__connective\">{{ 'accessControl.overview.and' | translate }}</span>\n        }\n        @switch (condition.kind) {\n          @case ('field') {\n            <span>{{ condition.field }}</span>\n            @if (condition.customField) {\n              <span class=\"ac__connective\">{{\n                'accessControl.overview.customField' | translate\n              }}</span>\n            }\n            <span class=\"ac__operator\">{{ condition.operator }}</span>\n            <span>{{ condition.value }}</span>\n          }\n\n          @case ('expression') {\n            <span>{{ condition.field }}</span>\n            @if (condition.customField) {\n              <span class=\"ac__connective\">{{\n                'accessControl.overview.customField' | translate\n              }}</span>\n            }\n            <span class=\"ac__connective\">{{\n              'accessControl.overview.atJsonPath' | translate\n            }}</span>\n            <code class=\"ac__path\" [title]=\"condition.clazz\">{{ condition.path }}</code>\n            <span class=\"ac__operator\">{{ condition.operator }}</span>\n            <span>{{ condition.value }}</span>\n          }\n\n          @case ('container') {\n            <span class=\"ac__connective\">{{\n              'accessControl.overview.relatedResource' | translate\n            }}</span>\n            <span class=\"ac__resource-type\">{{\n              condition.resourceType | resourceTypeLabel\n            }}</span>\n            @if (condition.customResource) {\n              <span class=\"ac__connective\">{{\n                'accessControl.overview.customResource' | translate\n              }}</span>\n            }\n            <span class=\"ac__connective\">{{\n              'accessControl.overview.where' | translate\n            }}</span>\n            <ng-container\n              *ngTemplateOutlet=\"\n                conditionsTpl;\n                context: {\n                  conditions: condition.conditions,\n                  resourceType: condition.resourceType,\n                }\n              \"\n            ></ng-container>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".ac{display:flex;flex-direction:column;gap:2rem;padding:1rem}.ac__group{display:flex;flex-direction:column;gap:.75rem}.ac__heading{border-bottom:1px solid var(--cds-border-subtle, #c6c6c6);margin:0 0 .5rem;padding-bottom:.25rem}.ac__heading-link{color:inherit;text-decoration:none}.ac__heading-link:hover,.ac__heading-link:focus-visible{text-decoration:underline}.ac__action-link{color:inherit;text-decoration:none}.ac__action-link:hover,.ac__action-link:focus-visible{text-decoration:underline}.ac__fqn{color:var(--cds-text-secondary, #525252);font-family:var(--cds-code-01-font-family, monospace);font-size:.875rem;font-weight:400;margin-left:.5rem}.ac__action{line-height:1.6}.ac__action-name,.ac__resource-type{font-weight:600}.ac__operator{font-style:italic}.ac__connective{color:var(--cds-text-secondary, #525252);font-style:italic}.ac__no-access{color:var(--cds-text-error, #da1e28);font-style:italic}.ac__grant,.ac__or,.ac__conditions{padding-left:1.5rem}.ac__path{background-color:var(--cds-layer-accent, #e0e0e0);border-radius:2px;font-family:var(--cds-code-01-font-family, monospace);padding:0 .25rem}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: PermissionSchemaMetadataService }, { type: i4$1.TranslateService }], propDecorators: { roleKey: [{
+                type: Input
+            }], permissions: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -507,6 +1104,7 @@ class AccessControlEditorComponent {
         this.accessControlExportService = accessControlExportService;
         this.pageHeaderService = pageHeaderService;
         this.model$ = new BehaviorSubject(null);
+        this.permissions$ = new BehaviorSubject(null);
         this.roleKey$ = new BehaviorSubject(null);
         this.saveDisabled$ = new BehaviorSubject(true);
         this.editorDisabled$ = new BehaviorSubject(false);
@@ -515,10 +1113,12 @@ class AccessControlEditorComponent {
         this.showEditModal$ = new BehaviorSubject(false);
         this.selectedRowKeys$ = new BehaviorSubject(null);
         this.compactMode$ = this.pageHeaderService.compactMode$;
-        this.schema$ = this.accessControlService.getPermissionSchema();
+        this.$activeTab = signal(AccessControlEditorTab.SUMMARY);
+        this.AccessControlEditorTab = AccessControlEditorTab;
         this._updatedModelValue$ = new BehaviorSubject('');
     }
     ngOnInit() {
+        this.restoreActiveTabFromUrl();
         this.getPermissions();
         this.openRoleKeySubscription();
     }
@@ -580,6 +1180,31 @@ class AccessControlEditorComponent {
             this.showSuccessMessage(data.roleKey);
         });
     }
+    setActiveTab(tab) {
+        if (this.$activeTab() === tab)
+            return;
+        const roleKey = this.route.snapshot.paramMap.get('id');
+        if (!roleKey) {
+            this.$activeTab.set(tab);
+            return;
+        }
+        const segments = tab === AccessControlEditorTab.JSON_EDITOR
+            ? ['/access-control', roleKey, 'json-editor']
+            : ['/access-control', roleKey];
+        this.router.navigate(segments);
+    }
+    restoreActiveTabFromUrl() {
+        const url = this.route.snapshot.url;
+        const lastSegment = url[url.length - 1]?.path;
+        if (lastSegment === 'json-editor') {
+            this.$activeTab.set(AccessControlEditorTab.JSON_EDITOR);
+            return;
+        }
+        const params = this.route.snapshot.queryParamMap;
+        if (params.get('filterResourceType') || params.get('filterAction')) {
+            this.$activeTab.set(AccessControlEditorTab.JSON_EDITOR);
+        }
+    }
     exportPermissions() {
         this.accessControlExportService
             .exportRoles({ type: 'separate', roleKeys: [this._roleKey] })
@@ -621,6 +1246,7 @@ class AccessControlEditorComponent {
             language: 'json',
             uri: `inmemory://access-control/role-${roleKey}.access-control-permissions.json`,
         });
+        this.permissions$.next(Array.isArray(permissions) ? permissions : null);
     }
     disableMore() {
         this.moreDisabled$.next(true);
@@ -649,13 +1275,13 @@ class AccessControlEditorComponent {
             type: 'success',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlEditorComponent, deps: [{ token: AccessControlService }, { token: i2$1.ActivatedRoute }, { token: i3$1.PageTitleService }, { token: i2$1.Router }, { token: i1.GlobalNotificationService }, { token: i5.TranslateService }, { token: AccessControlExportService }, { token: i3$1.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AccessControlEditorComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@if ({model: model$ | async, schema: schema$ | async}; as obs) {\n  @if (obs.model && obs.schema) {\n    <valtimo-editor\n      [disabled]=\"editorDisabled$ | async\"\n      [model]=\"obs.model\"\n      [jsonSchema]=\"obs.schema\"\n      (validEvent)=\"onValid($event)\"\n      (valueChangeEvent)=\"onValueChange($event)\"\n      [fitPage]=\"true\"\n    ></valtimo-editor>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n  }\n}\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <div\n      *ngIf=\"{\n        model: model$ | async,\n        moreDisabled: moreDisabled$ | async,\n        compactMode: compactMode$ | async,\n      } as obs\"\n      class=\"buttons-container\"\n    >\n      <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n        <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n        <v-overflow-menu-option [disabled]=\"obs.moreDisabled\" (selected)=\"showEditModal()\">{{\n          'accessControl.roles.editMetadata' | translate\n        }}</v-overflow-menu-option>\n\n        <v-overflow-menu-option [disabled]=\"obs.moreDisabled\" (selected)=\"exportPermissions()\">{{\n          'interface.export' | translate\n        }}</v-overflow-menu-option>\n\n        <v-overflow-menu-option\n          [disabled]=\"obs.moreDisabled\"\n          type=\"danger\"\n          (selected)=\"showDeleteModal()\"\n          >{{ 'interface.delete' | translate }}</v-overflow-menu-option\n        >\n      </v-overflow-menu>\n\n      <button\n        [disabled]=\"saveDisabled$ | async\"\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"updatePermissions()\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"{selectedRowKeys: selectedRowKeys$ | async} as obs\">\n  <valtimo-delete-role-modal\n    [deleteRowKeys]=\"obs.selectedRowKeys\"\n    [showDeleteModal$]=\"showDeleteModal$\"\n    (deleteEvent)=\"onDelete($event)\"\n  >\n  </valtimo-delete-role-modal>\n\n  <valtimo-role-metadata-modal\n    [defaultKeyValue]=\"obs.selectedRowKeys[0]\"\n    [open]=\"showEditModal$ | async\"\n    type=\"edit\"\n    (closeEvent)=\"onEdit(obs.selectedRowKeys[0], $event)\"\n  ></valtimo-role-metadata-modal>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}.overflow-button{margin-right:16px}.buttons-container{display:flex;flex-direction:row;align-items:center}.buttons-container button{height:min-content}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3$1.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageSpaceAdjustment"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "directive", type: i3$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i3$1.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i3$1.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i3$1.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "component", type: RoleMetadataModalComponent, selector: "valtimo-role-metadata-modal", inputs: ["open", "type", "defaultKeyValue"], outputs: ["closeEvent"] }, { kind: "component", type: DeleteRoleModalComponent, selector: "valtimo-delete-role-modal", inputs: ["deleteRowKeys", "showDeleteModal$"], outputs: ["deleteEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlEditorComponent, deps: [{ token: AccessControlService }, { token: i1$2.ActivatedRoute }, { token: i3.PageTitleService }, { token: i1$2.Router }, { token: i1.GlobalNotificationService }, { token: i4$1.TranslateService }, { token: AccessControlExportService }, { token: i3.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: AccessControlEditorComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"model$ | async as model; else loading\">\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [active]=\"$activeTab() === AccessControlEditorTab.SUMMARY\"\n      [heading]=\"'accessControl.roles.tabs.summary' | translate\"\n      (selected)=\"setActiveTab(AccessControlEditorTab.SUMMARY)\"\n    >\n      <valtimo-access-control-overview-tab\n        *ngIf=\"$activeTab() === AccessControlEditorTab.SUMMARY\"\n        [permissions]=\"permissions$ | async\"\n        [roleKey]=\"roleKey$ | async\"\n      ></valtimo-access-control-overview-tab>\n    </cds-tab>\n\n    <cds-tab\n      [active]=\"$activeTab() === AccessControlEditorTab.JSON_EDITOR\"\n      [heading]=\"'accessControl.roles.tabs.jsonEditor' | translate\"\n      (selected)=\"setActiveTab(AccessControlEditorTab.JSON_EDITOR)\"\n    >\n      <valtimo-access-control-json-editor-tab\n        *ngIf=\"$activeTab() === AccessControlEditorTab.JSON_EDITOR\"\n        [disabled]=\"editorDisabled$ | async\"\n        [model]=\"model\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-access-control-json-editor-tab>\n    </cds-tab>\n  </cds-tabs>\n</ng-container>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <div\n      *ngIf=\"{\n        model: model$ | async,\n        moreDisabled: moreDisabled$ | async,\n        compactMode: compactMode$ | async,\n      } as obs\"\n      class=\"buttons-container\"\n    >\n      <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n        <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n        <v-overflow-menu-option [disabled]=\"obs.moreDisabled\" (selected)=\"showEditModal()\">{{\n          'accessControl.roles.editMetadata' | translate\n        }}</v-overflow-menu-option>\n\n        <v-overflow-menu-option [disabled]=\"obs.moreDisabled\" (selected)=\"exportPermissions()\">{{\n          'interface.export' | translate\n        }}</v-overflow-menu-option>\n\n        <v-overflow-menu-option\n          [disabled]=\"obs.moreDisabled\"\n          type=\"danger\"\n          (selected)=\"showDeleteModal()\"\n          >{{ 'interface.delete' | translate }}</v-overflow-menu-option\n        >\n      </v-overflow-menu>\n\n      <button\n        [disabled]=\"saveDisabled$ | async\"\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"updatePermissions()\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"{selectedRowKeys: selectedRowKeys$ | async} as obs\">\n  <valtimo-delete-role-modal\n    [deleteRowKeys]=\"obs.selectedRowKeys\"\n    [showDeleteModal$]=\"showDeleteModal$\"\n    (deleteEvent)=\"onDelete($event)\"\n  >\n  </valtimo-delete-role-modal>\n\n  <valtimo-role-metadata-modal\n    [defaultKeyValue]=\"obs.selectedRowKeys[0]\"\n    [open]=\"showEditModal$ | async\"\n    type=\"edit\"\n    (closeEvent)=\"onEdit(obs.selectedRowKeys[0], $event)\"\n  ></valtimo-role-metadata-modal>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}.overflow-button{margin-right:16px}.buttons-container{display:flex;flex-direction:row;align-items:center}.buttons-container button{height:min-content}:host ::ng-deep .cds--tab-content{background-color:#fff}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i3.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i2$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i3.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i3.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i3.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact"] }, { kind: "component", type: i2$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: AccessControlJsonEditorTabComponent, selector: "valtimo-access-control-json-editor-tab", inputs: ["disabled", "model"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "component", type: AccessControlOverviewTabComponent, selector: "valtimo-access-control-overview-tab", inputs: ["roleKey", "permissions"] }, { kind: "component", type: RoleMetadataModalComponent, selector: "valtimo-role-metadata-modal", inputs: ["open", "type", "defaultKeyValue"], outputs: ["closeEvent"] }, { kind: "component", type: DeleteRoleModalComponent, selector: "valtimo-delete-role-modal", inputs: ["deleteRowKeys", "showDeleteModal$"], outputs: ["deleteEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@if ({model: model$ | async, schema: schema$ | async}; as obs) {\n  @if (obs.model && obs.schema) {\n    <valtimo-editor\n      [disabled]=\"editorDisabled$ | async\"\n      [model]=\"obs.model\"\n      [jsonSchema]=\"obs.schema\"\n      (validEvent)=\"onValid($event)\"\n      (valueChangeEvent)=\"onValueChange($event)\"\n      [fitPage]=\"true\"\n    ></valtimo-editor>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n  }\n}\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <div\n      *ngIf=\"{\n        model: model$ | async,\n        moreDisabled: moreDisabled$ | async,\n        compactMode: compactMode$ | async,\n      } as obs\"\n      class=\"buttons-container\"\n    >\n      <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n        <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n        <v-overflow-menu-option [disabled]=\"obs.moreDisabled\" (selected)=\"showEditModal()\">{{\n          'accessControl.roles.editMetadata' | translate\n        }}</v-overflow-menu-option>\n\n        <v-overflow-menu-option [disabled]=\"obs.moreDisabled\" (selected)=\"exportPermissions()\">{{\n          'interface.export' | translate\n        }}</v-overflow-menu-option>\n\n        <v-overflow-menu-option\n          [disabled]=\"obs.moreDisabled\"\n          type=\"danger\"\n          (selected)=\"showDeleteModal()\"\n          >{{ 'interface.delete' | translate }}</v-overflow-menu-option\n        >\n      </v-overflow-menu>\n\n      <button\n        [disabled]=\"saveDisabled$ | async\"\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"updatePermissions()\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"{selectedRowKeys: selectedRowKeys$ | async} as obs\">\n  <valtimo-delete-role-modal\n    [deleteRowKeys]=\"obs.selectedRowKeys\"\n    [showDeleteModal$]=\"showDeleteModal$\"\n    (deleteEvent)=\"onDelete($event)\"\n  >\n  </valtimo-delete-role-modal>\n\n  <valtimo-role-metadata-modal\n    [defaultKeyValue]=\"obs.selectedRowKeys[0]\"\n    [open]=\"showEditModal$ | async\"\n    type=\"edit\"\n    (closeEvent)=\"onEdit(obs.selectedRowKeys[0], $event)\"\n  ></valtimo-role-metadata-modal>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}.overflow-button{margin-right:16px}.buttons-container{display:flex;flex-direction:row;align-items:center}.buttons-container button{height:min-content}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: AccessControlService }, { type: i2$1.ActivatedRoute }, { type: i3$1.PageTitleService }, { type: i2$1.Router }, { type: i1.GlobalNotificationService }, { type: i5.TranslateService }, { type: AccessControlExportService }, { type: i3$1.PageHeaderService }] });
+            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"model$ | async as model; else loading\">\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [active]=\"$activeTab() === AccessControlEditorTab.SUMMARY\"\n      [heading]=\"'accessControl.roles.tabs.summary' | translate\"\n      (selected)=\"setActiveTab(AccessControlEditorTab.SUMMARY)\"\n    >\n      <valtimo-access-control-overview-tab\n        *ngIf=\"$activeTab() === AccessControlEditorTab.SUMMARY\"\n        [permissions]=\"permissions$ | async\"\n        [roleKey]=\"roleKey$ | async\"\n      ></valtimo-access-control-overview-tab>\n    </cds-tab>\n\n    <cds-tab\n      [active]=\"$activeTab() === AccessControlEditorTab.JSON_EDITOR\"\n      [heading]=\"'accessControl.roles.tabs.jsonEditor' | translate\"\n      (selected)=\"setActiveTab(AccessControlEditorTab.JSON_EDITOR)\"\n    >\n      <valtimo-access-control-json-editor-tab\n        *ngIf=\"$activeTab() === AccessControlEditorTab.JSON_EDITOR\"\n        [disabled]=\"editorDisabled$ | async\"\n        [model]=\"model\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-access-control-json-editor-tab>\n    </cds-tab>\n  </cds-tabs>\n</ng-container>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <div\n      *ngIf=\"{\n        model: model$ | async,\n        moreDisabled: moreDisabled$ | async,\n        compactMode: compactMode$ | async,\n      } as obs\"\n      class=\"buttons-container\"\n    >\n      <v-overflow-menu class=\"overflow-button\" placement=\"bottom-end\">\n        <v-overflow-menu-trigger overflowTrigger></v-overflow-menu-trigger>\n        <v-overflow-menu-option [disabled]=\"obs.moreDisabled\" (selected)=\"showEditModal()\">{{\n          'accessControl.roles.editMetadata' | translate\n        }}</v-overflow-menu-option>\n\n        <v-overflow-menu-option [disabled]=\"obs.moreDisabled\" (selected)=\"exportPermissions()\">{{\n          'interface.export' | translate\n        }}</v-overflow-menu-option>\n\n        <v-overflow-menu-option\n          [disabled]=\"obs.moreDisabled\"\n          type=\"danger\"\n          (selected)=\"showDeleteModal()\"\n          >{{ 'interface.delete' | translate }}</v-overflow-menu-option\n        >\n      </v-overflow-menu>\n\n      <button\n        [disabled]=\"saveDisabled$ | async\"\n        cdsButton=\"primary\"\n        [size]=\"obs.compactMode ? 'sm' : 'md'\"\n        (click)=\"updatePermissions()\"\n      >\n        {{ 'interface.save' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"save\" size=\"16\"></svg>\n      </button>\n    </div>\n  </ng-template>\n</ng-container>\n\n<ng-container *ngIf=\"{selectedRowKeys: selectedRowKeys$ | async} as obs\">\n  <valtimo-delete-role-modal\n    [deleteRowKeys]=\"obs.selectedRowKeys\"\n    [showDeleteModal$]=\"showDeleteModal$\"\n    (deleteEvent)=\"onDelete($event)\"\n  >\n  </valtimo-delete-role-modal>\n\n  <valtimo-role-metadata-modal\n    [defaultKeyValue]=\"obs.selectedRowKeys[0]\"\n    [open]=\"showEditModal$ | async\"\n    type=\"edit\"\n    (closeEvent)=\"onEdit(obs.selectedRowKeys[0], $event)\"\n  ></valtimo-role-metadata-modal>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}.overflow-button{margin-right:16px}.buttons-container{display:flex;flex-direction:row;align-items:center}.buttons-container button{height:min-content}:host ::ng-deep .cds--tab-content{background-color:#fff}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: AccessControlService }, { type: i1$2.ActivatedRoute }, { type: i3.PageTitleService }, { type: i1$2.Router }, { type: i1.GlobalNotificationService }, { type: i4$1.TranslateService }, { type: AccessControlExportService }, { type: i3.PageHeaderService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -689,10 +1315,20 @@ const routes = [
             customPageTitle: true,
         },
     },
+    {
+        path: 'access-control/:id/json-editor',
+        component: AccessControlEditorComponent,
+        canActivate: [AuthGuardService],
+        data: {
+            title: 'Role details',
+            roles: [ROLE_ADMIN],
+            customPageTitle: true,
+        },
+    },
 ];
 class AccessControlManagementRoutingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementRoutingModule, imports: [CommonModule, i2$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementRoutingModule, imports: [CommonModule, i1$2.RouterModule], exports: [RouterModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementRoutingModule, decorators: [{
@@ -734,7 +1370,6 @@ class AccessControlManagementModule {
             InputModule,
             IconModule,
             ConfirmationModalModule,
-            EditorModule,
             RenderInPageHeaderDirective,
             LoadingModule,
             IconModule,
@@ -742,7 +1377,10 @@ class AccessControlManagementModule {
             OverflowMenuOptionComponent,
             OverflowMenuTriggerComponent,
             NotificationModule,
-            CarbonListModule] }); }
+            CarbonListModule,
+            TabsModule,
+            AccessControlJsonEditorTabComponent,
+            AccessControlOverviewTabComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementModule, imports: [CommonModule,
             AccessControlManagementRoutingModule,
             ButtonModule,
@@ -753,14 +1391,16 @@ class AccessControlManagementModule {
             InputModule,
             IconModule,
             ConfirmationModalModule,
-            EditorModule,
             LoadingModule,
             IconModule,
             OverflowMenuComponent,
             OverflowMenuOptionComponent,
             OverflowMenuTriggerComponent,
             NotificationModule,
-            CarbonListModule] }); }
+            CarbonListModule,
+            TabsModule,
+            AccessControlJsonEditorTabComponent,
+            AccessControlOverviewTabComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementModule, decorators: [{
             type: NgModule,
@@ -783,7 +1423,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         InputModule,
                         IconModule,
                         ConfirmationModalModule,
-                        EditorModule,
                         RenderInPageHeaderDirective,
                         LoadingModule,
                         IconModule,
@@ -792,6 +1431,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         OverflowMenuTriggerComponent,
                         NotificationModule,
                         CarbonListModule,
+                        TabsModule,
+                        AccessControlJsonEditorTabComponent,
+                        AccessControlOverviewTabComponent,
                     ],
                 }]
         }] });
@@ -819,5 +1461,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccessControlManagementModule, AccessControlService };
+export { AccessControlEditorTab, AccessControlManagementModule, AccessControlService, PermissionSchemaMetadataService };
 //# sourceMappingURL=valtimo-access-control-management.mjs.map