@valtimo/case-management 13.45.1 → 13.47.0

package/fesm2022/valtimo-case-management.mjs

@@ -14,7 +14,7 @@ import { FormManagementComponent, FormManagementEditComponent } from '@valtimo/f
 import * as i2$1 from '@valtimo/shared';
 import { BaseApiService, InterceptorSkip, getCaseManagementRouteParams, InterceptorSkipHeader, CASE_MANAGEMENT_TAB_TOKEN, TagColor, getDisplayTypeParametersView, CASE_CONFIGURATION_EXTENSIONS_TOKEN, ROLE_ADMIN, ConfigModule } from '@valtimo/shared';
 import * as i2 from 'carbon-components-angular';
-import { NotificationModule, Tab, ButtonModule, IconModule, LayerModule, ModalModule, InputModule, TabsModule, ComboBoxModule, ProgressIndicatorModule, LoadingModule, TagModule, DropdownModule, CheckboxModule, LinkModule, DialogModule, FileUploaderModule, ProgressBarModule, ToggleModule, TooltipModule as TooltipModule$1, NumberModule } from 'carbon-components-angular';
+import { NotificationModule, Tab, ButtonModule, IconModule, LayerModule, ModalModule, InputModule, TabsModule, ComboBoxModule, ProgressIndicatorModule, LoadingModule, TagModule, ToggleModule, DropdownModule, CheckboxModule, LinkModule, DialogModule, FileUploaderModule, ProgressBarModule, TooltipModule as TooltipModule$1, NumberModule } from 'carbon-components-angular';
 import * as i2$2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { DecisionListComponent, DecisionModelerComponent } from '@valtimo/decision';
@@ -22,17 +22,19 @@ import { FormFlowOverviewComponent, FormFlowEditorComponent } from '@valtimo/for
 import { ProcessManagementComponent, ProcessManagementBuilderComponent } from '@valtimo/process-management';
 import { AuthGuardService } from '@valtimo/security';
 import { TaskManagementDetailComponent } from '@valtimo/task-management';
-import { BehaviorSubject, combineLatest, map, filter, switchMap, catchError, of, Subscription, distinctUntilChanged, Subject, startWith, tap, take as take$1, delay, shareReplay, finalize, EMPTY, debounceTime, forkJoin } from 'rxjs';
+import { BehaviorSubject, combineLatest, map, filter, switchMap, catchError, of, Subscription, distinctUntilChanged, Subject, startWith, tap, shareReplay, take as take$1, delay, forkJoin, finalize, EMPTY, debounceTime } from 'rxjs';
 import * as i1$1 from '@valtimo/layout';
-import { ManagementWidgetDetailsComponent, WidgetType, WidgetWizardStep, WIDGET_MANAGEMENT_SERVICE, WidgetManagementComponent } from '@valtimo/layout';
+import { ManagementWidgetDetailsComponent, WidgetType, WidgetWizardStep, WIDGET_MANAGEMENT_SERVICE, WidgetManagementComponent, EXTERNAL_PLUGIN_WIDGET_CONFIG_TOKEN } from '@valtimo/layout';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { isEqual } from 'lodash';
-import { Code16, Development16, TableBuilt16, WatsonHealthPageScroll16, ArrowDown16, ArrowUp16, Edit16, Information16, Return16, TrashCan16, Save16, Version16, Deploy16, WarningFilled16, ArrowRight16, FlowModeler20, BlockStorageAlt20, Search20, TrashCan20, Upload16 } from '@carbon/icons';
+import { Code16, Development16, Plug16, TableBuilt16, WatsonHealthPageScroll16, ArrowDown16, ArrowUp16, Edit16, Information16, Return16, TrashCan16, Save16, Version16, Deploy16, WarningFilled16, ArrowRight16, FlowModeler20, BlockStorageAlt20, Search20, TrashCan20, Upload16 } from '@carbon/icons';
 import { DefaultTabs, CASE_TAB_TOKEN, ApiTabType } from '@valtimo/case';
 import * as i1$2 from '@valtimo/document';
 import { InternalCaseStatusUtils, CaseTagsUtils, DocumentDefinitionCreateRequest } from '@valtimo/document';
 import { take, tap as tap$1, switchMap as switchMap$1, catchError as catchError$1, map as map$1, filter as filter$1, withLatestFrom } from 'rxjs/operators';
+import * as i3$1 from '@valtimo/plugin';
+import { getExternalPluginDisplayName } from '@valtimo/plugin';
 import * as i1$3 from '@valtimo/form';
 import * as i2$3 from 'ngx-logger';
 import { v4 } from 'uuid';
@@ -40,12 +42,11 @@ import * as semver from 'semver';
 import { valid, lt } from 'semver';
 import * as i7$1 from '@valtimo/sse';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i4 from '@valtimo/plugin';
 import moment from 'moment/moment';
-import * as i4$1 from '@valtimo/process-link';
+import * as i4 from '@valtimo/process-link';
 import { ensureDocPrefix, ProcessLinkModule, ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService } from '@valtimo/process-link';
 import moment$1 from 'moment';
