@valtimo/case 13.39.0 → 13.40.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, catchError as catchError$1, shareReplay, 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, first, fromEvent, from, debounceTime, defaultIfEmpty, EMPTY, 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';
@@ -24,6 +24,7 @@ import * as i6 from '@angular/common';
 import { CommonModule, DOCUMENT, NgComponentOutlet } from '@angular/common';
 import * as i4$1 from 'carbon-components-angular';
 import { InputModule, ButtonModule, PaginationModule, TilesModule, LoadingModule, LayerModule, TagModule, IconModule, DialogModule, ModalModule, NotificationModule, Tabs, StructuredListModule, DatePickerModule, DropdownModule, NumberModule, ToggleModule, LinkModule, TabsModule, SelectModule as SelectModule$1, ComboBoxModule, SkeletonModule, ToggletipModule, TooltipModule } from 'carbon-components-angular';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$1 from '@valtimo/process';
 import { ProcessDiagramComponent, ProcessModule } from '@valtimo/process';
 import * as i3$1 from 'ngx-spinner';
@@ -34,8 +35,7 @@ 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, WidgetType, WidgetContainerComponent } from '@valtimo/layout';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { WidgetFieldComponent, WidgetCustomComponent, WidgetFormioComponent, WidgetTableComponent, WidgetCollectionComponent, WidgetMapComponent, WidgetPersonCardComponent, WidgetMetrolineComponent, WidgetHighlightComponent, WidgetImageComponent, WidgetTextComponent, WidgetType, WidgetContainerComponent } from '@valtimo/layout';
 import { isEqual } from 'lodash-es';
 import { isEqual as isEqual$1 } from 'lodash';
 import * as i5$2 from '@valtimo/teams';
@@ -1271,7 +1271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
         }], ctorParameters: () => [{ type: i1$2.DocumentService }, { type: i1$3.ActivatedRoute }, { type: i3.FormService }, { type: i4.TranslateService }, { type: i5.SseService }] });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * 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.
