@valtimo/access-control-management 13.35.0 → 13.36.0

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

@@ -1,23 +1,23 @@
 import * as i0 from '@angular/core';
-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 { Injectable, EventEmitter, signal, Output, Input, ChangeDetectionStrategy, Component, ViewChild, Pipe, ViewChildren, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@valtimo/shared';
+import { InterceptorSkipHeader, ROLE_ADMIN } from '@valtimo/shared';
+import { BehaviorSubject, catchError, of, tap, switchMap, take, shareReplay, map, combineLatest, Subject, finalize, delay, Subscription, skip, filter } from 'rxjs';
 import * as i2 from '@angular/common/http';
-import * as i4 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4$1 from '@ngx-translate/core';
+import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-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 * as i3$1 from '@valtimo/components';
+import { CARBON_CONSTANTS, ViewType, CarbonListComponent, EditorModule, OverflowMenuComponent, PendingChangesComponent, pendingChangesGuard, ConfirmationModalModule, RenderInPageHeaderDirective, FitPageDirective, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, CarbonListModule, SelectModule, TooltipIconModule } from '@valtimo/components';
+import * as i1$3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { AuthGuardService } from '@valtimo/security';
 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';
+import { ButtonModule, DropdownModule, IconModule, Tab, ModalModule, InputModule, LoadingModule, NotificationModule, TabsModule, ToggleModule, ContentSwitcherModule, AccordionModule, CheckboxModule, LayerModule, TagModule } from 'carbon-components-angular';
+import { Add16, TrashCan16, Information16, Filter16 } from '@carbon/icons';
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -37,6 +37,7 @@ import { Filter16, TrashCan16 } from '@carbon/icons';
 var AccessControlEditorTab;
 (function (AccessControlEditorTab) {
     AccessControlEditorTab["SUMMARY"] = "summary";
+    AccessControlEditorTab["EDITOR"] = "editor";
     AccessControlEditorTab["JSON_EDITOR"] = "jsonEditor";
 })(AccessControlEditorTab || (AccessControlEditorTab = {}));
 
@@ -72,6 +73,22 @@ var AccessControlEditorTab;
  * 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.
+ */
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -104,6 +121,599 @@ var AccessControlEditorTab;
  * 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 ACCESS_CONTROL_EDITOR_TEST_IDS = {
+    addPermissionButton: 'accessControlEditorAddPermission',
+    permissionListItem: 'accessControlEditorPermissionListItem',
+    permissionCard: 'accessControlEditorPermissionCard',
+    removePermissionButton: 'accessControlEditorRemovePermission',
+    resourceTypeSelect: 'accessControlEditorResourceType',
+    actionsSelect: 'accessControlEditorActions',
+    contextToggle: 'accessControlEditorContextToggle',
+    contextResourceTypeSelect: 'accessControlEditorContextResourceType',
+    addConditionButton: 'accessControlEditorAddCondition',
+    removeConditionButton: 'accessControlEditorRemoveCondition',
+    conditionTypeSelect: 'accessControlEditorConditionType',
+    conditionFieldSelect: 'accessControlEditorConditionField',
+    conditionOperatorSelect: 'accessControlEditorConditionOperator',
+    conditionValueInput: 'accessControlEditorConditionValue',
+    conditionPathInput: 'accessControlEditorConditionPath',
+    conditionClazzInput: 'accessControlEditorConditionClazz',
+};
+
+/*
+ * 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';
+// Each permission action is shown as a Carbon tag; every kind gets its own colour so they are
+// distinguishable at a glance. The palette combines Carbon's built-in tag colours with the extended
+// case-widget colours (orange, yellow, periwinkle, light-green, brown — registered globally in
+// carbon.scss), avoiding high-contrast, outline and the grays. Related actions share a hue family:
+// create/complete are greens, modify/inspect_modify are purples.
+const ACTION_TAG_TYPE = {
+    view: 'blue',
+    view_list: 'cyan',
+    inspect: 'teal',
+    inspect_modify: 'periwinkle',
+    modify: 'purple',
+    create: 'green',
+    complete: 'light-green',
+    delete: 'red',
+    assign: 'orange',
+    assignable: 'yellow',
+    claim: 'magenta',
+    export: 'brown',
+};
+// Fallback colour for any action not listed above (an unmapped/custom action).
+const DEFAULT_ACTION_TAG_TYPE = 'gray';
+
+/*
+ * 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.
+ */
+// A permission condition value is generically typed on the backend (a string, number, boolean,
+// null, list or object). The form editor edits it through a single text field, so we need a
+// lossless-as-possible bridge between the stored value and its text representation.
+/**
+ * Render a stored condition value as editable text.
+ * - undefined -> empty string (no value set, e.g. a freshly-added condition)
+ * - null -> the literal "null" (so an intentional null reads as deliberate rather than an unfilled
+ *   field, and still round-trips back to null through textToValue)
+ * - string -> the raw string (so '${currentUserId}' and 'someKey' show without quotes)
+ * - everything else (number, boolean, array, object) -> its JSON representation
+ */
+function valueToText(value) {
+    if (value === undefined)
+        return '';
+    if (value === null)
+        return 'null';
+    if (typeof value === 'string')
+        return value;
+    return JSON.stringify(value);
+}
+/**
+ * Parse editable text back into a stored condition value.
+ * - empty string -> null
+ * - valid JSON (number, boolean, null, array, object, quoted string) -> the parsed value
+ * - anything else -> the raw string (so 'view' or '${currentUserId}' stay strings)
+ */
+function textToValue(text) {
+    const trimmed = (text ?? '').trim();
+    if (trimmed === '')
+        return null;
+    try {
+        return JSON.parse(trimmed);
+    }
+    catch {
+        return text;
+    }
+}
+
+/*
+ * 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(', ');
+    }
+    // Objects (and any other non-primitive) are shown as JSON rather than "[object Object]".
+    return JSON.stringify(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.
+ */
+// The short (simple) name of a fully-qualified type, e.g. "CaseDefinition" for
+// "com.ritense.case_.domain.definition.CaseDefinition".
+function shortTypeName(fullyQualifiedName) {
+    if (!fullyQualifiedName)
+        return '';
+    return fullyQualifiedName.substring(fullyQualifiedName.lastIndexOf('.') + 1);
+}
+// A select item labelled "ShortName (fully.qualified.Name)", keeping the fully-qualified name as the
+// stored id. Used for the resource-type, related-resource and value-type dropdowns so the readable
+// name is shown while the exact technical type is what gets persisted.
+function fqnSelectItem(fullyQualifiedName) {
+    return {
+        id: fullyQualifiedName,
+        text: `${shortTypeName(fullyQualifiedName)} (${fullyQualifiedName})`,
+    };
+}
+
+/*
+ * 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.
+ */
+// Common Java value types offered in the "Value type" dropdown for JSON-field (expression)
+// conditions. Users can still enter any other fully-qualified type manually; String is the default.
+const VALUE_TYPE_OPTIONS = [
+    'java.lang.String',
+    'java.lang.Boolean',
+    'java.lang.Integer',
+    'java.lang.Long',
+    'java.lang.Double',
+    'java.math.BigDecimal',
+    'java.util.Collection',
+    'java.time.LocalDate',
+    'java.time.LocalDateTime',
+];
+const DEFAULT_VALUE_TYPE = 'java.lang.String';
+class AccessControlFormEditorService {
+    constructor(fb) {
+        this.fb = fb;
+        this._resources = [];
+        this._resourceByType = {};
+        this._operatorKeys = [];
+    }
+    setRegistry(registry) {
+        this._resources = registry.resources;
+        this._resourceByType = registry.resources.reduce((acc, resource) => {
+            acc[resource.resourceType] = resource;
+            return acc;
+        }, {});
+        this._operatorKeys = registry.operators.map(operator => operator.key);
+    }
+    // ----- Form construction -----
+    buildPermissionsArray(permissions) {
+        return this.fb.array(permissions.map(permission => this.createPermissionGroup(permission)));
+    }
+    createPermissionGroup(permission) {
+        const conditions = permission?.conditions ?? [];
+        const contextConditions = permission?.contextConditions ?? [];
+        return this.fb.group({
+            resourceType: this.fb.control(permission?.resourceType ?? '', Validators.required),
+            actions: this.fb.control(this.normalizeActions(permission), minSelectedArrayValidator(1)),
+            conditions: this.fb.array(conditions.map(condition => this.createConditionGroup(condition))),
+            // Context is opt-in via a toggle. `hasContext` off means "no context at all" — nothing about
+            // context is serialized. On means the permission is scoped to the selected context resource,
+            // which may be a real related resource or the "No context" marker (itself a deliberate,
+            // distinct choice, as opposed to leaving context off entirely). The resource defaults to the
+            // marker so the dropdown always has a valid, non-empty value while the toggle is on.
+            hasContext: this.fb.control(!!permission?.contextResourceType),
+            contextResourceType: this.fb.control(permission?.contextResourceType || NO_CONTEXT_RESOURCE_TYPE),
+            contextConditions: this.fb.array(contextConditions.map(condition => this.createConditionGroup(condition))),
+        });
+    }
+    createConditionGroup(condition, type) {
+        const conditionType = condition?.type ?? type ?? 'field';
+        const nested = condition && condition.type === 'container' ? (condition.conditions ?? []) : [];
+        return this.fb.group({
+            type: this.fb.control(conditionType),
+            field: this.fb.control(this.conditionField(condition)),
+            operator: this.fb.control(this.conditionOperator(condition)),
+            value: this.fb.control(valueToText(this.conditionValue(condition))),
+            path: this.fb.control(condition && condition.type === 'expression' ? condition.path : ''),
+            clazz: this.fb.control(this.conditionClazz(condition)),
+            // Whether the value type is entered manually (a custom class) rather than picked from the
+            // preset dropdown. UI-only; not serialized.
+            clazzManual: this.fb.control(this.isCustomValueType(this.conditionClazz(condition))),
+            resourceType: this.fb.control(condition && condition.type === 'container' ? condition.resourceType : ''),
+            conditions: this.fb.array(nested.map(child => this.createConditionGroup(child))),
+        }, { validators: conditionValidator });
+    }
+    // ----- Serialization back to the PUT contract -----
+    serialize(permissionsArray) {
+        return permissionsArray.controls.map(control => this.serializePermission(control));
+    }
+    serializePermission(group) {
+        const result = {
+            resourceType: group.get('resourceType').value,
+            actions: group.get('actions').value ?? [],
+            conditions: this.serializeConditions(group.get('conditions')),
+        };
+        // Context is only written when the toggle is on. The selected resource may be a real related
+        // resource or the "No context" marker (a distinct, deliberate choice); either way it is
+        // persisted. Toggling context off drops the context fields entirely.
+        if (group.get('hasContext').value) {
+            result.contextResourceType = group.get('contextResourceType').value;
+            result.contextConditions = this.serializeConditions(group.get('contextConditions'));
+        }
+        return result;
+    }
+    serializeConditions(conditionsArray) {
+        return conditionsArray.controls.map(control => {
+            const group = control;
+            const type = group.get('type').value;
+            if (type === 'container') {
+                return {
+                    type: 'container',
+                    resourceType: group.get('resourceType').value,
+                    conditions: this.serializeConditions(group.get('conditions')),
+                };
+            }
+            if (type === 'expression') {
+                return {
+                    type: 'expression',
+                    field: group.get('field').value,
+                    path: group.get('path').value,
+                    operator: group.get('operator').value,
+                    value: textToValue(group.get('value').value),
+                    clazz: group.get('clazz').value,
+                };
+            }
+            return {
+                type: 'field',
+                field: group.get('field').value,
+                operator: group.get('operator').value,
+                value: textToValue(group.get('value').value),
+            };
+        });
+    }
+    // ----- Registry-driven select options -----
+    // Resource types, fields and container targets are shown by their raw technical name (the exact
+    // value written to the permission JSON). Actions, operators and condition types instead use
+    // natural-language labels (actions fall back to the technical key when untranslated).
+    resourceTypeItems(include) {
+        // Shown as "ShortName (fully.qualified.Name)" — the readable short name up front, with the exact
+        // technical type it maps to in parentheses. The stored value (id) stays the fully-qualified name.
+        const items = this._resources.map(resource => ({
+            id: resource.resourceType,
+            text: `${resource.shortName || shortTypeName(resource.resourceType)} (${resource.resourceType})`,
+        }));
+        return this.sortByText(this.withIncluded(items, include));
+    }
+    // The context options are "No context" plus the resource types reachable from the permission's
+    // resource type via an entity mapper (the same set as the container-condition targets). "No
+    // context" maps to the backend NoContext marker.
+    contextResourceTypeItems(resourceType, include) {
+        const noContext = {
+            id: NO_CONTEXT_RESOURCE_TYPE,
+            translationKey: 'accessControl.overview.noContext',
+        };
+        // "No context" is added explicitly here, so the NoContext marker must never also be
+        // force-included among the container targets: doing so appends a second item with the same id
+        // (the marker is not a real target), which renders as a duplicate row and two selected
+        // checkmarks. Only real resources are kept visible via `include`.
+        const targetInclude = Array.isArray(include)
+            ? include.filter(value => value !== NO_CONTEXT_RESOURCE_TYPE)
+            : include === NO_CONTEXT_RESOURCE_TYPE
+                ? null
+                : include;
+        return [noContext, ...this.containerTargetItems(resourceType, targetInclude)];
+    }
+    actionItems(resourceType, include) {
+        // Actions come straight from the resource in the PBAC registry (the backend discovers every
+        // ResourceActionProvider on the classpath), so no separate action map is needed.
+        const actions = this._resourceByType[resourceType]?.actions ?? [];
+        const items = actions.map(action => ({
+            id: action,
+            text: action,
+        }));
+        return this.withIncluded(items, include);
+    }
+    fieldItems(resourceType, include) {
+        const resource = this._resourceByType[resourceType];
+        const names = new Set();
+        // Only string names are kept; a malformed registry entry must not render as "[object Object]".
+        for (const field of resource?.fields ?? []) {
+            if (typeof field?.name === 'string' && field.name)
+                names.add(field.name);
+        }
+        for (const alias of resource?.fieldAliases ?? []) {
+            if (typeof alias?.alias === 'string' && alias.alias)
+                names.add(alias.alias);
+        }
+        // Fields are shown by their technical name (e.g. "isFinal", "createdBy") since that is the
+        // exact value used in the permission condition.
+        const items = Array.from(names).map(name => ({ id: name, text: name }));
+        return this.sortByText(this.withIncluded(items, include));
+    }
+    containerTargetItems(resourceType, include) {
+        const targets = this._resourceByType[resourceType]?.containerTargets ?? [];
+        // Shown as "ShortName (fully.qualified.Name)", like the resource-type dropdown. The stored value
+        // (id) stays the fully-qualified name.
+        const items = targets.map(fqnSelectItem);
+        return this.sortByText(this.withIncluded(items, include));
+    }
+    operatorItems() {
+        // Operators are shown in natural language (e.g. "equals", "is greater than") via their
+        // translation key; the stored value stays the technical symbol (the item id).
+        return this._operatorKeys.map(key => ({
+            id: key,
+            translationKey: OPERATOR_LABEL[key],
+        }));
+    }
+    // Preset value types for JSON-field (expression) conditions, shown as "ShortName (fully.qualified
+    // .Name)". Any current custom value is kept selectable via `include`.
+    valueTypeItems(include) {
+        const items = VALUE_TYPE_OPTIONS.map(fqnSelectItem);
+        return this.withIncluded(items, include);
+    }
+    get defaultValueType() {
+        return DEFAULT_VALUE_TYPE;
+    }
+    // A value type is "custom" (i.e. entered manually) when it is set but not one of the presets.
+    isCustomValueType(clazz) {
+        return !!clazz && !VALUE_TYPE_OPTIONS.includes(clazz);
+    }
+    // ----- Helpers -----
+    normalizeActions(permission) {
+        if (permission?.actions?.length)
+            return [...permission.actions];
+        if (permission?.action)
+            return [permission.action];
+        return [];
+    }
+    conditionField(condition) {
+        if (condition && (condition.type === 'field' || condition.type === 'expression')) {
+            return condition.field;
+        }
+        return '';
+    }
+    conditionOperator(condition) {
+        if (condition && (condition.type === 'field' || condition.type === 'expression')) {
+            return condition.operator;
+        }
+        return '==';
+    }
+    conditionValue(condition) {
+        if (condition && (condition.type === 'field' || condition.type === 'expression')) {
+            return condition.value;
+        }
+        // A freshly-added field/expression row has no value yet; default it to null, which renders as
+        // the literal "null". The value field is required and may not be left empty — to express "no
+        // value" the user types null explicitly.
+        return null;
+    }
+    conditionClazz(condition) {
+        // Expression conditions carry a value type; default it to the preset so the dropdown starts on a
+        // valid selection. Other condition types don't use it.
+        if (condition && condition.type === 'expression') {
+            return condition.clazz || DEFAULT_VALUE_TYPE;
+        }
+        return '';
+    }
+    withIncluded(items, include) {
+        // Only genuine, non-empty strings are added. A truthy non-string (e.g. an object that somehow
+        // reached a field/value control) would otherwise be pushed as {id, text} and render as
+        // "[object Object]" — guard against that here rather than trusting the caller.
+        const values = (Array.isArray(include) ? include : [include]).filter((value) => typeof value === 'string' && !!value);
+        const result = [...items];
+        for (const value of values) {
+            if (!result.some(item => item.id === value))
+                result.push({ id: value, text: value });
+        }
+        return result;
+    }
+    sortByText(items) {
+        return [...items].sort((a, b) => (a.text ?? '').localeCompare(b.text ?? ''));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlFormEditorService, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlFormEditorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlFormEditorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
+function minSelectedArrayValidator(min) {
+    return (control) => {
+        const value = control.value;
+        return Array.isArray(value) && value.length >= min ? null : { minSelected: { min } };
+    };
+}
+function conditionValidator(group) {
+    const type = group.get('type')?.value;
+    const errors = {};
+    if (type === 'container') {
+        if (!group.get('resourceType')?.value)
+            errors['resourceTypeRequired'] = true;
+    }
+    else {
+        if (!group.get('field')?.value)
+            errors['fieldRequired'] = true;
+        // The value may not be left empty; "null" must be typed for an explicit null value.
+        if (!group.get('value')?.value)
+            errors['valueRequired'] = true;
+        if (type === 'expression') {
+            if (!group.get('path')?.value)
+                errors['pathRequired'] = true;
+            if (!group.get('clazz')?.value)
+                errors['clazzRequired'] = true;
+        }
+    }
+    return Object.keys(errors).length ? errors : null;
+}
+
 class AccessControlService {
     get roleDtos$() {
         return this.http.get(`${this.valtimoEndpointUri}v1/roles`);
@@ -113,7 +723,23 @@ class AccessControlService {
         this.http = http;
         this.roles$ = new BehaviorSubject([]);
         this.loading$ = new BehaviorSubject(false);
-        this.valtimoEndpointUri = `${this.configService.config.valtimoApi.endpointUri}management/`;
+        this.apiEndpointUri = this.configService.config.valtimoApi.endpointUri;
+        this.valtimoEndpointUri = `${this.apiEndpointUri}management/`;
+    }
+    // The roles known to the identity provider (e.g. Keycloak realm roles), optionally filtered by a
+    // name prefix. Used to let an admin pick an existing role when configuring access control instead
+    // of typing its key by hand. Degrades to an empty list (and stays silent) when the endpoint is
+    // unavailable — e.g. a deployment using a different IAM — so the caller can fall back to manual
+    // entry.
+    getExternalRoles(externalRoleNamePrefix) {
+        const params = externalRoleNamePrefix
+            ? `?externalRoleNamePrefix=${encodeURIComponent(externalRoleNamePrefix)}`
+            : '';
+        return this.http
+            .get(`${this.apiEndpointUri}v1/external-role${params}`, {
+            headers: InterceptorSkipHeader,
+        })
+            .pipe(catchError(() => of([])));
     }
     addRole(role) {
         return this.http.post(`${this.valtimoEndpointUri}v1/roles`, role);
@@ -163,16 +789,19 @@ class AccessControlService {
     getPermissionSchema() {
         return this.http.get(`${this.valtimoEndpointUri}v1/permissions/schema`);
     }
+    getPbacRegistry() {
+        return this.http.get(`${this.valtimoEndpointUri}v1/pbac/registry`);
+    }
     updateRole(roleKey, request) {
         return this.http.put(`${this.valtimoEndpointUri}v1/roles/${roleKey}`, request);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlService, deps: [{ token: i1$1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$1.ConfigService }, { type: i2.HttpClient }] });
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -194,14 +823,43 @@ class PermissionSchemaMetadataService {
         this.accessControlService = accessControlService;
         this._knownResourceTypes$ = new BehaviorSubject(new Set());
         this._fieldsByResourceType$ = new BehaviorSubject({});
+        /**
+         * The full PBAC registry served by GET /api/management/v1/pbac/registry. This is the
+         * authoritative, purpose-built description of every resource type, its actions and fields,
+         * the available operators and condition types, the entity-mapper pairs that define which
+         * context resources a permission can be scoped to, and the configured roles. It drives both
+         * the read-only overview and the form-based editor.
+         */
+        this.registry$ = this.accessControlService
+            .getPbacRegistry()
+            .pipe(tap(registry => {
+            this._knownResourceTypes$.next(this.extractKnownResourceTypes(registry));
+            this._fieldsByResourceType$.next(this.extractFieldsByResourceType(registry));
+        }), shareReplay({ bufferSize: 1, refCount: false }));
+        this.resources$ = this.registry$.pipe(map(registry => registry.resources));
+        this.resourceByType$ = this.resources$.pipe(map(resources => resources.reduce((acc, resource) => {
+            acc[resource.resourceType] = resource;
+            return acc;
+        }, {})));
+        /**
+         * Raw JSON schema served by GET /api/management/v1/permissions/schema. Drives validation and
+         * autocomplete in the Monaco JSON editor.
+         */
         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)));
+            .pipe(shareReplay({ bufferSize: 1, refCount: false }));
+        // The available actions per resource type come straight from the PBAC registry. The backend
+        // discovers every ResourceActionProvider on the classpath — not only the ones registered as
+        // Spring beans — so each resource's action list is complete.
+        this.actionsByResourceType$ = this.resources$.pipe(map(resources => resources.reduce((acc, resource) => {
+            acc[resource.resourceType] = [...resource.actions];
+            return acc;
+        }, {})));
+        this.allResourceTypes$ = this.resources$.pipe(map(resources => resources.map(resource => resource.resourceType)));
+        this.operators$ = this.registry$.pipe(map(registry => registry.operators));
+        this.conditionTypes$ = this.registry$.pipe(map(registry => registry.conditionTypes));
+        this.entityMappers$ = this.registry$.pipe(map(registry => registry.entityMappers));
+        this.roles$ = this.registry$.pipe(map(registry => registry.roles));
     }
     isResourceTypeKnown(fqn) {
         return this._knownResourceTypes$.value.has(fqn);
@@ -209,42 +867,18 @@ class PermissionSchemaMetadataService {
     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(registry) {
+        return new Set(registry.resources.map(resource => resource.resourceType));
     }
-    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 ?? {};
+    extractFieldsByResourceType(registry) {
         const result = {};
-        for (const [key, def] of Object.entries(definitions)) {
-            if (!key.startsWith('condList.'))
-                continue;
-            const resourceType = key.substring('condList.'.length);
+        for (const resource of registry.resources) {
             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;
+            for (const field of resource.fields)
+                fields.add(field.name);
+            for (const alias of resource.fieldAliases)
+                fields.add(alias.alias);
+            result[resource.resourceType] = fields;
         }
         return result;
     }
@@ -337,56 +971,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * limitations under the License.
  */
 class RoleMetadataModalComponent {
+    set open(value) {
+        this._open = value;
+        // Fetch the selectable roles the first time the modal is opened.
+        if (value && !this._rolesRequested)
+            this.loadRoleKeyItems();
+    }
+    get open() {
+        return this._open;
+    }
     set defaultKeyValue(value) {
         this._defaultKeyValue = value;
         this.setDefaultKeyValue(value);
     }
     get key() {
-        return this.form?.get('key');
+        return this.form.get('key');
     }
-    constructor(fb) {
+    constructor(fb, accessControlService) {
         this.fb = fb;
-        this.open = false;
+        this.accessControlService = accessControlService;
         this.type = 'add';
+        // Role keys already configured; excluded from the picker so a role can't be added twice.
+        this.usedKeys = [];
         this.closeEvent = new EventEmitter();
+        // Selectable role keys, fetched from the identity provider (e.g. Keycloak realm roles). The picker
+        // only lists these; a custom key is entered via manual mode.
+        this.$roleKeyItems = signal([]);
+        this.$loadingRoles = signal(false);
+        // Whether the key is typed manually rather than picked from the dropdown.
+        this.$keyManual = signal(false);
         this.form = this.fb.group({
             key: this.fb.control('', Validators.required),
         });
+        this._open = false;
+        this._rolesRequested = false;
+    }
+    ngOnInit() {
+        // Editing starts in manual mode so the existing key is shown for renaming; adding starts on the
+        // role picker.
+        this.$keyManual.set(this.type === 'edit');
     }
     onCancel() {
         this.closeEvent.emit(null);
         this.resetForm();
     }
     onConfirm() {
-        if (!this.key) {
+        if (this.form.invalid) {
             return;
         }
         this.closeEvent.emit({ roleKey: this.key.value });
         this.resetForm();
     }
+    // Switches between picking a role and typing one. Returning to the picker drops a value that isn't
+    // one of the listed roles, so a valid option must be chosen.
+    onKeyManualToggle(manual) {
+        this.$keyManual.set(manual);
+        if (!manual && !this.$roleKeyItems().some(item => item.id === this.key.value)) {
+            this.key.setValue('');
+        }
+    }
+    loadRoleKeyItems() {
+        this._rolesRequested = true;
+        this.$loadingRoles.set(true);
+        // Only application roles (ROLE_*) are offered; roles already configured are filtered out (except
+        // when editing, where the current key must remain selectable).
+        this.accessControlService.getExternalRoles('ROLE_').subscribe(roles => {
+            const used = this.usedKeys ?? [];
+            this.$roleKeyItems.set(roles
+                .filter(role => this.type === 'edit' || !used.includes(role))
+                .map(role => ({ id: role, text: role })));
+            // With no roles to pick from, fall back to manual entry so the field stays usable.
+            if (this.type === 'add' && this.$roleKeyItems().length === 0)
+                this.$keyManual.set(true);
+            this.$loadingRoles.set(false);
+        });
+    }
     setDefaultKeyValue(value) {
         this.key.setValue(value);
     }
     resetForm() {
         setTimeout(() => {
             this.form.reset();
+            this.$keyManual.set(this.type === 'edit');
             if (this.type === 'edit') {
                 this.setDefaultKeyValue(this._defaultKeyValue);
             }
         }, 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: 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RoleMetadataModalComponent, deps: [{ token: i1.FormBuilder }, { token: AccessControlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: RoleMetadataModalComponent, isStandalone: false, selector: "valtimo-role-metadata-modal", inputs: { type: "type", open: "open", defaultKeyValue: "defaultKeyValue", usedKeys: "usedKeys" }, 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 [cdsLayer]=\"1\" [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 [cdsLayer]=\"1\">\n    <form [formGroup]=\"form\">\n      <div class=\"role-metadata-modal__field cds--form-item\">\n        <label class=\"cds--label\">\n          {{ 'accessControl.roles.name' | translate }} ({{ 'interface.required' | translate }})\n        </label>\n\n        @if ($keyManual()) {\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        } @else {\n          <v-select\n            formControlName=\"key\"\n            [appendInline]=\"false\"\n            [clearable]=\"false\"\n            [defaultSelectionId]=\"key.value || ''\"\n            [dropUp]=\"false\"\n            [invalid]=\"key.dirty && key.invalid\"\n            [items]=\"$roleKeyItems()\"\n            [loading]=\"$loadingRoles()\"\n            [placeholder]=\"'accessControl.roles.selectRole' | translate\"\n          ></v-select>\n        }\n\n        <button\n          class=\"role-metadata-modal__mode-switch\"\n          cdsButton=\"ghost\"\n          size=\"sm\"\n          type=\"button\"\n          (click)=\"onKeyManualToggle(!$keyManual())\"\n        >\n          {{\n            ($keyManual()\n              ? 'accessControl.roles.chooseFromList'\n              : 'accessControl.roles.enterManually'\n            ) | translate\n          }}\n        </button>\n      </div>\n    </form>\n  </section>\n\n  <cds-modal-footer [cdsLayer]=\"1\">\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", styles: [".role-metadata-modal__field{display:flex;flex-direction:column;gap:.5rem}.role-metadata-modal__field v-select{display:block;width:100%}.role-metadata-modal__field input{width:100%}.role-metadata-modal__mode-switch{align-self:flex-start}\n"], dependencies: [{ kind: "directive", type: i3.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i3$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "directive", type: i2$1.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RoleMetadataModalComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-role-metadata-modal', 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<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" }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { open: [{
+            args: [{ standalone: false, selector: 'valtimo-role-metadata-modal', 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<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 [cdsLayer]=\"1\" [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 [cdsLayer]=\"1\">\n    <form [formGroup]=\"form\">\n      <div class=\"role-metadata-modal__field cds--form-item\">\n        <label class=\"cds--label\">\n          {{ 'accessControl.roles.name' | translate }} ({{ 'interface.required' | translate }})\n        </label>\n\n        @if ($keyManual()) {\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        } @else {\n          <v-select\n            formControlName=\"key\"\n            [appendInline]=\"false\"\n            [clearable]=\"false\"\n            [defaultSelectionId]=\"key.value || ''\"\n            [dropUp]=\"false\"\n            [invalid]=\"key.dirty && key.invalid\"\n            [items]=\"$roleKeyItems()\"\n            [loading]=\"$loadingRoles()\"\n            [placeholder]=\"'accessControl.roles.selectRole' | translate\"\n          ></v-select>\n        }\n\n        <button\n          class=\"role-metadata-modal__mode-switch\"\n          cdsButton=\"ghost\"\n          size=\"sm\"\n          type=\"button\"\n          (click)=\"onKeyManualToggle(!$keyManual())\"\n        >\n          {{\n            ($keyManual()\n              ? 'accessControl.roles.chooseFromList'\n              : 'accessControl.roles.enterManually'\n            ) | translate\n          }}\n        </button>\n      </div>\n    </form>\n  </section>\n\n  <cds-modal-footer [cdsLayer]=\"1\">\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", styles: [".role-metadata-modal__field{display:flex;flex-direction:column;gap:.5rem}.role-metadata-modal__field v-select{display:block;width:100%}.role-metadata-modal__field input{width:100%}.role-metadata-modal__mode-switch{align-self:flex-start}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: AccessControlService }], propDecorators: { type: [{
                 type: Input
-            }], type: [{
+            }], open: [{
                 type: Input
             }], defaultKeyValue: [{
                 type: Input
+            }], usedKeys: [{
+                type: Input
             }], closeEvent: [{
                 type: Output
             }] } });
@@ -414,7 +1099,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.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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DeleteRoleModalComponent, decorators: [{
             type: Component,
@@ -479,11 +1164,11 @@ 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: 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 }); }
+    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 [cdsLayer]=\"1\" [showCloseButton]=\"true\" (closeSelect)=\"onCancel()\">\n    <h3 cdsModalHeaderHeading>\n      {{ vars.title }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\">\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 [cdsLayer]=\"1\">\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: i3.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: "directive", type: i2$1.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ExportRoleModalComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-export-role-modal', 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<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"] }]
+            args: [{ standalone: false, selector: 'valtimo-export-role-modal', 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<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 [cdsLayer]=\"1\" [showCloseButton]=\"true\" (closeSelect)=\"onCancel()\">\n    <h3 cdsModalHeaderHeading>\n      {{ vars.title }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\">\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 [cdsLayer]=\"1\">\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"] }]
         }], propDecorators: { open: [{
                 type: Input
             }], exportRowKeys: [{
@@ -526,6 +1211,8 @@ class AccessControlOverviewComponent {
             },
         ];
         this.roles$ = this.accessControlService.roles$;
+        // Keys of already-configured roles, used to keep them out of the add-role picker.
+        this.existingRoleKeys$ = this.roles$.pipe(map(roles => roles.map(role => role.roleKey)));
         this.loading$ = this.accessControlService.loading$;
         this.skeleton$ = new BehaviorSubject(false);
         this.showAddModal$ = new BehaviorSubject(false);
@@ -584,21 +1271,176 @@ class AccessControlOverviewComponent {
     enableSkeleton() {
         this.skeleton$.next(true);
     }
-    disableSkeleton() {
-        this.skeleton$.next(false);
+    disableSkeleton() {
+        this.skeleton$.next(false);
+    }
+    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: i1$3.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  [usedKeys]=\"existingRoleKeys$ | 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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$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: ["type", "open", "defaultKeyValue", "usedKeys"], 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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.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  [usedKeys]=\"existingRoleKeys$ | 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: i1$3.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.
+ */
+class ConditionTreeComponent {
+    // Carbon only provides three layer tokens, and they alternate (layer 0 and 2 share a surface
+    // colour, layer 1 is the contrasting one). To keep every nesting level visually distinct from
+    // the one it sits on, the condition rows alternate between layer 1 and 2 as they nest. The
+    // permission card sits on layer 0, so the first row level is layer 1.
+    get rowLayerLevel() {
+        return this.depth % 2 === 0 ? 1 : 2;
+    }
+    // Inputs use the layer that contrasts with their row's surface, so the field background always
+    // stands out from the row it sits on (layer 1 ↔ layer 2).
+    get inputLayerLevel() {
+        return this.rowLayerLevel === 1 ? 2 : 1;
+    }
+    constructor(formEditorService, iconService) {
+        this.formEditorService = formEditorService;
+        this.iconService = iconService;
+        this.resourceType = null;
+        this.disabled = false;
+        this.depth = 0;
+        this.fieldItems = [];
+        this.containerTargetItems = [];
+        this.operatorItems = [];
+        // Preset value types for JSON-field conditions (String, Boolean, …). The dropdown only ever holds
+        // presets — custom types are entered via manual mode — so this list is stable.
+        this.valueTypeItems = [];
+        // Condition types are shown in natural language. "Related resource" (container) is only offered
+        // when the resource can be related to another resource (see recomputeItems).
+        this.typeItems = [];
+        this.testIds = ACCESS_CONTROL_EDITOR_TEST_IDS;
+        this.iconService.registerAll([Add16, TrashCan16]);
+    }
+    ngOnInit() {
+        this.operatorItems = this.formEditorService.operatorItems();
+        this.valueTypeItems = this.formEditorService.valueTypeItems();
+        this.recomputeItems();
+    }
+    ngOnChanges(changes) {
+        if (changes['resourceType'])
+            this.recomputeItems();
+    }
+    groupAt(index) {
+        return this.conditions.at(index);
+    }
+    asFormGroup(control) {
+        return control;
+    }
+    typeOf(index) {
+        return this.groupAt(index).get('type').value;
+    }
+    nestedConditions(index) {
+        return this.groupAt(index).get('conditions');
+    }
+    containerResourceType(index) {
+        return this.groupAt(index).get('resourceType').value || null;
+    }
+    containerResourceTypeAt(index) {
+        return this.groupAt(index).get('resourceType').value || '';
+    }
+    fieldValueAt(index) {
+        return this.groupAt(index).get('field').value || '';
+    }
+    operatorValueAt(index) {
+        return this.groupAt(index).get('operator').value || '';
+    }
+    clazzValueAt(index) {
+        return this.groupAt(index).get('clazz').value || '';
+    }
+    // Whether the value type is entered manually (a custom class) rather than picked from the preset
+    // dropdown.
+    clazzManualAt(index) {
+        return !!this.groupAt(index).get('clazzManual').value;
+    }
+    addCondition() {
+        this.conditions.push(this.formEditorService.createConditionGroup(undefined, 'field'));
+    }
+    removeCondition(index) {
+        this.conditions.removeAt(index);
+    }
+    // Toggles the value-type input between the preset dropdown and manual entry. Switching back to the
+    // dropdown with nothing entered yet falls back to the default type.
+    onClazzManualToggle(index, manual) {
+        const group = this.groupAt(index);
+        group.get('clazzManual').setValue(manual);
+        // The dropdown only lists presets, so entering it with an empty or custom value falls back to
+        // the default preset rather than leaving the dropdown with nothing selected.
+        const clazz = group.get('clazz').value;
+        if (!manual && (!clazz || this.formEditorService.isCustomValueType(clazz))) {
+            group.get('clazz').setValue(this.formEditorService.defaultValueType);
+        }
+    }
+    onTypeChange(index) {
+        const group = this.groupAt(index);
+        // Switching to a JSON field (expression) defaults the value type to a preset so its dropdown
+        // starts on a valid, selected option.
+        if (group.get('type').value === 'expression' && !group.get('clazz').value) {
+            group.get('clazz').setValue(this.formEditorService.defaultValueType);
+            group.get('clazzManual').setValue(false);
+        }
+        this.recomputeItems();
+    }
+    recomputeItems() {
+        const resourceType = this.resourceType ?? '';
+        this.fieldItems = this.formEditorService.fieldItems(resourceType, this.collectFieldValues());
+        this.containerTargetItems = this.formEditorService.containerTargetItems(resourceType, this.collectContainerTargets());
+        // Only offer the "related resource" (container) type when the resource actually has related
+        // resources to point at; otherwise a container condition could never be completed.
+        const types = this.containerTargetItems.length
+            ? ['field', 'expression', 'container']
+            : ['field', 'expression'];
+        this.typeItems = types.map(type => ({
+            id: type,
+            translationKey: `accessControl.editor.conditionTypes.${type}`,
+        }));
+    }
+    collectFieldValues() {
+        return this.conditions.controls
+            .map(control => control.get('field').value)
+            .filter((value) => !!value);
     }
-    setSelectedRoleKeys() {
-        this.selectedRowKeys$.next(this.carbonList.selectedItems.map((role) => role.roleKey));
+    collectContainerTargets() {
+        return this.conditions.controls
+            .map(control => control.get('resourceType').value)
+            .filter((value) => !!value);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ConditionTreeComponent, deps: [{ token: AccessControlFormEditorService }, { token: i2$1.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ConditionTreeComponent, isStandalone: false, selector: "valtimo-condition-tree", inputs: { conditions: "conditions", resourceType: "resourceType", disabled: "disabled", depth: "depth" }, 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 class=\"condition-tree\" [class.condition-tree--nested]=\"depth > 0\">\n  @for (control of conditions.controls; track control; let i = $index) {\n    <div class=\"condition-tree__row\" [cdsLayer]=\"rowLayerLevel\" [formGroup]=\"asFormGroup(control)\">\n      <div class=\"condition-tree__content\">\n        <v-select\n          class=\"condition-tree__type\"\n          formControlName=\"type\"\n          [cdsLayer]=\"inputLayerLevel\"\n          [clearable]=\"false\"\n          [dataTestId]=\"testIds.conditionTypeSelect\"\n          [defaultSelectionId]=\"typeOf(i)\"\n          [dropUp]=\"false\"\n          [items]=\"typeItems\"\n          [tooltip]=\"'accessControl.editor.tooltips.conditionType' | translate\"\n          titleTranslationKey=\"accessControl.editor.conditionType\"\n          (selectedChange)=\"onTypeChange(i)\"\n        ></v-select>\n\n        @switch (typeOf(i)) {\n          @case ('container') {\n            <v-select\n              formControlName=\"resourceType\"\n              [cdsLayer]=\"inputLayerLevel\"\n              [dataTestId]=\"testIds.conditionFieldSelect\"\n              [defaultSelectionId]=\"containerResourceTypeAt(i)\"\n              [dropUp]=\"false\"\n              [invalid]=\"\n                !!asFormGroup(control).errors?.['resourceTypeRequired'] &&\n                !!asFormGroup(control).get('resourceType')?.touched\n              \"\n              [items]=\"containerTargetItems\"\n              [placeholder]=\"'accessControl.editor.relatedResourcePlaceholder' | translate\"\n              [required]=\"true\"\n              [tooltip]=\"'accessControl.editor.tooltips.relatedResource' | translate\"\n              titleTranslationKey=\"accessControl.editor.relatedResource\"\n            ></v-select>\n\n            <div class=\"condition-tree__nested\">\n              <valtimo-condition-tree\n                [conditions]=\"nestedConditions(i)\"\n                [depth]=\"depth + 1\"\n                [disabled]=\"disabled\"\n                [resourceType]=\"containerResourceType(i)\"\n              ></valtimo-condition-tree>\n            </div>\n          }\n\n          @default {\n            <div class=\"condition-tree__fields\">\n              <v-select\n                class=\"condition-tree__field\"\n                formControlName=\"field\"\n                [cdsLayer]=\"inputLayerLevel\"\n                [dataTestId]=\"testIds.conditionFieldSelect\"\n                [defaultSelectionId]=\"fieldValueAt(i)\"\n                [dropUp]=\"false\"\n                [invalid]=\"\n                  !!asFormGroup(control).errors?.['fieldRequired'] &&\n                  !!asFormGroup(control).get('field')?.touched\n                \"\n                [items]=\"fieldItems\"\n                [placeholder]=\"'accessControl.editor.fieldPlaceholder' | translate\"\n                [required]=\"true\"\n                [tooltip]=\"'accessControl.editor.tooltips.field' | translate\"\n                titleTranslationKey=\"accessControl.editor.field\"\n              ></v-select>\n\n              <v-select\n                class=\"condition-tree__operator\"\n                formControlName=\"operator\"\n                [cdsLayer]=\"inputLayerLevel\"\n                [clearable]=\"false\"\n                [dataTestId]=\"testIds.conditionOperatorSelect\"\n                [defaultSelectionId]=\"operatorValueAt(i)\"\n                [dropUp]=\"false\"\n                [items]=\"operatorItems\"\n                [tooltip]=\"'accessControl.editor.tooltips.operator' | translate\"\n                titleTranslationKey=\"accessControl.editor.operator\"\n              ></v-select>\n\n              <div class=\"condition-tree__value cds--form-item\" [cdsLayer]=\"inputLayerLevel\">\n                <label class=\"cds--label label-with-tooltip\">\n                  {{ 'accessControl.editor.value' | translate }} ({{\n                    'interface.required' | translate\n                  }})\n                  <v-tooltip-icon\n                    [tooltip]=\"'accessControl.editor.tooltips.value' | translate\"\n                  ></v-tooltip-icon>\n                </label>\n                <input\n                  cdsText\n                  [attr.data-test-id]=\"testIds.conditionValueInput\"\n                  [class.cds--text-input--invalid]=\"\n                    !!asFormGroup(control).errors?.['valueRequired'] &&\n                    !!asFormGroup(control).get('value')?.touched\n                  \"\n                  [placeholder]=\"'accessControl.editor.valuePlaceholder' | translate\"\n                  formControlName=\"value\"\n                />\n              </div>\n            </div>\n\n            @if (typeOf(i) === 'expression') {\n              <div class=\"condition-tree__fields\">\n                <div class=\"condition-tree__value cds--form-item\" [cdsLayer]=\"inputLayerLevel\">\n                  <label class=\"cds--label label-with-tooltip\">\n                    {{ 'accessControl.editor.path' | translate }} ({{\n                      'interface.required' | translate\n                    }})\n                    <v-tooltip-icon\n                      [tooltip]=\"'accessControl.editor.tooltips.path' | translate\"\n                    ></v-tooltip-icon>\n                  </label>\n                  <input\n                    cdsText\n                    [attr.data-test-id]=\"testIds.conditionPathInput\"\n                    [class.cds--text-input--invalid]=\"\n                      !!asFormGroup(control).errors?.['pathRequired'] &&\n                      !!asFormGroup(control).get('path')?.touched\n                    \"\n                    [placeholder]=\"'accessControl.editor.pathPlaceholder' | translate\"\n                    formControlName=\"path\"\n                  />\n                </div>\n\n                <div class=\"condition-tree__value cds--form-item\" [cdsLayer]=\"inputLayerLevel\">\n                  <label class=\"cds--label label-with-tooltip\">\n                    {{ 'accessControl.editor.clazz' | translate }} ({{\n                      'interface.required' | translate\n                    }})\n                    <v-tooltip-icon\n                      [tooltip]=\"'accessControl.editor.tooltips.clazz' | translate\"\n                    ></v-tooltip-icon>\n                  </label>\n\n                  @if (clazzManualAt(i)) {\n                    <input\n                      cdsText\n                      [attr.data-test-id]=\"testIds.conditionClazzInput\"\n                      [class.cds--text-input--invalid]=\"\n                        !!asFormGroup(control).errors?.['clazzRequired'] &&\n                        !!asFormGroup(control).get('clazz')?.touched\n                      \"\n                      [placeholder]=\"'accessControl.editor.clazzPlaceholder' | translate\"\n                      formControlName=\"clazz\"\n                    />\n                  } @else {\n                    <v-select\n                      formControlName=\"clazz\"\n                      [cdsLayer]=\"inputLayerLevel\"\n                      [clearable]=\"false\"\n                      [dataTestId]=\"testIds.conditionClazzInput\"\n                      [defaultSelectionId]=\"clazzValueAt(i)\"\n                      [dropUp]=\"false\"\n                      [invalid]=\"\n                        !!asFormGroup(control).errors?.['clazzRequired'] &&\n                        !!asFormGroup(control).get('clazz')?.touched\n                      \"\n                      [items]=\"valueTypeItems\"\n                    ></v-select>\n                  }\n\n                  <button\n                    class=\"condition-tree__mode-switch\"\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [disabled]=\"disabled\"\n                    (click)=\"onClazzManualToggle(i, !clazzManualAt(i))\"\n                  >\n                    {{\n                      (clazzManualAt(i)\n                        ? 'accessControl.editor.valueTypeFromList'\n                        : 'accessControl.editor.valueTypeManual'\n                      ) | translate\n                    }}\n                  </button>\n                </div>\n              </div>\n            }\n          }\n        }\n      </div>\n\n      <button\n        class=\"condition-tree__remove\"\n        cdsButton=\"ghost\"\n        [attr.data-test-id]=\"testIds.removeConditionButton\"\n        [disabled]=\"disabled\"\n        [iconOnly]=\"true\"\n        (click)=\"removeCondition(i)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n  }\n\n  <button\n    class=\"condition-tree__add\"\n    cdsButton=\"ghost\"\n    size=\"sm\"\n    [attr.data-test-id]=\"testIds.addConditionButton\"\n    [disabled]=\"disabled\"\n    (click)=\"addCondition()\"\n  >\n    {{ 'accessControl.editor.addCondition' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</div>\n", styles: [".condition-tree{display:flex;flex-direction:column;gap:.75rem}.condition-tree v-select{display:block;width:100%}.condition-tree--nested{border-left:2px solid var(--cds-border-subtle, #c6c6c6);margin-top:.5rem;padding-left:1rem}.condition-tree__row{background-color:var(--cds-layer);border:1px solid var(--cds-border-subtle);display:flex;flex-direction:row;align-items:stretch;gap:1rem;padding:.75rem}.condition-tree__content{display:flex;flex:1 1 auto;flex-direction:column;gap:.75rem;min-width:0}.condition-tree__remove{align-items:flex-start;align-self:stretch}.condition-tree__fields{display:flex;flex-direction:column;gap:.75rem}.condition-tree__value{width:100%}.condition-tree__mode-switch{align-self:flex-start;margin-top:.25rem}.condition-tree__nested{display:flex;flex-direction:column}.condition-tree__add{align-self:flex-start}.condition-tree .label-with-tooltip{align-items:center;display:inline-flex;gap:.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: "directive", type: i2$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i3$1.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "directive", type: i2$1.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: ConditionTreeComponent, selector: "valtimo-condition-tree", inputs: ["conditions", "resourceType", "disabled", "depth"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlOverviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ConditionTreeComponent, 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: i1$2.Router }], propDecorators: { carbonList: [{
-                type: ViewChild,
-                args: [CarbonListComponent]
+            args: [{ standalone: false, selector: 'valtimo-condition-tree', 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 class=\"condition-tree\" [class.condition-tree--nested]=\"depth > 0\">\n  @for (control of conditions.controls; track control; let i = $index) {\n    <div class=\"condition-tree__row\" [cdsLayer]=\"rowLayerLevel\" [formGroup]=\"asFormGroup(control)\">\n      <div class=\"condition-tree__content\">\n        <v-select\n          class=\"condition-tree__type\"\n          formControlName=\"type\"\n          [cdsLayer]=\"inputLayerLevel\"\n          [clearable]=\"false\"\n          [dataTestId]=\"testIds.conditionTypeSelect\"\n          [defaultSelectionId]=\"typeOf(i)\"\n          [dropUp]=\"false\"\n          [items]=\"typeItems\"\n          [tooltip]=\"'accessControl.editor.tooltips.conditionType' | translate\"\n          titleTranslationKey=\"accessControl.editor.conditionType\"\n          (selectedChange)=\"onTypeChange(i)\"\n        ></v-select>\n\n        @switch (typeOf(i)) {\n          @case ('container') {\n            <v-select\n              formControlName=\"resourceType\"\n              [cdsLayer]=\"inputLayerLevel\"\n              [dataTestId]=\"testIds.conditionFieldSelect\"\n              [defaultSelectionId]=\"containerResourceTypeAt(i)\"\n              [dropUp]=\"false\"\n              [invalid]=\"\n                !!asFormGroup(control).errors?.['resourceTypeRequired'] &&\n                !!asFormGroup(control).get('resourceType')?.touched\n              \"\n              [items]=\"containerTargetItems\"\n              [placeholder]=\"'accessControl.editor.relatedResourcePlaceholder' | translate\"\n              [required]=\"true\"\n              [tooltip]=\"'accessControl.editor.tooltips.relatedResource' | translate\"\n              titleTranslationKey=\"accessControl.editor.relatedResource\"\n            ></v-select>\n\n            <div class=\"condition-tree__nested\">\n              <valtimo-condition-tree\n                [conditions]=\"nestedConditions(i)\"\n                [depth]=\"depth + 1\"\n                [disabled]=\"disabled\"\n                [resourceType]=\"containerResourceType(i)\"\n              ></valtimo-condition-tree>\n            </div>\n          }\n\n          @default {\n            <div class=\"condition-tree__fields\">\n              <v-select\n                class=\"condition-tree__field\"\n                formControlName=\"field\"\n                [cdsLayer]=\"inputLayerLevel\"\n                [dataTestId]=\"testIds.conditionFieldSelect\"\n                [defaultSelectionId]=\"fieldValueAt(i)\"\n                [dropUp]=\"false\"\n                [invalid]=\"\n                  !!asFormGroup(control).errors?.['fieldRequired'] &&\n                  !!asFormGroup(control).get('field')?.touched\n                \"\n                [items]=\"fieldItems\"\n                [placeholder]=\"'accessControl.editor.fieldPlaceholder' | translate\"\n                [required]=\"true\"\n                [tooltip]=\"'accessControl.editor.tooltips.field' | translate\"\n                titleTranslationKey=\"accessControl.editor.field\"\n              ></v-select>\n\n              <v-select\n                class=\"condition-tree__operator\"\n                formControlName=\"operator\"\n                [cdsLayer]=\"inputLayerLevel\"\n                [clearable]=\"false\"\n                [dataTestId]=\"testIds.conditionOperatorSelect\"\n                [defaultSelectionId]=\"operatorValueAt(i)\"\n                [dropUp]=\"false\"\n                [items]=\"operatorItems\"\n                [tooltip]=\"'accessControl.editor.tooltips.operator' | translate\"\n                titleTranslationKey=\"accessControl.editor.operator\"\n              ></v-select>\n\n              <div class=\"condition-tree__value cds--form-item\" [cdsLayer]=\"inputLayerLevel\">\n                <label class=\"cds--label label-with-tooltip\">\n                  {{ 'accessControl.editor.value' | translate }} ({{\n                    'interface.required' | translate\n                  }})\n                  <v-tooltip-icon\n                    [tooltip]=\"'accessControl.editor.tooltips.value' | translate\"\n                  ></v-tooltip-icon>\n                </label>\n                <input\n                  cdsText\n                  [attr.data-test-id]=\"testIds.conditionValueInput\"\n                  [class.cds--text-input--invalid]=\"\n                    !!asFormGroup(control).errors?.['valueRequired'] &&\n                    !!asFormGroup(control).get('value')?.touched\n                  \"\n                  [placeholder]=\"'accessControl.editor.valuePlaceholder' | translate\"\n                  formControlName=\"value\"\n                />\n              </div>\n            </div>\n\n            @if (typeOf(i) === 'expression') {\n              <div class=\"condition-tree__fields\">\n                <div class=\"condition-tree__value cds--form-item\" [cdsLayer]=\"inputLayerLevel\">\n                  <label class=\"cds--label label-with-tooltip\">\n                    {{ 'accessControl.editor.path' | translate }} ({{\n                      'interface.required' | translate\n                    }})\n                    <v-tooltip-icon\n                      [tooltip]=\"'accessControl.editor.tooltips.path' | translate\"\n                    ></v-tooltip-icon>\n                  </label>\n                  <input\n                    cdsText\n                    [attr.data-test-id]=\"testIds.conditionPathInput\"\n                    [class.cds--text-input--invalid]=\"\n                      !!asFormGroup(control).errors?.['pathRequired'] &&\n                      !!asFormGroup(control).get('path')?.touched\n                    \"\n                    [placeholder]=\"'accessControl.editor.pathPlaceholder' | translate\"\n                    formControlName=\"path\"\n                  />\n                </div>\n\n                <div class=\"condition-tree__value cds--form-item\" [cdsLayer]=\"inputLayerLevel\">\n                  <label class=\"cds--label label-with-tooltip\">\n                    {{ 'accessControl.editor.clazz' | translate }} ({{\n                      'interface.required' | translate\n                    }})\n                    <v-tooltip-icon\n                      [tooltip]=\"'accessControl.editor.tooltips.clazz' | translate\"\n                    ></v-tooltip-icon>\n                  </label>\n\n                  @if (clazzManualAt(i)) {\n                    <input\n                      cdsText\n                      [attr.data-test-id]=\"testIds.conditionClazzInput\"\n                      [class.cds--text-input--invalid]=\"\n                        !!asFormGroup(control).errors?.['clazzRequired'] &&\n                        !!asFormGroup(control).get('clazz')?.touched\n                      \"\n                      [placeholder]=\"'accessControl.editor.clazzPlaceholder' | translate\"\n                      formControlName=\"clazz\"\n                    />\n                  } @else {\n                    <v-select\n                      formControlName=\"clazz\"\n                      [cdsLayer]=\"inputLayerLevel\"\n                      [clearable]=\"false\"\n                      [dataTestId]=\"testIds.conditionClazzInput\"\n                      [defaultSelectionId]=\"clazzValueAt(i)\"\n                      [dropUp]=\"false\"\n                      [invalid]=\"\n                        !!asFormGroup(control).errors?.['clazzRequired'] &&\n                        !!asFormGroup(control).get('clazz')?.touched\n                      \"\n                      [items]=\"valueTypeItems\"\n                    ></v-select>\n                  }\n\n                  <button\n                    class=\"condition-tree__mode-switch\"\n                    cdsButton=\"ghost\"\n                    size=\"sm\"\n                    type=\"button\"\n                    [disabled]=\"disabled\"\n                    (click)=\"onClazzManualToggle(i, !clazzManualAt(i))\"\n                  >\n                    {{\n                      (clazzManualAt(i)\n                        ? 'accessControl.editor.valueTypeFromList'\n                        : 'accessControl.editor.valueTypeManual'\n                      ) | translate\n                    }}\n                  </button>\n                </div>\n              </div>\n            }\n          }\n        }\n      </div>\n\n      <button\n        class=\"condition-tree__remove\"\n        cdsButton=\"ghost\"\n        [attr.data-test-id]=\"testIds.removeConditionButton\"\n        [disabled]=\"disabled\"\n        [iconOnly]=\"true\"\n        (click)=\"removeCondition(i)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n  }\n\n  <button\n    class=\"condition-tree__add\"\n    cdsButton=\"ghost\"\n    size=\"sm\"\n    [attr.data-test-id]=\"testIds.addConditionButton\"\n    [disabled]=\"disabled\"\n    (click)=\"addCondition()\"\n  >\n    {{ 'accessControl.editor.addCondition' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</div>\n", styles: [".condition-tree{display:flex;flex-direction:column;gap:.75rem}.condition-tree v-select{display:block;width:100%}.condition-tree--nested{border-left:2px solid var(--cds-border-subtle, #c6c6c6);margin-top:.5rem;padding-left:1rem}.condition-tree__row{background-color:var(--cds-layer);border:1px solid var(--cds-border-subtle);display:flex;flex-direction:row;align-items:stretch;gap:1rem;padding:.75rem}.condition-tree__content{display:flex;flex:1 1 auto;flex-direction:column;gap:.75rem;min-width:0}.condition-tree__remove{align-items:flex-start;align-self:stretch}.condition-tree__fields{display:flex;flex-direction:column;gap:.75rem}.condition-tree__value{width:100%}.condition-tree__mode-switch{align-self:flex-start;margin-top:.25rem}.condition-tree__nested{display:flex;flex-direction:column}.condition-tree__add{align-self:flex-start}.condition-tree .label-with-tooltip{align-items:center;display:inline-flex;gap:.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: AccessControlFormEditorService }, { type: i2$1.IconService }], propDecorators: { conditions: [{
+                type: Input
+            }], resourceType: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], depth: [{
+                type: Input
             }] } });
 
 /*
@@ -616,17 +1458,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * 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';
+// Renders a permission action key (e.g. "view_list") as its natural-language label, falling back to
+// the raw key when there is no translation. Impure so the label follows runtime language changes.
+class ActionLabelPipe {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    transform(action) {
+        if (!action)
+            return '';
+        const key = `accessControl.actions.${action}`;
+        const translated = this.translateService.instant(key);
+        return translated === key ? action : translated;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ActionLabelPipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ActionLabelPipe, isStandalone: true, name: "actionLabel", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ActionLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'actionLabel',
+                    pure: false,
+                }]
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -643,6 +1498,31 @@ const NO_CONTEXT_RESOURCE_TYPE = 'com.ritense.authorization.NoContext';
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+// Resolves a short, human description for a permission action (e.g. "view_list") from
+// accessControl.actionDescriptions.<action>. Returns an empty string when no description is
+// configured, so callers can hide the tooltip. Impure so it follows runtime language changes.
+class ActionDescriptionPipe {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    transform(action) {
+        if (!action)
+            return '';
+        const key = `accessControl.actionDescriptions.${action}`;
+        const translated = this.translateService.instant(key);
+        return translated === key ? '' : translated;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ActionDescriptionPipe, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ActionDescriptionPipe, isStandalone: true, name: "actionDescription", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ActionDescriptionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'actionDescription',
+                    pure: false,
+                }]
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -659,79 +1539,215 @@ const NO_CONTEXT_RESOURCE_TYPE = 'com.ritense.authorization.NoContext';
  * 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;
+// Maps a permission action key (e.g. "create") to a tag colour, so each kind of action is shown with
+// its own distinct colour. The colour may be a Carbon built-in or one of the extended case-widget
+// colours registered globally in carbon.scss (e.g. "orange", "periwinkle"); the latter are cast to
+// TagType so they satisfy the cds-tag input. Falls back to a neutral colour for unknown actions.
+class ActionTagTypePipe {
+    transform(action) {
+        if (!action)
+            return DEFAULT_ACTION_TAG_TYPE;
+        return (ACTION_TAG_TYPE[action] ?? DEFAULT_ACTION_TAG_TYPE);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ActionTagTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ActionTagTypePipe, isStandalone: true, name: "actionTagType" }); }
 }
-function formatValue(translate, value) {
-    if (value === null) {
-        return translate.instant('accessControl.overview.specialValues.null');
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ActionTagTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'actionTagType',
+                }]
+        }] });
+
+/*
+ * 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 PermissionFormComponent {
+    constructor(formEditorService, iconService, changeDetectorRef) {
+        this.formEditorService = formEditorService;
+        this.iconService = iconService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.index = 0;
+        this.disabled = false;
+        this.roleKey = null;
+        this.removeEvent = new EventEmitter();
+        this.resourceTypeItems = [];
+        this.actionItems = [];
+        this.contextResourceTypeItems = [];
+        // Whether the resource type has any related resources to scope to — gates the "Specific context"
+        // option in the context switcher.
+        this.hasContextTargets = false;
+        // The form is rendered (but visually hidden) from the start so the wrapped comboboxes can
+        // initialize and fill in their preselected values. A spinner is shown until that has happened,
+        // after which the prefilled form is revealed.
+        this.$loading = signal(true);
+        // The permission is shown as a three-section accordion. Only one section is open at a time;
+        // "Resource & actions" is open by default.
+        this.$openSection = signal('resourceActions');
+        // Controls the "remove permission" confirmation modal. Removal only happens on confirm, and even
+        // then it just drops the permission from the editable list — nothing is persisted until the whole
+        // set of permissions is saved.
+        this.showRemoveModal$ = new BehaviorSubject(false);
+        this.testIds = ACCESS_CONTROL_EDITOR_TEST_IDS;
+        this._subscriptions = new Subscription();
+        this.iconService.registerAll([Information16, TrashCan16]);
     }
-    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;
+    get resourceTypeValue() {
+        return this.group.get('resourceType').value;
+    }
+    // The short (simple) class name of the resource type, e.g. "CaseDefinition" for
+    // "com.ritense.case_.domain.definition.CaseDefinition". Shown as the preview title, with the full
+    // technical name as a subtitle beneath it.
+    get resourceShortName() {
+        return shortTypeName(this.resourceTypeValue);
+    }
+    get contextResourceTypeValue() {
+        return this.group.get('contextResourceType').value;
+    }
+    // Whether context scoping is enabled (the toggle). Off means no context is written at all.
+    get hasContext() {
+        return this.group.get('hasContext').value;
+    }
+    // True when a real context resource is selected (i.e. anything other than the "No context"
+    // marker). Gates the context condition tree — the marker has no fields to build conditions on.
+    get hasContextResource() {
+        const value = this.contextResourceTypeValue;
+        return !!value && value !== NO_CONTEXT_RESOURCE_TYPE;
+    }
+    // The three-way context choice, derived from the form: 'none' (context is ignored), 'noContext'
+    // (only applies when there is no context) or 'specific' (restricted to a context resource).
+    get contextMode() {
+        if (!this.hasContext)
+            return 'none';
+        return this.hasContextResource ? 'specific' : 'noContext';
+    }
+    get actionsControl() {
+        return this.group.get('actions');
+    }
+    get selectedActions() {
+        return this.actionsControl.value ?? [];
+    }
+    get conditionsArray() {
+        return this.group.get('conditions');
+    }
+    get contextConditionsArray() {
+        return this.group.get('contextConditions');
+    }
+    ngOnInit() {
+        this.resourceTypeItems = this.formEditorService.resourceTypeItems(this.resourceTypeValue);
+        this.recomputeActionItems();
+        this.recomputeContextResourceTypeItems();
+        this._subscriptions.add(this.group.get('resourceType').valueChanges.subscribe(() => {
+            this.recomputeActionItems();
+            this.recomputeContextResourceTypeItems();
+        }));
+    }
+    ngAfterViewInit() {
+        // The child comboboxes flush their preselected values in a setTimeout scheduled during their
+        // own view initialization (child hooks run first). This setTimeout therefore runs after them,
+        // at which point the form is prefilled and can be revealed.
+        this._revealTimeoutId = setTimeout(() => {
+            this.$loading.set(false);
+            this.changeDetectorRef.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+        this.showRemoveModal$.complete();
+        if (this._revealTimeoutId !== undefined)
+            clearTimeout(this._revealTimeoutId);
+    }
+    // Applies a context-switcher choice to the form. 'none' clears context entirely; 'noContext'
+    // scopes the permission to the "no context" marker; 'specific' scopes it to a real context
+    // resource (keeping the current one, or defaulting to the first available target).
+    onContextModeChange(mode) {
+        if (this.disabled || mode === this.contextMode)
+            return;
+        const hasContext = this.group.get('hasContext');
+        const contextResourceType = this.group.get('contextResourceType');
+        if (mode === 'none') {
+            hasContext.setValue(false);
+            return;
+        }
+        hasContext.setValue(true);
+        if (mode === 'noContext') {
+            contextResourceType.setValue(NO_CONTEXT_RESOURCE_TYPE);
+        }
+        else if (!this.hasContextResource) {
+            const firstTarget = this.formEditorService.containerTargetItems(this.resourceTypeValue)[0]
+                ?.id;
+            contextResourceType.setValue(firstTarget ?? NO_CONTEXT_RESOURCE_TYPE);
         }
-        return value;
     }
-    if (Array.isArray(value)) {
-        return value.map(item => formatValue(translate, item)).join(', ');
+    onActionToggle(action, checked) {
+        const actions = new Set(this.selectedActions);
+        if (checked) {
+            actions.add(action);
+        }
+        else {
+            actions.delete(action);
+        }
+        this.actionsControl.setValue([...actions]);
+        this.actionsControl.markAsTouched();
+    }
+    onSectionToggle(section, event) {
+        // Only one section is open at a time: opening one collapses the others via the [expanded]
+        // bindings; collapsing the open one leaves all sections closed.
+        this.$openSection.set(event?.expanded ? section : null);
+    }
+    openRemoveModal() {
+        this.showRemoveModal$.next(true);
+    }
+    onRemove() {
+        this.removeEvent.emit();
+    }
+    recomputeActionItems() {
+        this.actionItems = this.formEditorService.actionItems(this.resourceTypeValue, this.actionsControl.value ?? []);
+    }
+    // The context choices depend on the selected resource type, so recompute on change. The "specific
+    // context" dropdown lists only real target resources ("no context" is its own switcher mode); if
+    // the selected resource is no longer a valid target, fall back to the "no context" marker.
+    recomputeContextResourceTypeItems() {
+        const validTargets = this.formEditorService.containerTargetItems(this.resourceTypeValue);
+        this.hasContextTargets = validTargets.length > 0;
+        const current = this.contextResourceTypeValue;
+        if (current &&
+            current !== NO_CONTEXT_RESOURCE_TYPE &&
+            !validTargets.some(target => target.id === current)) {
+            this.group.get('contextResourceType').setValue(NO_CONTEXT_RESOURCE_TYPE);
+        }
+        this.contextResourceTypeItems = this.formEditorService.containerTargetItems(this.resourceTypeValue, this.hasContextResource ? this.contextResourceTypeValue : null);
     }
-    return String(value);
-}
-function humanizeFieldPath(field) {
-    return field
-        .split('.')
-        .map(part => part.replace(/([a-z0-9])([A-Z])/g, '$1 $2').toLowerCase())
-        .join(' ');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PermissionFormComponent, deps: [{ token: AccessControlFormEditorService }, { token: i2$1.IconService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: PermissionFormComponent, isStandalone: false, selector: "valtimo-permission-form", inputs: { group: "group", index: "index", disabled: "disabled", roleKey: "roleKey" }, outputs: { removeEvent: "removeEvent" }, 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  class=\"permission-form\"\n  [attr.data-test-id]=\"testIds.permissionCard\"\n  [cdsLayer]=\"0\"\n  [formGroup]=\"group\"\n>\n  @if ($loading()) {\n    <div class=\"permission-form__loading\">\n      <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"sm\"></cds-loading>\n    </div>\n  }\n\n  <div class=\"permission-form__body\" [class.permission-form__body--hidden]=\"$loading()\">\n    <!-- Header block: the permission preview followed by an editor-level note, separated from the\n         editable sections below by a subtle divider. -->\n    <div class=\"permission-form__header\">\n      <!-- A larger preview of the permission (the same information shown in the sidebar list), so\n           the rule being edited is recognisable at the top of the panel. The full resource type is\n           shown here (the sidebar only shows the short name). -->\n      <div class=\"permission-form__preview\">\n        <div class=\"permission-form__preview-heading\">\n          <h4 class=\"permission-form__preview-title\">\n            @if (resourceTypeValue) {\n              {{ resourceShortName }}\n            } @else {\n              {{ 'accessControl.editor.newPermission' | translate }}\n            }\n          </h4>\n\n          @if (resourceTypeValue) {\n            <span class=\"permission-form__preview-subtitle\">{{ resourceTypeValue }}</span>\n          }\n        </div>\n\n        @if (conditionsArray.length || hasContext) {\n          <div class=\"permission-form__preview-row\">\n            <span class=\"permission-form__preview-label\">{{\n              'accessControl.editor.preview.includes' | translate\n            }}</span>\n\n            @if (conditionsArray.length) {\n              <cds-tag size=\"sm\" type=\"high-contrast\">{{\n                'accessControl.editor.hasConditions' | translate\n              }}</cds-tag>\n            }\n            @if (hasContext) {\n              <cds-tag size=\"sm\" type=\"high-contrast\">{{\n                'accessControl.editor.hasContext' | translate\n              }}</cds-tag>\n            }\n          </div>\n        }\n\n        @if (selectedActions.length) {\n          <div class=\"permission-form__preview-row\">\n            <span class=\"permission-form__preview-label\">{{\n              'accessControl.editor.preview.actions' | translate\n            }}</span>\n\n            @for (action of selectedActions; track action) {\n              <cds-tag size=\"sm\" [type]=\"action | actionTagType\">{{\n                action | actionLabel\n              }}</cds-tag>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Editor-level note: applies to the role selected on this page, and only system-supported\n           options can be selected. -->\n      <ng-container\n        *ngTemplateOutlet=\"\n          infoNote;\n          context: {\n            $implicit: resourceShortName\n              ? ('accessControl.editor.permissionsHint'\n                | translate: {resource: resourceShortName, role: roleKey})\n              : ('accessControl.editor.permissionsHintNew' | translate: {role: roleKey}),\n          }\n        \"\n      ></ng-container>\n    </div>\n\n    <cds-accordion class=\"permission-form__accordion\">\n      <cds-accordion-item\n        [expanded]=\"$openSection() === 'resourceActions'\"\n        [title]=\"'accessControl.editor.resourceAndActions' | translate\"\n        (selected)=\"onSectionToggle('resourceActions', $event)\"\n      >\n        <div class=\"permission-form__section\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              infoNote;\n              context: {$implicit: 'accessControl.editor.resourceActionsHint' | translate}\n            \"\n          ></ng-container>\n\n          <div class=\"permission-form__row\">\n            <v-select\n              class=\"permission-form__resource-type\"\n              formControlName=\"resourceType\"\n              [cdsLayer]=\"1\"\n              [dataTestId]=\"testIds.resourceTypeSelect\"\n              [defaultSelectionId]=\"resourceTypeValue\"\n              [dropUp]=\"false\"\n              [invalid]=\"group.get('resourceType')!.invalid && group.get('resourceType')!.touched\"\n              [items]=\"resourceTypeItems\"\n              [placeholder]=\"'accessControl.editor.resourceTypePlaceholder' | translate\"\n              [required]=\"true\"\n              [tooltip]=\"'accessControl.editor.tooltips.resourceType' | translate\"\n              titleTranslationKey=\"accessControl.editor.resourceType\"\n            ></v-select>\n\n            <div class=\"permission-form__actions-field\">\n              <label class=\"cds--label label-with-tooltip\">\n                {{ 'accessControl.editor.actions' | translate }} ({{\n                  'interface.required' | translate\n                }})\n                <v-tooltip-icon\n                  [tooltip]=\"'accessControl.editor.tooltips.actions' | translate\"\n                ></v-tooltip-icon>\n              </label>\n\n              @if (actionItems.length) {\n                <div\n                  class=\"permission-form__actions-grid\"\n                  [attr.data-test-id]=\"testIds.actionsSelect\"\n                  [class.permission-form__actions-grid--invalid]=\"\n                    actionsControl.invalid && actionsControl.touched\n                  \"\n                >\n                  @for (item of actionItems; track item.id) {\n                    <div class=\"permission-form__action\">\n                      <cds-checkbox\n                        [checked]=\"selectedActions.includes(item.id)\"\n                        [disabled]=\"disabled\"\n                        (checkedChange)=\"onActionToggle(item.id, $event)\"\n                      >\n                        {{ item.id | actionLabel }}\n                      </cds-checkbox>\n\n                      @if (item.id | actionDescription; as description) {\n                        <v-tooltip-icon [tooltip]=\"description\"></v-tooltip-icon>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <p class=\"permission-form__hint\">\n                  {{ 'accessControl.editor.noActions' | translate }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n      </cds-accordion-item>\n\n      <cds-accordion-item\n        [class.permission-form__section-configured]=\"conditionsArray.length > 0\"\n        [expanded]=\"$openSection() === 'conditions'\"\n        [title]=\"'accessControl.editor.conditions' | translate\"\n        (selected)=\"onSectionToggle('conditions', $event)\"\n      >\n        <div class=\"permission-form__section\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              infoNote;\n              context: {$implicit: 'accessControl.editor.conditionsHint' | translate}\n            \"\n          ></ng-container>\n\n          <valtimo-condition-tree\n            [conditions]=\"conditionsArray\"\n            [disabled]=\"disabled\"\n            [resourceType]=\"resourceTypeValue\"\n          ></valtimo-condition-tree>\n        </div>\n      </cds-accordion-item>\n\n      <cds-accordion-item\n        [class.permission-form__section-configured]=\"hasContext\"\n        [expanded]=\"$openSection() === 'context'\"\n        [title]=\"'accessControl.editor.contextSection' | translate\"\n        (selected)=\"onSectionToggle('context', $event)\"\n      >\n        <div class=\"permission-form__section\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              infoNote;\n              context: {$implicit: 'accessControl.editor.contextHint' | translate}\n            \"\n          ></ng-container>\n\n          <cds-content-switcher\n            class=\"permission-form__context-switcher\"\n            [attr.data-test-id]=\"testIds.contextToggle\"\n            [class.permission-form__context-switcher--disabled]=\"disabled\"\n            size=\"sm\"\n          >\n            <button\n              cdsContentOption\n              type=\"button\"\n              [active]=\"contextMode === 'none'\"\n              (selected)=\"onContextModeChange('none')\"\n            >\n              {{ 'accessControl.editor.contextModeNone' | translate }}\n            </button>\n            <button\n              cdsContentOption\n              type=\"button\"\n              [active]=\"contextMode === 'noContext'\"\n              (selected)=\"onContextModeChange('noContext')\"\n            >\n              {{ 'accessControl.editor.contextModeNoContext' | translate }}\n            </button>\n            @if (hasContextTargets) {\n              <button\n                cdsContentOption\n                type=\"button\"\n                [active]=\"contextMode === 'specific'\"\n                (selected)=\"onContextModeChange('specific')\"\n              >\n                {{ 'accessControl.editor.contextModeSpecific' | translate }}\n              </button>\n            }\n          </cds-content-switcher>\n\n          @switch (contextMode) {\n            @case ('noContext') {\n              <cds-inline-notification\n                class=\"permission-form__notification\"\n                [notificationObj]=\"{\n                  type: 'info',\n                  message: 'accessControl.editor.noContextHint' | translate,\n                  lowContrast: true,\n                  showClose: false,\n                }\"\n              ></cds-inline-notification>\n            }\n            @case ('specific') {\n              <v-select\n                class=\"permission-form__resource-type\"\n                formControlName=\"contextResourceType\"\n                [cdsLayer]=\"1\"\n                [clearable]=\"false\"\n                [dataTestId]=\"testIds.contextResourceTypeSelect\"\n                [defaultSelectionId]=\"contextResourceTypeValue || ''\"\n                [dropUp]=\"false\"\n                [items]=\"contextResourceTypeItems\"\n                [placeholder]=\"'accessControl.editor.contextResourceTypePlaceholder' | translate\"\n                [tooltip]=\"'accessControl.editor.tooltips.contextResourceType' | translate\"\n                titleTranslationKey=\"accessControl.editor.contextResourceType\"\n              ></v-select>\n\n              <valtimo-condition-tree\n                [conditions]=\"contextConditionsArray\"\n                [disabled]=\"disabled\"\n                [resourceType]=\"contextResourceTypeValue\"\n              ></valtimo-condition-tree>\n            }\n          }\n        </div>\n      </cds-accordion-item>\n    </cds-accordion>\n\n    <div class=\"permission-form__footer\">\n      <button\n        cdsButton=\"danger--ghost\"\n        size=\"sm\"\n        [attr.data-test-id]=\"testIds.removePermissionButton\"\n        [disabled]=\"disabled\"\n        (click)=\"openRemoveModal()\"\n      >\n        {{ 'accessControl.editor.removePermission' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"accessControl.editor.removePermission\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"accessControl.editor.removePermissionModal.content\"\n    titleTranslationKey=\"accessControl.editor.removePermissionModal.title\"\n    [showModalSubject$]=\"showRemoveModal$\"\n    (confirmEvent)=\"onRemove()\"\n  ></valtimo-confirmation-modal>\n\n  <!-- Lightweight inline hint: a blue information icon with italic secondary text. The message is\n       passed in via context so the icon and styling are defined in a single place. -->\n  <ng-template #infoNote let-message>\n    <p class=\"permission-form__info-note\">\n      <svg class=\"permission-form__info-icon\" cdsIcon=\"information\" size=\"16\"></svg>\n\n      <span>{{ message }}</span>\n    </p>\n  </ng-template>\n</div>\n", styles: [".permission-form{display:flex;flex-direction:column}.permission-form v-select{display:block;width:100%}.permission-form__loading{align-items:center;display:flex;justify-content:center;padding:1.5rem 0}.permission-form__body{display:flex;flex-direction:column;gap:1rem}.permission-form__body--hidden{display:none}.permission-form__accordion{width:100%}.permission-form__header{border-bottom:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex-direction:column;gap:1rem;padding-bottom:1.5rem}.permission-form__preview{display:flex;flex-direction:column;gap:.5rem}.permission-form__preview-heading{display:flex;flex-direction:column;gap:.125rem}.permission-form__preview-title{font-size:1.25rem;font-weight:400;line-height:1.4;margin:0;overflow-wrap:anywhere}.permission-form__preview-subtitle{color:var(--cds-text-secondary, #525252);font-size:.75rem;font-weight:400;line-height:1.34;overflow-wrap:anywhere}.permission-form__preview-row{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.permission-form__preview-row ::ng-deep .cds--tag{margin:0;max-width:none}.permission-form__preview-label{color:var(--cds-text-secondary, #525252);font-size:.875rem;font-weight:600;padding-right:.5rem}.permission-form__row{display:flex;flex-direction:column;gap:1rem}.permission-form__context-switcher{display:block;width:100%}.permission-form__context-switcher--disabled{opacity:.5;pointer-events:none}.permission-form__actions-field{display:flex;flex-direction:column;gap:.5rem}.permission-form__actions-grid{display:grid;gap:.25rem 1rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}.permission-form__actions-grid--invalid{border-left:2px solid var(--cds-support-error, #da1e28);margin-left:-.75rem;padding-left:calc(.75rem - 2px)}.permission-form__action{align-items:center;display:flex;gap:.25rem}.permission-form .label-with-tooltip{align-items:center;display:inline-flex;gap:.25rem}.permission-form__section{display:flex;flex-direction:column;gap:.75rem}.permission-form__hint{color:var(--cds-text-secondary, #525252);font-size:.875rem;margin:0}.permission-form__info-note{align-items:flex-start;color:var(--cds-text-secondary, #525252);display:flex;font-size:.875rem;gap:.375rem;line-height:1.34;margin-bottom:8px}.permission-form__info-icon{color:var(--cds-support-info, #0043ce);flex-shrink:0;margin-top:.0625rem}.permission-form__footer{display:flex;justify-content:flex-end;padding-top:.25rem}:host ::ng-deep .permission-form__accordion .cds--accordion__item:first-of-type{border-top:0}:host ::ng-deep .permission-form__accordion .cds--accordion__content{padding:1rem 1rem 1.5rem}:host ::ng-deep .permission-form__accordion .permission-form__section-configured .cds--accordion__title:after{background:var(--cds-support-info, #0043ce);border-radius:50%;content:\"\";display:inline-block;height:.5rem;margin-left:.5rem;vertical-align:middle;width:.5rem}:host ::ng-deep .permission-form__notification.cds--inline-notification{inline-size:100%;margin-block-end:0;max-inline-size:100%;min-inline-size:0}\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: "directive", type: i3.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { 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"] }, { kind: "component", type: i2$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i2$1.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "component", type: i3$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i3$1.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i2$1.ContentSwitcher, selector: "cds-content-switcher, ibm-content-switcher", inputs: ["ariaLabel", "size"], outputs: ["selected"] }, { kind: "directive", type: i2$1.ContentSwitcherOption, selector: "[cdsContentOption], [ibmContentOption]", inputs: ["active", "name"], outputs: ["selected", "onClick", "onFocus"] }, { kind: "component", type: i2$1.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$1.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "component", type: i2$1.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "directive", type: i2$1.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i2$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: ConditionTreeComponent, selector: "valtimo-condition-tree", inputs: ["conditions", "resourceType", "disabled", "depth"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }, { kind: "pipe", type: ActionDescriptionPipe, name: "actionDescription" }, { kind: "pipe", type: ActionTagTypePipe, name: "actionTagType" }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PermissionFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'valtimo-permission-form', 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  class=\"permission-form\"\n  [attr.data-test-id]=\"testIds.permissionCard\"\n  [cdsLayer]=\"0\"\n  [formGroup]=\"group\"\n>\n  @if ($loading()) {\n    <div class=\"permission-form__loading\">\n      <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"sm\"></cds-loading>\n    </div>\n  }\n\n  <div class=\"permission-form__body\" [class.permission-form__body--hidden]=\"$loading()\">\n    <!-- Header block: the permission preview followed by an editor-level note, separated from the\n         editable sections below by a subtle divider. -->\n    <div class=\"permission-form__header\">\n      <!-- A larger preview of the permission (the same information shown in the sidebar list), so\n           the rule being edited is recognisable at the top of the panel. The full resource type is\n           shown here (the sidebar only shows the short name). -->\n      <div class=\"permission-form__preview\">\n        <div class=\"permission-form__preview-heading\">\n          <h4 class=\"permission-form__preview-title\">\n            @if (resourceTypeValue) {\n              {{ resourceShortName }}\n            } @else {\n              {{ 'accessControl.editor.newPermission' | translate }}\n            }\n          </h4>\n\n          @if (resourceTypeValue) {\n            <span class=\"permission-form__preview-subtitle\">{{ resourceTypeValue }}</span>\n          }\n        </div>\n\n        @if (conditionsArray.length || hasContext) {\n          <div class=\"permission-form__preview-row\">\n            <span class=\"permission-form__preview-label\">{{\n              'accessControl.editor.preview.includes' | translate\n            }}</span>\n\n            @if (conditionsArray.length) {\n              <cds-tag size=\"sm\" type=\"high-contrast\">{{\n                'accessControl.editor.hasConditions' | translate\n              }}</cds-tag>\n            }\n            @if (hasContext) {\n              <cds-tag size=\"sm\" type=\"high-contrast\">{{\n                'accessControl.editor.hasContext' | translate\n              }}</cds-tag>\n            }\n          </div>\n        }\n\n        @if (selectedActions.length) {\n          <div class=\"permission-form__preview-row\">\n            <span class=\"permission-form__preview-label\">{{\n              'accessControl.editor.preview.actions' | translate\n            }}</span>\n\n            @for (action of selectedActions; track action) {\n              <cds-tag size=\"sm\" [type]=\"action | actionTagType\">{{\n                action | actionLabel\n              }}</cds-tag>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Editor-level note: applies to the role selected on this page, and only system-supported\n           options can be selected. -->\n      <ng-container\n        *ngTemplateOutlet=\"\n          infoNote;\n          context: {\n            $implicit: resourceShortName\n              ? ('accessControl.editor.permissionsHint'\n                | translate: {resource: resourceShortName, role: roleKey})\n              : ('accessControl.editor.permissionsHintNew' | translate: {role: roleKey}),\n          }\n        \"\n      ></ng-container>\n    </div>\n\n    <cds-accordion class=\"permission-form__accordion\">\n      <cds-accordion-item\n        [expanded]=\"$openSection() === 'resourceActions'\"\n        [title]=\"'accessControl.editor.resourceAndActions' | translate\"\n        (selected)=\"onSectionToggle('resourceActions', $event)\"\n      >\n        <div class=\"permission-form__section\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              infoNote;\n              context: {$implicit: 'accessControl.editor.resourceActionsHint' | translate}\n            \"\n          ></ng-container>\n\n          <div class=\"permission-form__row\">\n            <v-select\n              class=\"permission-form__resource-type\"\n              formControlName=\"resourceType\"\n              [cdsLayer]=\"1\"\n              [dataTestId]=\"testIds.resourceTypeSelect\"\n              [defaultSelectionId]=\"resourceTypeValue\"\n              [dropUp]=\"false\"\n              [invalid]=\"group.get('resourceType')!.invalid && group.get('resourceType')!.touched\"\n              [items]=\"resourceTypeItems\"\n              [placeholder]=\"'accessControl.editor.resourceTypePlaceholder' | translate\"\n              [required]=\"true\"\n              [tooltip]=\"'accessControl.editor.tooltips.resourceType' | translate\"\n              titleTranslationKey=\"accessControl.editor.resourceType\"\n            ></v-select>\n\n            <div class=\"permission-form__actions-field\">\n              <label class=\"cds--label label-with-tooltip\">\n                {{ 'accessControl.editor.actions' | translate }} ({{\n                  'interface.required' | translate\n                }})\n                <v-tooltip-icon\n                  [tooltip]=\"'accessControl.editor.tooltips.actions' | translate\"\n                ></v-tooltip-icon>\n              </label>\n\n              @if (actionItems.length) {\n                <div\n                  class=\"permission-form__actions-grid\"\n                  [attr.data-test-id]=\"testIds.actionsSelect\"\n                  [class.permission-form__actions-grid--invalid]=\"\n                    actionsControl.invalid && actionsControl.touched\n                  \"\n                >\n                  @for (item of actionItems; track item.id) {\n                    <div class=\"permission-form__action\">\n                      <cds-checkbox\n                        [checked]=\"selectedActions.includes(item.id)\"\n                        [disabled]=\"disabled\"\n                        (checkedChange)=\"onActionToggle(item.id, $event)\"\n                      >\n                        {{ item.id | actionLabel }}\n                      </cds-checkbox>\n\n                      @if (item.id | actionDescription; as description) {\n                        <v-tooltip-icon [tooltip]=\"description\"></v-tooltip-icon>\n                      }\n                    </div>\n                  }\n                </div>\n              } @else {\n                <p class=\"permission-form__hint\">\n                  {{ 'accessControl.editor.noActions' | translate }}\n                </p>\n              }\n            </div>\n          </div>\n        </div>\n      </cds-accordion-item>\n\n      <cds-accordion-item\n        [class.permission-form__section-configured]=\"conditionsArray.length > 0\"\n        [expanded]=\"$openSection() === 'conditions'\"\n        [title]=\"'accessControl.editor.conditions' | translate\"\n        (selected)=\"onSectionToggle('conditions', $event)\"\n      >\n        <div class=\"permission-form__section\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              infoNote;\n              context: {$implicit: 'accessControl.editor.conditionsHint' | translate}\n            \"\n          ></ng-container>\n\n          <valtimo-condition-tree\n            [conditions]=\"conditionsArray\"\n            [disabled]=\"disabled\"\n            [resourceType]=\"resourceTypeValue\"\n          ></valtimo-condition-tree>\n        </div>\n      </cds-accordion-item>\n\n      <cds-accordion-item\n        [class.permission-form__section-configured]=\"hasContext\"\n        [expanded]=\"$openSection() === 'context'\"\n        [title]=\"'accessControl.editor.contextSection' | translate\"\n        (selected)=\"onSectionToggle('context', $event)\"\n      >\n        <div class=\"permission-form__section\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              infoNote;\n              context: {$implicit: 'accessControl.editor.contextHint' | translate}\n            \"\n          ></ng-container>\n\n          <cds-content-switcher\n            class=\"permission-form__context-switcher\"\n            [attr.data-test-id]=\"testIds.contextToggle\"\n            [class.permission-form__context-switcher--disabled]=\"disabled\"\n            size=\"sm\"\n          >\n            <button\n              cdsContentOption\n              type=\"button\"\n              [active]=\"contextMode === 'none'\"\n              (selected)=\"onContextModeChange('none')\"\n            >\n              {{ 'accessControl.editor.contextModeNone' | translate }}\n            </button>\n            <button\n              cdsContentOption\n              type=\"button\"\n              [active]=\"contextMode === 'noContext'\"\n              (selected)=\"onContextModeChange('noContext')\"\n            >\n              {{ 'accessControl.editor.contextModeNoContext' | translate }}\n            </button>\n            @if (hasContextTargets) {\n              <button\n                cdsContentOption\n                type=\"button\"\n                [active]=\"contextMode === 'specific'\"\n                (selected)=\"onContextModeChange('specific')\"\n              >\n                {{ 'accessControl.editor.contextModeSpecific' | translate }}\n              </button>\n            }\n          </cds-content-switcher>\n\n          @switch (contextMode) {\n            @case ('noContext') {\n              <cds-inline-notification\n                class=\"permission-form__notification\"\n                [notificationObj]=\"{\n                  type: 'info',\n                  message: 'accessControl.editor.noContextHint' | translate,\n                  lowContrast: true,\n                  showClose: false,\n                }\"\n              ></cds-inline-notification>\n            }\n            @case ('specific') {\n              <v-select\n                class=\"permission-form__resource-type\"\n                formControlName=\"contextResourceType\"\n                [cdsLayer]=\"1\"\n                [clearable]=\"false\"\n                [dataTestId]=\"testIds.contextResourceTypeSelect\"\n                [defaultSelectionId]=\"contextResourceTypeValue || ''\"\n                [dropUp]=\"false\"\n                [items]=\"contextResourceTypeItems\"\n                [placeholder]=\"'accessControl.editor.contextResourceTypePlaceholder' | translate\"\n                [tooltip]=\"'accessControl.editor.tooltips.contextResourceType' | translate\"\n                titleTranslationKey=\"accessControl.editor.contextResourceType\"\n              ></v-select>\n\n              <valtimo-condition-tree\n                [conditions]=\"contextConditionsArray\"\n                [disabled]=\"disabled\"\n                [resourceType]=\"contextResourceTypeValue\"\n              ></valtimo-condition-tree>\n            }\n          }\n        </div>\n      </cds-accordion-item>\n    </cds-accordion>\n\n    <div class=\"permission-form__footer\">\n      <button\n        cdsButton=\"danger--ghost\"\n        size=\"sm\"\n        [attr.data-test-id]=\"testIds.removePermissionButton\"\n        [disabled]=\"disabled\"\n        (click)=\"openRemoveModal()\"\n      >\n        {{ 'accessControl.editor.removePermission' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"accessControl.editor.removePermission\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"accessControl.editor.removePermissionModal.content\"\n    titleTranslationKey=\"accessControl.editor.removePermissionModal.title\"\n    [showModalSubject$]=\"showRemoveModal$\"\n    (confirmEvent)=\"onRemove()\"\n  ></valtimo-confirmation-modal>\n\n  <!-- Lightweight inline hint: a blue information icon with italic secondary text. The message is\n       passed in via context so the icon and styling are defined in a single place. -->\n  <ng-template #infoNote let-message>\n    <p class=\"permission-form__info-note\">\n      <svg class=\"permission-form__info-icon\" cdsIcon=\"information\" size=\"16\"></svg>\n\n      <span>{{ message }}</span>\n    </p>\n  </ng-template>\n</div>\n", styles: [".permission-form{display:flex;flex-direction:column}.permission-form v-select{display:block;width:100%}.permission-form__loading{align-items:center;display:flex;justify-content:center;padding:1.5rem 0}.permission-form__body{display:flex;flex-direction:column;gap:1rem}.permission-form__body--hidden{display:none}.permission-form__accordion{width:100%}.permission-form__header{border-bottom:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex-direction:column;gap:1rem;padding-bottom:1.5rem}.permission-form__preview{display:flex;flex-direction:column;gap:.5rem}.permission-form__preview-heading{display:flex;flex-direction:column;gap:.125rem}.permission-form__preview-title{font-size:1.25rem;font-weight:400;line-height:1.4;margin:0;overflow-wrap:anywhere}.permission-form__preview-subtitle{color:var(--cds-text-secondary, #525252);font-size:.75rem;font-weight:400;line-height:1.34;overflow-wrap:anywhere}.permission-form__preview-row{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.permission-form__preview-row ::ng-deep .cds--tag{margin:0;max-width:none}.permission-form__preview-label{color:var(--cds-text-secondary, #525252);font-size:.875rem;font-weight:600;padding-right:.5rem}.permission-form__row{display:flex;flex-direction:column;gap:1rem}.permission-form__context-switcher{display:block;width:100%}.permission-form__context-switcher--disabled{opacity:.5;pointer-events:none}.permission-form__actions-field{display:flex;flex-direction:column;gap:.5rem}.permission-form__actions-grid{display:grid;gap:.25rem 1rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}.permission-form__actions-grid--invalid{border-left:2px solid var(--cds-support-error, #da1e28);margin-left:-.75rem;padding-left:calc(.75rem - 2px)}.permission-form__action{align-items:center;display:flex;gap:.25rem}.permission-form .label-with-tooltip{align-items:center;display:inline-flex;gap:.25rem}.permission-form__section{display:flex;flex-direction:column;gap:.75rem}.permission-form__hint{color:var(--cds-text-secondary, #525252);font-size:.875rem;margin:0}.permission-form__info-note{align-items:flex-start;color:var(--cds-text-secondary, #525252);display:flex;font-size:.875rem;gap:.375rem;line-height:1.34;margin-bottom:8px}.permission-form__info-icon{color:var(--cds-support-info, #0043ce);flex-shrink:0;margin-top:.0625rem}.permission-form__footer{display:flex;justify-content:flex-end;padding-top:.25rem}:host ::ng-deep .permission-form__accordion .cds--accordion__item:first-of-type{border-top:0}:host ::ng-deep .permission-form__accordion .cds--accordion__content{padding:1rem 1rem 1.5rem}:host ::ng-deep .permission-form__accordion .permission-form__section-configured .cds--accordion__title:after{background:var(--cds-support-info, #0043ce);border-radius:50%;content:\"\";display:inline-block;height:.5rem;margin-left:.5rem;vertical-align:middle;width:.5rem}:host ::ng-deep .permission-form__notification.cds--inline-notification{inline-size:100%;margin-block-end:0;max-inline-size:100%;min-inline-size:0}\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: AccessControlFormEditorService }, { type: i2$1.IconService }, { type: i0.ChangeDetectorRef }], propDecorators: { group: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], roleKey: [{
+                type: Input
+            }], removeEvent: [{
+                type: Output
+            }] } });
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -748,6 +1764,250 @@ function humanizeFieldPath(field) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class AccessControlFormEditorTabComponent {
+    constructor(formEditorService, metadataService, iconService, changeDetectorRef) {
+        this.formEditorService = formEditorService;
+        this.metadataService = metadataService;
+        this.iconService = iconService;
+        this.changeDetectorRef = changeDetectorRef;
+        this.model = null;
+        this.disabled = false;
+        // The role being edited on this page; surfaced in the permission-form's editor note.
+        this.roleKey = null;
+        this.validEvent = new EventEmitter();
+        this.valueChangeEvent = new EventEmitter();
+        this.permissionsArray = null;
+        this.ready = false;
+        // Index of the permission shown in the detail panel. Null when there are no permissions.
+        this.$selectedIndex = signal(null);
+        this.testIds = ACCESS_CONTROL_EDITOR_TEST_IDS;
+        // Armed by the parent right before a save (see prepareSelectionReopen): a one-shot instruction to
+        // re-open a specific permission on the next rebuild. Null otherwise, so ordinary (re)builds — the
+        // initial load and tab switches — simply select the first permission.
+        this._pendingReselect = null;
+        this.iconService.registerAll([Add16]);
+    }
+    ngOnChanges(changes) {
+        if (changes['model']) {
+            this.rebuild();
+        }
+        else if (changes['disabled']) {
+            this.applyDisabled();
+        }
+    }
+    ngOnDestroy() {
+        this._valueChangesSubscription?.unsubscribe();
+    }
+    // ----- Sidebar item display -----
+    // The sidebar shows the resource's short (simple) name, e.g. "CaseTab" for
+    // "com.ritense.case.domain.CaseTab". The full technical name is still what is edited and stored.
+    shortName(control) {
+        const resourceType = control.get('resourceType').value;
+        return shortTypeName(resourceType);
+    }
+    actionsOf(control) {
+        return control.get('actions').value ?? [];
+    }
+    // Whether the permission has any conditions / a scoped context. Surfaced as status tags in the
+    // sidebar so a rule that carries extra configuration is recognisable at a glance (e.g. two
+    // entries for the same resource differ by their conditions).
+    hasConditions(control) {
+        const conditions = control.get('conditions');
+        return (conditions?.length ?? 0) > 0;
+    }
+    hasContext(control) {
+        return !!control.get('hasContext').value;
+    }
+    // The sidebar always lists permissions alphabetically by their (short) resource name, with
+    // not-yet-named new permissions kept at the bottom. The original array index is preserved so
+    // selection and serialization stay tied to the underlying form-array order.
+    orderedPermissions() {
+        if (!this.permissionsArray)
+            return [];
+        return this.permissionsArray.controls
+            .map((control, index) => ({ control, index }))
+            .sort((a, b) => {
+            const nameA = this.shortName(a.control);
+            const nameB = this.shortName(b.control);
+            if (!nameA)
+                return nameB ? 1 : 0;
+            if (!nameB)
+                return -1;
+            return nameA.localeCompare(nameB);
+        });
+    }
+    // ----- Selection -----
+    selectPermission(index) {
+        this.$selectedIndex.set(index);
+    }
+    // Returns the selected permission as a single-element array so the template can render it with a
+    // keyed @for: tracking by the FormGroup reference recreates the detail form (and re-runs its
+    // combobox prefill) whenever the selection changes.
+    selectedControls() {
+        const index = this.$selectedIndex();
+        if (index === null || !this.permissionsArray || index >= this.permissionsArray.length) {
+            return [];
+        }
+        return [this.permissionsArray.at(index)];
+    }
+    addPermission() {
+        if (!this.permissionsArray)
+            return;
+        const group = this.formEditorService.createPermissionGroup();
+        this.permissionsArray.push(group);
+        this.$selectedIndex.set(this.permissionsArray.length - 1);
+        this.changeDetectorRef.markForCheck();
+        this.scrollNewPermissionIntoView();
+    }
+    // The new permission is appended at the bottom of the sidebar list; once it has rendered, scroll
+    // the list so the freshly-added (and now selected) item is brought into view.
+    scrollNewPermissionIntoView() {
+        setTimeout(() => {
+            const list = this._permissionList?.nativeElement;
+            if (list)
+                list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' });
+        });
+    }
+    // After a save reloads the model and the previously-open rule is reselected, scroll that rule
+    // into view in the (alphabetically sorted) sidebar so it is visible without manual scrolling.
+    scrollSelectedIntoView() {
+        setTimeout(() => {
+            const selected = this._permissionList?.nativeElement.querySelector('.form-editor__item--selected');
+            selected?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        });
+    }
+    removePermission(index) {
+        if (!this.permissionsArray)
+            return;
+        // After removal, select the permission shown directly above the deleted one in the
+        // (alphabetical) sidebar; if it was the first, fall back to the new first. The neighbour is
+        // captured by reference before removal so we can find its new array index afterwards.
+        const ordered = this.orderedPermissions();
+        const position = ordered.findIndex(item => item.index === index);
+        const neighbour = position > 0 ? ordered[position - 1].control : (ordered[position + 1]?.control ?? null);
+        this.permissionsArray.removeAt(index);
+        const neighbourIndex = neighbour ? this.permissionsArray.controls.indexOf(neighbour) : -1;
+        // No neighbour left means the list is now empty → clear the selection so the empty state shows.
+        this.$selectedIndex.set(neighbourIndex === -1 ? null : neighbourIndex);
+        this.changeDetectorRef.markForCheck();
+    }
+    rebuild() {
+        this.metadataService.registry$.pipe(take(1)).subscribe(registry => {
+            this.formEditorService.setRegistry(registry);
+            this.buildForm();
+        });
+    }
+    buildForm() {
+        // Every (re)build selects the first permission, EXCEPT right after a save: the parent arms a
+        // one-shot reselect (prepareSelectionReopen) so the rule that was open at save time is re-opened
+        // once the saved model reloads. This is deliberately not preserved across ordinary reloads such
+        // as switching tabs — those always start at the first permission.
+        const reselect = this._pendingReselect;
+        this._pendingReselect = null;
+        this.permissionsArray = this.formEditorService.buildPermissionsArray(this.parsePermissions());
+        this.$selectedIndex.set(this.resolveSelectedIndex(reselect));
+        this.applyDisabled();
+        this._valueChangesSubscription?.unsubscribe();
+        this._valueChangesSubscription = this.permissionsArray.valueChanges.subscribe(() => this.emitState());
+        this.ready = true;
+        this.emitState();
+        this.changeDetectorRef.markForCheck();
+        // After a post-save reselect, bring the re-opened rule into view in the sidebar.
+        if (reselect)
+            this.scrollSelectedIntoView();
+    }
+    // Called by the parent immediately before a save: captures the open permission so that, once the
+    // saved model reloads and the form rebuilds, the same rule is re-opened. One-shot — consumed by
+    // the next buildForm.
+    prepareSelectionReopen() {
+        this._pendingReselect = this.selectedPermissionKeys();
+    }
+    // Identity of the currently-selected permission. Null when nothing is selected.
+    selectedPermissionKeys() {
+        const index = this.$selectedIndex();
+        if (index === null || !this.permissionsArray || index >= this.permissionsArray.length) {
+            return null;
+        }
+        return this.permissionKeys(this.permissionsArray.at(index));
+    }
+    // Finds the rebuilt permission matching the previously-open one. Prefers an exact (full) match;
+    // falls back to a looser match on resource type + actions + context (so a permission whose
+    // conditions the backend normalized on save is still re-opened), then to the first permission.
+    resolveSelectedIndex(previous) {
+        if (!this.permissionsArray || this.permissionsArray.length === 0)
+            return null;
+        // Default to the permission shown at the top of the (alphabetically sorted) sidebar, not the
+        // raw form-array index 0 — the array order follows the stored JSON, which need not be
+        // alphabetical.
+        const firstListedIndex = this.orderedPermissions()[0]?.index ?? 0;
+        if (!previous)
+            return firstListedIndex;
+        const keys = this.permissionsArray.controls.map(control => this.permissionKeys(control));
+        const fullMatch = keys.findIndex(key => key.full === previous.full);
+        if (fullMatch !== -1)
+            return fullMatch;
+        const partialMatch = keys.findIndex(key => key.partial === previous.partial);
+        return partialMatch !== -1 ? partialMatch : firstListedIndex;
+    }
+    // Two identity keys for a permission: the full serialized permission (exact match) and a partial
+    // key of just resource type + sorted actions + context resource (order-independent, condition-
+    // agnostic).
+    permissionKeys(group) {
+        const serialized = this.formEditorService.serializePermission(group);
+        const partial = JSON.stringify([
+            serialized.resourceType,
+            [...(serialized.actions ?? [])].sort(),
+            serialized.contextResourceType ?? null,
+        ]);
+        return { full: JSON.stringify(serialized), partial };
+    }
+    applyDisabled() {
+        if (!this.permissionsArray)
+            return;
+        if (this.disabled && this.permissionsArray.enabled) {
+            this.permissionsArray.disable({ emitEvent: false });
+        }
+        else if (!this.disabled && this.permissionsArray.disabled) {
+            this.permissionsArray.enable({ emitEvent: false });
+        }
+    }
+    emitState() {
+        if (!this.permissionsArray)
+            return;
+        this.valueChangeEvent.emit(JSON.stringify(this.formEditorService.serialize(this.permissionsArray)));
+        this.validEvent.emit(this.permissionsArray.valid);
+    }
+    parsePermissions() {
+        if (!this.model?.value)
+            return [];
+        try {
+            const parsed = JSON.parse(this.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: AccessControlFormEditorTabComponent, deps: [{ token: AccessControlFormEditorService }, { token: PermissionSchemaMetadataService }, { token: i2$1.IconService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AccessControlFormEditorTabComponent, isStandalone: false, selector: "valtimo-access-control-form-editor-tab", inputs: { model: "model", disabled: "disabled", roleKey: "roleKey" }, outputs: { validEvent: "validEvent", valueChangeEvent: "valueChangeEvent" }, providers: [AccessControlFormEditorService], viewQueries: [{ propertyName: "_permissionList", first: true, predicate: ["permissionList"], descendants: true }], 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<!-- fitPage sizes this container to the viewport so the sidebar and panel each scroll on their own. -->\n<div *ngIf=\"ready && permissionsArray as permissions\" class=\"form-editor\" fitPage>\n  <aside class=\"form-editor__sidebar\">\n    <div class=\"form-editor__sidebar-header\">\n      <span class=\"form-editor__sidebar-title\">{{\n        'accessControl.editor.permissions' | translate\n      }}</span>\n\n      <button\n        cdsButton=\"primary\"\n        size=\"sm\"\n        [attr.data-test-id]=\"testIds.addPermissionButton\"\n        [disabled]=\"!!disabled\"\n        (click)=\"addPermission()\"\n      >\n        {{ 'accessControl.editor.newPermission' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <ul class=\"form-editor__list\" #permissionList>\n      @for (item of orderedPermissions(); track item.control) {\n        <li class=\"form-editor__list-item\">\n          <button\n            class=\"form-editor__item\"\n            type=\"button\"\n            [attr.data-test-id]=\"testIds.permissionListItem\"\n            [class.form-editor__item--selected]=\"$selectedIndex() === item.index\"\n            (click)=\"selectPermission(item.index)\"\n          >\n            <span class=\"form-editor__item-name\" [title]=\"shortName(item.control)\">\n              @if (shortName(item.control)) {\n                {{ shortName(item.control) }}\n              } @else {\n                {{ 'accessControl.editor.newPermission' | translate }}\n              }\n            </span>\n\n            @if (hasConditions(item.control) || hasContext(item.control)) {\n              <span class=\"form-editor__item-status\">\n                <span class=\"form-editor__item-label\">{{\n                  'accessControl.editor.preview.includes' | translate\n                }}</span>\n\n                @if (hasConditions(item.control)) {\n                  <cds-tag size=\"sm\" type=\"high-contrast\">{{\n                    'accessControl.editor.hasConditions' | translate\n                  }}</cds-tag>\n                }\n                @if (hasContext(item.control)) {\n                  <cds-tag size=\"sm\" type=\"high-contrast\">{{\n                    'accessControl.editor.hasContext' | translate\n                  }}</cds-tag>\n                }\n              </span>\n            }\n\n            @if (actionsOf(item.control).length) {\n              <span class=\"form-editor__item-tags\">\n                <span class=\"form-editor__item-label\">{{\n                  'accessControl.editor.preview.actions' | translate\n                }}</span>\n\n                @for (action of actionsOf(item.control); track action) {\n                  <cds-tag size=\"sm\" [type]=\"action | actionTagType\">{{\n                    action | actionLabel\n                  }}</cds-tag>\n                }\n              </span>\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  </aside>\n\n  <section class=\"form-editor__panel\">\n    @for (group of selectedControls(); track group) {\n      <valtimo-permission-form\n        [disabled]=\"!!disabled\"\n        [group]=\"$any(group)\"\n        [index]=\"$selectedIndex() ?? 0\"\n        [roleKey]=\"roleKey\"\n        (removeEvent)=\"removePermission($selectedIndex() ?? 0)\"\n      ></valtimo-permission-form>\n    } @empty {\n      <div class=\"form-editor__empty\">\n        <h4 class=\"form-editor__empty-title\">\n          {{ 'accessControl.editor.empty.title' | translate }}\n        </h4>\n        <p class=\"form-editor__empty-message\">\n          {{ 'accessControl.editor.empty.message' | translate }}\n        </p>\n\n        <button cdsButton=\"primary\" size=\"sm\" [disabled]=\"!!disabled\" (click)=\"addPermission()\">\n          {{ 'accessControl.editor.addPermission' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n        </button>\n      </div>\n    }\n  </section>\n</div>\n", styles: [".form-editor{display:flex;border:1px solid var(--cds-border-subtle, #e0e0e0);overflow:hidden}.form-editor__sidebar{background:var(--cds-layer-01, #f4f4f4);border-right:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex:0 0 22rem;flex-direction:column;min-height:0}.form-editor__sidebar-header{align-items:center;border-bottom:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex:0 0 auto;justify-content:space-between;padding:12px}.form-editor__sidebar-title{color:var(--cds-text-secondary, #525252);font-size:14px;line-height:24px;font-weight:600}.form-editor__list{flex:1 1 auto;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:0}.form-editor__list-item{margin:0}.form-editor__item{background:transparent;border:0;border-left:3px solid transparent;cursor:pointer;display:flex;flex-direction:column;gap:.375rem;padding:.75rem 1rem;text-align:left;width:100%}.form-editor__item:hover{background:var(--cds-layer-hover-01, #e8e8e8)}.form-editor__item:focus-visible{outline:2px solid var(--cds-focus, #0f62fe);outline-offset:-2px}.form-editor__item--selected{background:var(--cds-layer-selected-01, #e0e0e0);border-left-color:var(--cds-border-interactive, #0f62fe)}.form-editor__item--selected:hover{background:var(--cds-layer-selected-hover-01, #d1d1d1)}.form-editor__item-name{color:var(--cds-text-primary, #161616);font-size:.875rem;font-weight:600;line-height:1.29;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-editor__item-status{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.form-editor__item-status ::ng-deep .cds--tag{margin:0;max-width:none;box-shadow:0 0 0 1px var(--cds-layer-01)}.form-editor__item-tags{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.form-editor__item-tags ::ng-deep .cds--tag{margin:0;max-width:none;box-shadow:0 0 0 1px var(--cds-layer-01)}.form-editor__item-label{color:var(--cds-text-secondary, #525252);font-size:.75rem;font-weight:600;padding-right:.25rem}.form-editor__panel{flex:1 1 auto;min-width:0;overflow-y:auto;padding:1rem 1.5rem 1.5rem}.form-editor__empty{align-items:center;border:1px dashed var(--cds-border-strong, #8d8d8d);display:flex;flex-direction:column;gap:.5rem;margin:2rem auto;max-width:30rem;padding:2rem;text-align:center}.form-editor__empty-title{margin:0}.form-editor__empty-message{color:var(--cds-text-secondary, #525252);margin:0 0 .5rem}:host ::ng-deep .cds--checkbox-label-text{color:var(--cds-text-primary)}\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: "directive", type: i3.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$1.FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow", "bottomMargin"] }, { kind: "component", type: i2$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: PermissionFormComponent, selector: "valtimo-permission-form", inputs: ["group", "index", "disabled", "roleKey"], outputs: ["removeEvent"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }, { kind: "pipe", type: ActionTagTypePipe, name: "actionTagType" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlFormEditorTabComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'valtimo-access-control-form-editor-tab', providers: [AccessControlFormEditorService], 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<!-- fitPage sizes this container to the viewport so the sidebar and panel each scroll on their own. -->\n<div *ngIf=\"ready && permissionsArray as permissions\" class=\"form-editor\" fitPage>\n  <aside class=\"form-editor__sidebar\">\n    <div class=\"form-editor__sidebar-header\">\n      <span class=\"form-editor__sidebar-title\">{{\n        'accessControl.editor.permissions' | translate\n      }}</span>\n\n      <button\n        cdsButton=\"primary\"\n        size=\"sm\"\n        [attr.data-test-id]=\"testIds.addPermissionButton\"\n        [disabled]=\"!!disabled\"\n        (click)=\"addPermission()\"\n      >\n        {{ 'accessControl.editor.newPermission' | translate }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <ul class=\"form-editor__list\" #permissionList>\n      @for (item of orderedPermissions(); track item.control) {\n        <li class=\"form-editor__list-item\">\n          <button\n            class=\"form-editor__item\"\n            type=\"button\"\n            [attr.data-test-id]=\"testIds.permissionListItem\"\n            [class.form-editor__item--selected]=\"$selectedIndex() === item.index\"\n            (click)=\"selectPermission(item.index)\"\n          >\n            <span class=\"form-editor__item-name\" [title]=\"shortName(item.control)\">\n              @if (shortName(item.control)) {\n                {{ shortName(item.control) }}\n              } @else {\n                {{ 'accessControl.editor.newPermission' | translate }}\n              }\n            </span>\n\n            @if (hasConditions(item.control) || hasContext(item.control)) {\n              <span class=\"form-editor__item-status\">\n                <span class=\"form-editor__item-label\">{{\n                  'accessControl.editor.preview.includes' | translate\n                }}</span>\n\n                @if (hasConditions(item.control)) {\n                  <cds-tag size=\"sm\" type=\"high-contrast\">{{\n                    'accessControl.editor.hasConditions' | translate\n                  }}</cds-tag>\n                }\n                @if (hasContext(item.control)) {\n                  <cds-tag size=\"sm\" type=\"high-contrast\">{{\n                    'accessControl.editor.hasContext' | translate\n                  }}</cds-tag>\n                }\n              </span>\n            }\n\n            @if (actionsOf(item.control).length) {\n              <span class=\"form-editor__item-tags\">\n                <span class=\"form-editor__item-label\">{{\n                  'accessControl.editor.preview.actions' | translate\n                }}</span>\n\n                @for (action of actionsOf(item.control); track action) {\n                  <cds-tag size=\"sm\" [type]=\"action | actionTagType\">{{\n                    action | actionLabel\n                  }}</cds-tag>\n                }\n              </span>\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  </aside>\n\n  <section class=\"form-editor__panel\">\n    @for (group of selectedControls(); track group) {\n      <valtimo-permission-form\n        [disabled]=\"!!disabled\"\n        [group]=\"$any(group)\"\n        [index]=\"$selectedIndex() ?? 0\"\n        [roleKey]=\"roleKey\"\n        (removeEvent)=\"removePermission($selectedIndex() ?? 0)\"\n      ></valtimo-permission-form>\n    } @empty {\n      <div class=\"form-editor__empty\">\n        <h4 class=\"form-editor__empty-title\">\n          {{ 'accessControl.editor.empty.title' | translate }}\n        </h4>\n        <p class=\"form-editor__empty-message\">\n          {{ 'accessControl.editor.empty.message' | translate }}\n        </p>\n\n        <button cdsButton=\"primary\" size=\"sm\" [disabled]=\"!!disabled\" (click)=\"addPermission()\">\n          {{ 'accessControl.editor.addPermission' | translate }}\n\n          <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n        </button>\n      </div>\n    }\n  </section>\n</div>\n", styles: [".form-editor{display:flex;border:1px solid var(--cds-border-subtle, #e0e0e0);overflow:hidden}.form-editor__sidebar{background:var(--cds-layer-01, #f4f4f4);border-right:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex:0 0 22rem;flex-direction:column;min-height:0}.form-editor__sidebar-header{align-items:center;border-bottom:1px solid var(--cds-border-subtle, #e0e0e0);display:flex;flex:0 0 auto;justify-content:space-between;padding:12px}.form-editor__sidebar-title{color:var(--cds-text-secondary, #525252);font-size:14px;line-height:24px;font-weight:600}.form-editor__list{flex:1 1 auto;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:0}.form-editor__list-item{margin:0}.form-editor__item{background:transparent;border:0;border-left:3px solid transparent;cursor:pointer;display:flex;flex-direction:column;gap:.375rem;padding:.75rem 1rem;text-align:left;width:100%}.form-editor__item:hover{background:var(--cds-layer-hover-01, #e8e8e8)}.form-editor__item:focus-visible{outline:2px solid var(--cds-focus, #0f62fe);outline-offset:-2px}.form-editor__item--selected{background:var(--cds-layer-selected-01, #e0e0e0);border-left-color:var(--cds-border-interactive, #0f62fe)}.form-editor__item--selected:hover{background:var(--cds-layer-selected-hover-01, #d1d1d1)}.form-editor__item-name{color:var(--cds-text-primary, #161616);font-size:.875rem;font-weight:600;line-height:1.29;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-editor__item-status{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.form-editor__item-status ::ng-deep .cds--tag{margin:0;max-width:none;box-shadow:0 0 0 1px var(--cds-layer-01)}.form-editor__item-tags{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.form-editor__item-tags ::ng-deep .cds--tag{margin:0;max-width:none;box-shadow:0 0 0 1px var(--cds-layer-01)}.form-editor__item-label{color:var(--cds-text-secondary, #525252);font-size:.75rem;font-weight:600;padding-right:.25rem}.form-editor__panel{flex:1 1 auto;min-width:0;overflow-y:auto;padding:1rem 1.5rem 1.5rem}.form-editor__empty{align-items:center;border:1px dashed var(--cds-border-strong, #8d8d8d);display:flex;flex-direction:column;gap:.5rem;margin:2rem auto;max-width:30rem;padding:2rem;text-align:center}.form-editor__empty-title{margin:0}.form-editor__empty-message{color:var(--cds-text-secondary, #525252);margin:0 0 .5rem}:host ::ng-deep .cds--checkbox-label-text{color:var(--cds-text-primary)}\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: AccessControlFormEditorService }, { type: PermissionSchemaMetadataService }, { type: i2$1.IconService }, { type: i0.ChangeDetectorRef }], propDecorators: { _permissionList: [{
+                type: ViewChild,
+                args: ['permissionList']
+            }], model: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], roleKey: [{
+                type: Input
+            }], validEvent: [{
+                type: Output
+            }], valueChangeEvent: [{
+                type: Output
+            }] } });
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -890,8 +2150,8 @@ class AccessControlJsonEditorTabComponent {
             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"], 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlJsonEditorTabComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i2$1.IconService }, { token: PermissionSchemaMetadataService }, { token: i1$3.Router }, { token: i1$2.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}.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/*!\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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.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$1.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage"], 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,
@@ -903,8 +2163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         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: [{
+                    ], 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}.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/*!\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: i1$3.ActivatedRoute }, { type: i2$1.IconService }, { type: PermissionSchemaMetadataService }, { type: i1$3.Router }, { type: i1$2.TranslateService }], propDecorators: { disabled: [{
                 type: Input
             }], model: [{
                 type: Input
@@ -938,7 +2198,7 @@ class ResourceTypeLabelPipe {
             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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ResourceTypeLabelPipe, deps: [{ token: i1$2.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: [{
@@ -947,7 +2207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     standalone: true,
                     name: 'resourceTypeLabel',
                 }]
-        }], ctorParameters: () => [{ type: i4$1.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -1066,13 +2326,13 @@ class AccessControlOverviewTabComponent {
             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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlOverviewTabComponent, deps: [{ token: PermissionSchemaMetadataService }, { token: i1$2.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.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: [{
+        }], ctorParameters: () => [{ type: PermissionSchemaMetadataService }, { type: i1$2.TranslateService }], propDecorators: { roleKey: [{
                 type: Input
             }], permissions: [{
                 type: Input
@@ -1093,8 +2353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class AccessControlEditorComponent {
+class AccessControlEditorComponent extends PendingChangesComponent {
     constructor(accessControlService, route, pageTitleService, router, globalNotificationService, translateService, accessControlExportService, pageHeaderService) {
+        super();
         this.accessControlService = accessControlService;
         this.route = route;
         this.pageTitleService = pageTitleService;
@@ -1113,16 +2374,19 @@ class AccessControlEditorComponent {
         this.showEditModal$ = new BehaviorSubject(false);
         this.selectedRowKeys$ = new BehaviorSubject(null);
         this.compactMode$ = this.pageHeaderService.compactMode$;
-        this.$activeTab = signal(AccessControlEditorTab.SUMMARY);
+        this.$activeTab = signal(AccessControlEditorTab.EDITOR);
         this.AccessControlEditorTab = AccessControlEditorTab;
         this._updatedModelValue$ = new BehaviorSubject('');
+        // The form's serialized value captured on (re)load. Edits that differ from it mark the editor
+        // dirty so the leave-page guard can warn about unsaved changes.
+        this._pendingBaseline = null;
     }
     ngOnInit() {
         this.restoreActiveTabFromUrl();
-        this.getPermissions();
         this.openRoleKeySubscription();
     }
     ngOnDestroy() {
+        this.pendingChanges = false;
         this.pageTitleService.enableReset();
         this._roleKeySubscription?.unsubscribe();
     }
@@ -1130,9 +2394,50 @@ class AccessControlEditorComponent {
         this.saveDisabled$.next(valid === false);
     }
     onValueChange(value) {
+        // The first emission after a (re)load is the editor's baseline. Comparison is done on the
+        // normalized (whitespace-insensitive) JSON so the JSON editor's format-on-load reflow is not
+        // mistaken for an edit; only a genuine content change marks the editor dirty. Each tab keeps
+        // its own baseline (the editor reloads from the saved model per tab), so the JSON and visual
+        // editors track their unsaved state independently.
+        const normalized = this.normalizeJson(value);
+        if (this._pendingBaseline === null) {
+            this._pendingBaseline = normalized;
+            this.pendingChanges = false;
+        }
+        else {
+            this.pendingChanges = normalized !== this._pendingBaseline;
+        }
         this._updatedModelValue$.next(value);
     }
+    // Canonicalizes a JSON string by dropping insignificant whitespace, so reformatting (such as the
+    // JSON editor's format-on-load) does not register as a change. Invalid JSON is compared as-is.
+    normalizeJson(value) {
+        try {
+            return JSON.stringify(JSON.parse(value));
+        }
+        catch {
+            return value;
+        }
+    }
+    onCancelRedirect() {
+        this.syncTabHeaders();
+    }
+    // The Carbon tab header highlights the clicked tab immediately; if the leave-page prompt is
+    // cancelled, restore the highlight to the tab that is actually still active.
+    syncTabHeaders() {
+        const order = [
+            AccessControlEditorTab.EDITOR,
+            AccessControlEditorTab.SUMMARY,
+            AccessControlEditorTab.JSON_EDITOR,
+        ];
+        this._tabs?.forEach((tab, index) => {
+            tab.active = order[index] === this.$activeTab();
+        });
+    }
     updatePermissions() {
+        // Preserve the open rule across the reload that follows this save (a one-shot; only after an
+        // explicit save, never on an ordinary tab open).
+        this._formEditorTab?.prepareSelectionReopen();
         this.disableEditor();
         this.disableSave();
         this.disableMore();
@@ -1188,18 +2493,30 @@ class AccessControlEditorComponent {
             this.$activeTab.set(tab);
             return;
         }
-        const segments = tab === AccessControlEditorTab.JSON_EDITOR
-            ? ['/access-control', roleKey, 'json-editor']
-            : ['/access-control', roleKey];
-        this.router.navigate(segments);
+        this.router.navigate(this.segmentsForTab(tab, roleKey));
+    }
+    segmentsForTab(tab, roleKey) {
+        switch (tab) {
+            case AccessControlEditorTab.SUMMARY:
+                return ['/access-control', roleKey, 'summary'];
+            case AccessControlEditorTab.JSON_EDITOR:
+                return ['/access-control', roleKey, 'json-editor'];
+            default:
+                return ['/access-control', roleKey];
+        }
     }
     restoreActiveTabFromUrl() {
         const url = this.route.snapshot.url;
         const lastSegment = url[url.length - 1]?.path;
+        if (lastSegment === 'summary') {
+            this.$activeTab.set(AccessControlEditorTab.SUMMARY);
+            return;
+        }
         if (lastSegment === 'json-editor') {
             this.$activeTab.set(AccessControlEditorTab.JSON_EDITOR);
             return;
         }
+        // The base URL (no tab segment) opens the visual editor — the first and default tab.
         const params = this.route.snapshot.queryParamMap;
         if (params.get('filterResourceType') || params.get('filterAction')) {
             this.$activeTab.set(AccessControlEditorTab.JSON_EDITOR);
@@ -1225,21 +2542,11 @@ class AccessControlEditorComponent {
         }))
             .subscribe();
     }
-    getPermissions() {
-        this.route.params
-            .pipe(tap(params => {
-            this.pageTitleService.setCustomPageTitle(params?.id);
-            this.roleKey$.next(params?.id ?? null);
-            this.selectedRowKeys$.next([params?.id]);
-        }), switchMap(params => this.accessControlService.getRolePermissions(params.id)))
-            .subscribe(permissions => {
-            this.enableMore();
-            this.enableSave();
-            this.enableEditor();
-            this.setModel(permissions);
-        });
-    }
     setModel(permissions) {
+        // A freshly loaded or saved model is the new clean baseline; the next value emission recaptures
+        // it and any prior unsaved-changes flag is cleared.
+        this._pendingBaseline = null;
+        this.pendingChanges = false;
         const roleKey = this.roleKey$.value ?? 'unknown';
         this.model$.next({
             value: JSON.stringify(permissions),
@@ -1275,13 +2582,19 @@ 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: 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlEditorComponent, deps: [{ token: AccessControlService }, { token: i1$3.ActivatedRoute }, { token: i3$1.PageTitleService }, { token: i1$3.Router }, { token: i1$1.GlobalNotificationService }, { token: i1$2.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", viewQueries: [{ propertyName: "_formEditorTab", first: true, predicate: AccessControlFormEditorTabComponent, descendants: true }, { propertyName: "_tabs", predicate: Tab, descendants: true }], usesInheritance: 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<ng-container *ngIf=\"model$ | async as model; else loading\">\n  <!-- The headers only switch the active tab; the tab content is rendered below (gated by the\n       active-tab signal) instead of inside the Carbon tab panes. Carbon removes a pane's content\n       as soon as another header is clicked, which would destroy the editor's unsaved form before\n       the leave-page confirmation is resolved. -->\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [active]=\"$activeTab() === AccessControlEditorTab.EDITOR\"\n      [heading]=\"'accessControl.roles.tabs.editor' | translate\"\n      (selected)=\"setActiveTab(AccessControlEditorTab.EDITOR)\"\n    ></cds-tab>\n\n    <cds-tab\n      [active]=\"$activeTab() === AccessControlEditorTab.SUMMARY\"\n      [heading]=\"'accessControl.roles.tabs.summary' | translate\"\n      (selected)=\"setActiveTab(AccessControlEditorTab.SUMMARY)\"\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    ></cds-tab>\n  </cds-tabs>\n\n  <!-- White surface for the tab content. The Carbon tab pane used to provide this; since the\n       content is now rendered outside the panes, the wrapper supplies the layer background. -->\n  <div class=\"access-control-editor__content\">\n    @if ($activeTab() === AccessControlEditorTab.EDITOR) {\n      <valtimo-access-control-form-editor-tab\n        [disabled]=\"editorDisabled$ | async\"\n        [model]=\"model\"\n        [roleKey]=\"roleKey$ | async\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-access-control-form-editor-tab>\n    }\n\n    @if ($activeTab() === AccessControlEditorTab.SUMMARY) {\n      <valtimo-access-control-overview-tab\n        [permissions]=\"permissions$ | async\"\n        [roleKey]=\"roleKey$ | async\"\n      ></valtimo-access-control-overview-tab>\n    }\n\n    @if ($activeTab() === AccessControlEditorTab.JSON_EDITOR) {\n      <valtimo-access-control-json-editor-tab\n        [disabled]=\"editorDisabled$ | async\"\n        [model]=\"model\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-access-control-json-editor-tab>\n    }\n  </div>\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:var(--cds-layer);outline:none!important;padding:0}.access-control-editor__content{background-color:var(--cds-layer)}\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: i3.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$1.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$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: 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: ["type", "open", "defaultKeyValue", "usedKeys"], outputs: ["closeEvent"] }, { kind: "component", type: AccessControlFormEditorTabComponent, selector: "valtimo-access-control-form-editor-tab", inputs: ["model", "disabled", "roleKey"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "component", type: DeleteRoleModalComponent, selector: "valtimo-delete-role-modal", inputs: ["deleteRowKeys", "showDeleteModal$"], outputs: ["deleteEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.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<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 }] });
+            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  <!-- The headers only switch the active tab; the tab content is rendered below (gated by the\n       active-tab signal) instead of inside the Carbon tab panes. Carbon removes a pane's content\n       as soon as another header is clicked, which would destroy the editor's unsaved form before\n       the leave-page confirmation is resolved. -->\n  <cds-tabs type=\"contained\">\n    <cds-tab\n      [active]=\"$activeTab() === AccessControlEditorTab.EDITOR\"\n      [heading]=\"'accessControl.roles.tabs.editor' | translate\"\n      (selected)=\"setActiveTab(AccessControlEditorTab.EDITOR)\"\n    ></cds-tab>\n\n    <cds-tab\n      [active]=\"$activeTab() === AccessControlEditorTab.SUMMARY\"\n      [heading]=\"'accessControl.roles.tabs.summary' | translate\"\n      (selected)=\"setActiveTab(AccessControlEditorTab.SUMMARY)\"\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    ></cds-tab>\n  </cds-tabs>\n\n  <!-- White surface for the tab content. The Carbon tab pane used to provide this; since the\n       content is now rendered outside the panes, the wrapper supplies the layer background. -->\n  <div class=\"access-control-editor__content\">\n    @if ($activeTab() === AccessControlEditorTab.EDITOR) {\n      <valtimo-access-control-form-editor-tab\n        [disabled]=\"editorDisabled$ | async\"\n        [model]=\"model\"\n        [roleKey]=\"roleKey$ | async\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-access-control-form-editor-tab>\n    }\n\n    @if ($activeTab() === AccessControlEditorTab.SUMMARY) {\n      <valtimo-access-control-overview-tab\n        [permissions]=\"permissions$ | async\"\n        [roleKey]=\"roleKey$ | async\"\n      ></valtimo-access-control-overview-tab>\n    }\n\n    @if ($activeTab() === AccessControlEditorTab.JSON_EDITOR) {\n      <valtimo-access-control-json-editor-tab\n        [disabled]=\"editorDisabled$ | async\"\n        [model]=\"model\"\n        (validEvent)=\"onValid($event)\"\n        (valueChangeEvent)=\"onValueChange($event)\"\n      ></valtimo-access-control-json-editor-tab>\n    }\n  </div>\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:var(--cds-layer);outline:none!important;padding:0}.access-control-editor__content{background-color:var(--cds-layer)}\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$3.ActivatedRoute }, { type: i3$1.PageTitleService }, { type: i1$3.Router }, { type: i1$1.GlobalNotificationService }, { type: i1$2.TranslateService }, { type: AccessControlExportService }, { type: i3$1.PageHeaderService }], propDecorators: { _tabs: [{
+                type: ViewChildren,
+                args: [Tab]
+            }], _formEditorTab: [{
+                type: ViewChild,
+                args: [AccessControlFormEditorTabComponent]
+            }] } });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -1309,6 +2622,18 @@ const routes = [
         path: 'access-control/:id',
         component: AccessControlEditorComponent,
         canActivate: [AuthGuardService],
+        canDeactivate: [pendingChangesGuard],
+        data: {
+            title: 'Role details',
+            roles: [ROLE_ADMIN],
+            customPageTitle: true,
+        },
+    },
+    {
+        path: 'access-control/:id/summary',
+        component: AccessControlEditorComponent,
+        canActivate: [AuthGuardService],
+        canDeactivate: [pendingChangesGuard],
         data: {
             title: 'Role details',
             roles: [ROLE_ADMIN],
@@ -1319,6 +2644,7 @@ const routes = [
         path: 'access-control/:id/json-editor',
         component: AccessControlEditorComponent,
         canActivate: [AuthGuardService],
+        canDeactivate: [pendingChangesGuard],
         data: {
             title: 'Role details',
             roles: [ROLE_ADMIN],
@@ -1328,7 +2654,7 @@ const routes = [
 ];
 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, i1$2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementRoutingModule, imports: [CommonModule, i1$3.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: [{
@@ -1359,8 +2685,11 @@ class AccessControlManagementModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementModule, declarations: [AccessControlOverviewComponent,
             RoleMetadataModalComponent,
             AccessControlEditorComponent,
+            AccessControlFormEditorTabComponent,
+            ConditionTreeComponent,
             DeleteRoleModalComponent,
-            ExportRoleModalComponent], imports: [CommonModule,
+            ExportRoleModalComponent,
+            PermissionFormComponent], imports: [CommonModule,
             AccessControlManagementRoutingModule,
             ButtonModule,
             FormsModule,
@@ -1371,6 +2700,7 @@ class AccessControlManagementModule {
             IconModule,
             ConfirmationModalModule,
             RenderInPageHeaderDirective,
+            FitPageDirective,
             LoadingModule,
             IconModule,
             OverflowMenuComponent,
@@ -1378,9 +2708,20 @@ class AccessControlManagementModule {
             OverflowMenuTriggerComponent,
             NotificationModule,
             CarbonListModule,
+            SelectModule,
+            TooltipIconModule,
             TabsModule,
+            ToggleModule,
+            ContentSwitcherModule,
+            AccordionModule,
+            CheckboxModule,
+            LayerModule,
+            TagModule,
             AccessControlJsonEditorTabComponent,
-            AccessControlOverviewTabComponent] }); }
+            AccessControlOverviewTabComponent,
+            ActionLabelPipe,
+            ActionDescriptionPipe,
+            ActionTagTypePipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AccessControlManagementModule, imports: [CommonModule,
             AccessControlManagementRoutingModule,
             ButtonModule,
@@ -1398,7 +2739,15 @@ class AccessControlManagementModule {
             OverflowMenuTriggerComponent,
             NotificationModule,
             CarbonListModule,
+            SelectModule,
+            TooltipIconModule,
             TabsModule,
+            ToggleModule,
+            ContentSwitcherModule,
+            AccordionModule,
+            CheckboxModule,
+            LayerModule,
+            TagModule,
             AccessControlJsonEditorTabComponent,
             AccessControlOverviewTabComponent] }); }
 }
@@ -1409,8 +2758,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         AccessControlOverviewComponent,
                         RoleMetadataModalComponent,
                         AccessControlEditorComponent,
+                        AccessControlFormEditorTabComponent,
+                        ConditionTreeComponent,
                         DeleteRoleModalComponent,
                         ExportRoleModalComponent,
+                        PermissionFormComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -1424,6 +2776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         IconModule,
                         ConfirmationModalModule,
                         RenderInPageHeaderDirective,
+                        FitPageDirective,
                         LoadingModule,
                         IconModule,
                         OverflowMenuComponent,
@@ -1431,9 +2784,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         OverflowMenuTriggerComponent,
                         NotificationModule,
                         CarbonListModule,
+                        SelectModule,
+                        TooltipIconModule,
                         TabsModule,
+                        ToggleModule,
+                        ContentSwitcherModule,
+                        AccordionModule,
+                        CheckboxModule,
+                        LayerModule,
+                        TagModule,
                         AccessControlJsonEditorTabComponent,
                         AccessControlOverviewTabComponent,
+                        ActionLabelPipe,
+                        ActionDescriptionPipe,
+                        ActionTagTypePipe,
                     ],
                 }]
         }] });
@@ -1461,5 +2825,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccessControlEditorTab, AccessControlManagementModule, AccessControlService, PermissionSchemaMetadataService };
+export { AccessControlEditorTab, AccessControlFormEditorService, AccessControlManagementModule, AccessControlService, PermissionSchemaMetadataService };
 //# sourceMappingURL=valtimo-access-control-management.mjs.map