-import * as i4$2 from '@valtimo/process';
+import * as i4$1 from '@valtimo/process';
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -690,11 +691,12 @@ class TabService {
     set configuredContentKeys(value) {
         this._configuredContentKeys$.next(value);
     }
-    constructor(caseTabConfig, caseManagementTabConfig, formService, translateService) {
+    constructor(caseTabConfig, caseManagementTabConfig, formService, translateService, externalPluginService) {
         this.caseTabConfig = caseTabConfig;
         this.caseManagementTabConfig = caseManagementTabConfig;
         this.formService = formService;
         this.translateService = translateService;
+        this.externalPluginService = externalPluginService;
         this._injectedCaseManagementTabs$ = new BehaviorSubject([]);
         this._currentTab$ = new BehaviorSubject(TabEnum.DOCUMENT);
         this._configuredContentKeys$ = new BehaviorSubject([]);
@@ -718,15 +720,118 @@ class TabService {
             this.getFormDefinitions(route),
             this.defaultTabs$,
             this.customComponentKeys$,
-        ]).pipe(map(([tabKeys, formDefinitions, defaultTabs, customComponentKeys]) => ({
+            this.getExternalPluginTabItems(),
+        ]).pipe(map(([tabKeys, formDefinitions, defaultTabs, customComponentKeys, externalPluginItems]) => ({
             standard: defaultTabs.every((tabItem) => tabKeys.includes(tabItem.contentKey)),
             custom: !customComponentKeys.length ||
                 customComponentKeys.every((tabItem) => tabKeys.includes(tabItem.contentKey)),
             formIO: !formDefinitions.length ||
                 formDefinitions.every((tabItem) => tabKeys.includes(tabItem.contentKey)),
             widgets: false,
+            externalPlugin: !externalPluginItems.length ||
+                externalPluginItems.every((tabItem) => tabKeys.includes(tabItem.contentKey)),
         })));
     }
+    /**
+     * Lists the selectable content keys for `EXTERNAL_PLUGIN` tabs: one entry per `case-tab` bundle of
+     * each activated (`AVAILABLE`) external-plugin configuration. The `contentKey` encodes
+     * `"<configurationId>[:<bundleKey>]"` — consumed server-side (Phase 2.7) to create the side row.
+     *
+     * Degrades to an empty list when the external-plugin endpoints are unavailable (module absent).
+     */
+    getExternalPluginTabItems() {
+        return combineLatest([
+            this.externalPluginService.getDefinitions(),
+            this.externalPluginService.getConfigurations(),
+        ]).pipe(map(([definitions, configurations]) => {
+            const lang = this.translateService.currentLang;
+            const definitionById = new Map(definitions.map(definition => [definition.id, definition]));
+            const items = [];
+            configurations.forEach(configuration => {
+                const definition = definitionById.get(configuration.definitionId);
+                if (!definition || definition.status !== 'AVAILABLE')
+                    return;
+                const caseTabBundles = (definition.manifest?.frontendBundles ?? []).filter(bundle => bundle.type === 'case-tab');
+                if (!caseTabBundles.length)
+                    return;
+                const pluginName = getExternalPluginDisplayName(definition, lang);
+                caseTabBundles.forEach(bundle => {
+                    const contentKey = bundle.key ? `${configuration.id}:${bundle.key}` : configuration.id;
+                    const bundleSuffix = caseTabBundles.length > 1 ? ` — ${bundle.title ?? bundle.key}` : '';
+                    items.push({
+                        contentKey,
+                        content: `${configuration.title} (${pluginName})${bundleSuffix}`,
+                        selected: false,
+                    });
+                });
+            });
+            return items;
+        }), catchError(() => of([])));
+    }
+    /**
+     * Activated external-plugin configurations that expose ≥1 `case-tab` bundle, grouped so the tab
+     * editor can offer two dropdowns: pick the configuration, then the tab (bundle). The `contentKey`
+     * the editor writes is `"<configId>[:<bundleKey>]"` (Phase 2.7). Degrades to an empty list when the
+     * external-plugin endpoints are unavailable.
+     */
+    getExternalPluginConfigs() {
+        return combineLatest([
+            this.externalPluginService.getDefinitions(),
+            this.externalPluginService.getConfigurations(),
+        ]).pipe(map(([definitions, configurations]) => {
+            const lang = this.translateService.currentLang;
+            const definitionById = new Map(definitions.map(definition => [definition.id, definition]));
+            return configurations.reduce((options, configuration) => {
+                const definition = definitionById.get(configuration.definitionId);
+                if (!definition || definition.status !== 'AVAILABLE')
+                    return options;
+                const caseTabBundles = (definition.manifest?.frontendBundles ?? []).filter(bundle => bundle.type === 'case-tab');
+                if (!caseTabBundles.length)
+                    return options;
+                options.push({
+                    configId: configuration.id,
+                    label: `${configuration.title} (${getExternalPluginDisplayName(definition, lang)})`,
+                    bundles: caseTabBundles.map(bundle => ({
+                        key: bundle.key ?? null,
+                        title: bundle.title ?? bundle.key ?? 'case-tab',
+                    })),
+                });
+                return options;
+            }, []);
+        }), catchError(() => of([])));
+    }
+    /**
+     * Activated external-plugin configurations that expose ≥1 `case-widget` bundle, grouped so the
+     * widget config editor can offer two combo boxes (configuration, then widget bundle). The widget
+     * `case-widget` counterpart of {@link getExternalPluginConfigs}. Degrades to an empty list when the
+     * external-plugin endpoints are unavailable (module absent).
+     */
+    getExternalPluginWidgetConfigs() {
+        return combineLatest([
+            this.externalPluginService.getDefinitions(),
+            this.externalPluginService.getConfigurations(),
+        ]).pipe(map(([definitions, configurations]) => {
+            const lang = this.translateService.currentLang;
+            const definitionById = new Map(definitions.map(definition => [definition.id, definition]));
+            return configurations.reduce((options, configuration) => {
+                const definition = definitionById.get(configuration.definitionId);
+                if (!definition || definition.status !== 'AVAILABLE')
+                    return options;
+                const caseWidgetBundles = (definition.manifest?.frontendBundles ?? []).filter(bundle => bundle.type === 'case-widget');
+                if (!caseWidgetBundles.length)
+                    return options;
+                options.push({
+                    configId: configuration.id,
+                    label: `${configuration.title} (${getExternalPluginDisplayName(definition, lang)})`,
+                    bundles: caseWidgetBundles.map(bundle => ({
+                        key: bundle.key ?? null,
+                        title: bundle.title ?? bundle.key ?? 'case-widget',
+                    })),
+                });
+                return options;
+            }, []);
+        }), catchError(() => of([])));
+    }
     getFormDefinitions(route) {
         return getCaseManagementRouteParams(route).pipe(switchMap((params) => {
             return this.formService
@@ -748,7 +853,7 @@ class TabService {
             : [caseManagementTabConfig];
         this._injectedCaseManagementTabs$.next(tabs.map(tab => ({ ...tab, enabled$: tab.enabled$ ?? of(true) })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabService, deps: [{ token: CASE_TAB_TOKEN, optional: true }, { token: CASE_MANAGEMENT_TAB_TOKEN, optional: true }, { token: i1$3.FormService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabService, deps: [{ token: CASE_TAB_TOKEN, optional: true }, { token: CASE_MANAGEMENT_TAB_TOKEN, optional: true }, { token: i1$3.FormService }, { token: i3.TranslateService }, { token: i3$1.ExternalPluginService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabService, decorators: [{
@@ -766,7 +871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }, {
                     type: Inject,
                     args: [CASE_MANAGEMENT_TAB_TOKEN]
-                }] }, { type: i1$3.FormService }, { type: i3.TranslateService }] });
+                }] }, { type: i1$3.FormService }, { type: i3.TranslateService }, { type: i3$1.ExternalPluginService }] });
 
 class CaseWidgetManagementApiService {
     constructor(http, configService) {
@@ -961,6 +1066,17 @@ class StartableItemManagementService {
     getItemProperties(itemKey, versionTag, type) {
         return this.startableItemApiService.getItemProperties(this.getParams(), itemKey, versionTag, type);
     }
+    /**
+     * Toggles whether a building block item is shown in the case start menu.
+     * The update endpoint replaces all link properties, so the current
+     * properties are fetched first and sent back with the flag flipped.
+     */
+    toggleStartableByUser(item, startableByUser) {
+        return this.getItemProperties(item.key, item.versionTag, item.type).pipe(take(1), switchMap$1(properties => this.updateItem(item.key, item.versionTag, {
+            type: item.type,
+            properties: { ...properties, startableByUser },
+        })));
+    }
     deleteItem(item) {
         return this.startableItemApiService.deleteItem(this.getParams(), item.key, item.versionTag);
     }
@@ -1039,7 +1155,8 @@ class TabFormComponent {
             this.tabService.getFormDefinitions(this.route),
             this.tabService.defaultTabs$,
             this.tabService.customComponentKeys$,
-        ]).pipe(map(([tabKeys, formDefinitions, defaultTabs, customComponentKeys]) => {
+            this.tabService.getExternalPluginTabItems(),
+        ]).pipe(map(([tabKeys, formDefinitions, defaultTabs, customComponentKeys, externalPluginItems]) => {
             switch (this.tabType) {
                 case ApiTabType.STANDARD:
                     return this.getListItems(defaultTabs, tabKeys);
@@ -1047,10 +1164,43 @@ class TabFormComponent {
                     return this.getListItems(customComponentKeys, tabKeys);
                 case ApiTabType.FORMIO:
                     return this.getListItems(formDefinitions, tabKeys);
+                case ApiTabType.EXTERNAL_PLUGIN:
+                    return this.getListItems(externalPluginItems, tabKeys);
                 case ApiTabType.WIDGETS:
                     return [];
+                default:
+                    return [];
             }
         }), startWith([]));
+        // External-plugin tabs are configured with two dropdowns: configuration, then tab (bundle).
+        this.TabType = ApiTabType;
+        this._externalPluginConfigs$ = this.tabService
+            .getExternalPluginConfigs()
+            .pipe(shareReplay({ bufferSize: 1, refCount: true }));
+        this._selectedConfigId$ = new BehaviorSubject(null);
+        this._selectedBundleKey$ = new BehaviorSubject(null);
+        this._configs = [];
+        this.selectedConfigId$ = this._selectedConfigId$.asObservable();
+        this.configItems$ = combineLatest([
+            this._externalPluginConfigs$,
+            this._selectedConfigId$,
+        ]).pipe(map(([configs, selectedConfigId]) => configs.map(config => ({
+            content: config.label,
+            configId: config.configId,
+            selected: config.configId === selectedConfigId,
+        }))));
+        this.bundleItems$ = combineLatest([
+            this._externalPluginConfigs$,
+            this._selectedConfigId$,
+            this._selectedBundleKey$,
+        ]).pipe(map(([configs, selectedConfigId, selectedBundleKey]) => {
+            const config = configs.find(item => item.configId === selectedConfigId);
+            return (config?.bundles ?? []).map(bundle => ({
+                content: bundle.title,
+                bundleKey: bundle.key,
+                selected: bundle.key === selectedBundleKey,
+            }));
+        }));
         this._subscriptions = new Subscription();
     }
     ngOnInit() {
@@ -1063,6 +1213,10 @@ class TabFormComponent {
         else {
             this.form.get('contentKey')?.enable();
         }
+        if (this.tabType === ApiTabType.EXTERNAL_PLUGIN) {
+            this._subscriptions.add(this._externalPluginConfigs$.subscribe(configs => (this._configs = configs)));
+            this.preselectExternalPlugin();
+        }
     }
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
@@ -1087,6 +1241,43 @@ class TabFormComponent {
     onSelected() {
         this._searchActive = false;
     }
+    onConfigSelected(item) {
+        const configId = item?.configId ?? null;
+        this._selectedConfigId$.next(configId);
+        this._selectedBundleKey$.next(null);
+        const config = this._configs.find(candidate => candidate.configId === configId);
+        // A configuration with a single bundle needs no second choice — resolve the contentKey now.
+        if (config && config.bundles.length === 1) {
+            const bundle = config.bundles[0];
+            this._selectedBundleKey$.next(bundle.key);
+            this.setExternalPluginContentKey(configId, bundle.key);
+        }
+        else {
+            // Multiple bundles: clear the contentKey so the form stays invalid until a tab is picked.
+            this.form.get('contentKey')?.setValue('');
+        }
+    }
+    onBundleSelected(item) {
+        const bundleKey = item?.bundleKey ?? null;
+        this._selectedBundleKey$.next(bundleKey);
+        this.setExternalPluginContentKey(this._selectedConfigId$.value, bundleKey);
+    }
+    setExternalPluginContentKey(configId, bundleKey) {
+        if (!configId)
+            return;
+        const contentKey = bundleKey ? `${configId}:${bundleKey}` : configId;
+        this.form.get('contentKey')?.setValue(contentKey);
+    }
+    preselectExternalPlugin() {
+        const contentKey = this.form.get('contentKey')?.value;
+        if (!contentKey)
+            return;
+        const separatorIndex = contentKey.indexOf(':');
+        const configId = separatorIndex >= 0 ? contentKey.substring(0, separatorIndex) : contentKey;
+        const bundleKey = separatorIndex >= 0 ? contentKey.substring(separatorIndex + 1) : null;
+        this._selectedConfigId$.next(configId);
+        this._selectedBundleKey$.next(bundleKey);
+    }
     toggleCheckedChange(event) {
         this.showTasks?.patchValue(!!event);
     }
@@ -1112,11 +1303,11 @@ class TabFormComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabFormComponent, deps: [{ token: i2$1.ConfigService }, { token: TabService }, { token: i1$4.FormGroupDirective }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TabFormComponent, isStandalone: false, selector: "valtimo-tab-form", inputs: { tabType: "tabType" }, 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\" [cdsLayer]=\"1\">\n  <cds-label>\n    {{ 'caseManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label [invalid]=\"!!isKeyError()\" [invalidText]=\"getKeyErrorMessage() | translate\">\n    {{ 'caseManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      pattern=\"[a-zA-Z0-9\\-]+\"\n      [invalid]=\"!!isKeyError()\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    *ngIf=\"tabType !== 'widgets'\"\n    [cdsLayer]=\"1\"\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'caseManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list [cdsLayer]=\"1\"></cds-dropdown-list>\n  </cds-combo-box>\n\n  <cds-toggle\n    [label]=\"'caseManagement.tabManagement.addModal.visibleTitle' | translate\"\n    [onText]=\"'caseManagement.tabManagement.addModal.visible' | translate\"\n    [offText]=\"'caseManagement.tabManagement.addModal.invisible' | translate\"\n    [checked]=\"showTasks?.value\"\n    (checkedChange)=\"toggleCheckedChange($event)\"\n    [disabled]=\"disableTaskListVisibleToggle()\"\n  ></cds-toggle>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: TabFormComponent, isStandalone: false, selector: "valtimo-tab-form", inputs: { tabType: "tabType" }, 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\" [cdsLayer]=\"1\">\n  <cds-label>\n    {{ 'caseManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label [invalid]=\"!!isKeyError()\" [invalidText]=\"getKeyErrorMessage() | translate\">\n    {{ 'caseManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      pattern=\"[a-zA-Z0-9\\-]+\"\n      [invalid]=\"!!isKeyError()\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <ng-container *ngIf=\"tabType === TabType.EXTERNAL_PLUGIN; else nonPluginContent\">\n    <cds-combo-box\n      [cdsLayer]=\"1\"\n      [dropUp]=\"false\"\n      [items]=\"configItems$ | async\"\n      itemValueKey=\"configId\"\n      [label]=\"'caseManagement.tabManagement.contentLabels.external_plugin_config' | translate\"\n      (selected)=\"onConfigSelected($event)\"\n    >\n      <cds-dropdown-list [cdsLayer]=\"1\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <cds-combo-box\n      [cdsLayer]=\"1\"\n      [disabled]=\"!(selectedConfigId$ | async)\"\n      [dropUp]=\"false\"\n      [items]=\"bundleItems$ | async\"\n      itemValueKey=\"bundleKey\"\n      [label]=\"'caseManagement.tabManagement.contentLabels.external_plugin_bundle' | translate\"\n      (selected)=\"onBundleSelected($event)\"\n    >\n      <cds-dropdown-list [cdsLayer]=\"1\"></cds-dropdown-list>\n    </cds-combo-box>\n  </ng-container>\n\n  <ng-template #nonPluginContent>\n    <cds-combo-box\n      *ngIf=\"tabType !== 'widgets'\"\n      [cdsLayer]=\"1\"\n      [dropUp]=\"false\"\n      formControlName=\"contentKey\"\n      [items]=\"listItems$ | async\"\n      itemValueKey=\"contentKey\"\n      [label]=\"'caseManagement.tabManagement.contentLabels.' + tabType | translate\"\n      (search)=\"onSearch($event)\"\n      (selected)=\"onSelected($event)\"\n    >\n      <cds-dropdown-list [cdsLayer]=\"1\"></cds-dropdown-list>\n    </cds-combo-box>\n  </ng-template>\n\n  <cds-toggle\n    [label]=\"'caseManagement.tabManagement.addModal.visibleTitle' | translate\"\n    [onText]=\"'caseManagement.tabManagement.addModal.visible' | translate\"\n    [offText]=\"'caseManagement.tabManagement.addModal.invisible' | translate\"\n    [checked]=\"showTasks?.value\"\n    (checkedChange)=\"toggleCheckedChange($event)\"\n    [disabled]=\"disableTaskListVisibleToggle()\"\n  ></cds-toggle>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:16px}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-tab-form', 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\" [cdsLayer]=\"1\">\n  <cds-label>\n    {{ 'caseManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label [invalid]=\"!!isKeyError()\" [invalidText]=\"getKeyErrorMessage() | translate\">\n    {{ 'caseManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      pattern=\"[a-zA-Z0-9\\-]+\"\n      [invalid]=\"!!isKeyError()\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    *ngIf=\"tabType !== 'widgets'\"\n    [cdsLayer]=\"1\"\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'caseManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list [cdsLayer]=\"1\"></cds-dropdown-list>\n  </cds-combo-box>\n\n  <cds-toggle\n    [label]=\"'caseManagement.tabManagement.addModal.visibleTitle' | translate\"\n    [onText]=\"'caseManagement.tabManagement.addModal.visible' | translate\"\n    [offText]=\"'caseManagement.tabManagement.addModal.invisible' | translate\"\n    [checked]=\"showTasks?.value\"\n    (checkedChange)=\"toggleCheckedChange($event)\"\n    [disabled]=\"disableTaskListVisibleToggle()\"\n  ></cds-toggle>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\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-tab-form', 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\" [cdsLayer]=\"1\">\n  <cds-label>\n    {{ 'caseManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label [invalid]=\"!!isKeyError()\" [invalidText]=\"getKeyErrorMessage() | translate\">\n    {{ 'caseManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      pattern=\"[a-zA-Z0-9\\-]+\"\n      [invalid]=\"!!isKeyError()\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <ng-container *ngIf=\"tabType === TabType.EXTERNAL_PLUGIN; else nonPluginContent\">\n    <cds-combo-box\n      [cdsLayer]=\"1\"\n      [dropUp]=\"false\"\n      [items]=\"configItems$ | async\"\n      itemValueKey=\"configId\"\n      [label]=\"'caseManagement.tabManagement.contentLabels.external_plugin_config' | translate\"\n      (selected)=\"onConfigSelected($event)\"\n    >\n      <cds-dropdown-list [cdsLayer]=\"1\"></cds-dropdown-list>\n    </cds-combo-box>\n\n    <cds-combo-box\n      [cdsLayer]=\"1\"\n      [disabled]=\"!(selectedConfigId$ | async)\"\n      [dropUp]=\"false\"\n      [items]=\"bundleItems$ | async\"\n      itemValueKey=\"bundleKey\"\n      [label]=\"'caseManagement.tabManagement.contentLabels.external_plugin_bundle' | translate\"\n      (selected)=\"onBundleSelected($event)\"\n    >\n      <cds-dropdown-list [cdsLayer]=\"1\"></cds-dropdown-list>\n    </cds-combo-box>\n  </ng-container>\n\n  <ng-template #nonPluginContent>\n    <cds-combo-box\n      *ngIf=\"tabType !== 'widgets'\"\n      [cdsLayer]=\"1\"\n      [dropUp]=\"false\"\n      formControlName=\"contentKey\"\n      [items]=\"listItems$ | async\"\n      itemValueKey=\"contentKey\"\n      [label]=\"'caseManagement.tabManagement.contentLabels.' + tabType | translate\"\n      (search)=\"onSearch($event)\"\n      (selected)=\"onSelected($event)\"\n    >\n      <cds-dropdown-list [cdsLayer]=\"1\"></cds-dropdown-list>\n    </cds-combo-box>\n  </ng-template>\n\n  <cds-toggle\n    [label]=\"'caseManagement.tabManagement.addModal.visibleTitle' | translate\"\n    [onText]=\"'caseManagement.tabManagement.addModal.visible' | translate\"\n    [offText]=\"'caseManagement.tabManagement.addModal.invisible' | translate\"\n    [checked]=\"showTasks?.value\"\n    (checkedChange)=\"toggleCheckedChange($event)\"\n    [disabled]=\"disableTaskListVisibleToggle()\"\n  ></cds-toggle>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:16px}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\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: i2$1.ConfigService }, { type: TabService }, { type: i1$4.FormGroupDirective }, { type: i2$2.ActivatedRoute }], propDecorators: { tabType: [{
                 type: Input
             }] } });
@@ -1177,6 +1368,13 @@ class CaseManagementAddTabModalComponent {
                 type: ApiTabType.WIDGETS,
                 disabled: disabled.widgets,
             },
+            {
+                icon: 'plug',
+                title: 'caseManagement.tabManagement.addModal.externalPlugin',
+                type: ApiTabType.EXTERNAL_PLUGIN,
+                disabled: disabled.externalPlugin,
+                disabledTooltipTranslationKey: 'caseManagement.tabManagement.addModal.externalPluginDisabled',
+            },
         ]));
         this.form = this.fb.group({
             name: this.fb.control(null),
@@ -1185,7 +1383,13 @@ class CaseManagementAddTabModalComponent {
             showTasks: this.fb.control(false, Validators.required),
         });
         this.selectedTabType$ = new BehaviorSubject(null);
-        this.iconService.registerAll([Code16, Development16, TableBuilt16, WatsonHealthPageScroll16]);
+        this.iconService.registerAll([
+            Code16,
+            Development16,
+            Plug16,
+            TableBuilt16,
+            WatsonHealthPageScroll16,
+        ]);
     }
     addTab(type) {
         let { contentKey, key, name, showTasks } = this.form.getRawValue();
@@ -1217,11 +1421,11 @@ class CaseManagementAddTabModalComponent {
             : { uniqueKey: { value: control.value } };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementAddTabModalComponent, deps: [{ token: i1$4.FormBuilder }, { token: i2.IconService }, { token: TabService }, { token: i2$1.ConfigService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementAddTabModalComponent, isStandalone: false, selector: "valtimo-case-management-add-tab-modal", inputs: { params: "params", open: "open" }, outputs: { closeModalEvent: "closeModalEvent" }, 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 valtimoCdsModal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\" [cdsLayer]=\"1\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('caseManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (params.caseDefinitionKey | titlecase)})\n          : ('caseManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\" [cdsLayer]=\"1\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'caseManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <cds-tooltip\n          *ngFor=\"let tabType of tabTypes\"\n          [caret]=\"true\"\n          enterDelayMs=\"0\"\n          leaveDelayMs=\"0\"\n          [description]=\"tabType.disabledTooltipTranslationKey | translate\"\n          [disabled]=\"!tabType.disabled\"\n          align=\"bottom\"\n        >\n          <button\n            cdsButton=\"secondary\"\n            [disabled]=\"tabType.disabled\"\n            (click)=\"onTabTypeSelect(tabType.type)\"\n          >\n            {{ tabType.title | translate }}\n\n            <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n          </button>\n        </cds-tooltip>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\" [cdsLayer]=\"1\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'interface.create' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}.cds--popover--open{z-index:999999!important}\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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: TabFormComponent, selector: "valtimo-tab-form", inputs: ["tabType"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementAddTabModalComponent, isStandalone: false, selector: "valtimo-case-management-add-tab-modal", inputs: { params: "params", open: "open" }, outputs: { closeModalEvent: "closeModalEvent" }, 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 valtimoCdsModal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\" [cdsLayer]=\"1\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('caseManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (params.caseDefinitionKey | titlecase)})\n          : ('caseManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\" [cdsLayer]=\"1\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'caseManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <cds-tooltip\n          *ngFor=\"let tabType of tabTypes\"\n          [autoAlign]=\"true\"\n          [caret]=\"true\"\n          enterDelayMs=\"0\"\n          leaveDelayMs=\"0\"\n          [description]=\"tabType.disabledTooltipTranslationKey | translate\"\n          [disabled]=\"!tabType.disabled\"\n          align=\"bottom\"\n        >\n          <button\n            cdsButton=\"secondary\"\n            [disabled]=\"tabType.disabled\"\n            (click)=\"onTabTypeSelect(tabType.type)\"\n          >\n            {{ tabType.title | translate }}\n\n            <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n          </button>\n        </cds-tooltip>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\" [cdsLayer]=\"1\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'interface.create' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}.cds--popover--open{z-index:999999!important}\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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: TabFormComponent, selector: "valtimo-tab-form", inputs: ["tabType"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementAddTabModalComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-case-management-add-tab-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 valtimoCdsModal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\" [cdsLayer]=\"1\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('caseManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (params.caseDefinitionKey | titlecase)})\n          : ('caseManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\" [cdsLayer]=\"1\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'caseManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <cds-tooltip\n          *ngFor=\"let tabType of tabTypes\"\n          [caret]=\"true\"\n          enterDelayMs=\"0\"\n          leaveDelayMs=\"0\"\n          [description]=\"tabType.disabledTooltipTranslationKey | translate\"\n          [disabled]=\"!tabType.disabled\"\n          align=\"bottom\"\n        >\n          <button\n            cdsButton=\"secondary\"\n            [disabled]=\"tabType.disabled\"\n            (click)=\"onTabTypeSelect(tabType.type)\"\n          >\n            {{ tabType.title | translate }}\n\n            <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n          </button>\n        </cds-tooltip>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\" [cdsLayer]=\"1\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'interface.create' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}.cds--popover--open{z-index:999999!important}\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-case-management-add-tab-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 valtimoCdsModal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\" [cdsLayer]=\"1\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('caseManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (params.caseDefinitionKey | titlecase)})\n          : ('caseManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\" [cdsLayer]=\"1\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'caseManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <cds-tooltip\n          *ngFor=\"let tabType of tabTypes\"\n          [autoAlign]=\"true\"\n          [caret]=\"true\"\n          enterDelayMs=\"0\"\n          leaveDelayMs=\"0\"\n          [description]=\"tabType.disabledTooltipTranslationKey | translate\"\n          [disabled]=\"!tabType.disabled\"\n          align=\"bottom\"\n        >\n          <button\n            cdsButton=\"secondary\"\n            [disabled]=\"tabType.disabled\"\n            (click)=\"onTabTypeSelect(tabType.type)\"\n          >\n            {{ tabType.title | translate }}\n\n            <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n          </button>\n        </cds-tooltip>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\" [cdsLayer]=\"1\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'interface.create' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}.cds--popover--open{z-index:999999!important}\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: i1$4.FormBuilder }, { type: i2.IconService }, { type: TabService }, { type: i2$1.ConfigService }, { type: i2$2.ActivatedRoute }], propDecorators: { params: [{
                 type: Input
             }], open: [{
@@ -1349,6 +1553,8 @@ class CaseManagementTabsComponent {
         }));
         this.tab$ = new BehaviorSubject(null);
         this.dragAndDropDisabled = signal(false);
+        // contentKey → human label for EXTERNAL_PLUGIN tabs (the raw contentKey is a config UUID).
+        this._externalPluginContentLabels = {};
         this.params$ = getCaseManagementRouteParams(this.route);
         this.hasEditPermissions$ = this.params$.pipe(switchMap(params => this.editPermissionsService.hasEditPermissions(params?.caseDefinitionKey, params?.caseDefinitionVersionTag)));
     }
@@ -1356,10 +1562,32 @@ class CaseManagementTabsComponent {
         this.iconService.registerAll([ArrowDown16, ArrowUp16]);
         this.cd.detectChanges();
         this.setFields();
+        this.loadExternalPluginContentLabels();
     }
     isTranslated(key) {
         return this.translateService.instant(key) !== key;
     }
+    /**
+     * Label shown in the content column. For an external-plugin tab the raw `contentKey` is a
+     * configuration UUID, so it is resolved to "configTitle (pluginName) — bundleTitle"; other tab
+     * types keep the `case.tabs.<contentKey>` translation (falling back to the raw key).
+     */
+    getTabContentLabel(item) {
+        if (item.type === ApiTabType.EXTERNAL_PLUGIN) {
+            return this._externalPluginContentLabels[item.contentKey] ?? item.contentKey;
+        }
+        const key = `case.tabs.${item.contentKey}`;
+        return this.isTranslated(key) ? this.translateService.instant(key) : item.contentKey;
+    }
+    loadExternalPluginContentLabels() {
+        this.tabService.getExternalPluginTabItems().subscribe(items => {
+            this._externalPluginContentLabels = items.reduce((labels, item) => {
+                labels[item.contentKey] = item.content;
+                return labels;
+            }, {});
+            this.cd.markForCheck();
+        });
+    }
     openAddTabModal() {
         this.openAddModal$.next(true);
     }
@@ -1448,11 +1676,11 @@ class CaseManagementTabsComponent {
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.IconService }, { token: TabManagementService }, { token: TabService }, { token: i3.TranslateService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementTabsComponent, isStandalone: false, selector: "valtimo-case-management-tabs", viewQueries: [{ propertyName: "tabContentColumnTemplate", first: true, predicate: ["tabContentColumn"], descendants: true }, { propertyName: "tabTypeColumnTemplate", first: true, predicate: ["tabTypeColumn"], descendants: true }, { propertyName: "moveButtonsTemplate", first: true, predicate: ["moveButtonsTemplate"], 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<ng-container\n  *ngIf=\"{\n    routeParams: caseManagementRouteParams$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    *ngIf=\"{fields: fields$ | async, loading: loading$ | async, tabs: tabs$ | async} as obs\"\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.tabs\"\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [loading]=\"obs.loading\"\n    (rowClicked)=\"onRowClicked($event)\"\n    [dragAndDrop]=\"true\"\n    [dragAndDropDisabled]=\"dragAndDropDisabled() || !(hasEditPermissions$ | async)\"\n    (itemsReordered)=\"onItemsReorderedEvent($event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addTabButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addTabButton\"\n      [description]=\"'case.tabs.noResultsDescription' | translate\"\n      [title]=\"'case.tabs.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #tabTypeColumn let-data=\"data\">\n    {{\n      isTranslated('caseManagement.tabType.' + data.item.type)\n        ? ('caseManagement.tabType.' + data.item.type | translate)\n        : data.item.type\n    }}\n  </ng-template>\n\n  <ng-template #tabContentColumn let-data=\"data\">\n    {{\n      isTranslated('case.tabs.' + data.item.contentKey)\n        ? ('case.tabs.' + data.item.contentKey | translate)\n        : data.item.contentKey\n    }}\n  </ng-template>\n\n  <ng-template #addTabButton>\n    <button cdsButton=\"primary\" *ngIf=\"obs.hasEditPermissions\" (click)=\"openAddTabModal()\">\n      {{ 'caseManagement.tabManagement.addModal.addTab' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n\n  <valtimo-case-management-add-tab-modal\n    *ngIf=\"openAddModal$ | async\"\n    [params]=\"obs.routeParams\"\n    [open]=\"openAddModal$ | async\"\n    (closeModalEvent)=\"onCloseAddModalEvent($event)\"\n  ></valtimo-case-management-add-tab-modal>\n\n  <valtimo-case-management-edit-tab-modal\n    *ngIf=\"openEditModal$ | async\"\n    [tab]=\"tab$ | async\"\n    (closeModalEvent)=\"onCloseEditModalEvent($event)\"\n    [open]=\"openEditModal$ | async\"\n  ></valtimo-case-management-edit-tab-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"caseManagement.tabManagement.deleteModal.description\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"caseManagement.tabManagement.deleteModal.title\"\n    (confirmEvent)=\"onConfirmEvent($event)\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i7.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: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: CaseManagementAddTabModalComponent, selector: "valtimo-case-management-add-tab-modal", inputs: ["params", "open"], outputs: ["closeModalEvent"] }, { kind: "component", type: CaseManagementEditTabModalComponent, selector: "valtimo-case-management-edit-tab-modal", inputs: ["open", "tab"], outputs: ["closeModalEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementTabsComponent, isStandalone: false, selector: "valtimo-case-management-tabs", viewQueries: [{ propertyName: "tabContentColumnTemplate", first: true, predicate: ["tabContentColumn"], descendants: true }, { propertyName: "tabTypeColumnTemplate", first: true, predicate: ["tabTypeColumn"], descendants: true }, { propertyName: "moveButtonsTemplate", first: true, predicate: ["moveButtonsTemplate"], 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<ng-container\n  *ngIf=\"{\n    routeParams: caseManagementRouteParams$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    *ngIf=\"{fields: fields$ | async, loading: loading$ | async, tabs: tabs$ | async} as obs\"\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.tabs\"\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [loading]=\"obs.loading\"\n    (rowClicked)=\"onRowClicked($event)\"\n    [dragAndDrop]=\"true\"\n    [dragAndDropDisabled]=\"dragAndDropDisabled() || !(hasEditPermissions$ | async)\"\n    (itemsReordered)=\"onItemsReorderedEvent($event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addTabButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addTabButton\"\n      [description]=\"'case.tabs.noResultsDescription' | translate\"\n      [title]=\"'case.tabs.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #tabTypeColumn let-data=\"data\">\n    {{\n      isTranslated('caseManagement.tabType.' + data.item.type)\n        ? ('caseManagement.tabType.' + data.item.type | translate)\n        : data.item.type\n    }}\n  </ng-template>\n\n  <ng-template #tabContentColumn let-data=\"data\">\n    {{ getTabContentLabel(data.item) }}\n  </ng-template>\n\n  <ng-template #addTabButton>\n    <button cdsButton=\"primary\" *ngIf=\"obs.hasEditPermissions\" (click)=\"openAddTabModal()\">\n      {{ 'caseManagement.tabManagement.addModal.addTab' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n\n  <valtimo-case-management-add-tab-modal\n    *ngIf=\"openAddModal$ | async\"\n    [params]=\"obs.routeParams\"\n    [open]=\"openAddModal$ | async\"\n    (closeModalEvent)=\"onCloseAddModalEvent($event)\"\n  ></valtimo-case-management-add-tab-modal>\n\n  <valtimo-case-management-edit-tab-modal\n    *ngIf=\"openEditModal$ | async\"\n    [tab]=\"tab$ | async\"\n    (closeModalEvent)=\"onCloseEditModalEvent($event)\"\n    [open]=\"openEditModal$ | async\"\n  ></valtimo-case-management-edit-tab-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"caseManagement.tabManagement.deleteModal.description\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"caseManagement.tabManagement.deleteModal.title\"\n    (confirmEvent)=\"onConfirmEvent($event)\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i7.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: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: CaseManagementAddTabModalComponent, selector: "valtimo-case-management-add-tab-modal", inputs: ["params", "open"], outputs: ["closeModalEvent"] }, { kind: "component", type: CaseManagementEditTabModalComponent, selector: "valtimo-case-management-edit-tab-modal", inputs: ["open", "tab"], outputs: ["closeModalEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementTabsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-case-management-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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\n  *ngIf=\"{\n    routeParams: caseManagementRouteParams$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    *ngIf=\"{fields: fields$ | async, loading: loading$ | async, tabs: tabs$ | async} as obs\"\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.tabs\"\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [loading]=\"obs.loading\"\n    (rowClicked)=\"onRowClicked($event)\"\n    [dragAndDrop]=\"true\"\n    [dragAndDropDisabled]=\"dragAndDropDisabled() || !(hasEditPermissions$ | async)\"\n    (itemsReordered)=\"onItemsReorderedEvent($event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addTabButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addTabButton\"\n      [description]=\"'case.tabs.noResultsDescription' | translate\"\n      [title]=\"'case.tabs.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #tabTypeColumn let-data=\"data\">\n    {{\n      isTranslated('caseManagement.tabType.' + data.item.type)\n        ? ('caseManagement.tabType.' + data.item.type | translate)\n        : data.item.type\n    }}\n  </ng-template>\n\n  <ng-template #tabContentColumn let-data=\"data\">\n    {{\n      isTranslated('case.tabs.' + data.item.contentKey)\n        ? ('case.tabs.' + data.item.contentKey | translate)\n        : data.item.contentKey\n    }}\n  </ng-template>\n\n  <ng-template #addTabButton>\n    <button cdsButton=\"primary\" *ngIf=\"obs.hasEditPermissions\" (click)=\"openAddTabModal()\">\n      {{ 'caseManagement.tabManagement.addModal.addTab' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n\n  <valtimo-case-management-add-tab-modal\n    *ngIf=\"openAddModal$ | async\"\n    [params]=\"obs.routeParams\"\n    [open]=\"openAddModal$ | async\"\n    (closeModalEvent)=\"onCloseAddModalEvent($event)\"\n  ></valtimo-case-management-add-tab-modal>\n\n  <valtimo-case-management-edit-tab-modal\n    *ngIf=\"openEditModal$ | async\"\n    [tab]=\"tab$ | async\"\n    (closeModalEvent)=\"onCloseEditModalEvent($event)\"\n    [open]=\"openEditModal$ | async\"\n  ></valtimo-case-management-edit-tab-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"caseManagement.tabManagement.deleteModal.description\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"caseManagement.tabManagement.deleteModal.title\"\n    (confirmEvent)=\"onConfirmEvent($event)\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n" }]
+            args: [{ standalone: false, selector: 'valtimo-case-management-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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\n  *ngIf=\"{\n    routeParams: caseManagementRouteParams$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    *ngIf=\"{fields: fields$ | async, loading: loading$ | async, tabs: tabs$ | async} as obs\"\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.tabs\"\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [loading]=\"obs.loading\"\n    (rowClicked)=\"onRowClicked($event)\"\n    [dragAndDrop]=\"true\"\n    [dragAndDropDisabled]=\"dragAndDropDisabled() || !(hasEditPermissions$ | async)\"\n    (itemsReordered)=\"onItemsReorderedEvent($event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addTabButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addTabButton\"\n      [description]=\"'case.tabs.noResultsDescription' | translate\"\n      [title]=\"'case.tabs.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #tabTypeColumn let-data=\"data\">\n    {{\n      isTranslated('caseManagement.tabType.' + data.item.type)\n        ? ('caseManagement.tabType.' + data.item.type | translate)\n        : data.item.type\n    }}\n  </ng-template>\n\n  <ng-template #tabContentColumn let-data=\"data\">\n    {{ getTabContentLabel(data.item) }}\n  </ng-template>\n\n  <ng-template #addTabButton>\n    <button cdsButton=\"primary\" *ngIf=\"obs.hasEditPermissions\" (click)=\"openAddTabModal()\">\n      {{ 'caseManagement.tabManagement.addModal.addTab' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n\n  <valtimo-case-management-add-tab-modal\n    *ngIf=\"openAddModal$ | async\"\n    [params]=\"obs.routeParams\"\n    [open]=\"openAddModal$ | async\"\n    (closeModalEvent)=\"onCloseAddModalEvent($event)\"\n  ></valtimo-case-management-add-tab-modal>\n\n  <valtimo-case-management-edit-tab-modal\n    *ngIf=\"openEditModal$ | async\"\n    [tab]=\"tab$ | async\"\n    (closeModalEvent)=\"onCloseEditModalEvent($event)\"\n    [open]=\"openEditModal$ | async\"\n  ></valtimo-case-management-edit-tab-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"caseManagement.tabManagement.deleteModal.description\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"caseManagement.tabManagement.deleteModal.title\"\n    (confirmEvent)=\"onConfirmEvent($event)\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.IconService }, { type: TabManagementService }, { type: TabService }, { type: i3.TranslateService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i2$1.EditPermissionsService }], propDecorators: { tabContentColumnTemplate: [{
                 type: ViewChild,
                 args: ['tabContentColumn']
@@ -2599,6 +2827,7 @@ class CaseManagementSearchFieldsComponent {
         }))));
         this.caseDefinitionKey$ = this.route.parent.params.pipe(map(params => params.caseDefinitionKey || ''), filter(caseDefinitionKey => !!caseDefinitionKey), tap((caseDefinitionKey) => (this._caseDefinitionKey = caseDefinitionKey)));
         this.caseDefinitionVersionTag$ = this.route.parent.params.pipe(map(params => params.caseDefinitionVersionTag || ''), filter(caseDefinitionVersionTag => !!caseDefinitionVersionTag));
+        this.usedKeys$ = new BehaviorSubject([]);
         this.refreshSearchFields$ = new BehaviorSubject(null);
         this.searchFields$ = combineLatest([
             this.caseDefinitionKey$,
@@ -2700,6 +2929,7 @@ class CaseManagementSearchFieldsComponent {
             .pipe(take$1(1), filter(([inputDisabled, hasPermission]) => !inputDisabled && hasPermission))
             .subscribe(() => {
             this.searchFieldActionTypeIsAdd = searchFieldActionTypeIsAdd;
+            this.usedKeys$.next((this.cachedSearchFields ?? []).map(field => field.key));
             const searchFieldToSelect = this.cachedSearchFields.find(field => field.key === searchField.key);
             this.selectedSearchField$.next(searchFieldToSelect || {});
             this.showModal();
@@ -2901,11 +3131,11 @@ class CaseManagementSearchFieldsComponent {
         this.searchFieldClicked(searchField, false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementSearchFieldsComponent, deps: [{ token: i1$2.DocumentService }, { token: i2$2.ActivatedRoute }, { token: i3.TranslateService }, { token: i2.IconService }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseManagementSearchFieldsComponent, isStandalone: false, selector: "valtimo-case-management-search-fields", 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\n  *ngIf=\"{\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    searchFields: translatedSearchFields$ | async,\n    showActionItems: showActionItems$ | async,\n    valid: valid$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"searchFieldsOverview.deleteSearchFieldConfirmation\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    cdsButton=\"primary\"\n    data-test-id=\"case-management-search-add\"\n    *ngIf=\"obs.hasEditPermissions\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      data-test-id=\"searchFieldsList\"\n      [actionItems]=\"actionItems\"\n      [showActionItems]=\"obs.hasEditPermissions\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [items]=\"obs.searchFields\"\n      [loading]=\"!obs.searchFields\"\n      (rowClicked)=\"searchFieldClicked($event, false)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n        [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateSearchFields(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n    size=\"sm\"\n    (close)=\"onModalClose()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async,\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"case-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          dataTestId=\"case-management-search-key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [caseDefinitionKey]=\"caseDefinitionKey$ | async\"\n          [caseDefinitionVersionTag]=\"caseDefinitionVersionTag$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button\n    data-test-id=\"case-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-test-id=\"case-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.caseDefinitionKey)\"\n  >\n    {{ (searchFieldActionTypeIsAdd ? 'interface.create' : 'interface.save') | translate }}\n  </button>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      data-test-id=\"case-management-search-fields-switch-view\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-test-id=\"case-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    (click)=\"onDownloadClick()\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.case-management-search-fields__buttons{display:flex;gap:16px}.case-management-search-fields__buttons .center-link{display:flex;align-items:center}.case-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.case-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.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: i7.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i7.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: i7.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: i7.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseManagementSearchFieldsComponent, isStandalone: false, selector: "valtimo-case-management-search-fields", 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\n  *ngIf=\"{\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    searchFields: translatedSearchFields$ | async,\n    showActionItems: showActionItems$ | async,\n    valid: valid$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"searchFieldsOverview.deleteSearchFieldConfirmation\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    cdsButton=\"primary\"\n    data-test-id=\"case-management-search-add\"\n    *ngIf=\"obs.hasEditPermissions\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      data-test-id=\"searchFieldsList\"\n      [actionItems]=\"actionItems\"\n      [showActionItems]=\"obs.hasEditPermissions\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [items]=\"obs.searchFields\"\n      [loading]=\"!obs.searchFields\"\n      (rowClicked)=\"searchFieldClicked($event, false)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n        [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateSearchFields(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n    size=\"sm\"\n    (close)=\"onModalClose()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async,\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"case-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-auto-key-input\n          name=\"key\"\n          dataTestId=\"case-management-search-key\"\n          labelTranslationKey=\"searchFieldsOverview.key\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [mode]=\"searchFieldActionTypeIsAdd ? 'add' : 'edit'\"\n          [sourceText]=\"(formData$ | async)?.title\"\n          [usedKeys]=\"usedKeys$ | async\"\n        >\n          <v-tooltip-icon\n            [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n            [disabled]=\"obs.disableInput\"\n          ></v-tooltip-icon>\n        </valtimo-auto-key-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [caseDefinitionKey]=\"caseDefinitionKey$ | async\"\n          [caseDefinitionVersionTag]=\"caseDefinitionVersionTag$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button\n    data-test-id=\"case-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-test-id=\"case-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.caseDefinitionKey)\"\n  >\n    {{ (searchFieldActionTypeIsAdd ? 'interface.create' : 'interface.save') | translate }}\n  </button>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      data-test-id=\"case-management-search-fields-switch-view\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-test-id=\"case-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    (click)=\"onDownloadClick()\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.case-management-search-fields__buttons{display:flex;gap:16px}.case-management-search-fields__buttons .center-link{display:flex;align-items:center}.case-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.case-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i7.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: i7.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder", "dataTestId", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i7.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteButtonType", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i7.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: i7.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: i7.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "component", type: i7.AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "dataTestId", "name", "disabled", "defaultValue", "margin", "mode", "usedKeys", "sourceText"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementSearchFieldsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-case-management-search-fields', 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\n  *ngIf=\"{\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    searchFields: translatedSearchFields$ | async,\n    showActionItems: showActionItems$ | async,\n    valid: valid$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"searchFieldsOverview.deleteSearchFieldConfirmation\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    cdsButton=\"primary\"\n    data-test-id=\"case-management-search-add\"\n    *ngIf=\"obs.hasEditPermissions\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      data-test-id=\"searchFieldsList\"\n      [actionItems]=\"actionItems\"\n      [showActionItems]=\"obs.hasEditPermissions\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [items]=\"obs.searchFields\"\n      [loading]=\"!obs.searchFields\"\n      (rowClicked)=\"searchFieldClicked($event, false)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n        [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateSearchFields(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n    size=\"sm\"\n    (close)=\"onModalClose()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async,\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"case-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          dataTestId=\"case-management-search-key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [caseDefinitionKey]=\"caseDefinitionKey$ | async\"\n          [caseDefinitionVersionTag]=\"caseDefinitionVersionTag$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button\n    data-test-id=\"case-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-test-id=\"case-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.caseDefinitionKey)\"\n  >\n    {{ (searchFieldActionTypeIsAdd ? 'interface.create' : 'interface.save') | translate }}\n  </button>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      data-test-id=\"case-management-search-fields-switch-view\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-test-id=\"case-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    (click)=\"onDownloadClick()\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.case-management-search-fields__buttons{display:flex;gap:16px}.case-management-search-fields__buttons .center-link{display:flex;align-items:center}.case-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.case-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\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-case-management-search-fields', 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\n  *ngIf=\"{\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    searchFields: translatedSearchFields$ | async,\n    showActionItems: showActionItems$ | async,\n    valid: valid$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"searchFieldsOverview.deleteSearchFieldConfirmation\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    cdsButton=\"primary\"\n    data-test-id=\"case-management-search-add\"\n    *ngIf=\"obs.hasEditPermissions\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      data-test-id=\"searchFieldsList\"\n      [actionItems]=\"actionItems\"\n      [showActionItems]=\"obs.hasEditPermissions\"\n      [fields]=\"fields\"\n      [header]=\"false\"\n      [items]=\"obs.searchFields\"\n      [loading]=\"!obs.searchFields\"\n      (rowClicked)=\"searchFieldClicked($event, false)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n        [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateSearchFields(obs.caseDefinitionKey, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n    size=\"sm\"\n    (close)=\"onModalClose()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async,\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"case-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-auto-key-input\n          name=\"key\"\n          dataTestId=\"case-management-search-key\"\n          labelTranslationKey=\"searchFieldsOverview.key\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [mode]=\"searchFieldActionTypeIsAdd ? 'add' : 'edit'\"\n          [sourceText]=\"(formData$ | async)?.title\"\n          [usedKeys]=\"usedKeys$ | async\"\n        >\n          <v-tooltip-icon\n            [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n            [disabled]=\"obs.disableInput\"\n          ></v-tooltip-icon>\n        </valtimo-auto-key-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [caseDefinitionKey]=\"caseDefinitionKey$ | async\"\n          [caseDefinitionVersionTag]=\"caseDefinitionVersionTag$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"case-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button\n    data-test-id=\"case-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-test-id=\"case-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.caseDefinitionKey)\"\n  >\n    {{ (searchFieldActionTypeIsAdd ? 'interface.create' : 'interface.save') | translate }}\n  </button>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      data-test-id=\"case-management-search-fields-switch-view\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-test-id=\"case-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    (click)=\"onDownloadClick()\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.case-management-search-fields__buttons{display:flex;gap:16px}.case-management-search-fields__buttons .center-link{display:flex;align-items:center}.case-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.case-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\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: i1$2.DocumentService }, { type: i2$2.ActivatedRoute }, { type: i3.TranslateService }, { type: i2.IconService }, { type: i2$1.EditPermissionsService }] });
 
 /*
@@ -3058,6 +3288,8 @@ class CaseManagementListColumnsComponent {
             { content: this.translateService.instant(`listColumn.sortableAsc`), key: 'ASC' },
             { content: this.translateService.instant(`listColumn.sortableDesc`), key: 'DESC' },
         ].map((item, index) => ({ ...item, selected: index === selectedSortItemIndex }))));
+        this.columnTitle$ = this.formGroup.valueChanges.pipe(map(formValues => formValues.title ?? ''), startWith(''));
+        this.usedKeys$ = this.currentModalType$.pipe(map(() => this.cachedCaseListColumns.map(column => column.key)));
         this.validKey$ = combineLatest([
             this.formGroup.valueChanges,
             this.currentModalType$,
@@ -3354,11 +3586,11 @@ class CaseManagementListColumnsComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementListColumnsComponent, deps: [{ token: i1$2.DocumentService }, { token: i2$2.ActivatedRoute }, { token: i3.TranslateService }, { token: i2.IconService }, { token: i2$1.EditPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseManagementListColumnsComponent, isStandalone: false, selector: "valtimo-case-management-list-columns", 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\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async,\n    params: params$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [loading]=\"obs.loadingCaseListColumns\"\n      [items]=\"obs?.caseListColumn || []\"\n      [fields]=\"fields\"\n      [viewMode]=\"false\"\n      [header]=\"false\"\n      (rowClicked)=\"columnRowClicked($event)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.columnsList\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n        [description]=\"'listColumn.noConfigWarning' | translate\"\n        illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateCaseListColumns(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.jsonEditor\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    *ngIf=\"obs.hasEditPermissions\"\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.loadingCaseListColumns || !(hasEditPermissions$ | async)\"\n    [attr.data-test-id]=\"testIds.addListColumn\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async,\n      showTagAmount: showTagAmount$ | async,\n      params: params$ | async,\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n    size=\"sm\"\n    (close)=\"closeModal()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\" [cdsLayer]=\"1\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.titleTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.titleTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.title\" />\n    </cds-label>\n\n    <cds-label\n      [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n      [invalid]=\"modalObs.validKey === false\"\n      [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n    >\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.key' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.keyTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"key\"\n        [invalid]=\"modalObs.validKey === false\"\n        [attr.data-test-id]=\"testIds.key\"\n      />\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.path' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.pathTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-value-path-selector\n        formControlName=\"path\"\n        [caseDefinitionKey]=\"modalObs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"modalObs.params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n        [attr.data-test-id]=\"testIds.valuePathSelector\"\n      ></valtimo-value-path-selector>\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.displayType' | translate }}\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [disabled]=\"modalObs.disableInput\"\n        (selected)=\"selectedDisplayType($event)\"\n        [attr.data-test-id]=\"testIds.displayType\"\n      >\n        <cds-dropdown-list [items]=\"(viewTypeItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showTagAmount\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.tagAmount' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.tagAmountTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-number\n        formControlName=\"tagAmount\"\n        [min]=\"1\"\n        [step]=\"1\"\n        [attr.data-test-id]=\"testIds.tagAmount\"\n      ></cds-number>\n    </cds-label>\n\n    <cds-label *ngIf=\"showDateFormat$ | async\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.dateFormat' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"dateFormat\" [attr.data-test-id]=\"testIds.dateFormat\" />\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showEnum || modalObs.isYesNo\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{\n          modalObs.isYesNo\n            ? ('listColumn.enumTitleOptional' | translate)\n            : ('listColumn.enumTitle' | translate)\n        }}\n\n        <v-tooltip-icon\n          [tooltip]=\"\n            modalObs.isYesNo\n              ? ('listColumn.enumTooltipOptional' | translate)\n              : ('listColumn.enumTooltip' | translate)\n          \"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-carbon-multi-input\n        *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n        type=\"keyValue\"\n        (valueChange)=\"enumValueChange($event)\"\n        [defaultValues]=\"defaultEnumValues$ | async\"\n        [hideAddButton]=\"modalObs.isYesNo\"\n        [hideDeleteButton]=\"modalObs.isYesNo\"\n        [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [attr.data-test-id]=\"testIds.multiInput\"\n      ></valtimo-carbon-multi-input>\n    </cds-label>\n\n    <cds-checkbox\n      *ngIf=\"displaySortable\"\n      formControlName=\"sortable\"\n      [disabled]=\"modalObs.showTagAmount || modalObs.disableInput\"\n      [attr.data-test-id]=\"testIds.sortableCheckbox\"\n      >{{ 'listColumn.sortable' | translate }}\n    </cds-checkbox>\n\n    <cds-label\n      *ngIf=\"displaySortable\"\n      [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n    >\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.defaultSortTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"defaultSort\"\n        [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n        [attr.data-test-id]=\"testIds.defaultSort\"\n      >\n        <cds-dropdown-list [items]=\"(sortItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n\n      <cds-inline-notification\n        *ngIf=\"modalObs.disableDefaultSort && !modalObs.disableInput && !modalObs.showTagAmount\"\n        class=\"default-sort-disabled-notice\"\n        [notificationObj]=\"{\n          type: 'info',\n          title: '',\n          message: ('listColumn.defaultSortDisabledNotice' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    </cds-label>\n\n    <cds-label *ngIf=\"displayExportButton\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.exportField' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.exportTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-toggle\n        formControlName=\"exportable\"\n        data-testid=\"export-selector-toggle\"\n        [onText]=\"'listColumn.sortableYes' | translate\"\n        [offText]=\"'listColumn.sortableNo' | translate\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [required]=\"false\"\n        [size]=\"'sm'\"\n        [attr.data-test-id]=\"testIds.exportable\"\n      ></cds-toggle>\n    </cds-label>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer [cdsLayer]=\"1\">\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCaseListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n        [attr.data-test-id]=\"testIds.saveButton\"\n      >\n        {{ (modalObs.type === 'create' ? 'interface.create' : 'listColumn.save') | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n    [attr.data-test-id]=\"testIds.confirmationModal\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      [attr.data-test-id]=\"testIds.switchView\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    (click)=\"onDownloadClick()\"\n    [disabled]=\"\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      obs.loadingCaseListColumns\n    \"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.default-sort-disabled-notice{display:block;margin-top:.5rem}::ng-deep .cds--label{width:100%}.label-with-tooltip{display:flex;align-items:center}.display-type-dropdown{width:300px}.list-column-form{display:flex;flex-direction:column;gap:16px;margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.case-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.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.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i7.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i7.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: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: i7.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i2.NumberComponent, selector: "cds-number, ibm-number", inputs: ["readonly", "theme", "disabled", "skeleton", "invalid", "id", "placeholder", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "ariaLabel", "decrementLabel", "incrementLabel", "fluid"], outputs: ["change"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseManagementListColumnsComponent, isStandalone: false, selector: "valtimo-case-management-list-columns", 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\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async,\n    params: params$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [loading]=\"obs.loadingCaseListColumns\"\n      [items]=\"obs?.caseListColumn || []\"\n      [fields]=\"fields\"\n      [viewMode]=\"false\"\n      [header]=\"false\"\n      (rowClicked)=\"columnRowClicked($event)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.columnsList\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n        [description]=\"'listColumn.noConfigWarning' | translate\"\n        illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateCaseListColumns(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.jsonEditor\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    *ngIf=\"obs.hasEditPermissions\"\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.loadingCaseListColumns || !(hasEditPermissions$ | async)\"\n    [attr.data-test-id]=\"testIds.addListColumn\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async,\n      showTagAmount: showTagAmount$ | async,\n      params: params$ | async,\n      columnTitle: columnTitle$ | async,\n      usedKeys: usedKeys$ | async,\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n    size=\"sm\"\n    (close)=\"closeModal()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\" [cdsLayer]=\"1\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.titleTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.titleTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.title\" />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      formControlName=\"key\"\n      labelTranslationKey=\"listColumn.key\"\n      [dataTestId]=\"testIds.key\"\n      [mode]=\"modalObs.type === 'edit' ? 'edit' : 'add'\"\n      [sourceText]=\"modalObs.columnTitle\"\n      [usedKeys]=\"modalObs.usedKeys\"\n    >\n      <v-tooltip-icon\n        [tooltip]=\"'listColumn.keyTooltip' | translate\"\n        [disabled]=\"modalObs.disableInput\"\n      ></v-tooltip-icon>\n    </valtimo-auto-key-input>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.path' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.pathTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-value-path-selector\n        formControlName=\"path\"\n        [caseDefinitionKey]=\"modalObs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"modalObs.params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n        [attr.data-test-id]=\"testIds.valuePathSelector\"\n      ></valtimo-value-path-selector>\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.displayType' | translate }}\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [disabled]=\"modalObs.disableInput\"\n        (selected)=\"selectedDisplayType($event)\"\n        [attr.data-test-id]=\"testIds.displayType\"\n      >\n        <cds-dropdown-list [items]=\"(viewTypeItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showTagAmount\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.tagAmount' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.tagAmountTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-number\n        formControlName=\"tagAmount\"\n        [min]=\"1\"\n        [step]=\"1\"\n        [attr.data-test-id]=\"testIds.tagAmount\"\n      ></cds-number>\n    </cds-label>\n\n    <cds-label *ngIf=\"showDateFormat$ | async\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.dateFormat' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"dateFormat\" [attr.data-test-id]=\"testIds.dateFormat\" />\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showEnum || modalObs.isYesNo\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{\n          modalObs.isYesNo\n            ? ('listColumn.enumTitleOptional' | translate)\n            : ('listColumn.enumTitle' | translate)\n        }}\n\n        <v-tooltip-icon\n          [tooltip]=\"\n            modalObs.isYesNo\n              ? ('listColumn.enumTooltipOptional' | translate)\n              : ('listColumn.enumTooltip' | translate)\n          \"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-carbon-multi-input\n        *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n        type=\"keyValue\"\n        (valueChange)=\"enumValueChange($event)\"\n        [defaultValues]=\"defaultEnumValues$ | async\"\n        [hideAddButton]=\"modalObs.isYesNo\"\n        [hideDeleteButton]=\"modalObs.isYesNo\"\n        [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [attr.data-test-id]=\"testIds.multiInput\"\n      ></valtimo-carbon-multi-input>\n    </cds-label>\n\n    <cds-checkbox\n      *ngIf=\"displaySortable\"\n      formControlName=\"sortable\"\n      [disabled]=\"modalObs.showTagAmount || modalObs.disableInput\"\n      [attr.data-test-id]=\"testIds.sortableCheckbox\"\n      >{{ 'listColumn.sortable' | translate }}\n    </cds-checkbox>\n\n    <cds-label\n      *ngIf=\"displaySortable\"\n      [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n    >\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.defaultSortTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"defaultSort\"\n        [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n        [attr.data-test-id]=\"testIds.defaultSort\"\n      >\n        <cds-dropdown-list [items]=\"(sortItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n\n      <cds-inline-notification\n        *ngIf=\"modalObs.disableDefaultSort && !modalObs.disableInput && !modalObs.showTagAmount\"\n        class=\"default-sort-disabled-notice\"\n        [notificationObj]=\"{\n          type: 'info',\n          title: '',\n          message: ('listColumn.defaultSortDisabledNotice' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    </cds-label>\n\n    <cds-label *ngIf=\"displayExportButton\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.exportField' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.exportTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-toggle\n        formControlName=\"exportable\"\n        data-testid=\"export-selector-toggle\"\n        [onText]=\"'listColumn.sortableYes' | translate\"\n        [offText]=\"'listColumn.sortableNo' | translate\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [required]=\"false\"\n        [size]=\"'sm'\"\n        [attr.data-test-id]=\"testIds.exportable\"\n      ></cds-toggle>\n    </cds-label>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer [cdsLayer]=\"1\">\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCaseListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n        [attr.data-test-id]=\"testIds.saveButton\"\n      >\n        {{ (modalObs.type === 'create' ? 'interface.create' : 'listColumn.save') | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n    [attr.data-test-id]=\"testIds.confirmationModal\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      [attr.data-test-id]=\"testIds.switchView\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    (click)=\"onDownloadClick()\"\n    [disabled]=\"\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      obs.loadingCaseListColumns\n    \"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.default-sort-disabled-notice{display:block;margin-top:.5rem}::ng-deep .cds--label{width:100%}.label-with-tooltip{display:flex;align-items:center}.display-type-dropdown{width:300px}.list-column-form{display:flex;flex-direction:column;gap:16px;margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.case-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.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.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i7.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["addRowText", "addButtonType", "addRowTranslationKey", "arbitraryAmountTitles", "arbitraryValueAmount", "defaultValues", "deleteButtonType", "deleteRowText", "deleteRowTranslationKey", "disabled", "dropdownColumnTitle", "dropdownItems", "dropdownWidth", "fullWidth", "hideAddButton", "hideDeleteButton", "initialAmountOfRows", "keyColumnTitle", "margin", "maxRows", "minimumAmountOfRows", "name", "required", "title", "titleTranslationKey", "tooltip", "type", "valueColumnTitle", "valuePathSelectorCaseDefinitionKey", "valuePathSelectorPrefixes", "valuePathSelectorShowCaseDefinitionSelector", "valuePathSelectorNotation", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i7.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: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "component", type: i2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: i7.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "excludePrefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i2.NumberComponent, selector: "cds-number, ibm-number", inputs: ["readonly", "theme", "disabled", "skeleton", "invalid", "id", "placeholder", "size", "required", "value", "min", "max", "label", "helperText", "invalidText", "step", "precision", "warn", "warnText", "ariaLabel", "decrementLabel", "incrementLabel", "fluid"], outputs: ["change"] }, { kind: "component", type: i7.JsonEditorComponent, selector: "valtimo-json-editor", inputs: ["disabled", "model", "editorOptions", "fitPage", "formatOnLoad", "heightPx", "heightStyle", "jsonSchema", "showEditButton", "widthPx"], outputs: ["changeEvent", "discardEvent", "keepEditingEvent", "saveEvent"] }, { kind: "component", type: i7.AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "dataTestId", "name", "disabled", "defaultValue", "margin", "mode", "usedKeys", "sourceText"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementListColumnsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-case-management-list-columns', 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\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async,\n    params: params$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [loading]=\"obs.loadingCaseListColumns\"\n      [items]=\"obs?.caseListColumn || []\"\n      [fields]=\"fields\"\n      [viewMode]=\"false\"\n      [header]=\"false\"\n      (rowClicked)=\"columnRowClicked($event)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.columnsList\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n        [description]=\"'listColumn.noConfigWarning' | translate\"\n        illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateCaseListColumns(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.jsonEditor\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    *ngIf=\"obs.hasEditPermissions\"\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.loadingCaseListColumns || !(hasEditPermissions$ | async)\"\n    [attr.data-test-id]=\"testIds.addListColumn\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async,\n      showTagAmount: showTagAmount$ | async,\n      params: params$ | async,\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n    size=\"sm\"\n    (close)=\"closeModal()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\" [cdsLayer]=\"1\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.titleTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.titleTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.title\" />\n    </cds-label>\n\n    <cds-label\n      [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n      [invalid]=\"modalObs.validKey === false\"\n      [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n    >\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.key' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.keyTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input\n        cdsText\n        formControlName=\"key\"\n        [invalid]=\"modalObs.validKey === false\"\n        [attr.data-test-id]=\"testIds.key\"\n      />\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.path' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.pathTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-value-path-selector\n        formControlName=\"path\"\n        [caseDefinitionKey]=\"modalObs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"modalObs.params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n        [attr.data-test-id]=\"testIds.valuePathSelector\"\n      ></valtimo-value-path-selector>\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.displayType' | translate }}\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [disabled]=\"modalObs.disableInput\"\n        (selected)=\"selectedDisplayType($event)\"\n        [attr.data-test-id]=\"testIds.displayType\"\n      >\n        <cds-dropdown-list [items]=\"(viewTypeItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showTagAmount\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.tagAmount' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.tagAmountTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-number\n        formControlName=\"tagAmount\"\n        [min]=\"1\"\n        [step]=\"1\"\n        [attr.data-test-id]=\"testIds.tagAmount\"\n      ></cds-number>\n    </cds-label>\n\n    <cds-label *ngIf=\"showDateFormat$ | async\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.dateFormat' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"dateFormat\" [attr.data-test-id]=\"testIds.dateFormat\" />\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showEnum || modalObs.isYesNo\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{\n          modalObs.isYesNo\n            ? ('listColumn.enumTitleOptional' | translate)\n            : ('listColumn.enumTitle' | translate)\n        }}\n\n        <v-tooltip-icon\n          [tooltip]=\"\n            modalObs.isYesNo\n              ? ('listColumn.enumTooltipOptional' | translate)\n              : ('listColumn.enumTooltip' | translate)\n          \"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-carbon-multi-input\n        *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n        type=\"keyValue\"\n        (valueChange)=\"enumValueChange($event)\"\n        [defaultValues]=\"defaultEnumValues$ | async\"\n        [hideAddButton]=\"modalObs.isYesNo\"\n        [hideDeleteButton]=\"modalObs.isYesNo\"\n        [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [attr.data-test-id]=\"testIds.multiInput\"\n      ></valtimo-carbon-multi-input>\n    </cds-label>\n\n    <cds-checkbox\n      *ngIf=\"displaySortable\"\n      formControlName=\"sortable\"\n      [disabled]=\"modalObs.showTagAmount || modalObs.disableInput\"\n      [attr.data-test-id]=\"testIds.sortableCheckbox\"\n      >{{ 'listColumn.sortable' | translate }}\n    </cds-checkbox>\n\n    <cds-label\n      *ngIf=\"displaySortable\"\n      [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n    >\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.defaultSortTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"defaultSort\"\n        [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n        [attr.data-test-id]=\"testIds.defaultSort\"\n      >\n        <cds-dropdown-list [items]=\"(sortItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n\n      <cds-inline-notification\n        *ngIf=\"modalObs.disableDefaultSort && !modalObs.disableInput && !modalObs.showTagAmount\"\n        class=\"default-sort-disabled-notice\"\n        [notificationObj]=\"{\n          type: 'info',\n          title: '',\n          message: ('listColumn.defaultSortDisabledNotice' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    </cds-label>\n\n    <cds-label *ngIf=\"displayExportButton\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.exportField' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.exportTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-toggle\n        formControlName=\"exportable\"\n        data-testid=\"export-selector-toggle\"\n        [onText]=\"'listColumn.sortableYes' | translate\"\n        [offText]=\"'listColumn.sortableNo' | translate\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [required]=\"false\"\n        [size]=\"'sm'\"\n        [attr.data-test-id]=\"testIds.exportable\"\n      ></cds-toggle>\n    </cds-label>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer [cdsLayer]=\"1\">\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCaseListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n        [attr.data-test-id]=\"testIds.saveButton\"\n      >\n        {{ (modalObs.type === 'create' ? 'interface.create' : 'listColumn.save') | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n    [attr.data-test-id]=\"testIds.confirmationModal\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      [attr.data-test-id]=\"testIds.switchView\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    (click)=\"onDownloadClick()\"\n    [disabled]=\"\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      obs.loadingCaseListColumns\n    \"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.default-sort-disabled-notice{display:block;margin-top:.5rem}::ng-deep .cds--label{width:100%}.label-with-tooltip{display:flex;align-items:center}.display-type-dropdown{width:300px}.list-column-form{display:flex;flex-direction:column;gap:16px;margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.case-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\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-case-management-list-columns', 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\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    disableInput: disableInput$ | async,\n    downloadName: downloadName$ | async,\n    downloadUrl: downloadUrl$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n    jsonEditorModel: jsonEditorModel$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async,\n    params: params$ | async,\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"content; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #content let-obs=\"obs\">\n  @if (!jsonEditorActive()) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [loading]=\"obs.loadingCaseListColumns\"\n      [items]=\"obs?.caseListColumn || []\"\n      [fields]=\"fields\"\n      [viewMode]=\"false\"\n      [header]=\"false\"\n      (rowClicked)=\"columnRowClicked($event)\"\n      [dragAndDrop]=\"true\"\n      [dragAndDropDisabled]=\"obs.disableInput\"\n      (itemsReordered)=\"onItemsReordered(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.columnsList\"\n    >\n      <ng-container\n        carbonToolbarContent\n        *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n      ></ng-container>\n\n      <valtimo-no-results\n        [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n        [description]=\"'listColumn.noConfigWarning' | translate\"\n        illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n      ></valtimo-no-results>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-json-editor\n      [model]=\"obs.jsonEditorModel\"\n      [fitPage]=\"true\"\n      [showEditButton]=\"obs.hasEditPermissions\"\n      (saveEvent)=\"updateCaseListColumns(obs.params.caseDefinitionKey, $event)\"\n      [attr.data-test-id]=\"testIds.jsonEditor\"\n    >\n      <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n      <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n    </valtimo-json-editor>\n  }\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <ng-container *ngTemplateOutlet=\"viewToggle\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"downloadButton; context: {obs: obs}\"></ng-container>\n\n  <button\n    *ngIf=\"obs.hasEditPermissions\"\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.loadingCaseListColumns || !(hasEditPermissions$ | async)\"\n    [attr.data-test-id]=\"testIds.addListColumn\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async,\n      showTagAmount: showTagAmount$ | async,\n      params: params$ | async,\n      columnTitle: columnTitle$ | async,\n      usedKeys: usedKeys$ | async,\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n    size=\"sm\"\n    (close)=\"closeModal()\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\" [cdsLayer]=\"1\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent [cdsLayer]=\"1\">\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.titleTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.titleTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"title\" [attr.data-test-id]=\"testIds.title\" />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      formControlName=\"key\"\n      labelTranslationKey=\"listColumn.key\"\n      [dataTestId]=\"testIds.key\"\n      [mode]=\"modalObs.type === 'edit' ? 'edit' : 'add'\"\n      [sourceText]=\"modalObs.columnTitle\"\n      [usedKeys]=\"modalObs.usedKeys\"\n    >\n      <v-tooltip-icon\n        [tooltip]=\"'listColumn.keyTooltip' | translate\"\n        [disabled]=\"modalObs.disableInput\"\n      ></v-tooltip-icon>\n    </valtimo-auto-key-input>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.path' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.pathTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-value-path-selector\n        formControlName=\"path\"\n        [caseDefinitionKey]=\"modalObs.params?.caseDefinitionKey\"\n        [caseDefinitionVersionTag]=\"modalObs.params?.caseDefinitionVersionTag\"\n        [excludePrefixes]=\"[ValuePathSelectorPrefix.TASK]\"\n        [attr.data-test-id]=\"testIds.valuePathSelector\"\n      ></valtimo-value-path-selector>\n    </cds-label>\n\n    <cds-label [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.displayType' | translate }}\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"displayType\"\n        [disabled]=\"modalObs.disableInput\"\n        (selected)=\"selectedDisplayType($event)\"\n        [attr.data-test-id]=\"testIds.displayType\"\n      >\n        <cds-dropdown-list [items]=\"(viewTypeItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showTagAmount\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.tagAmount' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.tagAmountTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-number\n        formControlName=\"tagAmount\"\n        [min]=\"1\"\n        [step]=\"1\"\n        [attr.data-test-id]=\"testIds.tagAmount\"\n      ></cds-number>\n    </cds-label>\n\n    <cds-label *ngIf=\"showDateFormat$ | async\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip\">\n        {{ 'listColumn.dateFormat' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <input cdsText formControlName=\"dateFormat\" [attr.data-test-id]=\"testIds.dateFormat\" />\n    </cds-label>\n\n    <cds-label *ngIf=\"modalObs.showEnum || modalObs.isYesNo\" [disabled]=\"modalObs.disableInput\">\n      <span class=\"label-with-tooltip select-label\">\n        {{\n          modalObs.isYesNo\n            ? ('listColumn.enumTitleOptional' | translate)\n            : ('listColumn.enumTitle' | translate)\n        }}\n\n        <v-tooltip-icon\n          [tooltip]=\"\n            modalObs.isYesNo\n              ? ('listColumn.enumTooltipOptional' | translate)\n              : ('listColumn.enumTooltip' | translate)\n          \"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <valtimo-carbon-multi-input\n        *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n        type=\"keyValue\"\n        (valueChange)=\"enumValueChange($event)\"\n        [defaultValues]=\"defaultEnumValues$ | async\"\n        [hideAddButton]=\"modalObs.isYesNo\"\n        [hideDeleteButton]=\"modalObs.isYesNo\"\n        [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [attr.data-test-id]=\"testIds.multiInput\"\n      ></valtimo-carbon-multi-input>\n    </cds-label>\n\n    <cds-checkbox\n      *ngIf=\"displaySortable\"\n      formControlName=\"sortable\"\n      [disabled]=\"modalObs.showTagAmount || modalObs.disableInput\"\n      [attr.data-test-id]=\"testIds.sortableCheckbox\"\n      >{{ 'listColumn.sortable' | translate }}\n    </cds-checkbox>\n\n    <cds-label\n      *ngIf=\"displaySortable\"\n      [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n    >\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.defaultSortTitle' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-dropdown\n        formControlName=\"defaultSort\"\n        [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort || modalObs.showTagAmount\"\n        [attr.data-test-id]=\"testIds.defaultSort\"\n      >\n        <cds-dropdown-list [items]=\"(sortItems$ | async) || []\"></cds-dropdown-list>\n      </cds-dropdown>\n\n      <cds-inline-notification\n        *ngIf=\"modalObs.disableDefaultSort && !modalObs.disableInput && !modalObs.showTagAmount\"\n        class=\"default-sort-disabled-notice\"\n        [notificationObj]=\"{\n          type: 'info',\n          title: '',\n          message: ('listColumn.defaultSortDisabledNotice' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    </cds-label>\n\n    <cds-label *ngIf=\"displayExportButton\">\n      <span class=\"label-with-tooltip select-label\">\n        {{ 'listColumn.exportField' | translate }}\n\n        <v-tooltip-icon\n          [tooltip]=\"'listColumn.exportTooltip' | translate\"\n          [disabled]=\"modalObs.disableInput\"\n        ></v-tooltip-icon>\n      </span>\n\n      <cds-toggle\n        formControlName=\"exportable\"\n        data-testid=\"export-selector-toggle\"\n        [onText]=\"'listColumn.sortableYes' | translate\"\n        [offText]=\"'listColumn.sortableNo' | translate\"\n        [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n        [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        [required]=\"false\"\n        [size]=\"'sm'\"\n        [attr.data-test-id]=\"testIds.exportable\"\n      ></cds-toggle>\n    </cds-label>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer [cdsLayer]=\"1\">\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCaseListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n        [attr.data-test-id]=\"testIds.saveButton\"\n      >\n        {{ (modalObs.type === 'create' ? 'interface.create' : 'listColumn.save') | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n    [attr.data-test-id]=\"testIds.confirmationModal\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #viewToggle>\n  <cds-tooltip [description]=\"'JSON editor'\">\n    <button\n      [cdsButton]=\"buttonTheme()\"\n      [attr.data-test-id]=\"testIds.switchView\"\n      iconOnly=\"true\"\n      (click)=\"switchView()\"\n    >\n      <svg cdsIcon=\"code\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n</ng-template>\n\n<ng-template #downloadButton let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    (click)=\"onDownloadClick()\"\n    [disabled]=\"\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      obs.loadingCaseListColumns\n    \"\n    [attr.data-test-id]=\"testIds.downloadButton\"\n  >\n    <svg cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.default-sort-disabled-notice{display:block;margin-top:.5rem}::ng-deep .cds--label{width:100%}.label-with-tooltip{display:flex;align-items:center}.display-type-dropdown{width:300px}.list-column-form{display:flex;flex-direction:column;gap:16px;margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.case-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\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: i1$2.DocumentService }, { type: i2$2.ActivatedRoute }, { type: i3.TranslateService }, { type: i2.IconService }, { type: i2$1.EditPermissionsService }] });
 
 /*
@@ -4266,7 +4498,12 @@ class CaseManagementDetailComponent {
         this.TabEnum = TabEnum;
         this._subscriptions = new Subscription();
         this._refreshConfigurationIssues$ = new BehaviorSubject(null);
-        this.hasPluginProcessLinkIssue$ = this.configurationIssueService.hasIssue$('plugin-process-link');
+        this.hasPluginProcessLinkIssue$ = this.configurationIssueService.hasAnyOfIssues$([
+            'plugin-process-link',
+            'external-plugin-process-link',
+            'external-plugin-task-form',
+            'external-plugin-case-tab',
+        ]);
         this._tabIssueCache = new Map();
         this.configurationIssues$ = combineLatest([
             this.caseDetailService.selectedCaseDefinitionKey$,
@@ -4487,17 +4724,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const EMBEDDED_ISSUE_TYPE = 'plugin-process-link';
+const EXTERNAL_ISSUE_TYPE = 'external-plugin-process-link';
+const EXTERNAL_TASK_FORM_ISSUE_TYPE = 'external-plugin-task-form';
+const EXTERNAL_CASE_TAB_ISSUE_TYPE = 'external-plugin-case-tab';
+const EXTERNAL_CASE_WIDGET_ISSUE_TYPE = 'external-plugin-case-widget';
 class CaseManagementMissingPluginConfigurationsComponent {
-    constructor(caseManagementService, configurationIssueService, globalNotificationService, iconService, pluginManagementService, pluginTranslationService, route, translateService) {
+    constructor(caseManagementService, configurationIssueService, externalPluginService, globalNotificationService, iconService, pluginManagementService, pluginTranslationService, route, translateService) {
         this.caseManagementService = caseManagementService;
         this.configurationIssueService = configurationIssueService;
+        this.externalPluginService = externalPluginService;
         this.globalNotificationService = globalNotificationService;
         this.iconService = iconService;
         this.pluginManagementService = pluginManagementService;
         this.pluginTranslationService = pluginTranslationService;
         this.route = route;
         this.translateService = translateService;
-        this.hasIssue$ = this.configurationIssueService.hasIssue$('plugin-process-link');
+        this.hasIssue$ = this.configurationIssueService.hasAnyOfIssues$([
+            EMBEDDED_ISSUE_TYPE,
+            EXTERNAL_ISSUE_TYPE,
+            EXTERNAL_TASK_FORM_ISSUE_TYPE,
+            EXTERNAL_CASE_TAB_ISSUE_TYPE,
+            EXTERNAL_CASE_WIDGET_ISSUE_TYPE,
+        ]);
         this.mappingRows$ = new BehaviorSubject([]);
         this.hasUnknownPluginConfigurations$ = new BehaviorSubject(false);
         this.visible$ = combineLatest([
@@ -4524,6 +4773,21 @@ class CaseManagementMissingPluginConfigurationsComponent {
     onMappingChange(index, selectedId) {
         this._selections.set(index, selectedId ? String(selectedId) : null);
     }
+    /**
+     * The actual definition version of the currently selected external configuration for the row at
+     * [index], `null` when the selection is an exact `pluginId@version` match, embedded, or the row
+     * has no selection yet (D3 non-blocking warning).
+     */
+    selectedConfigurationVersion(row, index) {
+        if (!row.mismatchedVersionsById || row.mismatchedVersionsById.size === 0) {
+            return null;
+        }
+        const selectedId = this._selections.get(index);
+        if (!selectedId) {
+            return null;
+        }
+        return row.mismatchedVersionsById.get(selectedId) ?? null;
+    }
     save() {
         const mappings = {};
         const rows = this.mappingRows$.value;
@@ -4570,68 +4834,131 @@ class CaseManagementMissingPluginConfigurationsComponent {
             this.mappingRows$.next([]);
             return;
         }
-        this.pluginManagementService
-            .getPluginDefinitions()
+        const embeddedDangling = knownKeyDangling.filter(d => (d.source ?? 'embedded') === 'embedded');
+        const externalDangling = knownKeyDangling.filter(d => d.source === 'external');
+        combineLatest([
+            this.loadEmbeddedRows(embeddedDangling),
+            this.loadExternalRows(externalDangling),
+        ])
             .pipe(take$1(1))
-            .subscribe(definitions => {
-            const installedKeys = new Set(definitions.map(d => d.key));
-            this.loadPluginConfigurations(knownKeyDangling, installedKeys);
+            .subscribe(([embeddedRows, externalRows]) => {
+            this._selections.clear();
+            this.mappingRows$.next([...embeddedRows, ...externalRows]);
         });
     }
+    loadEmbeddedRows(dangling) {
+        if (dangling.length === 0) {
+            return of([]);
+        }
+        return this.pluginManagementService.getPluginDefinitions().pipe(take$1(1), switchMap(definitions => {
+            const installedKeys = new Set(definitions.map(d => d.key));
+            return this.loadPluginConfigurations(dangling, installedKeys);
+        }));
+    }
     loadPluginConfigurations(dangling, installedKeys) {
         const uniqueKeys = [...new Set(dangling.map(d => d.pluginDefinitionKey).filter(Boolean))];
         const installableKeys = uniqueKeys.filter(k => installedKeys.has(k));
-        const configsByKey = new Map();
-        let remaining = installableKeys.length;
-        if (remaining === 0) {
-            this.buildRows(dangling, configsByKey, installedKeys);
-            return;
+        if (installableKeys.length === 0) {
+            return of(this.buildEmbeddedRows(dangling, new Map(), installedKeys));
         }
+        const configRequests = {};
         for (const key of installableKeys) {
-            this.pluginManagementService
+            configRequests[key] = this.pluginManagementService
                 .getPluginConfigurationsByPluginDefinitionKey(key)
-                .pipe(take$1(1))
-                .subscribe({
-                next: configs => {
-                    configsByKey.set(key, configs);
-                    remaining--;
-                    if (remaining === 0)
-                        this.buildRows(dangling, configsByKey, installedKeys);
-                },
-                error: () => {
-                    configsByKey.set(key, []);
-                    remaining--;
-                    if (remaining === 0)
-                        this.buildRows(dangling, configsByKey, installedKeys);
-                },
-            });
+                .pipe(take$1(1), catchError(() => of([])));
         }
+        return forkJoin(configRequests).pipe(take$1(1), map(results => {
+            const configsByKey = new Map(Object.entries(results));
+            return this.buildEmbeddedRows(dangling, configsByKey, installedKeys);
+        }));
     }
-    buildRows(dangling, configsByKey, installedKeys) {
-        this._selections.clear();
-        this.mappingRows$.next(dangling.map(d => {
+    buildEmbeddedRows(dangling, configsByKey, installedKeys) {
+        return dangling.map(d => {
             const key = d.pluginDefinitionKey;
             const isInstalled = key ? installedKeys.has(key) : false;
             const available = configsByKey.get(key) || [];
-            let status;
-            if (!isInstalled) {
-                status = 'not-installed';
-            }
-            else if (available.length === 0) {
-                status = 'no-configurations';
-            }
-            else {
-                status = 'available';
-            }
+            const status = this.determineStatus(isInstalled, available.length > 0);
             return {
                 pluginDefinitionKey: key,
                 pluginDefinitionTitle: this.getPluginTitle(key),
                 sourcePluginConfigurationIds: d.sourcePluginConfigurationIds,
                 selectItems: available.map(c => ({ id: c.id, text: c.title })),
                 status,
+                source: 'embedded',
+                pluginDefinitionVersion: null,
             };
+        });
+    }
+    loadExternalRows(dangling) {
+        if (dangling.length === 0) {
+            return of([]);
+        }
+        return combineLatest([
+            this.externalPluginService
+                .getConfigurations()
+                .pipe(catchError(() => of([]))),
+            this.externalPluginService
+                .getDefinitions()
+                .pipe(catchError(() => of([]))),
+        ]).pipe(take$1(1), map(([configurations, definitions]) => {
+            const definitionById = new Map(definitions.map(d => [d.id, d]));
+            const lang = this.translateService.currentLang;
+            return dangling.map(d => {
+                const matchingConfigurations = configurations.filter(configuration => {
+                    const definition = definitionById.get(configuration.definitionId);
+                    return definition?.pluginId === d.pluginDefinitionKey;
+                });
+                const isInstalled = [...definitionById.values()].some(def => def.pluginId === d.pluginDefinitionKey);
+                const status = this.determineStatus(isInstalled, matchingConfigurations.length > 0);
+                const mismatchedVersionsById = new Map();
+                const selectItems = matchingConfigurations.map(configuration => {
+                    const definition = definitionById.get(configuration.definitionId);
+                    if (definition && definition.version !== d.pluginDefinitionVersion) {
+                        mismatchedVersionsById.set(configuration.id, definition.version);
+                    }
+                    return {
+                        id: configuration.id,
+                        text: definition
+                            ? `${configuration.title} — ${getExternalPluginDisplayName(definition, lang)}`
+                            : configuration.title,
+                    };
+                });
+                return {
+                    pluginDefinitionKey: d.pluginDefinitionKey,
+                    pluginDefinitionTitle: this.getExternalPluginTitle(d, definitionById),
+                    sourcePluginConfigurationIds: d.sourcePluginConfigurationIds,
+                    selectItems,
+                    status,
+                    source: 'external',
+                    pluginDefinitionVersion: d.pluginDefinitionVersion ?? null,
+                    mismatchedVersionsById,
+                };
+            });
         }));
     }
+    getExternalPluginTitle(dangling, definitionById) {
+        if (!dangling.pluginDefinitionKey) {
+            return this.translateService.instant('caseManagement.missingPluginConfigurations.unknownPlugin');
+        }
+        const lang = this.translateService.currentLang;
+        const matchingDefinition = [...definitionById.values()].find(d => d.pluginId === dangling.pluginDefinitionKey &&
+            d.version === dangling.pluginDefinitionVersion);
+        if (matchingDefinition) {
+            return getExternalPluginDisplayName(matchingDefinition, lang);
+        }
+        return dangling.pluginDefinitionVersion
+            ? `${dangling.pluginDefinitionKey} (${dangling.pluginDefinitionVersion})`
+            : dangling.pluginDefinitionKey;
+    }
+    determineStatus(isInstalled, hasConfigurations) {
+        if (!isInstalled) {
+            return 'not-installed';
+        }
+        if (!hasConfigurations) {
+            return 'no-configurations';
+        }
+        return 'available';
+    }
     getPluginTitle(pluginDefinitionKey) {
         if (!pluginDefinitionKey) {
             return this.translateService.instant('caseManagement.missingPluginConfigurations.unknownPlugin');
@@ -4642,8 +4969,8 @@ class CaseManagementMissingPluginConfigurationsComponent {
         }
         return translated;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementMissingPluginConfigurationsComponent, deps: [{ token: CaseManagementService }, { token: i2$1.ConfigurationIssueService }, { token: i2$1.GlobalNotificationService }, { token: i2.IconService }, { token: i4.PluginManagementService }, { token: i4.PluginTranslationService }, { token: i2$2.ActivatedRoute }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseManagementMissingPluginConfigurationsComponent, isStandalone: true, selector: "valtimo-case-management-missing-plugin-configurations", 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@if (visible$ | async) {\n  <div class=\"missing-plugin-configurations\">\n    <h4 class=\"missing-plugin-configurations__title\">\n      {{ 'caseManagement.missingPluginConfigurations.title' | translate }}\n    </h4>\n    <p class=\"missing-plugin-configurations__description\">\n      {{ 'caseManagement.missingPluginConfigurations.description' | translate }}\n    </p>\n\n    @if (hasUnknownPluginConfigurations$ | async) {\n      <cds-inline-notification\n        [notificationObj]=\"{\n          type: 'warning',\n          title: ('caseManagement.missingPluginConfigurations.legacyExport.title' | translate),\n          message: ('caseManagement.missingPluginConfigurations.legacyExport.message' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    }\n\n    @if (visibleRows$ | async; as rows) {\n      <div class=\"missing-plugin-configurations__rows\">\n        @for (row of rows; track row.pluginDefinitionKey; let i = $index) {\n          <div class=\"missing-plugin-configurations__row\" [cdsLayer]=\"1\">\n            <div class=\"missing-plugin-configurations__source\">\n              {{ row.pluginDefinitionTitle }}\n            </div>\n            <svg cdsIcon=\"arrow--right\" size=\"16\" class=\"missing-plugin-configurations__arrow\"></svg>\n            @if (row.status === 'available') {\n              <div class=\"missing-plugin-configurations__dropdown\" [cdsLayer]=\"2\">\n                <v-select\n                  [items]=\"row.selectItems\"\n                  [placeholder]=\"'caseManagement.missingPluginConfigurations.selectPlaceholder' | translate\"\n                  (selectedChange)=\"onMappingChange(i, $event)\"\n                ></v-select>\n              </div>\n            } @else if (row.status === 'not-installed') {\n              <div class=\"missing-plugin-configurations__unavailable missing-plugin-configurations__unavailable--error\">\n                {{ 'caseManagement.missingPluginConfigurations.notInstalled' | translate }}\n              </div>\n            } @else if (row.status === 'no-configurations') {\n              <div class=\"missing-plugin-configurations__unavailable\">\n                {{ 'caseManagement.missingPluginConfigurations.noConfigurations' | translate }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"missing-plugin-configurations__actions\">\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"saving$ | async\"\n          (click)=\"save()\"\n        >\n          {{ 'interface.save' | translate }}\n          <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".missing-plugin-configurations{background-color:var(--cds-layer);outline:2px solid var(--cds-support-error, #da1e28);padding:24px;margin-bottom:16px;display:flex;flex-direction:column;gap:1rem}.missing-plugin-configurations__title{font-size:.875rem;font-weight:600;color:var(--cds-text-primary);margin:0}.missing-plugin-configurations__description{font-size:.875rem;color:var(--cds-text-secondary);margin:.25rem 0 0}.missing-plugin-configurations__rows{display:flex;flex-direction:column;gap:.5rem}.missing-plugin-configurations__row{display:grid;grid-template-columns:1fr 24px 1fr;gap:.5rem;align-items:center;padding:12px;background-color:var(--cds-layer)}.missing-plugin-configurations__source{font-size:.875rem;font-weight:400;padding:0 1rem;height:2.5rem;display:flex;align-items:center}.missing-plugin-configurations__arrow{fill:var(--cds-text-secondary);justify-self:center}.missing-plugin-configurations__dropdown{width:100%}.missing-plugin-configurations__unavailable{font-size:.875rem;color:var(--cds-text-disabled);padding:0 1rem;height:2.5rem;display:flex;align-items:center;background-color:var(--cds-field)}.missing-plugin-configurations__unavailable--error{color:var(--cds-text-error)}.missing-plugin-configurations__actions{display:flex;justify-content:flex-end}\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: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i7.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementMissingPluginConfigurationsComponent, deps: [{ token: CaseManagementService }, { token: i2$1.ConfigurationIssueService }, { token: i3$1.ExternalPluginService }, { token: i2$1.GlobalNotificationService }, { token: i2.IconService }, { token: i3$1.PluginManagementService }, { token: i3$1.PluginTranslationService }, { token: i2$2.ActivatedRoute }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseManagementMissingPluginConfigurationsComponent, isStandalone: true, selector: "valtimo-case-management-missing-plugin-configurations", 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@if (visible$ | async) {\n  <div class=\"missing-plugin-configurations\">\n    <h4 class=\"missing-plugin-configurations__title\">\n      {{ 'caseManagement.missingPluginConfigurations.title' | translate }}\n    </h4>\n    <p class=\"missing-plugin-configurations__description\">\n      {{ 'caseManagement.missingPluginConfigurations.description' | translate }}\n    </p>\n\n    @if (hasUnknownPluginConfigurations$ | async) {\n      <cds-inline-notification\n        [notificationObj]=\"{\n          type: 'warning',\n          title: ('caseManagement.missingPluginConfigurations.legacyExport.title' | translate),\n          message: ('caseManagement.missingPluginConfigurations.legacyExport.message' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    }\n\n    @if (visibleRows$ | async; as rows) {\n      <div class=\"missing-plugin-configurations__rows\">\n        @for (row of rows; track row.pluginDefinitionKey; let i = $index) {\n          <div class=\"missing-plugin-configurations__row\" [cdsLayer]=\"1\">\n            <div class=\"missing-plugin-configurations__source\">\n              {{ row.pluginDefinitionTitle }}\n            </div>\n            <svg cdsIcon=\"arrow--right\" size=\"16\" class=\"missing-plugin-configurations__arrow\"></svg>\n            @if (row.status === 'available') {\n              <div class=\"missing-plugin-configurations__target\">\n                <div class=\"missing-plugin-configurations__dropdown\" [cdsLayer]=\"2\">\n                  <v-select\n                    [items]=\"row.selectItems\"\n                    [placeholder]=\"'caseManagement.missingPluginConfigurations.selectPlaceholder' | translate\"\n                    (selectedChange)=\"onMappingChange(i, $event)\"\n                  ></v-select>\n                </div>\n\n                @if (selectedConfigurationVersion(row, i); as mismatchedVersion) {\n                  <div class=\"missing-plugin-configurations__version-warning\">\n                    {{\n                      'caseManagement.missingPluginConfigurations.externalVersionMismatchWarning'\n                        | translate\n                          : {\n                              selectedVersion: mismatchedVersion,\n                              requiredVersion: row.pluginDefinitionVersion\n                            }\n                    }}\n                  </div>\n                }\n              </div>\n            } @else if (row.status === 'not-installed') {\n              <div class=\"missing-plugin-configurations__unavailable missing-plugin-configurations__unavailable--error\">\n                {{ 'caseManagement.missingPluginConfigurations.notInstalled' | translate }}\n              </div>\n            } @else if (row.status === 'no-configurations') {\n              <div class=\"missing-plugin-configurations__unavailable\">\n                {{ 'caseManagement.missingPluginConfigurations.noConfigurations' | translate }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"missing-plugin-configurations__actions\">\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"saving$ | async\"\n          (click)=\"save()\"\n        >\n          {{ 'interface.save' | translate }}\n          <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".missing-plugin-configurations{background-color:var(--cds-layer);outline:2px solid var(--cds-support-error, #da1e28);padding:24px;margin-bottom:16px;display:flex;flex-direction:column;gap:1rem}.missing-plugin-configurations__title{font-size:.875rem;font-weight:600;color:var(--cds-text-primary);margin:0}.missing-plugin-configurations__description{font-size:.875rem;color:var(--cds-text-secondary);margin:.25rem 0 0}.missing-plugin-configurations__rows{display:flex;flex-direction:column;gap:.5rem}.missing-plugin-configurations__row{display:grid;grid-template-columns:1fr 24px 1fr;gap:.5rem;align-items:center;padding:12px;background-color:var(--cds-layer)}.missing-plugin-configurations__source{font-size:.875rem;font-weight:400;padding:0 1rem;height:2.5rem;display:flex;align-items:center}.missing-plugin-configurations__arrow{fill:var(--cds-text-secondary);justify-self:center}.missing-plugin-configurations__dropdown{width:100%}.missing-plugin-configurations__target{display:flex;flex-direction:column;gap:var(--cds-spacing-02)}.missing-plugin-configurations__version-warning{font-size:.75rem;color:var(--cds-support-warning);padding:0 1rem}.missing-plugin-configurations__unavailable{font-size:.875rem;color:var(--cds-text-disabled);padding:0 1rem;height:2.5rem;display:flex;align-items:center;background-color:var(--cds-field)}.missing-plugin-configurations__unavailable--error{color:var(--cds-text-error)}.missing-plugin-configurations__actions{display:flex;justify-content:flex-end}\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: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i7.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementMissingPluginConfigurationsComponent, decorators: [{
             type: Component,
@@ -4655,8 +4982,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         LayerModule,
                         NotificationModule,
                         SelectModule,
-                    ], 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@if (visible$ | async) {\n  <div class=\"missing-plugin-configurations\">\n    <h4 class=\"missing-plugin-configurations__title\">\n      {{ 'caseManagement.missingPluginConfigurations.title' | translate }}\n    </h4>\n    <p class=\"missing-plugin-configurations__description\">\n      {{ 'caseManagement.missingPluginConfigurations.description' | translate }}\n    </p>\n\n    @if (hasUnknownPluginConfigurations$ | async) {\n      <cds-inline-notification\n        [notificationObj]=\"{\n          type: 'warning',\n          title: ('caseManagement.missingPluginConfigurations.legacyExport.title' | translate),\n          message: ('caseManagement.missingPluginConfigurations.legacyExport.message' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    }\n\n    @if (visibleRows$ | async; as rows) {\n      <div class=\"missing-plugin-configurations__rows\">\n        @for (row of rows; track row.pluginDefinitionKey; let i = $index) {\n          <div class=\"missing-plugin-configurations__row\" [cdsLayer]=\"1\">\n            <div class=\"missing-plugin-configurations__source\">\n              {{ row.pluginDefinitionTitle }}\n            </div>\n            <svg cdsIcon=\"arrow--right\" size=\"16\" class=\"missing-plugin-configurations__arrow\"></svg>\n            @if (row.status === 'available') {\n              <div class=\"missing-plugin-configurations__dropdown\" [cdsLayer]=\"2\">\n                <v-select\n                  [items]=\"row.selectItems\"\n                  [placeholder]=\"'caseManagement.missingPluginConfigurations.selectPlaceholder' | translate\"\n                  (selectedChange)=\"onMappingChange(i, $event)\"\n                ></v-select>\n              </div>\n            } @else if (row.status === 'not-installed') {\n              <div class=\"missing-plugin-configurations__unavailable missing-plugin-configurations__unavailable--error\">\n                {{ 'caseManagement.missingPluginConfigurations.notInstalled' | translate }}\n              </div>\n            } @else if (row.status === 'no-configurations') {\n              <div class=\"missing-plugin-configurations__unavailable\">\n                {{ 'caseManagement.missingPluginConfigurations.noConfigurations' | translate }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"missing-plugin-configurations__actions\">\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"saving$ | async\"\n          (click)=\"save()\"\n        >\n          {{ 'interface.save' | translate }}\n          <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".missing-plugin-configurations{background-color:var(--cds-layer);outline:2px solid var(--cds-support-error, #da1e28);padding:24px;margin-bottom:16px;display:flex;flex-direction:column;gap:1rem}.missing-plugin-configurations__title{font-size:.875rem;font-weight:600;color:var(--cds-text-primary);margin:0}.missing-plugin-configurations__description{font-size:.875rem;color:var(--cds-text-secondary);margin:.25rem 0 0}.missing-plugin-configurations__rows{display:flex;flex-direction:column;gap:.5rem}.missing-plugin-configurations__row{display:grid;grid-template-columns:1fr 24px 1fr;gap:.5rem;align-items:center;padding:12px;background-color:var(--cds-layer)}.missing-plugin-configurations__source{font-size:.875rem;font-weight:400;padding:0 1rem;height:2.5rem;display:flex;align-items:center}.missing-plugin-configurations__arrow{fill:var(--cds-text-secondary);justify-self:center}.missing-plugin-configurations__dropdown{width:100%}.missing-plugin-configurations__unavailable{font-size:.875rem;color:var(--cds-text-disabled);padding:0 1rem;height:2.5rem;display:flex;align-items:center;background-color:var(--cds-field)}.missing-plugin-configurations__unavailable--error{color:var(--cds-text-error)}.missing-plugin-configurations__actions{display:flex;justify-content:flex-end}\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: CaseManagementService }, { type: i2$1.ConfigurationIssueService }, { type: i2$1.GlobalNotificationService }, { type: i2.IconService }, { type: i4.PluginManagementService }, { type: i4.PluginTranslationService }, { type: i2$2.ActivatedRoute }, { type: i3.TranslateService }] });
+                    ], 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@if (visible$ | async) {\n  <div class=\"missing-plugin-configurations\">\n    <h4 class=\"missing-plugin-configurations__title\">\n      {{ 'caseManagement.missingPluginConfigurations.title' | translate }}\n    </h4>\n    <p class=\"missing-plugin-configurations__description\">\n      {{ 'caseManagement.missingPluginConfigurations.description' | translate }}\n    </p>\n\n    @if (hasUnknownPluginConfigurations$ | async) {\n      <cds-inline-notification\n        [notificationObj]=\"{\n          type: 'warning',\n          title: ('caseManagement.missingPluginConfigurations.legacyExport.title' | translate),\n          message: ('caseManagement.missingPluginConfigurations.legacyExport.message' | translate),\n          showClose: false,\n          lowContrast: true\n        }\"\n      ></cds-inline-notification>\n    }\n\n    @if (visibleRows$ | async; as rows) {\n      <div class=\"missing-plugin-configurations__rows\">\n        @for (row of rows; track row.pluginDefinitionKey; let i = $index) {\n          <div class=\"missing-plugin-configurations__row\" [cdsLayer]=\"1\">\n            <div class=\"missing-plugin-configurations__source\">\n              {{ row.pluginDefinitionTitle }}\n            </div>\n            <svg cdsIcon=\"arrow--right\" size=\"16\" class=\"missing-plugin-configurations__arrow\"></svg>\n            @if (row.status === 'available') {\n              <div class=\"missing-plugin-configurations__target\">\n                <div class=\"missing-plugin-configurations__dropdown\" [cdsLayer]=\"2\">\n                  <v-select\n                    [items]=\"row.selectItems\"\n                    [placeholder]=\"'caseManagement.missingPluginConfigurations.selectPlaceholder' | translate\"\n                    (selectedChange)=\"onMappingChange(i, $event)\"\n                  ></v-select>\n                </div>\n\n                @if (selectedConfigurationVersion(row, i); as mismatchedVersion) {\n                  <div class=\"missing-plugin-configurations__version-warning\">\n                    {{\n                      'caseManagement.missingPluginConfigurations.externalVersionMismatchWarning'\n                        | translate\n                          : {\n                              selectedVersion: mismatchedVersion,\n                              requiredVersion: row.pluginDefinitionVersion\n                            }\n                    }}\n                  </div>\n                }\n              </div>\n            } @else if (row.status === 'not-installed') {\n              <div class=\"missing-plugin-configurations__unavailable missing-plugin-configurations__unavailable--error\">\n                {{ 'caseManagement.missingPluginConfigurations.notInstalled' | translate }}\n              </div>\n            } @else if (row.status === 'no-configurations') {\n              <div class=\"missing-plugin-configurations__unavailable\">\n                {{ 'caseManagement.missingPluginConfigurations.noConfigurations' | translate }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"missing-plugin-configurations__actions\">\n        <button\n          cdsButton=\"primary\"\n          [disabled]=\"saving$ | async\"\n          (click)=\"save()\"\n        >\n          {{ 'interface.save' | translate }}\n          <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".missing-plugin-configurations{background-color:var(--cds-layer);outline:2px solid var(--cds-support-error, #da1e28);padding:24px;margin-bottom:16px;display:flex;flex-direction:column;gap:1rem}.missing-plugin-configurations__title{font-size:.875rem;font-weight:600;color:var(--cds-text-primary);margin:0}.missing-plugin-configurations__description{font-size:.875rem;color:var(--cds-text-secondary);margin:.25rem 0 0}.missing-plugin-configurations__rows{display:flex;flex-direction:column;gap:.5rem}.missing-plugin-configurations__row{display:grid;grid-template-columns:1fr 24px 1fr;gap:.5rem;align-items:center;padding:12px;background-color:var(--cds-layer)}.missing-plugin-configurations__source{font-size:.875rem;font-weight:400;padding:0 1rem;height:2.5rem;display:flex;align-items:center}.missing-plugin-configurations__arrow{fill:var(--cds-text-secondary);justify-self:center}.missing-plugin-configurations__dropdown{width:100%}.missing-plugin-configurations__target{display:flex;flex-direction:column;gap:var(--cds-spacing-02)}.missing-plugin-configurations__version-warning{font-size:.75rem;color:var(--cds-support-warning);padding:0 1rem}.missing-plugin-configurations__unavailable{font-size:.875rem;color:var(--cds-text-disabled);padding:0 1rem;height:2.5rem;display:flex;align-items:center;background-color:var(--cds-field)}.missing-plugin-configurations__unavailable--error{color:var(--cds-text-error)}.missing-plugin-configurations__actions{display:flex;justify-content:flex-end}\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: CaseManagementService }, { type: i2$1.ConfigurationIssueService }, { type: i3$1.ExternalPluginService }, { type: i2$1.GlobalNotificationService }, { type: i2.IconService }, { type: i3$1.PluginManagementService }, { type: i3$1.PluginTranslationService }, { type: i2$2.ActivatedRoute }, { type: i3.TranslateService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -5065,7 +5392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * limitations under the License.
  */
 class CaseManagementWidgetTabComponent extends ManagementWidgetDetailsComponent {
-    constructor(widgetWizardService, breadcrumbService, iconService, pageTitleService, route, tabManagementService, caseWidgetManagementApiService, translateService, pageHeaderService) {
+    constructor(widgetWizardService, breadcrumbService, iconService, pageTitleService, route, tabManagementService, tabService, caseWidgetManagementApiService, translateService, pageHeaderService) {
         super(widgetWizardService);
         this.widgetWizardService = widgetWizardService;
         this.breadcrumbService = breadcrumbService;
@@ -5073,6 +5400,7 @@ class CaseManagementWidgetTabComponent extends ManagementWidgetDetailsComponent
         this.pageTitleService = pageTitleService;
         this.route = route;
         this.tabManagementService = tabManagementService;
+        this.tabService = tabService;
         this.caseWidgetManagementApiService = caseWidgetManagementApiService;
         this.translateService = translateService;
         this.pageHeaderService = pageHeaderService;
@@ -5111,7 +5439,7 @@ class CaseManagementWidgetTabComponent extends ManagementWidgetDetailsComponent
             this._refreshWidgetTabSubject$,
         ]).pipe(filter(([params]) => !!params), switchMap(() => this.caseWidgetManagementApiService.getWidgetConfiguration()));
         this.compactMode$ = this.pageHeaderService.compactMode$;
-        this.AVAILABLE_WIDGET_TYPES = [
+        this._baseWidgetTypes = [
             WidgetType.FIELDS,
             WidgetType.COLLECTION,
             WidgetType.CUSTOM,
@@ -5124,6 +5452,16 @@ class CaseManagementWidgetTabComponent extends ManagementWidgetDetailsComponent
             WidgetType.IMAGE,
             WidgetType.TEXT,
         ];
+        /**
+         * The selectable widget types. `external-plugin` is only offered when at least one activated
+         * plugin configuration exposes a `case-widget` bundle. Emits the base list synchronously (never
+         * `null`) so the wizard never shows the type before the availability check resolves.
+         */
+        this.availableWidgetTypes$ = this.tabService
+            .getExternalPluginWidgetConfigs()
+            .pipe(map(configs => configs.length > 0
+            ? [...this._baseWidgetTypes, WidgetType.EXTERNAL_PLUGIN]
+            : this._baseWidgetTypes), catchError(() => of(this._baseWidgetTypes)), startWith(this._baseWidgetTypes));
     }
     ngOnInit() {
         this.setContext('case');
@@ -5148,7 +5486,10 @@ class CaseManagementWidgetTabComponent extends ManagementWidgetDetailsComponent
         this._refreshWidgetTabSubject$.next(null);
     }
     initBreadcrumbs() {
-        this.caseManagementRouteParams$.subscribe(params => {
+        combineLatest([
+            this.caseManagementRouteParams$,
+            this.translateService.stream('caseManagement.tabs.caseDetailsTab.title'),
+        ]).subscribe(([params, caseDetailsTitle]) => {
             const route = `/case-management/case/${params.caseDefinitionKey}/version/${params.caseDefinitionVersionTag}`;
             this.breadcrumbService.setThirdBreadcrumb({
                 route: [route],
@@ -5157,18 +5498,25 @@ class CaseManagementWidgetTabComponent extends ManagementWidgetDetailsComponent
             });
             this.breadcrumbService.setFourthBreadcrumb({
                 route: [`${route}/case-details`],
-                content: this.translateService.instant('caseManagement.tabs.caseDetailsTab.title'),
+                content: caseDetailsTitle,
                 href: `${route}/case-details`,
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementWidgetTabComponent, deps: [{ token: i1$1.WidgetWizardService }, { token: i7.BreadcrumbService }, { token: i2.IconService }, { token: i7.PageTitleService }, { token: i2$2.ActivatedRoute }, { token: TabManagementService }, { token: WIDGET_MANAGEMENT_SERVICE }, { token: i3.TranslateService }, { token: i7.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementWidgetTabComponent, deps: [{ token: i1$1.WidgetWizardService }, { token: i7.BreadcrumbService }, { token: i2.IconService }, { token: i7.PageTitleService }, { token: i2$2.ActivatedRoute }, { token: TabManagementService }, { token: TabService }, { token: WIDGET_MANAGEMENT_SERVICE }, { token: i3.TranslateService }, { token: i7.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementWidgetTabComponent, isStandalone: true, selector: "ng-component", providers: [
             {
                 provide: WIDGET_MANAGEMENT_SERVICE,
                 useClass: CaseWidgetManagementApiService,
             },
-        ], 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<valtimo-widget-management\n  [availableWidgetTypes]=\"AVAILABLE_WIDGET_TYPES\"\n  [params]=\"params$ | async\"\n></valtimo-widget-management>\n\n<valtimo-case-management-widget-tab-edit-modal\n  [tabItem]=\"currentWidgetTabItem$ | async\"\n  [showModal$]=\"showEditWidgetTabModal$\"\n  (saveEvent)=\"refreshWidgetTab()\"\n>\n</valtimo-case-management-widget-tab-edit-modal>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <button\n      cdsButton=\"tertiary\"\n      [size]=\"(compactMode$ | async) ? 'sm' : 'md'\"\n      (click)=\"editWidgetTab()\"\n    >\n      {{ 'widgetTabManagement.tab.editButton' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: CaseManagementWidgetTabEditModalComponent, selector: "valtimo-case-management-widget-tab-edit-modal", inputs: ["showModal$", "tabItem"], outputs: ["saveEvent"] }, { kind: "directive", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: WidgetManagementComponent, selector: "valtimo-widget-management", inputs: ["params", "availableWidgetTypes", "disableDuplicate", "enableWidgetDivider", "singleWidget", "disableJsonEditor", "defaultWidth", "widgetWizardSteps"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            {
+                provide: EXTERNAL_PLUGIN_WIDGET_CONFIG_TOKEN,
+                useFactory: (tabService) => ({
+                    getConfigOptions: () => tabService.getExternalPluginWidgetConfigs(),
+                }),
+                deps: [TabService],
+            },
+        ], 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<valtimo-widget-management\n  [availableWidgetTypes]=\"availableWidgetTypes$ | async\"\n  [params]=\"params$ | async\"\n></valtimo-widget-management>\n\n<valtimo-case-management-widget-tab-edit-modal\n  [tabItem]=\"currentWidgetTabItem$ | async\"\n  [showModal$]=\"showEditWidgetTabModal$\"\n  (saveEvent)=\"refreshWidgetTab()\"\n>\n</valtimo-case-management-widget-tab-edit-modal>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <button\n      cdsButton=\"tertiary\"\n      [size]=\"(compactMode$ | async) ? 'sm' : 'md'\"\n      (click)=\"editWidgetTab()\"\n    >\n      {{ 'widgetTabManagement.tab.editButton' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: CaseManagementWidgetTabEditModalComponent, selector: "valtimo-case-management-widget-tab-edit-modal", inputs: ["showModal$", "tabItem"], outputs: ["saveEvent"] }, { kind: "directive", type: RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: WidgetManagementComponent, selector: "valtimo-widget-management", inputs: ["params", "availableWidgetTypes", "disableDuplicate", "enableWidgetDivider", "singleWidget", "disableJsonEditor", "defaultWidth", "widgetWizardSteps"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementWidgetTabComponent, decorators: [{
             type: Component,
@@ -5186,8 +5534,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                             provide: WIDGET_MANAGEMENT_SERVICE,
                             useClass: CaseWidgetManagementApiService,
                         },
-                    ], 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-widget-management\n  [availableWidgetTypes]=\"AVAILABLE_WIDGET_TYPES\"\n  [params]=\"params$ | async\"\n></valtimo-widget-management>\n\n<valtimo-case-management-widget-tab-edit-modal\n  [tabItem]=\"currentWidgetTabItem$ | async\"\n  [showModal$]=\"showEditWidgetTabModal$\"\n  (saveEvent)=\"refreshWidgetTab()\"\n>\n</valtimo-case-management-widget-tab-edit-modal>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <button\n      cdsButton=\"tertiary\"\n      [size]=\"(compactMode$ | async) ? 'sm' : 'md'\"\n      (click)=\"editWidgetTab()\"\n    >\n      {{ 'widgetTabManagement.tab.editButton' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.WidgetWizardService }, { type: i7.BreadcrumbService }, { type: i2.IconService }, { type: i7.PageTitleService }, { type: i2$2.ActivatedRoute }, { type: TabManagementService }, { type: undefined, decorators: [{
+                        {
+                            provide: EXTERNAL_PLUGIN_WIDGET_CONFIG_TOKEN,
+                            useFactory: (tabService) => ({
+                                getConfigOptions: () => tabService.getExternalPluginWidgetConfigs(),
+                            }),
+                            deps: [TabService],
+                        },
+                    ], 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-widget-management\n  [availableWidgetTypes]=\"availableWidgetTypes$ | async\"\n  [params]=\"params$ | async\"\n></valtimo-widget-management>\n\n<valtimo-case-management-widget-tab-edit-modal\n  [tabItem]=\"currentWidgetTabItem$ | async\"\n  [showModal$]=\"showEditWidgetTabModal$\"\n  (saveEvent)=\"refreshWidgetTab()\"\n>\n</valtimo-case-management-widget-tab-edit-modal>\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <button\n      cdsButton=\"tertiary\"\n      [size]=\"(compactMode$ | async) ? 'sm' : 'md'\"\n      (click)=\"editWidgetTab()\"\n    >\n      {{ 'widgetTabManagement.tab.editButton' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.WidgetWizardService }, { type: i7.BreadcrumbService }, { type: i2.IconService }, { type: i7.PageTitleService }, { type: i2$2.ActivatedRoute }, { type: TabManagementService }, { type: TabService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
                 }] }, { type: i3.TranslateService }, { type: i7.PageHeaderService }] });
@@ -5444,7 +5799,7 @@ class CaseManagementActionsModalComponent {
             this._editingItem = null;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementActionsModalComponent, deps: [{ token: StartableItemManagementService }, { token: i4$1.ProcessLinkBuildingBlockApiService }, { token: i1$4.FormBuilder }, { token: i3.TranslateService }, { token: i2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementActionsModalComponent, deps: [{ token: StartableItemManagementService }, { token: i4.ProcessLinkBuildingBlockApiService }, { token: i1$4.FormBuilder }, { token: i3.TranslateService }, { token: i2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementActionsModalComponent, isStandalone: true, selector: "valtimo-case-management-actions-modal", outputs: { configureBuildingBlockEvent: "configureBuildingBlockEvent" }, 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<cds-modal\n  *ngIf=\"{showModal: showModal$ | async, editingItem: editingItem$ | async} as obs\"\n  [open]=\"obs.showModal\"\n  showFooter=\"true\"\n  valtimoCdsModal\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>{{ modalTitle }}</h3>\n\n    <p cdsModalHeaderDescription>{{ modalDescription }}</p>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\">\n    <ng-container *ngIf=\"$step() === 'selectType'\">\n      <div class=\"action-type-tiles\">\n        <button\n          class=\"action-type-tile\"\n          [disabled]=\"$processItemsEmpty()\"\n          [vTooltip]=\"'caseManagement.actions.modal.noProcessesAvailable' | translate\"\n          [tooltipDisabled]=\"!$processItemsEmpty()\"\n          (click)=\"onSelectType(StartableItemType.PROCESS)\"\n        >\n          <span class=\"action-type-tile__label\">\n            {{ 'caseManagement.actions.type.PROCESS' | translate }}\n          </span>\n          <svg cdsIcon=\"flow--modeler\" size=\"20\" class=\"action-type-tile__icon\"></svg>\n        </button>\n\n        <button\n          class=\"action-type-tile\"\n          [disabled]=\"$buildingBlockItemsEmpty()\"\n          [vTooltip]=\"'caseManagement.actions.modal.noBuildingBlocksAvailable' | translate\"\n          [tooltipDisabled]=\"!$buildingBlockItemsEmpty()\"\n          (click)=\"onSelectType(StartableItemType.BUILDING_BLOCK)\"\n        >\n          <span class=\"action-type-tile__label\">\n            {{ 'caseManagement.actions.type.BUILDING_BLOCK' | translate }}\n          </span>\n          <svg cdsIcon=\"block-storage--alt\" size=\"20\" class=\"action-type-tile__icon\"></svg>\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"$step() === 'selectItem'\">\n      <form [formGroup]=\"formGroup\">\n        <ng-container *ngIf=\"$selectedType() === StartableItemType.PROCESS\">\n          <cds-combo-box\n            [items]=\"(availableProcessItems$ | async) || []\"\n            [label]=\"'caseManagement.actions.modal.selectProcess' | translate\"\n            [placeholder]=\"'caseManagement.actions.modal.filterPlaceholder' | translate\"\n            [appendInline]=\"false\"\n            [dropUp]=\"false\"\n            (selected)=\"onComboBoxSelected($event)\"\n          >\n            <cds-dropdown-list></cds-dropdown-list>\n          </cds-combo-box>\n        </ng-container>\n\n        <ng-container *ngIf=\"$selectedType() === StartableItemType.BUILDING_BLOCK\">\n          <cds-combo-box\n            [items]=\"(availableBuildingBlockItems$ | async) || []\"\n            [label]=\"'caseManagement.actions.modal.selectBuildingBlock' | translate\"\n            [placeholder]=\"'caseManagement.actions.modal.filterPlaceholder' | translate\"\n            [appendInline]=\"false\"\n            [dropUp]=\"false\"\n            (selected)=\"onComboBoxSelected($event)\"\n          >\n            <cds-dropdown-list></cds-dropdown-list>\n          </cds-combo-box>\n        </ng-container>\n      </form>\n    </ng-container>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"footer-spacer\"></div>\n\n    <button\n      *ngIf=\"$step() === 'selectItem' && !isEditMode\"\n      cdsButton=\"secondary\"\n      (click)=\"onBack()\"\n    >\n      {{ 'caseManagement.actions.modal.back' | translate }}\n    </button>\n\n    <button\n      *ngIf=\"$step() === 'selectItem'\"\n      cdsButton=\"primary\"\n      [disabled]=\"formGroup.invalid || $saving()\"\n      (click)=\"onSubmit()\"\n    >\n      {{ primaryButtonLabel }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".action-type-tiles{display:flex;gap:1px}.action-type-tile{display:flex;flex:1 1 0;min-width:0;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--cds-spacing-05, 1rem);background-color:var(--cds-background-inverse, #393939);color:var(--cds-text-inverse, #fff);border:none;cursor:pointer;transition:background-color .15s ease}.action-type-tile:hover:not(:disabled){background-color:var(--cds-background-inverse-hover, #474747)}.action-type-tile:disabled{opacity:.5;cursor:not-allowed}.action-type-tile__icon{fill:currentColor}.action-type-tile__label{font-size:var(--cds-body-compact-01-font-size, .875rem);font-weight:400}.footer-spacer{flex:1}:host ::ng-deep cds-modal-footer .cds--modal-footer{display:flex;align-items:center}\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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "ngmodule", type: LoadingModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementActionsModalComponent, decorators: [{
@@ -5463,7 +5818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         ProgressIndicatorModule,
                         LoadingModule,
                     ], 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<cds-modal\n  *ngIf=\"{showModal: showModal$ | async, editingItem: editingItem$ | async} as obs\"\n  [open]=\"obs.showModal\"\n  showFooter=\"true\"\n  valtimoCdsModal\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>{{ modalTitle }}</h3>\n\n    <p cdsModalHeaderDescription>{{ modalDescription }}</p>\n  </cds-modal-header>\n\n  <section cdsModalContent [cdsLayer]=\"1\">\n    <ng-container *ngIf=\"$step() === 'selectType'\">\n      <div class=\"action-type-tiles\">\n        <button\n          class=\"action-type-tile\"\n          [disabled]=\"$processItemsEmpty()\"\n          [vTooltip]=\"'caseManagement.actions.modal.noProcessesAvailable' | translate\"\n          [tooltipDisabled]=\"!$processItemsEmpty()\"\n          (click)=\"onSelectType(StartableItemType.PROCESS)\"\n        >\n          <span class=\"action-type-tile__label\">\n            {{ 'caseManagement.actions.type.PROCESS' | translate }}\n          </span>\n          <svg cdsIcon=\"flow--modeler\" size=\"20\" class=\"action-type-tile__icon\"></svg>\n        </button>\n\n        <button\n          class=\"action-type-tile\"\n          [disabled]=\"$buildingBlockItemsEmpty()\"\n          [vTooltip]=\"'caseManagement.actions.modal.noBuildingBlocksAvailable' | translate\"\n          [tooltipDisabled]=\"!$buildingBlockItemsEmpty()\"\n          (click)=\"onSelectType(StartableItemType.BUILDING_BLOCK)\"\n        >\n          <span class=\"action-type-tile__label\">\n            {{ 'caseManagement.actions.type.BUILDING_BLOCK' | translate }}\n          </span>\n          <svg cdsIcon=\"block-storage--alt\" size=\"20\" class=\"action-type-tile__icon\"></svg>\n        </button>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"$step() === 'selectItem'\">\n      <form [formGroup]=\"formGroup\">\n        <ng-container *ngIf=\"$selectedType() === StartableItemType.PROCESS\">\n          <cds-combo-box\n            [items]=\"(availableProcessItems$ | async) || []\"\n            [label]=\"'caseManagement.actions.modal.selectProcess' | translate\"\n            [placeholder]=\"'caseManagement.actions.modal.filterPlaceholder' | translate\"\n            [appendInline]=\"false\"\n            [dropUp]=\"false\"\n            (selected)=\"onComboBoxSelected($event)\"\n          >\n            <cds-dropdown-list></cds-dropdown-list>\n          </cds-combo-box>\n        </ng-container>\n\n        <ng-container *ngIf=\"$selectedType() === StartableItemType.BUILDING_BLOCK\">\n          <cds-combo-box\n            [items]=\"(availableBuildingBlockItems$ | async) || []\"\n            [label]=\"'caseManagement.actions.modal.selectBuildingBlock' | translate\"\n            [placeholder]=\"'caseManagement.actions.modal.filterPlaceholder' | translate\"\n            [appendInline]=\"false\"\n            [dropUp]=\"false\"\n            (selected)=\"onComboBoxSelected($event)\"\n          >\n            <cds-dropdown-list></cds-dropdown-list>\n          </cds-combo-box>\n        </ng-container>\n      </form>\n    </ng-container>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"footer-spacer\"></div>\n\n    <button\n      *ngIf=\"$step() === 'selectItem' && !isEditMode\"\n      cdsButton=\"secondary\"\n      (click)=\"onBack()\"\n    >\n      {{ 'caseManagement.actions.modal.back' | translate }}\n    </button>\n\n    <button\n      *ngIf=\"$step() === 'selectItem'\"\n      cdsButton=\"primary\"\n      [disabled]=\"formGroup.invalid || $saving()\"\n      (click)=\"onSubmit()\"\n    >\n      {{ primaryButtonLabel }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".action-type-tiles{display:flex;gap:1px}.action-type-tile{display:flex;flex:1 1 0;min-width:0;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--cds-spacing-05, 1rem);background-color:var(--cds-background-inverse, #393939);color:var(--cds-text-inverse, #fff);border:none;cursor:pointer;transition:background-color .15s ease}.action-type-tile:hover:not(:disabled){background-color:var(--cds-background-inverse-hover, #474747)}.action-type-tile:disabled{opacity:.5;cursor:not-allowed}.action-type-tile__icon{fill:currentColor}.action-type-tile__label{font-size:var(--cds-body-compact-01-font-size, .875rem);font-weight:400}.footer-spacer{flex:1}:host ::ng-deep cds-modal-footer .cds--modal-footer{display:flex;align-items:center}\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: StartableItemManagementService }, { type: i4$1.ProcessLinkBuildingBlockApiService }, { type: i1$4.FormBuilder }, { type: i3.TranslateService }, { type: i2.IconService }], propDecorators: { configureBuildingBlockEvent: [{
+        }], ctorParameters: () => [{ type: StartableItemManagementService }, { type: i4.ProcessLinkBuildingBlockApiService }, { type: i1$4.FormBuilder }, { type: i3.TranslateService }, { type: i2.IconService }], propDecorators: { configureBuildingBlockEvent: [{
                 type: Output
             }] } });
 
@@ -5499,6 +5854,7 @@ class CaseManagementActionsComponent {
         this.fields$ = new BehaviorSubject([]);
         this.loading$ = this.startableItemManagementService.loading$;
         this.dragAndDropDisabled = signal(false);
+        this.togglingStartableByUser = signal(false);
         this.items$ = this.startableItemManagementService.items$;
         this.hasEditPermissions$ = this.caseManagementRouteParams$.pipe(switchMap(params => this.editPermissionsService.hasEditPermissions(params?.caseDefinitionKey, params?.caseDefinitionVersionTag)));
         this.showDeleteModal$ = this.startableItemManagementService.showDeleteModal$;
@@ -5514,6 +5870,7 @@ class CaseManagementActionsComponent {
                 type: 'danger',
             },
         ];
+        this._$editedBuildingBlockItem = signal(null);
         this._subscriptions = new Subscription();
         this.subscribeToProcessLinkEvents();
         this._subscriptions.add(this.startableItemManagementService.reorderComplete$.subscribe(() => {
@@ -5552,6 +5909,18 @@ class CaseManagementActionsComponent {
             this.startableItemManagementService.loadItems();
         });
     }
+    onStartableByUserToggle(item, startableByUser) {
+        if (item.startableByUser === startableByUser)
+            return;
+        this.togglingStartableByUser.set(true);
+        this.startableItemManagementService
+            .toggleStartableByUser(item, startableByUser)
+            .pipe(take(1), catchError$1(() => of(null)))
+            .subscribe(() => {
+            this.togglingStartableByUser.set(false);
+            this.startableItemManagementService.loadItems();
+        });
+    }
     onConfigureBuildingBlock(request) {
         this.openProcessLinkModalForBuildingBlock(request.buildingBlockDefinitionKey, request.buildingBlockDefinitionVersionTag);
     }
@@ -5584,6 +5953,7 @@ class CaseManagementActionsComponent {
         this.processLinkStateService.showModal();
     }
     openProcessLinkModalForBuildingBlockEdit(item) {
+        this._$editedBuildingBlockItem.set(item);
         this.processLinkStepService.setSkipBuildingBlockSelectionStep(true);
         this.startableItemManagementService
             .getItemProperties(item.key, item.versionTag, StartableItemType.BUILDING_BLOCK)
@@ -5641,20 +6011,23 @@ class CaseManagementActionsComponent {
         });
     }
     updateBuildingBlockStartableItem(event) {
-        const key = event.buildingBlockDefinitionKey;
-        const versionTag = event.buildingBlockDefinitionVersionTag;
+        const editedItem = this._$editedBuildingBlockItem();
+        this._$editedBuildingBlockItem.set(null);
+        if (!editedItem)
+            return;
         const request = {
             type: StartableItemType.BUILDING_BLOCK,
             properties: {
-                buildingBlockDefinitionKey: key,
-                buildingBlockDefinitionVersionTag: versionTag,
+                buildingBlockDefinitionKey: event.buildingBlockDefinitionKey,
+                buildingBlockDefinitionVersionTag: event.buildingBlockDefinitionVersionTag,
                 inputMappings: this.normalizeMappingsForSave(event.inputMappings || [], 'input'),
                 outputMappings: this.normalizeMappingsForSave(event.outputMappings || [], 'output'),
                 pluginConfigurationMappings: event.pluginConfigurationMappings || {},
             },
         };
+        // Look up the existing item by the identity it had when the modal opened — the event carries the new version.
         this.startableItemManagementService
-            .updateItem(key, versionTag, request)
+            .updateItem(editedItem.key, editedItem.versionTag, request)
             .pipe(catchError$1(() => of(null)))
             .subscribe(() => {
             this.startableItemManagementService.loadItems();
@@ -5686,10 +6059,16 @@ class CaseManagementActionsComponent {
                 key: '',
                 label: 'caseManagement.actions.columns.type',
             },
+            {
+                viewType: ViewType.TEMPLATE,
+                template: this.startableByUserColumnTemplate,
+                key: '',
+                label: 'caseManagement.actions.columns.startableByUser',
+            },
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementActionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.ActivatedRoute }, { token: StartableItemManagementService }, { token: i2$1.EditPermissionsService }, { token: i4$1.ProcessLinkStateService }, { token: i4$1.ProcessLinkStepService }, { token: i4$1.BuildingBlockStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementActionsComponent, isStandalone: true, selector: "valtimo-case-management-actions", providers: [StartableItemManagementService, ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService], viewQueries: [{ propertyName: "typeColumnTemplate", first: true, predicate: ["typeColumn"], descendants: 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<ng-container\n  *ngIf=\"{\n    routeParams: caseManagementRouteParams$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n>\n  <cds-inline-notification\n    [notificationObj]=\"{\n      type: 'info',\n      title: '',\n      message: ('caseManagement.actions.infoNotification.message' | translate),\n      showClose: false,\n      lowContrast: true\n    }\"\n  ></cds-inline-notification>\n\n  <valtimo-carbon-list\n    *ngIf=\"{fields: fields$ | async, loading: loading$ | async, items: items$ | async} as listObs\"\n    [items]=\"listObs.items\"\n    [fields]=\"listObs.fields\"\n    [header]=\"false\"\n    [loading]=\"listObs.loading\"\n    [dragAndDrop]=\"true\"\n    [dragAndDropDisabled]=\"dragAndDropDisabled() || !obs.hasEditPermissions\"\n    [actionItems]=\"ACTION_ITEMS\"\n    [showActionItems]=\"obs.hasEditPermissions\"\n    (rowClicked)=\"onRowClicked($event)\"\n    (itemsReordered)=\"onItemsReorderedEvent($event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addItemButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addItemButton\"\n      [description]=\"'caseManagement.actions.noResultsDescription' | translate\"\n      [title]=\"'caseManagement.actions.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #typeColumn let-data=\"data\">\n    <cds-tag\n      class=\"cds-tag--no-margin\"\n      [type]=\"data.item.type === StartableItemType.PROCESS ? 'blue' : 'purple'\"\n    >\n      {{ 'caseManagement.actions.type.' + data.item.type | translate }}\n    </cds-tag>\n  </ng-template>\n\n  <ng-template #addItemButton>\n    <button\n      *ngIf=\"obs.hasEditPermissions\"\n      cdsButton=\"primary\"\n      (click)=\"onAddItemClick()\"\n    >\n      {{ 'caseManagement.actions.addItem' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-case-management-actions-modal\n  (configureBuildingBlockEvent)=\"onConfigureBuildingBlock($event)\"\n></valtimo-case-management-actions-modal>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"caseManagement.actions.deleteModal.content\"\n  [outputOnConfirm]=\"itemToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"caseManagement.actions.deleteModal.title\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n", styles: [":host ::ng-deep cds-inline-notification{max-inline-size:unset;margin-bottom:16px}:host ::ng-deep .cds-tag--no-margin{margin: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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: CaseManagementActionsModalComponent, selector: "valtimo-case-management-actions-modal", outputs: ["configureBuildingBlockEvent"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i7.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: "ngmodule", type: ProcessLinkModule }, { kind: "component", type: i4$1.ProcessLinkModalComponent, selector: "valtimo-process-link-modal" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementActionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.ActivatedRoute }, { token: StartableItemManagementService }, { token: i2$1.EditPermissionsService }, { token: i4.ProcessLinkStateService }, { token: i4.ProcessLinkStepService }, { token: i4.BuildingBlockStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementActionsComponent, isStandalone: true, selector: "valtimo-case-management-actions", providers: [StartableItemManagementService, ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService], viewQueries: [{ propertyName: "typeColumnTemplate", first: true, predicate: ["typeColumn"], descendants: true }, { propertyName: "startableByUserColumnTemplate", first: true, predicate: ["startableByUserColumn"], descendants: 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<ng-container\n  *ngIf=\"{\n    routeParams: caseManagementRouteParams$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n>\n  <cds-inline-notification\n    [notificationObj]=\"{\n      type: 'info',\n      title: '',\n      message: ('caseManagement.actions.infoNotification.message' | translate),\n      showClose: false,\n      lowContrast: true\n    }\"\n  ></cds-inline-notification>\n\n  <valtimo-carbon-list\n    *ngIf=\"{fields: fields$ | async, loading: loading$ | async, items: items$ | async} as listObs\"\n    [items]=\"listObs.items\"\n    [fields]=\"listObs.fields\"\n    [header]=\"false\"\n    [loading]=\"listObs.loading\"\n    [dragAndDrop]=\"true\"\n    [dragAndDropDisabled]=\"dragAndDropDisabled() || !obs.hasEditPermissions\"\n    [actionItems]=\"ACTION_ITEMS\"\n    [showActionItems]=\"obs.hasEditPermissions\"\n    (rowClicked)=\"onRowClicked($event)\"\n    (itemsReordered)=\"onItemsReorderedEvent($event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addItemButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addItemButton\"\n      [description]=\"'caseManagement.actions.noResultsDescription' | translate\"\n      [title]=\"'caseManagement.actions.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #typeColumn let-data=\"data\">\n    <cds-tag\n      class=\"cds-tag--no-margin\"\n      [type]=\"data.item.type === StartableItemType.PROCESS ? 'blue' : 'purple'\"\n    >\n      {{ 'caseManagement.actions.type.' + data.item.type | translate }}\n    </cds-tag>\n  </ng-template>\n\n  <!-- Processes are always startable while listed here; only building block\n       links can stay linked (and runnable by the application) while hidden\n       from the start menu. -->\n  <ng-template #startableByUserColumn let-data=\"data\">\n    <div\n      *ngIf=\"data.item.type === StartableItemType.BUILDING_BLOCK\"\n      class=\"startable-by-user-toggle\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <cds-toggle\n        size=\"sm\"\n        [label]=\"'caseManagement.actions.visibleInStartMenu' | translate\"\n        [hideLabel]=\"true\"\n        [checked]=\"data.item.startableByUser\"\n        [disabled]=\"togglingStartableByUser() || !obs.hasEditPermissions\"\n        (checkedChange)=\"onStartableByUserToggle(data.item, $event)\"\n      ></cds-toggle>\n    </div>\n  </ng-template>\n\n  <ng-template #addItemButton>\n    <button\n      *ngIf=\"obs.hasEditPermissions\"\n      cdsButton=\"primary\"\n      (click)=\"onAddItemClick()\"\n    >\n      {{ 'caseManagement.actions.addItem' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-case-management-actions-modal\n  (configureBuildingBlockEvent)=\"onConfigureBuildingBlock($event)\"\n></valtimo-case-management-actions-modal>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"caseManagement.actions.deleteModal.content\"\n  [outputOnConfirm]=\"itemToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"caseManagement.actions.deleteModal.title\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n", styles: [":host ::ng-deep cds-inline-notification{max-inline-size:unset;margin-bottom:16px}:host ::ng-deep .cds-tag--no-margin{margin:0}:host ::ng-deep .startable-by-user-toggle{display:flex;align-items:center;height:100%}:host ::ng-deep .startable-by-user-toggle .cds--form-item{margin:0;flex:none}:host ::ng-deep .startable-by-user-toggle .cds--toggle__label{margin: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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "component", type: CaseManagementActionsModalComponent, selector: "valtimo-case-management-actions-modal", outputs: ["configureBuildingBlockEvent"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i7.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: "ngmodule", type: ProcessLinkModule }, { kind: "component", type: i4.ProcessLinkModalComponent, selector: "valtimo-process-link-modal" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementActionsComponent, decorators: [{
             type: Component,
@@ -5701,13 +6080,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         IconModule,
                         NotificationModule,
                         TagModule,
+                        ToggleModule,
                         CaseManagementActionsModalComponent,
                         ConfirmationModalModule,
                         ProcessLinkModule,
-                    ], providers: [StartableItemManagementService, ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService], 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<ng-container\n  *ngIf=\"{\n    routeParams: caseManagementRouteParams$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n>\n  <cds-inline-notification\n    [notificationObj]=\"{\n      type: 'info',\n      title: '',\n      message: ('caseManagement.actions.infoNotification.message' | translate),\n      showClose: false,\n      lowContrast: true\n    }\"\n  ></cds-inline-notification>\n\n  <valtimo-carbon-list\n    *ngIf=\"{fields: fields$ | async, loading: loading$ | async, items: items$ | async} as listObs\"\n    [items]=\"listObs.items\"\n    [fields]=\"listObs.fields\"\n    [header]=\"false\"\n    [loading]=\"listObs.loading\"\n    [dragAndDrop]=\"true\"\n    [dragAndDropDisabled]=\"dragAndDropDisabled() || !obs.hasEditPermissions\"\n    [actionItems]=\"ACTION_ITEMS\"\n    [showActionItems]=\"obs.hasEditPermissions\"\n    (rowClicked)=\"onRowClicked($event)\"\n    (itemsReordered)=\"onItemsReorderedEvent($event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addItemButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addItemButton\"\n      [description]=\"'caseManagement.actions.noResultsDescription' | translate\"\n      [title]=\"'caseManagement.actions.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #typeColumn let-data=\"data\">\n    <cds-tag\n      class=\"cds-tag--no-margin\"\n      [type]=\"data.item.type === StartableItemType.PROCESS ? 'blue' : 'purple'\"\n    >\n      {{ 'caseManagement.actions.type.' + data.item.type | translate }}\n    </cds-tag>\n  </ng-template>\n\n  <ng-template #addItemButton>\n    <button\n      *ngIf=\"obs.hasEditPermissions\"\n      cdsButton=\"primary\"\n      (click)=\"onAddItemClick()\"\n    >\n      {{ 'caseManagement.actions.addItem' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-case-management-actions-modal\n  (configureBuildingBlockEvent)=\"onConfigureBuildingBlock($event)\"\n></valtimo-case-management-actions-modal>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"caseManagement.actions.deleteModal.content\"\n  [outputOnConfirm]=\"itemToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"caseManagement.actions.deleteModal.title\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n", styles: [":host ::ng-deep cds-inline-notification{max-inline-size:unset;margin-bottom:16px}:host ::ng-deep .cds-tag--no-margin{margin: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: i0.ChangeDetectorRef }, { type: i2$2.ActivatedRoute }, { type: StartableItemManagementService }, { type: i2$1.EditPermissionsService }, { type: i4$1.ProcessLinkStateService }, { type: i4$1.ProcessLinkStepService }, { type: i4$1.BuildingBlockStateService }], propDecorators: { typeColumnTemplate: [{
+                    ], providers: [StartableItemManagementService, ProcessLinkStateService, ProcessLinkStepService, ProcessLinkButtonService], 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<ng-container\n  *ngIf=\"{\n    routeParams: caseManagementRouteParams$ | async,\n    hasEditPermissions: hasEditPermissions$ | async,\n  } as obs\"\n>\n  <cds-inline-notification\n    [notificationObj]=\"{\n      type: 'info',\n      title: '',\n      message: ('caseManagement.actions.infoNotification.message' | translate),\n      showClose: false,\n      lowContrast: true\n    }\"\n  ></cds-inline-notification>\n\n  <valtimo-carbon-list\n    *ngIf=\"{fields: fields$ | async, loading: loading$ | async, items: items$ | async} as listObs\"\n    [items]=\"listObs.items\"\n    [fields]=\"listObs.fields\"\n    [header]=\"false\"\n    [loading]=\"listObs.loading\"\n    [dragAndDrop]=\"true\"\n    [dragAndDropDisabled]=\"dragAndDropDisabled() || !obs.hasEditPermissions\"\n    [actionItems]=\"ACTION_ITEMS\"\n    [showActionItems]=\"obs.hasEditPermissions\"\n    (rowClicked)=\"onRowClicked($event)\"\n    (itemsReordered)=\"onItemsReorderedEvent($event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container [ngTemplateOutlet]=\"addItemButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addItemButton\"\n      [description]=\"'caseManagement.actions.noResultsDescription' | translate\"\n      [title]=\"'caseManagement.actions.noResults' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #typeColumn let-data=\"data\">\n    <cds-tag\n      class=\"cds-tag--no-margin\"\n      [type]=\"data.item.type === StartableItemType.PROCESS ? 'blue' : 'purple'\"\n    >\n      {{ 'caseManagement.actions.type.' + data.item.type | translate }}\n    </cds-tag>\n  </ng-template>\n\n  <!-- Processes are always startable while listed here; only building block\n       links can stay linked (and runnable by the application) while hidden\n       from the start menu. -->\n  <ng-template #startableByUserColumn let-data=\"data\">\n    <div\n      *ngIf=\"data.item.type === StartableItemType.BUILDING_BLOCK\"\n      class=\"startable-by-user-toggle\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <cds-toggle\n        size=\"sm\"\n        [label]=\"'caseManagement.actions.visibleInStartMenu' | translate\"\n        [hideLabel]=\"true\"\n        [checked]=\"data.item.startableByUser\"\n        [disabled]=\"togglingStartableByUser() || !obs.hasEditPermissions\"\n        (checkedChange)=\"onStartableByUserToggle(data.item, $event)\"\n      ></cds-toggle>\n    </div>\n  </ng-template>\n\n  <ng-template #addItemButton>\n    <button\n      *ngIf=\"obs.hasEditPermissions\"\n      cdsButton=\"primary\"\n      (click)=\"onAddItemClick()\"\n    >\n      {{ 'caseManagement.actions.addItem' | translate }}\n\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-case-management-actions-modal\n  (configureBuildingBlockEvent)=\"onConfigureBuildingBlock($event)\"\n></valtimo-case-management-actions-modal>\n\n<valtimo-process-link-modal></valtimo-process-link-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"caseManagement.actions.deleteModal.content\"\n  [outputOnConfirm]=\"itemToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"caseManagement.actions.deleteModal.title\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n", styles: [":host ::ng-deep cds-inline-notification{max-inline-size:unset;margin-bottom:16px}:host ::ng-deep .cds-tag--no-margin{margin:0}:host ::ng-deep .startable-by-user-toggle{display:flex;align-items:center;height:100%}:host ::ng-deep .startable-by-user-toggle .cds--form-item{margin:0;flex:none}:host ::ng-deep .startable-by-user-toggle .cds--toggle__label{margin: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: i0.ChangeDetectorRef }, { type: i2$2.ActivatedRoute }, { type: StartableItemManagementService }, { type: i2$1.EditPermissionsService }, { type: i4.ProcessLinkStateService }, { type: i4.ProcessLinkStepService }, { type: i4.BuildingBlockStateService }], propDecorators: { typeColumnTemplate: [{
                 type: ViewChild,
                 args: ['typeColumn']
+            }], startableByUserColumnTemplate: [{
+                type: ViewChild,
+                args: ['startableByUserColumn']
             }] } });
 
 /*
@@ -5805,12 +6188,13 @@ class CaseManagementUploadComponent {
     get nameControl() {
         return this.configureForm.get('name');
     }
-    constructor(caseManagementService, fb, translateService, pluginManagementService, pluginTranslationService) {
+    constructor(caseManagementService, fb, translateService, pluginManagementService, pluginTranslationService, externalPluginService) {
         this.caseManagementService = caseManagementService;
         this.fb = fb;
         this.translateService = translateService;
         this.pluginManagementService = pluginManagementService;
         this.pluginTranslationService = pluginTranslationService;
+        this.externalPluginService = externalPluginService;
         this.open = false;
         this.closeModal = new EventEmitter();
         this.testIds = CASE_MANAGEMENT_UPLOAD_TEST_IDS;
@@ -5919,6 +6303,22 @@ class CaseManagementUploadComponent {
     trackBySourceId(_index, row) {
         return row.sourcePluginConfigurationId;
     }
+    /**
+     * The actual definition version of the currently selected external configuration for [row],
+     * `null` when the selection is an exact `pluginId@version` match or the row has no selection
+     * (D3 non-blocking warning). Reads the live form control value so the warning stays in sync as
+     * the admin changes the dropdown selection.
+     */
+    selectedConfigurationVersion(row) {
+        if (row.mismatchedVersionsById.size === 0) {
+            return null;
+        }
+        const selectedId = this.pluginMappingForm.get(row.sourcePluginConfigurationId)?.value;
+        if (!selectedId) {
+            return null;
+        }
+        return row.mismatchedVersionsById.get(selectedId) ?? null;
+    }
     /**
      * Works around a carbon-components-angular bug where clearing a single-select
      * cds-combo-box with itemValueKey set writes `[]` to the FormControl instead
@@ -5963,7 +6363,11 @@ class CaseManagementUploadComponent {
     loadPluginMappingRows(pluginConfigs) {
         const uniqueById = new Map();
         for (const config of pluginConfigs) {
-            if (!uniqueById.has(config.pluginConfigurationId)) {
+            // One row per configuration id, but never let a key-less contribution (e.g. an external
+            // plugin case tab) shadow a mappable one (a process link) for the same configuration —
+            // key-less rows are filtered out below, which would hide the mapping choice entirely.
+            const existing = uniqueById.get(config.pluginConfigurationId);
+            if (!existing || (existing.pluginDefinitionKey === null && config.pluginDefinitionKey !== null)) {
                 uniqueById.set(config.pluginConfigurationId, config);
             }
         }
@@ -5978,40 +6382,50 @@ class CaseManagementUploadComponent {
             this.pluginMappingRows$.next([]);
             return;
         }
-        // Fetch all installed plugin definitions first, then configs per key
-        this.pluginManagementService
-            .getPluginDefinitions()
+        const embeddedConfigs = uniqueConfigs.filter(c => (c.source ?? 'embedded') === 'embedded');
+        const externalConfigs = uniqueConfigs.filter(c => c.source === 'external');
+        combineLatest([
+            this.loadEmbeddedMappingRows(embeddedConfigs),
+            this.loadExternalMappingRows(externalConfigs),
+        ])
             .pipe(take$1(1))
-            .subscribe(definitions => {
-            const installedKeys = new Set(definitions.map(d => d.key));
-            this.loadPluginConfigurations(uniqueConfigs, installedKeys);
+            .subscribe(([embeddedRows, externalRows]) => {
+            this.clearPluginMappingForm();
+            const rows = [...embeddedRows, ...externalRows];
+            for (const row of rows) {
+                if (row.status === 'available') {
+                    this.pluginMappingForm.addControl(row.sourcePluginConfigurationId, this.fb.control(row.listItems.find(item => item.selected)?.id ?? null));
+                }
+            }
+            this.pluginMappingRows$.next(rows);
         });
     }
-    loadPluginConfigurations(uniqueConfigs, installedKeys) {
-        const uniqueDefinitionKeys = [
-            ...new Set(uniqueConfigs.map(c => c.pluginDefinitionKey).filter(Boolean)),
-        ];
-        const installableKeys = uniqueDefinitionKeys.filter(k => installedKeys.has(k));
-        if (installableKeys.length === 0) {
-            this.buildMappingRows(uniqueConfigs, new Map(), installedKeys);
-            return;
-        }
-        const configRequests = {};
-        for (const key of installableKeys) {
-            configRequests[key] = this.pluginManagementService
-                .getPluginConfigurationsByPluginDefinitionKey(key)
-                .pipe(take$1(1));
+    loadEmbeddedMappingRows(uniqueConfigs) {
+        if (uniqueConfigs.length === 0) {
+            return of([]);
         }
-        forkJoin(configRequests)
-            .pipe(take$1(1))
-            .subscribe(results => {
-            const configsByKey = new Map(Object.entries(results));
-            this.buildMappingRows(uniqueConfigs, configsByKey, installedKeys);
-        });
+        return this.pluginManagementService.getPluginDefinitions().pipe(take$1(1), switchMap(definitions => {
+            const installedKeys = new Set(definitions.map(d => d.key));
+            const installableKeys = [
+                ...new Set(uniqueConfigs.map(c => c.pluginDefinitionKey).filter(Boolean)),
+            ].filter(key => installedKeys.has(key));
+            if (installableKeys.length === 0) {
+                return of(this.buildEmbeddedRows(uniqueConfigs, new Map(), installedKeys));
+            }
+            const configRequests = {};
+            for (const key of installableKeys) {
+                configRequests[key] = this.pluginManagementService
+                    .getPluginConfigurationsByPluginDefinitionKey(key)
+                    .pipe(take$1(1));
+            }
+            return forkJoin(configRequests).pipe(take$1(1), map(results => {
+                const configsByKey = new Map(Object.entries(results));
+                return this.buildEmbeddedRows(uniqueConfigs, configsByKey, installedKeys);
+            }));
+        }));
     }
-    buildMappingRows(uniqueConfigs, configsByKey, installedKeys) {
-        this.clearPluginMappingForm();
-        const rows = uniqueConfigs.map(config => {
+    buildEmbeddedRows(uniqueConfigs, configsByKey, installedKeys) {
+        return uniqueConfigs.map(config => {
             const key = config.pluginDefinitionKey;
             const isInstalled = key ? installedKeys.has(key) : false;
             const available = configsByKey.get(key) || [];
@@ -6033,9 +6447,6 @@ class CaseManagementUploadComponent {
                 id: c.id,
                 selected: c.id === defaultSelectionId,
             }));
-            if (status === 'available') {
-                this.pluginMappingForm.addControl(config.pluginConfigurationId, this.fb.control(defaultSelectionId));
-            }
             return {
                 pluginDefinitionKey: key,
                 pluginDefinitionTitle: this.getPluginTitle(key),
@@ -6043,9 +6454,84 @@ class CaseManagementUploadComponent {
                 existsInTargetEnvironment: config.existsInTargetEnvironment,
                 listItems,
                 status,
+                source: 'embedded',
+                pluginDefinitionVersion: null,
+                mismatchedVersionsById: new Map(),
             };
         });
-        this.pluginMappingRows$.next(rows);
+    }
+    loadExternalMappingRows(uniqueConfigs) {
+        if (uniqueConfigs.length === 0) {
+            return of([]);
+        }
+        return combineLatest([
+            this.externalPluginService
+                .getConfigurations()
+                .pipe(catchError(() => of([]))),
+            this.externalPluginService
+                .getDefinitions()
+                .pipe(catchError(() => of([]))),
+        ]).pipe(take$1(1), map(([configurations, definitions]) => {
+            const definitionById = new Map(definitions.map(d => [d.id, d]));
+            const lang = this.translateService.currentLang;
+            return uniqueConfigs.map(config => {
+                const matchingConfigurations = configurations.filter(configuration => {
+                    const definition = definitionById.get(configuration.definitionId);
+                    return definition?.pluginId === config.pluginDefinitionKey;
+                });
+                let status;
+                if (matchingConfigurations.length === 0) {
+                    status = definitionById.size > 0 &&
+                        [...definitionById.values()].some(d => d.pluginId === config.pluginDefinitionKey)
+                        ? 'no-configurations'
+                        : 'not-installed';
+                }
+                else {
+                    status = 'available';
+                }
+                const defaultSelectionId = config.existsInTargetEnvironment
+                    ? config.pluginConfigurationId
+                    : null;
+                const mismatchedVersionsById = new Map();
+                const listItems = matchingConfigurations.map(configuration => {
+                    const definition = definitionById.get(configuration.definitionId);
+                    if (definition && definition.version !== config.pluginDefinitionVersion) {
+                        mismatchedVersionsById.set(configuration.id, definition.version);
+                    }
+                    return {
+                        content: definition
+                            ? `${configuration.title} — ${getExternalPluginDisplayName(definition, lang)}`
+                            : configuration.title,
+                        id: configuration.id,
+                        selected: configuration.id === defaultSelectionId,
+                    };
+                });
+                return {
+                    pluginDefinitionKey: config.pluginDefinitionKey,
+                    pluginDefinitionTitle: this.getExternalPluginTitle(config, definitionById),
+                    sourcePluginConfigurationId: config.pluginConfigurationId,
+                    existsInTargetEnvironment: config.existsInTargetEnvironment,
+                    listItems,
+                    status,
+                    source: 'external',
+                    pluginDefinitionVersion: config.pluginDefinitionVersion ?? null,
+                    mismatchedVersionsById,
+                };
+            });
+        }));
+    }
+    getExternalPluginTitle(config, definitionById) {
+        if (!config.pluginDefinitionKey) {
+            return this.translateService.instant('caseManagement.importDefinition.plugins.unknownPlugin');
+        }
+        const lang = this.translateService.currentLang;
+        const matchingDefinition = [...definitionById.values()].find(d => d.pluginId === config.pluginDefinitionKey && d.version === config.pluginDefinitionVersion);
+        if (matchingDefinition) {
+            return getExternalPluginDisplayName(matchingDefinition, lang);
+        }
+        return config.pluginDefinitionVersion
+            ? `${config.pluginDefinitionKey} (${config.pluginDefinitionVersion})`
+            : config.pluginDefinitionKey;
     }
     clearPluginMappingForm() {
         for (const key of Object.keys(this.pluginMappingForm.controls)) {
@@ -6122,13 +6608,15 @@ class CaseManagementUploadComponent {
     buildPluginConfigurationMappings() {
         const mappings = {};
         for (const row of this.pluginMappingRows$.value) {
+            // Only rows the user could actually act on are sent. An explicit null tells the importer
+            // to clear the configuration id (a deliberate dangling import); omitting the key keeps the
+            // original id. Rows without a dropdown (plugin not installed / no configurations — possibly
+            // a transient lookup failure) must not silently clear ids: a cleared id disappears from the
+            // next export's import preview, making the mapping unrecoverable through the wizard.
             if (row.status === 'available') {
                 const control = this.pluginMappingForm.get(row.sourcePluginConfigurationId);
                 mappings[row.sourcePluginConfigurationId] = control?.value ?? null;
             }
-            else {
-                mappings[row.sourcePluginConfigurationId] = null;
-            }
         }
         return mappings;
     }
@@ -6148,13 +6636,13 @@ class CaseManagementUploadComponent {
             this.clearPluginMappingForm();
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementUploadComponent, deps: [{ token: CaseManagementService }, { token: i1$4.FormBuilder }, { token: i3.TranslateService }, { token: i4.PluginManagementService }, { token: i4.PluginTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementUploadComponent, isStandalone: false, selector: "valtimo-case-management-upload", inputs: { open: "open" }, outputs: { closeModal: "closeModal" }, 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<cds-modal\n  *ngIf=\"{\n    activeStep: activeStep$ | async,\n    backButtonEnabled: backButtonEnabled$ | async,\n    isStepAfterUpload: isStepAfterUpload$ | async,\n    nextButtonDisabled: nextButtonDisabled$ | async,\n    showCloseButton: showCloseButton$ | async,\n    uploadStatus: uploadStatus$ | async,\n    preview: preview$ | async,\n    importWarning: importWarning$ | async,\n  } as obs\"\n  valtimoCdsModal\n  [open]=\"open\"\n  showFooter=\"true\"\n  class=\"valtimo-definition-uploader\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header\n    [showCloseButton]=\"obs.showCloseButton\"\n    (closeSelect)=\"onCloseModal(obs.isStepAfterUpload && obs.uploadStatus !== UPLOAD_STATUS.ERROR)\"\n  >\n    <h3 cdsModalHeaderHeading>\n      {{ 'caseManagement.importDefinition.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section\n    [ngSwitch]=\"obs.activeStep\"\n    [cdsLayer]=\"1\"\n    cdsModalContent\n    class=\"valtimo-definition-uploader__content\"\n  >\n    <ng-template ngSwitchDefault>\n      <valtimo-case-management-upload-step\n        [message]=\"\n          'caseManagement.importDefinition.steps.' + obs.activeStep + '.message' | translate\n        \"\n        [title]=\"'caseManagement.importDefinition.steps.' + obs.activeStep + '.title' | translate\"\n        [illustration]=\"'valtimo-layout/img/' + obs.activeStep + '.svg'\"\n      >\n      </valtimo-case-management-upload-step>\n    </ng-template>\n\n    <form *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\" [formGroup]=\"form\">\n      <cds-file-uploader\n        [accept]=\"acceptedFiles\"\n        [buttonText]=\"'caseManagement.importDefinition.upload.buttonText' | translate\"\n        [description]=\"'caseManagement.importDefinition.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'caseManagement.importDefinition.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        [attr.data-test-id]=\"testIds.fileUploader\"\n        class=\"valtimo-definition-uploader__file-uploader\"\n      >\n      </cds-file-uploader>\n    </form>\n\n    <form\n      *ngSwitchCase=\"UPLOAD_STEP.CONFIGURE\"\n      [formGroup]=\"configureForm\"\n      class=\"valtimo-definition-uploader__configure\"\n    >\n      <cds-label>\n        {{ 'caseManagement.createDefinition.name' | translate }}\n        <input\n          formControlName=\"name\"\n          cdsText\n          [attr.data-test-id]=\"testIds.nameInput\"\n        />\n      </cds-label>\n\n      <valtimo-auto-key-input\n        [mode]=\"'add'\"\n        [sourceText]=\"nameControl.value\"\n        formControlName=\"caseDefinitionKey\"\n        labelTranslationKey=\"caseManagement.createDefinition.key\"\n      >\n      </valtimo-auto-key-input>\n\n      <div class=\"valtimo-definition-uploader__version-label\">\n        <label class=\"cds--label\">\n          {{ 'caseManagement.createDefinition.version' | translate }}\n        </label>\n        <div\n          class=\"valtimo-definition-uploader__version-field\"\n          [attr.data-test-id]=\"testIds.versionTag\"\n        >\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"obs.preview?.isFinal ? 'green' : 'red'\">\n            {{\n              (obs.preview?.isFinal\n                ? 'caseManagement.importDefinition.configure.finalTag'\n                : 'caseManagement.importDefinition.configure.draftTag'\n              ) | translate\n            }}\n          </cds-tag>\n          <span>{{ obs.preview?.versionTag }}</span>\n        </div>\n      </div>\n\n      <ng-container [ngSwitch]=\"obs.importWarning\">\n        <cds-inline-notification\n          *ngSwitchCase=\"IMPORT_WARNING.NEW_VERSION\"\n          [notificationObj]=\"{\n            type: 'info',\n            title: ('caseManagement.importDefinition.configure.newVersionWarning.title' | translate),\n            message: ('caseManagement.importDefinition.configure.newVersionWarning.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngSwitchCase=\"IMPORT_WARNING.EXISTING_DRAFT\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: ('caseManagement.importDefinition.configure.existingDraftWarning.title' | translate),\n              message: ('caseManagement.importDefinition.configure.existingDraftWarning.message' | translate),\n              showClose: false,\n              lowContrast: true\n            }\"\n          ></cds-inline-notification>\n          <cds-checkbox\n            [attr.data-test-id]=\"testIds.overrideCheckbox\"\n            (checkedChange)=\"overrideConfirmed$.next($event)\"\n          >\n            {{\n              'caseManagement.importDefinition.configure.overrideConfirm' | translate\n            }}\n          </cds-checkbox>\n        </ng-container>\n\n        <cds-inline-notification\n          *ngSwitchCase=\"IMPORT_WARNING.EXISTING_FINAL\"\n          [notificationObj]=\"{\n            type: 'error',\n            title: ('caseManagement.importDefinition.configure.existingFinalWarning.title' | translate),\n            message: ('caseManagement.importDefinition.configure.existingFinalWarning.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n      </ng-container>\n    </form>\n\n    <div\n      *ngSwitchCase=\"UPLOAD_STEP.PLUGINS\"\n      [formGroup]=\"pluginMappingForm\"\n      class=\"valtimo-definition-uploader__plugins\"\n    >\n      <p class=\"valtimo-definition-uploader__plugins-description\">\n        {{ 'caseManagement.importDefinition.plugins.description' | translate }}\n      </p>\n\n      <ng-container *ngIf=\"hasUnidentifiablePlugins$ | async\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'warning',\n            title: ('caseManagement.importDefinition.plugins.unidentifiable.title' | translate),\n            message: ('caseManagement.importDefinition.plugins.unidentifiable.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n      </ng-container>\n\n      <ng-container *ngIf=\"(pluginMappingRows$ | async)?.length > 0; else noPlugins\">\n        <div class=\"valtimo-definition-uploader__plugins-header\">\n          <span>{{ 'caseManagement.importDefinition.plugins.source' | translate }}</span>\n          <span></span>\n          <span>{{ 'caseManagement.importDefinition.plugins.target' | translate }}</span>\n        </div>\n\n        <div\n          *ngFor=\"let row of pluginMappingRows$ | async; trackBy: trackBySourceId\"\n          class=\"valtimo-definition-uploader__plugins-row\"\n          [cdsLayer]=\"1\"\n          [attr.data-test-id]=\"testIds.pluginMappingRow\"\n        >\n          <div class=\"valtimo-definition-uploader__plugins-source\">\n            {{ row.pluginDefinitionTitle }}\n          </div>\n          <svg\n            class=\"valtimo-definition-uploader__plugins-arrow\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 32 32\"\n          >\n            <path d=\"M18 6l-1.4 1.4L24.2 15H4v2h20.2l-7.6 7.6L18 26l10-10z\" />\n          </svg>\n          <cds-combo-box\n            *ngIf=\"row.status === 'available'\"\n            [attr.data-test-id]=\"testIds.pluginMappingDropdown\"\n            [items]=\"row.listItems\"\n            itemValueKey=\"id\"\n            [formControlName]=\"row.sourcePluginConfigurationId\"\n            [placeholder]=\"'caseManagement.importDefinition.plugins.selectPlaceholder' | translate\"\n            [cdsLayer]=\"2\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            (clear)=\"onPluginMappingClear(row.sourcePluginConfigurationId)\"\n          >\n            <cds-dropdown-list></cds-dropdown-list>\n          </cds-combo-box>\n          <div *ngIf=\"row.status === 'not-installed'\" class=\"valtimo-definition-uploader__plugins-unavailable valtimo-definition-uploader__plugins-unavailable--error\">\n            {{ 'caseManagement.importDefinition.plugins.notInstalled' | translate }}\n          </div>\n          <div *ngIf=\"row.status === 'no-configurations'\" class=\"valtimo-definition-uploader__plugins-unavailable\">\n            {{ 'caseManagement.importDefinition.plugins.noConfigurations' | translate }}\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #noPlugins>\n        <ng-container *ngIf=\"!(hasUnidentifiablePlugins$ | async)\">\n          <valtimo-case-management-upload-step\n            [message]=\"'caseManagement.importDefinition.plugins.noPlugins' | translate\"\n            [title]=\"'caseManagement.importDefinition.plugins.noPluginsTitle' | translate\"\n            [illustration]=\"'valtimo-layout/img/plugins.svg'\"\n          >\n          </valtimo-case-management-upload-step>\n        </ng-container>\n      </ng-template>\n    </div>\n\n    <cds-progress-bar\n      *ngSwitchCase=\"UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__progress-bar\"\n      [label]=\"'caseManagement.importDefinition.progressBar.label' | translate\"\n      [status]=\"obs.uploadStatus\"\n      [helperText]=\"'caseManagement.importDefinition.progressBar.' + obs.uploadStatus | translate\"\n    ></cds-progress-bar>\n  </section>\n\n  <cds-modal-footer\n    class=\"valtimo-definition-uploader__footer\"\n    [class.valtimo-definition-uploader__footer--double]=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\"\n  >\n    <button\n      *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onCloseModal(obs.isStepAfterUpload)\"\n    >\n      {{ (obs.isStepAfterUpload ? 'interface.skip' : 'interface.cancel') | translate }}\n    </button>\n\n    <div class=\"valtimo-definition-uploader__actions\">\n      <button\n        *ngIf=\"obs.backButtonEnabled\"\n        cdsButton=\"secondary\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n        (click)=\"onBackClick(obs.activeStep)\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.DASHBOARD\"\n        cdsButton=\"primary\"\n        [attr.data-test-id]=\"testIds.nextButton\"\n        [disabled]=\"obs.nextButtonDisabled\"\n        (click)=\"onNextClick(obs.activeStep)\"\n      >\n        {{\n          (obs.activeStep === UPLOAD_STEP.PLUGINS\n            ? 'caseManagement.importDefinition.startUpload'\n            : 'interface.next'\n          ) | translate\n        }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus === UPLOAD_STATUS.ERROR || obs.activeStep === UPLOAD_STEP.DASHBOARD\"\n        class=\"valtimo-definition-uploader__cancel\"\n        [attr.data-test-id]=\"testIds.finishButton\"\n        cdsButton=\"primary\"\n        (click)=\"onCloseModal(true)\"\n      >\n        {{ 'interface.finish' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-uploader__content,.valtimo-definition-uploader__content form{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__footer ::ng-deep .cds--modal-footer{justify-content:unset!important;display:grid!important;grid-template-columns:1fr 1fr 2fr!important;grid-template-areas:\"cancel . actions\"!important}.valtimo-definition-uploader__footer--double ::ng-deep .cds--modal-footer{grid-template-columns:1fr 1fr!important;grid-template-areas:\"cancel actions\"!important}.valtimo-definition-uploader__progress-bar{height:100%;display:flex;flex-direction:column;justify-content:center}.valtimo-definition-uploader__error{display:flex;align-items:center;gap:10px;color:#da1e28;fill:#da1e28;font-size:12px}.valtimo-definition-uploader__cancel{grid-area:cancel;width:100%}.valtimo-definition-uploader__actions{grid-area:actions;display:flex}.valtimo-definition-uploader__actions button{flex:unset;width:100%}.valtimo-definition-uploader__file-uploader ::ng-deep cds-file{max-width:unset}.valtimo-definition-uploader__configure{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__version-field{width:100%;display:flex;gap:8px;align-items:center;height:2.5rem;padding:0 1rem;background-color:var(--cds-layer-01);border-bottom:1px solid var(--cds-border-strong)}.valtimo-definition-uploader__version-field span{color:var(--cds-text-primary);font-size:.875rem;line-height:1.125rem;font-weight:400;letter-spacing:.16px}.valtimo-definition-uploader__plugins{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__plugins-description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}.valtimo-definition-uploader__plugins-header{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center}.valtimo-definition-uploader__plugins-header span{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.32px;color:var(--cds-text-secondary)}.valtimo-definition-uploader__plugins-row{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center;padding:12px;background-color:var(--cds-layer)}.valtimo-definition-uploader__plugins-source{font-size:.875rem;font-weight:400;padding:0 1rem;height:2.5rem;display:flex;align-items:center}.valtimo-definition-uploader__plugins-arrow{fill:var(--cds-text-secondary);justify-self:center}.valtimo-definition-uploader__plugins-select{width:100%}.valtimo-definition-uploader__plugins-unavailable{font-size:.875rem;color:var(--cds-text-disabled);padding:0 1rem;height:2.5rem;display:flex;align-items:center}.valtimo-definition-uploader__plugins-unavailable--error{color:var(--cds-text-error)}.valtimo-definition-uploader ::ng-deep .cds--modal-container{height:550px}.valtimo-definition-uploader ::ng-deep .cds--checkbox-label-text{color:#000}\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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.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: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: i2.FileUploader, selector: "cds-file-uploader, ibm-file-uploader", inputs: ["buttonText", "buttonType", "title", "description", "accept", "multiple", "skeleton", "size", "fileItemSize", "drop", "dropText", "fileUploaderId", "files", "disabled"], outputs: ["filesChange"] }, { kind: "component", type: i2.ProgressBar, selector: "cds-progress-bar, ibm-progress-bar", inputs: ["value", "id", "label", "helperText", "max", "type", "status", "size"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i7.AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "mode", "usedKeys", "sourceText"] }, { kind: "component", type: CaseManagementUploadStepComponent, selector: "valtimo-case-management-upload-step", inputs: ["illustration", "message", "title"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementUploadComponent, deps: [{ token: CaseManagementService }, { token: i1$4.FormBuilder }, { token: i3.TranslateService }, { token: i3$1.PluginManagementService }, { token: i3$1.PluginTranslationService }, { token: i3$1.ExternalPluginService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementUploadComponent, isStandalone: false, selector: "valtimo-case-management-upload", inputs: { open: "open" }, outputs: { closeModal: "closeModal" }, 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<cds-modal\n  *ngIf=\"{\n    activeStep: activeStep$ | async,\n    backButtonEnabled: backButtonEnabled$ | async,\n    isStepAfterUpload: isStepAfterUpload$ | async,\n    nextButtonDisabled: nextButtonDisabled$ | async,\n    showCloseButton: showCloseButton$ | async,\n    uploadStatus: uploadStatus$ | async,\n    preview: preview$ | async,\n    importWarning: importWarning$ | async,\n  } as obs\"\n  valtimoCdsModal\n  [open]=\"open\"\n  showFooter=\"true\"\n  class=\"valtimo-definition-uploader\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header\n    [showCloseButton]=\"obs.showCloseButton\"\n    (closeSelect)=\"onCloseModal(obs.isStepAfterUpload && obs.uploadStatus !== UPLOAD_STATUS.ERROR)\"\n  >\n    <h3 cdsModalHeaderHeading>\n      {{ 'caseManagement.importDefinition.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section\n    [ngSwitch]=\"obs.activeStep\"\n    [cdsLayer]=\"1\"\n    cdsModalContent\n    class=\"valtimo-definition-uploader__content\"\n  >\n    <ng-template ngSwitchDefault>\n      <valtimo-case-management-upload-step\n        [message]=\"\n          'caseManagement.importDefinition.steps.' + obs.activeStep + '.message' | translate\n        \"\n        [title]=\"'caseManagement.importDefinition.steps.' + obs.activeStep + '.title' | translate\"\n        [illustration]=\"'valtimo-layout/img/' + obs.activeStep + '.svg'\"\n      >\n      </valtimo-case-management-upload-step>\n    </ng-template>\n\n    <form *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\" [formGroup]=\"form\">\n      <cds-file-uploader\n        [accept]=\"acceptedFiles\"\n        [buttonText]=\"'caseManagement.importDefinition.upload.buttonText' | translate\"\n        [description]=\"'caseManagement.importDefinition.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'caseManagement.importDefinition.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        [attr.data-test-id]=\"testIds.fileUploader\"\n        class=\"valtimo-definition-uploader__file-uploader\"\n      >\n      </cds-file-uploader>\n    </form>\n\n    <form\n      *ngSwitchCase=\"UPLOAD_STEP.CONFIGURE\"\n      [formGroup]=\"configureForm\"\n      class=\"valtimo-definition-uploader__configure\"\n    >\n      <cds-label>\n        {{ 'caseManagement.createDefinition.name' | translate }}\n        <input\n          formControlName=\"name\"\n          cdsText\n          [attr.data-test-id]=\"testIds.nameInput\"\n        />\n      </cds-label>\n\n      <valtimo-auto-key-input\n        [mode]=\"'add'\"\n        [sourceText]=\"nameControl.value\"\n        formControlName=\"caseDefinitionKey\"\n        labelTranslationKey=\"caseManagement.createDefinition.key\"\n      >\n      </valtimo-auto-key-input>\n\n      <div class=\"valtimo-definition-uploader__version-label\">\n        <label class=\"cds--label\">\n          {{ 'caseManagement.createDefinition.version' | translate }}\n        </label>\n        <div\n          class=\"valtimo-definition-uploader__version-field\"\n          [attr.data-test-id]=\"testIds.versionTag\"\n        >\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"obs.preview?.isFinal ? 'green' : 'red'\">\n            {{\n              (obs.preview?.isFinal\n                ? 'caseManagement.importDefinition.configure.finalTag'\n                : 'caseManagement.importDefinition.configure.draftTag'\n              ) | translate\n            }}\n          </cds-tag>\n          <span>{{ obs.preview?.versionTag }}</span>\n        </div>\n      </div>\n\n      <ng-container [ngSwitch]=\"obs.importWarning\">\n        <cds-inline-notification\n          *ngSwitchCase=\"IMPORT_WARNING.NEW_VERSION\"\n          [notificationObj]=\"{\n            type: 'info',\n            title: ('caseManagement.importDefinition.configure.newVersionWarning.title' | translate),\n            message: ('caseManagement.importDefinition.configure.newVersionWarning.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngSwitchCase=\"IMPORT_WARNING.EXISTING_DRAFT\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: ('caseManagement.importDefinition.configure.existingDraftWarning.title' | translate),\n              message: ('caseManagement.importDefinition.configure.existingDraftWarning.message' | translate),\n              showClose: false,\n              lowContrast: true\n            }\"\n          ></cds-inline-notification>\n          <cds-checkbox\n            [attr.data-test-id]=\"testIds.overrideCheckbox\"\n            (checkedChange)=\"overrideConfirmed$.next($event)\"\n          >\n            {{\n              'caseManagement.importDefinition.configure.overrideConfirm' | translate\n            }}\n          </cds-checkbox>\n        </ng-container>\n\n        <cds-inline-notification\n          *ngSwitchCase=\"IMPORT_WARNING.EXISTING_FINAL\"\n          [notificationObj]=\"{\n            type: 'error',\n            title: ('caseManagement.importDefinition.configure.existingFinalWarning.title' | translate),\n            message: ('caseManagement.importDefinition.configure.existingFinalWarning.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n      </ng-container>\n    </form>\n\n    <div\n      *ngSwitchCase=\"UPLOAD_STEP.PLUGINS\"\n      [formGroup]=\"pluginMappingForm\"\n      class=\"valtimo-definition-uploader__plugins\"\n    >\n      <p class=\"valtimo-definition-uploader__plugins-description\">\n        {{ 'caseManagement.importDefinition.plugins.description' | translate }}\n      </p>\n\n      <ng-container *ngIf=\"hasUnidentifiablePlugins$ | async\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'warning',\n            title: ('caseManagement.importDefinition.plugins.unidentifiable.title' | translate),\n            message: ('caseManagement.importDefinition.plugins.unidentifiable.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n      </ng-container>\n\n      <ng-container *ngIf=\"(pluginMappingRows$ | async)?.length > 0; else noPlugins\">\n        <div class=\"valtimo-definition-uploader__plugins-header\">\n          <span>{{ 'caseManagement.importDefinition.plugins.source' | translate }}</span>\n          <span></span>\n          <span>{{ 'caseManagement.importDefinition.plugins.target' | translate }}</span>\n        </div>\n\n        <div\n          *ngFor=\"let row of pluginMappingRows$ | async; trackBy: trackBySourceId\"\n          class=\"valtimo-definition-uploader__plugins-row\"\n          [cdsLayer]=\"1\"\n          [attr.data-test-id]=\"testIds.pluginMappingRow\"\n        >\n          <div class=\"valtimo-definition-uploader__plugins-source\">\n            {{ row.pluginDefinitionTitle }}\n          </div>\n          <svg\n            class=\"valtimo-definition-uploader__plugins-arrow\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 32 32\"\n          >\n            <path d=\"M18 6l-1.4 1.4L24.2 15H4v2h20.2l-7.6 7.6L18 26l10-10z\" />\n          </svg>\n          <div *ngIf=\"row.status === 'available'\" class=\"valtimo-definition-uploader__plugins-target\">\n            <cds-combo-box\n              [attr.data-test-id]=\"testIds.pluginMappingDropdown\"\n              [items]=\"row.listItems\"\n              itemValueKey=\"id\"\n              [formControlName]=\"row.sourcePluginConfigurationId\"\n              [placeholder]=\"'caseManagement.importDefinition.plugins.selectPlaceholder' | translate\"\n              [cdsLayer]=\"2\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              (clear)=\"onPluginMappingClear(row.sourcePluginConfigurationId)\"\n            >\n              <cds-dropdown-list></cds-dropdown-list>\n            </cds-combo-box>\n\n            <div\n              *ngIf=\"selectedConfigurationVersion(row) as mismatchedVersion\"\n              class=\"valtimo-definition-uploader__plugins-version-warning\"\n            >\n              {{\n                'caseManagement.importDefinition.plugins.externalVersionMismatchWarning'\n                  | translate\n                    : {\n                        selectedVersion: mismatchedVersion,\n                        requiredVersion: row.pluginDefinitionVersion\n                      }\n              }}\n            </div>\n          </div>\n          <div *ngIf=\"row.status === 'not-installed'\" class=\"valtimo-definition-uploader__plugins-unavailable valtimo-definition-uploader__plugins-unavailable--error\">\n            {{ 'caseManagement.importDefinition.plugins.notInstalled' | translate }}\n          </div>\n          <div *ngIf=\"row.status === 'no-configurations'\" class=\"valtimo-definition-uploader__plugins-unavailable\">\n            {{ 'caseManagement.importDefinition.plugins.noConfigurations' | translate }}\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #noPlugins>\n        <ng-container *ngIf=\"!(hasUnidentifiablePlugins$ | async)\">\n          <valtimo-case-management-upload-step\n            [message]=\"'caseManagement.importDefinition.plugins.noPlugins' | translate\"\n            [title]=\"'caseManagement.importDefinition.plugins.noPluginsTitle' | translate\"\n            [illustration]=\"'valtimo-layout/img/plugins.svg'\"\n          >\n          </valtimo-case-management-upload-step>\n        </ng-container>\n      </ng-template>\n    </div>\n\n    <cds-progress-bar\n      *ngSwitchCase=\"UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__progress-bar\"\n      [label]=\"'caseManagement.importDefinition.progressBar.label' | translate\"\n      [status]=\"obs.uploadStatus\"\n      [helperText]=\"'caseManagement.importDefinition.progressBar.' + obs.uploadStatus | translate\"\n    ></cds-progress-bar>\n  </section>\n\n  <cds-modal-footer\n    class=\"valtimo-definition-uploader__footer\"\n    [class.valtimo-definition-uploader__footer--double]=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\"\n  >\n    <button\n      *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onCloseModal(obs.isStepAfterUpload)\"\n    >\n      {{ (obs.isStepAfterUpload ? 'interface.skip' : 'interface.cancel') | translate }}\n    </button>\n\n    <div class=\"valtimo-definition-uploader__actions\">\n      <button\n        *ngIf=\"obs.backButtonEnabled\"\n        cdsButton=\"secondary\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n        (click)=\"onBackClick(obs.activeStep)\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.DASHBOARD\"\n        cdsButton=\"primary\"\n        [attr.data-test-id]=\"testIds.nextButton\"\n        [disabled]=\"obs.nextButtonDisabled\"\n        (click)=\"onNextClick(obs.activeStep)\"\n      >\n        {{\n          (obs.activeStep === UPLOAD_STEP.PLUGINS\n            ? 'caseManagement.importDefinition.startUpload'\n            : 'interface.next'\n          ) | translate\n        }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus === UPLOAD_STATUS.ERROR || obs.activeStep === UPLOAD_STEP.DASHBOARD\"\n        class=\"valtimo-definition-uploader__cancel\"\n        [attr.data-test-id]=\"testIds.finishButton\"\n        cdsButton=\"primary\"\n        (click)=\"onCloseModal(true)\"\n      >\n        {{ 'interface.finish' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-uploader__content,.valtimo-definition-uploader__content form{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__footer ::ng-deep .cds--modal-footer{justify-content:unset!important;display:grid!important;grid-template-columns:1fr 1fr 2fr!important;grid-template-areas:\"cancel . actions\"!important}.valtimo-definition-uploader__footer--double ::ng-deep .cds--modal-footer{grid-template-columns:1fr 1fr!important;grid-template-areas:\"cancel actions\"!important}.valtimo-definition-uploader__progress-bar{height:100%;display:flex;flex-direction:column;justify-content:center}.valtimo-definition-uploader__error{display:flex;align-items:center;gap:10px;color:#da1e28;fill:#da1e28;font-size:12px}.valtimo-definition-uploader__cancel{grid-area:cancel;width:100%}.valtimo-definition-uploader__actions{grid-area:actions;display:flex}.valtimo-definition-uploader__actions button{flex:unset;width:100%}.valtimo-definition-uploader__file-uploader ::ng-deep cds-file{max-width:unset}.valtimo-definition-uploader__configure{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__version-field{width:100%;display:flex;gap:8px;align-items:center;height:2.5rem;padding:0 1rem;background-color:var(--cds-layer-01);border-bottom:1px solid var(--cds-border-strong)}.valtimo-definition-uploader__version-field span{color:var(--cds-text-primary);font-size:.875rem;line-height:1.125rem;font-weight:400;letter-spacing:.16px}.valtimo-definition-uploader__plugins{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__plugins-description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}.valtimo-definition-uploader__plugins-header{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center}.valtimo-definition-uploader__plugins-header span{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.32px;color:var(--cds-text-secondary)}.valtimo-definition-uploader__plugins-row{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center;padding:12px;background-color:var(--cds-layer)}.valtimo-definition-uploader__plugins-source{font-size:.875rem;font-weight:400;padding:0 1rem;height:2.5rem;display:flex;align-items:center}.valtimo-definition-uploader__plugins-arrow{fill:var(--cds-text-secondary);justify-self:center}.valtimo-definition-uploader__plugins-select{width:100%}.valtimo-definition-uploader__plugins-target{display:flex;flex-direction:column;gap:var(--cds-spacing-02);align-self:center}.valtimo-definition-uploader__plugins-version-warning{font-size:.75rem;color:var(--cds-support-warning);padding:0 1rem}.valtimo-definition-uploader__plugins-unavailable{font-size:.875rem;color:var(--cds-text-disabled);padding:0 1rem;height:2.5rem;display:flex;align-items:center}.valtimo-definition-uploader__plugins-unavailable--error{color:var(--cds-text-error)}.valtimo-definition-uploader ::ng-deep .cds--modal-container{height:550px}.valtimo-definition-uploader ::ng-deep .cds--checkbox-label-text{color:#000}\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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2.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: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "component", type: i2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: i2.FileUploader, selector: "cds-file-uploader, ibm-file-uploader", inputs: ["buttonText", "buttonType", "title", "description", "accept", "multiple", "skeleton", "size", "fileItemSize", "drop", "dropText", "fileUploaderId", "files", "disabled"], outputs: ["filesChange"] }, { kind: "component", type: i2.ProgressBar, selector: "cds-progress-bar, ibm-progress-bar", inputs: ["value", "id", "label", "helperText", "max", "type", "status", "size"] }, { kind: "directive", type: i2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: i7.AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "dataTestId", "name", "disabled", "defaultValue", "margin", "mode", "usedKeys", "sourceText"] }, { kind: "component", type: CaseManagementUploadStepComponent, selector: "valtimo-case-management-upload-step", inputs: ["illustration", "message", "title"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementUploadComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-case-management-upload', changeDetection: ChangeDetectionStrategy.OnPush, 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<cds-modal\n  *ngIf=\"{\n    activeStep: activeStep$ | async,\n    backButtonEnabled: backButtonEnabled$ | async,\n    isStepAfterUpload: isStepAfterUpload$ | async,\n    nextButtonDisabled: nextButtonDisabled$ | async,\n    showCloseButton: showCloseButton$ | async,\n    uploadStatus: uploadStatus$ | async,\n    preview: preview$ | async,\n    importWarning: importWarning$ | async,\n  } as obs\"\n  valtimoCdsModal\n  [open]=\"open\"\n  showFooter=\"true\"\n  class=\"valtimo-definition-uploader\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header\n    [showCloseButton]=\"obs.showCloseButton\"\n    (closeSelect)=\"onCloseModal(obs.isStepAfterUpload && obs.uploadStatus !== UPLOAD_STATUS.ERROR)\"\n  >\n    <h3 cdsModalHeaderHeading>\n      {{ 'caseManagement.importDefinition.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section\n    [ngSwitch]=\"obs.activeStep\"\n    [cdsLayer]=\"1\"\n    cdsModalContent\n    class=\"valtimo-definition-uploader__content\"\n  >\n    <ng-template ngSwitchDefault>\n      <valtimo-case-management-upload-step\n        [message]=\"\n          'caseManagement.importDefinition.steps.' + obs.activeStep + '.message' | translate\n        \"\n        [title]=\"'caseManagement.importDefinition.steps.' + obs.activeStep + '.title' | translate\"\n        [illustration]=\"'valtimo-layout/img/' + obs.activeStep + '.svg'\"\n      >\n      </valtimo-case-management-upload-step>\n    </ng-template>\n\n    <form *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\" [formGroup]=\"form\">\n      <cds-file-uploader\n        [accept]=\"acceptedFiles\"\n        [buttonText]=\"'caseManagement.importDefinition.upload.buttonText' | translate\"\n        [description]=\"'caseManagement.importDefinition.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'caseManagement.importDefinition.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        [attr.data-test-id]=\"testIds.fileUploader\"\n        class=\"valtimo-definition-uploader__file-uploader\"\n      >\n      </cds-file-uploader>\n    </form>\n\n    <form\n      *ngSwitchCase=\"UPLOAD_STEP.CONFIGURE\"\n      [formGroup]=\"configureForm\"\n      class=\"valtimo-definition-uploader__configure\"\n    >\n      <cds-label>\n        {{ 'caseManagement.createDefinition.name' | translate }}\n        <input\n          formControlName=\"name\"\n          cdsText\n          [attr.data-test-id]=\"testIds.nameInput\"\n        />\n      </cds-label>\n\n      <valtimo-auto-key-input\n        [mode]=\"'add'\"\n        [sourceText]=\"nameControl.value\"\n        formControlName=\"caseDefinitionKey\"\n        labelTranslationKey=\"caseManagement.createDefinition.key\"\n      >\n      </valtimo-auto-key-input>\n\n      <div class=\"valtimo-definition-uploader__version-label\">\n        <label class=\"cds--label\">\n          {{ 'caseManagement.createDefinition.version' | translate }}\n        </label>\n        <div\n          class=\"valtimo-definition-uploader__version-field\"\n          [attr.data-test-id]=\"testIds.versionTag\"\n        >\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"obs.preview?.isFinal ? 'green' : 'red'\">\n            {{\n              (obs.preview?.isFinal\n                ? 'caseManagement.importDefinition.configure.finalTag'\n                : 'caseManagement.importDefinition.configure.draftTag'\n              ) | translate\n            }}\n          </cds-tag>\n          <span>{{ obs.preview?.versionTag }}</span>\n        </div>\n      </div>\n\n      <ng-container [ngSwitch]=\"obs.importWarning\">\n        <cds-inline-notification\n          *ngSwitchCase=\"IMPORT_WARNING.NEW_VERSION\"\n          [notificationObj]=\"{\n            type: 'info',\n            title: ('caseManagement.importDefinition.configure.newVersionWarning.title' | translate),\n            message: ('caseManagement.importDefinition.configure.newVersionWarning.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngSwitchCase=\"IMPORT_WARNING.EXISTING_DRAFT\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: ('caseManagement.importDefinition.configure.existingDraftWarning.title' | translate),\n              message: ('caseManagement.importDefinition.configure.existingDraftWarning.message' | translate),\n              showClose: false,\n              lowContrast: true\n            }\"\n          ></cds-inline-notification>\n          <cds-checkbox\n            [attr.data-test-id]=\"testIds.overrideCheckbox\"\n            (checkedChange)=\"overrideConfirmed$.next($event)\"\n          >\n            {{\n              'caseManagement.importDefinition.configure.overrideConfirm' | translate\n            }}\n          </cds-checkbox>\n        </ng-container>\n\n        <cds-inline-notification\n          *ngSwitchCase=\"IMPORT_WARNING.EXISTING_FINAL\"\n          [notificationObj]=\"{\n            type: 'error',\n            title: ('caseManagement.importDefinition.configure.existingFinalWarning.title' | translate),\n            message: ('caseManagement.importDefinition.configure.existingFinalWarning.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n      </ng-container>\n    </form>\n\n    <div\n      *ngSwitchCase=\"UPLOAD_STEP.PLUGINS\"\n      [formGroup]=\"pluginMappingForm\"\n      class=\"valtimo-definition-uploader__plugins\"\n    >\n      <p class=\"valtimo-definition-uploader__plugins-description\">\n        {{ 'caseManagement.importDefinition.plugins.description' | translate }}\n      </p>\n\n      <ng-container *ngIf=\"hasUnidentifiablePlugins$ | async\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'warning',\n            title: ('caseManagement.importDefinition.plugins.unidentifiable.title' | translate),\n            message: ('caseManagement.importDefinition.plugins.unidentifiable.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n      </ng-container>\n\n      <ng-container *ngIf=\"(pluginMappingRows$ | async)?.length > 0; else noPlugins\">\n        <div class=\"valtimo-definition-uploader__plugins-header\">\n          <span>{{ 'caseManagement.importDefinition.plugins.source' | translate }}</span>\n          <span></span>\n          <span>{{ 'caseManagement.importDefinition.plugins.target' | translate }}</span>\n        </div>\n\n        <div\n          *ngFor=\"let row of pluginMappingRows$ | async; trackBy: trackBySourceId\"\n          class=\"valtimo-definition-uploader__plugins-row\"\n          [cdsLayer]=\"1\"\n          [attr.data-test-id]=\"testIds.pluginMappingRow\"\n        >\n          <div class=\"valtimo-definition-uploader__plugins-source\">\n            {{ row.pluginDefinitionTitle }}\n          </div>\n          <svg\n            class=\"valtimo-definition-uploader__plugins-arrow\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 32 32\"\n          >\n            <path d=\"M18 6l-1.4 1.4L24.2 15H4v2h20.2l-7.6 7.6L18 26l10-10z\" />\n          </svg>\n          <cds-combo-box\n            *ngIf=\"row.status === 'available'\"\n            [attr.data-test-id]=\"testIds.pluginMappingDropdown\"\n            [items]=\"row.listItems\"\n            itemValueKey=\"id\"\n            [formControlName]=\"row.sourcePluginConfigurationId\"\n            [placeholder]=\"'caseManagement.importDefinition.plugins.selectPlaceholder' | translate\"\n            [cdsLayer]=\"2\"\n            [appendInline]=\"true\"\n            [dropUp]=\"false\"\n            (clear)=\"onPluginMappingClear(row.sourcePluginConfigurationId)\"\n          >\n            <cds-dropdown-list></cds-dropdown-list>\n          </cds-combo-box>\n          <div *ngIf=\"row.status === 'not-installed'\" class=\"valtimo-definition-uploader__plugins-unavailable valtimo-definition-uploader__plugins-unavailable--error\">\n            {{ 'caseManagement.importDefinition.plugins.notInstalled' | translate }}\n          </div>\n          <div *ngIf=\"row.status === 'no-configurations'\" class=\"valtimo-definition-uploader__plugins-unavailable\">\n            {{ 'caseManagement.importDefinition.plugins.noConfigurations' | translate }}\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #noPlugins>\n        <ng-container *ngIf=\"!(hasUnidentifiablePlugins$ | async)\">\n          <valtimo-case-management-upload-step\n            [message]=\"'caseManagement.importDefinition.plugins.noPlugins' | translate\"\n            [title]=\"'caseManagement.importDefinition.plugins.noPluginsTitle' | translate\"\n            [illustration]=\"'valtimo-layout/img/plugins.svg'\"\n          >\n          </valtimo-case-management-upload-step>\n        </ng-container>\n      </ng-template>\n    </div>\n\n    <cds-progress-bar\n      *ngSwitchCase=\"UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__progress-bar\"\n      [label]=\"'caseManagement.importDefinition.progressBar.label' | translate\"\n      [status]=\"obs.uploadStatus\"\n      [helperText]=\"'caseManagement.importDefinition.progressBar.' + obs.uploadStatus | translate\"\n    ></cds-progress-bar>\n  </section>\n\n  <cds-modal-footer\n    class=\"valtimo-definition-uploader__footer\"\n    [class.valtimo-definition-uploader__footer--double]=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\"\n  >\n    <button\n      *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onCloseModal(obs.isStepAfterUpload)\"\n    >\n      {{ (obs.isStepAfterUpload ? 'interface.skip' : 'interface.cancel') | translate }}\n    </button>\n\n    <div class=\"valtimo-definition-uploader__actions\">\n      <button\n        *ngIf=\"obs.backButtonEnabled\"\n        cdsButton=\"secondary\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n        (click)=\"onBackClick(obs.activeStep)\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.DASHBOARD\"\n        cdsButton=\"primary\"\n        [attr.data-test-id]=\"testIds.nextButton\"\n        [disabled]=\"obs.nextButtonDisabled\"\n        (click)=\"onNextClick(obs.activeStep)\"\n      >\n        {{\n          (obs.activeStep === UPLOAD_STEP.PLUGINS\n            ? 'caseManagement.importDefinition.startUpload'\n            : 'interface.next'\n          ) | translate\n        }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus === UPLOAD_STATUS.ERROR || obs.activeStep === UPLOAD_STEP.DASHBOARD\"\n        class=\"valtimo-definition-uploader__cancel\"\n        [attr.data-test-id]=\"testIds.finishButton\"\n        cdsButton=\"primary\"\n        (click)=\"onCloseModal(true)\"\n      >\n        {{ 'interface.finish' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-uploader__content,.valtimo-definition-uploader__content form{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__footer ::ng-deep .cds--modal-footer{justify-content:unset!important;display:grid!important;grid-template-columns:1fr 1fr 2fr!important;grid-template-areas:\"cancel . actions\"!important}.valtimo-definition-uploader__footer--double ::ng-deep .cds--modal-footer{grid-template-columns:1fr 1fr!important;grid-template-areas:\"cancel actions\"!important}.valtimo-definition-uploader__progress-bar{height:100%;display:flex;flex-direction:column;justify-content:center}.valtimo-definition-uploader__error{display:flex;align-items:center;gap:10px;color:#da1e28;fill:#da1e28;font-size:12px}.valtimo-definition-uploader__cancel{grid-area:cancel;width:100%}.valtimo-definition-uploader__actions{grid-area:actions;display:flex}.valtimo-definition-uploader__actions button{flex:unset;width:100%}.valtimo-definition-uploader__file-uploader ::ng-deep cds-file{max-width:unset}.valtimo-definition-uploader__configure{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__version-field{width:100%;display:flex;gap:8px;align-items:center;height:2.5rem;padding:0 1rem;background-color:var(--cds-layer-01);border-bottom:1px solid var(--cds-border-strong)}.valtimo-definition-uploader__version-field span{color:var(--cds-text-primary);font-size:.875rem;line-height:1.125rem;font-weight:400;letter-spacing:.16px}.valtimo-definition-uploader__plugins{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__plugins-description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}.valtimo-definition-uploader__plugins-header{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center}.valtimo-definition-uploader__plugins-header span{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.32px;color:var(--cds-text-secondary)}.valtimo-definition-uploader__plugins-row{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center;padding:12px;background-color:var(--cds-layer)}.valtimo-definition-uploader__plugins-source{font-size:.875rem;font-weight:400;padding:0 1rem;height:2.5rem;display:flex;align-items:center}.valtimo-definition-uploader__plugins-arrow{fill:var(--cds-text-secondary);justify-self:center}.valtimo-definition-uploader__plugins-select{width:100%}.valtimo-definition-uploader__plugins-unavailable{font-size:.875rem;color:var(--cds-text-disabled);padding:0 1rem;height:2.5rem;display:flex;align-items:center}.valtimo-definition-uploader__plugins-unavailable--error{color:var(--cds-text-error)}.valtimo-definition-uploader ::ng-deep .cds--modal-container{height:550px}.valtimo-definition-uploader ::ng-deep .cds--checkbox-label-text{color:#000}\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: CaseManagementService }, { type: i1$4.FormBuilder }, { type: i3.TranslateService }, { type: i4.PluginManagementService }, { type: i4.PluginTranslationService }], propDecorators: { open: [{
+            args: [{ standalone: false, selector: 'valtimo-case-management-upload', changeDetection: ChangeDetectionStrategy.OnPush, 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<cds-modal\n  *ngIf=\"{\n    activeStep: activeStep$ | async,\n    backButtonEnabled: backButtonEnabled$ | async,\n    isStepAfterUpload: isStepAfterUpload$ | async,\n    nextButtonDisabled: nextButtonDisabled$ | async,\n    showCloseButton: showCloseButton$ | async,\n    uploadStatus: uploadStatus$ | async,\n    preview: preview$ | async,\n    importWarning: importWarning$ | async,\n  } as obs\"\n  valtimoCdsModal\n  [open]=\"open\"\n  showFooter=\"true\"\n  class=\"valtimo-definition-uploader\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header\n    [showCloseButton]=\"obs.showCloseButton\"\n    (closeSelect)=\"onCloseModal(obs.isStepAfterUpload && obs.uploadStatus !== UPLOAD_STATUS.ERROR)\"\n  >\n    <h3 cdsModalHeaderHeading>\n      {{ 'caseManagement.importDefinition.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section\n    [ngSwitch]=\"obs.activeStep\"\n    [cdsLayer]=\"1\"\n    cdsModalContent\n    class=\"valtimo-definition-uploader__content\"\n  >\n    <ng-template ngSwitchDefault>\n      <valtimo-case-management-upload-step\n        [message]=\"\n          'caseManagement.importDefinition.steps.' + obs.activeStep + '.message' | translate\n        \"\n        [title]=\"'caseManagement.importDefinition.steps.' + obs.activeStep + '.title' | translate\"\n        [illustration]=\"'valtimo-layout/img/' + obs.activeStep + '.svg'\"\n      >\n      </valtimo-case-management-upload-step>\n    </ng-template>\n\n    <form *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\" [formGroup]=\"form\">\n      <cds-file-uploader\n        [accept]=\"acceptedFiles\"\n        [buttonText]=\"'caseManagement.importDefinition.upload.buttonText' | translate\"\n        [description]=\"'caseManagement.importDefinition.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'caseManagement.importDefinition.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        [attr.data-test-id]=\"testIds.fileUploader\"\n        class=\"valtimo-definition-uploader__file-uploader\"\n      >\n      </cds-file-uploader>\n    </form>\n\n    <form\n      *ngSwitchCase=\"UPLOAD_STEP.CONFIGURE\"\n      [formGroup]=\"configureForm\"\n      class=\"valtimo-definition-uploader__configure\"\n    >\n      <cds-label>\n        {{ 'caseManagement.createDefinition.name' | translate }}\n        <input\n          formControlName=\"name\"\n          cdsText\n          [attr.data-test-id]=\"testIds.nameInput\"\n        />\n      </cds-label>\n\n      <valtimo-auto-key-input\n        [mode]=\"'add'\"\n        [sourceText]=\"nameControl.value\"\n        formControlName=\"caseDefinitionKey\"\n        labelTranslationKey=\"caseManagement.createDefinition.key\"\n      >\n      </valtimo-auto-key-input>\n\n      <div class=\"valtimo-definition-uploader__version-label\">\n        <label class=\"cds--label\">\n          {{ 'caseManagement.createDefinition.version' | translate }}\n        </label>\n        <div\n          class=\"valtimo-definition-uploader__version-field\"\n          [attr.data-test-id]=\"testIds.versionTag\"\n        >\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"obs.preview?.isFinal ? 'green' : 'red'\">\n            {{\n              (obs.preview?.isFinal\n                ? 'caseManagement.importDefinition.configure.finalTag'\n                : 'caseManagement.importDefinition.configure.draftTag'\n              ) | translate\n            }}\n          </cds-tag>\n          <span>{{ obs.preview?.versionTag }}</span>\n        </div>\n      </div>\n\n      <ng-container [ngSwitch]=\"obs.importWarning\">\n        <cds-inline-notification\n          *ngSwitchCase=\"IMPORT_WARNING.NEW_VERSION\"\n          [notificationObj]=\"{\n            type: 'info',\n            title: ('caseManagement.importDefinition.configure.newVersionWarning.title' | translate),\n            message: ('caseManagement.importDefinition.configure.newVersionWarning.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n\n        <ng-container *ngSwitchCase=\"IMPORT_WARNING.EXISTING_DRAFT\">\n          <cds-inline-notification\n            [notificationObj]=\"{\n              type: 'warning',\n              title: ('caseManagement.importDefinition.configure.existingDraftWarning.title' | translate),\n              message: ('caseManagement.importDefinition.configure.existingDraftWarning.message' | translate),\n              showClose: false,\n              lowContrast: true\n            }\"\n          ></cds-inline-notification>\n          <cds-checkbox\n            [attr.data-test-id]=\"testIds.overrideCheckbox\"\n            (checkedChange)=\"overrideConfirmed$.next($event)\"\n          >\n            {{\n              'caseManagement.importDefinition.configure.overrideConfirm' | translate\n            }}\n          </cds-checkbox>\n        </ng-container>\n\n        <cds-inline-notification\n          *ngSwitchCase=\"IMPORT_WARNING.EXISTING_FINAL\"\n          [notificationObj]=\"{\n            type: 'error',\n            title: ('caseManagement.importDefinition.configure.existingFinalWarning.title' | translate),\n            message: ('caseManagement.importDefinition.configure.existingFinalWarning.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n      </ng-container>\n    </form>\n\n    <div\n      *ngSwitchCase=\"UPLOAD_STEP.PLUGINS\"\n      [formGroup]=\"pluginMappingForm\"\n      class=\"valtimo-definition-uploader__plugins\"\n    >\n      <p class=\"valtimo-definition-uploader__plugins-description\">\n        {{ 'caseManagement.importDefinition.plugins.description' | translate }}\n      </p>\n\n      <ng-container *ngIf=\"hasUnidentifiablePlugins$ | async\">\n        <cds-inline-notification\n          [notificationObj]=\"{\n            type: 'warning',\n            title: ('caseManagement.importDefinition.plugins.unidentifiable.title' | translate),\n            message: ('caseManagement.importDefinition.plugins.unidentifiable.message' | translate),\n            showClose: false,\n            lowContrast: true\n          }\"\n        ></cds-inline-notification>\n      </ng-container>\n\n      <ng-container *ngIf=\"(pluginMappingRows$ | async)?.length > 0; else noPlugins\">\n        <div class=\"valtimo-definition-uploader__plugins-header\">\n          <span>{{ 'caseManagement.importDefinition.plugins.source' | translate }}</span>\n          <span></span>\n          <span>{{ 'caseManagement.importDefinition.plugins.target' | translate }}</span>\n        </div>\n\n        <div\n          *ngFor=\"let row of pluginMappingRows$ | async; trackBy: trackBySourceId\"\n          class=\"valtimo-definition-uploader__plugins-row\"\n          [cdsLayer]=\"1\"\n          [attr.data-test-id]=\"testIds.pluginMappingRow\"\n        >\n          <div class=\"valtimo-definition-uploader__plugins-source\">\n            {{ row.pluginDefinitionTitle }}\n          </div>\n          <svg\n            class=\"valtimo-definition-uploader__plugins-arrow\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 32 32\"\n          >\n            <path d=\"M18 6l-1.4 1.4L24.2 15H4v2h20.2l-7.6 7.6L18 26l10-10z\" />\n          </svg>\n          <div *ngIf=\"row.status === 'available'\" class=\"valtimo-definition-uploader__plugins-target\">\n            <cds-combo-box\n              [attr.data-test-id]=\"testIds.pluginMappingDropdown\"\n              [items]=\"row.listItems\"\n              itemValueKey=\"id\"\n              [formControlName]=\"row.sourcePluginConfigurationId\"\n              [placeholder]=\"'caseManagement.importDefinition.plugins.selectPlaceholder' | translate\"\n              [cdsLayer]=\"2\"\n              [appendInline]=\"true\"\n              [dropUp]=\"false\"\n              (clear)=\"onPluginMappingClear(row.sourcePluginConfigurationId)\"\n            >\n              <cds-dropdown-list></cds-dropdown-list>\n            </cds-combo-box>\n\n            <div\n              *ngIf=\"selectedConfigurationVersion(row) as mismatchedVersion\"\n              class=\"valtimo-definition-uploader__plugins-version-warning\"\n            >\n              {{\n                'caseManagement.importDefinition.plugins.externalVersionMismatchWarning'\n                  | translate\n                    : {\n                        selectedVersion: mismatchedVersion,\n                        requiredVersion: row.pluginDefinitionVersion\n                      }\n              }}\n            </div>\n          </div>\n          <div *ngIf=\"row.status === 'not-installed'\" class=\"valtimo-definition-uploader__plugins-unavailable valtimo-definition-uploader__plugins-unavailable--error\">\n            {{ 'caseManagement.importDefinition.plugins.notInstalled' | translate }}\n          </div>\n          <div *ngIf=\"row.status === 'no-configurations'\" class=\"valtimo-definition-uploader__plugins-unavailable\">\n            {{ 'caseManagement.importDefinition.plugins.noConfigurations' | translate }}\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #noPlugins>\n        <ng-container *ngIf=\"!(hasUnidentifiablePlugins$ | async)\">\n          <valtimo-case-management-upload-step\n            [message]=\"'caseManagement.importDefinition.plugins.noPlugins' | translate\"\n            [title]=\"'caseManagement.importDefinition.plugins.noPluginsTitle' | translate\"\n            [illustration]=\"'valtimo-layout/img/plugins.svg'\"\n          >\n          </valtimo-case-management-upload-step>\n        </ng-container>\n      </ng-template>\n    </div>\n\n    <cds-progress-bar\n      *ngSwitchCase=\"UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__progress-bar\"\n      [label]=\"'caseManagement.importDefinition.progressBar.label' | translate\"\n      [status]=\"obs.uploadStatus\"\n      [helperText]=\"'caseManagement.importDefinition.progressBar.' + obs.uploadStatus | translate\"\n    ></cds-progress-bar>\n  </section>\n\n  <cds-modal-footer\n    class=\"valtimo-definition-uploader__footer\"\n    [class.valtimo-definition-uploader__footer--double]=\"obs.activeStep === UPLOAD_STEP.FILE_SELECT\"\n  >\n    <button\n      *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onCloseModal(obs.isStepAfterUpload)\"\n    >\n      {{ (obs.isStepAfterUpload ? 'interface.skip' : 'interface.cancel') | translate }}\n    </button>\n\n    <div class=\"valtimo-definition-uploader__actions\">\n      <button\n        *ngIf=\"obs.backButtonEnabled\"\n        cdsButton=\"secondary\"\n        [attr.data-test-id]=\"testIds.cancelButton\"\n        (click)=\"onBackClick(obs.activeStep)\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.DASHBOARD\"\n        cdsButton=\"primary\"\n        [attr.data-test-id]=\"testIds.nextButton\"\n        [disabled]=\"obs.nextButtonDisabled\"\n        (click)=\"onNextClick(obs.activeStep)\"\n      >\n        {{\n          (obs.activeStep === UPLOAD_STEP.PLUGINS\n            ? 'caseManagement.importDefinition.startUpload'\n            : 'interface.next'\n          ) | translate\n        }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus === UPLOAD_STATUS.ERROR || obs.activeStep === UPLOAD_STEP.DASHBOARD\"\n        class=\"valtimo-definition-uploader__cancel\"\n        [attr.data-test-id]=\"testIds.finishButton\"\n        cdsButton=\"primary\"\n        (click)=\"onCloseModal(true)\"\n      >\n        {{ 'interface.finish' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-uploader__content,.valtimo-definition-uploader__content form{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__footer ::ng-deep .cds--modal-footer{justify-content:unset!important;display:grid!important;grid-template-columns:1fr 1fr 2fr!important;grid-template-areas:\"cancel . actions\"!important}.valtimo-definition-uploader__footer--double ::ng-deep .cds--modal-footer{grid-template-columns:1fr 1fr!important;grid-template-areas:\"cancel actions\"!important}.valtimo-definition-uploader__progress-bar{height:100%;display:flex;flex-direction:column;justify-content:center}.valtimo-definition-uploader__error{display:flex;align-items:center;gap:10px;color:#da1e28;fill:#da1e28;font-size:12px}.valtimo-definition-uploader__cancel{grid-area:cancel;width:100%}.valtimo-definition-uploader__actions{grid-area:actions;display:flex}.valtimo-definition-uploader__actions button{flex:unset;width:100%}.valtimo-definition-uploader__file-uploader ::ng-deep cds-file{max-width:unset}.valtimo-definition-uploader__configure{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__version-field{width:100%;display:flex;gap:8px;align-items:center;height:2.5rem;padding:0 1rem;background-color:var(--cds-layer-01);border-bottom:1px solid var(--cds-border-strong)}.valtimo-definition-uploader__version-field span{color:var(--cds-text-primary);font-size:.875rem;line-height:1.125rem;font-weight:400;letter-spacing:.16px}.valtimo-definition-uploader__plugins{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__plugins-description{font-size:.875rem;line-height:1.25rem;color:var(--cds-text-secondary)}.valtimo-definition-uploader__plugins-header{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center}.valtimo-definition-uploader__plugins-header span{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.32px;color:var(--cds-text-secondary)}.valtimo-definition-uploader__plugins-row{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center;padding:12px;background-color:var(--cds-layer)}.valtimo-definition-uploader__plugins-source{font-size:.875rem;font-weight:400;padding:0 1rem;height:2.5rem;display:flex;align-items:center}.valtimo-definition-uploader__plugins-arrow{fill:var(--cds-text-secondary);justify-self:center}.valtimo-definition-uploader__plugins-select{width:100%}.valtimo-definition-uploader__plugins-target{display:flex;flex-direction:column;gap:var(--cds-spacing-02);align-self:center}.valtimo-definition-uploader__plugins-version-warning{font-size:.75rem;color:var(--cds-support-warning);padding:0 1rem}.valtimo-definition-uploader__plugins-unavailable{font-size:.875rem;color:var(--cds-text-disabled);padding:0 1rem;height:2.5rem;display:flex;align-items:center}.valtimo-definition-uploader__plugins-unavailable--error{color:var(--cds-text-error)}.valtimo-definition-uploader ::ng-deep .cds--modal-container{height:550px}.valtimo-definition-uploader ::ng-deep .cds--checkbox-label-text{color:#000}\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: CaseManagementService }, { type: i1$4.FormBuilder }, { type: i3.TranslateService }, { type: i3$1.PluginManagementService }, { type: i3$1.PluginTranslationService }, { type: i3$1.ExternalPluginService }], propDecorators: { open: [{
                 type: Input
             }], closeModal: [{
                 type: Output
@@ -6746,13 +7234,13 @@ class CaseManagementConnectModalComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementConnectModalComponent, deps: [{ token: i1$2.DocumentService }, { token: CaseDetailService }, { token: i2$1.GlobalNotificationService }, { token: i4$2.ProcessService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementConnectModalComponent, deps: [{ token: i1$2.DocumentService }, { token: CaseDetailService }, { token: i2$1.GlobalNotificationService }, { token: i4$1.ProcessService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseManagementConnectModalComponent, isStandalone: false, selector: "valtimo-case-management-connect-modal", outputs: { reloadProcessDocumentDefinitions: "reloadProcessDocumentDefinitions" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["caseConnectModal"], 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-modal\n  #caseConnectModal\n  elementId=\"caseConnectModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"Connect document definition to process definition\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <p>\n      {{ 'Select process definition for document definition' | translate }}\n      <strong>{{ documentDefinition.id.name }} *</strong>\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"newDocumentProcessDefinition\">\n        <option [ngValue]=\"null\">{{ 'caseManagement.selectProcessDef' | translate }}</option>\n        <option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [disabled]=\"processDocumentDefinitionExists[processDefinition.key]\"\n          [ngValue]=\"processDefinition\"\n        >\n          {{ processDefinition.name }} ({{ processDefinition.key }})\n        </option>\n      </select>\n    </div>\n    <p>\n      {{ 'Select options for the selected process' | translate }}\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionInit\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.processCreatesCase' | translate\n        }}</span>\n      </label>\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline ml-2 pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionStartableByUser\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.startableWithinCase' | translate\n        }}</span>\n      </label>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!newDocumentProcessDefinition\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "directive", type: i9.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseManagementConnectModalComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'valtimo-case-management-connect-modal', 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-modal\n  #caseConnectModal\n  elementId=\"caseConnectModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"Connect document definition to process definition\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <p>\n      {{ 'Select process definition for document definition' | translate }}\n      <strong>{{ documentDefinition.id.name }} *</strong>\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"newDocumentProcessDefinition\">\n        <option [ngValue]=\"null\">{{ 'caseManagement.selectProcessDef' | translate }}</option>\n        <option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [disabled]=\"processDocumentDefinitionExists[processDefinition.key]\"\n          [ngValue]=\"processDefinition\"\n        >\n          {{ processDefinition.name }} ({{ processDefinition.key }})\n        </option>\n      </select>\n    </div>\n    <p>\n      {{ 'Select options for the selected process' | translate }}\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionInit\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.processCreatesCase' | translate\n        }}</span>\n      </label>\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline ml-2 pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionStartableByUser\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.startableWithinCase' | translate\n        }}</span>\n      </label>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!newDocumentProcessDefinition\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\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: i1$2.DocumentService }, { type: CaseDetailService }, { type: i2$1.GlobalNotificationService }, { type: i4$2.ProcessService }, { type: i3.TranslateService }], propDecorators: { _modal: [{
+        }], ctorParameters: () => [{ type: i1$2.DocumentService }, { type: CaseDetailService }, { type: i2$1.GlobalNotificationService }, { type: i4$1.ProcessService }, { type: i3.TranslateService }], propDecorators: { _modal: [{
                 type: ViewChild,
                 args: ['caseConnectModal']
             }], reloadProcessDocumentDefinitions: [{