@@ -1286,43 +1286,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * limitations under the License.
  */
 class CaseDetailTabProgressComponent {
-    constructor(route, documentService) {
+    constructor(route, documentService, caseProcessTimerService, notificationService, translateService, destroyRef) {
         this.route = route;
         this.documentService = documentService;
-        this.processDocumentInstances$ = this.route.paramMap.pipe(switchMap((params) => this.documentService.findProcessDocumentInstances(params.get('documentId'))), map(processDocumentInstances => processDocumentInstances.map(processDocumentInstance => ({
+        this.caseProcessTimerService = caseProcessTimerService;
+        this.notificationService = notificationService;
+        this.translateService = translateService;
+        this.destroyRef = destroyRef;
+        this._documentId$ = this.route.paramMap.pipe(map((params) => params.get('documentId')), shareReplay({ bufferSize: 1, refCount: true }));
+        this._reloadProcessInstances$ = new BehaviorSubject(undefined);
+        this.selectedProcessInstanceId$ = new BehaviorSubject(null);
+        this.processDocumentInstances$ = combineLatest([this.route.paramMap, this._reloadProcessInstances$]).pipe(switchMap(([params]) => this.documentService.findProcessDocumentInstances(params.get('documentId'))), map(processDocumentInstances => processDocumentInstances.map(processDocumentInstance => ({
             ...processDocumentInstance,
             startedOn: new Date(processDocumentInstance.startedOn),
         }))), map(processDocumentInstances => processDocumentInstances.sort((a, b) => a.active === b.active ? b.startedOn.getTime() - a.startedOn.getTime() : a.active ? -1 : 1)), tap(processDocumentInstances => {
-            if (processDocumentInstances.length > 0) {
+            if (processDocumentInstances.length === 0) {
+                return;
+            }
+            // Reloading keeps the selected process instance, as long as it is still part of the case.
+            const stillPresent = processDocumentInstances.some(processDocumentInstance => processDocumentInstance.id.processInstanceId === this.selectedProcessInstanceId$.value);
+            if (!stillPresent) {
                 this.selectedProcessInstanceId$.next(processDocumentInstances[0].id.processInstanceId);
             }
         }));
-        this.processInstanceItems$ = this.processDocumentInstances$.pipe(map(processDocumentInstances => processDocumentInstances.map((processDocumentInstance, index) => ({
+        this.processInstanceItems$ = combineLatest([
+            this.processDocumentInstances$,
+            this.selectedProcessInstanceId$,
+        ]).pipe(map(([processDocumentInstances, selectedProcessInstanceId]) => processDocumentInstances.map(processDocumentInstance => ({
             processInstanceId: processDocumentInstance.id.processInstanceId,
             content: processDocumentInstance.processName || '-',
-            selected: index === 0,
+            selected: processDocumentInstance.id.processInstanceId === selectedProcessInstanceId,
         }))), map(processInstanceItems => ({
             value: processInstanceItems,
             isLoading: false,
         })), startWith({ isLoading: true }));
-        this.selectedProcessInstanceId$ = new BehaviorSubject(null);
         this.selectedProcessInstance$ = combineLatest([this.processDocumentInstances$, this.selectedProcessInstanceId$]).pipe(map(([processDocumentInstances, selectedProcessInstanceId]) => processDocumentInstances.find(instance => instance.id.processInstanceId === selectedProcessInstanceId)), map(processInstanceItems => ({
             value: processInstanceItems,
             isLoading: false,
         })), startWith({ isLoading: true }));
+        this.diagramReloadToken$ = new BehaviorSubject(0);
+        this.showSkipConfirm$ = new BehaviorSubject(false);
+        this._reloadTimers$ = new BehaviorSubject(undefined);
+        /**
+         * The endpoint only returns the timers the user is allowed to complete, so no separate permission
+         * check is needed here. Checking the `complete` permission on `OperatonTimer` up front would not
+         * work for permissions that are conditional on the timer or the case it belongs to.
+         */
+        this.skippableTimers$ = combineLatest([
+            this._documentId$,
+            this.selectedProcessInstanceId$,
+            this._reloadTimers$,
+        ]).pipe(switchMap(([documentId, processInstanceId]) => {
+            if (!documentId || !processInstanceId) {
+                return of([]);
+            }
+            return this.caseProcessTimerService.getSkippableTimers(documentId, processInstanceId).pipe(map(jobs => jobs.map(job => ({ jobId: job.id, activityId: job.activityId }))), catchError$1(() => of([])));
+        }), startWith([]), shareReplay({ bufferSize: 1, refCount: true }));
+        this.canSkipTimer$ = this.skippableTimers$.pipe(map(timers => timers.length > 0));
+        this._pendingSkip$ = new BehaviorSubject(null);
     }
     loadProcessInstance(processInstanceId) {
         if (!!processInstanceId) {
             this.selectedProcessInstanceId$.next(processInstanceId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailTabProgressComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i1$2.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseDetailTabProgressComponent, isStandalone: false, selector: "valtimo-case-detail-tab-progress", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  class=\"full-height-tab-content\"\n  *ngIf=\"{\n    processInstanceItems: processInstanceItems$ | async,\n    selectedProcessInstance: selectedProcessInstance$ | async,\n  } as obs\"\n>\n  <span *ngIf=\"!obs.processInstanceItems.isLoading && !obs.processInstanceItems.value\">{{\n    'progress.noProcessDocumentInstances' | translate\n  }}</span>\n\n  <div class=\"process-info-row\">\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'progress.process' | translate\"\n      [skeleton]=\"obs.processInstanceItems.isLoading\"\n      [style.width.px]=\"350\"\n      (selected)=\"loadProcessInstance($event.item.processInstanceId)\"\n    >\n      <cds-dropdown-list [items]=\"obs.processInstanceItems.value || []\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.version }} ({{ 'progress.of' | translate }}\n        {{ obs.selectedProcessInstance.value.latestVersion }})\n      </span>\n    </div>\n\n    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\n\n  <div>\n    <valtimo-process-diagram\n      *ngIf=\"!obs.selectedProcessInstance.isLoading\"\n      [processInstanceId]=\"obs.selectedProcessInstance.value.id.processInstanceId\"\n    ></valtimo-process-diagram>\n  </div>\n</ng-container>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}.process-info-row{display:flex;gap:24px}.process-info-text{color:var(--v-color-black);font-size:var(--v-font-size-default)}.process-info-text{display:flex;height:40px;align-items:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }, { kind: "component", type: i2.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i4$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4$1.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+    /**
+     * The case and process instance the timer belongs to are captured here, so confirming skips the
+     * timer in the context it was requested from, even when the selection or the route changed in the
+     * meantime.
+     */
+    onRequestSkipTimer(timer) {
+        const processInstanceId = this.selectedProcessInstanceId$.value;
+        this._documentId$.pipe(take(1), takeUntilDestroyed(this.destroyRef)).subscribe(documentId => {
+            if (!documentId || !processInstanceId) {
+                return;
+            }
+            this._pendingSkip$.next({ timer, documentId, processInstanceId });
+            this.showSkipConfirm$.next(true);
+        });
+    }
+    onConfirmSkipTimer() {
+        this.showSkipConfirm$.next(false);
+        const pendingSkip = this._pendingSkip$.value;
+        if (!pendingSkip) {
+            return;
+        }
+        /*
+        The pending skip is cleared before the request is sent, so a repeated confirm cannot submit the
+        same timer twice and a completing request cannot clear a newer pending skip.
+        */
+        this._pendingSkip$.next(null);
+        this.caseProcessTimerService
+            .skipTimer(pendingSkip.documentId, pendingSkip.processInstanceId, pendingSkip.timer.jobId)
+            // HTTP failures are surfaced globally by HttpErrorInterceptor, so only success is handled here.
+            .subscribe(() => {
+            this.notificationService.showToast({
+                type: 'success',
+                title: this.translateService.instant('progress.skipTimer.successToast'),
+                message: '',
+            });
+            // Skipping a timer can complete the process, so the process instance data is stale too.
+            this._reloadProcessInstances$.next();
+            this._reloadTimers$.next();
+            this.diagramReloadToken$.next(this.diagramReloadToken$.value + 1);
+        });
+    }
+    onCancelSkipTimer() {
+        this.showSkipConfirm$.next(false);
+        this._pendingSkip$.next(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailTabProgressComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i1$2.DocumentService }, { token: CaseProcessTimerService }, { token: i1.GlobalNotificationService }, { token: i4.TranslateService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CaseDetailTabProgressComponent, isStandalone: false, selector: "valtimo-case-detail-tab-progress", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  class=\"full-height-tab-content\"\n  *ngIf=\"{\n    processInstanceItems: processInstanceItems$ | async,\n    selectedProcessInstance: selectedProcessInstance$ | async,\n    canSkipTimer: canSkipTimer$ | async,\n    skippableTimers: skippableTimers$ | async,\n    diagramReloadToken: diagramReloadToken$ | async,\n  } as obs\"\n>\n  <span *ngIf=\"!obs.processInstanceItems.isLoading && !obs.processInstanceItems.value\">{{\n    'progress.noProcessDocumentInstances' | translate\n  }}</span>\n\n  <div class=\"process-info-row\">\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'progress.process' | translate\"\n      [skeleton]=\"obs.processInstanceItems.isLoading\"\n      [style.width.px]=\"350\"\n      (selected)=\"loadProcessInstance($event.item.processInstanceId)\"\n    >\n      <cds-dropdown-list [items]=\"obs.processInstanceItems.value || []\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.version }} ({{ 'progress.of' | translate }}\n        {{ obs.selectedProcessInstance.value.latestVersion }})\n      </span>\n    </div>\n\n    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\n\n  <div>\n    <valtimo-process-diagram\n      *ngIf=\"!obs.selectedProcessInstance.isLoading\"\n      [canSkipTimer]=\"obs.canSkipTimer || false\"\n      [processInstanceId]=\"obs.selectedProcessInstance.value.id.processInstanceId\"\n      [reloadToken]=\"obs.diagramReloadToken || 0\"\n      [skipTimerLabel]=\"'progress.skipTimer.action' | translate\"\n      [skippableTimers]=\"obs.skippableTimers || []\"\n      (skipTimerEvent)=\"onRequestSkipTimer($event)\"\n    ></valtimo-process-diagram>\n  </div>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"progress.skipTimer.confirmButton\"\n    titleTranslationKey=\"progress.skipTimer.confirmTitle\"\n    [content]=\"'progress.skipTimer.confirmContent' | translate\"\n    [showModalSubject$]=\"showSkipConfirm$\"\n    (cancelEvent)=\"onCancelSkipTimer()\"\n    (confirmEvent)=\"onConfirmSkipTimer()\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}.process-info-row{display:flex;gap:24px}.process-info-text{color:var(--v-color-black);font-size:var(--v-font-size-default)}.process-info-text{display:flex;height:40px;align-items:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId", "skippableTimers", "canSkipTimer", "skipTimerLabel", "reloadToken"], outputs: ["importDone", "skipTimerEvent"] }, { kind: "component", type: i2.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { 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.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4$1.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseDetailTabProgressComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'valtimo-case-detail-tab-progress', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  class=\"full-height-tab-content\"\n  *ngIf=\"{\n    processInstanceItems: processInstanceItems$ | async,\n    selectedProcessInstance: selectedProcessInstance$ | async,\n  } as obs\"\n>\n  <span *ngIf=\"!obs.processInstanceItems.isLoading && !obs.processInstanceItems.value\">{{\n    'progress.noProcessDocumentInstances' | translate\n  }}</span>\n\n  <div class=\"process-info-row\">\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'progress.process' | translate\"\n      [skeleton]=\"obs.processInstanceItems.isLoading\"\n      [style.width.px]=\"350\"\n      (selected)=\"loadProcessInstance($event.item.processInstanceId)\"\n    >\n      <cds-dropdown-list [items]=\"obs.processInstanceItems.value || []\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.version }} ({{ 'progress.of' | translate }}\n        {{ obs.selectedProcessInstance.value.latestVersion }})\n      </span>\n    </div>\n\n    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\n\n  <div>\n    <valtimo-process-diagram\n      *ngIf=\"!obs.selectedProcessInstance.isLoading\"\n      [processInstanceId]=\"obs.selectedProcessInstance.value.id.processInstanceId\"\n    ></valtimo-process-diagram>\n  </div>\n</ng-container>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}.process-info-row{display:flex;gap:24px}.process-info-text{color:var(--v-color-black);font-size:var(--v-font-size-default)}.process-info-text{display:flex;height:40px;align-items:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: i1$2.DocumentService }] });
+            args: [{ standalone: false, selector: 'valtimo-case-detail-tab-progress', template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  class=\"full-height-tab-content\"\n  *ngIf=\"{\n    processInstanceItems: processInstanceItems$ | async,\n    selectedProcessInstance: selectedProcessInstance$ | async,\n    canSkipTimer: canSkipTimer$ | async,\n    skippableTimers: skippableTimers$ | async,\n    diagramReloadToken: diagramReloadToken$ | async,\n  } as obs\"\n>\n  <span *ngIf=\"!obs.processInstanceItems.isLoading && !obs.processInstanceItems.value\">{{\n    'progress.noProcessDocumentInstances' | translate\n  }}</span>\n\n  <div class=\"process-info-row\">\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'progress.process' | translate\"\n      [skeleton]=\"obs.processInstanceItems.isLoading\"\n      [style.width.px]=\"350\"\n      (selected)=\"loadProcessInstance($event.item.processInstanceId)\"\n    >\n      <cds-dropdown-list [items]=\"obs.processInstanceItems.value || []\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.version }} ({{ 'progress.of' | translate }}\n        {{ obs.selectedProcessInstance.value.latestVersion }})\n      </span>\n    </div>\n\n    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\n\n  <div>\n    <valtimo-process-diagram\n      *ngIf=\"!obs.selectedProcessInstance.isLoading\"\n      [canSkipTimer]=\"obs.canSkipTimer || false\"\n      [processInstanceId]=\"obs.selectedProcessInstance.value.id.processInstanceId\"\n      [reloadToken]=\"obs.diagramReloadToken || 0\"\n      [skipTimerLabel]=\"'progress.skipTimer.action' | translate\"\n      [skippableTimers]=\"obs.skippableTimers || []\"\n      (skipTimerEvent)=\"onRequestSkipTimer($event)\"\n    ></valtimo-process-diagram>\n  </div>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"progress.skipTimer.confirmButton\"\n    titleTranslationKey=\"progress.skipTimer.confirmTitle\"\n    [content]=\"'progress.skipTimer.confirmContent' | translate\"\n    [showModalSubject$]=\"showSkipConfirm$\"\n    (cancelEvent)=\"onCancelSkipTimer()\"\n    (confirmEvent)=\"onConfirmSkipTimer()\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}.process-info-row{display:flex;gap:24px}.process-info-text{color:var(--v-color-black);font-size:var(--v-font-size-default)}.process-info-text{display:flex;height:40px;align-items:center}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.ActivatedRoute }, { type: i1$2.DocumentService }, { type: CaseProcessTimerService }, { type: i1.GlobalNotificationService }, { type: i4.TranslateService }, { type: i0.DestroyRef }] });
 
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
@@ -3082,6 +3161,68 @@ 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 CaseWidgetTextComponent extends WidgetProcess {
+    set documentId(value) {
+        this.baseDocumentId = value;
+    }
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this.widgetConfiguration$.next(value);
+        this.baseWidgetConfiguration = value;
+    }
+    constructor(documentService, permissionService, widgetsService, widgetLayoutService) {
+        super(documentService, permissionService);
+        this.documentService = documentService;
+        this.permissionService = permissionService;
+        this.widgetsService = widgetsService;
+        this.widgetLayoutService = widgetLayoutService;
+        this.widgetConfiguration$ = new BehaviorSubject(null);
+    }
+    /**
+     * The content of a text widget is part of its configuration, so there is no data to fetch.
+     * The layout still has to be told the widget is ready, because it only considers itself loaded
+     * once at least one widget has reported in — a tab containing only text widgets would otherwise
+     * keep showing its loading state.
+     */
+    ngOnInit() {
+        this.widgetLayoutService.setWidgetDataLoaded(this.widgetUuid);
+    }
+    onProcessStartClick(process) {
+        if (!process.processDefinitionKey)
+            return;
+        this.widgetsService.startProcess(process.processDefinitionKey);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseWidgetTextComponent, deps: [{ token: i1$2.DocumentService }, { token: i2$2.PermissionService }, { token: WidgetsService }, { token: i5$1.WidgetLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseWidgetTextComponent, isStandalone: true, selector: "valtimo-case-widget-text", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration", widgetUuid: "widgetUuid" }, 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<valtimo-widget-text\n  *ngIf=\"{widgetConfiguration: widgetConfiguration$ | async} as obs\"\n  [widgetConfiguration]=\"obs.widgetConfiguration\"\n>\n  @if (\n    obs.widgetConfiguration?.actions?.length === 1 &&\n    obs.widgetConfiguration.actions[0]?.processDefinitionKey &&\n    (canCreateCamundaExecution$ | async)\n  ) {\n    <button cdsButton=\"ghost\" (click)=\"onProcessStartClick(obs.widgetConfiguration.actions[0])\">\n      {{ obs.widgetConfiguration.actions[0].name }}\n    </button>\n  }\n</valtimo-widget-text>\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: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: WidgetTextComponent, selector: "valtimo-widget-text", inputs: ["widgetConfiguration"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseWidgetTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-case-widget-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ButtonModule, CommonModule, TranslateModule, WidgetTextComponent], 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<valtimo-widget-text\n  *ngIf=\"{widgetConfiguration: widgetConfiguration$ | async} as obs\"\n  [widgetConfiguration]=\"obs.widgetConfiguration\"\n>\n  @if (\n    obs.widgetConfiguration?.actions?.length === 1 &&\n    obs.widgetConfiguration.actions[0]?.processDefinitionKey &&\n    (canCreateCamundaExecution$ | async)\n  ) {\n    <button cdsButton=\"ghost\" (click)=\"onProcessStartClick(obs.widgetConfiguration.actions[0])\">\n      {{ obs.widgetConfiguration.actions[0].name }}\n    </button>\n  }\n</valtimo-widget-text>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.DocumentService }, { type: i2$2.PermissionService }, { type: WidgetsService }, { type: i5$1.WidgetLayoutService }], propDecorators: { documentId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], widgetConfiguration: [{
+                type: Input
+            }], widgetUuid: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -3135,6 +3276,7 @@ class CaseDetailWidgetsComponent {
             [WidgetType.METROLINE]: CaseWidgetMetrolineComponent,
             [WidgetType.HIGHLIGHT]: CaseWidgetHighlightComponent,
             [WidgetType.IMAGE]: CaseWidgetImageComponent,
+            [WidgetType.TEXT]: CaseWidgetTextComponent,
         };
     }
     ngOnInit() {
@@ -4371,6 +4513,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.ConfigService }] });
 
+class CaseProcessTimerService {
+    constructor(http, configService) {
+        this.http = http;
+        this.configService = configService;
+        this._baseUrl = this.configService.config.valtimoApi.endpointUri;
+    }
+    getSkippableTimers(caseId, processInstanceId) {
+        return this.http.get(`${this._baseUrl}v1/process-document/case/${caseId}/process-instance/${processInstanceId}/timers`);
+    }
+    skipTimer(caseId, processInstanceId, jobId) {
+        return this.http.post(`${this._baseUrl}v1/process-document/case/${caseId}/process-instance/${processInstanceId}/timer/${jobId}/skip`, {});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseProcessTimerService, 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: CaseProcessTimerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseProcessTimerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1.ConfigService }] });
+
 /*
  * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
@@ -7763,7 +7925,7 @@ class CaseInspectionProcessDetailComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseInspectionProcessDetailComponent, deps: [{ token: CaseInspectionService }, { token: i1.GlobalNotificationService }, { token: i4.TranslateService }, { token: i4$1.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseInspectionProcessDetailComponent, isStandalone: true, selector: "valtimo-case-inspection-process-detail", inputs: { row: "row", documentId: "documentId", canInspectModify: "canInspectModify" }, outputs: { viewBuildingBlockEvent: "viewBuildingBlockEvent", variablesChangedEvent: "variablesChangedEvent", viewProcessLogsEvent: "viewProcessLogsEvent" }, 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<section class=\"case-inspection-process-detail\">\n  <header class=\"case-inspection-process-detail__header\">\n    <h3>\n      {{ row.processName || row.processDefinitionKey }}\n      <small>{{ 'case.inspection.processes.version' | translate }} {{ row.version }}</small>\n    </h3>\n\n    <div class=\"case-inspection-process-detail__tags\">\n      <cds-tag\n        size=\"sm\"\n        [type]=\"row.active ? 'blue' : 'cool-gray'\"\n        [title]=\"\n          row.active\n            ? ('case.inspection.processes.active' | translate)\n            : ('case.inspection.processes.completed' | translate)\n        \"\n      >\n        {{\n          row.active\n            ? ('case.inspection.processes.active' | translate)\n            : ('case.inspection.processes.completed' | translate)\n        }}\n      </cds-tag>\n\n      @if (row.buildingBlock; as bb) {\n        <cds-tag\n          size=\"sm\"\n          type=\"green\"\n          [title]=\"'case.inspection.processes.buildingBlockTagTooltip' | translate\"\n        >\n          {{ 'case.inspection.processes.buildingBlockTag' | translate }}: {{ bb.definitionKey }}\n          {{ bb.definitionVersionTag }}\n        </cds-tag>\n      }\n\n      <button cdsButton=\"ghost\" size=\"sm\" type=\"button\" (click)=\"onViewProcessLogs()\">\n        {{ 'case.inspection.processes.viewLogs' | translate }}\n      </button>\n    </div>\n\n    <cds-structured-list class=\"case-inspection-process-detail__meta\" [condensed]=\"true\">\n      <cds-list-row>\n        <cds-list-column>{{ 'case.inspection.processes.instanceId' | translate }}</cds-list-column>\n        <cds-list-column\n          ><code>{{ row.processInstanceId }}</code></cds-list-column\n        >\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column>{{ 'case.inspection.processes.startedBy' | translate }}</cds-list-column>\n        <cds-list-column>{{ row.startedBy || row.startedByUserId || '\u2014' }}</cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column>{{ 'case.inspection.processes.startedOn' | translate }}</cds-list-column>\n        <cds-list-column>{{ row.startedOn | date: 'medium' }}</cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"row.buildingBlock as bb\">\n        <cds-list-column>{{\n          'case.inspection.processes.buildingBlock' | translate\n        }}</cds-list-column>\n        <cds-list-column>\n          <a\n            cdsLink\n            href=\"javascript:void(0)\"\n            (click)=\"onViewBuildingBlock(bb); $event.preventDefault()\"\n          >\n            {{ bb.definitionKey }} {{ bb.definitionVersionTag }}\n            <span aria-hidden=\"true\">\u2192</span>\n          </a>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </header>\n\n  <cds-tabs type=\"inline\">\n    <cds-tab\n      [active]=\"$activeTab() === ProcessDetailTab.DETAILS\"\n      [heading]=\"'case.inspection.processes.detailsTab' | translate\"\n      (selected)=\"onSelectTab(ProcessDetailTab.DETAILS)\"\n    >\n      <div class=\"case-inspection-process-detail__pane\">\n        @if (row.incidents.length > 0) {\n          <h4 class=\"case-inspection-process-detail__subhead\">\n            {{ 'case.inspection.processes.incidentsHeader' | translate }}\n          </h4>\n\n          <cds-structured-list>\n            <cds-list-header>\n              @for (column of incidentColumns; track column) {\n                <cds-list-column>{{ column | translate }}</cds-list-column>\n              }\n            </cds-list-header>\n\n            @for (incident of row.incidents; track incident.id) {\n              <cds-list-row>\n                <cds-list-column>{{ incident.incidentType }}</cds-list-column>\n                <cds-list-column>{{ incident.activityId || '\u2014' }}</cds-list-column>\n                <cds-list-column>{{ incident.incidentMessage || '\u2014' }}</cds-list-column>\n                <cds-list-column>{{ incident.incidentTimestamp | date: 'medium' }}</cds-list-column>\n              </cds-list-row>\n            }\n          </cds-structured-list>\n        }\n\n        <h4\n          class=\"case-inspection-process-detail__subhead case-inspection-process-detail__subhead--no-margin\"\n        >\n          {{ 'case.inspection.processes.tasksHeader' | translate }}\n        </h4>\n\n        @if (row.tasks.length > 0) {\n          <cds-structured-list>\n            <cds-list-header>\n              @for (column of taskColumns; track column) {\n                <cds-list-column>{{ column | translate }}</cds-list-column>\n              }\n            </cds-list-header>\n\n            @for (task of row.tasks; track task.id) {\n              <cds-list-row>\n                <cds-list-column>{{ task.name }}</cds-list-column>\n                <cds-list-column>{{ task.assignee || '\u2014' }}</cds-list-column>\n                <cds-list-column>{{ task.created | date: 'medium' }}</cds-list-column>\n              </cds-list-row>\n            }\n          </cds-structured-list>\n        } @else {\n          <p class=\"case-inspection-process-detail__empty\">\n            {{ 'case.inspection.processes.noTasks' | translate }}\n          </p>\n        }\n\n        <div class=\"case-inspection-process-detail__subhead-row\">\n          <h4 class=\"case-inspection-process-detail__subhead\">\n            {{ 'case.inspection.processes.variablesHeader' | translate }}\n          </h4>\n          <button\n            *ngIf=\"$canMutate()\"\n            cdsButton=\"ghost\"\n            size=\"sm\"\n            type=\"button\"\n            (click)=\"onAddVariable()\"\n          >\n            {{ 'case.inspection.processes.variableActions.add' | translate }}\n            <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n          </button>\n        </div>\n\n        @if (row.variables.length > 0) {\n          <cds-structured-list>\n            <cds-list-header>\n              @for (column of variableColumns; track column) {\n                <cds-list-column>{{ column | translate }}</cds-list-column>\n              }\n              @if ($canMutate()) {\n                <cds-list-column></cds-list-column>\n              }\n            </cds-list-header>\n\n            @for (variable of row.variables; track variable.name) {\n              <cds-list-row>\n                <cds-list-column>\n                  <code>{{ variable.name }}</code>\n                </cds-list-column>\n                <cds-list-column>{{ variable.type }}</cds-list-column>\n                <cds-list-column>\n                  <code class=\"case-inspection-process-detail__variable-value\">{{\n                    formatVariableValue(variable)\n                  }}</code>\n                </cds-list-column>\n                @if ($canMutate()) {\n                  <cds-list-column>\n                    <div class=\"case-inspection-process-detail__variable-actions\">\n                      <button\n                        cdsButton=\"ghost\"\n                        size=\"sm\"\n                        type=\"button\"\n                        [iconOnly]=\"true\"\n                        [title]=\"'case.inspection.processes.variableActions.edit' | translate\"\n                        (click)=\"onEditVariable(variable)\"\n                      >\n                        <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n                      </button>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        size=\"sm\"\n                        type=\"button\"\n                        [iconOnly]=\"true\"\n                        [title]=\"'case.inspection.processes.variableActions.delete' | translate\"\n                        (click)=\"onRequestDelete(variable)\"\n                      >\n                        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n                      </button>\n                    </div>\n                  </cds-list-column>\n                }\n              </cds-list-row>\n            }\n          </cds-structured-list>\n        } @else {\n          <p class=\"case-inspection-process-detail__empty\">\n            {{ 'case.inspection.processes.noVariables' | translate }}\n          </p>\n        }\n\n        <h4 class=\"case-inspection-process-detail__subhead\">\n          {{ 'case.inspection.processes.jobsHeader' | translate }}\n        </h4>\n\n        @if (row.jobs.length > 0) {\n          <cds-structured-list>\n            <cds-list-header>\n              @for (column of jobColumns; track column) {\n                <cds-list-column>{{ column | translate }}</cds-list-column>\n              }\n            </cds-list-header>\n\n            @for (job of row.jobs; track job.id) {\n              <cds-list-row>\n                <cds-list-column>\n                  {{ 'case.inspection.processes.jobTypeLabel.' + job.jobType | translate }}\n                </cds-list-column>\n                <cds-list-column>\n                  @if (job.activityId) {\n                    <code>{{ job.activityId }}</code>\n                  } @else {\n                    \u2014\n                  }\n                </cds-list-column>\n                <cds-list-column>{{ job.retries }}</cds-list-column>\n                <cds-list-column>{{ job.dueDate | date: 'medium' }}</cds-list-column>\n                <cds-list-column>{{ job.exceptionMessage || '\u2014' }}</cds-list-column>\n              </cds-list-row>\n            }\n          </cds-structured-list>\n        } @else {\n          <p class=\"case-inspection-process-detail__empty\">\n            {{ 'case.inspection.processes.noJobs' | translate }}\n          </p>\n        }\n      </div>\n    </cds-tab>\n\n    <cds-tab\n      [active]=\"$activeTab() === ProcessDetailTab.DIAGRAM\"\n      [heading]=\"'case.inspection.processes.diagramTab' | translate\"\n      (selected)=\"onSelectTab(ProcessDetailTab.DIAGRAM)\"\n    >\n      <div class=\"case-inspection-process-detail__pane case-inspection-process-detail__diagram\">\n        @if ($activeTab() === ProcessDetailTab.DIAGRAM) {\n          <valtimo-process-diagram\n            [processInstanceId]=\"row.processInstanceId\"\n          ></valtimo-process-diagram>\n        }\n      </div>\n    </cds-tab>\n  </cds-tabs>\n</section>\n\n<valtimo-case-inspection-process-variable-modal\n  [open]=\"$modalOpen()\"\n  [mode]=\"$modalMode()\"\n  [initialVariable]=\"$modalInitial()\"\n  (modalClosed)=\"onModalClosed($event)\"\n></valtimo-case-inspection-process-variable-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"case.inspection.processes.variableActions.delete\"\n  confirmButtonType=\"danger\"\n  titleTranslationKey=\"case.inspection.processes.variableActions.deleteConfirmTitle\"\n  [content]=\"\n    'case.inspection.processes.variableActions.deleteConfirmContent'\n      | translate: {name: (pendingDeleteName$ | async) ?? ''}\n  \"\n  [showModalSubject$]=\"showConfirmDelete$\"\n  (cancelEvent)=\"onCancelDelete()\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n", styles: [".case-inspection-process-detail{padding-top:var(--cds-spacing-05);padding-bottom:var(--cds-spacing-05);padding-right:var(--cds-spacing-05)}.case-inspection-process-detail__header{margin-bottom:var(--cds-spacing-05)}.case-inspection-process-detail__header h3{margin:0}.case-inspection-process-detail__header h3 small{font-weight:400;color:var(--cds-text-helper);margin-left:var(--cds-spacing-03);font-size:var(--cds-body-compact-01-font-size)}.case-inspection-process-detail__tags{display:flex;gap:var(--cds-spacing-03);flex-wrap:wrap;margin-top:var(--cds-spacing-03);margin-bottom:var(--cds-spacing-03)}.case-inspection-process-detail__meta code{word-break:break-all}.case-inspection-process-detail__subhead{margin:var(--cds-spacing-06) 0 var(--cds-spacing-03);font-size:var(--cds-body-compact-01-font-size);font-weight:600;color:var(--cds-text-secondary)}.case-inspection-process-detail__subhead--no-margin{margin-top:0}.case-inspection-process-detail__variable-actions{display:flex;flex-shrink:0;gap:8px}.case-inspection-process-detail__empty{color:var(--cds-text-helper)}.case-inspection-process-detail__variable-value{overflow-wrap:anywhere;white-space:pre-wrap;max-height:96px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical}.case-inspection-process-detail__pane{padding-top:var(--cds-spacing-05)}.case-inspection-process-detail__diagram{margin-top:16px;height:480px;border:1px solid var(--cds-border-subtle);overflow:hidden}.case-inspection-process-detail__diagram ::ng-deep valtimo-process-diagram,.case-inspection-process-detail__diagram ::ng-deep .process-diagram-container{display:flex;flex-direction:column;height:100%}.case-inspection-process-detail__diagram ::ng-deep .diagram-container{flex:1 1 auto;min-height:0;height:auto!important}.case-inspection-process-detail__diagram ::ng-deep .legenda-holder{flex-shrink:0;padding:var(--cds-spacing-03) var(--cds-spacing-05)}\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: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i4$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: LinkModule }, { kind: "directive", type: i4$1.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "ngmodule", type: StructuredListModule }, { kind: "component", type: i4$1.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i4$1.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i4$1.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i4$1.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "ngmodule", type: TabsModule }, { 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: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }, { kind: "component", type: CaseInspectionProcessVariableModalComponent, selector: "valtimo-case-inspection-process-variable-modal", inputs: ["open", "mode", "initialVariable"], outputs: ["modalClosed"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { 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: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CaseInspectionProcessDetailComponent, isStandalone: true, selector: "valtimo-case-inspection-process-detail", inputs: { row: "row", documentId: "documentId", canInspectModify: "canInspectModify" }, outputs: { viewBuildingBlockEvent: "viewBuildingBlockEvent", variablesChangedEvent: "variablesChangedEvent", viewProcessLogsEvent: "viewProcessLogsEvent" }, 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<section class=\"case-inspection-process-detail\">\n  <header class=\"case-inspection-process-detail__header\">\n    <h3>\n      {{ row.processName || row.processDefinitionKey }}\n      <small>{{ 'case.inspection.processes.version' | translate }} {{ row.version }}</small>\n    </h3>\n\n    <div class=\"case-inspection-process-detail__tags\">\n      <cds-tag\n        size=\"sm\"\n        [type]=\"row.active ? 'blue' : 'cool-gray'\"\n        [title]=\"\n          row.active\n            ? ('case.inspection.processes.active' | translate)\n            : ('case.inspection.processes.completed' | translate)\n        \"\n      >\n        {{\n          row.active\n            ? ('case.inspection.processes.active' | translate)\n            : ('case.inspection.processes.completed' | translate)\n        }}\n      </cds-tag>\n\n      @if (row.buildingBlock; as bb) {\n        <cds-tag\n          size=\"sm\"\n          type=\"green\"\n          [title]=\"'case.inspection.processes.buildingBlockTagTooltip' | translate\"\n        >\n          {{ 'case.inspection.processes.buildingBlockTag' | translate }}: {{ bb.definitionKey }}\n          {{ bb.definitionVersionTag }}\n        </cds-tag>\n      }\n\n      <button cdsButton=\"ghost\" size=\"sm\" type=\"button\" (click)=\"onViewProcessLogs()\">\n        {{ 'case.inspection.processes.viewLogs' | translate }}\n      </button>\n    </div>\n\n    <cds-structured-list class=\"case-inspection-process-detail__meta\" [condensed]=\"true\">\n      <cds-list-row>\n        <cds-list-column>{{ 'case.inspection.processes.instanceId' | translate }}</cds-list-column>\n        <cds-list-column\n          ><code>{{ row.processInstanceId }}</code></cds-list-column\n        >\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column>{{ 'case.inspection.processes.startedBy' | translate }}</cds-list-column>\n        <cds-list-column>{{ row.startedBy || row.startedByUserId || '\u2014' }}</cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column>{{ 'case.inspection.processes.startedOn' | translate }}</cds-list-column>\n        <cds-list-column>{{ row.startedOn | date: 'medium' }}</cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"row.buildingBlock as bb\">\n        <cds-list-column>{{\n          'case.inspection.processes.buildingBlock' | translate\n        }}</cds-list-column>\n        <cds-list-column>\n          <a\n            cdsLink\n            href=\"javascript:void(0)\"\n            (click)=\"onViewBuildingBlock(bb); $event.preventDefault()\"\n          >\n            {{ bb.definitionKey }} {{ bb.definitionVersionTag }}\n            <span aria-hidden=\"true\">\u2192</span>\n          </a>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </header>\n\n  <cds-tabs type=\"inline\">\n    <cds-tab\n      [active]=\"$activeTab() === ProcessDetailTab.DETAILS\"\n      [heading]=\"'case.inspection.processes.detailsTab' | translate\"\n      (selected)=\"onSelectTab(ProcessDetailTab.DETAILS)\"\n    >\n      <div class=\"case-inspection-process-detail__pane\">\n        @if (row.incidents.length > 0) {\n          <h4 class=\"case-inspection-process-detail__subhead\">\n            {{ 'case.inspection.processes.incidentsHeader' | translate }}\n          </h4>\n\n          <cds-structured-list>\n            <cds-list-header>\n              @for (column of incidentColumns; track column) {\n                <cds-list-column>{{ column | translate }}</cds-list-column>\n              }\n            </cds-list-header>\n\n            @for (incident of row.incidents; track incident.id) {\n              <cds-list-row>\n                <cds-list-column>{{ incident.incidentType }}</cds-list-column>\n                <cds-list-column>{{ incident.activityId || '\u2014' }}</cds-list-column>\n                <cds-list-column>{{ incident.incidentMessage || '\u2014' }}</cds-list-column>\n                <cds-list-column>{{ incident.incidentTimestamp | date: 'medium' }}</cds-list-column>\n              </cds-list-row>\n            }\n          </cds-structured-list>\n        }\n\n        <h4\n          class=\"case-inspection-process-detail__subhead case-inspection-process-detail__subhead--no-margin\"\n        >\n          {{ 'case.inspection.processes.tasksHeader' | translate }}\n        </h4>\n\n        @if (row.tasks.length > 0) {\n          <cds-structured-list>\n            <cds-list-header>\n              @for (column of taskColumns; track column) {\n                <cds-list-column>{{ column | translate }}</cds-list-column>\n              }\n            </cds-list-header>\n\n            @for (task of row.tasks; track task.id) {\n              <cds-list-row>\n                <cds-list-column>{{ task.name }}</cds-list-column>\n                <cds-list-column>{{ task.assignee || '\u2014' }}</cds-list-column>\n                <cds-list-column>{{ task.created | date: 'medium' }}</cds-list-column>\n              </cds-list-row>\n            }\n          </cds-structured-list>\n        } @else {\n          <p class=\"case-inspection-process-detail__empty\">\n            {{ 'case.inspection.processes.noTasks' | translate }}\n          </p>\n        }\n\n        <div class=\"case-inspection-process-detail__subhead-row\">\n          <h4 class=\"case-inspection-process-detail__subhead\">\n            {{ 'case.inspection.processes.variablesHeader' | translate }}\n          </h4>\n          <button\n            *ngIf=\"$canMutate()\"\n            cdsButton=\"ghost\"\n            size=\"sm\"\n            type=\"button\"\n            (click)=\"onAddVariable()\"\n          >\n            {{ 'case.inspection.processes.variableActions.add' | translate }}\n            <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n          </button>\n        </div>\n\n        @if (row.variables.length > 0) {\n          <cds-structured-list>\n            <cds-list-header>\n              @for (column of variableColumns; track column) {\n                <cds-list-column>{{ column | translate }}</cds-list-column>\n              }\n              @if ($canMutate()) {\n                <cds-list-column></cds-list-column>\n              }\n            </cds-list-header>\n\n            @for (variable of row.variables; track variable.name) {\n              <cds-list-row>\n                <cds-list-column>\n                  <code>{{ variable.name }}</code>\n                </cds-list-column>\n                <cds-list-column>{{ variable.type }}</cds-list-column>\n                <cds-list-column>\n                  <code class=\"case-inspection-process-detail__variable-value\">{{\n                    formatVariableValue(variable)\n                  }}</code>\n                </cds-list-column>\n                @if ($canMutate()) {\n                  <cds-list-column>\n                    <div class=\"case-inspection-process-detail__variable-actions\">\n                      <button\n                        cdsButton=\"ghost\"\n                        size=\"sm\"\n                        type=\"button\"\n                        [iconOnly]=\"true\"\n                        [title]=\"'case.inspection.processes.variableActions.edit' | translate\"\n                        (click)=\"onEditVariable(variable)\"\n                      >\n                        <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n                      </button>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        size=\"sm\"\n                        type=\"button\"\n                        [iconOnly]=\"true\"\n                        [title]=\"'case.inspection.processes.variableActions.delete' | translate\"\n                        (click)=\"onRequestDelete(variable)\"\n                      >\n                        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n                      </button>\n                    </div>\n                  </cds-list-column>\n                }\n              </cds-list-row>\n            }\n          </cds-structured-list>\n        } @else {\n          <p class=\"case-inspection-process-detail__empty\">\n            {{ 'case.inspection.processes.noVariables' | translate }}\n          </p>\n        }\n\n        <h4 class=\"case-inspection-process-detail__subhead\">\n          {{ 'case.inspection.processes.jobsHeader' | translate }}\n        </h4>\n\n        @if (row.jobs.length > 0) {\n          <cds-structured-list>\n            <cds-list-header>\n              @for (column of jobColumns; track column) {\n                <cds-list-column>{{ column | translate }}</cds-list-column>\n              }\n            </cds-list-header>\n\n            @for (job of row.jobs; track job.id) {\n              <cds-list-row>\n                <cds-list-column>\n                  {{ 'case.inspection.processes.jobTypeLabel.' + job.jobType | translate }}\n                </cds-list-column>\n                <cds-list-column>\n                  @if (job.activityId) {\n                    <code>{{ job.activityId }}</code>\n                  } @else {\n                    \u2014\n                  }\n                </cds-list-column>\n                <cds-list-column>{{ job.retries }}</cds-list-column>\n                <cds-list-column>{{ job.dueDate | date: 'medium' }}</cds-list-column>\n                <cds-list-column>{{ job.exceptionMessage || '\u2014' }}</cds-list-column>\n              </cds-list-row>\n            }\n          </cds-structured-list>\n        } @else {\n          <p class=\"case-inspection-process-detail__empty\">\n            {{ 'case.inspection.processes.noJobs' | translate }}\n          </p>\n        }\n      </div>\n    </cds-tab>\n\n    <cds-tab\n      [active]=\"$activeTab() === ProcessDetailTab.DIAGRAM\"\n      [heading]=\"'case.inspection.processes.diagramTab' | translate\"\n      (selected)=\"onSelectTab(ProcessDetailTab.DIAGRAM)\"\n    >\n      <div class=\"case-inspection-process-detail__pane case-inspection-process-detail__diagram\">\n        @if ($activeTab() === ProcessDetailTab.DIAGRAM) {\n          <valtimo-process-diagram\n            [processInstanceId]=\"row.processInstanceId\"\n          ></valtimo-process-diagram>\n        }\n      </div>\n    </cds-tab>\n  </cds-tabs>\n</section>\n\n<valtimo-case-inspection-process-variable-modal\n  [open]=\"$modalOpen()\"\n  [mode]=\"$modalMode()\"\n  [initialVariable]=\"$modalInitial()\"\n  (modalClosed)=\"onModalClosed($event)\"\n></valtimo-case-inspection-process-variable-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"case.inspection.processes.variableActions.delete\"\n  confirmButtonType=\"danger\"\n  titleTranslationKey=\"case.inspection.processes.variableActions.deleteConfirmTitle\"\n  [content]=\"\n    'case.inspection.processes.variableActions.deleteConfirmContent'\n      | translate: {name: (pendingDeleteName$ | async) ?? ''}\n  \"\n  [showModalSubject$]=\"showConfirmDelete$\"\n  (cancelEvent)=\"onCancelDelete()\"\n  (confirmEvent)=\"onConfirmDelete()\"\n></valtimo-confirmation-modal>\n", styles: [".case-inspection-process-detail{padding-top:var(--cds-spacing-05);padding-bottom:var(--cds-spacing-05);padding-right:var(--cds-spacing-05)}.case-inspection-process-detail__header{margin-bottom:var(--cds-spacing-05)}.case-inspection-process-detail__header h3{margin:0}.case-inspection-process-detail__header h3 small{font-weight:400;color:var(--cds-text-helper);margin-left:var(--cds-spacing-03);font-size:var(--cds-body-compact-01-font-size)}.case-inspection-process-detail__tags{display:flex;gap:var(--cds-spacing-03);flex-wrap:wrap;margin-top:var(--cds-spacing-03);margin-bottom:var(--cds-spacing-03)}.case-inspection-process-detail__meta code{word-break:break-all}.case-inspection-process-detail__subhead{margin:var(--cds-spacing-06) 0 var(--cds-spacing-03);font-size:var(--cds-body-compact-01-font-size);font-weight:600;color:var(--cds-text-secondary)}.case-inspection-process-detail__subhead--no-margin{margin-top:0}.case-inspection-process-detail__variable-actions{display:flex;flex-shrink:0;gap:8px}.case-inspection-process-detail__empty{color:var(--cds-text-helper)}.case-inspection-process-detail__variable-value{overflow-wrap:anywhere;white-space:pre-wrap;max-height:96px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical}.case-inspection-process-detail__pane{padding-top:var(--cds-spacing-05)}.case-inspection-process-detail__diagram{margin-top:16px;height:480px;border:1px solid var(--cds-border-subtle);overflow:hidden}.case-inspection-process-detail__diagram ::ng-deep valtimo-process-diagram,.case-inspection-process-detail__diagram ::ng-deep .process-diagram-container{display:flex;flex-direction:column;height:100%}.case-inspection-process-detail__diagram ::ng-deep .diagram-container{flex:1 1 auto;min-height:0;height:auto!important}.case-inspection-process-detail__diagram ::ng-deep .legenda-holder{flex-shrink:0;padding:var(--cds-spacing-03) var(--cds-spacing-05)}\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: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i4$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: LinkModule }, { kind: "directive", type: i4$1.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "ngmodule", type: StructuredListModule }, { kind: "component", type: i4$1.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i4$1.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i4$1.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i4$1.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "ngmodule", type: TabsModule }, { 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: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId", "skippableTimers", "canSkipTimer", "skipTimerLabel", "reloadToken"], outputs: ["importDone", "skipTimerEvent"] }, { kind: "component", type: CaseInspectionProcessVariableModalComponent, selector: "valtimo-case-inspection-process-variable-modal", inputs: ["open", "mode", "initialVariable"], outputs: ["modalClosed"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { 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: "ngmodule", type: LayerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaseInspectionProcessDetailComponent, decorators: [{
             type: Component,
@@ -8898,5 +9060,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, 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_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 };
 //# sourceMappingURL=valtimo-case.mjs.map