@valtimo/case 13.46.0 → 13.47.1

package/fesm2022/valtimo-case.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, ViewEncapsulation, Component, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, Optional, Inject, Input, ChangeDetectionStrategy, InjectionToken, signal, Pipe, inject, computed, NgModule } from '@angular/core';
-import { combineLatest, map, distinctUntilChanged, BehaviorSubject, take, Subject, switchMap, of, tap, filter, Subscription, startWith, forkJoin, shareReplay, catchError as catchError$1, first, fromEvent, from, debounceTime, defaultIfEmpty, EMPTY, merge, Observable } from 'rxjs';
+import { combineLatest, map, distinctUntilChanged, BehaviorSubject, take, Subject, switchMap, of, tap, filter, Subscription, startWith, forkJoin, shareReplay, catchError as catchError$1, throwError, concatMap, EMPTY, first, fromEvent, from, debounceTime, defaultIfEmpty, merge, Observable } from 'rxjs';
 import * as i1 from '@valtimo/shared';
 import { UploadProvider, ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, CaseListTab, TagColor, BaseApiService, ZGW_OBJECT_TYPE_COMPONENT_TOKEN, InterceptorSkip, FORM_VIEW_MODEL_TOKEN, ROLE_USER, ConfigModule, HttpLoaderFactory } from '@valtimo/shared';
 import * as i1$1 from '@angular/common/http';
@@ -13,7 +13,7 @@ import * as i1$3 from '@angular/router';
 import { NavigationStart, RouterModule } from '@angular/router';
 import * as i1$4 from 'ngx-logger';
 import * as i2 from '@valtimo/components';
-import { FormioOptionsImpl, TimelineItemImpl, CASES_WITHOUT_STATUS_KEY, CarbonListModule, FormIoModule, ViewType, QUICK_SEARCH_SERVICE, WidgetModule, AssignmentComponent, CurrentCarbonTheme, CARBON_THEME, ObserveSizeDirective, ValtimoCdsModalDirective, RenderInBodyComponent, ConfirmationModalModule, CarbonListComponent, JsonEditorComponent, SelectModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, ModalModule as ModalModule$1, SpinnerModule, UploaderModule, DropzoneModule, InputLabelModule, ParagraphModule, TableModule, VModalModule, SearchFieldsModule, InputModule as InputModule$1, FormModule as FormModule$1, IsArrayPipe, StatusSelectorComponent, RenderInPageHeaderDirective, OverflowMenuComponent, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, CaseTagsSelectorComponent, RemoveClassnamesDirective, ListColumnViewComponent, QuickSearchComponent } from '@valtimo/components';
+import { FormioOptionsImpl, TimelineItemImpl, CASES_WITHOUT_STATUS_KEY, CarbonListModule, FormIoModule, MdiIconViewerComponent, FitPageDirective, ViewType, QUICK_SEARCH_SERVICE, WidgetModule, AssignmentComponent, CurrentCarbonTheme, CARBON_THEME, ObserveSizeDirective, ValtimoCdsModalDirective, RenderInBodyComponent, ConfirmationModalModule, CarbonListComponent, JsonEditorComponent, SelectModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, ModalModule as ModalModule$1, SpinnerModule, UploaderModule, DropzoneModule, InputLabelModule, ParagraphModule, TableModule, VModalModule, SearchFieldsModule, InputModule as InputModule$1, FormModule as FormModule$1, IsArrayPipe, StatusSelectorComponent, RenderInPageHeaderDirective, OverflowMenuComponent, OverflowMenuOptionComponent, OverflowMenuTriggerComponent, CaseTagsSelectorComponent, RemoveClassnamesDirective, ListColumnViewComponent, QuickSearchComponent } from '@valtimo/components';
 export { CASES_WITHOUT_STATUS_KEY } from '@valtimo/components';
 import moment from 'moment';
 import { catchError, switchMap as switchMap$1, map as map$1, tap as tap$1, take as take$1, filter as filter$1 } from 'rxjs/operators';
@@ -35,7 +35,9 @@ import * as i2$2 from '@valtimo/access-control';
 import * as i1$5 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i5$1 from '@valtimo/layout';
-import { WidgetFieldComponent, WidgetCustomComponent, WidgetFormioComponent, WidgetTableComponent, WidgetCollectionComponent, WidgetMapComponent, WidgetPersonCardComponent, WidgetMetrolineComponent, WidgetHighlightComponent, WidgetImageComponent, WidgetTextComponent, WidgetType, WidgetContainerComponent } from '@valtimo/layout';
+import { WidgetFieldComponent, WidgetCustomComponent, WidgetFormioComponent, WidgetTableComponent, WidgetCollectionComponent, WidgetMapComponent, WidgetPersonCardComponent, WidgetMetrolineComponent, WidgetHighlightComponent, WidgetImageComponent, WidgetActionButtonComponent, WidgetTextComponent, WidgetType, WidgetContainerComponent } from '@valtimo/layout';
+import * as i6$2 from '@valtimo/plugin';
+import { derivePluginDataUrl, ExternalPluginIframeComponent, ExternalPluginSessionService } from '@valtimo/plugin';
 import { isEqual } from 'lodash-es';
 import { isEqual as isEqual$1 } from 'lodash';
 import * as i5$2 from '@valtimo/teams';
@@ -978,6 +980,7 @@ var ApiTabType;
     ApiTabType["FORMIO"] = "formio";
     ApiTabType["CUSTOM"] = "custom";
     ApiTabType["WIDGETS"] = "widgets";
+    ApiTabType["EXTERNAL_PLUGIN"] = "external_plugin";
     ApiTabType["MAP"] = "map";
 })(ApiTabType || (ApiTabType = {}));
 
@@ -1173,6 +1176,38 @@ var CaseInspectionTab;
     CaseInspectionTab["METADATA"] = "metadata";
 })(CaseInspectionTab || (CaseInspectionTab = {}));
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
@@ -2117,6 +2152,7 @@ const WIDGET_HEIGHT_1X = 200;
  */
 const CASE_DETAIL_GUTTER_SIZE = 32;
 const CASE_DETAIL_TASK_LIST_WIDTH = 412;
+const CASE_DETAIL_TASK_LIST_MIN_WIDTH = 320;
 const CASE_DETAIL_LEFT_PANEL_MIN_WIDTH = 320;
 const CASE_DETAIL_RIGHT_PANEL_MIN_WIDTHS = {
     extraSmall: 240,
@@ -3168,6 +3204,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }] } });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class CaseWidgetExternalPluginComponent extends WidgetProcess {
+    set documentId(value) {
+        this.baseDocumentId = value;
+        this._documentId$.next(value);
+    }
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this.$widget.set(value);
+        this.baseWidgetConfiguration = value;
+        this._widgetConfiguration$.next(value);
+    }
+    constructor(documentService, permissionService, caseTabService, caseWidgetsApiService, widgetLayoutService, widgetsService, sessionService) {
+        super(documentService, permissionService);
+        this.documentService = documentService;
+        this.permissionService = permissionService;
+        this.caseTabService = caseTabService;
+        this.caseWidgetsApiService = caseWidgetsApiService;
+        this.widgetLayoutService = widgetLayoutService;
+        this.widgetsService = widgetsService;
+        this.sessionService = sessionService;
+        this.$widget = signal(null);
+        this.$state = signal('loading');
+        this.$content = signal(null);
+        this.$pluginDataUrl = signal(null);
+        this.$iframeReady = signal(false);
+        this._documentId$ = new BehaviorSubject(null);
+        this._widgetConfiguration$ = new BehaviorSubject(null);
+        this._tabKey$ = this.caseTabService.activeTabKey$;
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this._subscriptions.add(combineLatest([
+            this._documentId$.pipe(filter((documentId) => !!documentId)),
+            this._widgetConfiguration$.pipe(filter((widget) => !!widget)),
+            this._tabKey$,
+        ])
+            .pipe(switchMap(([documentId, widget, tabKey]) => this.caseWidgetsApiService.getWidgetData(documentId, tabKey, widget.key).pipe(switchMap(content => content?.bundleUrl && content.configurationId
+            ? this.sessionService
+                .startSession(content.configurationId)
+                .pipe(map(() => content))
+            : throwError(() => new Error('bundle-unavailable'))))))
+            .subscribe({
+            next: content => this.onLoaded(content),
+            error: error => this.onFailed(error),
+        }));
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onIframeReady() {
+        this.$iframeReady.set(true);
+        this.markDataLoaded();
+    }
+    onProcessStartClick(process) {
+        if (!process.processDefinitionKey)
+            return;
+        this.widgetsService.startProcess(process.processDefinitionKey);
+    }
+    onLoaded(content) {
+        this.$content.set(content);
+        this.$pluginDataUrl.set(derivePluginDataUrl(content.bundleUrl));
+        this.$state.set('ready');
+    }
+    onFailed(error) {
+        this.$state.set(error?.message === 'bundle-unavailable' ? 'unavailable' : 'error');
+        // The widget will never reach iframe-ready, so release the container's loading state here —
+        // otherwise a tab (or divider group) holding only failed external-plugin widgets spins forever
+        // and keeps the error/unavailable message hidden. Mirrors what first-party widgets do on a 404.
+        this.markDataLoaded();
+    }
+    markDataLoaded() {
+        if (this.widgetUuid)
+            this.widgetLayoutService.setWidgetDataLoaded(this.widgetUuid);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseWidgetExternalPluginComponent, deps: [{ token: i1$2.DocumentService }, { token: i2$2.PermissionService }, { token: CaseTabService }, { token: CaseWidgetsApiService }, { token: i5$1.WidgetLayoutService }, { token: WidgetsService }, { token: i6$2.ExternalPluginSessionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseWidgetExternalPluginComponent, isStandalone: true, selector: "valtimo-case-widget-external-plugin", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetUuid: "widgetUuid" }, providers: [ExternalPluginSessionService], usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"case-widget-external-plugin\"\n  [class.case-widget-external-plugin--compact]=\"$widget()?.isCompact\"\n>\n  @if ($widget(); as widget) {\n    <section class=\"case-widget-external-plugin__header\">\n      <div class=\"case-widget-external-plugin__title-container\">\n        <valtimo-mdi-icon-viewer\n          *ngIf=\"widget.icon\"\n          [mdiIcon]=\"widget.icon\"\n        ></valtimo-mdi-icon-viewer>\n\n        <span class=\"case-widget-external-plugin__title\" [attr.title]=\"widget.title\">\n          {{ widget.title }}\n        </span>\n      </div>\n\n      @if (\n        widget.actions?.length === 1 &&\n        widget.actions[0]?.processDefinitionKey &&\n        (canCreateCamundaExecution$ | async)\n      ) {\n        <button cdsButton=\"ghost\" (click)=\"onProcessStartClick(widget.actions[0])\">\n          {{ widget.actions[0].name }}\n        </button>\n      }\n\n      <valtimo-widget-action-button\n        [widgetConfiguration]=\"widget\"\n        [resolvedData]=\"$content()\"\n      ></valtimo-widget-action-button>\n    </section>\n  }\n\n  <div class=\"case-widget-external-plugin__body\" [ngSwitch]=\"$state()\">\n    <div *ngSwitchCase=\"'loading'\" class=\"case-widget-external-plugin__status\">\n      <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"normal\"></cds-loading>\n    </div>\n\n    <div\n      *ngSwitchCase=\"'error'\"\n      class=\"case-widget-external-plugin__status case-widget-external-plugin__status--error\"\n    >\n      {{ 'caseManagement.tabManagement.externalPlugin.widgetLoadError' | translate }}\n    </div>\n\n    <div *ngSwitchCase=\"'unavailable'\" class=\"case-widget-external-plugin__status\">\n      {{ 'caseManagement.tabManagement.externalPlugin.unavailable' | translate }}\n    </div>\n\n    <ng-container *ngSwitchCase=\"'ready'\">\n      <div *ngIf=\"!$iframeReady()\" class=\"case-widget-external-plugin__status\">\n        <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"normal\"></cds-loading>\n      </div>\n\n      <valtimo-external-plugin-iframe\n        [allowedEndpoints]=\"sessionService.$allowedEndpoints()\"\n        [bundleUrl]=\"$content()!.bundleUrl!\"\n        [configurationId]=\"$content()!.configurationId\"\n        [context]=\"$content()!.context\"\n        [pluginDataUrl]=\"$pluginDataUrl()\"\n        [userToken]=\"sessionService.$userToken()\"\n        (readyEvent)=\"onIframeReady()\"\n      ></valtimo-external-plugin-iframe>\n    </ng-container>\n  </div>\n</div>\n", styles: [".case-widget-external-plugin{display:flex;flex-direction:column;width:100%;padding:24px;box-sizing:border-box;color:var(--widget-text-color, var(--cds-text-primary))}.case-widget-external-plugin__header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}.case-widget-external-plugin__title-container{display:flex;align-items:center;gap:8px;min-width:0}.case-widget-external-plugin__title-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.case-widget-external-plugin__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.case-widget-external-plugin__body{display:flex;flex-direction:column;flex:1 1 auto;margin-top:16px;height:320px}.case-widget-external-plugin__status{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:var(--cds-spacing-05);color:var(--cds-text-secondary)}.case-widget-external-plugin__status--error{color:var(--cds-text-error)}.case-widget-external-plugin valtimo-external-plugin-iframe{display:block;flex:1 1 auto;width:100%;height:100%}.case-widget-external-plugin--compact{padding:12px}.case-widget-external-plugin--compact .case-widget-external-plugin__title{font-size:14px;line-height:20px}.case-widget-external-plugin--compact .case-widget-external-plugin__body{margin-top:8px}.case-widget-external-plugin--compact .case-widget-external-plugin__status{padding:var(--cds-spacing-03)}\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: ButtonModule }, { kind: "directive", type: i4$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i4$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "component", type: ExternalPluginIframeComponent, selector: "valtimo-external-plugin-iframe", inputs: ["bundleUrl", "context", "prefillConfiguration", "userToken", "pluginDataUrl", "allowedEndpoints", "configurationId", "autoHeight"], outputs: ["configurationChangedEvent", "readyEvent", "taskCompletedEvent", "submitTaskEvent"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "component", type: WidgetActionButtonComponent, selector: "valtimo-widget-action-button", inputs: ["widgetConfiguration", "resolvedData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseWidgetExternalPluginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-case-widget-external-plugin', standalone: true, providers: [ExternalPluginSessionService], imports: [
+                        ButtonModule,
+                        CommonModule,
+                        LoadingModule,
+                        TranslateModule,
+                        ExternalPluginIframeComponent,
+                        MdiIconViewerComponent,
+                        WidgetActionButtonComponent,
+                    ], 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<div\n  class=\"case-widget-external-plugin\"\n  [class.case-widget-external-plugin--compact]=\"$widget()?.isCompact\"\n>\n  @if ($widget(); as widget) {\n    <section class=\"case-widget-external-plugin__header\">\n      <div class=\"case-widget-external-plugin__title-container\">\n        <valtimo-mdi-icon-viewer\n          *ngIf=\"widget.icon\"\n          [mdiIcon]=\"widget.icon\"\n        ></valtimo-mdi-icon-viewer>\n\n        <span class=\"case-widget-external-plugin__title\" [attr.title]=\"widget.title\">\n          {{ widget.title }}\n        </span>\n      </div>\n\n      @if (\n        widget.actions?.length === 1 &&\n        widget.actions[0]?.processDefinitionKey &&\n        (canCreateCamundaExecution$ | async)\n      ) {\n        <button cdsButton=\"ghost\" (click)=\"onProcessStartClick(widget.actions[0])\">\n          {{ widget.actions[0].name }}\n        </button>\n      }\n\n      <valtimo-widget-action-button\n        [widgetConfiguration]=\"widget\"\n        [resolvedData]=\"$content()\"\n      ></valtimo-widget-action-button>\n    </section>\n  }\n\n  <div class=\"case-widget-external-plugin__body\" [ngSwitch]=\"$state()\">\n    <div *ngSwitchCase=\"'loading'\" class=\"case-widget-external-plugin__status\">\n      <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"normal\"></cds-loading>\n    </div>\n\n    <div\n      *ngSwitchCase=\"'error'\"\n      class=\"case-widget-external-plugin__status case-widget-external-plugin__status--error\"\n    >\n      {{ 'caseManagement.tabManagement.externalPlugin.widgetLoadError' | translate }}\n    </div>\n\n    <div *ngSwitchCase=\"'unavailable'\" class=\"case-widget-external-plugin__status\">\n      {{ 'caseManagement.tabManagement.externalPlugin.unavailable' | translate }}\n    </div>\n\n    <ng-container *ngSwitchCase=\"'ready'\">\n      <div *ngIf=\"!$iframeReady()\" class=\"case-widget-external-plugin__status\">\n        <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"normal\"></cds-loading>\n      </div>\n\n      <valtimo-external-plugin-iframe\n        [allowedEndpoints]=\"sessionService.$allowedEndpoints()\"\n        [bundleUrl]=\"$content()!.bundleUrl!\"\n        [configurationId]=\"$content()!.configurationId\"\n        [context]=\"$content()!.context\"\n        [pluginDataUrl]=\"$pluginDataUrl()\"\n        [userToken]=\"sessionService.$userToken()\"\n        (readyEvent)=\"onIframeReady()\"\n      ></valtimo-external-plugin-iframe>\n    </ng-container>\n  </div>\n</div>\n", styles: [".case-widget-external-plugin{display:flex;flex-direction:column;width:100%;padding:24px;box-sizing:border-box;color:var(--widget-text-color, var(--cds-text-primary))}.case-widget-external-plugin__header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}.case-widget-external-plugin__title-container{display:flex;align-items:center;gap:8px;min-width:0}.case-widget-external-plugin__title-container valtimo-mdi-icon-viewer .mdi-icon-preview{color:var(--widget-text-color, var(--cds-text-primary))}.case-widget-external-plugin__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.case-widget-external-plugin__body{display:flex;flex-direction:column;flex:1 1 auto;margin-top:16px;height:320px}.case-widget-external-plugin__status{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:var(--cds-spacing-05);color:var(--cds-text-secondary)}.case-widget-external-plugin__status--error{color:var(--cds-text-error)}.case-widget-external-plugin valtimo-external-plugin-iframe{display:block;flex:1 1 auto;width:100%;height:100%}.case-widget-external-plugin--compact{padding:12px}.case-widget-external-plugin--compact .case-widget-external-plugin__title{font-size:14px;line-height:20px}.case-widget-external-plugin--compact .case-widget-external-plugin__body{margin-top:8px}.case-widget-external-plugin--compact .case-widget-external-plugin__status{padding:var(--cds-spacing-03)}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DocumentService }, { type: i2$2.PermissionService }, { type: CaseTabService }, { type: CaseWidgetsApiService }, { type: i5$1.WidgetLayoutService }, { type: WidgetsService }, { type: i6$2.ExternalPluginSessionService }], propDecorators: { documentId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], widgetConfiguration: [{
+                type: Input
+            }], widgetUuid: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
@@ -3283,6 +3432,7 @@ class CaseDetailWidgetsComponent {
             [WidgetType.METROLINE]: CaseWidgetMetrolineComponent,
             [WidgetType.HIGHLIGHT]: CaseWidgetHighlightComponent,
             [WidgetType.IMAGE]: CaseWidgetImageComponent,
+            [WidgetType.EXTERNAL_PLUGIN]: CaseWidgetExternalPluginComponent,
             [WidgetType.TEXT]: CaseWidgetTextComponent,
         };
     }
@@ -3353,6 +3503,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 args: ['class.tab--no-min-height']
             }] } });
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class CaseDetailExternalPluginTabComponent {
+    constructor(route, caseTabService, apiService, sessionService) {
+        this.route = route;
+        this.caseTabService = caseTabService;
+        this.apiService = apiService;
+        this.sessionService = sessionService;
+        this._noMargin = true;
+        this._noBackground = true;
+        this._noMinHeight = true;
+        // Carries the external-plugin-specific height/overflow overrides in case-detail.component.scss,
+        // so they no longer leak onto other tabs that use .tab--no-min-height (widgets, documents).
+        this._externalPlugin = true;
+        this.$state = signal('loading');
+        this.$content = signal(null);
+        this.$pluginDataUrl = signal(null);
+        this.$iframeReady = signal(false);
+        this._documentId$ = this.route.params.pipe(map(params => params?.documentId), filter(documentId => !!documentId));
+        this._tabKey$ = this.caseTabService.activeTabKey$;
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this._subscriptions.add(combineLatest([this._documentId$, this._tabKey$])
+            .pipe(switchMap(([documentId, tabKey]) => this.apiService
+            .getExternalPluginTab(documentId, tabKey)
+            .pipe(switchMap(content => content?.bundleUrl
+            ? this.sessionService
+                .startSession(content.configurationId)
+                .pipe(map(() => content))
+            : throwError(() => new Error('bundle-unavailable'))))))
+            .subscribe({
+            next: content => this.onLoaded(content),
+            error: () => this.$state.set('error'),
+        }));
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onIframeReady() {
+        this.$iframeReady.set(true);
+        // Force fitPage recalculation after CSS :has() selectors have settled
+        setTimeout(() => window.dispatchEvent(new Event('resize')), 50);
+    }
+    onLoaded(content) {
+        this.$content.set(content);
+        this.$pluginDataUrl.set(derivePluginDataUrl(content.bundleUrl));
+        this.$state.set('ready');
+        // Trigger fitPage recalculation after the iframe element is rendered
+        setTimeout(() => window.dispatchEvent(new Event('resize')), 100);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailExternalPluginTabComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: CaseTabService }, { token: CaseExternalPluginTabApiService }, { token: i6$2.ExternalPluginSessionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseDetailExternalPluginTabComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class.tab--no-margin": "this._noMargin", "class.tab--no-background": "this._noBackground", "class.tab--no-min-height": "this._noMinHeight", "class.tab--external-plugin": "this._externalPlugin" } }, providers: [ExternalPluginSessionService], 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 [ngSwitch]=\"$state()\">\n  <div *ngSwitchCase=\"'loading'\" class=\"external-plugin-tab__status\">\n    <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"normal\"></cds-loading>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'error'\"\n    class=\"external-plugin-tab__status external-plugin-tab__status--error\"\n  >\n    {{ 'caseManagement.tabManagement.externalPlugin.loadError' | translate }}\n  </div>\n\n  <ng-container *ngSwitchCase=\"'ready'\">\n    <div *ngIf=\"!$iframeReady()\" class=\"external-plugin-tab__status\">\n      <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"normal\"></cds-loading>\n    </div>\n\n    <valtimo-external-plugin-iframe\n      fitPage\n      [bottomMargin]=\"0\"\n      [disableOverflow]=\"true\"\n      [allowedEndpoints]=\"sessionService.$allowedEndpoints()\"\n      [bundleUrl]=\"$content()!.bundleUrl!\"\n      [configurationId]=\"$content()!.configurationId\"\n      [context]=\"$content()!.context\"\n      [pluginDataUrl]=\"$pluginDataUrl()\"\n      [userToken]=\"sessionService.$userToken()\"\n      (readyEvent)=\"onIframeReady()\"\n    ></valtimo-external-plugin-iframe>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block}:host ::ng-deep .external-plugin-iframe{width:100%;height:100%;border:none}.external-plugin-tab__status{display:flex;justify-content:center;align-items:center;padding:32px 0}.external-plugin-tab__status--error{color:var(--cds-support-error);font-size:14px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i4$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "component", type: ExternalPluginIframeComponent, selector: "valtimo-external-plugin-iframe", inputs: ["bundleUrl", "context", "prefillConfiguration", "userToken", "pluginDataUrl", "allowedEndpoints", "configurationId", "autoHeight"], outputs: ["configurationChangedEvent", "readyEvent", "taskCompletedEvent", "submitTaskEvent"] }, { kind: "directive", type: FitPageDirective, selector: "[fitPage]", inputs: ["spaceAdjustment", "fitPageDisabled", "disableOverflow", "bottomMargin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailExternalPluginTabComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, providers: [ExternalPluginSessionService], imports: [
+                        CommonModule,
+                        LoadingModule,
+                        TranslateModule,
+                        ExternalPluginIframeComponent,
+                        FitPageDirective,
+                    ], 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<ng-container [ngSwitch]=\"$state()\">\n  <div *ngSwitchCase=\"'loading'\" class=\"external-plugin-tab__status\">\n    <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"normal\"></cds-loading>\n  </div>\n\n  <div\n    *ngSwitchCase=\"'error'\"\n    class=\"external-plugin-tab__status external-plugin-tab__status--error\"\n  >\n    {{ 'caseManagement.tabManagement.externalPlugin.loadError' | translate }}\n  </div>\n\n  <ng-container *ngSwitchCase=\"'ready'\">\n    <div *ngIf=\"!$iframeReady()\" class=\"external-plugin-tab__status\">\n      <cds-loading [isActive]=\"true\" [overlay]=\"false\" size=\"normal\"></cds-loading>\n    </div>\n\n    <valtimo-external-plugin-iframe\n      fitPage\n      [bottomMargin]=\"0\"\n      [disableOverflow]=\"true\"\n      [allowedEndpoints]=\"sessionService.$allowedEndpoints()\"\n      [bundleUrl]=\"$content()!.bundleUrl!\"\n      [configurationId]=\"$content()!.configurationId\"\n      [context]=\"$content()!.context\"\n      [pluginDataUrl]=\"$pluginDataUrl()\"\n      [userToken]=\"sessionService.$userToken()\"\n      (readyEvent)=\"onIframeReady()\"\n    ></valtimo-external-plugin-iframe>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block}:host ::ng-deep .external-plugin-iframe{width:100%;height:100%;border:none}.external-plugin-tab__status{display:flex;justify-content:center;align-items:center;padding:32px 0}.external-plugin-tab__status--error{color:var(--cds-support-error);font-size:14px}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: CaseTabService }, { type: CaseExternalPluginTabApiService }, { type: i6$2.ExternalPluginSessionService }], propDecorators: { _noMargin: [{
+                type: HostBinding,
+                args: ['class.tab--no-margin']
+            }], _noBackground: [{
+                type: HostBinding,
+                args: ['class.tab--no-background']
+            }], _noMinHeight: [{
+                type: HostBinding,
+                args: ['class.tab--no-min-height']
+            }], _externalPlugin: [{
+                type: HostBinding,
+                args: ['class.tab--external-plugin']
+            }] } });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -3469,8 +3709,11 @@ class CaseTabService {
         return tabs;
     }
     openCaseDefinitionKeySubscription() {
-        this._subscriptions.add(combineLatest([this._caseDefinitionKey$, this._documentId$, this._tabManagementEnabled$])
-            .subscribe(([caseDefinitionKey, documentId, tabManagementEnabled]) => {
+        this._subscriptions.add(combineLatest([
+            this._caseDefinitionKey$,
+            this._documentId$,
+            this._tabManagementEnabled$,
+        ]).subscribe(([caseDefinitionKey, documentId, tabManagementEnabled]) => {
             if (tabManagementEnabled) {
                 this.setApiTabs(caseDefinitionKey, documentId);
             }
@@ -3516,6 +3759,8 @@ class CaseTabService {
                 return new TabImpl(tab.key, index, this.caseTabConfig[tab.contentKey], tab.contentKey, tab.name ?? '', tab.showTasks);
             case ApiTabType.WIDGETS:
                 return new TabImpl(tab.key, index, CaseDetailWidgetsComponent, tab.contentKey, tab.name ?? '', tab.showTasks);
+            case ApiTabType.EXTERNAL_PLUGIN:
+                return new TabImpl(tab.key, index, CaseDetailExternalPluginTabComponent, tab.contentKey, tab.name ?? '', tab.showTasks);
             default:
                 return null;
         }
@@ -3720,10 +3965,17 @@ class CaseDetailLayoutService {
             ? `calc(100vh - ${202 + mainContentHeaderHeight}px)`
             : `calc(100vh - ${160 + mainContentHeaderHeight}px)`));
     }
-    constructor(caseTabService, pageHeaderService) {
+    constructor(caseTabService, pageHeaderService, userSettingsService) {
         this.caseTabService = caseTabService;
         this.pageHeaderService = pageHeaderService;
+        this.userSettingsService = userSettingsService;
         this._tabContentContainerWidth$ = new BehaviorSubject(null);
+        this._taskPanelWidth$ = new BehaviorSubject(null);
+        this._taskPanelWidthToSave$ = new Subject();
+        /** The width the backend last confirmed, so a failed save can be retried for the same width. */
+        this._persistedTaskPanelWidth = null;
+        /** Once the user has dragged, a settings response that was already in flight is stale. */
+        this._taskPanelWidthEditedLocally = false;
         this._showTaskList$ = this.caseTabService.showTaskList$;
         this._taskAndProcessLinkOpenedInPanel$ = new BehaviorSubject(null);
         this._startFormPanel$ = new BehaviorSubject(null);
@@ -3739,21 +3991,28 @@ class CaseDetailLayoutService {
             this._startFormPanel$,
             this._formDisplayType$,
             this._formDisplaySize$,
-        ]).pipe(map(([tabContentContainerWidth, showTaskList, taskAndProcessLinkOpenedInPanel, startFormPanel, formDisplayType, formDisplaySize,]) => {
+            this._taskPanelWidth$,
+        ]).pipe(map(([tabContentContainerWidth, showTaskList, taskAndProcessLinkOpenedInPanel, startFormPanel, formDisplayType, formDisplaySize, taskPanelWidth,]) => {
             if (!showTaskList) {
                 return this.getInitialLayout();
             }
             if (startFormPanel) {
-                return this.getPanelLayout(tabContentContainerWidth ?? 0, formDisplaySize);
+                return this.getPanelLayout(tabContentContainerWidth ?? 0, formDisplaySize, taskPanelWidth);
             }
             if (!taskAndProcessLinkOpenedInPanel) {
-                return this.getTaskListLayout();
+                return this.getTaskListLayout(tabContentContainerWidth ?? 0, taskPanelWidth);
             }
             if (taskAndProcessLinkOpenedInPanel && formDisplayType === 'panel') {
-                return this.getPanelLayout(tabContentContainerWidth ?? 0, formDisplaySize);
+                return this.getPanelLayout(tabContentContainerWidth ?? 0, formDisplaySize, taskPanelWidth);
             }
             return {};
         }), startWith({}));
+        this._saveTaskPanelWidthSubscription = this.openTaskPanelWidthSaveQueue();
+        this.loadTaskPanelWidth();
+    }
+    ngOnDestroy() {
+        this._taskPanelWidthToSave$.complete();
+        this._saveTaskPanelWidthSubscription.unsubscribe();
     }
     setTabContentContainerWidth(width) {
         this._tabContentContainerWidth$.next(width);
@@ -3778,6 +4037,14 @@ class CaseDetailLayoutService {
     refreshTasks() {
         this._refreshTasks$.next(null);
     }
+    saveTaskPanelWidth(width) {
+        const widthToSave = Math.round(width);
+        this._taskPanelWidthEditedLocally = true;
+        if (widthToSave === this._persistedTaskPanelWidth)
+            return;
+        this._taskPanelWidth$.next(widthToSave);
+        this._taskPanelWidthToSave$.next(widthToSave);
+    }
     setMainContentHeaderHeight(height) {
         this._mainContentHeaderHeight$.next(height);
     }
@@ -3792,37 +4059,65 @@ class CaseDetailLayoutService {
             leftPanelWidth: '*',
         };
     }
-    getTaskListLayout() {
+    getTaskListLayout(tabContentContainerWidth, taskPanelWidth) {
+        const rightPanelMaxWidth = this.getRightPanelMaxWidth(tabContentContainerWidth);
+        const rightPanelMinWidth = Math.min(CASE_DETAIL_TASK_LIST_MIN_WIDTH, rightPanelMaxWidth);
         return {
             unit: 'pixel',
             showRightPanel: true,
-            widthAdjustable: false,
-            rightPanelMaxWidth: CASE_DETAIL_TASK_LIST_WIDTH,
-            rightPanelMinWidth: CASE_DETAIL_TASK_LIST_WIDTH,
-            rightPanelWidth: CASE_DETAIL_TASK_LIST_WIDTH,
+            widthAdjustable: true,
+            rightPanelMinWidth,
+            rightPanelWidth: this.clampPanelWidth(taskPanelWidth ?? CASE_DETAIL_TASK_LIST_WIDTH, rightPanelMinWidth, rightPanelMaxWidth),
+            rightPanelMaxWidth,
             leftPanelWidth: '*',
         };
     }
-    getPanelLayout(tabContentContainerWidth, formDisplaySize) {
-        const rightPanelMaxWidth = tabContentContainerWidth - CASE_DETAIL_GUTTER_SIZE - CASE_DETAIL_LEFT_PANEL_MIN_WIDTH;
-        const rightPanelMinWidth = CASE_DETAIL_RIGHT_PANEL_MIN_WIDTHS[formDisplaySize];
-        const rightPanelMinWidthToUse = rightPanelMinWidth < rightPanelMaxWidth ? rightPanelMinWidth : rightPanelMaxWidth;
+    getPanelLayout(tabContentContainerWidth, formDisplaySize, taskPanelWidth) {
+        const rightPanelMaxWidth = this.getRightPanelMaxWidth(tabContentContainerWidth);
+        const rightPanelMinWidth = Math.min(CASE_DETAIL_RIGHT_PANEL_MIN_WIDTHS[formDisplaySize], rightPanelMaxWidth);
         return {
             unit: 'pixel',
             showRightPanel: true,
             widthAdjustable: true,
-            rightPanelMinWidth: rightPanelMinWidthToUse,
-            rightPanelWidth: rightPanelMinWidthToUse,
+            rightPanelMinWidth,
+            rightPanelWidth: this.clampPanelWidth(taskPanelWidth ?? rightPanelMinWidth, rightPanelMinWidth, rightPanelMaxWidth),
             rightPanelMaxWidth,
             leftPanelWidth: '*',
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailLayoutService, deps: [{ token: CaseTabService }, { token: i2.PageHeaderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    getRightPanelMaxWidth(tabContentContainerWidth) {
+        return Math.max(0, tabContentContainerWidth - CASE_DETAIL_GUTTER_SIZE - CASE_DETAIL_LEFT_PANEL_MIN_WIDTH);
+    }
+    clampPanelWidth(width, minWidth, maxWidth) {
+        return Math.min(Math.max(width, minWidth), maxWidth);
+    }
+    /**
+     * Saves run one at a time, each waiting for the one before it to finish. Cancelling a request
+     * instead would not be enough: the server may already have received it, and as it reads and
+     * rewrites the whole settings record it could still store an earlier width after a newer one.
+     */
+    openTaskPanelWidthSaveQueue() {
+        return this._taskPanelWidthToSave$
+            .pipe(concatMap(widthToSave => this.userSettingsService.getUserSettings().pipe(take(1), switchMap(settings => this.userSettingsService.saveUserSettings({ ...settings, taskPanelWidth: widthToSave })), tap(() => (this._persistedTaskPanelWidth = widthToSave)), catchError$1(() => EMPTY))))
+            .subscribe();
+    }
+    loadTaskPanelWidth() {
+        this.userSettingsService
+            .getUserSettings()
+            .pipe(take(1))
+            .subscribe(settings => {
+            if (this._taskPanelWidthEditedLocally || !settings?.taskPanelWidth)
+                return;
+            this._persistedTaskPanelWidth = settings.taskPanelWidth;
+            this._taskPanelWidth$.next(settings.taskPanelWidth);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailLayoutService, deps: [{ token: CaseTabService }, { token: i2.PageHeaderService }, { token: i1.UserSettingsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailLayoutService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailLayoutService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: CaseTabService }, { type: i2.PageHeaderService }] });
+        }], ctorParameters: () => [{ type: CaseTabService }, { type: i2.PageHeaderService }, { type: i1.UserSettingsService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -4524,6 +4819,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.ConfigService }] });
 
+class CaseExternalPluginTabApiService extends BaseApiService {
+    constructor(httpClient, configService) {
+        super(httpClient, configService);
+        this.httpClient = httpClient;
+        this.configService = configService;
+    }
+    getExternalPluginTab(documentId, tabKey) {
+        return this.httpClient.get(this.getApiUrl(`v1/document/${documentId}/external-plugin-tab/${tabKey}`));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseExternalPluginTabApiService, deps: [{ token: i1$1.HttpClient }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseExternalPluginTabApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseExternalPluginTabApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.ConfigService }] });
+
 class CaseProcessTimerService {
     constructor(http, configService) {
         this.http = http;
@@ -5826,6 +6140,12 @@ class CaseDetailComponent {
     onMainContentHeaderHeightChange(height) {
         this.caseDetailLayoutService.setMainContentHeaderHeight(height);
     }
+    onSplitDragEnd(event) {
+        const taskPanelWidth = event.sizes[1];
+        if (typeof taskPanelWidth === 'number') {
+            this.caseDetailLayoutService.saveTaskPanelWidth(taskPanelWidth);
+        }
+    }
     onConfirmRedirect() {
         if (!this.tabLoader || !this._pendingTab)
             return;
@@ -5936,7 +6256,7 @@ class CaseDetailComponent {
             ...(isAdmin && {
                 actions: [
                     {
-                        text: this.translateService.instant('dossier.configure'),
+                        text: this.translateService.instant('case.configure'),
                         click: () => this.router.navigate(['/process-links']),
                     },
                 ],
@@ -5968,11 +6288,11 @@ class CaseDetailComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailComponent, deps: [{ token: i2.BreadcrumbService }, { token: i1$2.CaseStatusService }, { token: i2.CdsThemeService }, { token: i0.ComponentFactoryResolver }, { token: i1$2.DocumentService }, { token: CaseDetailLayoutService }, { token: CaseService }, { token: CaseTabService }, { token: i4$1.IconService }, { token: i5$4.KeycloakService }, { token: i1$4.NGXLogger }, { token: i1.GlobalNotificationService }, { token: i2.PageHeaderService }, { token: i2.PageTitleService }, { token: i2$2.PermissionService }, { token: i4.TranslateService }, { token: i0.Renderer2 }, { token: i1$3.ActivatedRoute }, { token: i1$3.Router }, { token: WidgetsService }, { token: i12.UserProviderService }, { token: i5.SseService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseDetailComponent, isStandalone: false, selector: "ng-component", providers: [CaseTabService, CaseDetailLayoutService, ObserveSizeDirective], viewQueries: [{ propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_tabContentContainer", first: true, predicate: ["tabContentContainer"], 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<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': $tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <div\n      class=\"main-content__header\"\n      observeSize\n      (heightChange)=\"onMainContentHeaderHeightChange($event)\"\n    >\n      <valtimo-case-detail-header-widget></valtimo-case-detail-header-widget>\n\n      <ng-container *ngIf=\"caseTags$ | async as caseTags\">\n        @if ((caseTags || []).length > 0) {\n          <div class=\"spacing-case-tags\">\n            @for (tag of caseTags; track tag) {\n              <cds-tag size=\"sm\" [type]=\"tag.tagType\">\n                {{ tag.title }}\n              </cds-tag>\n            }\n          </div>\n        }\n      </ng-container>\n\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n\n      <ng-template #tabs>\n        <ng-container *ngIf=\"{activeTab: activeTab$ | async} as obs\">\n          <cds-tabs *ngIf=\"tabLoader\" type=\"inline\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.name === (activeTabName$ | async)\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              (selected)=\"onTabSelected(tab, obs.activeTab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n    </div>\n\n    <div\n      *ngIf=\"{\n        noTabsConfigured: noTabsConfigured$ | async,\n        showTaskList: showTaskList$ | async,\n        showNoAccess: showNoAccess$ | async,\n        caseDetailLayout: caseDetailLayout$ | async,\n        openTaskAndProcessLinkInModal: openTaskAndProcessLinkInModal$ | async,\n        taskAndProcessLinkOpenedInPanel: taskAndProcessLinkOpenedInPanel$ | async,\n        startFormPanel: startFormPanel$ | async,\n        isDarkMode: isDarkMode$ | async,\n        compactMode: compactMode$ | async,\n        tabContentContainerMaxHeight: tabContentContainerMaxHeight$ | async,\n      } as tabContentObs\"\n      #tabContentContainer\n      class=\"tab-content-container\"\n      [ngClass]=\"{\n        'tab-content-container--dark': tabContentObs.isDarkMode,\n        'tab-content-container--compact': tabContentObs.compactMode,\n      }\"\n      [style.max-height]=\"tabContentObs.tabContentContainerMaxHeight\"\n      [style.height]=\"tabContentObs.tabContentContainerMaxHeight\"\n    >\n      <as-split\n        direction=\"horizontal\"\n        [disabled]=\"!tabContentObs.caseDetailLayout.widthAdjustable\"\n        [gutterSize]=\"CASE_DETAIL_GUTTER_SIZE\"\n        [unit]=\"tabContentObs.caseDetailLayout.unit\"\n        class=\"split-area\"\n      >\n        <as-split-area\n          [size]=\"tabContentObs.caseDetailLayout.leftPanelWidth\"\n          [minSize]=\"tabContentObs.caseDetailLayout.leftPanelMinWidth\"\n          [maxSize]=\"tabContentObs.caseDetailLayout.leftPanelMaxWidth\"\n          class=\"split-area__content\"\n        >\n          <div\n            class=\"card-body bg-white p-5 position-relative tab-container\"\n            [class.tab-container--compact]=\"compactMode$ | async\"\n          >\n            <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n              <cds-loading></cds-loading>\n            </div>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.showNoAccess\"\n              description=\"{{ 'case.noAccess.description' | translate }}\"\n              title=\"{{ 'case.noAccess.title' | translate }}\"\n              illustration=\"valtimo-layout/img/emptystate-not-authorised.svg\"\n            >\n            </valtimo-no-results>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.noTabsConfigured\"\n              [description]=\"'case.tabs.noResultsDescription' | translate\"\n              [title]=\"'case.tabs.noResults' | translate\"\n            ></valtimo-no-results>\n\n            <ng-template #tabContainer></ng-template>\n\n            <div class=\"clearfix\"></div>\n          </div>\n        </as-split-area>\n\n        <as-split-area\n          *ngIf=\"tabContentObs.caseDetailLayout.showRightPanel\"\n          [size]=\"tabContentObs.caseDetailLayout.rightPanelWidth\"\n          [minSize]=\"tabContentObs.caseDetailLayout.rightPanelMinWidth\"\n          [maxSize]=\"tabContentObs.caseDetailLayout.rightPanelMaxWidth\"\n        >\n          @if (tabContentObs.showTaskList) {\n            <div class=\"task-panel\">\n              @if (tabContentObs.startFormPanel) {\n                <div class=\"start-form-panel\">\n                  <section class=\"start-form-panel__header\">\n                    <h4 class=\"start-form-panel__title\">{{ tabContentObs.startFormPanel.title }}</h4>\n\n                    <button cdsButton=\"ghost\" [iconOnly]=\"true\" (click)=\"onStartFormPanelClose()\">\n                      <svg cdsIcon=\"close\" size=\"16\"></svg>\n                    </button>\n                  </section>\n\n                  <section class=\"start-form-panel__body\">\n                    <ng-container\n                      *ngTemplateOutlet=\"tabContentObs.startFormPanel.template\"\n                    ></ng-container>\n                  </section>\n                </div>\n              } @else if (tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-case-detail-task-detail\n                  [taskAndProcessLink]=\"tabContentObs.taskAndProcessLinkOpenedInPanel\"\n                  (activeChange)=\"onActiveChangeEvent($event)\"\n                  (closeEvent)=\"onTaskDetailsClose()\"\n                  (formSubmit)=\"onFormSubmitEvent()\"\n                  (dueDateChanged)=\"onDueDateChanged()\"\n                >\n                </valtimo-case-detail-task-detail>\n              } @else {\n                <valtimo-case-detail-task-list\n                  [openTaskAndProcessLinkInModal]=\"tabContentObs.openTaskAndProcessLinkInModal\"\n                  (taskClickEvent)=\"onTaskClickEvent($event)\"\n                  (formSubmitEvent)=\"onFormSubmitEvent()\"\n                ></valtimo-case-detail-task-list>\n              }\n            </div>\n          }\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <valtimo-case-supporting-process-start-modal\n    [isAdmin]=\"isAdmin$ | async\"\n    (formSubmit)=\"onFormSubmitEvent()\"\n    #supportingProcessStartModal\n  ></valtimo-case-supporting-process-start-modal>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-assignment\n      *ngIf=\"canAssignLoaded$ | async\"\n      mode=\"case\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [assignedTeamKey]=\"document.assignedTeamKey\"\n      [assignedTeamTitle]=\"document.assignedTeamTitle\"\n      [hasPermission]=\"canAssign\"\n      [candidateUsers$]=\"candidateUsers$\"\n      [candidateTeams$]=\"candidateTeams$\"\n      (assignmentChangedEvent)=\"onAssignmentChanged($event)\"\n      (unassignedEvent)=\"onUnassigned()\"\n    ></valtimo-assignment>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <v-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (selected)=\"claimAssignee()\"\n  >\n    {{ 'case.claimAssigneeCase' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template\n  #unassignButton\n  let-canAssign=\"canAssign\"\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-assigneeId=\"assigneeId\"\n>\n  <v-overflow-menu-option\n    *ngIf=\"canHaveAssignee && canAssign\"\n    [disabled]=\"!assigneeId\"\n    (selected)=\"unassignAssignee()\"\n  >\n    {{ 'assignDocument.remove' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #deleteButton let-canDelete=\"canDelete\">\n  <v-overflow-menu-option\n    *ngIf=\"canDelete\"\n    [disabled]=\"isDeleting$ | async\"\n    (selected)=\"deleteDocument()\"\n    type=\"danger\"\n  >\n    {{ 'case.delete.delete' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #inspectButton let-canInspect=\"canInspect\">\n  <v-overflow-menu-option *ngIf=\"canInspect\" (selected)=\"navigateToInspection()\">\n    {{ 'case.inspection.openInspector' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"startableItems.length === 0\"\n    [ngbTooltip]=\"startableItems.length === 0 ? 'No action' : null\"\n  >\n    {{ 'case.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"case.delete.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"case.delete.description\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"case.delete.delete\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"case-actions\"\n      [ngClass]=\"{\n        'case-actions--compact': compactMode$ | async,\n        'case-actions--small-title': smallTitle$ | async,\n      }\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        canDelete: canDelete$ | async,\n        canInspect: canInspect$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async,\n      } as obs\"\n    >\n      <div class=\"case-status-assign-custom-title\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\" [title]=\"obs.caseStatus.title\">{{\n            obs.caseStatus.title\n          }}</cds-tag>\n        }\n\n        <div [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign,\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <v-overflow-menu\n          *ngIf=\"obs.canHaveAssignee || obs.canDelete || obs.canInspect\"\n          placement=\"bottom-end\"\n          class=\"overflow-button assign-overflow\"\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n        >\n          <v-overflow-menu-trigger\n            overflowTrigger\n            [compact]=\"compactMode$ | async\"\n          ></v-overflow-menu-trigger>\n\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n\n          <ng-container\n            *ngTemplateOutlet=\"\n              unassignButton;\n              context: {\n                canAssign: obs.canAssign,\n                canHaveAssignee: obs.canHaveAssignee,\n                assigneeId: obs.assigneeId,\n              }\n            \"\n          >\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"inspectButton; context: {canInspect: obs.canInspect}\">\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"deleteButton; context: {canDelete: obs.canDelete}\">\n          </ng-container>\n        </v-overflow-menu>\n\n        <v-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [menuWidth]=\"dropdownWidth$ | async\"\n          placement=\"bottom-end\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <ng-container overflowTrigger>\n            <ng-container *ngTemplateOutlet=\"customStartTrigger\"></ng-container>\n          </ng-container>\n          <v-overflow-menu-option\n            *ngFor=\"let startableItem of startableItems\"\n            [attr.title]=\"startableItem.displayName\"\n            (selected)=\"startItem(startableItem)\"\n          >\n            {{ startableItem.displayName }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content{overflow:hidden;padding-bottom:0}.main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{height:min-content;min-height:300px;overflow-y:auto;overflow-x:hidden}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--no-background){background:transparent!important}.tab-content-container{display:flex;gap:32px;overflow:auto;margin-bottom:16px}.loading-container{display:flex;justify-content:center;flex-direction:row}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.buttons-container{display:flex;flex-direction:row;gap:8px;align-items:center}.case-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.case-actions--compact,.case-actions--small-title{padding-bottom:0;align-items:flex-start}.case-actions ::ng-deep .version-selection{width:160px}.case-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.case-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.case-status-assign-custom-title .cds--tag{margin:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%}.case-status-assign-custom-title.--compact{align-items:center}.task-panel{width:100%;transition:height .15s ease-in-out}.start-form-panel{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--cds-layer);padding:8px 16px 16px}.start-form-panel__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.start-form-panel__title{margin:0;color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.start-form-panel__body{flex:1;overflow-y:auto}.split-area__content{height:100%!important}.split-area__content .tab-container{height:min-content!important;overflow:hidden!important}:host ::ng-deep .container-fluid{height:100%!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .tab-content-container .as-split-gutter{background-color:transparent!important;--_as-gutter-icon-disabled: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E\");--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABQJJREFUeF7dWll22zAMpNwzlM5xmpMlOVl6mzrKHexWm8UFy4xIp+/FP3mxQWAwWAiRGsJ3/gwhhJvt4CRCfgCtosYhDOHm4SlW7rZyq9t/R7GsZoYQDhCA89UIrzakKuQtpRTiHv03ycJB3t8KuU9AByNfw5dWJpj1h5YABmGRsvgufzsSG21NEwGWUrv5yiuZb31yMZoAAjBFPqBdor9G0vpwu2+PBgE6TK/q0pUxxiwZxnE0SefkE0sHWQUygGG3ll0c2tGNn+M0DiSfHDlHQBu2rffoWgBWPRHWIUreM654li5bMwDQBIhI9naHFgVQCSS2PHliWlLm0/YsMrcwK6ISp1QGANhzG7XFDj2gUFr8yzrkydOJ6CyACBB1lIWkbPyeQ2UQ2ZKxksCLft4EaWqB/AshHCdg0b/1gB7wJB1QBrQ0ml4E2MMyFgxJ6iABuEGdgCUeZVQm+fQ7fhfAsflzAKFLS1G2ptmMwUpDl1oyAGxo2fw2hHBzjpsm+XiO2TGQF1GWACJGfecAjHmgCTZum/lQfezQTZ3L7z+g3goc2xGtFT86A0qLh5pgjPF13aLmv9aHdYiVn8uMwFNixQlYqVuNvayK3sZxNElgHarlP6duo2bpOcbXWxheVhkTj7Tv4ATsTG/OL6CG8DZ+KCQMIcSf6HnAAo8hrAjGRpIblLxveDm8/q4YC6fT6flyufzWBhXGoTWd4QOUp6enX9fr9X2od6SFhJlTu4FBGZA5n+jbnddZjPG8nz8lo222ItHJEraRICAAMmG6rPGb2FTjedqHsET+4/Lbu+phHWLlJ/g+Cd4gpJDgp71HHzAHFCqOEFCSULjrNkaxw2rO/zidnv/MNY99WIcY+TKufibUmOcSEB5IxLTHXLal2FG4h83VPzET1h6wUxDP8fXfJW5V8xuQhqFwVtGNgDuQ6Yo367Pb9ixdjVckVE1QS/0ekZhybRw/zMZblkBpd1sMPIdJkAsClF2ghQQPYJYBQjp5BKCBEHD4JZDi6bED3AebRDFbAp58Ski3JrgphQcgozEwXZ2dBH3nZ2Bq5KcyahuEgO1wIWBnyIuoS5hA9pHIp01dnANSdlvKwXWocRC6Pw/U70MBozCQAWI5JKDF5wFrtk8uR6XKYQibnL9dr+/CjgA5v81AamMFByTTmOhQp56hPw5/vrrvx61euz2gZKfHgcj98bUkgjo/WJCxeMrJFyQgR8ocQcGnwqsJpgSK8pymTPeIThus4DKwBKWJFNsFklEcOT9ApyFADswAQJMiwkaUldeQ7ZTKDWf79tsSgIasDwGduro1CbY+hVqZgpJ1SA5L6bQHMJNjOy19MsCgBiNgV8DK+1GxSXoYAcMwhNttOedPIZTPAhm8bQ6Anx57ZMBGgfHuXs6yuEANBBtR/2bIjzkj8bAMSIYU+KLDaoKSU8KFCOP7LAsTcDTZ2jPAfrUWf3VGnwdo1pgF5xiz9yhazwOExwfv9suEm2XArJwNtSP/+AxgwlHL1iVwiAUdhEaAxhtLWGbZDEbPEiCyhHWIla93KO7AvMoAwre7bW5jxCAfwaHnoa4N3gVU5X2RthX0gdVNBPhDZnYgzMH7ImKbCOA8wnfsVO+jeUgIEHfYFUs7jHYNLN2YvJkBXwYaNuQIwnp2cgoCag3LN1Z2+EwfwCVPLPAOJ1n05oDt9x5oRR37Pb72s/e+kU81L/EXSRwjcUdkvjUAAAAASUVORK5CYII=)}::ng-deep .tab-content-container .as-split-gutter-icon{background-repeat:no-repeat;background-size:16px 16px}::ng-deep .tab-content-container--dark .as-split-gutter{--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABPlJREFUeF7tm1tW3DAMhu2+krCmdmWlKytrIuGV9HjixDddfjkOtOd0XmAGWZfPsiw7g3fVyzvntvpD9H01+JIuwCamX5YKf9VfmCVaDze2S2fXIDG+CGC8YsrqMCvDFDmHZYCeI5gE6LietD2LlNb6uQAQTLWfCDTLmLpOIfoRvxEZydZn+pH7+vdlAEJyoIwIwDIrFtk7C2TyA/Po9gxY1zVWrN2haZq85FqS3zEF+YET3qi6rFzjfAR0yGkBwQA0wyFU75zf5MaOBYDoR2YGDigqY+U7HOKHlAsFiQOXqax+JYCYBGJr32ZAB+lEpxwc3i1nDcDWtBUYPjN8p35VBxf/4/MQUI7lqAGPzwjYBQDv3PQ0+Ue/CjV/sODp8+UiyNE7XLHO6EM+Dg4/ntBdAI69zdIqBlgTlDldADLN9a7R551cDot0kDPNbn40AIh6LSS4DS0Be9jJg7sAXPHJfBZojbXriMscGgDvvhUYmRGEes6iocJiyVejWdelYDPNk5cquhnAxVSAlgDZQG/7bUqKjvZEDqgdYwaAzQsrVQHowFkPqd5bA4LlO1ytp+zoFM0Ml2V5CYPmeX78lF7v67rla8B6GpynKZxnxBfmD03MvASCMe/9z+DRtm2/SAiZLXRGqcapbYTaICB/BHwggN1wbuzQSUHI3UQBHPqo+wPO/7dlefkWJ0PyR0ofEIAjg49Z8GOe51fOCAYgIcPkd2vLsnz33v+ubadJ0TZw8Fqcmnkk+CBjCahHXodQ49mhHGjUDJCDf37Vjmn54Sa4MuxGaL/weWzDdggJigjgDL7KpG3bxLTPmY/PALqa90JgAahpf/ohb8jjAfAlrQdCCSDG0gRPxCiHzf81XwKUVA1M7gDwbojbspsM4GZea3jov5cFp6cGoHYRFCWE5FthQwKAGCnLS9vD6UXwXbnIRpGUcsH3D6JxI2sADwFHwEnqAI4HKW0AB07ci6QDXgLHELUIghPxbxRBBukICDuAZMCaAbu8XnLf1K4wzBjdGYpzSUGI66ntBQg/8QzYB+PyyW18++sAEHvu8wSY02IbosyONaBTPj7XO6/F+SxVzgPKRooWlN7l0A0g+i0tGXrmvdu2D/qYTrBgO0GKG3ocRlrhB/jm6a13zR2i8GAk+BOOw/lmy95RMIlgAlAvh4ex5/ll5CUndYMkJfGNFyL84sCuoHa3tSVQW9HkGxjeueUNv6Krx7dbTO5R/J1FARSQ9X3d8gyh13RSZAYA9iOcmHkJWO1ZA+LkRdbaRAlO3wogKL/+/YDZl5cuFQogC/P4k/j+mx0AYVDyYVQGWDMPlbcDQDVHOREA1DmGDAgv7emA0bEofgmAmn3euXUpT3d9Z4G+4PRR+6PR9oigRqarPiT6ng4nBzRguCe0ZJEBatyqQGvkfw249VtiHTNSzdGZAddVESmW1YBDv5bSpoxBnOZkst7h6jISx5sCEltnJFp7KKkG3KNfPQvULluB2UMuR1zaBiXjB08+IJr4FQA9c3gDgNINKSDK4SCff67VjEsZEI+Cl3Scg3vwA4cU6uu0bRL3d4k3ZEDm3mAoY2YqdX7BvVsA2OJW9qlhUe+KQvObX1DYANS+2iIdHArR0bArgXfUBoAMoewopH9ROd3oBmcZiMkOANA3sXUq9mm5Pqrvq7IYXLo3Vs713ao7WRAZ8NULfTACRd0fdjtUcYyr1cIAAAAASUVORK5CYII=)}.spacing-case-tags{margin-bottom:8px}\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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i4$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.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: i4$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i4$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: i2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "directive", type: i2.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i4$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: i2.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i2.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i2.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }, { kind: "component", type: CaseDetailTaskListComponent, selector: "valtimo-case-detail-task-list", inputs: ["openTaskAndProcessLinkInModal"], outputs: ["taskClickEvent", "formSubmitEvent"] }, { kind: "component", type: CaseDetailsTaskDetailComponent, selector: "valtimo-case-detail-task-detail", inputs: ["taskAndProcessLink"], outputs: ["closeEvent", "assignmentOfTaskChanged", "dueDateChanged", "activeChange", "formSubmit"] }, { kind: "component", type: i18.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i18.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: CaseDetailHeaderWidgetComponent, selector: "valtimo-case-detail-header-widget" }, { kind: "directive", type: i2.ObserveSizeDirective, selector: "[observeSize]", outputs: ["widthChange", "heightChange"] }, { kind: "component", type: i2.AssignmentComponent, selector: "valtimo-assignment", inputs: ["mode", "hasPermission", "assigneeId", "assigneeFullName", "assignedTeamKey", "assignedTeamTitle", "candidateUsers$", "candidateTeams$"], outputs: ["assignmentChangedEvent", "unassignedEvent"] }, { kind: "component", type: CaseSupportingProcessStartModalComponent, selector: "valtimo-case-supporting-process-start-modal", inputs: ["isAdmin"], outputs: ["formSubmit"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: TabTranslatePipe, name: "tabTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseDetailComponent, isStandalone: false, selector: "ng-component", providers: [CaseTabService, CaseDetailLayoutService, ObserveSizeDirective], viewQueries: [{ propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_tabContentContainer", first: true, predicate: ["tabContentContainer"], 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<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': $tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <div\n      class=\"main-content__header\"\n      observeSize\n      (heightChange)=\"onMainContentHeaderHeightChange($event)\"\n    >\n      <valtimo-case-detail-header-widget></valtimo-case-detail-header-widget>\n\n      <ng-container *ngIf=\"caseTags$ | async as caseTags\">\n        @if ((caseTags || []).length > 0) {\n          <div class=\"spacing-case-tags\">\n            @for (tag of caseTags; track tag) {\n              <cds-tag size=\"sm\" [type]=\"tag.tagType\">\n                {{ tag.title }}\n              </cds-tag>\n            }\n          </div>\n        }\n      </ng-container>\n\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n\n      <ng-template #tabs>\n        <ng-container *ngIf=\"{activeTab: activeTab$ | async} as obs\">\n          <cds-tabs *ngIf=\"tabLoader\" type=\"inline\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.name === (activeTabName$ | async)\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              (selected)=\"onTabSelected(tab, obs.activeTab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n    </div>\n\n    <div\n      *ngIf=\"{\n        noTabsConfigured: noTabsConfigured$ | async,\n        showTaskList: showTaskList$ | async,\n        showNoAccess: showNoAccess$ | async,\n        caseDetailLayout: caseDetailLayout$ | async,\n        openTaskAndProcessLinkInModal: openTaskAndProcessLinkInModal$ | async,\n        taskAndProcessLinkOpenedInPanel: taskAndProcessLinkOpenedInPanel$ | async,\n        startFormPanel: startFormPanel$ | async,\n        isDarkMode: isDarkMode$ | async,\n        compactMode: compactMode$ | async,\n        tabContentContainerMaxHeight: tabContentContainerMaxHeight$ | async,\n      } as tabContentObs\"\n      #tabContentContainer\n      class=\"tab-content-container\"\n      [ngClass]=\"{\n        'tab-content-container--dark': tabContentObs.isDarkMode,\n        'tab-content-container--compact': tabContentObs.compactMode,\n      }\"\n      [style.max-height]=\"tabContentObs.tabContentContainerMaxHeight\"\n      [style.height]=\"tabContentObs.tabContentContainerMaxHeight\"\n    >\n      <as-split\n        direction=\"horizontal\"\n        [disabled]=\"!tabContentObs.caseDetailLayout.widthAdjustable\"\n        [gutterSize]=\"CASE_DETAIL_GUTTER_SIZE\"\n        [unit]=\"tabContentObs.caseDetailLayout.unit\"\n        (dragEnd)=\"onSplitDragEnd($event)\"\n        class=\"split-area\"\n      >\n        <as-split-area\n          [size]=\"tabContentObs.caseDetailLayout.leftPanelWidth\"\n          [minSize]=\"tabContentObs.caseDetailLayout.leftPanelMinWidth\"\n          [maxSize]=\"tabContentObs.caseDetailLayout.leftPanelMaxWidth\"\n          class=\"split-area__content\"\n        >\n          <div\n            class=\"card-body bg-white p-5 position-relative tab-container\"\n            [class.tab-container--compact]=\"compactMode$ | async\"\n          >\n            <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n              <cds-loading></cds-loading>\n            </div>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.showNoAccess\"\n              description=\"{{ 'case.noAccess.description' | translate }}\"\n              title=\"{{ 'case.noAccess.title' | translate }}\"\n              illustration=\"valtimo-layout/img/emptystate-not-authorised.svg\"\n            >\n            </valtimo-no-results>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.noTabsConfigured\"\n              [description]=\"'case.tabs.noResultsDescription' | translate\"\n              [title]=\"'case.tabs.noResults' | translate\"\n            ></valtimo-no-results>\n\n            <ng-template #tabContainer></ng-template>\n\n            <div class=\"clearfix\"></div>\n          </div>\n        </as-split-area>\n\n        <as-split-area\n          *ngIf=\"tabContentObs.caseDetailLayout.showRightPanel\"\n          [size]=\"tabContentObs.caseDetailLayout.rightPanelWidth\"\n          [minSize]=\"tabContentObs.caseDetailLayout.rightPanelMinWidth\"\n          [maxSize]=\"tabContentObs.caseDetailLayout.rightPanelMaxWidth\"\n        >\n          @if (tabContentObs.showTaskList) {\n            <div class=\"task-panel\">\n              @if (tabContentObs.startFormPanel) {\n                <div class=\"start-form-panel\">\n                  <section class=\"start-form-panel__header\">\n                    <h4 class=\"start-form-panel__title\">{{ tabContentObs.startFormPanel.title }}</h4>\n\n                    <button cdsButton=\"ghost\" [iconOnly]=\"true\" (click)=\"onStartFormPanelClose()\">\n                      <svg cdsIcon=\"close\" size=\"16\"></svg>\n                    </button>\n                  </section>\n\n                  <section class=\"start-form-panel__body\">\n                    <ng-container\n                      *ngTemplateOutlet=\"tabContentObs.startFormPanel.template\"\n                    ></ng-container>\n                  </section>\n                </div>\n              } @else if (tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-case-detail-task-detail\n                  [taskAndProcessLink]=\"tabContentObs.taskAndProcessLinkOpenedInPanel\"\n                  (activeChange)=\"onActiveChangeEvent($event)\"\n                  (closeEvent)=\"onTaskDetailsClose()\"\n                  (formSubmit)=\"onFormSubmitEvent()\"\n                  (dueDateChanged)=\"onDueDateChanged()\"\n                >\n                </valtimo-case-detail-task-detail>\n              } @else {\n                <valtimo-case-detail-task-list\n                  [openTaskAndProcessLinkInModal]=\"tabContentObs.openTaskAndProcessLinkInModal\"\n                  (taskClickEvent)=\"onTaskClickEvent($event)\"\n                  (formSubmitEvent)=\"onFormSubmitEvent()\"\n                ></valtimo-case-detail-task-list>\n              }\n            </div>\n          }\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <valtimo-case-supporting-process-start-modal\n    [isAdmin]=\"isAdmin$ | async\"\n    (formSubmit)=\"onFormSubmitEvent()\"\n    #supportingProcessStartModal\n  ></valtimo-case-supporting-process-start-modal>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-assignment\n      *ngIf=\"canAssignLoaded$ | async\"\n      mode=\"case\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [assignedTeamKey]=\"document.assignedTeamKey\"\n      [assignedTeamTitle]=\"document.assignedTeamTitle\"\n      [hasPermission]=\"canAssign\"\n      [candidateUsers$]=\"candidateUsers$\"\n      [candidateTeams$]=\"candidateTeams$\"\n      (assignmentChangedEvent)=\"onAssignmentChanged($event)\"\n      (unassignedEvent)=\"onUnassigned()\"\n    ></valtimo-assignment>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <v-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (selected)=\"claimAssignee()\"\n  >\n    {{ 'case.claimAssigneeCase' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template\n  #unassignButton\n  let-canAssign=\"canAssign\"\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-assigneeId=\"assigneeId\"\n>\n  <v-overflow-menu-option\n    *ngIf=\"canHaveAssignee && canAssign\"\n    [disabled]=\"!assigneeId\"\n    (selected)=\"unassignAssignee()\"\n  >\n    {{ 'assignDocument.remove' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #deleteButton let-canDelete=\"canDelete\">\n  <v-overflow-menu-option\n    *ngIf=\"canDelete\"\n    [disabled]=\"isDeleting$ | async\"\n    (selected)=\"deleteDocument()\"\n    type=\"danger\"\n  >\n    {{ 'case.delete.delete' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #inspectButton let-canInspect=\"canInspect\">\n  <v-overflow-menu-option *ngIf=\"canInspect\" (selected)=\"navigateToInspection()\">\n    {{ 'case.inspection.openInspector' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"startableItems.length === 0\"\n    [ngbTooltip]=\"startableItems.length === 0 ? 'No action' : null\"\n  >\n    {{ 'case.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"case.delete.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"case.delete.description\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"case.delete.delete\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"case-actions\"\n      [ngClass]=\"{\n        'case-actions--compact': compactMode$ | async,\n        'case-actions--small-title': smallTitle$ | async,\n      }\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        canDelete: canDelete$ | async,\n        canInspect: canInspect$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async,\n      } as obs\"\n    >\n      <div class=\"case-status-assign-custom-title\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\" [title]=\"obs.caseStatus.title\">{{\n            obs.caseStatus.title\n          }}</cds-tag>\n        }\n\n        <div [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign,\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <v-overflow-menu\n          *ngIf=\"obs.canHaveAssignee || obs.canDelete || obs.canInspect\"\n          placement=\"bottom-end\"\n          class=\"overflow-button assign-overflow\"\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n        >\n          <v-overflow-menu-trigger\n            overflowTrigger\n            [compact]=\"compactMode$ | async\"\n          ></v-overflow-menu-trigger>\n\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n\n          <ng-container\n            *ngTemplateOutlet=\"\n              unassignButton;\n              context: {\n                canAssign: obs.canAssign,\n                canHaveAssignee: obs.canHaveAssignee,\n                assigneeId: obs.assigneeId,\n              }\n            \"\n          >\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"inspectButton; context: {canInspect: obs.canInspect}\">\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"deleteButton; context: {canDelete: obs.canDelete}\">\n          </ng-container>\n        </v-overflow-menu>\n\n        <v-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [menuWidth]=\"dropdownWidth$ | async\"\n          placement=\"bottom-end\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <ng-container overflowTrigger>\n            <ng-container *ngTemplateOutlet=\"customStartTrigger\"></ng-container>\n          </ng-container>\n          <v-overflow-menu-option\n            *ngFor=\"let startableItem of startableItems\"\n            [attr.title]=\"startableItem.displayName\"\n            (selected)=\"startItem(startableItem)\"\n          >\n            {{ startableItem.displayName }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content{overflow:hidden;padding-bottom:0}.main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{height:min-content;min-height:300px;overflow-y:auto;overflow-x:hidden}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--external-plugin){height:auto;overflow:hidden}.tab-container:has(>.tab--no-background){background:transparent!important}.tab-content-container{display:flex;gap:32px;overflow:auto;margin-bottom:16px}.tab-content-container:has(.tab--external-plugin){margin-bottom:0;max-height:none!important}.loading-container{display:flex;justify-content:center;flex-direction:row}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.buttons-container{display:flex;flex-direction:row;gap:8px;align-items:center}.case-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.case-actions--compact,.case-actions--small-title{padding-bottom:0;align-items:flex-start}.case-actions ::ng-deep .version-selection{width:160px}.case-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.case-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.case-status-assign-custom-title .cds--tag{margin:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%}.case-status-assign-custom-title.--compact{align-items:center}.task-panel{width:100%;transition:height .15s ease-in-out}.start-form-panel{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--cds-layer);padding:8px 16px 16px}.start-form-panel__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.start-form-panel__title{margin:0;color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.start-form-panel__body{flex:1;overflow-y:auto}.split-area__content{height:100%!important}.split-area__content .tab-container{height:min-content!important;overflow:hidden!important}:host ::ng-deep .container-fluid{height:100%!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .tab-content-container .as-split-gutter{background-color:transparent!important;--_as-gutter-icon-disabled: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E\");--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABQJJREFUeF7dWll22zAMpNwzlM5xmpMlOVl6mzrKHexWm8UFy4xIp+/FP3mxQWAwWAiRGsJ3/gwhhJvt4CRCfgCtosYhDOHm4SlW7rZyq9t/R7GsZoYQDhCA89UIrzakKuQtpRTiHv03ycJB3t8KuU9AByNfw5dWJpj1h5YABmGRsvgufzsSG21NEwGWUrv5yiuZb31yMZoAAjBFPqBdor9G0vpwu2+PBgE6TK/q0pUxxiwZxnE0SefkE0sHWQUygGG3ll0c2tGNn+M0DiSfHDlHQBu2rffoWgBWPRHWIUreM654li5bMwDQBIhI9naHFgVQCSS2PHliWlLm0/YsMrcwK6ISp1QGANhzG7XFDj2gUFr8yzrkydOJ6CyACBB1lIWkbPyeQ2UQ2ZKxksCLft4EaWqB/AshHCdg0b/1gB7wJB1QBrQ0ml4E2MMyFgxJ6iABuEGdgCUeZVQm+fQ7fhfAsflzAKFLS1G2ptmMwUpDl1oyAGxo2fw2hHBzjpsm+XiO2TGQF1GWACJGfecAjHmgCTZum/lQfezQTZ3L7z+g3goc2xGtFT86A0qLh5pgjPF13aLmv9aHdYiVn8uMwFNixQlYqVuNvayK3sZxNElgHarlP6duo2bpOcbXWxheVhkTj7Tv4ATsTG/OL6CG8DZ+KCQMIcSf6HnAAo8hrAjGRpIblLxveDm8/q4YC6fT6flyufzWBhXGoTWd4QOUp6enX9fr9X2od6SFhJlTu4FBGZA5n+jbnddZjPG8nz8lo222ItHJEraRICAAMmG6rPGb2FTjedqHsET+4/Lbu+phHWLlJ/g+Cd4gpJDgp71HHzAHFCqOEFCSULjrNkaxw2rO/zidnv/MNY99WIcY+TKufibUmOcSEB5IxLTHXLal2FG4h83VPzET1h6wUxDP8fXfJW5V8xuQhqFwVtGNgDuQ6Yo367Pb9ixdjVckVE1QS/0ekZhybRw/zMZblkBpd1sMPIdJkAsClF2ghQQPYJYBQjp5BKCBEHD4JZDi6bED3AebRDFbAp58Ski3JrgphQcgozEwXZ2dBH3nZ2Bq5KcyahuEgO1wIWBnyIuoS5hA9pHIp01dnANSdlvKwXWocRC6Pw/U70MBozCQAWI5JKDF5wFrtk8uR6XKYQibnL9dr+/CjgA5v81AamMFByTTmOhQp56hPw5/vrrvx61euz2gZKfHgcj98bUkgjo/WJCxeMrJFyQgR8ocQcGnwqsJpgSK8pymTPeIThus4DKwBKWJFNsFklEcOT9ApyFADswAQJMiwkaUldeQ7ZTKDWf79tsSgIasDwGduro1CbY+hVqZgpJ1SA5L6bQHMJNjOy19MsCgBiNgV8DK+1GxSXoYAcMwhNttOedPIZTPAhm8bQ6Anx57ZMBGgfHuXs6yuEANBBtR/2bIjzkj8bAMSIYU+KLDaoKSU8KFCOP7LAsTcDTZ2jPAfrUWf3VGnwdo1pgF5xiz9yhazwOExwfv9suEm2XArJwNtSP/+AxgwlHL1iVwiAUdhEaAxhtLWGbZDEbPEiCyhHWIla93KO7AvMoAwre7bW5jxCAfwaHnoa4N3gVU5X2RthX0gdVNBPhDZnYgzMH7ImKbCOA8wnfsVO+jeUgIEHfYFUs7jHYNLN2YvJkBXwYaNuQIwnp2cgoCag3LN1Z2+EwfwCVPLPAOJ1n05oDt9x5oRR37Pb72s/e+kU81L/EXSRwjcUdkvjUAAAAASUVORK5CYII=)}::ng-deep .tab-content-container .as-split-gutter-icon{background-repeat:no-repeat;background-size:16px 16px}::ng-deep .tab-content-container--dark .as-split-gutter{--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABPlJREFUeF7tm1tW3DAMhu2+krCmdmWlKytrIuGV9HjixDddfjkOtOd0XmAGWZfPsiw7g3fVyzvntvpD9H01+JIuwCamX5YKf9VfmCVaDze2S2fXIDG+CGC8YsrqMCvDFDmHZYCeI5gE6LietD2LlNb6uQAQTLWfCDTLmLpOIfoRvxEZydZn+pH7+vdlAEJyoIwIwDIrFtk7C2TyA/Po9gxY1zVWrN2haZq85FqS3zEF+YET3qi6rFzjfAR0yGkBwQA0wyFU75zf5MaOBYDoR2YGDigqY+U7HOKHlAsFiQOXqax+JYCYBGJr32ZAB+lEpxwc3i1nDcDWtBUYPjN8p35VBxf/4/MQUI7lqAGPzwjYBQDv3PQ0+Ue/CjV/sODp8+UiyNE7XLHO6EM+Dg4/ntBdAI69zdIqBlgTlDldADLN9a7R551cDot0kDPNbn40AIh6LSS4DS0Be9jJg7sAXPHJfBZojbXriMscGgDvvhUYmRGEes6iocJiyVejWdelYDPNk5cquhnAxVSAlgDZQG/7bUqKjvZEDqgdYwaAzQsrVQHowFkPqd5bA4LlO1ytp+zoFM0Ml2V5CYPmeX78lF7v67rla8B6GpynKZxnxBfmD03MvASCMe/9z+DRtm2/SAiZLXRGqcapbYTaICB/BHwggN1wbuzQSUHI3UQBHPqo+wPO/7dlefkWJ0PyR0ofEIAjg49Z8GOe51fOCAYgIcPkd2vLsnz33v+ubadJ0TZw8Fqcmnkk+CBjCahHXodQ49mhHGjUDJCDf37Vjmn54Sa4MuxGaL/weWzDdggJigjgDL7KpG3bxLTPmY/PALqa90JgAahpf/ohb8jjAfAlrQdCCSDG0gRPxCiHzf81XwKUVA1M7gDwbojbspsM4GZea3jov5cFp6cGoHYRFCWE5FthQwKAGCnLS9vD6UXwXbnIRpGUcsH3D6JxI2sADwFHwEnqAI4HKW0AB07ci6QDXgLHELUIghPxbxRBBukICDuAZMCaAbu8XnLf1K4wzBjdGYpzSUGI66ntBQg/8QzYB+PyyW18++sAEHvu8wSY02IbosyONaBTPj7XO6/F+SxVzgPKRooWlN7l0A0g+i0tGXrmvdu2D/qYTrBgO0GKG3ocRlrhB/jm6a13zR2i8GAk+BOOw/lmy95RMIlgAlAvh4ex5/ll5CUndYMkJfGNFyL84sCuoHa3tSVQW9HkGxjeueUNv6Krx7dbTO5R/J1FARSQ9X3d8gyh13RSZAYA9iOcmHkJWO1ZA+LkRdbaRAlO3wogKL/+/YDZl5cuFQogC/P4k/j+mx0AYVDyYVQGWDMPlbcDQDVHOREA1DmGDAgv7emA0bEofgmAmn3euXUpT3d9Z4G+4PRR+6PR9oigRqarPiT6ng4nBzRguCe0ZJEBatyqQGvkfw249VtiHTNSzdGZAddVESmW1YBDv5bSpoxBnOZkst7h6jISx5sCEltnJFp7KKkG3KNfPQvULluB2UMuR1zaBiXjB08+IJr4FQA9c3gDgNINKSDK4SCff67VjEsZEI+Cl3Scg3vwA4cU6uu0bRL3d4k3ZEDm3mAoY2YqdX7BvVsA2OJW9qlhUe+KQvObX1DYANS+2iIdHArR0bArgXfUBoAMoewopH9ROd3oBmcZiMkOANA3sXUq9mm5Pqrvq7IYXLo3Vs713ao7WRAZ8NULfTACRd0fdjtUcYyr1cIAAAAASUVORK5CYII=)}.spacing-case-tags{margin-bottom:8px}\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: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i4$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2.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: i4$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i4$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: i2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "directive", type: i2.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i4$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: i2.OverflowMenuComponent, selector: "v-overflow-menu", inputs: ["open", "placement", "menuWidth", "offsetX", "offsetY", "closeOnSelect", "useHostAsReference", "portalToBody"], outputs: ["openChange"] }, { kind: "component", type: i2.OverflowMenuOptionComponent, selector: "v-overflow-menu-option", inputs: ["disabled", "type", "testId", "optionId"], outputs: ["selected"] }, { kind: "component", type: i2.OverflowMenuTriggerComponent, selector: "v-overflow-menu-trigger", inputs: ["compact", "label"] }, { kind: "component", type: CaseDetailTaskListComponent, selector: "valtimo-case-detail-task-list", inputs: ["openTaskAndProcessLinkInModal"], outputs: ["taskClickEvent", "formSubmitEvent"] }, { kind: "component", type: CaseDetailsTaskDetailComponent, selector: "valtimo-case-detail-task-detail", inputs: ["taskAndProcessLink"], outputs: ["closeEvent", "assignmentOfTaskChanged", "dueDateChanged", "activeChange", "formSubmit"] }, { kind: "component", type: i18.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i18.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: CaseDetailHeaderWidgetComponent, selector: "valtimo-case-detail-header-widget" }, { kind: "directive", type: i2.ObserveSizeDirective, selector: "[observeSize]", outputs: ["widthChange", "heightChange"] }, { kind: "component", type: i2.AssignmentComponent, selector: "valtimo-assignment", inputs: ["mode", "hasPermission", "assigneeId", "assigneeFullName", "assignedTeamKey", "assignedTeamTitle", "candidateUsers$", "candidateTeams$"], outputs: ["assignmentChangedEvent", "unassignedEvent"] }, { kind: "component", type: CaseSupportingProcessStartModalComponent, selector: "valtimo-case-supporting-process-start-modal", inputs: ["isAdmin"], outputs: ["formSubmit"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: TabTranslatePipe, name: "tabTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, providers: [CaseTabService, CaseDetailLayoutService, ObserveSizeDirective], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': $tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <div\n      class=\"main-content__header\"\n      observeSize\n      (heightChange)=\"onMainContentHeaderHeightChange($event)\"\n    >\n      <valtimo-case-detail-header-widget></valtimo-case-detail-header-widget>\n\n      <ng-container *ngIf=\"caseTags$ | async as caseTags\">\n        @if ((caseTags || []).length > 0) {\n          <div class=\"spacing-case-tags\">\n            @for (tag of caseTags; track tag) {\n              <cds-tag size=\"sm\" [type]=\"tag.tagType\">\n                {{ tag.title }}\n              </cds-tag>\n            }\n          </div>\n        }\n      </ng-container>\n\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n\n      <ng-template #tabs>\n        <ng-container *ngIf=\"{activeTab: activeTab$ | async} as obs\">\n          <cds-tabs *ngIf=\"tabLoader\" type=\"inline\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.name === (activeTabName$ | async)\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              (selected)=\"onTabSelected(tab, obs.activeTab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n    </div>\n\n    <div\n      *ngIf=\"{\n        noTabsConfigured: noTabsConfigured$ | async,\n        showTaskList: showTaskList$ | async,\n        showNoAccess: showNoAccess$ | async,\n        caseDetailLayout: caseDetailLayout$ | async,\n        openTaskAndProcessLinkInModal: openTaskAndProcessLinkInModal$ | async,\n        taskAndProcessLinkOpenedInPanel: taskAndProcessLinkOpenedInPanel$ | async,\n        startFormPanel: startFormPanel$ | async,\n        isDarkMode: isDarkMode$ | async,\n        compactMode: compactMode$ | async,\n        tabContentContainerMaxHeight: tabContentContainerMaxHeight$ | async,\n      } as tabContentObs\"\n      #tabContentContainer\n      class=\"tab-content-container\"\n      [ngClass]=\"{\n        'tab-content-container--dark': tabContentObs.isDarkMode,\n        'tab-content-container--compact': tabContentObs.compactMode,\n      }\"\n      [style.max-height]=\"tabContentObs.tabContentContainerMaxHeight\"\n      [style.height]=\"tabContentObs.tabContentContainerMaxHeight\"\n    >\n      <as-split\n        direction=\"horizontal\"\n        [disabled]=\"!tabContentObs.caseDetailLayout.widthAdjustable\"\n        [gutterSize]=\"CASE_DETAIL_GUTTER_SIZE\"\n        [unit]=\"tabContentObs.caseDetailLayout.unit\"\n        class=\"split-area\"\n      >\n        <as-split-area\n          [size]=\"tabContentObs.caseDetailLayout.leftPanelWidth\"\n          [minSize]=\"tabContentObs.caseDetailLayout.leftPanelMinWidth\"\n          [maxSize]=\"tabContentObs.caseDetailLayout.leftPanelMaxWidth\"\n          class=\"split-area__content\"\n        >\n          <div\n            class=\"card-body bg-white p-5 position-relative tab-container\"\n            [class.tab-container--compact]=\"compactMode$ | async\"\n          >\n            <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n              <cds-loading></cds-loading>\n            </div>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.showNoAccess\"\n              description=\"{{ 'case.noAccess.description' | translate }}\"\n              title=\"{{ 'case.noAccess.title' | translate }}\"\n              illustration=\"valtimo-layout/img/emptystate-not-authorised.svg\"\n            >\n            </valtimo-no-results>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.noTabsConfigured\"\n              [description]=\"'case.tabs.noResultsDescription' | translate\"\n              [title]=\"'case.tabs.noResults' | translate\"\n            ></valtimo-no-results>\n\n            <ng-template #tabContainer></ng-template>\n\n            <div class=\"clearfix\"></div>\n          </div>\n        </as-split-area>\n\n        <as-split-area\n          *ngIf=\"tabContentObs.caseDetailLayout.showRightPanel\"\n          [size]=\"tabContentObs.caseDetailLayout.rightPanelWidth\"\n          [minSize]=\"tabContentObs.caseDetailLayout.rightPanelMinWidth\"\n          [maxSize]=\"tabContentObs.caseDetailLayout.rightPanelMaxWidth\"\n        >\n          @if (tabContentObs.showTaskList) {\n            <div class=\"task-panel\">\n              @if (tabContentObs.startFormPanel) {\n                <div class=\"start-form-panel\">\n                  <section class=\"start-form-panel__header\">\n                    <h4 class=\"start-form-panel__title\">{{ tabContentObs.startFormPanel.title }}</h4>\n\n                    <button cdsButton=\"ghost\" [iconOnly]=\"true\" (click)=\"onStartFormPanelClose()\">\n                      <svg cdsIcon=\"close\" size=\"16\"></svg>\n                    </button>\n                  </section>\n\n                  <section class=\"start-form-panel__body\">\n                    <ng-container\n                      *ngTemplateOutlet=\"tabContentObs.startFormPanel.template\"\n                    ></ng-container>\n                  </section>\n                </div>\n              } @else if (tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-case-detail-task-detail\n                  [taskAndProcessLink]=\"tabContentObs.taskAndProcessLinkOpenedInPanel\"\n                  (activeChange)=\"onActiveChangeEvent($event)\"\n                  (closeEvent)=\"onTaskDetailsClose()\"\n                  (formSubmit)=\"onFormSubmitEvent()\"\n                  (dueDateChanged)=\"onDueDateChanged()\"\n                >\n                </valtimo-case-detail-task-detail>\n              } @else {\n                <valtimo-case-detail-task-list\n                  [openTaskAndProcessLinkInModal]=\"tabContentObs.openTaskAndProcessLinkInModal\"\n                  (taskClickEvent)=\"onTaskClickEvent($event)\"\n                  (formSubmitEvent)=\"onFormSubmitEvent()\"\n                ></valtimo-case-detail-task-list>\n              }\n            </div>\n          }\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <valtimo-case-supporting-process-start-modal\n    [isAdmin]=\"isAdmin$ | async\"\n    (formSubmit)=\"onFormSubmitEvent()\"\n    #supportingProcessStartModal\n  ></valtimo-case-supporting-process-start-modal>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-assignment\n      *ngIf=\"canAssignLoaded$ | async\"\n      mode=\"case\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [assignedTeamKey]=\"document.assignedTeamKey\"\n      [assignedTeamTitle]=\"document.assignedTeamTitle\"\n      [hasPermission]=\"canAssign\"\n      [candidateUsers$]=\"candidateUsers$\"\n      [candidateTeams$]=\"candidateTeams$\"\n      (assignmentChangedEvent)=\"onAssignmentChanged($event)\"\n      (unassignedEvent)=\"onUnassigned()\"\n    ></valtimo-assignment>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <v-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (selected)=\"claimAssignee()\"\n  >\n    {{ 'case.claimAssigneeCase' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template\n  #unassignButton\n  let-canAssign=\"canAssign\"\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-assigneeId=\"assigneeId\"\n>\n  <v-overflow-menu-option\n    *ngIf=\"canHaveAssignee && canAssign\"\n    [disabled]=\"!assigneeId\"\n    (selected)=\"unassignAssignee()\"\n  >\n    {{ 'assignDocument.remove' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #deleteButton let-canDelete=\"canDelete\">\n  <v-overflow-menu-option\n    *ngIf=\"canDelete\"\n    [disabled]=\"isDeleting$ | async\"\n    (selected)=\"deleteDocument()\"\n    type=\"danger\"\n  >\n    {{ 'case.delete.delete' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #inspectButton let-canInspect=\"canInspect\">\n  <v-overflow-menu-option *ngIf=\"canInspect\" (selected)=\"navigateToInspection()\">\n    {{ 'case.inspection.openInspector' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"startableItems.length === 0\"\n    [ngbTooltip]=\"startableItems.length === 0 ? 'No action' : null\"\n  >\n    {{ 'case.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"case.delete.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"case.delete.description\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"case.delete.delete\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"case-actions\"\n      [ngClass]=\"{\n        'case-actions--compact': compactMode$ | async,\n        'case-actions--small-title': smallTitle$ | async,\n      }\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        canDelete: canDelete$ | async,\n        canInspect: canInspect$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async,\n      } as obs\"\n    >\n      <div class=\"case-status-assign-custom-title\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\" [title]=\"obs.caseStatus.title\">{{\n            obs.caseStatus.title\n          }}</cds-tag>\n        }\n\n        <div [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign,\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <v-overflow-menu\n          *ngIf=\"obs.canHaveAssignee || obs.canDelete || obs.canInspect\"\n          placement=\"bottom-end\"\n          class=\"overflow-button assign-overflow\"\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n        >\n          <v-overflow-menu-trigger\n            overflowTrigger\n            [compact]=\"compactMode$ | async\"\n          ></v-overflow-menu-trigger>\n\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n\n          <ng-container\n            *ngTemplateOutlet=\"\n              unassignButton;\n              context: {\n                canAssign: obs.canAssign,\n                canHaveAssignee: obs.canHaveAssignee,\n                assigneeId: obs.assigneeId,\n              }\n            \"\n          >\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"inspectButton; context: {canInspect: obs.canInspect}\">\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"deleteButton; context: {canDelete: obs.canDelete}\">\n          </ng-container>\n        </v-overflow-menu>\n\n        <v-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [menuWidth]=\"dropdownWidth$ | async\"\n          placement=\"bottom-end\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <ng-container overflowTrigger>\n            <ng-container *ngTemplateOutlet=\"customStartTrigger\"></ng-container>\n          </ng-container>\n          <v-overflow-menu-option\n            *ngFor=\"let startableItem of startableItems\"\n            [attr.title]=\"startableItem.displayName\"\n            (selected)=\"startItem(startableItem)\"\n          >\n            {{ startableItem.displayName }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content{overflow:hidden;padding-bottom:0}.main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{height:min-content;min-height:300px;overflow-y:auto;overflow-x:hidden}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--no-background){background:transparent!important}.tab-content-container{display:flex;gap:32px;overflow:auto;margin-bottom:16px}.loading-container{display:flex;justify-content:center;flex-direction:row}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.buttons-container{display:flex;flex-direction:row;gap:8px;align-items:center}.case-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.case-actions--compact,.case-actions--small-title{padding-bottom:0;align-items:flex-start}.case-actions ::ng-deep .version-selection{width:160px}.case-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.case-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.case-status-assign-custom-title .cds--tag{margin:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%}.case-status-assign-custom-title.--compact{align-items:center}.task-panel{width:100%;transition:height .15s ease-in-out}.start-form-panel{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--cds-layer);padding:8px 16px 16px}.start-form-panel__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.start-form-panel__title{margin:0;color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.start-form-panel__body{flex:1;overflow-y:auto}.split-area__content{height:100%!important}.split-area__content .tab-container{height:min-content!important;overflow:hidden!important}:host ::ng-deep .container-fluid{height:100%!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .tab-content-container .as-split-gutter{background-color:transparent!important;--_as-gutter-icon-disabled: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E\");--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABQJJREFUeF7dWll22zAMpNwzlM5xmpMlOVl6mzrKHexWm8UFy4xIp+/FP3mxQWAwWAiRGsJ3/gwhhJvt4CRCfgCtosYhDOHm4SlW7rZyq9t/R7GsZoYQDhCA89UIrzakKuQtpRTiHv03ycJB3t8KuU9AByNfw5dWJpj1h5YABmGRsvgufzsSG21NEwGWUrv5yiuZb31yMZoAAjBFPqBdor9G0vpwu2+PBgE6TK/q0pUxxiwZxnE0SefkE0sHWQUygGG3ll0c2tGNn+M0DiSfHDlHQBu2rffoWgBWPRHWIUreM654li5bMwDQBIhI9naHFgVQCSS2PHliWlLm0/YsMrcwK6ISp1QGANhzG7XFDj2gUFr8yzrkydOJ6CyACBB1lIWkbPyeQ2UQ2ZKxksCLft4EaWqB/AshHCdg0b/1gB7wJB1QBrQ0ml4E2MMyFgxJ6iABuEGdgCUeZVQm+fQ7fhfAsflzAKFLS1G2ptmMwUpDl1oyAGxo2fw2hHBzjpsm+XiO2TGQF1GWACJGfecAjHmgCTZum/lQfezQTZ3L7z+g3goc2xGtFT86A0qLh5pgjPF13aLmv9aHdYiVn8uMwFNixQlYqVuNvayK3sZxNElgHarlP6duo2bpOcbXWxheVhkTj7Tv4ATsTG/OL6CG8DZ+KCQMIcSf6HnAAo8hrAjGRpIblLxveDm8/q4YC6fT6flyufzWBhXGoTWd4QOUp6enX9fr9X2od6SFhJlTu4FBGZA5n+jbnddZjPG8nz8lo222ItHJEraRICAAMmG6rPGb2FTjedqHsET+4/Lbu+phHWLlJ/g+Cd4gpJDgp71HHzAHFCqOEFCSULjrNkaxw2rO/zidnv/MNY99WIcY+TKufibUmOcSEB5IxLTHXLal2FG4h83VPzET1h6wUxDP8fXfJW5V8xuQhqFwVtGNgDuQ6Yo367Pb9ixdjVckVE1QS/0ekZhybRw/zMZblkBpd1sMPIdJkAsClF2ghQQPYJYBQjp5BKCBEHD4JZDi6bED3AebRDFbAp58Ski3JrgphQcgozEwXZ2dBH3nZ2Bq5KcyahuEgO1wIWBnyIuoS5hA9pHIp01dnANSdlvKwXWocRC6Pw/U70MBozCQAWI5JKDF5wFrtk8uR6XKYQibnL9dr+/CjgA5v81AamMFByTTmOhQp56hPw5/vrrvx61euz2gZKfHgcj98bUkgjo/WJCxeMrJFyQgR8ocQcGnwqsJpgSK8pymTPeIThus4DKwBKWJFNsFklEcOT9ApyFADswAQJMiwkaUldeQ7ZTKDWf79tsSgIasDwGduro1CbY+hVqZgpJ1SA5L6bQHMJNjOy19MsCgBiNgV8DK+1GxSXoYAcMwhNttOedPIZTPAhm8bQ6Anx57ZMBGgfHuXs6yuEANBBtR/2bIjzkj8bAMSIYU+KLDaoKSU8KFCOP7LAsTcDTZ2jPAfrUWf3VGnwdo1pgF5xiz9yhazwOExwfv9suEm2XArJwNtSP/+AxgwlHL1iVwiAUdhEaAxhtLWGbZDEbPEiCyhHWIla93KO7AvMoAwre7bW5jxCAfwaHnoa4N3gVU5X2RthX0gdVNBPhDZnYgzMH7ImKbCOA8wnfsVO+jeUgIEHfYFUs7jHYNLN2YvJkBXwYaNuQIwnp2cgoCag3LN1Z2+EwfwCVPLPAOJ1n05oDt9x5oRR37Pb72s/e+kU81L/EXSRwjcUdkvjUAAAAASUVORK5CYII=)}::ng-deep .tab-content-container .as-split-gutter-icon{background-repeat:no-repeat;background-size:16px 16px}::ng-deep .tab-content-container--dark .as-split-gutter{--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABPlJREFUeF7tm1tW3DAMhu2+krCmdmWlKytrIuGV9HjixDddfjkOtOd0XmAGWZfPsiw7g3fVyzvntvpD9H01+JIuwCamX5YKf9VfmCVaDze2S2fXIDG+CGC8YsrqMCvDFDmHZYCeI5gE6LietD2LlNb6uQAQTLWfCDTLmLpOIfoRvxEZydZn+pH7+vdlAEJyoIwIwDIrFtk7C2TyA/Po9gxY1zVWrN2haZq85FqS3zEF+YET3qi6rFzjfAR0yGkBwQA0wyFU75zf5MaOBYDoR2YGDigqY+U7HOKHlAsFiQOXqax+JYCYBGJr32ZAB+lEpxwc3i1nDcDWtBUYPjN8p35VBxf/4/MQUI7lqAGPzwjYBQDv3PQ0+Ue/CjV/sODp8+UiyNE7XLHO6EM+Dg4/ntBdAI69zdIqBlgTlDldADLN9a7R551cDot0kDPNbn40AIh6LSS4DS0Be9jJg7sAXPHJfBZojbXriMscGgDvvhUYmRGEes6iocJiyVejWdelYDPNk5cquhnAxVSAlgDZQG/7bUqKjvZEDqgdYwaAzQsrVQHowFkPqd5bA4LlO1ytp+zoFM0Ml2V5CYPmeX78lF7v67rla8B6GpynKZxnxBfmD03MvASCMe/9z+DRtm2/SAiZLXRGqcapbYTaICB/BHwggN1wbuzQSUHI3UQBHPqo+wPO/7dlefkWJ0PyR0ofEIAjg49Z8GOe51fOCAYgIcPkd2vLsnz33v+ubadJ0TZw8Fqcmnkk+CBjCahHXodQ49mhHGjUDJCDf37Vjmn54Sa4MuxGaL/weWzDdggJigjgDL7KpG3bxLTPmY/PALqa90JgAahpf/ohb8jjAfAlrQdCCSDG0gRPxCiHzf81XwKUVA1M7gDwbojbspsM4GZea3jov5cFp6cGoHYRFCWE5FthQwKAGCnLS9vD6UXwXbnIRpGUcsH3D6JxI2sADwFHwEnqAI4HKW0AB07ci6QDXgLHELUIghPxbxRBBukICDuAZMCaAbu8XnLf1K4wzBjdGYpzSUGI66ntBQg/8QzYB+PyyW18++sAEHvu8wSY02IbosyONaBTPj7XO6/F+SxVzgPKRooWlN7l0A0g+i0tGXrmvdu2D/qYTrBgO0GKG3ocRlrhB/jm6a13zR2i8GAk+BOOw/lmy95RMIlgAlAvh4ex5/ll5CUndYMkJfGNFyL84sCuoHa3tSVQW9HkGxjeueUNv6Krx7dbTO5R/J1FARSQ9X3d8gyh13RSZAYA9iOcmHkJWO1ZA+LkRdbaRAlO3wogKL/+/YDZl5cuFQogC/P4k/j+mx0AYVDyYVQGWDMPlbcDQDVHOREA1DmGDAgv7emA0bEofgmAmn3euXUpT3d9Z4G+4PRR+6PR9oigRqarPiT6ng4nBzRguCe0ZJEBatyqQGvkfw249VtiHTNSzdGZAddVESmW1YBDv5bSpoxBnOZkst7h6jISx5sCEltnJFp7KKkG3KNfPQvULluB2UMuR1zaBiXjB08+IJr4FQA9c3gDgNINKSDK4SCff67VjEsZEI+Cl3Scg3vwA4cU6uu0bRL3d4k3ZEDm3mAoY2YqdX7BvVsA2OJW9qlhUe+KQvObX1DYANS+2iIdHArR0bArgXfUBoAMoewopH9ROd3oBmcZiMkOANA3sXUq9mm5Pqrvq7IYXLo3Vs713ao7WRAZ8NULfTACRd0fdjtUcYyr1cIAAAAASUVORK5CYII=)}.spacing-case-tags{margin-bottom:8px}\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"] }]
+            args: [{ standalone: false, providers: [CaseTabService, CaseDetailLayoutService, ObserveSizeDirective], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': $tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <div\n      class=\"main-content__header\"\n      observeSize\n      (heightChange)=\"onMainContentHeaderHeightChange($event)\"\n    >\n      <valtimo-case-detail-header-widget></valtimo-case-detail-header-widget>\n\n      <ng-container *ngIf=\"caseTags$ | async as caseTags\">\n        @if ((caseTags || []).length > 0) {\n          <div class=\"spacing-case-tags\">\n            @for (tag of caseTags; track tag) {\n              <cds-tag size=\"sm\" [type]=\"tag.tagType\">\n                {{ tag.title }}\n              </cds-tag>\n            }\n          </div>\n        }\n      </ng-container>\n\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n\n      <ng-template #tabs>\n        <ng-container *ngIf=\"{activeTab: activeTab$ | async} as obs\">\n          <cds-tabs *ngIf=\"tabLoader\" type=\"inline\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.name === (activeTabName$ | async)\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              (selected)=\"onTabSelected(tab, obs.activeTab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n    </div>\n\n    <div\n      *ngIf=\"{\n        noTabsConfigured: noTabsConfigured$ | async,\n        showTaskList: showTaskList$ | async,\n        showNoAccess: showNoAccess$ | async,\n        caseDetailLayout: caseDetailLayout$ | async,\n        openTaskAndProcessLinkInModal: openTaskAndProcessLinkInModal$ | async,\n        taskAndProcessLinkOpenedInPanel: taskAndProcessLinkOpenedInPanel$ | async,\n        startFormPanel: startFormPanel$ | async,\n        isDarkMode: isDarkMode$ | async,\n        compactMode: compactMode$ | async,\n        tabContentContainerMaxHeight: tabContentContainerMaxHeight$ | async,\n      } as tabContentObs\"\n      #tabContentContainer\n      class=\"tab-content-container\"\n      [ngClass]=\"{\n        'tab-content-container--dark': tabContentObs.isDarkMode,\n        'tab-content-container--compact': tabContentObs.compactMode,\n      }\"\n      [style.max-height]=\"tabContentObs.tabContentContainerMaxHeight\"\n      [style.height]=\"tabContentObs.tabContentContainerMaxHeight\"\n    >\n      <as-split\n        direction=\"horizontal\"\n        [disabled]=\"!tabContentObs.caseDetailLayout.widthAdjustable\"\n        [gutterSize]=\"CASE_DETAIL_GUTTER_SIZE\"\n        [unit]=\"tabContentObs.caseDetailLayout.unit\"\n        (dragEnd)=\"onSplitDragEnd($event)\"\n        class=\"split-area\"\n      >\n        <as-split-area\n          [size]=\"tabContentObs.caseDetailLayout.leftPanelWidth\"\n          [minSize]=\"tabContentObs.caseDetailLayout.leftPanelMinWidth\"\n          [maxSize]=\"tabContentObs.caseDetailLayout.leftPanelMaxWidth\"\n          class=\"split-area__content\"\n        >\n          <div\n            class=\"card-body bg-white p-5 position-relative tab-container\"\n            [class.tab-container--compact]=\"compactMode$ | async\"\n          >\n            <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n              <cds-loading></cds-loading>\n            </div>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.showNoAccess\"\n              description=\"{{ 'case.noAccess.description' | translate }}\"\n              title=\"{{ 'case.noAccess.title' | translate }}\"\n              illustration=\"valtimo-layout/img/emptystate-not-authorised.svg\"\n            >\n            </valtimo-no-results>\n\n            <valtimo-no-results\n              *ngIf=\"tabContentObs.noTabsConfigured\"\n              [description]=\"'case.tabs.noResultsDescription' | translate\"\n              [title]=\"'case.tabs.noResults' | translate\"\n            ></valtimo-no-results>\n\n            <ng-template #tabContainer></ng-template>\n\n            <div class=\"clearfix\"></div>\n          </div>\n        </as-split-area>\n\n        <as-split-area\n          *ngIf=\"tabContentObs.caseDetailLayout.showRightPanel\"\n          [size]=\"tabContentObs.caseDetailLayout.rightPanelWidth\"\n          [minSize]=\"tabContentObs.caseDetailLayout.rightPanelMinWidth\"\n          [maxSize]=\"tabContentObs.caseDetailLayout.rightPanelMaxWidth\"\n        >\n          @if (tabContentObs.showTaskList) {\n            <div class=\"task-panel\">\n              @if (tabContentObs.startFormPanel) {\n                <div class=\"start-form-panel\">\n                  <section class=\"start-form-panel__header\">\n                    <h4 class=\"start-form-panel__title\">{{ tabContentObs.startFormPanel.title }}</h4>\n\n                    <button cdsButton=\"ghost\" [iconOnly]=\"true\" (click)=\"onStartFormPanelClose()\">\n                      <svg cdsIcon=\"close\" size=\"16\"></svg>\n                    </button>\n                  </section>\n\n                  <section class=\"start-form-panel__body\">\n                    <ng-container\n                      *ngTemplateOutlet=\"tabContentObs.startFormPanel.template\"\n                    ></ng-container>\n                  </section>\n                </div>\n              } @else if (tabContentObs.taskAndProcessLinkOpenedInPanel) {\n                <valtimo-case-detail-task-detail\n                  [taskAndProcessLink]=\"tabContentObs.taskAndProcessLinkOpenedInPanel\"\n                  (activeChange)=\"onActiveChangeEvent($event)\"\n                  (closeEvent)=\"onTaskDetailsClose()\"\n                  (formSubmit)=\"onFormSubmitEvent()\"\n                  (dueDateChanged)=\"onDueDateChanged()\"\n                >\n                </valtimo-case-detail-task-detail>\n              } @else {\n                <valtimo-case-detail-task-list\n                  [openTaskAndProcessLinkInModal]=\"tabContentObs.openTaskAndProcessLinkInModal\"\n                  (taskClickEvent)=\"onTaskClickEvent($event)\"\n                  (formSubmitEvent)=\"onFormSubmitEvent()\"\n                ></valtimo-case-detail-task-list>\n              }\n            </div>\n          }\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <valtimo-case-supporting-process-start-modal\n    [isAdmin]=\"isAdmin$ | async\"\n    (formSubmit)=\"onFormSubmitEvent()\"\n    #supportingProcessStartModal\n  ></valtimo-case-supporting-process-start-modal>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-assignment\n      *ngIf=\"canAssignLoaded$ | async\"\n      mode=\"case\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [assignedTeamKey]=\"document.assignedTeamKey\"\n      [assignedTeamTitle]=\"document.assignedTeamTitle\"\n      [hasPermission]=\"canAssign\"\n      [candidateUsers$]=\"candidateUsers$\"\n      [candidateTeams$]=\"candidateTeams$\"\n      (assignmentChangedEvent)=\"onAssignmentChanged($event)\"\n      (unassignedEvent)=\"onUnassigned()\"\n    ></valtimo-assignment>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <v-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (selected)=\"claimAssignee()\"\n  >\n    {{ 'case.claimAssigneeCase' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template\n  #unassignButton\n  let-canAssign=\"canAssign\"\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-assigneeId=\"assigneeId\"\n>\n  <v-overflow-menu-option\n    *ngIf=\"canHaveAssignee && canAssign\"\n    [disabled]=\"!assigneeId\"\n    (selected)=\"unassignAssignee()\"\n  >\n    {{ 'assignDocument.remove' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #deleteButton let-canDelete=\"canDelete\">\n  <v-overflow-menu-option\n    *ngIf=\"canDelete\"\n    [disabled]=\"isDeleting$ | async\"\n    (selected)=\"deleteDocument()\"\n    type=\"danger\"\n  >\n    {{ 'case.delete.delete' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #inspectButton let-canInspect=\"canInspect\">\n  <v-overflow-menu-option *ngIf=\"canInspect\" (selected)=\"navigateToInspection()\">\n    {{ 'case.inspection.openInspector' | translate }}\n  </v-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"startableItems.length === 0\"\n    [ngbTooltip]=\"startableItems.length === 0 ? 'No action' : null\"\n  >\n    {{ 'case.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"case.delete.confirm\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"case.delete.description\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"case.delete.delete\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"case-actions\"\n      [ngClass]=\"{\n        'case-actions--compact': compactMode$ | async,\n        'case-actions--small-title': smallTitle$ | async,\n      }\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        canDelete: canDelete$ | async,\n        canInspect: canInspect$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async,\n      } as obs\"\n    >\n      <div class=\"case-status-assign-custom-title\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\" [title]=\"obs.caseStatus.title\">{{\n            obs.caseStatus.title\n          }}</cds-tag>\n        }\n\n        <div [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign,\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <v-overflow-menu\n          *ngIf=\"obs.canHaveAssignee || obs.canDelete || obs.canInspect\"\n          placement=\"bottom-end\"\n          class=\"overflow-button assign-overflow\"\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n        >\n          <v-overflow-menu-trigger\n            overflowTrigger\n            [compact]=\"compactMode$ | async\"\n          ></v-overflow-menu-trigger>\n\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n\n          <ng-container\n            *ngTemplateOutlet=\"\n              unassignButton;\n              context: {\n                canAssign: obs.canAssign,\n                canHaveAssignee: obs.canHaveAssignee,\n                assigneeId: obs.assigneeId,\n              }\n            \"\n          >\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"inspectButton; context: {canInspect: obs.canInspect}\">\n          </ng-container>\n\n          <ng-container *ngTemplateOutlet=\"deleteButton; context: {canDelete: obs.canDelete}\">\n          </ng-container>\n        </v-overflow-menu>\n\n        <v-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [menuWidth]=\"dropdownWidth$ | async\"\n          placement=\"bottom-end\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <ng-container overflowTrigger>\n            <ng-container *ngTemplateOutlet=\"customStartTrigger\"></ng-container>\n          </ng-container>\n          <v-overflow-menu-option\n            *ngFor=\"let startableItem of startableItems\"\n            [attr.title]=\"startableItem.displayName\"\n            (selected)=\"startItem(startableItem)\"\n          >\n            {{ startableItem.displayName }}\n          </v-overflow-menu-option>\n        </v-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content{overflow:hidden;padding-bottom:0}.main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{height:min-content;min-height:300px;overflow-y:auto;overflow-x:hidden}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--external-plugin){height:auto;overflow:hidden}.tab-container:has(>.tab--no-background){background:transparent!important}.tab-content-container{display:flex;gap:32px;overflow:auto;margin-bottom:16px}.tab-content-container:has(.tab--external-plugin){margin-bottom:0;max-height:none!important}.loading-container{display:flex;justify-content:center;flex-direction:row}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.buttons-container{display:flex;flex-direction:row;gap:8px;align-items:center}.case-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.case-actions--compact,.case-actions--small-title{padding-bottom:0;align-items:flex-start}.case-actions ::ng-deep .version-selection{width:160px}.case-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.case-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.case-status-assign-custom-title .cds--tag{margin:0;overflow:hidden;text-overflow:ellipsis;line-height:24px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%}.case-status-assign-custom-title.--compact{align-items:center}.task-panel{width:100%;transition:height .15s ease-in-out}.start-form-panel{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--cds-layer);padding:8px 16px 16px}.start-form-panel__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.start-form-panel__title{margin:0;color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.start-form-panel__body{flex:1;overflow-y:auto}.split-area__content{height:100%!important}.split-area__content .tab-container{height:min-content!important;overflow:hidden!important}:host ::ng-deep .container-fluid{height:100%!important;width:100%!important;margin:0!important;padding:0!important}::ng-deep .tab-content-container .as-split-gutter{background-color:transparent!important;--_as-gutter-icon-disabled: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E\");--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABQJJREFUeF7dWll22zAMpNwzlM5xmpMlOVl6mzrKHexWm8UFy4xIp+/FP3mxQWAwWAiRGsJ3/gwhhJvt4CRCfgCtosYhDOHm4SlW7rZyq9t/R7GsZoYQDhCA89UIrzakKuQtpRTiHv03ycJB3t8KuU9AByNfw5dWJpj1h5YABmGRsvgufzsSG21NEwGWUrv5yiuZb31yMZoAAjBFPqBdor9G0vpwu2+PBgE6TK/q0pUxxiwZxnE0SefkE0sHWQUygGG3ll0c2tGNn+M0DiSfHDlHQBu2rffoWgBWPRHWIUreM654li5bMwDQBIhI9naHFgVQCSS2PHliWlLm0/YsMrcwK6ISp1QGANhzG7XFDj2gUFr8yzrkydOJ6CyACBB1lIWkbPyeQ2UQ2ZKxksCLft4EaWqB/AshHCdg0b/1gB7wJB1QBrQ0ml4E2MMyFgxJ6iABuEGdgCUeZVQm+fQ7fhfAsflzAKFLS1G2ptmMwUpDl1oyAGxo2fw2hHBzjpsm+XiO2TGQF1GWACJGfecAjHmgCTZum/lQfezQTZ3L7z+g3goc2xGtFT86A0qLh5pgjPF13aLmv9aHdYiVn8uMwFNixQlYqVuNvayK3sZxNElgHarlP6duo2bpOcbXWxheVhkTj7Tv4ATsTG/OL6CG8DZ+KCQMIcSf6HnAAo8hrAjGRpIblLxveDm8/q4YC6fT6flyufzWBhXGoTWd4QOUp6enX9fr9X2od6SFhJlTu4FBGZA5n+jbnddZjPG8nz8lo222ItHJEraRICAAMmG6rPGb2FTjedqHsET+4/Lbu+phHWLlJ/g+Cd4gpJDgp71HHzAHFCqOEFCSULjrNkaxw2rO/zidnv/MNY99WIcY+TKufibUmOcSEB5IxLTHXLal2FG4h83VPzET1h6wUxDP8fXfJW5V8xuQhqFwVtGNgDuQ6Yo367Pb9ixdjVckVE1QS/0ekZhybRw/zMZblkBpd1sMPIdJkAsClF2ghQQPYJYBQjp5BKCBEHD4JZDi6bED3AebRDFbAp58Ski3JrgphQcgozEwXZ2dBH3nZ2Bq5KcyahuEgO1wIWBnyIuoS5hA9pHIp01dnANSdlvKwXWocRC6Pw/U70MBozCQAWI5JKDF5wFrtk8uR6XKYQibnL9dr+/CjgA5v81AamMFByTTmOhQp56hPw5/vrrvx61euz2gZKfHgcj98bUkgjo/WJCxeMrJFyQgR8ocQcGnwqsJpgSK8pymTPeIThus4DKwBKWJFNsFklEcOT9ApyFADswAQJMiwkaUldeQ7ZTKDWf79tsSgIasDwGduro1CbY+hVqZgpJ1SA5L6bQHMJNjOy19MsCgBiNgV8DK+1GxSXoYAcMwhNttOedPIZTPAhm8bQ6Anx57ZMBGgfHuXs6yuEANBBtR/2bIjzkj8bAMSIYU+KLDaoKSU8KFCOP7LAsTcDTZ2jPAfrUWf3VGnwdo1pgF5xiz9yhazwOExwfv9suEm2XArJwNtSP/+AxgwlHL1iVwiAUdhEaAxhtLWGbZDEbPEiCyhHWIla93KO7AvMoAwre7bW5jxCAfwaHnoa4N3gVU5X2RthX0gdVNBPhDZnYgzMH7ImKbCOA8wnfsVO+jeUgIEHfYFUs7jHYNLN2YvJkBXwYaNuQIwnp2cgoCag3LN1Z2+EwfwCVPLPAOJ1n05oDt9x5oRR37Pb72s/e+kU81L/EXSRwjcUdkvjUAAAAASUVORK5CYII=)}::ng-deep .tab-content-container .as-split-gutter-icon{background-repeat:no-repeat;background-size:16px 16px}::ng-deep .tab-content-container--dark .as-split-gutter{--_as-gutter-icon-horizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABPlJREFUeF7tm1tW3DAMhu2+krCmdmWlKytrIuGV9HjixDddfjkOtOd0XmAGWZfPsiw7g3fVyzvntvpD9H01+JIuwCamX5YKf9VfmCVaDze2S2fXIDG+CGC8YsrqMCvDFDmHZYCeI5gE6LietD2LlNb6uQAQTLWfCDTLmLpOIfoRvxEZydZn+pH7+vdlAEJyoIwIwDIrFtk7C2TyA/Po9gxY1zVWrN2haZq85FqS3zEF+YET3qi6rFzjfAR0yGkBwQA0wyFU75zf5MaOBYDoR2YGDigqY+U7HOKHlAsFiQOXqax+JYCYBGJr32ZAB+lEpxwc3i1nDcDWtBUYPjN8p35VBxf/4/MQUI7lqAGPzwjYBQDv3PQ0+Ue/CjV/sODp8+UiyNE7XLHO6EM+Dg4/ntBdAI69zdIqBlgTlDldADLN9a7R551cDot0kDPNbn40AIh6LSS4DS0Be9jJg7sAXPHJfBZojbXriMscGgDvvhUYmRGEes6iocJiyVejWdelYDPNk5cquhnAxVSAlgDZQG/7bUqKjvZEDqgdYwaAzQsrVQHowFkPqd5bA4LlO1ytp+zoFM0Ml2V5CYPmeX78lF7v67rla8B6GpynKZxnxBfmD03MvASCMe/9z+DRtm2/SAiZLXRGqcapbYTaICB/BHwggN1wbuzQSUHI3UQBHPqo+wPO/7dlefkWJ0PyR0ofEIAjg49Z8GOe51fOCAYgIcPkd2vLsnz33v+ubadJ0TZw8Fqcmnkk+CBjCahHXodQ49mhHGjUDJCDf37Vjmn54Sa4MuxGaL/weWzDdggJigjgDL7KpG3bxLTPmY/PALqa90JgAahpf/ohb8jjAfAlrQdCCSDG0gRPxCiHzf81XwKUVA1M7gDwbojbspsM4GZea3jov5cFp6cGoHYRFCWE5FthQwKAGCnLS9vD6UXwXbnIRpGUcsH3D6JxI2sADwFHwEnqAI4HKW0AB07ci6QDXgLHELUIghPxbxRBBukICDuAZMCaAbu8XnLf1K4wzBjdGYpzSUGI66ntBQg/8QzYB+PyyW18++sAEHvu8wSY02IbosyONaBTPj7XO6/F+SxVzgPKRooWlN7l0A0g+i0tGXrmvdu2D/qYTrBgO0GKG3ocRlrhB/jm6a13zR2i8GAk+BOOw/lmy95RMIlgAlAvh4ex5/ll5CUndYMkJfGNFyL84sCuoHa3tSVQW9HkGxjeueUNv6Krx7dbTO5R/J1FARSQ9X3d8gyh13RSZAYA9iOcmHkJWO1ZA+LkRdbaRAlO3wogKL/+/YDZl5cuFQogC/P4k/j+mx0AYVDyYVQGWDMPlbcDQDVHOREA1DmGDAgv7emA0bEofgmAmn3euXUpT3d9Z4G+4PRR+6PR9oigRqarPiT6ng4nBzRguCe0ZJEBatyqQGvkfw249VtiHTNSzdGZAddVESmW1YBDv5bSpoxBnOZkst7h6jISx5sCEltnJFp7KKkG3KNfPQvULluB2UMuR1zaBiXjB08+IJr4FQA9c3gDgNINKSDK4SCff67VjEsZEI+Cl3Scg3vwA4cU6uu0bRL3d4k3ZEDm3mAoY2YqdX7BvVsA2OJW9qlhUe+KQvObX1DYANS+2iIdHArR0bArgXfUBoAMoewopH9ROd3oBmcZiMkOANA3sXUq9mm5Pqrvq7IYXLo3Vs713ao7WRAZ8NULfTACRd0fdjtUcYyr1cIAAAAASUVORK5CYII=)}.spacing-case-tags{margin-bottom:8px}\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: i2.BreadcrumbService }, { type: i1$2.CaseStatusService }, { type: i2.CdsThemeService }, { type: i0.ComponentFactoryResolver }, { type: i1$2.DocumentService }, { type: CaseDetailLayoutService }, { type: CaseService }, { type: CaseTabService }, { type: i4$1.IconService }, { type: i5$4.KeycloakService }, { type: i1$4.NGXLogger }, { type: i1.GlobalNotificationService }, { type: i2.PageHeaderService }, { type: i2.PageTitleService }, { type: i2$2.PermissionService }, { type: i4.TranslateService }, { type: i0.Renderer2 }, { type: i1$3.ActivatedRoute }, { type: i1$3.Router }, { type: WidgetsService }, { type: i12.UserProviderService }, { type: i5.SseService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -8901,6 +9221,7 @@ class CaseModule {
             OverflowMenuOptionComponent,
             OverflowMenuTriggerComponent,
             CaseDetailWidgetsComponent,
+            CaseDetailExternalPluginTabComponent,
             CaseDetailTaskListComponent,
             CaseDetailsTaskDetailComponent,
             AngularSplitModule,
@@ -8976,6 +9297,7 @@ class CaseModule {
             OverflowMenuOptionComponent,
             OverflowMenuTriggerComponent,
             CaseDetailWidgetsComponent,
+            CaseDetailExternalPluginTabComponent,
             CaseDetailTaskListComponent,
             CaseDetailsTaskDetailComponent,
             AngularSplitModule,
@@ -9074,6 +9396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         OverflowMenuOptionComponent,
                         OverflowMenuTriggerComponent,
                         CaseDetailWidgetsComponent,
+                        CaseDetailExternalPluginTabComponent,
                         CaseDetailTaskListComponent,
                         CaseDetailsTaskDetailComponent,
                         AngularSplitModule,
@@ -9121,5 +9444,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiTabType, CASE_DETAIL_DEFAULT_DISPLAY_SIZE, CASE_DETAIL_DEFAULT_DISPLAY_TYPE, CASE_DETAIL_GUTTER_SIZE, CASE_DETAIL_LEFT_PANEL_MIN_WIDTH, CASE_DETAIL_RIGHT_PANEL_MIN_WIDTHS, CASE_DETAIL_START_PROCESS_DROPDOWN_WIDTH, CASE_DETAIL_TASK_LIST_WIDTH, CASE_INSPECTION_LOG_LEVEL_TAG, CASE_LIST_NO_RESULTS_MESSAGE, CASE_LIST_TABLE_TRANSLATIONS, CASE_TAB_TOKEN, CASE_WITHOUT_STATUS_STATUS, CaseBulkAssignModalComponent, CaseBulkAssignService, CaseColumnService, CaseDetailComponent, CaseDetailLayoutService, CaseDetailTabAuditComponent, CaseDetailTabDocumentsComponent, CaseDetailTabNotesComponent, CaseDetailTabProgressComponent, CaseDetailTabSummaryComponent, CaseExportService, CaseHeaderWidgetApiService, CaseInspectionLogLevel, CaseInspectionService, CaseInspectionTab, CaseListActionsComponent, CaseListAssigneeService, CaseListCaseTagService, CaseListComponent, CaseListHiddenColumnsService, CaseListOrchestrationService, CaseListPaginationService, CaseListQuickSearchService, CaseListSearchService, CaseListService, CaseListStatusService, CaseMenuService, CaseModule, CaseParameterService, CaseProcessStartModalComponent, CaseProcessTimerService, CaseService, CaseSupportingProcessStartModalComponent, CaseTabApiService, CaseTabService, CaseWidgetsApiService, DEFAULT_CASE_LIST_TABS, DEFAULT_TABS, DEFAULT_TAB_COMPONENTS, DefaultTabs, ProcessDetailTab, StartModalService, TAB_MAP, TabImpl, TabLoaderImpl, WIDGET_HEIGHT_1X, WIDGET_WIDTH_1X, ZGW_CASE_INSPECTION_TAB_TOKEN };
+export { ApiTabType, CASE_DETAIL_DEFAULT_DISPLAY_SIZE, CASE_DETAIL_DEFAULT_DISPLAY_TYPE, CASE_DETAIL_GUTTER_SIZE, CASE_DETAIL_LEFT_PANEL_MIN_WIDTH, CASE_DETAIL_RIGHT_PANEL_MIN_WIDTHS, CASE_DETAIL_START_PROCESS_DROPDOWN_WIDTH, CASE_DETAIL_TASK_LIST_MIN_WIDTH, CASE_DETAIL_TASK_LIST_WIDTH, CASE_INSPECTION_LOG_LEVEL_TAG, CASE_LIST_NO_RESULTS_MESSAGE, CASE_LIST_TABLE_TRANSLATIONS, CASE_TAB_TOKEN, CASE_WITHOUT_STATUS_STATUS, CaseBulkAssignModalComponent, CaseBulkAssignService, CaseColumnService, CaseDetailComponent, CaseDetailLayoutService, CaseDetailTabAuditComponent, CaseDetailTabDocumentsComponent, CaseDetailTabNotesComponent, CaseDetailTabProgressComponent, CaseDetailTabSummaryComponent, CaseExportService, CaseExternalPluginTabApiService, CaseHeaderWidgetApiService, CaseInspectionLogLevel, CaseInspectionService, CaseInspectionTab, CaseListActionsComponent, CaseListAssigneeService, CaseListCaseTagService, CaseListComponent, CaseListHiddenColumnsService, CaseListOrchestrationService, CaseListPaginationService, CaseListQuickSearchService, CaseListSearchService, CaseListService, CaseListStatusService, CaseMenuService, CaseModule, CaseParameterService, CaseProcessStartModalComponent, CaseProcessTimerService, CaseService, CaseSupportingProcessStartModalComponent, CaseTabApiService, CaseTabService, CaseWidgetsApiService, DEFAULT_CASE_LIST_TABS, DEFAULT_TABS, DEFAULT_TAB_COMPONENTS, DefaultTabs, ProcessDetailTab, StartModalService, TAB_MAP, TabImpl, TabLoaderImpl, WIDGET_HEIGHT_1X, WIDGET_WIDTH_1X, ZGW_CASE_INSPECTION_TAB_TOKEN };
 //# sourceMappingURL=valtimo-case.mjs.map