@valtimo/dossier 11.3.1 → 12.0.0

package/fesm2022/valtimo-dossier.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, ViewChild, EventEmitter, Output, Input, InjectionToken, ChangeDetectionStrategy, Inject, Optional, HostBinding, Pipe, ViewContainerRef, NgModule } from '@angular/core';
-import * as i2$3 from '@angular/forms';
+import { Injectable, Component, ViewEncapsulation, ViewChild, EventEmitter, Output, ViewContainerRef, Optional, Inject, HostBinding, Input, InjectionToken, ChangeDetectionStrategy, Pipe, NgModule } from '@angular/core';
+import * as i2$4 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, take, map, distinctUntilChanged, combineLatest, Subject, switchMap, tap, filter, Subscription, of, startWith, from, forkJoin, defaultIfEmpty } from 'rxjs';
+import { BehaviorSubject, take, map, distinctUntilChanged, combineLatest, Subject, switchMap, tap, filter, Subscription, of, startWith, forkJoin, defaultIfEmpty } from 'rxjs';
 import * as i1 from '@valtimo/config';
-import { UploadProvider, DossierListTab, ROLE_USER, ConfigModule, HttpLoaderFactory } from '@valtimo/config';
+import { UploadProvider, ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, DossierListTab, ZGW_OBJECT_TYPE_COMPONENT_TOKEN, ROLE_USER, ConfigModule, HttpLoaderFactory } from '@valtimo/config';
 import * as i2 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i2$1 from '@valtimo/document';
-import { AdvancedDocumentSearchRequestImpl } from '@valtimo/document';
+import { InternalCaseStatusColor, InternalCaseStatusUtils, AdvancedDocumentSearchRequestImpl } from '@valtimo/document';
 import * as i6 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import * as i1$1 from '@angular/router';
@@ -16,8 +16,9 @@ import { RouterModule } from '@angular/router';
 import * as i1$2 from 'ngx-logger';
 import * as i3 from '@valtimo/task';
 import { CAN_VIEW_TASK_PERMISSION, TASK_DETAIL_PERMISSION_RESOURCE, TaskModule } from '@valtimo/task';
-import * as i3$1 from '@valtimo/components';
-import { FormioOptionsImpl, TimelineItemImpl, DEFAULT_PAGINATOR_CONFIG, CarbonListComponent, ListModule, WidgetModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, FormIoModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule, SelectModule, InputLabelModule, ParagraphModule, TableModule, VModalModule, TitleModule, ButtonModule, DocumentenApiMetadataModalModule, SearchableDropdownSelectModule, SearchFieldsModule, PageModule, InputModule, FormModule as FormModule$1, ConfirmationModalModule, CarbonListModule, IsArrayPipe } from '@valtimo/components';
+import * as i2$3 from '@valtimo/components';
+import { FormioOptionsImpl, TimelineItemImpl, CASES_WITHOUT_STATUS_KEY, ViewType, CarbonListComponent, ListModule, WidgetModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, FormIoModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule, SelectModule, InputLabelModule, ParagraphModule, TableModule, VModalModule, TitleModule, ButtonModule, SearchableDropdownSelectModule, SearchFieldsModule, PageModule, InputModule, FormModule as FormModule$1, ConfirmationModalModule, CarbonListModule, IsArrayPipe, StatusSelectorComponent, RenderInPageHeaderDirectiveModule, ValtimoCdsOverflowButtonDirectiveModule } from '@valtimo/components';
+export { CASES_WITHOUT_STATUS_KEY } from '@valtimo/components';
 import moment from 'moment';
 import * as i2$2 from '@valtimo/process';
 import { ProcessModule } from '@valtimo/process';
@@ -30,16 +31,16 @@ import * as i5$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i10 from '@ng-bootstrap/ng-bootstrap';
 import { NgbButtonsModule, NgbTooltipModule, NgbPaginationModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i4 from 'carbon-components-angular';
-import { Tabs, LoadingModule, ButtonModule as ButtonModule$1, IconModule, ModalModule as ModalModule$1, SelectModule as SelectModule$1, DropdownModule, TabsModule, ComboBoxModule, SkeletonModule } from 'carbon-components-angular';
-import * as i3$2 from 'ngx-spinner';
-import { switchMap as switchMap$1, map as map$1, tap as tap$1, catchError, take as take$1 } from 'rxjs/operators';
-import * as i3$3 from 'ngx-toastr';
-import * as i4$1 from '@valtimo/resource';
-import * as i1$3 from '@valtimo/contact-moment';
-import * as i4$3 from 'keycloak-angular';
-import * as i4$2 from '@valtimo/form-link';
-import { FormLinkModule } from '@valtimo/form-link';
+import * as i10$1 from 'carbon-components-angular';
+import { Tabs, LoadingModule, ButtonModule as ButtonModule$1, IconModule, ModalModule as ModalModule$1, SelectModule as SelectModule$1, DropdownModule, TabsModule, ComboBoxModule, SkeletonModule, TagModule, DialogModule } from 'carbon-components-angular';
+import * as i3$1 from 'ngx-spinner';
+import { switchMap as switchMap$1, map as map$1, take as take$1, tap as tap$1, catchError } from 'rxjs/operators';
+import * as i3$2 from 'ngx-toastr';
+import * as i4 from '@valtimo/resource';
+import { ChevronDown16 } from '@carbon/icons';
+import * as i4$2 from 'keycloak-angular';
+import * as i4$1 from '@valtimo/process-link';
+import { ProcessLinkModule } from '@valtimo/process-link';
 import { isEqual } from 'lodash';
 
 class DossierBulkAssignService {
@@ -65,15 +66,15 @@ class DossierBulkAssignService {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierBulkAssignService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierBulkAssignService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierBulkAssignService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierBulkAssignService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierBulkAssignService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierBulkAssignService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }, { type: i2.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i2.HttpClient }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -98,7 +99,7 @@ class DossierColumnService {
         const customDefinitionTable = config.customDefinitionTables[documentDefinitionName];
         const defaultDefinitionTable = config.defaultDefinitionTable;
         return this.documentService.getCaseList(documentDefinitionName).pipe(map(caseListColumns => {
-            const apiCaseListColumns = config?.featureToggles?.caseListColumn &&
+            const apiCaseListColumns = (config.featureToggles?.caseListColumn ?? true) &&
                 caseListColumns &&
                 Array.isArray(caseListColumns) &&
                 caseListColumns.length > 0 &&
@@ -157,55 +158,15 @@ class DossierColumnService {
     getPropertyName(caseListColumnPath) {
         return caseListColumnPath.replace('doc:', '$.').replace('case:', '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierColumnService, deps: [{ token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierColumnService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierColumnService, deps: [{ token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierColumnService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierColumnService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierColumnService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: i6.TranslateService }]; } });
+        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: i6.TranslateService }] });
 
 /*
- * Copyright 2015-2023 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 ZaakobjectenService {
-    constructor(configService, http) {
-        this.configService = configService;
-        this.http = http;
-        this.VALTIMO_API_ENDPOINT_URI = this.configService.config.valtimoApi.endpointUri;
-    }
-    getDocumentObjectTypes(documentId) {
-        return this.http.get(`${this.VALTIMO_API_ENDPOINT_URI}v1/document/${documentId}/zaak/objecttype`);
-    }
-    getDocumentObjectsOfType(documentId, typeUrl) {
-        return this.http.get(`${this.VALTIMO_API_ENDPOINT_URI}v1/document/${documentId}/zaak/object?typeUrl=${typeUrl}`);
-    }
-    getObjectTypeForm(documentId, objectUrl) {
-        return this.http.get(`${this.VALTIMO_API_ENDPOINT_URI}v1/document/${documentId}/zaak/object/form?objectUrl=${objectUrl}`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZaakobjectenService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZaakobjectenService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZaakobjectenService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }, { type: i2.HttpClient }]; } });
-
-/*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -237,9 +198,6 @@ class DossierParameterService {
     get queryPaginationParams$() {
         return this.route.queryParams.pipe(map(params => {
             const paramsCopy = { ...params };
-            if (paramsCopy.search) {
-                delete paramsCopy.search;
-            }
             return paramsCopy.collectionSize
                 ? {
                     collectionSize: Number(paramsCopy.collectionSize),
@@ -266,6 +224,14 @@ class DossierParameterService {
             return '';
         }), distinctUntilChanged((prevParams, currParams) => prevParams === currParams));
     }
+    get queryStatusParams$() {
+        return this.route.queryParams.pipe(map(params => {
+            if (params?.status) {
+                return JSON.parse(atob(params.status));
+            }
+            return null;
+        }), distinctUntilChanged((prevParams, currParams) => JSON.stringify(prevParams) === JSON.stringify(currParams)));
+    }
     constructor(router, route) {
         this.router = router;
         this.route = route;
@@ -274,7 +240,7 @@ class DossierParameterService {
         this.setDossierParameters();
     }
     ngOnDestroy() {
-        this.dossierParametersSubscription?.unsubscribe();
+        this._dossierParametersSubscription?.unsubscribe();
     }
     setSearchFieldValues(searchFieldValues) {
         this._searchFieldValues$.next(searchFieldValues);
@@ -320,6 +286,22 @@ class DossierParameterService {
             });
         });
     }
+    setStatusParameter(statusKeyParameters) {
+        this._dossierParameters$.pipe(take(1)).subscribe(dossierParameters => {
+            if ((statusKeyParameters || []).length > 0) {
+                this._dossierParameters$.next({
+                    ...dossierParameters,
+                    status: this.objectToBase64(statusKeyParameters),
+                });
+            }
+            else {
+                if (dossierParameters?.status) {
+                    delete dossierParameters.status;
+                }
+                this._dossierParameters$.next(dossierParameters);
+            }
+        });
+    }
     clearSearchFieldValues() {
         this._searchFieldValues$.next({});
     }
@@ -328,7 +310,7 @@ class DossierParameterService {
         this.router.navigate([this.getUrlWithoutParams()]);
     }
     openDossierParametersSubscription() {
-        this.dossierParametersSubscription = this.dossierParameters$.subscribe(dossierParams => {
+        this._dossierParametersSubscription = this.dossierParameters$.subscribe(dossierParams => {
             this.router.navigate([this.getUrlWithoutParams()], { queryParams: dossierParams });
         });
     }
@@ -342,31 +324,36 @@ class DossierParameterService {
         return urlTree.toString();
     }
     setDossierParameters() {
-        combineLatest([this.queryPaginationParams$, this.querySearchParams$, this.queryAssigneeParam$])
+        combineLatest([
+            this.queryPaginationParams$,
+            this.querySearchParams$,
+            this.queryAssigneeParam$,
+            this.queryStatusParams$,
+        ])
             .pipe(take(1))
-            .subscribe(([paginationParams, searchParams, assigneeParams]) => {
-            if (paginationParams) {
+            .subscribe(([paginationParams, searchParams, assigneeParams, statusParams]) => {
+            if (paginationParams)
                 this.setPaginationParameters(paginationParams);
-            }
+            if (assigneeParams)
+                this.setAssigneeParameter(assigneeParams);
+            if (statusParams)
+                this.setStatusParameter(statusParams);
             if (searchParams) {
                 this.setSearchParameters(searchParams);
                 this.setSearchFieldValues(searchParams);
             }
-            if (assigneeParams) {
-                this.setAssigneeParameter(assigneeParams);
-            }
             this.openDossierParametersSubscription();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierParameterService, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierParameterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierParameterService, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierParameterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierParameterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierParameterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }]; } });
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -428,15 +415,15 @@ class DossierListService {
             this._checkRefresh$.next(!checkRefresh);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListService, deps: [{ token: DossierColumnService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListService, deps: [{ token: DossierColumnService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DossierColumnService }]; } });
+        }], ctorParameters: () => [{ type: DossierColumnService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -509,15 +496,15 @@ class DossierListAssigneeService {
                 : []),
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListAssigneeService, deps: [{ token: i1.ConfigService }, { token: DossierListService }, { token: i2$1.DocumentService }, { token: i6.TranslateService }, { token: DossierParameterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListAssigneeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListAssigneeService, deps: [{ token: i1.ConfigService }, { token: DossierListService }, { token: i2$1.DocumentService }, { token: i6.TranslateService }, { token: DossierParameterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListAssigneeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListAssigneeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListAssigneeService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }, { type: DossierListService }, { type: i2$1.DocumentService }, { type: i6.TranslateService }, { type: DossierParameterService }]; } });
+        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: DossierListService }, { type: i2$1.DocumentService }, { type: i6.TranslateService }, { type: DossierParameterService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -560,18 +547,18 @@ class DossierService {
     refresh() {
         this._refreshDocument$.next(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierService, deps: [{ token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierService, deps: [{ token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }]; } });
+        }], ctorParameters: () => [{ type: i1.ConfigService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -676,15 +663,15 @@ class DossierListPaginationService {
             sort: defaultSortState,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListPaginationService, deps: [{ token: i1$2.NGXLogger }, { token: DossierParameterService }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListPaginationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListPaginationService, deps: [{ token: i1$2.NGXLogger }, { token: DossierParameterService }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListPaginationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListPaginationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListPaginationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.NGXLogger }, { type: DossierParameterService }, { type: DossierService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.NGXLogger }, { type: DossierParameterService }, { type: DossierService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -729,15 +716,15 @@ class DossierListSearchService {
         });
         return filters;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListSearchService, deps: [{ token: DossierListService }, { token: i2$1.DocumentService }, { token: DossierParameterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListSearchService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListSearchService, deps: [{ token: DossierListService }, { token: i2$1.DocumentService }, { token: DossierParameterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListSearchService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListSearchService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListSearchService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DossierListService }, { type: i2$1.DocumentService }, { type: DossierParameterService }]; } });
+        }], ctorParameters: () => [{ type: DossierListService }, { type: i2$1.DocumentService }, { type: DossierParameterService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -753,7 +740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -769,7 +756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -785,7 +772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -900,23 +887,7 @@ class TabImpl {
 }
 
 /*
- * Copyright 2015-2023 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-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -936,13 +907,11 @@ var DefaultTabs;
     DefaultTabs["progress"] = "progress";
     DefaultTabs["audit"] = "audit";
     DefaultTabs["documents"] = "documents";
-    DefaultTabs["contactMoments"] = "contact-moments";
-    DefaultTabs["zaakobjecten"] = "zaakobjecten";
     DefaultTabs["notes"] = "notes";
 })(DefaultTabs || (DefaultTabs = {}));
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -964,7 +933,7 @@ var ApiTabType;
 })(ApiTabType || (ApiTabType = {}));
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -980,7 +949,7 @@ var ApiTabType;
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1080,19 +1049,19 @@ class DossierDetailTabSummaryComponent {
             this.loadingTasks$.next(false);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabSummaryComponent, deps: [{ token: i1$1.Router }, { token: i2$1.DocumentService }, { token: i3.TaskService }, { token: i2$2.ProcessService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.ActivatedRoute }, { token: i5.FormService }, { token: i6$1.UserProviderService }, { token: i7.PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabSummaryComponent, selector: "valtimo-dossier-detail-tab-summary", viewQueries: [{ propertyName: "taskDetail", first: true, predicate: ["taskDetail"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\" *ngIf=\"{loadingTasks: loadingTasks$ | async} as obs\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">{{ 'summary.userTasks' | translate }}</h4>\n      <ng-container *ngIf=\"!obs.loadingTasks; else loadingTasksTemplate\">\n        <ng-container *ngIf=\"!tasks.length\">\n          <valtimo-widget>\n            <div class=\"p-3\">\n              <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n              <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n              <div class=\"clearfix\"></div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n\n        <ng-container *ngFor=\"let task of tasks\">\n          <valtimo-widget>\n            <div\n              *ngIf=\"!task.isLocked\"\n              class=\"p-3 clickable hoverable\"\n              (click)=\"rowTaskClick(task)\"\n            >\n              <span class=\"float-right badge badge-pill badge-primary\">{{\n                'summary.taskOpen' | translate\n              }}</span>\n              <strong>{{ task.name }}</strong>\n              <div class=\"mt-1\">{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n            <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked\">\n              <span\n                class=\"float-right badge badge-pill badge-secondary bg-grey\"\n                ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n              >\n                <i class=\"icon mdi mdi-lock\"></i>\n              </span>\n              <strong>{{ task.name }}</strong>\n              <div>{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n      </ng-container>\n\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingTasksTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}.loading-container{display:flex;width:100%;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i3$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i3.TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabSummaryComponent, deps: [{ token: i1$1.Router }, { token: i2$1.DocumentService }, { token: i3.TaskService }, { token: i2$2.ProcessService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.ActivatedRoute }, { token: i5.FormService }, { token: i6$1.UserProviderService }, { token: i7.PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabSummaryComponent, selector: "valtimo-dossier-detail-tab-summary", viewQueries: [{ propertyName: "taskDetail", first: true, predicate: ["taskDetail"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\" *ngIf=\"{loadingTasks: loadingTasks$ | async} as obs\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">{{ 'summary.userTasks' | translate }}</h4>\n      <ng-container *ngIf=\"!obs.loadingTasks; else loadingTasksTemplate\">\n        <ng-container *ngIf=\"!tasks.length\">\n          <valtimo-widget>\n            <div class=\"p-3\">\n              <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n              <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n              <div class=\"clearfix\"></div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n\n        <ng-container *ngFor=\"let task of tasks\">\n          <valtimo-widget>\n            <div\n              *ngIf=\"!task.isLocked\"\n              class=\"p-3 clickable hoverable\"\n              (click)=\"rowTaskClick(task)\"\n            >\n              <span class=\"float-right badge badge-pill badge-primary\">{{\n                'summary.taskOpen' | translate\n              }}</span>\n              <strong>{{ task.name }}</strong>\n              <div class=\"mt-1\">{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n            <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked\">\n              <span\n                class=\"float-right badge badge-pill badge-secondary bg-grey\"\n                ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n              >\n                <i class=\"icon mdi mdi-lock\"></i>\n              </span>\n              <strong>{{ task.name }}</strong>\n              <div>{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n      </ng-container>\n\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingTasksTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: [".hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i3.TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i10$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-summary', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\" *ngIf=\"{loadingTasks: loadingTasks$ | async} as obs\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">{{ 'summary.userTasks' | translate }}</h4>\n      <ng-container *ngIf=\"!obs.loadingTasks; else loadingTasksTemplate\">\n        <ng-container *ngIf=\"!tasks.length\">\n          <valtimo-widget>\n            <div class=\"p-3\">\n              <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n              <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n              <div class=\"clearfix\"></div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n\n        <ng-container *ngFor=\"let task of tasks\">\n          <valtimo-widget>\n            <div\n              *ngIf=\"!task.isLocked\"\n              class=\"p-3 clickable hoverable\"\n              (click)=\"rowTaskClick(task)\"\n            >\n              <span class=\"float-right badge badge-pill badge-primary\">{{\n                'summary.taskOpen' | translate\n              }}</span>\n              <strong>{{ task.name }}</strong>\n              <div class=\"mt-1\">{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n            <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked\">\n              <span\n                class=\"float-right badge badge-pill badge-secondary bg-grey\"\n                ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n              >\n                <i class=\"icon mdi mdi-lock\"></i>\n              </span>\n              <strong>{{ task.name }}</strong>\n              <div>{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n      </ng-container>\n\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingTasksTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}.loading-container{display:flex;width:100%;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i2$1.DocumentService }, { type: i3.TaskService }, { type: i2$2.ProcessService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.ActivatedRoute }, { type: i5.FormService }, { type: i6$1.UserProviderService }, { type: i7.PermissionService }]; }, propDecorators: { taskDetail: [{
+            args: [{ selector: 'valtimo-dossier-detail-tab-summary', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\" *ngIf=\"{loadingTasks: loadingTasks$ | async} as obs\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">{{ 'summary.userTasks' | translate }}</h4>\n      <ng-container *ngIf=\"!obs.loadingTasks; else loadingTasksTemplate\">\n        <ng-container *ngIf=\"!tasks.length\">\n          <valtimo-widget>\n            <div class=\"p-3\">\n              <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n              <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n              <div class=\"clearfix\"></div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n\n        <ng-container *ngFor=\"let task of tasks\">\n          <valtimo-widget>\n            <div\n              *ngIf=\"!task.isLocked\"\n              class=\"p-3 clickable hoverable\"\n              (click)=\"rowTaskClick(task)\"\n            >\n              <span class=\"float-right badge badge-pill badge-primary\">{{\n                'summary.taskOpen' | translate\n              }}</span>\n              <strong>{{ task.name }}</strong>\n              <div class=\"mt-1\">{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n            <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked\">\n              <span\n                class=\"float-right badge badge-pill badge-secondary bg-grey\"\n                ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n              >\n                <i class=\"icon mdi mdi-lock\"></i>\n              </span>\n              <strong>{{ task.name }}</strong>\n              <div>{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n      </ng-container>\n\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingTasksTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: [".hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 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$1.Router }, { type: i2$1.DocumentService }, { type: i3.TaskService }, { type: i2$2.ProcessService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.ActivatedRoute }, { type: i5.FormService }, { type: i6$1.UserProviderService }, { type: i7.PermissionService }], propDecorators: { taskDetail: [{
                 type: ViewChild,
                 args: ['taskDetail']
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1113,11 +1082,7 @@ class DossierDetailTabProgressComponent {
         this.processDocumentInstances$ = this.route.paramMap.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 => {
+        }))), 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) {
                 this.selectedProcessInstanceId$.next(processDocumentInstances[0].id.processInstanceId);
             }
@@ -1141,16 +1106,16 @@ class DossierDetailTabProgressComponent {
             this.selectedProcessInstanceId$.next(processInstanceId);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabProgressComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabProgressComponent, selector: "valtimo-dossier-detail-tab-progress", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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  <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    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\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    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\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)}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }, { kind: "component", type: i3$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i4.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabProgressComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabProgressComponent, selector: "valtimo-dossier-detail-tab-progress", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  <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    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\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    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\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"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }, { kind: "component", type: i2$3.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i10$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i10$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i10$1.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-progress', template: "<!--\n  ~ Copyright 2015-2023 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  <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    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\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    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\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)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }]; } });
+            args: [{ selector: 'valtimo-dossier-detail-tab-progress', template: "<!--\n  ~ Copyright 2015-2024 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  <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    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\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    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\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"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1204,18 +1169,18 @@ class DossierDetailTabAuditComponent {
         this.currentAuditPage = page - 1;
         this.loadAuditPage(this.currentAuditPage);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabAuditComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$2.NgxSpinnerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabAuditComponent, selector: "valtimo-dossier-detail-tab-audit", outputs: { paginationClicked: "paginationClicked" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i10.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabAuditComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$1.NgxSpinnerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabAuditComponent, selector: "valtimo-dossier-detail-tab-audit", outputs: { paginationClicked: "paginationClicked" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "component", type: i2$3.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i10.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabAuditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabAuditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-audit', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$2.NgxSpinnerService }]; }, propDecorators: { paginationClicked: [{
+            args: [{ selector: 'valtimo-dossier-detail-tab-audit', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$1.NgxSpinnerService }], propDecorators: { paginationClicked: [{
                 type: Output
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1229,159 +1194,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FileSortService {
-    constructor(configService) {
-        this.configService = configService;
-    }
-    sortRelatedFilesByDateDescending(relatedFiles) {
-        const sortByDate = this.configService.config?.featureToggles?.sortFilesByDate;
-        if (sortByDate) {
-            return relatedFiles.sort((a, b) => new Date(b.createdOn).getTime() - new Date(a.createdOn).getTime());
-        }
-        return relatedFiles;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSortService, deps: [{ token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSortService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileSortService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }]; } });
-
-/*
- * Copyright 2015-2023 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 DossierDetailTabDocumentenApiDocumentsComponent {
-    constructor(route, documentService, toastrService, uploadProviderService, downloadService, promptService, translateService, configService, userProviderService, fileSortService) {
-        this.route = route;
-        this.documentService = documentService;
-        this.toastrService = toastrService;
-        this.uploadProviderService = uploadProviderService;
-        this.downloadService = downloadService;
-        this.promptService = promptService;
-        this.translateService = translateService;
-        this.configService = configService;
-        this.userProviderService = userProviderService;
-        this.fileSortService = fileSortService;
-        this.maxFileSize = this.configService?.config?.caseFileSizeUploadLimitMB || 5;
-        this.acceptedFiles = this.configService?.config?.caseFileUploadAcceptedFiles || null;
-        this.fields = [
-            { key: 'fileName', label: 'File name' },
-            { key: 'sizeInBytes', label: 'Size in bytes' },
-            { key: 'createdOn', label: 'Created on' },
-            { key: 'createdBy', label: 'Created by' },
-        ];
-        this.uploadProcessLinkedSet = false;
-        this.uploading$ = new BehaviorSubject(false);
-        this.showModal$ = new Subject();
-        this.hideModal$ = new Subject();
-        this.modalDisabled$ = new BehaviorSubject(false);
-        this.fileToBeUploaded$ = new BehaviorSubject(null);
-        this.loading$ = new BehaviorSubject(true);
-        this.refetch$ = new BehaviorSubject(null);
-        this.relatedFiles$ = this.refetch$.pipe(switchMap$1(() => combineLatest([
-            this.documentService.getZakenApiDocuments(this.documentId),
-            this.translateService.stream('key'),
-        ])), map$1(([relatedFiles]) => {
-            const translatedFiles = relatedFiles?.map(file => ({
-                ...file,
-                createdBy: file.createdBy || this.translateService.instant('list.automaticallyGenerated'),
-            }));
-            return translatedFiles || [];
-        }), map$1(relatedFiles => this.fileSortService.sortRelatedFilesByDateDescending(relatedFiles)), map$1(relatedFiles => {
-            moment.locale(this.translateService.currentLang);
-            return relatedFiles.map(file => ({
-                ...file,
-                createdOn: moment(new Date(file.createdOn)).format('L'),
-            }));
-        }), tap$1(() => this.loading$.next(false)), catchError(() => {
-            this.showZaakLinkWarning = true;
-            return of([]);
-        }));
-        this.downloadingFileIndexes$ = new BehaviorSubject([]);
-        const snapshot = this.route.snapshot.paramMap;
-        this.documentId = snapshot.get('documentId') || '';
-        this.documentDefinitionName = snapshot.get('documentDefinitionName') || '';
-    }
-    ngOnInit() {
-        this.refetchDocuments();
-        this.setUploadProcessLinked();
-        this.isUserAdmin();
-    }
-    fileSelected(file) {
-        this.fileToBeUploaded$.next(file);
-        this.showModal$.next(null);
-    }
-    downloadDocument(relatedFile, index) {
-        this.downloadingFileIndexes$.pipe(take$1(1)).subscribe(indexes => {
-            this.downloadingFileIndexes$.next([...indexes, index]);
-            const finished$ = this.downloadService.downloadFile(`/api/v1/documenten-api/${relatedFile.pluginConfigurationId}/files/${relatedFile.fileId}/download`, relatedFile.fileName);
-            finished$.pipe(take$1(1)).subscribe(() => {
-                this.downloadingFileIndexes$.next(this.downloadingFileIndexes$.getValue().filter(downloadIndex => downloadIndex !== index));
-            });
-        });
-    }
-    metadataSet(metadata) {
-        this.uploading$.next(true);
-        this.hideModal$.next(null);
-        this.fileToBeUploaded$
-            .pipe(take$1(1))
-            .pipe(tap$1(file => {
-            this.uploadProviderService
-                .uploadFileWithMetadata(file, this.documentId, metadata)
-                .subscribe(res => {
-                this.refetchDocuments();
-                this.uploading$.next(false);
-                this.fileToBeUploaded$.next(null);
-            });
-        }))
-            .subscribe();
-    }
-    indexesIncludeIndex(indexes, index) {
-        return indexes.includes(index);
-    }
-    isUserAdmin() {
-        this.userProviderService.getUserSubject().subscribe(userIdentity => {
-            this.isAdmin = userIdentity.roles.includes('ROLE_ADMIN');
-        }, error => {
-            this.isAdmin = false;
-        });
-    }
-    refetchDocuments() {
-        this.refetch$.next(null);
-    }
-    setUploadProcessLinked() {
-        this.uploadProviderService.checkUploadProcessLink(this.documentDefinitionName).subscribe(linked => {
-            this.uploadProcessLinked = linked;
-            this.uploadProcessLinkedSet = true;
-        }, () => {
-            this.uploadProcessLinkedSet = true;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$3.ToastrService }, { token: i4$1.UploadProviderService }, { token: i4$1.DownloadService }, { token: i3$1.PromptService }, { token: i6.TranslateService }, { token: i1.ConfigService }, { token: i6$1.UserProviderService }, { token: FileSortService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabDocumentenApiDocumentsComponent, selector: "valtimo-dossier-detail-tab-documenten-api-documents", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{loading: loading$ | async} as obs\">\n  <div *ngIf=\"uploadProcessLinkedSet && !uploadProcessLinked\">\n    <div\n      *ngIf=\"isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n    <div\n      *ngIf=\"!isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n  <div *ngIf=\"showZaakLinkWarning\">\n    <div\n      [translate]=\"'dossier.documenten.noZaakFound'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n\n  <valtimo-dropzone\n    *ngIf=\"!obs.loading\"\n    (fileSelected)=\"fileSelected($event)\"\n    [acceptedFiles]=\"acceptedFiles\"\n    [camera]=\"false\"\n    [disabled]=\"\n      !uploadProcessLinkedSet || !uploadProcessLinked || obs.loading || showZaakLinkWarning\n    \"\n    [hideFilePreview]=\"true\"\n    [hideTitle]=\"true\"\n    [maxFileSize]=\"maxFileSize\"\n    [maxFiles]=\"1\"\n    [showMaxFileSize]=\"true\"\n    [uploading]=\"uploading$ | async\"\n  ></valtimo-dropzone>\n\n  <valtimo-widget>\n    <valtimo-list\n      [ngClass]=\"{hidden: obs.loading}\"\n      [fields]=\"fields\"\n      [header]=\"true\"\n      [isSearchable]=\"true\"\n      [items]=\"relatedFiles$ | async\"\n      [viewMode]=\"true\"\n      [lastColumnTemplate]=\"downloadButton\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n        <h5 class=\"list-header-description\">\n          {{ 'Overview of all documents in this dossier' | translate }}\n        </h5>\n      </div>\n    </valtimo-list>\n    <ng-container *ngTemplateOutlet=\"loading; context: {loading: obs.loading}\"></ng-container>\n  </valtimo-widget>\n</ng-container>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hide$]=\"hideModal$\"\n  [show$]=\"showModal$\"\n></valtimo-documenten-api-metadata-modal>\n\n<ng-template #loading let-loading=\"loading\">\n  <div *ngIf=\"loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #downloadButton let-index=\"index\" let-item=\"item\">\n  <div\n    class=\"download-button-container\"\n    *ngIf=\"{isDownloading: indexesIncludeIndex(downloadingFileIndexes$ | async, index)} as vars\"\n  >\n    <button\n      *ngIf=\"!vars.isDownloading\"\n      cdsButton=\"primary\"\n      size=\"sm\"\n      (click)=\"downloadDocument(item, index)\"\n    >\n      {{ 'interface.download' | translate\n      }}<svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n    <cds-loading size=\"sm\" *ngIf=\"vars.isDownloading\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.hidden{display:none}.loading-container{padding:var(--cds-grid-margin);display:flex;align-items:center;justify-content:center}.download-button-container{display:flex;width:100%;flex-direction:row;justify-content:flex-end;align-items:center;min-height:32px}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i3$1.DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["show$", "hide$", "disabled$", "file$", "documentTitle", "disableDocumentTitle", "filename", "disableFilename", "author", "disableAuthor", "status", "disableStatus", "language", "disableLanguage", "documentType", "disableDocumentType", "description", "disableDescription", "confidentialityLevel", "disableConfidentialityLevel"], outputs: ["metadata"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+class DossierDetailTabNotFoundComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabNotFoundComponent, selector: "valtimo-dossier-detail-not-found", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-no-results\n  [title]=\"'dossier.tabs.componentNotFound' | translate\"\n  [description]=\"'dossier.tabs.componentNotFoundMessage' | translate\"\n  illustration=\"valtimo-layout/img/emptystate-error.svg\"\n></valtimo-no-results>\n", styles: ["/*!\n * Copyright 2015-2024 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: "component", type: i2$3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-documenten-api-documents', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{loading: loading$ | async} as obs\">\n  <div *ngIf=\"uploadProcessLinkedSet && !uploadProcessLinked\">\n    <div\n      *ngIf=\"isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n    <div\n      *ngIf=\"!isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n  <div *ngIf=\"showZaakLinkWarning\">\n    <div\n      [translate]=\"'dossier.documenten.noZaakFound'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n\n  <valtimo-dropzone\n    *ngIf=\"!obs.loading\"\n    (fileSelected)=\"fileSelected($event)\"\n    [acceptedFiles]=\"acceptedFiles\"\n    [camera]=\"false\"\n    [disabled]=\"\n      !uploadProcessLinkedSet || !uploadProcessLinked || obs.loading || showZaakLinkWarning\n    \"\n    [hideFilePreview]=\"true\"\n    [hideTitle]=\"true\"\n    [maxFileSize]=\"maxFileSize\"\n    [maxFiles]=\"1\"\n    [showMaxFileSize]=\"true\"\n    [uploading]=\"uploading$ | async\"\n  ></valtimo-dropzone>\n\n  <valtimo-widget>\n    <valtimo-list\n      [ngClass]=\"{hidden: obs.loading}\"\n      [fields]=\"fields\"\n      [header]=\"true\"\n      [isSearchable]=\"true\"\n      [items]=\"relatedFiles$ | async\"\n      [viewMode]=\"true\"\n      [lastColumnTemplate]=\"downloadButton\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n        <h5 class=\"list-header-description\">\n          {{ 'Overview of all documents in this dossier' | translate }}\n        </h5>\n      </div>\n    </valtimo-list>\n    <ng-container *ngTemplateOutlet=\"loading; context: {loading: obs.loading}\"></ng-container>\n  </valtimo-widget>\n</ng-container>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hide$]=\"hideModal$\"\n  [show$]=\"showModal$\"\n></valtimo-documenten-api-metadata-modal>\n\n<ng-template #loading let-loading=\"loading\">\n  <div *ngIf=\"loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #downloadButton let-index=\"index\" let-item=\"item\">\n  <div\n    class=\"download-button-container\"\n    *ngIf=\"{isDownloading: indexesIncludeIndex(downloadingFileIndexes$ | async, index)} as vars\"\n  >\n    <button\n      *ngIf=\"!vars.isDownloading\"\n      cdsButton=\"primary\"\n      size=\"sm\"\n      (click)=\"downloadDocument(item, index)\"\n    >\n      {{ 'interface.download' | translate\n      }}<svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n    <cds-loading size=\"sm\" *ngIf=\"vars.isDownloading\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.hidden{display:none}.loading-container{padding:var(--cds-grid-margin);display:flex;align-items:center;justify-content:center}.download-button-container{display:flex;width:100%;flex-direction:row;justify-content:flex-end;align-items:center;min-height:32px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$3.ToastrService }, { type: i4$1.UploadProviderService }, { type: i4$1.DownloadService }, { type: i3$1.PromptService }, { type: i6.TranslateService }, { type: i1.ConfigService }, { type: i6$1.UserProviderService }, { type: FileSortService }]; } });
+            args: [{ selector: 'valtimo-dossier-detail-not-found', template: "<!--\n  ~ Copyright 2015-2024 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-no-results\n  [title]=\"'dossier.tabs.componentNotFound' | translate\"\n  [description]=\"'dossier.tabs.componentNotFoundMessage' | translate\"\n  illustration=\"valtimo-layout/img/emptystate-error.svg\"\n></valtimo-no-results>\n", styles: ["/*!\n * Copyright 2015-2024 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"] }]
+        }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1495,16 +1318,16 @@ class DossierDetailTabS3DocumentsComponent {
     refetchDocuments() {
         this.refetch$.next(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabS3DocumentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$3.ToastrService }, { token: i4$1.UploadProviderService }, { token: i4$1.DownloadService }, { token: i3$1.PromptService }, { token: i6.TranslateService }, { token: i1.ConfigService }, { token: FileSortService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabS3DocumentsComponent, selector: "valtimo-dossier-detail-tab-s3-documents", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2023 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: "component", type: i3$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i3$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabS3DocumentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$2.ToastrService }, { token: i4.UploadProviderService }, { token: i4.DownloadService }, { token: i2$3.PromptService }, { token: i6.TranslateService }, { token: i1.ConfigService }, { token: i2$1.FileSortService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabS3DocumentsComponent, selector: "valtimo-dossier-detail-tab-s3-documents", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2024 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: "component", type: i2$3.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i2$3.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i2$3.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabS3DocumentsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabS3DocumentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-s3-documents', template: "<!--\n  ~ Copyright 2015-2023 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-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2023 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: function () { return [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$3.ToastrService }, { type: i4$1.UploadProviderService }, { type: i4$1.DownloadService }, { type: i3$1.PromptService }, { type: i6.TranslateService }, { type: i1.ConfigService }, { type: FileSortService }]; } });
+            args: [{ selector: 'valtimo-dossier-detail-tab-s3-documents', template: "<!--\n  ~ Copyright 2015-2024 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-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2024 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$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$2.ToastrService }, { type: i4.UploadProviderService }, { type: i4.DownloadService }, { type: i2$3.PromptService }, { type: i6.TranslateService }, { type: i1.ConfigService }, { type: i2$1.FileSortService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1519,204 +1342,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class DossierDetailTabDocumentsComponent {
-    constructor(configService) {
+    constructor(configService, zgwDocumentenApiDocumentsComponent) {
         this.configService = configService;
-        this.setConfig(configService.config);
-    }
-    setConfig(config) {
-        const uploadProvider = config.uploadProvider;
-        this.openZaakUploadProvider = uploadProvider === UploadProvider.OPEN_ZAAK;
-        this.documentenApiUploadProvider = uploadProvider === UploadProvider.DOCUMENTEN_API;
-        this.s3UploadProvider = config.uploadProvider === UploadProvider.S3;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabDocumentsComponent, deps: [{ token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabDocumentsComponent, selector: "valtimo-dossier-detail-tab-documents", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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-dossier-detail-tab-s3-documents\n  *ngIf=\"s3UploadProvider || openZaakUploadProvider\"\n></valtimo-dossier-detail-tab-s3-documents>\n<valtimo-dossier-detail-tab-documenten-api-documents *ngIf=\"documentenApiUploadProvider\">\n</valtimo-dossier-detail-tab-documenten-api-documents>\n", styles: [""], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DossierDetailTabDocumentenApiDocumentsComponent, selector: "valtimo-dossier-detail-tab-documenten-api-documents" }, { kind: "component", type: DossierDetailTabS3DocumentsComponent, selector: "valtimo-dossier-detail-tab-s3-documents" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabDocumentsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-documents', template: "<!--\n  ~ Copyright 2015-2023 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-dossier-detail-tab-s3-documents\n  *ngIf=\"s3UploadProvider || openZaakUploadProvider\"\n></valtimo-dossier-detail-tab-s3-documents>\n<valtimo-dossier-detail-tab-documenten-api-documents *ngIf=\"documentenApiUploadProvider\">\n</valtimo-dossier-detail-tab-documenten-api-documents>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }]; } });
-
-/*
- * Copyright 2015-2023 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.
- */
-moment.locale(localStorage.getItem('langKey') || '');
-class DossierDetailTabContactMomentsComponent {
-    constructor(contactMomentService, alertService, translateService) {
-        this.contactMomentService = contactMomentService;
-        this.alertService = alertService;
-        this.translateService = translateService;
-        this.refetchContactMoments$ = new BehaviorSubject('');
-        this.contactMoments$ = this.refetchContactMoments$.pipe(switchMap$1(() => this.contactMomentService.getContactMoments()), map$1(contactMoments => contactMoments.map(contactMoment => {
-            const registratieDatum = moment(contactMoment.registratiedatum);
-            return new TimelineItemImpl(registratieDatum.format('DD MMM YYYY'), registratieDatum.format('HH:mm'), contactMoment.medewerkerIdentificatie.achternaam, contactMoment.kanaal, contactMoment.tekst, null);
-        })));
-        this.text$ = new BehaviorSubject('');
-        this.channel$ = new BehaviorSubject('MAIL');
-        this.requestData$ = combineLatest([this.text$, this.channel$]);
-        this.valid$ = this.requestData$.pipe(map$1(([text, channel]) => !!(text && channel)));
-        this.disabled$ = new BehaviorSubject(false);
-    }
-    textChange(text) {
-        this.text$.next(text);
-    }
-    buttonClick() {
-        this.modal.show();
-    }
-    saveNote() {
-        this.disable();
-        this.requestData$.pipe(take$1(1)).subscribe(([text, channel]) => {
-            this.contactMomentService.saveContactMoment({ kanaal: channel, tekst: text }).subscribe(() => {
-                this.alertService.success(this.translateService.instant('dossier.contactMoments.saveSuccess'));
-                this.enable();
-                this.clear();
-                this.modal.hide();
-                this.refetchContactMoments();
-            }, () => {
-                this.enable();
-            });
-        });
-    }
-    disable() {
-        this.disabled$.next(true);
-    }
-    enable() {
-        this.disabled$.next(false);
-    }
-    clear() {
-        this.text$.next('');
-    }
-    refetchContactMoments() {
-        this.refetchContactMoments$.next('');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabContactMomentsComponent, deps: [{ token: i1$3.ContactMomentService }, { token: i3$1.AlertService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabContactMomentsComponent, selector: "valtimo-dossier-detail-tab-contact-moments", viewQueries: [{ propertyName: "modal", first: true, predicate: ["contactMomentsNoteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-note-plus\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.contact-moments-container{display:flex;flex-direction:column}.button-container{display:inline;align-self:flex-end}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabContactMomentsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-contact-moments', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-note-plus\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.contact-moments-container{display:flex;flex-direction:column}.button-container{display:inline;align-self:flex-end}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.ContactMomentService }, { type: i3$1.AlertService }, { type: i6.TranslateService }]; }, propDecorators: { modal: [{
-                type: ViewChild,
-                args: ['contactMomentsNoteModal']
-            }] } });
-
-/*
- * Copyright 2015-2023 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 DossierDetailTabZaakobjectenComponent {
-    constructor(route, zaakobjectenService, modalService) {
-        this.route = route;
-        this.zaakobjectenService = zaakobjectenService;
-        this.modalService = modalService;
-        this.documentId$ = this.route.params.pipe(map(params => params.documentId));
-        this.objecttypes$ = this.documentId$.pipe(switchMap(documentId => this.zaakobjectenService.getDocumentObjectTypes(documentId)));
-        this.objecttypeSelectItems$ = this.objecttypes$.pipe(map(objecttypes => objecttypes.map(type => ({ id: type.url, text: type.name || '-' }))));
-        this.selectedObjecttypeUrl$ = new BehaviorSubject(null);
-        this.objects$ = combineLatest([
-            this.documentId$,
-            this.selectedObjecttypeUrl$,
-        ]).pipe(switchMap(([documentId, selectedObjecttypeUrl]) => documentId && selectedObjecttypeUrl
-            ? this.zaakobjectenService
-                .getDocumentObjectsOfType(documentId, selectedObjecttypeUrl)
-                .pipe(map(objects => objects.map(object => ({ ...object, title: object.title || '-' }))))
-            : of(null)));
-        this.columns$ = new BehaviorSubject([
-            {
-                labelTranslationKey: 'dossier.zaakobjecten.index',
-                dataKey: 'index',
-            },
-            {
-                labelTranslationKey: 'dossier.zaakobjecten.registrationAt',
-                dataKey: 'registrationAt',
-            },
-            {
-                labelTranslationKey: 'dossier.zaakobjecten.title',
-                dataKey: 'title',
-            },
-        ]);
-        this.objectForm$ = new BehaviorSubject(null);
-        this.objectName$ = new BehaviorSubject('');
-        this.noFormDefinitionComponent$ = new BehaviorSubject(false);
-    }
-    selectObjectType(objectTypeUrl) {
-        this.selectedObjecttypeUrl$.next(objectTypeUrl);
-    }
-    rowClicked(object, objectTypeSelectItems) {
-        this.documentId$.pipe(take$1(1)).subscribe(documentId => {
-            this.zaakobjectenService.getObjectTypeForm(documentId, object.url).subscribe(res => {
-                const definition = res.formDefinition;
-                definition.components = definition.components.map(component => ({
-                    ...component,
-                    disabled: true,
-                }));
-                this.setModalData(objectTypeSelectItems, definition);
-            }, () => {
-                this.setModalData(objectTypeSelectItems);
-            });
-        });
+        this.zgwDocumentenApiDocumentsComponent = zgwDocumentenApiDocumentsComponent;
+        this.noMargin = false;
+        this.noMinHeight = false;
+        this.openZaakUploadProvider$ = new BehaviorSubject(false);
+        this.s3UploadProvider$ = new BehaviorSubject(false);
+        this.documentenApiUploadProvider$ = new BehaviorSubject(false);
+        this._subscriptions = new Subscription();
     }
-    hide() {
-        this.modalService.closeModal(() => {
-            this.objectName$.next('');
-            this.objectForm$.next(null);
-        });
+    ngOnInit() {
+        this.setConfig(this.configService.config);
     }
-    show() {
-        this.modalService.openModal(this.viewZaakobjectModal);
+    ngAfterViewInit() {
+        this._subscriptions.add(this.documentenApiUploadProvider$.subscribe(uploadProviderIsDocumentenApi => {
+            this.noMargin = uploadProviderIsDocumentenApi;
+            this.noMinHeight = uploadProviderIsDocumentenApi;
+            if (!uploadProviderIsDocumentenApi)
+                return;
+            this._externalDocumentsTab.createComponent(this.zgwDocumentenApiDocumentsComponent || DossierDetailTabNotFoundComponent);
+        }));
     }
-    getObjectTypeName(objectTypeSelectItems) {
-        const selectedObjectTypeUrl = this.selectedObjecttypeUrl$.getValue();
-        const currentTypeSelectItem = objectTypeSelectItems.find(selectItem => selectItem.id === selectedObjectTypeUrl);
-        return currentTypeSelectItem.text;
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
     }
-    setModalData(objectTypeSelectItems, definition) {
-        if (definition) {
-            this.objectForm$.next(definition);
-            this.noFormDefinitionComponent$.next(false);
-        }
-        else {
-            this.noFormDefinitionComponent$.next(true);
-        }
-        this.objectName$.next(this.getObjectTypeName(objectTypeSelectItems));
-        this.show();
+    setConfig(config) {
+        const uploadProvider = config.uploadProvider;
+        this.openZaakUploadProvider$.next(uploadProvider === UploadProvider.OPEN_ZAAK);
+        this.s3UploadProvider$.next(config.uploadProvider === UploadProvider.S3);
+        this.documentenApiUploadProvider$.next(uploadProvider === UploadProvider.DOCUMENTEN_API);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3$1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabZaakobjectenComponent, selector: "valtimo-dossier-detail-tab-zaakobjecten", viewQueries: [{ propertyName: "viewZaakobjectModal", first: true, predicate: ["viewZaakobjectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objecttypeSelectItems: objecttypeSelectItems$ | async,\n    objects: objects$ | async,\n    columns: columns$ | async,\n    selectedObjectTypeUrl: selectedObjecttypeUrl$ | async\n  } as obs\"\n>\n  <v-select\n    [items]=\"obs.objecttypeSelectItems\"\n    [margin]=\"true\"\n    [widthInPx]=\"350\"\n    name=\"objecttypes\"\n    [title]=\"'dossier.zaakobjecten.objecttype' | translate\"\n    [placeholder]=\"'dossier.zaakobjecten.objecttypePlaceholder' | translate\"\n    [loading]=\"!obs.objecttypeSelectItems\"\n    (selectedChange)=\"selectObjectType($event)\"\n  ></v-select>\n  <v-input-label\n    titleTranslationKey=\"dossier.zaakobjecten.objecten\"\n    [largeMargin]=\"!!obs.selectedObjectTypeUrl\"\n  ></v-input-label>\n  <v-paragraph *ngIf=\"!obs.selectedObjectTypeUrl\">{{\n    'dossier.zaakobjecten.objectenPlaceholder' | translate\n  }}</v-paragraph>\n  <v-table\n    *ngIf=\"obs.selectedObjectTypeUrl\"\n    [loading]=\"!obs.objects\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    (editButtonClicked)=\"rowClicked($event, obs.objecttypeSelectItems)\"\n  ></v-table>\n</ng-container>\n\n<v-modal #viewZaakobjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i3$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme"], outputs: ["selectedChange"] }, { kind: "component", type: i3$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i3$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i3$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "component", type: i3$1.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i3$1.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabDocumentsComponent, deps: [{ token: i1.ConfigService }, { token: ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabDocumentsComponent, selector: "valtimo-dossier-detail-tab-documents", host: { properties: { "class.tab--no-margin": "this.noMargin", "class.tab--no-min-height": "this.noMinHeight" } }, viewQueries: [{ propertyName: "_externalDocumentsTab", first: true, predicate: ["externalDocumentsTab"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-dossier-detail-tab-s3-documents\n  *ngIf=\"(s3UploadProvider$ | async) || (openZaakUploadProvider$ | async)\"\n></valtimo-dossier-detail-tab-s3-documents>\n\n<ng-template #externalDocumentsTab></ng-template>\n", dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DossierDetailTabS3DocumentsComponent, selector: "valtimo-dossier-detail-tab-s3-documents" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabDocumentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-zaakobjecten', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objecttypeSelectItems: objecttypeSelectItems$ | async,\n    objects: objects$ | async,\n    columns: columns$ | async,\n    selectedObjectTypeUrl: selectedObjecttypeUrl$ | async\n  } as obs\"\n>\n  <v-select\n    [items]=\"obs.objecttypeSelectItems\"\n    [margin]=\"true\"\n    [widthInPx]=\"350\"\n    name=\"objecttypes\"\n    [title]=\"'dossier.zaakobjecten.objecttype' | translate\"\n    [placeholder]=\"'dossier.zaakobjecten.objecttypePlaceholder' | translate\"\n    [loading]=\"!obs.objecttypeSelectItems\"\n    (selectedChange)=\"selectObjectType($event)\"\n  ></v-select>\n  <v-input-label\n    titleTranslationKey=\"dossier.zaakobjecten.objecten\"\n    [largeMargin]=\"!!obs.selectedObjectTypeUrl\"\n  ></v-input-label>\n  <v-paragraph *ngIf=\"!obs.selectedObjectTypeUrl\">{{\n    'dossier.zaakobjecten.objectenPlaceholder' | translate\n  }}</v-paragraph>\n  <v-table\n    *ngIf=\"obs.selectedObjectTypeUrl\"\n    [loading]=\"!obs.objects\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    (editButtonClicked)=\"rowClicked($event, obs.objecttypeSelectItems)\"\n  ></v-table>\n</ng-container>\n\n<v-modal #viewZaakobjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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: function () { return [{ type: i1$1.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3$1.ModalService }]; }, propDecorators: { viewZaakobjectModal: [{
+            args: [{ selector: 'valtimo-dossier-detail-tab-documents', template: "<!--\n  ~ Copyright 2015-2024 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-dossier-detail-tab-s3-documents\n  *ngIf=\"(s3UploadProvider$ | async) || (openZaakUploadProvider$ | async)\"\n></valtimo-dossier-detail-tab-s3-documents>\n\n<ng-template #externalDocumentsTab></ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i0.Type, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN]
+                }] }], propDecorators: { noMargin: [{
+                type: HostBinding,
+                args: ['class.tab--no-margin']
+            }], noMinHeight: [{
+                type: HostBinding,
+                args: ['class.tab--no-min-height']
+            }], _externalDocumentsTab: [{
                 type: ViewChild,
-                args: ['viewZaakobjectModal']
+                args: ['externalDocumentsTab', { read: ViewContainerRef }]
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1775,7 +1455,7 @@ const CAN_CREATE_CASE_PERMISSION = {
 };
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1791,7 +1471,7 @@ const CAN_CREATE_CASE_PERMISSION = {
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1851,18 +1531,18 @@ class NotesService {
     setModalType(type) {
         this._modalType$.next(type);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotesService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NotesService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NotesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NotesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NotesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }, { type: i2.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i2.HttpClient }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1949,13 +1629,13 @@ class NoteModalComponent {
     setValid(data) {
         this.valid$.next(!!data.content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoteModalComponent, deps: [{ token: NotesService }, { token: i3$1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoteModalComponent, selector: "valtimo-note-modal", inputs: { customData: "customData" }, outputs: { createNoteEvent: "createNoteEvent", editNoteEvent: "editNoteEvent" }, viewQueries: [{ propertyName: "noteModal", first: true, predicate: ["noteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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<v-modal\n  #noteModal\n  *ngIf=\"{disabled: disabled$ | async, valid: valid$ | async, modalType: modalType$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{\n        (obs.modalType === 'add' ? 'dossier.notes.addNote' : 'dossier.notes.modifyNote') | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <ng-container\n        *ngTemplateOutlet=\"\n          obs.modalType === 'add' ? addNoteButton : editNoteButton;\n          context: {obs: obs}\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addNoteButton let-obs=\"obs\">\n  <v-button\n    (clickEvent)=\"emitNoteData()\"\n    [disabled]=\"obs.disabled || !obs.valid\"\n    mdiIcon=\"plus\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.addNote' | translate }}\n  </v-button>\n</ng-template>\n<ng-template #editNoteButton let-obs=\"obs\">\n  <v-button\n    [disabled]=\"obs.disabled || !obs.valid\"\n    (clickEvent)=\"emitNoteData()\"\n    mdiIcon=\"pencil\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.modifyNote' | translate }}\n  </v-button>\n</ng-template>\n\n<ng-template #form>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n        type=\"textarea\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'dossier.notes.input.content' | translate\"\n        name=\"content\"\n        [fullWidth]=\"true\"\n        [rows]=\"10\"\n        [defaultValue]=\"customData?.summaryTranslationKey || ''\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i3$1.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i3$1.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: i3$1.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NoteModalComponent, deps: [{ token: NotesService }, { token: i2$3.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NoteModalComponent, selector: "valtimo-note-modal", inputs: { customData: "customData" }, outputs: { createNoteEvent: "createNoteEvent", editNoteEvent: "editNoteEvent" }, viewQueries: [{ propertyName: "noteModal", first: true, predicate: ["noteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<v-modal\n  #noteModal\n  *ngIf=\"{disabled: disabled$ | async, valid: valid$ | async, modalType: modalType$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{\n        (obs.modalType === 'add' ? 'dossier.notes.addNote' : 'dossier.notes.modifyNote') | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <ng-container\n        *ngTemplateOutlet=\"\n          obs.modalType === 'add' ? addNoteButton : editNoteButton;\n          context: {obs: obs}\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addNoteButton let-obs=\"obs\">\n  <v-button\n    (clickEvent)=\"emitNoteData()\"\n    [disabled]=\"obs.disabled || !obs.valid\"\n    mdiIcon=\"plus\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.addNote' | translate }}\n  </v-button>\n</ng-template>\n<ng-template #editNoteButton let-obs=\"obs\">\n  <v-button\n    [disabled]=\"obs.disabled || !obs.valid\"\n    (clickEvent)=\"emitNoteData()\"\n    mdiIcon=\"pencil\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.modifyNote' | translate }}\n  </v-button>\n</ng-template>\n\n<ng-template #form>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n        type=\"textarea\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'dossier.notes.input.content' | translate\"\n        name=\"content\"\n        [fullWidth]=\"true\"\n        [rows]=\"10\"\n        [defaultValue]=\"customData?.summaryTranslationKey || ''\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n", styles: [".buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i2$3.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i2$3.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: i2$3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoteModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NoteModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-note-modal', template: "<!--\n  ~ Copyright 2015-2023 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<v-modal\n  #noteModal\n  *ngIf=\"{disabled: disabled$ | async, valid: valid$ | async, modalType: modalType$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{\n        (obs.modalType === 'add' ? 'dossier.notes.addNote' : 'dossier.notes.modifyNote') | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <ng-container\n        *ngTemplateOutlet=\"\n          obs.modalType === 'add' ? addNoteButton : editNoteButton;\n          context: {obs: obs}\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addNoteButton let-obs=\"obs\">\n  <v-button\n    (clickEvent)=\"emitNoteData()\"\n    [disabled]=\"obs.disabled || !obs.valid\"\n    mdiIcon=\"plus\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.addNote' | translate }}\n  </v-button>\n</ng-template>\n<ng-template #editNoteButton let-obs=\"obs\">\n  <v-button\n    [disabled]=\"obs.disabled || !obs.valid\"\n    (clickEvent)=\"emitNoteData()\"\n    mdiIcon=\"pencil\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.modifyNote' | translate }}\n  </v-button>\n</ng-template>\n\n<ng-template #form>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n        type=\"textarea\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'dossier.notes.input.content' | translate\"\n        name=\"content\"\n        [fullWidth]=\"true\"\n        [rows]=\"10\"\n        [defaultValue]=\"customData?.summaryTranslationKey || ''\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: NotesService }, { type: i3$1.ModalService }]; }, propDecorators: { noteModal: [{
+            args: [{ selector: 'valtimo-note-modal', template: "<!--\n  ~ Copyright 2015-2024 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<v-modal\n  #noteModal\n  *ngIf=\"{disabled: disabled$ | async, valid: valid$ | async, modalType: modalType$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{\n        (obs.modalType === 'add' ? 'dossier.notes.addNote' : 'dossier.notes.modifyNote') | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <ng-container\n        *ngTemplateOutlet=\"\n          obs.modalType === 'add' ? addNoteButton : editNoteButton;\n          context: {obs: obs}\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addNoteButton let-obs=\"obs\">\n  <v-button\n    (clickEvent)=\"emitNoteData()\"\n    [disabled]=\"obs.disabled || !obs.valid\"\n    mdiIcon=\"plus\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.addNote' | translate }}\n  </v-button>\n</ng-template>\n<ng-template #editNoteButton let-obs=\"obs\">\n  <v-button\n    [disabled]=\"obs.disabled || !obs.valid\"\n    (clickEvent)=\"emitNoteData()\"\n    mdiIcon=\"pencil\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.modifyNote' | translate }}\n  </v-button>\n</ng-template>\n\n<ng-template #form>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n        type=\"textarea\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'dossier.notes.input.content' | translate\"\n        name=\"content\"\n        [fullWidth]=\"true\"\n        [rows]=\"10\"\n        [defaultValue]=\"customData?.summaryTranslationKey || ''\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n", styles: [".buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n/*!\n * Copyright 2015-2024 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: NotesService }, { type: i2$3.ModalService }], propDecorators: { noteModal: [{
                 type: ViewChild,
                 args: ['noteModal']
             }], customData: [{
@@ -1967,7 +1647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1989,6 +1669,7 @@ class DossierDetailTabNotesComponent {
         this.route = route;
         this.toastrService = toastrService;
         this.translateService = translateService;
+        this.noMargin = true;
         this.timelineItems = [];
         this.loading$ = new BehaviorSubject(true);
         this.fields$ = new BehaviorSubject([]);
@@ -2108,16 +1789,19 @@ class DossierDetailTabNotesComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabNotesComponent, deps: [{ token: NotesService }, { token: i7.PermissionService }, { token: i3$1.PromptService }, { token: i1$1.ActivatedRoute }, { token: i3$3.ToastrService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabNotesComponent, selector: "valtimo-dossier-detail-tab-notes", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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<ng-container\n  *ngIf=\"{\n    canAdd: canAdd$ | async,\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <button\n    *ngIf=\"obs.canAdd\"\n    [disabled]=\"obs.loading\"\n    (click)=\"showAddModal()\"\n    aria-expanded=\"false\"\n    aria-haspopup=\"true\"\n    class=\"btn btn-space btn-primary mr-1 add-note\"\n    type=\"button\"\n  >\n    <span>{{ 'dossier.notes.addNote' | translate }}</span>\n\n    <i class=\"ml-1 icon mdi mdi-plus\"></i>\n  </button>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline [actions]=\"actions\" [items]=\"timelineItems\"></valtimo-timeline>\n  </div>\n\n  <valtimo-spinner\n    [useBootstrapSpinner]=\"false\"\n    name=\"auditSpinner\"\n    bdColor=\"rgba(125, 125, 125, 0.35)\"\n    color=\"#264251\"\n    type=\"square-jelly-box\"\n  >\n  </valtimo-spinner>\n\n  <div *ngIf=\"obs.pagination\" class=\"d-flex justify-content-end row mr-0 ml-0\">\n    <ngb-pagination\n      *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n      [collectionSize]=\"obs.pagination.collectionSize\"\n      [maxSize]=\"obs.pagination.size\"\n      [pageSize]=\"obs.pagination.size\"\n      [rotate]=\"true\"\n      [(page)]=\"obs.pagination.page\"\n      (pageChange)=\"paginationClicked($event)\"\n    ></ngb-pagination>\n  </div>\n</ng-container>\n\n<valtimo-note-modal\n  [customData]=\"customData$ | async\"\n  (createNoteEvent)=\"createNewNote($event)\"\n  (editNoteEvent)=\"editNoteEvent($event)\"\n></valtimo-note-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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 */:host{display:flex;flex-direction:column}.add-note{align-self:flex-end}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i10.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "component", type: NoteModalComponent, selector: "valtimo-note-modal", inputs: ["customData"], outputs: ["createNoteEvent", "editNoteEvent"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotesComponent, deps: [{ token: NotesService }, { token: i7.PermissionService }, { token: i2$3.PromptService }, { token: i1$1.ActivatedRoute }, { token: i3$2.ToastrService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabNotesComponent, selector: "valtimo-dossier-detail-tab-notes", host: { properties: { "class.tab--no-margin": "this.noMargin" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<ng-container\n  *ngIf=\"{\n    canAdd: canAdd$ | async,\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.canAdd\"\n      [disabled]=\"obs.loading\"\n      (click)=\"showAddModal()\"\n      aria-expanded=\"false\"\n      aria-haspopup=\"true\"\n    >\n      {{ 'dossier.notes.addNote' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </div>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline\n      *ngIf=\"timelineItems.length > 0\"\n      [actions]=\"actions\"\n      [items]=\"timelineItems\"\n    ></valtimo-timeline>\n    <valtimo-no-results\n      *ngIf=\"timelineItems.length === 0\"\n      [description]=\"'dossier.notes.noResults.description' | translate\"\n      [title]=\"'dossier.notes.noResults.title' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    ></valtimo-no-results>\n  </div>\n\n  <valtimo-spinner\n    [useBootstrapSpinner]=\"false\"\n    name=\"auditSpinner\"\n    bdColor=\"rgba(125, 125, 125, 0.35)\"\n    color=\"#264251\"\n    type=\"square-jelly-box\"\n  >\n  </valtimo-spinner>\n\n  <div *ngIf=\"obs.pagination\" class=\"d-flex justify-content-end row mr-0 ml-0\">\n    <ngb-pagination\n      *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n      [collectionSize]=\"obs.pagination.collectionSize\"\n      [maxSize]=\"obs.pagination.size\"\n      [pageSize]=\"obs.pagination.size\"\n      [rotate]=\"true\"\n      [(page)]=\"obs.pagination.page\"\n      (pageChange)=\"paginationClicked($event)\"\n    ></ngb-pagination>\n  </div>\n</ng-container>\n\n<valtimo-note-modal\n  [customData]=\"customData$ | async\"\n  (createNoteEvent)=\"createNewNote($event)\"\n  (editNoteEvent)=\"editNoteEvent($event)\"\n></valtimo-note-modal>\n", styles: [":host{display:flex;flex-direction:column}.add-note{align-self:flex-end}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "component", type: i2$3.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i10.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i10$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i10$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: NoteModalComponent, selector: "valtimo-note-modal", inputs: ["customData"], outputs: ["createNoteEvent", "editNoteEvent"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabNotesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-notes', template: "<!--\n  ~ Copyright 2015-2023 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<ng-container\n  *ngIf=\"{\n    canAdd: canAdd$ | async,\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <button\n    *ngIf=\"obs.canAdd\"\n    [disabled]=\"obs.loading\"\n    (click)=\"showAddModal()\"\n    aria-expanded=\"false\"\n    aria-haspopup=\"true\"\n    class=\"btn btn-space btn-primary mr-1 add-note\"\n    type=\"button\"\n  >\n    <span>{{ 'dossier.notes.addNote' | translate }}</span>\n\n    <i class=\"ml-1 icon mdi mdi-plus\"></i>\n  </button>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline [actions]=\"actions\" [items]=\"timelineItems\"></valtimo-timeline>\n  </div>\n\n  <valtimo-spinner\n    [useBootstrapSpinner]=\"false\"\n    name=\"auditSpinner\"\n    bdColor=\"rgba(125, 125, 125, 0.35)\"\n    color=\"#264251\"\n    type=\"square-jelly-box\"\n  >\n  </valtimo-spinner>\n\n  <div *ngIf=\"obs.pagination\" class=\"d-flex justify-content-end row mr-0 ml-0\">\n    <ngb-pagination\n      *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n      [collectionSize]=\"obs.pagination.collectionSize\"\n      [maxSize]=\"obs.pagination.size\"\n      [pageSize]=\"obs.pagination.size\"\n      [rotate]=\"true\"\n      [(page)]=\"obs.pagination.page\"\n      (pageChange)=\"paginationClicked($event)\"\n    ></ngb-pagination>\n  </div>\n</ng-container>\n\n<valtimo-note-modal\n  [customData]=\"customData$ | async\"\n  (createNoteEvent)=\"createNewNote($event)\"\n  (editNoteEvent)=\"editNoteEvent($event)\"\n></valtimo-note-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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 */:host{display:flex;flex-direction:column}.add-note{align-self:flex-end}\n"] }]
-        }], ctorParameters: function () { return [{ type: NotesService }, { type: i7.PermissionService }, { type: i3$1.PromptService }, { type: i1$1.ActivatedRoute }, { type: i3$3.ToastrService }, { type: i6.TranslateService }]; } });
+            args: [{ selector: 'valtimo-dossier-detail-tab-notes', template: "<!--\n  ~ Copyright 2015-2024 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<ng-container\n  *ngIf=\"{\n    canAdd: canAdd$ | async,\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.canAdd\"\n      [disabled]=\"obs.loading\"\n      (click)=\"showAddModal()\"\n      aria-expanded=\"false\"\n      aria-haspopup=\"true\"\n    >\n      {{ 'dossier.notes.addNote' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </div>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline\n      *ngIf=\"timelineItems.length > 0\"\n      [actions]=\"actions\"\n      [items]=\"timelineItems\"\n    ></valtimo-timeline>\n    <valtimo-no-results\n      *ngIf=\"timelineItems.length === 0\"\n      [description]=\"'dossier.notes.noResults.description' | translate\"\n      [title]=\"'dossier.notes.noResults.title' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    ></valtimo-no-results>\n  </div>\n\n  <valtimo-spinner\n    [useBootstrapSpinner]=\"false\"\n    name=\"auditSpinner\"\n    bdColor=\"rgba(125, 125, 125, 0.35)\"\n    color=\"#264251\"\n    type=\"square-jelly-box\"\n  >\n  </valtimo-spinner>\n\n  <div *ngIf=\"obs.pagination\" class=\"d-flex justify-content-end row mr-0 ml-0\">\n    <ngb-pagination\n      *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n      [collectionSize]=\"obs.pagination.collectionSize\"\n      [maxSize]=\"obs.pagination.size\"\n      [pageSize]=\"obs.pagination.size\"\n      [rotate]=\"true\"\n      [(page)]=\"obs.pagination.page\"\n      (pageChange)=\"paginationClicked($event)\"\n    ></ngb-pagination>\n  </div>\n</ng-container>\n\n<valtimo-note-modal\n  [customData]=\"customData$ | async\"\n  (createNoteEvent)=\"createNewNote($event)\"\n  (editNoteEvent)=\"editNoteEvent($event)\"\n></valtimo-note-modal>\n", styles: [":host{display:flex;flex-direction:column}.add-note{align-self:flex-end}\n/*!\n * Copyright 2015-2024 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: NotesService }, { type: i7.PermissionService }, { type: i2$3.PromptService }, { type: i1$1.ActivatedRoute }, { type: i3$2.ToastrService }, { type: i6.TranslateService }], propDecorators: { noMargin: [{
+                type: HostBinding,
+                args: ['class.tab--no-margin']
+            }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2143,13 +1827,11 @@ const DEFAULT_TAB_COMPONENTS = {
     [DefaultTabs.progress]: DossierDetailTabProgressComponent,
     [DefaultTabs.audit]: DossierDetailTabAuditComponent,
     [DefaultTabs.documents]: DossierDetailTabDocumentsComponent,
-    [DefaultTabs.contactMoments]: DossierDetailTabContactMomentsComponent,
-    [DefaultTabs.zaakobjecten]: DossierDetailTabZaakobjectenComponent,
     [DefaultTabs.notes]: DossierDetailTabNotesComponent,
 };
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2166,7 +1848,7 @@ const DEFAULT_TAB_COMPONENTS = {
 const CASE_TAB_TOKEN = new InjectionToken('Specify a component to display per configured tab key.');
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2180,105 +1862,69 @@ const CASE_TAB_TOKEN = new InjectionToken('Specify a component to display per co
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierDetailTabObjectTypeComponent {
-    constructor(route, zaakobjectenService, modalService) {
-        this.route = route;
-        this.zaakobjectenService = zaakobjectenService;
-        this.modalService = modalService;
-        this.documentId$ = this.route.params.pipe(map(params => params.documentId));
-        this.objecttypes$ = this.documentId$.pipe(switchMap(documentId => this.zaakobjectenService.getDocumentObjectTypes(documentId)));
-        this.objectName$ = this.route.params.pipe(map(() => {
-            const currentUrl = window.location.href;
-            const splitUrl = currentUrl.split('/');
-            const lastUrlPart = splitUrl[splitUrl.length - 1];
-            return lastUrlPart;
-        }));
-        this.selectedObjecttypeUrl$ = combineLatest([
-            this.objecttypes$,
-            this.objectName$,
-        ]).pipe(map(([objectTypes, objectName]) => {
-            const currentType = objectTypes?.find(type => type?.name.toLowerCase() === objectName?.toLowerCase());
-            const currentTypeUrl = currentType?.url;
-            if (objectTypes && objectName && currentTypeUrl)
-                return currentTypeUrl;
-            return '';
-        }));
-        this.loading$ = new BehaviorSubject(true);
-        this.hasData$ = new BehaviorSubject(false);
-        this.objects$ = combineLatest([
-            this.documentId$,
-            this.selectedObjecttypeUrl$,
-        ]).pipe(switchMap(([documentId, selectedObjecttypeUrl]) => documentId && selectedObjecttypeUrl
-            ? this.zaakobjectenService.getDocumentObjectsOfType(documentId, selectedObjecttypeUrl).pipe(map(objects => objects.map(object => ({ ...object, title: object.title || '-' }))), tap(() => {
-                this.loading$.next(false);
-                this.hasData$.next(true);
-            }))
-            : of(null).pipe(tap(() => {
-                this.loading$.next(false);
-                this.hasData$.next(false);
-            }))));
-        this.columns$ = new BehaviorSubject([
-            {
-                labelTranslationKey: 'dossier.zaakobjecten.index',
-                dataKey: 'index',
-            },
-            {
-                labelTranslationKey: 'dossier.zaakobjecten.registrationAt',
-                dataKey: 'registrationAt',
-            },
-            {
-                labelTranslationKey: 'dossier.zaakobjecten.title',
-                dataKey: 'title',
-            },
-        ]);
-        this.objectForm$ = new BehaviorSubject(null);
-        this.noFormDefinitionComponent$ = new BehaviorSubject(false);
-    }
-    rowClicked(object) {
-        this.documentId$.pipe(take$1(1)).subscribe(documentId => {
-            this.zaakobjectenService.getObjectTypeForm(documentId, object.url).subscribe(res => {
-                const definition = res.formDefinition;
-                definition.components = definition.components.map(component => ({
-                    ...component,
-                    disabled: true,
-                }));
-                this.setModalData(definition);
-            }, () => {
-                this.setModalData();
-            });
-        });
-    }
-    hide() {
-        this.modalService.closeModal(() => {
-            this.objectForm$.next(null);
-        });
-    }
-    show() {
-        this.modalService.openModal(this.viewObjectModal);
-    }
-    setModalData(definition) {
-        if (definition) {
-            this.objectForm$.next(definition);
-            this.noFormDefinitionComponent$.next(false);
-        }
-        else {
-            this.noFormDefinitionComponent$.next(true);
-        }
-        this.show();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabObjectTypeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3$1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabObjectTypeComponent, selector: "valtimo-object-type", viewQueries: [{ propertyName: "viewObjectModal", first: true, predicate: ["viewObjectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objects: objects$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async,\n    hasData: hasData$ | async\n  } as obs\"\n>\n  <v-table\n    *ngIf=\"obs.hasData || obs.loading\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    (editButtonClicked)=\"rowClicked($event)\"\n  ></v-table>\n\n  <v-paragraph *ngIf=\"!obs.hasData && !obs.loading\" [center]=\"true\">{{\n    'dossier.zaakobjecten.noObjectType' | translate\n  }}</v-paragraph>\n</ng-container>\n\n<v-modal #viewObjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i3$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i3$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "component", type: i3$1.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i3$1.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabObjectTypeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-object-type', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objects: objects$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async,\n    hasData: hasData$ | async\n  } as obs\"\n>\n  <v-table\n    *ngIf=\"obs.hasData || obs.loading\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    (editButtonClicked)=\"rowClicked($event)\"\n  ></v-table>\n\n  <v-paragraph *ngIf=\"!obs.hasData && !obs.loading\" [center]=\"true\">{{\n    'dossier.zaakobjecten.noObjectType' | translate\n  }}</v-paragraph>\n</ng-container>\n\n<v-modal #viewObjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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: function () { return [{ type: i1$1.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3$1.ModalService }]; }, propDecorators: { viewObjectModal: [{
-                type: ViewChild,
-                args: ['viewObjectModal']
-            }] } });
+const DEFAULT_DOSSIER_LIST_TABS = [
+    DossierListTab.ALL,
+    DossierListTab.MINE,
+    DossierListTab.OPEN,
+];
+const DOSSIER_LIST_TABLE_TRANSLATIONS = {
+    select: {
+        single: 'dossier.select.single',
+        multiple: 'dossier.select.multiple',
+    },
+    pagination: {
+        itemsPerPage: 'dossier.pagination.itemsPerPage',
+        totalItem: 'dossier.pagination.totalItem',
+        totalItems: 'dossier.pagination.totalItems',
+    },
+};
+const DOSSIER_LIST_NO_RESULTS_MESSAGE = {
+    description: 'dossier.noResults.ALL.description',
+    isSearchResult: false,
+    title: 'dossier.noResults.ALL.title',
+};
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const CASE_WITHOUT_STATUS_STATUS = {
+    key: CASES_WITHOUT_STATUS_KEY,
+    documentDefinitionName: '',
+    title: '',
+    color: InternalCaseStatusColor.Gray,
+    visibleInCaseListByDefault: false,
+};
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 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-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2319,14 +1965,29 @@ class DossierDetailTabFormioComponent {
             return of(null);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabFormioComponent, deps: [{ token: DossierTabService }, { token: i1$1.ActivatedRoute }, { token: i5.FormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailTabFormioComponent, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    prefilledForm: prefilledForm$ | async,\n    loading: loading$ | async,\n    formNotFound: formNotFound$ | async,\n    noFormSpecified: noFormSpecified$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n\n  <p *ngIf=\"obs.formNotFound\" class=\"error-message\">\n    {{ 'dossier.formio.formNotFound' | translate: {formDefinitionName: obs.formNotFound} }}\n  </p>\n\n  <p *ngIf=\"obs.noFormSpecified\" class=\"error-message\">\n    {{ 'dossier.formio.noFormSpecified' | translate }}\n  </p>\n\n  <valtimo-form-io *ngIf=\"obs.prefilledForm\" [form]=\"obs.prefilledForm\"> </valtimo-form-io>\n</ng-container>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabFormioComponent, deps: [{ token: DossierTabService }, { token: i1$1.ActivatedRoute }, { token: i5.FormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabFormioComponent, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    prefilledForm: prefilledForm$ | async,\n    loading: loading$ | async,\n    formNotFound: formNotFound$ | async,\n    noFormSpecified: noFormSpecified$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n\n  <p *ngIf=\"obs.formNotFound\" class=\"error-message\">\n    {{ 'dossier.formio.formNotFound' | translate: {formDefinitionName: obs.formNotFound} }}\n  </p>\n\n  <p *ngIf=\"obs.noFormSpecified\" class=\"error-message\">\n    {{ 'dossier.formio.noFormSpecified' | translate }}\n  </p>\n\n  <valtimo-form-io *ngIf=\"obs.prefilledForm\" [form]=\"obs.prefilledForm\"> </valtimo-form-io>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i10$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabFormioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabFormioComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    prefilledForm: prefilledForm$ | async,\n    loading: loading$ | async,\n    formNotFound: formNotFound$ | async,\n    noFormSpecified: noFormSpecified$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n\n  <p *ngIf=\"obs.formNotFound\" class=\"error-message\">\n    {{ 'dossier.formio.formNotFound' | translate: {formDefinitionName: obs.formNotFound} }}\n  </p>\n\n  <p *ngIf=\"obs.noFormSpecified\" class=\"error-message\">\n    {{ 'dossier.formio.noFormSpecified' | translate }}\n  </p>\n\n  <valtimo-form-io *ngIf=\"obs.prefilledForm\" [form]=\"obs.prefilledForm\"> </valtimo-form-io>\n</ng-container>\n", styles: ["/*!\n * Copyright 2015-2023 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 */.loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: DossierTabService }, { type: i1$1.ActivatedRoute }, { type: i5.FormService }]; } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    prefilledForm: prefilledForm$ | async,\n    loading: loading$ | async,\n    formNotFound: formNotFound$ | async,\n    noFormSpecified: noFormSpecified$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n\n  <p *ngIf=\"obs.formNotFound\" class=\"error-message\">\n    {{ 'dossier.formio.formNotFound' | translate: {formDefinitionName: obs.formNotFound} }}\n  </p>\n\n  <p *ngIf=\"obs.noFormSpecified\" class=\"error-message\">\n    {{ 'dossier.formio.noFormSpecified' | translate }}\n  </p>\n\n  <valtimo-form-io *ngIf=\"obs.prefilledForm\" [form]=\"obs.prefilledForm\"> </valtimo-form-io>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2024 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: DossierTabService }, { type: i1$1.ActivatedRoute }, { type: i5.FormService }] });
 
+/*
+ * Copyright 2015-2024 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 DossierTabApiService {
     constructor(configService, http) {
         this.configService = configService;
@@ -2336,18 +1997,18 @@ class DossierTabApiService {
     getDossierTabs(documentDefinitionName) {
         return this.http.get(`${this.VALTIMO_API_ENDPOINT_URI}v1/case-definition/${documentDefinitionName}/tab`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierTabApiService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierTabApiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabApiService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabApiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierTabApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ConfigService }, { type: i2.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i2.HttpClient }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2365,16 +2026,18 @@ class DossierTabService {
     get tabs$() {
         return this._tabs$.pipe(filter(tabs => !!tabs));
     }
-    constructor(tabMap = DEFAULT_TABS, caseTabConfig, configService, route, dossierTabApiService) {
+    constructor(tabMap = DEFAULT_TABS, caseTabConfig, zgwObjectTypeComponent, configService, route, dossierTabApiService) {
         this.tabMap = tabMap;
         this.caseTabConfig = caseTabConfig;
+        this.zgwObjectTypeComponent = zgwObjectTypeComponent;
         this.configService = configService;
         this.route = route;
         this.dossierTabApiService = dossierTabApiService;
         this._documentDefinitionName$ = this.route.params.pipe(map(params => params?.documentDefinitionName), filter(documentDefinitionName => !!documentDefinitionName));
         this._tabs$ = new BehaviorSubject(null);
         this._subscriptions = new Subscription();
-        this._tabManagementEnabled = this.configService.config?.featureToggles?.enableTabManagement;
+        this._tabManagementEnabled =
+            this.configService.config.featureToggles?.enableTabManagement ?? true;
         this.openDocumentDefinitionNameSubscription();
     }
     ngOnDestroy() {
@@ -2385,7 +2048,7 @@ class DossierTabService {
         if (this.configService?.config?.caseObjectTypes) {
             const allNamesObjects = this.configService?.config?.caseObjectTypes[documentDefinitionName];
             allNamesObjects?.forEach(name => {
-                tabMap.set(name, DossierDetailTabObjectTypeComponent);
+                tabMap.set(name, this.zgwObjectTypeComponent || DossierDetailTabNotFoundComponent);
             });
         }
         return tabMap;
@@ -2451,12 +2114,12 @@ class DossierTabService {
                 return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierTabService, deps: [{ token: TAB_MAP }, { token: CASE_TAB_TOKEN, optional: true }, { token: i1.ConfigService }, { token: i1$1.ActivatedRoute }, { token: DossierTabApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierTabService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabService, deps: [{ token: TAB_MAP }, { token: CASE_TAB_TOKEN, optional: true }, { token: ZGW_OBJECT_TYPE_COMPONENT_TOKEN, optional: true }, { token: i1.ConfigService }, { token: i1$1.ActivatedRoute }, { token: DossierTabApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierTabService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: Map, decorators: [{
+        }], ctorParameters: () => [{ type: Map, decorators: [{
                     type: Inject,
                     args: [TAB_MAP]
                 }] }, { type: undefined, decorators: [{
@@ -2464,10 +2127,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }, {
                     type: Inject,
                     args: [CASE_TAB_TOKEN]
-                }] }, { type: i1.ConfigService }, { type: i1$1.ActivatedRoute }, { type: DossierTabApiService }]; } });
+                }] }, { type: i0.Type, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ZGW_OBJECT_TYPE_COMPONENT_TOKEN]
+                }] }, { type: i1.ConfigService }, { type: i1$1.ActivatedRoute }, { type: DossierTabApiService }] });
+
+/*
+ * Copyright 2015-2024 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 DossierListStatusService {
+    get caseStatuses$() {
+        return this._caseStatuses$;
+    }
+    get showStatusSelector$() {
+        return this._showStatusSelector$.asObservable();
+    }
+    get selectedCaseStatuses$() {
+        return this._selectedCaseStatuses$;
+    }
+    constructor(dossierListService, caseStatusService, dossierParameterService) {
+        this.dossierListService = dossierListService;
+        this.caseStatusService = caseStatusService;
+        this.dossierParameterService = dossierParameterService;
+        this._selectedCaseStatuses$ = new BehaviorSubject([]);
+        this._showStatusSelector$ = new BehaviorSubject(false);
+        this._caseStatuses$ = this.dossierListService.documentDefinitionName$.pipe(switchMap(documentDefinitionName => combineLatest([
+            this.caseStatusService.getInternalCaseStatuses(documentDefinitionName),
+            this.dossierParameterService.queryStatusParams$,
+        ]).pipe(take(1))), switchMap(([statuses, queryStatuses]) => combineLatest([of([CASE_WITHOUT_STATUS_STATUS, ...statuses]), of(queryStatuses)])), tap(([statuses, queryStatuses]) => {
+            const selectedStatuses = queryStatuses
+                ? statuses.filter(status => queryStatuses.includes(status.key))
+                : [
+                    ...statuses.filter(status => status.visibleInCaseListByDefault),
+                    CASE_WITHOUT_STATUS_STATUS,
+                ];
+            this.setSelectedStatuses(selectedStatuses);
+        }), map(([statuses]) => statuses), tap(statuses => this._showStatusSelector$.next((statuses || []).length > 1)));
+    }
+    setSelectedStatuses(statuses) {
+        this._selectedCaseStatuses$.next(statuses);
+        this.dossierParameterService.setStatusParameter(statuses.map(status => status.key));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListStatusService, deps: [{ token: DossierListService }, { token: i2$1.CaseStatusService }, { token: DossierParameterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListStatusService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListStatusService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: DossierListService }, { type: i2$1.CaseStatusService }, { type: DossierParameterService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2481,9 +2204,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class StartModalService {
+    getStandardStartEventTitle(bpmnXml) {
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(bpmnXml, 'application/xml');
+        if (xmlDoc.getElementsByTagName('parsererror').length) {
+            console.error('Error parsing XML');
+            return null;
+        }
+        const startEvents = xmlDoc.getElementsByTagName('bpmn:startEvent');
+        if (!startEvents) {
+            return null;
+        }
+        const standardStartEvent = Array.from(startEvents).find(event => !event.getElementsByTagName('bpmn:messageEventDefinition').length &&
+            !event.getElementsByTagName('bpmn:timerEventDefinition').length);
+        return standardStartEvent ? standardStartEvent.getAttribute('name') : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StartModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StartModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: StartModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 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-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2531,13 +2295,13 @@ class DossierBulkAssignModalComponent {
     trackByIndex(index) {
         return index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierBulkAssignModalComponent, deps: [{ token: DossierBulkAssignService }, { token: i2$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: { documentIds: "documentIds", open: "open" }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "class": "this.modalClass" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"open\" (close)=\"closeModal()\" showFooter=\"true\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dossier.bulkAssign.modal.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form *ngIf=\"candidateUsers$ | async as candidateUsers\" [formGroup]=\"formGroup\">\n      <cds-combo-box\n        formControlName=\"assignee\"\n        [dropUp]=\"false\"\n        [items]=\"candidateUsers\"\n        [label]=\"'dossier.bulkAssign.modal.selectLabel' | translate\"\n        [placeholder]=\"'dossier.bulkAssign.modal.selectPlaceholder' | translate\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">{{ 'interface.cancel' | translate }}</button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"closeModal(true)\">\n      {{ 'dossier.bulkAssign.modal.confirm' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["::ng-deep .valtimo-dossier-bulk-assign-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-container,::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-content{overflow:unset}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i4.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i4.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i4.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i4.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i4.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i4.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierBulkAssignModalComponent, deps: [{ token: DossierBulkAssignService }, { token: i2$4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: { documentIds: "documentIds", open: "open" }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "class": "this.modalClass" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"open\" (close)=\"closeModal()\" showFooter=\"true\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dossier.bulkAssign.modal.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form *ngIf=\"candidateUsers$ | async as candidateUsers\" [formGroup]=\"formGroup\">\n      <cds-combo-box\n        formControlName=\"assignee\"\n        [dropUp]=\"false\"\n        [items]=\"candidateUsers\"\n        [label]=\"'dossier.bulkAssign.modal.selectLabel' | translate\"\n        [placeholder]=\"'dossier.bulkAssign.modal.selectPlaceholder' | translate\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">{{ 'interface.cancel' | translate }}</button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"closeModal(true)\">\n      {{ 'dossier.bulkAssign.modal.confirm' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["::ng-deep .valtimo-dossier-bulk-assign-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-container,::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-content{overflow:unset}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i10$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i10$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i10$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i10$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i10$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i10$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i10$1.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierBulkAssignModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierBulkAssignModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-bulk-assign-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"open\" (close)=\"closeModal()\" showFooter=\"true\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dossier.bulkAssign.modal.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form *ngIf=\"candidateUsers$ | async as candidateUsers\" [formGroup]=\"formGroup\">\n      <cds-combo-box\n        formControlName=\"assignee\"\n        [dropUp]=\"false\"\n        [items]=\"candidateUsers\"\n        [label]=\"'dossier.bulkAssign.modal.selectLabel' | translate\"\n        [placeholder]=\"'dossier.bulkAssign.modal.selectPlaceholder' | translate\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">{{ 'interface.cancel' | translate }}</button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"closeModal(true)\">\n      {{ 'dossier.bulkAssign.modal.confirm' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["::ng-deep .valtimo-dossier-bulk-assign-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-container,::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-content{overflow:unset}\n"] }]
-        }], ctorParameters: function () { return [{ type: DossierBulkAssignService }, { type: i2$3.FormBuilder }]; }, propDecorators: { modalClass: [{
+            args: [{ selector: 'valtimo-dossier-bulk-assign-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"open\" (close)=\"closeModal()\" showFooter=\"true\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dossier.bulkAssign.modal.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form *ngIf=\"candidateUsers$ | async as candidateUsers\" [formGroup]=\"formGroup\">\n      <cds-combo-box\n        formControlName=\"assignee\"\n        [dropUp]=\"false\"\n        [items]=\"candidateUsers\"\n        [label]=\"'dossier.bulkAssign.modal.selectLabel' | translate\"\n        [placeholder]=\"'dossier.bulkAssign.modal.selectPlaceholder' | translate\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">{{ 'interface.cancel' | translate }}</button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"closeModal(true)\">\n      {{ 'dossier.bulkAssign.modal.confirm' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["::ng-deep .valtimo-dossier-bulk-assign-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-container,::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-content{overflow:unset}\n/*!\n * Copyright 2015-2024 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: DossierBulkAssignService }, { type: i2$4.FormBuilder }], propDecorators: { modalClass: [{
                 type: HostBinding,
                 args: ['class']
             }], documentIds: [{
@@ -2549,7 +2313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2639,17 +2403,17 @@ class DossierSupportingProcessStartModalComponent {
     }
     gotoFormLinkScreen() {
         this.modal.hide();
-        this.router.navigate(['form-links'], {
+        this.router.navigate(['process-links'], {
             queryParams: { process: this.processDefinitionKey$.getValue() },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierSupportingProcessStartModalComponent, deps: [{ token: i1$1.Router }, { token: i2$2.ProcessService }, { token: i4$2.ProcessLinkService }, { token: i6$1.UserProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["supportingProcessStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  *ngIf=\"{\n    processDefinitionKey: processDefinitionKey$ | async,\n    processName: processName$ | async\n  } as vars\"\n  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"\n    (vars.processDefinitionKey | translate) !== vars.processDefinitionKey\n      ? (vars.processDefinitionKey | translate)\n      : vars.processName\n  \"\n>\n  <div body *ngIf=\"formDefinition$ | async as formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission$ | async\"\n      [form]=\"formDefinition\"\n      [options]=\"options$ | async\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId$ | async as formFlowInstanceId\">\n    <valtimo-form-flow\n      #formFlow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n\n  <ng-container\n    *ngIf=\"{\n      formDefinition: formDefinition$ | async,\n      formFlowInstanceId: formFlowInstanceId$ | async\n    } as obs\"\n  >\n    <div body *ngIf=\"!obs.formDefinition && !obs.formFlowInstanceId\">\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          (isAdmin$ | async)\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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 */#supportingProcessStartModal .formio-component-submit{text-align:right}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i4$2.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierSupportingProcessStartModalComponent, deps: [{ token: i1$1.Router }, { token: i2$2.ProcessService }, { token: i4$1.ProcessLinkService }, { token: i6$1.UserProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["supportingProcessStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  *ngIf=\"{\n    processDefinitionKey: processDefinitionKey$ | async,\n    processName: processName$ | async\n  } as vars\"\n  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"\n    (vars.processDefinitionKey | translate) !== vars.processDefinitionKey\n      ? (vars.processDefinitionKey | translate)\n      : vars.processName\n  \"\n>\n  <div body *ngIf=\"formDefinition$ | async as formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission$ | async\"\n      [form]=\"formDefinition\"\n      [options]=\"options$ | async\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId$ | async as formFlowInstanceId\">\n    <valtimo-form-flow\n      #formFlow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n\n  <ng-container\n    *ngIf=\"{\n      formDefinition: formDefinition$ | async,\n      formFlowInstanceId: formFlowInstanceId$ | async\n    } as obs\"\n  >\n    <div body *ngIf=\"!obs.formDefinition && !obs.formFlowInstanceId\">\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          (isAdmin$ | async)\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</valtimo-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i2$3.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i4$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierSupportingProcessStartModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierSupportingProcessStartModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-supporting-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  *ngIf=\"{\n    processDefinitionKey: processDefinitionKey$ | async,\n    processName: processName$ | async\n  } as vars\"\n  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"\n    (vars.processDefinitionKey | translate) !== vars.processDefinitionKey\n      ? (vars.processDefinitionKey | translate)\n      : vars.processName\n  \"\n>\n  <div body *ngIf=\"formDefinition$ | async as formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission$ | async\"\n      [form]=\"formDefinition\"\n      [options]=\"options$ | async\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId$ | async as formFlowInstanceId\">\n    <valtimo-form-flow\n      #formFlow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n\n  <ng-container\n    *ngIf=\"{\n      formDefinition: formDefinition$ | async,\n      formFlowInstanceId: formFlowInstanceId$ | async\n    } as obs\"\n  >\n    <div body *ngIf=\"!obs.formDefinition && !obs.formFlowInstanceId\">\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          (isAdmin$ | async)\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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 */#supportingProcessStartModal .formio-component-submit{text-align:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i2$2.ProcessService }, { type: i4$2.ProcessLinkService }, { type: i6$1.UserProviderService }]; }, propDecorators: { form: [{
+            args: [{ selector: 'valtimo-dossier-supporting-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  *ngIf=\"{\n    processDefinitionKey: processDefinitionKey$ | async,\n    processName: processName$ | async\n  } as vars\"\n  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"\n    (vars.processDefinitionKey | translate) !== vars.processDefinitionKey\n      ? (vars.processDefinitionKey | translate)\n      : vars.processName\n  \"\n>\n  <div body *ngIf=\"formDefinition$ | async as formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission$ | async\"\n      [form]=\"formDefinition\"\n      [options]=\"options$ | async\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId$ | async as formFlowInstanceId\">\n    <valtimo-form-flow\n      #formFlow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n\n  <ng-container\n    *ngIf=\"{\n      formDefinition: formDefinition$ | async,\n      formFlowInstanceId: formFlowInstanceId$ | async\n    } as obs\"\n  >\n    <div body *ngIf=\"!obs.formDefinition && !obs.formFlowInstanceId\">\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          (isAdmin$ | async)\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</valtimo-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 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$1.Router }, { type: i2$2.ProcessService }, { type: i4$1.ProcessLinkService }, { type: i6$1.UserProviderService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], modal: [{
@@ -2660,7 +2424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2731,13 +2495,13 @@ class DossierAssignUserComponent {
     disable() {
         this.disabled$.next(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierAssignUserComponent, deps: [{ token: i2$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: { documentId: "documentId", assigneeId: "assigneeId", assigneeFullName: "assigneeFullName", hasPermission: "hasPermission" }, outputs: { assignmentOfDocumentChanged: "assignmentOfDocumentChanged" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n      <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #content>\n  <ng-container\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      assigneeFullName: assigneeFullName$ | async,\n      assigneeId: assigneeId$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"!hasPermission && obs.assigneeFullName\">\n      <ng-container *ngTemplateOutlet=\"fullName; context: {obs: obs}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"hasPermission\">\n      <ng-container *ngTemplateOutlet=\"selectUser; context: {obs: obs}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #fullName let-obs=\"obs\">\n  <valtimo-searchable-dropdown-select\n    [buttonText]=\"'assignDocument.header' | translate\"\n    [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n    [hasPermission]=\"false\"\n    [hasSelection]=\"true\"\n    [noResultsText]=\"'interface.noSearchResults' | translate\"\n    [searchText]=\"'interface.typeToSearch' | translate\"\n    [selectedTextValue]=\"obs.assigneeFullName\"\n    [selectedText]=\"'assignDocument.assignedTo' | translate\"\n    [style]=\"'underlinedText'\"\n    [width]=\"250\"\n    class=\"dossier-candidates-dropdown\"\n  >\n  </valtimo-searchable-dropdown-select>\n</ng-template>\n\n<ng-template #selectUser let-obs=\"obs\">\n  <ng-container *ngIf=\"userItems$ | async as userItems; else loadingUsers\">\n    <valtimo-searchable-dropdown-select\n      [buttonText]=\"'assignDocument.header' | translate\"\n      [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n      [disabled]=\"obs.disabled\"\n      [hasPermission]=\"hasPermission\"\n      [hasSelection]=\"obs.assigneeId\"\n      [items]=\"userItems\"\n      [noResultsText]=\"'interface.noSearchResults' | translate\"\n      [searchText]=\"'interface.typeToSearch' | translate\"\n      [selectedTextValue]=\"obs.assigneeFullName\"\n      [selectedText]=\"'assignDocument.assignedTo' | translate\"\n      [style]=\"'underlinedText'\"\n      [width]=\"250\"\n      (clearSelection)=\"unassignDocument()\"\n      (itemSelected)=\"assignDocument($event)\"\n      class=\"dossier-candidates-dropdown\"\n    >\n    </valtimo-searchable-dropdown-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingUsers>\n  <h5>\n    <b>{{ 'assignDocument.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}valtimo-searchable-dropdown-select{font-size:13px}:host .dossier-candidates-dropdown h5{margin-block:0}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "selectedText", "selectedTextValue", "clearSelectionButtonTitle", "hasSelection", "width", "hasPermission"], outputs: ["itemSelected", "clearSelection"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierAssignUserComponent, deps: [{ token: i2$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: { documentId: "documentId", assigneeId: "assigneeId", assigneeFullName: "assigneeFullName", hasPermission: "hasPermission" }, outputs: { assignmentOfDocumentChanged: "assignmentOfDocumentChanged" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n      <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #content>\n  <ng-container\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      assigneeFullName: assigneeFullName$ | async,\n      assigneeId: assigneeId$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"!hasPermission && obs.assigneeFullName\">\n      <ng-container *ngTemplateOutlet=\"fullName; context: {obs: obs}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"hasPermission\">\n      <ng-container *ngTemplateOutlet=\"selectUser; context: {obs: obs}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #fullName let-obs=\"obs\">\n  <valtimo-searchable-dropdown-select\n    [buttonText]=\"'assignDocument.header' | translate\"\n    [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n    [hasPermission]=\"false\"\n    [hasSelection]=\"true\"\n    [noResultsText]=\"'interface.noSearchResults' | translate\"\n    [searchText]=\"'interface.typeToSearch' | translate\"\n    [selectedTextValue]=\"obs.assigneeFullName\"\n    [selectedText]=\"'assignDocument.assignedTo' | translate\"\n    [style]=\"'underlinedText'\"\n    [width]=\"250\"\n    class=\"dossier-candidates-dropdown\"\n  >\n  </valtimo-searchable-dropdown-select>\n</ng-template>\n\n<ng-template #selectUser let-obs=\"obs\">\n  <ng-container *ngIf=\"userItems$ | async as userItems; else loadingUsers\">\n    <valtimo-searchable-dropdown-select\n      [buttonText]=\"'assignDocument.header' | translate\"\n      [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n      [disabled]=\"obs.disabled\"\n      [hasPermission]=\"hasPermission\"\n      [showClearSelection]=\"false\"\n      [hasSelection]=\"obs.assigneeId\"\n      [items]=\"userItems\"\n      [noResultsText]=\"'interface.noSearchResults' | translate\"\n      [searchText]=\"'interface.typeToSearch' | translate\"\n      [selectedTextValue]=\"obs.assigneeFullName\"\n      [selectedText]=\"'assignDocument.assignedTo' | translate\"\n      [style]=\"'underlinedText'\"\n      [width]=\"250\"\n      (clearSelection)=\"unassignDocument()\"\n      (itemSelected)=\"assignDocument($event)\"\n      class=\"dossier-candidates-dropdown\"\n    >\n    </valtimo-searchable-dropdown-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingUsers>\n  <h5>\n    <b>{{ 'assignDocument.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}valtimo-searchable-dropdown-select{color:var(--cds-text-helper)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important;line-height:18px!important}h5{font-size:14px!important}:host .dossier-candidates-dropdown h5{margin-block:0}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "selectedText", "selectedTextValue", "clearSelectionButtonTitle", "hasSelection", "width", "hasPermission", "showClearSelection"], outputs: ["itemSelected", "clearSelection"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierAssignUserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierAssignUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-assign-user', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n      <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #content>\n  <ng-container\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      assigneeFullName: assigneeFullName$ | async,\n      assigneeId: assigneeId$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"!hasPermission && obs.assigneeFullName\">\n      <ng-container *ngTemplateOutlet=\"fullName; context: {obs: obs}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"hasPermission\">\n      <ng-container *ngTemplateOutlet=\"selectUser; context: {obs: obs}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #fullName let-obs=\"obs\">\n  <valtimo-searchable-dropdown-select\n    [buttonText]=\"'assignDocument.header' | translate\"\n    [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n    [hasPermission]=\"false\"\n    [hasSelection]=\"true\"\n    [noResultsText]=\"'interface.noSearchResults' | translate\"\n    [searchText]=\"'interface.typeToSearch' | translate\"\n    [selectedTextValue]=\"obs.assigneeFullName\"\n    [selectedText]=\"'assignDocument.assignedTo' | translate\"\n    [style]=\"'underlinedText'\"\n    [width]=\"250\"\n    class=\"dossier-candidates-dropdown\"\n  >\n  </valtimo-searchable-dropdown-select>\n</ng-template>\n\n<ng-template #selectUser let-obs=\"obs\">\n  <ng-container *ngIf=\"userItems$ | async as userItems; else loadingUsers\">\n    <valtimo-searchable-dropdown-select\n      [buttonText]=\"'assignDocument.header' | translate\"\n      [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n      [disabled]=\"obs.disabled\"\n      [hasPermission]=\"hasPermission\"\n      [hasSelection]=\"obs.assigneeId\"\n      [items]=\"userItems\"\n      [noResultsText]=\"'interface.noSearchResults' | translate\"\n      [searchText]=\"'interface.typeToSearch' | translate\"\n      [selectedTextValue]=\"obs.assigneeFullName\"\n      [selectedText]=\"'assignDocument.assignedTo' | translate\"\n      [style]=\"'underlinedText'\"\n      [width]=\"250\"\n      (clearSelection)=\"unassignDocument()\"\n      (itemSelected)=\"assignDocument($event)\"\n      class=\"dossier-candidates-dropdown\"\n    >\n    </valtimo-searchable-dropdown-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingUsers>\n  <h5>\n    <b>{{ 'assignDocument.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}valtimo-searchable-dropdown-select{font-size:13px}:host .dossier-candidates-dropdown h5{margin-block:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$1.DocumentService }]; }, propDecorators: { documentId: [{
+            args: [{ selector: 'valtimo-dossier-assign-user', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n      <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #content>\n  <ng-container\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      assigneeFullName: assigneeFullName$ | async,\n      assigneeId: assigneeId$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"!hasPermission && obs.assigneeFullName\">\n      <ng-container *ngTemplateOutlet=\"fullName; context: {obs: obs}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"hasPermission\">\n      <ng-container *ngTemplateOutlet=\"selectUser; context: {obs: obs}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #fullName let-obs=\"obs\">\n  <valtimo-searchable-dropdown-select\n    [buttonText]=\"'assignDocument.header' | translate\"\n    [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n    [hasPermission]=\"false\"\n    [hasSelection]=\"true\"\n    [noResultsText]=\"'interface.noSearchResults' | translate\"\n    [searchText]=\"'interface.typeToSearch' | translate\"\n    [selectedTextValue]=\"obs.assigneeFullName\"\n    [selectedText]=\"'assignDocument.assignedTo' | translate\"\n    [style]=\"'underlinedText'\"\n    [width]=\"250\"\n    class=\"dossier-candidates-dropdown\"\n  >\n  </valtimo-searchable-dropdown-select>\n</ng-template>\n\n<ng-template #selectUser let-obs=\"obs\">\n  <ng-container *ngIf=\"userItems$ | async as userItems; else loadingUsers\">\n    <valtimo-searchable-dropdown-select\n      [buttonText]=\"'assignDocument.header' | translate\"\n      [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n      [disabled]=\"obs.disabled\"\n      [hasPermission]=\"hasPermission\"\n      [showClearSelection]=\"false\"\n      [hasSelection]=\"obs.assigneeId\"\n      [items]=\"userItems\"\n      [noResultsText]=\"'interface.noSearchResults' | translate\"\n      [searchText]=\"'interface.typeToSearch' | translate\"\n      [selectedTextValue]=\"obs.assigneeFullName\"\n      [selectedText]=\"'assignDocument.assignedTo' | translate\"\n      [style]=\"'underlinedText'\"\n      [width]=\"250\"\n      (clearSelection)=\"unassignDocument()\"\n      (itemSelected)=\"assignDocument($event)\"\n      class=\"dossier-candidates-dropdown\"\n    >\n    </valtimo-searchable-dropdown-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingUsers>\n  <h5>\n    <b>{{ 'assignDocument.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}valtimo-searchable-dropdown-select{color:var(--cds-text-helper)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important;line-height:18px!important}h5{font-size:14px!important}:host .dossier-candidates-dropdown h5{margin-block:0}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.DocumentService }], propDecorators: { documentId: [{
                 type: Input
             }], assigneeId: [{
                 type: Input
@@ -2750,7 +2514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2776,18 +2540,18 @@ class TabTranslatePipe {
                 .stream(translationId)
                 .pipe(map(translation => (translationId !== translation ? translation : tab.name)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTranslatePipe, deps: [{ token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TabTranslatePipe, name: "tabTranslate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabTranslatePipe, deps: [{ token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TabTranslatePipe, name: "tabTranslate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabTranslatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'tabTranslate',
                 }]
-        }], ctorParameters: function () { return [{ type: i6.TranslateService }]; } });
+        }], ctorParameters: () => [{ type: i6.TranslateService }] });
 
 class DossierDetailComponent {
-    constructor(breadcrumbService, componentFactoryResolver, configService, documentService, keyCloakService, location, logger, permissionService, route, router, dossierTabService, dossierService) {
+    constructor(breadcrumbService, componentFactoryResolver, configService, documentService, keyCloakService, location, logger, permissionService, route, router, dossierTabService, dossierService, caseStatusService, pageTitleService, iconService, pageHeaderService) {
         this.breadcrumbService = breadcrumbService;
         this.componentFactoryResolver = componentFactoryResolver;
         this.configService = configService;
@@ -2800,16 +2564,23 @@ class DossierDetailComponent {
         this.router = router;
         this.dossierTabService = dossierTabService;
         this.dossierService = dossierService;
+        this.caseStatusService = caseStatusService;
+        this.pageTitleService = pageTitleService;
+        this.iconService = iconService;
+        this.pageHeaderService = pageHeaderService;
         this.customDossierHeaderItems = [];
         this.document = null;
         this.processDefinitionListFields = [];
         this.processDocumentDefinitions = [];
         this.tabLoader = null;
         this.assigneeId$ = new BehaviorSubject('');
+        this._caseStatusKey$ = new BehaviorSubject(null);
+        this.caseStatusKey$ = this._caseStatusKey$.pipe(filter(key => !!key));
         this.document$ = this.dossierService.refreshDocument$.pipe(switchMap(() => this.route.params), map((params) => params?.documentId), switchMap((documentId) => documentId ? this.documentService.getDocument(this.documentId) : of(null)), tap((document) => {
             if (document) {
                 this.assigneeId$.next(document.assigneeId);
                 this.document = document;
+                this._caseStatusKey$.next(document?.internalStatus || 'NOT_AVAILABLE');
                 if (this.configService.config.customDossierHeader?.hasOwnProperty(this.documentDefinitionName.toLowerCase()) &&
                     this.customDossierHeaderItems.length === 0) {
                     this.configService.config.customDossierHeader[this.documentDefinitionName.toLowerCase()]?.forEach(item => this.getCustomDossierHeaderItem(item));
@@ -2817,7 +2588,14 @@ class DossierDetailComponent {
             }
         }));
         this.documentDefinitionName$ = this.route.params.pipe(map(params => params.documentDefinitionName || ''));
-        this.userId$ = from(this.keyCloakService.isLoggedIn()).pipe(switchMap(() => this.keyCloakService.loadUserProfile()), map(profile => profile?.id));
+        this.caseStatus$ = this.documentDefinitionName$.pipe(filter(documentDefinitionName => !!documentDefinitionName), switchMap(documentDefinitionName => combineLatest([
+            this.caseStatusService.getInternalCaseStatuses(documentDefinitionName),
+            this.caseStatusKey$,
+        ])), map(([statuses, key]) => key !== 'NOT_AVAILABLE' && statuses.find(status => status?.key === key)), map(status => status && {
+            ...status,
+            tagType: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(status.color),
+        }));
+        this.userId$ = of(this.keyCloakService.isLoggedIn()).pipe(switchMap(() => this.keyCloakService.loadUserProfile()), map(profile => profile?.id));
         this.isAssigning$ = new BehaviorSubject(false);
         this.isAssignedToCurrentUser$ = combineLatest([
             this.assigneeId$,
@@ -2837,6 +2615,7 @@ class DossierDetailComponent {
         })));
         this.loadingTabs$ = new BehaviorSubject(true);
         this.noTabsConfigured$ = new BehaviorSubject(false);
+        this.compactMode$ = this.pageHeaderService.compactMode$;
         this._snapshot = this.route.snapshot.paramMap;
         this.documentDefinitionName = this._snapshot.get('documentDefinitionName') || '';
         this.documentId = this._snapshot.get('documentId') || '';
@@ -2845,9 +2624,12 @@ class DossierDetailComponent {
         this.initTabLoader();
         this.initBreadcrumb();
         this.getAllAssociatedProcessDefinitions();
+        this.pageTitleService.disableReset();
+        this.iconService.registerAll([ChevronDown16]);
     }
     ngOnDestroy() {
         this.breadcrumbService.clearSecondBreadcrumb();
+        this.pageTitleService.enableReset();
     }
     getAllAssociatedProcessDefinitions() {
         this.documentService
@@ -2880,6 +2662,21 @@ class DossierDetailComponent {
             },
         });
     }
+    unassignAssignee() {
+        this.isAssigning$.next(true);
+        this.userId$
+            .pipe(take(1), switchMap((userId) => this.documentService.unassignHandlerFromDocument(this.documentId)))
+            .subscribe({
+            next: () => {
+                this.isAssigning$.next(false);
+                this.dossierService.refresh();
+            },
+            error: () => {
+                this.isAssigning$.next(false);
+                this.logger.debug('Something went wrong while unassigning user from case');
+            },
+        });
+    }
     initBreadcrumb() {
         this.documentService
             .getDocumentDefinition(this.documentDefinitionName)
@@ -2935,7 +2732,7 @@ class DossierDetailComponent {
         return prefix + string;
     }
     getNestedProperty(obj, path, defaultValue) {
-        return path.split('.').reduce((currentObject, key) => currentObject?.[key], obj) || defaultValue;
+        return (path.split('.').reduce((currentObject, key) => currentObject?.[key], obj) || defaultValue);
     }
     setBreadcrumb() {
         this.breadcrumbService.setSecondBreadcrumb({
@@ -2944,13 +2741,13 @@ class DossierDetailComponent {
             href: `/dossiers/${this.documentDefinitionName}`,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i3$1.BreadcrumbService }, { token: i0.ComponentFactoryResolver }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: i4$3.KeycloakService }, { token: i5$1.Location }, { token: i1$2.NGXLogger }, { token: i7.PermissionService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierTabService }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierDetailComponent, selector: "valtimo-dossier-detail", providers: [DossierTabService], viewQueries: [{ propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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<div\n  *ngIf=\"{\n    canAssign: canAssign$ | async,\n    canClaim: canClaim$ | async,\n    canHaveAssignee: canHaveAssignee$ | async,\n    document: document$ | async\n  } as obs\"\n  class=\"main-content\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-2\">\n          <div class=\"row\">\n            <div class=\"col\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  caseDetailHeader;\n                  context: {\n                    canHaveAssignee: obs.canHaveAssignee,\n                    document: obs.document,\n                    canAssign: obs.canAssign\n                  }\n                \"\n              ></ng-container>\n            </div>\n\n            <div class=\"btn-group mt-m3px mb-3 col-auto\">\n              <valtimo-extension\n                module=\"dossier\"\n                page=\"dossier-detail\"\n                section=\"card-header\"\n              ></valtimo-extension>\n\n              <ng-container\n                *ngTemplateOutlet=\"\n                  claimButton;\n                  context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n                \"\n              ></ng-container>\n\n              <div class=\"dropdown\">\n                <button\n                  [disabled]=\"processDocumentDefinitions.length === 0\"\n                  [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                  aria-expanded=\"false\"\n                  aria-haspopup=\"true\"\n                  class=\"btn btn-primary dropdown-toggle\"\n                  data-toggle=\"dropdown\"\n                  id=\"startProcessDropdown\"\n                  placement=\"bottom\"\n                  type=\"button\"\n                >\n                  <span>{{ 'dossier.startSubProcess' | translate }}</span>\n\n                  <i class=\"ml-1 mdi mdi-chevron-down\"></i>\n                </button>\n\n                <div\n                  aria-labelledby=\"startProcessDropdown\"\n                  class=\"dropdown-menu dropdown-menu-right\"\n                >\n                  <button\n                    *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                    (click)=\"startProcess(processDocumentDefinition)\"\n                    class=\"dropdown-item p\"\n                    href=\"#\"\n                  >\n                    {{\n                      (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n                      processDocumentDefinition?.id?.processDefinitionKey\n                        ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                        : processDocumentDefinition.processName\n                    }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ul *ngIf=\"tabLoader\" class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a\n              [ngClass]=\"{active: tab.isActive()}\"\n              (click)=\"tabLoader.load(tab)\"\n              class=\"nav-link clickable\"\n              data-toggle=\"tab\"\n              id=\"{{ tab.name }}-tab\"\n            >\n              {{ tab | tabTranslate | async }}\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n            <cds-loading></cds-loading>\n          </div>\n\n          <valtimo-no-results\n            *ngIf=\"noTabsConfigured$ | async\"\n            [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n            [title]=\"'dossier.tabs.noResults' | translate\"\n          ></valtimo-no-results>\n\n          <ng-template #tabContainer></ng-template>\n\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"customDossierHeaderItems.length > 0; else defaultTitle\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs'\n      }\"\n      class=\"mb-0 mt-0 pb-2 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\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 #defaultTitle>\n  <div class=\"row ml-0 mr-0\">{{ documentDefinitionNameTitle?.trim() }}</div>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row ml-0 mr-0 mt-1 mb-1\" *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <div class=\"user-full-name\" *ngIf=\"canClaim && canHaveAssignee\">\n    <button\n      [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n      (click)=\"claimAssignee()\"\n      aria-expanded=\"false\"\n      aria-haspopup=\"true\"\n      class=\"btn btn-space btn-primary mr-1\"\n      placement=\"bottom\"\n      type=\"button\"\n    >\n      <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n    </button>\n  </div>\n</ng-template>\n", styles: [".tab-container{min-height:300px}.loading-container{display:flex;justify-content:center;flex-direction:row}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i1.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i3$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: ["formSubmit"] }, { kind: "component", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: ["documentId", "assigneeId", "assigneeFullName", "hasPermission"], outputs: ["assignmentOfDocumentChanged"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: TabTranslatePipe, name: "tabTranslate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i2$3.BreadcrumbService }, { token: i0.ComponentFactoryResolver }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: i4$2.KeycloakService }, { token: i5$1.Location }, { token: i1$2.NGXLogger }, { token: i7.PermissionService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierTabService }, { token: DossierService }, { token: i2$1.CaseStatusService }, { token: i2$3.PageTitleService }, { token: i10$1.IconService }, { token: i2$3.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DossierDetailComponent, selector: "valtimo-dossier-detail", providers: [DossierTabService], viewQueries: [{ propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n      <ng-template #tabs>\n        <ng-container *ngIf=\"tabLoader\">\n          <cds-tabs type=\"contained\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.isActive()\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              [id]=\"\"\n              (selected)=\"tabLoader.load(tab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n\n      <div class=\"card-body bg-white p-5 position-relative tab-container\">\n        <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n          <cds-loading></cds-loading>\n        </div>\n\n        <valtimo-no-results\n          *ngIf=\"noTabsConfigured$ | async\"\n          [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n          [title]=\"'dossier.tabs.noResults' | translate\"\n        ></valtimo-no-results>\n\n        <ng-template #tabContainer></ng-template>\n\n        <div class=\"clearfix\"></div>\n      </div>\n    </div>\n\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs'\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\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-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{'--compact': compactMode$ | async}\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\">{{ obs.caseStatus.title }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [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        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <cds-overflow-menu-option (selected)=\"unassignAssignee()\" [disabled]=\"!obs.assigneeId\">\n            {{ 'assignDocument.remove' | translate }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"250\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{\n              (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n              processDocumentDefinition?.id?.processDefinitionKey\n                ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                : processDocumentDefinition.processName\n            }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".tab-container{min-height:300px}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions.--compact{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;height:var(--cds-layout-size-height-md)}.dossier-status-assign-custom-title.--compact{align-items:center}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i10$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i10$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i10$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i10$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i10$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i2$3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "directive", type: i2$3.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i10$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i10$1.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i10$1.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i2$3.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: ["formSubmit"] }, { kind: "component", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: ["documentId", "assigneeId", "assigneeFullName", "hasPermission"], outputs: ["assignmentOfDocumentChanged"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: TabTranslatePipe, name: "tabTranslate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail', providers: [DossierTabService], template: "<!--\n  ~ Copyright 2015-2023 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<div\n  *ngIf=\"{\n    canAssign: canAssign$ | async,\n    canClaim: canClaim$ | async,\n    canHaveAssignee: canHaveAssignee$ | async,\n    document: document$ | async\n  } as obs\"\n  class=\"main-content\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-2\">\n          <div class=\"row\">\n            <div class=\"col\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  caseDetailHeader;\n                  context: {\n                    canHaveAssignee: obs.canHaveAssignee,\n                    document: obs.document,\n                    canAssign: obs.canAssign\n                  }\n                \"\n              ></ng-container>\n            </div>\n\n            <div class=\"btn-group mt-m3px mb-3 col-auto\">\n              <valtimo-extension\n                module=\"dossier\"\n                page=\"dossier-detail\"\n                section=\"card-header\"\n              ></valtimo-extension>\n\n              <ng-container\n                *ngTemplateOutlet=\"\n                  claimButton;\n                  context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n                \"\n              ></ng-container>\n\n              <div class=\"dropdown\">\n                <button\n                  [disabled]=\"processDocumentDefinitions.length === 0\"\n                  [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                  aria-expanded=\"false\"\n                  aria-haspopup=\"true\"\n                  class=\"btn btn-primary dropdown-toggle\"\n                  data-toggle=\"dropdown\"\n                  id=\"startProcessDropdown\"\n                  placement=\"bottom\"\n                  type=\"button\"\n                >\n                  <span>{{ 'dossier.startSubProcess' | translate }}</span>\n\n                  <i class=\"ml-1 mdi mdi-chevron-down\"></i>\n                </button>\n\n                <div\n                  aria-labelledby=\"startProcessDropdown\"\n                  class=\"dropdown-menu dropdown-menu-right\"\n                >\n                  <button\n                    *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                    (click)=\"startProcess(processDocumentDefinition)\"\n                    class=\"dropdown-item p\"\n                    href=\"#\"\n                  >\n                    {{\n                      (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n                      processDocumentDefinition?.id?.processDefinitionKey\n                        ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                        : processDocumentDefinition.processName\n                    }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <ul *ngIf=\"tabLoader\" class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a\n              [ngClass]=\"{active: tab.isActive()}\"\n              (click)=\"tabLoader.load(tab)\"\n              class=\"nav-link clickable\"\n              data-toggle=\"tab\"\n              id=\"{{ tab.name }}-tab\"\n            >\n              {{ tab | tabTranslate | async }}\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n            <cds-loading></cds-loading>\n          </div>\n\n          <valtimo-no-results\n            *ngIf=\"noTabsConfigured$ | async\"\n            [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n            [title]=\"'dossier.tabs.noResults' | translate\"\n          ></valtimo-no-results>\n\n          <ng-template #tabContainer></ng-template>\n\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"customDossierHeaderItems.length > 0; else defaultTitle\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs'\n      }\"\n      class=\"mb-0 mt-0 pb-2 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\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 #defaultTitle>\n  <div class=\"row ml-0 mr-0\">{{ documentDefinitionNameTitle?.trim() }}</div>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row ml-0 mr-0 mt-1 mb-1\" *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <div class=\"user-full-name\" *ngIf=\"canClaim && canHaveAssignee\">\n    <button\n      [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n      (click)=\"claimAssignee()\"\n      aria-expanded=\"false\"\n      aria-haspopup=\"true\"\n      class=\"btn btn-space btn-primary mr-1\"\n      placement=\"bottom\"\n      type=\"button\"\n    >\n      <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n    </button>\n  </div>\n</ng-template>\n", styles: [".tab-container{min-height:300px}.loading-container{display:flex;justify-content:center;flex-direction:row}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3$1.BreadcrumbService }, { type: i0.ComponentFactoryResolver }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: i4$3.KeycloakService }, { type: i5$1.Location }, { type: i1$2.NGXLogger }, { type: i7.PermissionService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierTabService }, { type: DossierService }]; }, propDecorators: { supportingProcessStart: [{
+            args: [{ selector: 'valtimo-dossier-detail', providers: [DossierTabService], template: "<!--\n  ~ Copyright 2015-2024 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<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n      <ng-template #tabs>\n        <ng-container *ngIf=\"tabLoader\">\n          <cds-tabs type=\"contained\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.isActive()\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              [id]=\"\"\n              (selected)=\"tabLoader.load(tab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n\n      <div class=\"card-body bg-white p-5 position-relative tab-container\">\n        <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n          <cds-loading></cds-loading>\n        </div>\n\n        <valtimo-no-results\n          *ngIf=\"noTabsConfigured$ | async\"\n          [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n          [title]=\"'dossier.tabs.noResults' | translate\"\n        ></valtimo-no-results>\n\n        <ng-template #tabContainer></ng-template>\n\n        <div class=\"clearfix\"></div>\n      </div>\n    </div>\n\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs'\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\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-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{'--compact': compactMode$ | async}\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\">{{ obs.caseStatus.title }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [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        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <cds-overflow-menu-option (selected)=\"unassignAssignee()\" [disabled]=\"!obs.assigneeId\">\n            {{ 'assignDocument.remove' | translate }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"250\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{\n              (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n              processDocumentDefinition?.id?.processDefinitionKey\n                ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                : processDocumentDefinition.processName\n            }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".tab-container{min-height:300px}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions.--compact{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;height:var(--cds-layout-size-height-md)}.dossier-status-assign-custom-title.--compact{align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i2$3.BreadcrumbService }, { type: i0.ComponentFactoryResolver }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: i4$2.KeycloakService }, { type: i5$1.Location }, { type: i1$2.NGXLogger }, { type: i7.PermissionService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierTabService }, { type: DossierService }, { type: i2$1.CaseStatusService }, { type: i2$3.PageTitleService }, { type: i10$1.IconService }, { type: i2$3.PageHeaderService }], propDecorators: { supportingProcessStart: [{
                 type: ViewChild,
                 args: ['supportingProcessStartModal']
             }], viewContainerRef: [{
@@ -2958,34 +2755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['tabContainer', { read: ViewContainerRef }]
             }] } });
 
-class StartModalService {
-    getStandardStartEventTitle(bpmnXml) {
-        const parser = new DOMParser();
-        const xmlDoc = parser.parseFromString(bpmnXml, "application/xml");
-        if (xmlDoc.getElementsByTagName("parsererror").length) {
-            console.error("Error parsing XML");
-            return null;
-        }
-        const startEvents = xmlDoc.getElementsByTagName('bpmn:startEvent');
-        if (!startEvents) {
-            return null;
-        }
-        const standardStartEvent = Array.from(startEvents).find(event => !event.getElementsByTagName('bpmn:messageEventDefinition').length &&
-            !event.getElementsByTagName('bpmn:timerEventDefinition').length);
-        return standardStartEvent ? standardStartEvent.getAttribute('name') : null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StartModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StartModalService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StartModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3013,7 +2784,8 @@ class DossierProcessStartModalComponent {
         this.startModalService = startModalService;
         this.configService = configService;
         this.formFlowComplete = new EventEmitter();
-        this._useStartEventNameAsStartFormTitle = this.configService.config.featureToggles?.useStartEventNameAsStartFormTitle;
+        this._useStartEventNameAsStartFormTitle =
+            this.configService.config.featureToggles?.useStartEventNameAsStartFormTitle;
     }
     ngOnInit() {
         this.isUserAdmin();
@@ -3023,7 +2795,7 @@ class DossierProcessStartModalComponent {
         this.formDefinition = null;
         this.formFlowInstanceId = null;
         if (this._useStartEventNameAsStartFormTitle) {
-            this.processService.getProcessDefinitionXml(this.processDefinitionId).subscribe((result) => {
+            this.processService.getProcessDefinitionXml(this.processDefinitionId).subscribe(result => {
                 this._startEventName = this.startModalService.getStandardStartEventTitle(result.bpmn20Xml);
             });
         }
@@ -3051,7 +2823,9 @@ class DossierProcessStartModalComponent {
     }
     get modalTitle() {
         const fallbackTitle = `Start - ${this.processName}`;
-        return this._useStartEventNameAsStartFormTitle ? (this._startEventName || fallbackTitle) : fallbackTitle;
+        return this._useStartEventNameAsStartFormTitle
+            ? this._startEventName || fallbackTitle
+            : fallbackTitle;
     }
     openModal(processDocumentDefinition) {
         this.processDefinitionKey = processDocumentDefinition.id.processDefinitionKey;
@@ -3109,13 +2883,13 @@ class DossierProcessStartModalComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierProcessStartModalComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$2.ProcessService }, { token: i2$1.DocumentService }, { token: i4$2.ProcessLinkService }, { token: i4$2.FormFlowService }, { token: i6$1.UserProviderService }, { token: i7.PermissionService }, { token: DossierListService }, { token: StartModalService }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId\">\n    <valtimo-form-flow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formFlowSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        (click)=\"gotoProcessLinkScreen()\"\n        class=\"btn btn-secondary btn-space\"\n        id=\"process-link-button\"\n        type=\"button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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 */#processStartModal .formio-component-submit{text-align:right}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$2.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierProcessStartModalComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$2.ProcessService }, { token: i2$1.DocumentService }, { token: i4$1.ProcessLinkService }, { token: i4$1.FormFlowService }, { token: i6$1.UserProviderService }, { token: i7.PermissionService }, { token: DossierListService }, { token: StartModalService }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId\">\n    <valtimo-form-flow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formFlowSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        (click)=\"gotoProcessLinkScreen()\"\n        class=\"btn btn-secondary btn-space\"\n        id=\"process-link-button\"\n        type=\"button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n", styles: ["#processStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i2$3.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierProcessStartModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierProcessStartModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId\">\n    <valtimo-form-flow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formFlowSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        (click)=\"gotoProcessLinkScreen()\"\n        class=\"btn btn-secondary btn-space\"\n        id=\"process-link-button\"\n        type=\"button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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 */#processStartModal .formio-component-submit{text-align:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2$2.ProcessService }, { type: i2$1.DocumentService }, { type: i4$2.ProcessLinkService }, { type: i4$2.FormFlowService }, { type: i6$1.UserProviderService }, { type: i7.PermissionService }, { type: DossierListService }, { type: StartModalService }, { type: i1.ConfigService }]; }, propDecorators: { form: [{
+            args: [{ selector: 'valtimo-dossier-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId\">\n    <valtimo-form-flow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formFlowSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        (click)=\"gotoProcessLinkScreen()\"\n        class=\"btn btn-secondary btn-space\"\n        id=\"process-link-button\"\n        type=\"button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n", styles: ["#processStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 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$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2$2.ProcessService }, { type: i2$1.DocumentService }, { type: i4$1.ProcessLinkService }, { type: i4$1.FormFlowService }, { type: i6$1.UserProviderService }, { type: i7.PermissionService }, { type: DossierListService }, { type: StartModalService }, { type: i1.ConfigService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], modal: [{
@@ -3126,7 +2900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3186,13 +2960,13 @@ class DossierListActionsComponent {
             this.selectedProcessDocumentDefinition = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListActionsComponent, deps: [{ token: i2$1.DocumentService }, { token: DossierListService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: { loading: "loading" }, outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\">\n  <div\n    class=\"modal fade\"\n    id=\"startProcess\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"startProcessLabel\"\n    aria-hidden=\"true\"\n  >\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"startProcessLabel\">\n            {{ 'dashboard.startProcess.title' | translate }}\n          </h3>\n\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"table-responsive\">\n            <table class=\"table m-0\">\n              <tr\n                *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                (click)=\"selectProcess(processDocumentDefinition)\"\n                style=\"cursor: pointer\"\n              >\n                <td>{{ processDocumentDefinition.processName }}</td>\n              </tr>\n            </table>\n          </div>\n        </div>\n\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n            {{ 'cta.close' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<valtimo-dossier-process-start-modal\n  #processStartModal\n  (formFlowComplete)=\"onFormFlowComplete()\"\n></valtimo-dossier-process-start-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListActionsComponent, deps: [{ token: i2$1.DocumentService }, { token: DossierListService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: { loading: "loading" }, outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\">\n  <div\n    class=\"modal fade\"\n    id=\"startProcess\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"startProcessLabel\"\n    aria-hidden=\"true\"\n  >\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"startProcessLabel\">\n            {{ 'dashboard.startProcess.title' | translate }}\n          </h3>\n\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"table-responsive\">\n            <table class=\"table m-0\">\n              <tr\n                *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                (click)=\"selectProcess(processDocumentDefinition)\"\n                style=\"cursor: pointer\"\n              >\n                <td>{{ processDocumentDefinition.processName }}</td>\n              </tr>\n            </table>\n          </div>\n        </div>\n\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n            {{ 'cta.close' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<valtimo-dossier-process-start-modal\n  #processStartModal\n  (formFlowComplete)=\"onFormFlowComplete()\"\n></valtimo-dossier-process-start-modal>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-list-actions', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\">\n  <div\n    class=\"modal fade\"\n    id=\"startProcess\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"startProcessLabel\"\n    aria-hidden=\"true\"\n  >\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"startProcessLabel\">\n            {{ 'dashboard.startProcess.title' | translate }}\n          </h3>\n\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"table-responsive\">\n            <table class=\"table m-0\">\n              <tr\n                *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                (click)=\"selectProcess(processDocumentDefinition)\"\n                style=\"cursor: pointer\"\n              >\n                <td>{{ processDocumentDefinition.processName }}</td>\n              </tr>\n            </table>\n          </div>\n        </div>\n\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n            {{ 'cta.close' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<valtimo-dossier-process-start-modal\n  #processStartModal\n  (formFlowComplete)=\"onFormFlowComplete()\"\n></valtimo-dossier-process-start-modal>\n", styles: ["/*!\n * Copyright 2015-2023 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: function () { return [{ type: i2$1.DocumentService }, { type: DossierListService }]; }, propDecorators: { processStart: [{
+            args: [{ selector: 'valtimo-dossier-list-actions', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\">\n  <div\n    class=\"modal fade\"\n    id=\"startProcess\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"startProcessLabel\"\n    aria-hidden=\"true\"\n  >\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"startProcessLabel\">\n            {{ 'dashboard.startProcess.title' | translate }}\n          </h3>\n\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"table-responsive\">\n            <table class=\"table m-0\">\n              <tr\n                *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                (click)=\"selectProcess(processDocumentDefinition)\"\n                style=\"cursor: pointer\"\n              >\n                <td>{{ processDocumentDefinition.processName }}</td>\n              </tr>\n            </table>\n          </div>\n        </div>\n\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n            {{ 'cta.close' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<valtimo-dossier-process-start-modal\n  #processStartModal\n  (formFlowComplete)=\"onFormFlowComplete()\"\n></valtimo-dossier-process-start-modal>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.DocumentService }, { type: DossierListService }], propDecorators: { processStart: [{
                 type: ViewChild,
                 args: ['processStartModal']
             }], loading: [{
@@ -3202,7 +2976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3217,7 +2991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class DossierListComponent {
-    constructor(assigneeService, breadcrumbService, bulkAssignService, columnService, configService, documentService, listService, pageTitleService, paginationService, parameterService, route, router, searchService, translateService, permissionService) {
+    constructor(assigneeService, breadcrumbService, bulkAssignService, columnService, configService, documentService, listService, pageTitleService, paginationService, parameterService, route, router, searchService, translateService, permissionService, statusService) {
         this.assigneeService = assigneeService;
         this.breadcrumbService = breadcrumbService;
         this.bulkAssignService = bulkAssignService;
@@ -3233,51 +3007,35 @@ class DossierListComponent {
         this.searchService = searchService;
         this.translateService = translateService;
         this.permissionService = permissionService;
+        this.statusService = statusService;
         this.activeTab = null;
         this.loadingFields = true;
         this.loadingPagination = true;
         this.loadingSearchFields = true;
         this.loadingAssigneeFilter = true;
         this.loadingDocumentItems = true;
+        this.loadingStatuses = true;
         this.visibleDossierTabs = null;
-        this.defaultTabs = [
-            DossierListTab.ALL,
-            DossierListTab.MINE,
-            DossierListTab.OPEN,
-        ];
-        this.tableTranslations = {
-            select: {
-                single: 'dossier.select.single',
-                multiple: 'dossier.select.multiple',
-            },
-            pagination: {
-                itemsPerPage: 'dossier.pagination.itemsPerPage',
-                totalItem: 'dossier.pagination.totalItem',
-                totalItems: 'dossier.pagination.totalItems',
-            },
-        };
-        this.noResultsMessage$ = new BehaviorSubject({
-            description: 'dossier.noResults.ALL.description',
-            isSearchResult: false,
-            title: 'dossier.noResults.ALL.title',
-        });
+        this.defaultTabs = DEFAULT_DOSSIER_LIST_TABS;
+        this.tableTranslations = DOSSIER_LIST_TABLE_TRANSLATIONS;
+        this.noResultsMessage$ = new BehaviorSubject(DOSSIER_LIST_NO_RESULTS_MESSAGE);
         this.showAssignModal$ = new BehaviorSubject(false);
         this.showChangePageModal$ = new BehaviorSubject(false);
         this.showChangeTabModal$ = new BehaviorSubject(false);
-        this.searchFields$ = this.searchService.documentSearchFields$.pipe(tap(() => {
-            this.loadingSearchFields = false;
-        }));
+        this.searchFields$ = this.searchService.documentSearchFields$.pipe(tap(() => (this.loadingSearchFields = false)));
+        this.statuses$ = this.statusService.caseStatuses$.pipe(tap(() => (this.loadingStatuses = false)));
+        this.selectedStatuses$ = this.statusService.selectedCaseStatuses$;
         this.documentDefinitionName$ = this.listService.documentDefinitionName$;
-        this.canCreateDocument$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.permissionService.requestPermission(CAN_CREATE_CASE_PERMISSION, {
-            resource: DOSSIER_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocumentDefinition,
-            identifier: documentDefinitionName,
-        })));
         this.selectedDocumentIds$ = new BehaviorSubject([]);
         this.schema$ = this.listService.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.documentService.getDocumentDefinition(documentDefinitionName)), map(documentDefinition => documentDefinition?.schema), tap(schema => {
             if (schema?.title) {
                 this.pageTitleService.setCustomPageTitle(schema?.title, true);
             }
         }));
+        this.canCreateDocument$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.permissionService.requestPermission(CAN_CREATE_CASE_PERMISSION, {
+            resource: DOSSIER_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocumentDefinition,
+            identifier: documentDefinitionName,
+        })));
         this.searchFieldValues$ = this.parameterService.searchFieldValues$;
         this.assigneeFilter$ = this.assigneeService.assigneeFilter$.pipe(tap(assigneeFilter => (this.activeTab = assigneeFilter)));
         this.paginationChange$ = new BehaviorSubject(null);
@@ -3297,20 +3055,29 @@ class DossierListComponent {
                 this.paginationService.setPagination(columns);
             });
         }));
-        this.paginatorConfig = { ...DEFAULT_PAGINATOR_CONFIG, itemsPerPageOptions: [1, 2, 3, 4, 10] };
+        this.showStatusSelector$ = this.statusService.showStatusSelector$;
+        this._statusField = {
+            label: 'document.status',
+            key: 'internalStatus',
+            viewType: ViewType.TAGS,
+            sortable: true,
+        };
         this.fields$ = combineLatest([
             this._canHaveAssignee$,
             this._columns$,
             this._hasEnvColumnConfig$,
             this._hasApiColumnConfig$,
+            this.statuses$,
             this.translateService.stream('key'),
         ]).pipe(tap(([canHaveAssignee]) => {
             this.canHaveAssignee = canHaveAssignee;
-        }), map(([canHaveAssignee, columns, hasEnvConfig, hasApiConfig]) => {
+        }), map(([canHaveAssignee, columns, hasEnvConfig, hasApiConfig, statuses]) => {
             const filteredAssigneeColumns = this.assigneeService.filterAssigneeColumns(columns, canHaveAssignee);
             const listFields = this.columnService.mapDefinitionColumnsToListFields(filteredAssigneeColumns, hasEnvConfig, hasApiConfig);
             const fieldsToReturn = this.assigneeService.addAssigneeListField(columns, listFields, canHaveAssignee);
-            return fieldsToReturn;
+            return statuses.some((status) => status.key !== CASES_WITHOUT_STATUS_KEY) && !hasApiConfig
+                ? [...fieldsToReturn, this._statusField]
+                : fieldsToReturn;
         }), tap(listFields => {
             const defaultListField = listFields.find(field => field.default);
             // set default sort state if no pagination query parameters for sorting are available
@@ -3336,39 +3103,45 @@ class DossierListComponent {
             this._documentSearchRequest$,
             this.assigneeFilter$,
             this.searchFieldValues$,
+            this.statusService.selectedCaseStatuses$,
             this.listService.forceRefresh$,
             this._hasEnvColumnConfig$,
             this._hasApiColumnConfig$,
-        ])), distinctUntilChanged(([prevSearchRequest, prevAssigneeFilter, prevSearchFieldValues, prevForceRefresh], [currSearchRequest, currAssigneeFilter, currSearchFieldValues, currForceRefresh]) => isEqual({
+        ])), distinctUntilChanged(([prevSearchRequest, prevAssigneeFilter, prevSearchFieldValues, prevSelectedStatuses, prevForceRefresh,], [currSearchRequest, currAssigneeFilter, currSearchFieldValues, currSelectedStatuses, currForceRefresh,]) => isEqual({
             ...prevSearchRequest,
             assignee: prevAssigneeFilter,
             ...prevSearchFieldValues,
+            ...prevSelectedStatuses.map((status) => status.key),
             forceRefresh: prevForceRefresh,
         }, {
             ...currSearchRequest,
             assignee: currAssigneeFilter,
             ...currSearchFieldValues,
+            ...currSelectedStatuses.map((status) => status.key),
             forceRefresh: currForceRefresh,
-        })), switchMap(([documentSearchRequest, assigneeFilter, searchValues, _, hasEnvColumnConfig, hasApiColumnConfig,]) => {
+        })), switchMap(([documentSearchRequest, assigneeFilter, searchValues, selectedStatuses, _, hasEnvColumnConfig, hasApiColumnConfig,]) => {
             const obsEnv = of(hasEnvColumnConfig);
             const obsApi = of(hasApiColumnConfig);
+            const statusKeys = selectedStatuses.map((status) => status.key === CASES_WITHOUT_STATUS_KEY ? null : status.key);
             if ((Object.keys(searchValues) || []).length > 0) {
                 return forkJoin({
                     documents: hasEnvColumnConfig || !hasApiColumnConfig
-                        ? this.documentService.getDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, this.searchService.mapSearchValuesToFilters(searchValues))
-                        : this.documentService.getSpecifiedDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, this.searchService.mapSearchValuesToFilters(searchValues)),
+                        ? this.documentService.getDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, this.searchService.mapSearchValuesToFilters(searchValues), statusKeys)
+                        : this.documentService.getSpecifiedDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, this.searchService.mapSearchValuesToFilters(searchValues), statusKeys),
                     hasEnvColumnConfig: obsEnv,
                     hasApiColumnConfig: obsApi,
                     isSearchResult: of(true),
+                    selectedStatuses: of(selectedStatuses),
                 });
             }
             return forkJoin({
                 documents: hasEnvColumnConfig || !hasApiColumnConfig
-                    ? this.documentService.getDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter)
-                    : this.documentService.getSpecifiedDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter),
+                    ? this.documentService.getDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, undefined, statusKeys)
+                    : this.documentService.getSpecifiedDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, undefined, statusKeys),
                 hasEnvColumnConfig: obsEnv,
                 hasApiColumnConfig: obsApi,
                 isSearchResult: of(false),
+                selectedStatuses: of(selectedStatuses),
             });
         }), switchMap(res => combineLatest([
             of(res),
@@ -3391,7 +3164,27 @@ class DossierListComponent {
             this.paginationService.setCollectionSize(res.documents);
             this.paginationService.checkPage(res.documents);
             this.updateNoResultsMessage(res.isSearchResult);
-            return this.listService.mapDocuments(res.documents, res.hasEnvColumnConfig, res.hasApiColumnConfig);
+            return {
+                data: this.listService.mapDocuments(res.documents, res.hasEnvColumnConfig, res.hasApiColumnConfig),
+                statuses: res.selectedStatuses,
+            };
+        }), map(res => {
+            if (!Array.isArray(res.data))
+                return res.data;
+            return res.data.map(item => {
+                const status = res.statuses.find((status) => status.key === item.internalStatus || status.key === item.status);
+                if (!status)
+                    return item;
+                return {
+                    ...item,
+                    tags: [
+                        {
+                            content: status.title,
+                            type: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(status.color),
+                        },
+                    ],
+                };
+            });
         }), tap(() => {
             this.loadingAssigneeFilter = false;
             this.loadingDocumentItems = false;
@@ -3496,6 +3289,9 @@ class DossierListComponent {
     forceRefresh() {
         this.listService.forceRefresh();
     }
+    onSelectedStatusesChange(statuses) {
+        this.statusService.setSelectedStatuses(statuses);
+    }
     openDocumentDefinitionNameSubscription() {
         this._documentDefinitionNameSubscription = this.route.params
             .pipe(map((params) => params?.documentDefinitionName), filter(docDefName => !!docDefName), distinctUntilChanged())
@@ -3505,10 +3301,10 @@ class DossierListComponent {
                 this.parameterService.clearSearchFieldValues();
             }
             this._previousDocumentDefinitionName = documentDefinitonName;
-            this.setLoading();
             this.paginationService.clearPagination();
             this.assigneeService.resetAssigneeFilter();
             this.listService.setDocumentDefinitionName(documentDefinitonName);
+            this.setLoading();
         });
     }
     setLoading() {
@@ -3517,6 +3313,7 @@ class DossierListComponent {
         this.loadingSearchFields = true;
         this.loadingAssigneeFilter = true;
         this.loadingDocumentItems = true;
+        this.loadingStatuses = true;
     }
     setVisibleTabs() {
         this.visibleDossierTabs = this.configService.config?.visibleDossierListTabs || null;
@@ -3534,17 +3331,18 @@ class DossierListComponent {
                 title: `dossier.noResults.${this.activeTab ?? 'ALL'}.title`,
             });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListComponent, deps: [{ token: DossierListAssigneeService }, { token: i3$1.BreadcrumbService }, { token: DossierBulkAssignService }, { token: DossierColumnService }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: DossierListService }, { token: i3$1.PageTitleService }, { token: DossierListPaginationService }, { token: DossierParameterService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierListSearchService }, { token: i6.TranslateService }, { token: i7.PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierListComponent, selector: "valtimo-dossier-list", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListComponent, deps: [{ token: DossierListAssigneeService }, { token: i2$3.BreadcrumbService }, { token: DossierBulkAssignService }, { token: DossierColumnService }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: DossierListService }, { token: i2$3.PageTitleService }, { token: DossierListPaginationService }, { token: DossierParameterService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierListSearchService }, { token: i6.TranslateService }, { token: i7.PermissionService }, { token: DossierListStatusService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierListComponent, selector: "valtimo-dossier-list", providers: [
             DossierListService,
             DossierColumnService,
             DossierListAssigneeService,
             DossierParameterService,
             DossierListPaginationService,
             DossierListSearchService,
-        ], viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }, { propertyName: "listActionsComponent", first: true, predicate: DossierListActionsComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: Tabs, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    documentItems: documentItems$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n    searchFields: searchFields$ | async,\n    schema: schema$ | async,\n    showAssignModal: showAssignModal$ | async,\n    selectedDocumentIds: selectedDocumentIds$ | async,\n    loaded:\n      !loadingFields &&\n      !loadingPagination &&\n      !loadingSearchFields &&\n      !loadingAssigneeFilter &&\n      !loadingDocumentItems\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid\">\n      <div class=\"col-12 px-0 mb-5\">\n        <valtimo-dossier-list-actions\n          [loading]=\"!obs.loaded\"\n          (formFlowComplete)=\"forceRefresh()\"\n        ></valtimo-dossier-list-actions>\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n\n        <ng-container *ngIf=\"obs.loaded; else loading\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"bulkAssignModal; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changePageModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changeTabModal\"></ng-container>\n</ng-container>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [searchFields]=\"obs.searchFields\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [defaultValues]=\"searchFieldValues$ | async\"\n      [inputDisabled]=\"!obs.loaded\"\n    ></valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [initialSortState]=\"pagination.sort\"\n    [items]=\"obs.documentItems\"\n    [pagination]=\"pagination\"\n    paginationIdentifier=\"dossierList\"\n    lockedTooltipTranslationKey=\"dossier.rowLocked\"\n    [showSelectionColumn]=\"canHaveAssignee\"\n    [tableTranslations]=\"tableTranslations\"\n    (paginationClicked)=\"pageChange($event)\"\n    (paginationSet)=\"pageSizeChange($event)\"\n    (rowClicked)=\"rowClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showAssignModal()\">\n        {{ 'dossier.bulkAssign.assign' | translate }}\n      </button>\n    </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"dossierListActions\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"obs.noResultsMessage.isSearchResult ? null : dossierListActions\"\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | translate\"\n    ></valtimo-no-results>\n\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs\n      *ngIf=\"!visibleDossierTabs; else configuredTabs\"\n      type=\"contained\"\n      data-carbon-theme=\"g10\"\n      class=\"dossier-list-tabs\"\n    >\n      <cds-tab\n        *ngFor=\"let tab of defaultTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #configuredTabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs type=\"contained\" class=\"dossier-list-tabs\">\n      <cds-tab\n        *ngFor=\"let tab of visibleDossierTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading\n  ><valtimo-carbon-list [loading]=\"true\">\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div> </valtimo-carbon-list\n></ng-template>\n\n<ng-template #bulkAssignModal let-obs=\"obs\">\n  <valtimo-dossier-bulk-assign-modal\n    [documentIds]=\"obs.selectedDocumentIds\"\n    [open]=\"obs.showAssignModal\"\n    (closeEvent)=\"onCloseEvent($event, obs.selectedDocumentIds)\"\n  ></valtimo-dossier-bulk-assign-modal>\n</ng-template>\n\n<ng-template #changePageModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changePageModal.confirm\"\n    contentTranslationKey=\"dossier.changePageModal.content\"\n    [outputOnConfirm]=\"paginationChange$ | async\"\n    [showModalSubject$]=\"showChangePageModal$\"\n    titleTranslationKey=\"dossier.changePageModal.title\"\n    (confirmEvent)=\"onChangePageConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #changeTabModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changeTabModal.confirm\"\n    contentTranslationKey=\"dossier.changeTabModal.content\"\n    [outputOnConfirm]=\"tabChange$ | async\"\n    [showModalSubject$]=\"showChangeTabModal$\"\n    titleTranslationKey=\"dossier.changeTabModal.title\"\n    (cancelEvent)=\"onChangeTabCancel()\"\n    (confirmEvent)=\"onChangeTabConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #dossierListActions>\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"listActionsComponent?.disableStartDossierButton$ | async\"\n    (click)=\"startDossier()\"\n  >\n    {{ 'Start Dossier' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: [".dossier-list-tabs cds-tab{display:none}\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields", "documentDefinitionName", "setValuesSubject$", "defaultValues", "inputDisabled"], outputs: ["doSearch"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent", "cancelEvent"] }, { kind: "component", type: i4.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i4.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i3$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow"] }, { kind: "component", type: i3$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: ["documentIds", "open"], outputs: ["closeEvent"] }, { kind: "component", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: ["loading"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+            DossierListStatusService,
+        ], viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }, { propertyName: "listActionsComponent", first: true, predicate: DossierListActionsComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: Tabs, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    documentItems: documentItems$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n    searchFields: searchFields$ | async,\n    schema: schema$ | async,\n    showAssignModal: showAssignModal$ | async,\n    selectedDocumentIds: selectedDocumentIds$ | async,\n    statuses: statuses$ | async,\n    selectedStatuses: selectedStatuses$ | async,\n    showStatusSelector: showStatusSelector$ | async,\n    loaded:\n      !loadingFields &&\n      !loadingPagination &&\n      !loadingSearchFields &&\n      !loadingAssigneeFilter &&\n      !loadingDocumentItems\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid\">\n      <div class=\"col-12 px-0 mb-5\">\n        <valtimo-dossier-list-actions\n          [loading]=\"!obs.loaded\"\n          (formFlowComplete)=\"forceRefresh()\"\n        ></valtimo-dossier-list-actions>\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n\n        <ng-container *ngIf=\"obs.loaded; else loading\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"bulkAssignModal; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changePageModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changeTabModal\"></ng-container>\n</ng-container>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [searchFields]=\"obs.searchFields\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [defaultValues]=\"searchFieldValues$ | async\"\n      [inputDisabled]=\"!obs.loaded\"\n      [externalSearchField]=\"obs.showStatusSelector\"\n    >\n      <valtimo-status-selector\n        *ngIf=\"obs.showStatusSelector\"\n        [statuses]=\"obs.statuses\"\n        [selectedStatuses]=\"obs.selectedStatuses\"\n        [disabled]=\"!obs.loaded\"\n        (selectedStatusesChangeEvent)=\"onSelectedStatusesChange($event)\"\n      ></valtimo-status-selector>\n    </valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [initialSortState]=\"pagination.sort\"\n    [items]=\"obs.documentItems\"\n    [pagination]=\"pagination\"\n    paginationIdentifier=\"dossierList\"\n    lockedTooltipTranslationKey=\"dossier.rowLocked\"\n    [showSelectionColumn]=\"canHaveAssignee\"\n    [tableTranslations]=\"tableTranslations\"\n    (paginationClicked)=\"pageChange($event)\"\n    (paginationSet)=\"pageSizeChange($event)\"\n    (rowClicked)=\"rowClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showAssignModal()\">\n        {{ 'dossier.bulkAssign.assign' | translate }}\n      </button>\n    </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"dossierListActions\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"obs.noResultsMessage.isSearchResult ? null : dossierListActions\"\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | translate\"\n    ></valtimo-no-results>\n\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs\n      *ngIf=\"!visibleDossierTabs; else configuredTabs\"\n      type=\"contained\"\n      class=\"dossier-list-tabs\"\n    >\n      <cds-tab\n        *ngFor=\"let tab of defaultTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #configuredTabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs type=\"contained\" class=\"dossier-list-tabs\">\n      <cds-tab\n        *ngFor=\"let tab of visibleDossierTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading\n  ><valtimo-carbon-list [loading]=\"true\">\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div> </valtimo-carbon-list\n></ng-template>\n\n<ng-template #bulkAssignModal let-obs=\"obs\">\n  <valtimo-dossier-bulk-assign-modal\n    [documentIds]=\"obs.selectedDocumentIds\"\n    [open]=\"obs.showAssignModal\"\n    (closeEvent)=\"onCloseEvent($event, obs.selectedDocumentIds)\"\n  ></valtimo-dossier-bulk-assign-modal>\n</ng-template>\n\n<ng-template #changePageModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changePageModal.confirm\"\n    contentTranslationKey=\"dossier.changePageModal.content\"\n    [outputOnConfirm]=\"paginationChange$ | async\"\n    [showModalSubject$]=\"showChangePageModal$\"\n    titleTranslationKey=\"dossier.changePageModal.title\"\n    (confirmEvent)=\"onChangePageConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #changeTabModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changeTabModal.confirm\"\n    contentTranslationKey=\"dossier.changeTabModal.content\"\n    [outputOnConfirm]=\"tabChange$ | async\"\n    [showModalSubject$]=\"showChangeTabModal$\"\n    titleTranslationKey=\"dossier.changeTabModal.title\"\n    (cancelEvent)=\"onChangeTabCancel()\"\n    (confirmEvent)=\"onChangeTabConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #dossierListActions>\n  <button\n    *ngIf=\"canCreateDocument$ | async\"\n    cdsButton=\"primary\"\n    [disabled]=\"listActionsComponent?.disableStartDossierButton$ | async\"\n    (click)=\"startDossier()\"\n  >\n    {{ 'Start Dossier' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: [".dossier-list-tabs cds-tab{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields", "documentDefinitionName", "setValuesSubject$", "defaultValues", "inputDisabled", "externalSearchField"], outputs: ["doSearch"] }, { kind: "directive", type: i10$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i10$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.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: i10$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i10$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i2$3.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i2$3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: i2$3.StatusSelectorComponent, selector: "valtimo-status-selector", inputs: ["statuses", "selectedStatuses", "carbonTheme", "disabled"], outputs: ["selectedStatusesChangeEvent"] }, { kind: "component", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: ["documentIds", "open"], outputs: ["closeEvent"] }, { kind: "component", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: ["loading"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-list', providers: [
                         DossierListService,
@@ -3553,8 +3351,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DossierParameterService,
                         DossierListPaginationService,
                         DossierListSearchService,
-                    ], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    documentItems: documentItems$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n    searchFields: searchFields$ | async,\n    schema: schema$ | async,\n    showAssignModal: showAssignModal$ | async,\n    selectedDocumentIds: selectedDocumentIds$ | async,\n    loaded:\n      !loadingFields &&\n      !loadingPagination &&\n      !loadingSearchFields &&\n      !loadingAssigneeFilter &&\n      !loadingDocumentItems\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid\">\n      <div class=\"col-12 px-0 mb-5\">\n        <valtimo-dossier-list-actions\n          [loading]=\"!obs.loaded\"\n          (formFlowComplete)=\"forceRefresh()\"\n        ></valtimo-dossier-list-actions>\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n\n        <ng-container *ngIf=\"obs.loaded; else loading\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"bulkAssignModal; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changePageModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changeTabModal\"></ng-container>\n</ng-container>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [searchFields]=\"obs.searchFields\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [defaultValues]=\"searchFieldValues$ | async\"\n      [inputDisabled]=\"!obs.loaded\"\n    ></valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [initialSortState]=\"pagination.sort\"\n    [items]=\"obs.documentItems\"\n    [pagination]=\"pagination\"\n    paginationIdentifier=\"dossierList\"\n    lockedTooltipTranslationKey=\"dossier.rowLocked\"\n    [showSelectionColumn]=\"canHaveAssignee\"\n    [tableTranslations]=\"tableTranslations\"\n    (paginationClicked)=\"pageChange($event)\"\n    (paginationSet)=\"pageSizeChange($event)\"\n    (rowClicked)=\"rowClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showAssignModal()\">\n        {{ 'dossier.bulkAssign.assign' | translate }}\n      </button>\n    </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"dossierListActions\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"obs.noResultsMessage.isSearchResult ? null : dossierListActions\"\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | translate\"\n    ></valtimo-no-results>\n\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs\n      *ngIf=\"!visibleDossierTabs; else configuredTabs\"\n      type=\"contained\"\n      data-carbon-theme=\"g10\"\n      class=\"dossier-list-tabs\"\n    >\n      <cds-tab\n        *ngFor=\"let tab of defaultTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #configuredTabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs type=\"contained\" class=\"dossier-list-tabs\">\n      <cds-tab\n        *ngFor=\"let tab of visibleDossierTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading\n  ><valtimo-carbon-list [loading]=\"true\">\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div> </valtimo-carbon-list\n></ng-template>\n\n<ng-template #bulkAssignModal let-obs=\"obs\">\n  <valtimo-dossier-bulk-assign-modal\n    [documentIds]=\"obs.selectedDocumentIds\"\n    [open]=\"obs.showAssignModal\"\n    (closeEvent)=\"onCloseEvent($event, obs.selectedDocumentIds)\"\n  ></valtimo-dossier-bulk-assign-modal>\n</ng-template>\n\n<ng-template #changePageModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changePageModal.confirm\"\n    contentTranslationKey=\"dossier.changePageModal.content\"\n    [outputOnConfirm]=\"paginationChange$ | async\"\n    [showModalSubject$]=\"showChangePageModal$\"\n    titleTranslationKey=\"dossier.changePageModal.title\"\n    (confirmEvent)=\"onChangePageConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #changeTabModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changeTabModal.confirm\"\n    contentTranslationKey=\"dossier.changeTabModal.content\"\n    [outputOnConfirm]=\"tabChange$ | async\"\n    [showModalSubject$]=\"showChangeTabModal$\"\n    titleTranslationKey=\"dossier.changeTabModal.title\"\n    (cancelEvent)=\"onChangeTabCancel()\"\n    (confirmEvent)=\"onChangeTabConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #dossierListActions>\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"listActionsComponent?.disableStartDossierButton$ | async\"\n    (click)=\"startDossier()\"\n  >\n    {{ 'Start Dossier' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: [".dossier-list-tabs cds-tab{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: DossierListAssigneeService }, { type: i3$1.BreadcrumbService }, { type: DossierBulkAssignService }, { type: DossierColumnService }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: DossierListService }, { type: i3$1.PageTitleService }, { type: DossierListPaginationService }, { type: DossierParameterService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierListSearchService }, { type: i6.TranslateService }, { type: i7.PermissionService }]; }, propDecorators: { carbonList: [{
+                        DossierListStatusService,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    documentItems: documentItems$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n    searchFields: searchFields$ | async,\n    schema: schema$ | async,\n    showAssignModal: showAssignModal$ | async,\n    selectedDocumentIds: selectedDocumentIds$ | async,\n    statuses: statuses$ | async,\n    selectedStatuses: selectedStatuses$ | async,\n    showStatusSelector: showStatusSelector$ | async,\n    loaded:\n      !loadingFields &&\n      !loadingPagination &&\n      !loadingSearchFields &&\n      !loadingAssigneeFilter &&\n      !loadingDocumentItems\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid\">\n      <div class=\"col-12 px-0 mb-5\">\n        <valtimo-dossier-list-actions\n          [loading]=\"!obs.loaded\"\n          (formFlowComplete)=\"forceRefresh()\"\n        ></valtimo-dossier-list-actions>\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n\n        <ng-container *ngIf=\"obs.loaded; else loading\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"bulkAssignModal; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changePageModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changeTabModal\"></ng-container>\n</ng-container>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [searchFields]=\"obs.searchFields\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [defaultValues]=\"searchFieldValues$ | async\"\n      [inputDisabled]=\"!obs.loaded\"\n      [externalSearchField]=\"obs.showStatusSelector\"\n    >\n      <valtimo-status-selector\n        *ngIf=\"obs.showStatusSelector\"\n        [statuses]=\"obs.statuses\"\n        [selectedStatuses]=\"obs.selectedStatuses\"\n        [disabled]=\"!obs.loaded\"\n        (selectedStatusesChangeEvent)=\"onSelectedStatusesChange($event)\"\n      ></valtimo-status-selector>\n    </valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [initialSortState]=\"pagination.sort\"\n    [items]=\"obs.documentItems\"\n    [pagination]=\"pagination\"\n    paginationIdentifier=\"dossierList\"\n    lockedTooltipTranslationKey=\"dossier.rowLocked\"\n    [showSelectionColumn]=\"canHaveAssignee\"\n    [tableTranslations]=\"tableTranslations\"\n    (paginationClicked)=\"pageChange($event)\"\n    (paginationSet)=\"pageSizeChange($event)\"\n    (rowClicked)=\"rowClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showAssignModal()\">\n        {{ 'dossier.bulkAssign.assign' | translate }}\n      </button>\n    </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"dossierListActions\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"obs.noResultsMessage.isSearchResult ? null : dossierListActions\"\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | translate\"\n    ></valtimo-no-results>\n\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs\n      *ngIf=\"!visibleDossierTabs; else configuredTabs\"\n      type=\"contained\"\n      class=\"dossier-list-tabs\"\n    >\n      <cds-tab\n        *ngFor=\"let tab of defaultTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #configuredTabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs type=\"contained\" class=\"dossier-list-tabs\">\n      <cds-tab\n        *ngFor=\"let tab of visibleDossierTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading\n  ><valtimo-carbon-list [loading]=\"true\">\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div> </valtimo-carbon-list\n></ng-template>\n\n<ng-template #bulkAssignModal let-obs=\"obs\">\n  <valtimo-dossier-bulk-assign-modal\n    [documentIds]=\"obs.selectedDocumentIds\"\n    [open]=\"obs.showAssignModal\"\n    (closeEvent)=\"onCloseEvent($event, obs.selectedDocumentIds)\"\n  ></valtimo-dossier-bulk-assign-modal>\n</ng-template>\n\n<ng-template #changePageModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changePageModal.confirm\"\n    contentTranslationKey=\"dossier.changePageModal.content\"\n    [outputOnConfirm]=\"paginationChange$ | async\"\n    [showModalSubject$]=\"showChangePageModal$\"\n    titleTranslationKey=\"dossier.changePageModal.title\"\n    (confirmEvent)=\"onChangePageConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #changeTabModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changeTabModal.confirm\"\n    contentTranslationKey=\"dossier.changeTabModal.content\"\n    [outputOnConfirm]=\"tabChange$ | async\"\n    [showModalSubject$]=\"showChangeTabModal$\"\n    titleTranslationKey=\"dossier.changeTabModal.title\"\n    (cancelEvent)=\"onChangeTabCancel()\"\n    (confirmEvent)=\"onChangeTabConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #dossierListActions>\n  <button\n    *ngIf=\"canCreateDocument$ | async\"\n    cdsButton=\"primary\"\n    [disabled]=\"listActionsComponent?.disableStartDossierButton$ | async\"\n    (click)=\"startDossier()\"\n  >\n    {{ 'Start Dossier' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: [".dossier-list-tabs cds-tab{display:none}\n/*!\n * Copyright 2015-2024 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: DossierListAssigneeService }, { type: i2$3.BreadcrumbService }, { type: DossierBulkAssignService }, { type: DossierColumnService }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: DossierListService }, { type: i2$3.PageTitleService }, { type: DossierListPaginationService }, { type: DossierParameterService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierListSearchService }, { type: i6.TranslateService }, { type: i7.PermissionService }, { type: DossierListStatusService }], propDecorators: { carbonList: [{
                 type: ViewChild,
                 args: [CarbonListComponent]
             }], listActionsComponent: [{
@@ -3566,7 +3365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3660,16 +3459,16 @@ class DossierUpdateComponent {
     returnZero() {
         return 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierUpdateComponent, deps: [{ token: i3.TaskService }, { token: i2$1.DocumentService }, { token: i1$1.ActivatedRoute }, { token: i3$3.ToastrService }, { token: i5$1.Location }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierUpdateComponent, selector: "valtimo-dossier-update", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i3$1.CamundaFormComponent, selector: "valtimo-camunda-form", inputs: ["componentName", "formFields"], outputs: ["submitted"] }, { kind: "pipe", type: i5$1.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierUpdateComponent, deps: [{ token: i3.TaskService }, { token: i2$1.DocumentService }, { token: i1$1.ActivatedRoute }, { token: i3$2.ToastrService }, { token: i5$1.Location }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierUpdateComponent, selector: "valtimo-dossier-update", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i2$3.CamundaFormComponent, selector: "valtimo-camunda-form", inputs: ["componentName", "formFields"], outputs: ["submitted"] }, { kind: "pipe", type: i5$1.KeyValuePipe, name: "keyvalue" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierUpdateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierUpdateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-update', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i3.TaskService }, { type: i2$1.DocumentService }, { type: i1$1.ActivatedRoute }, { type: i3$3.ToastrService }, { type: i5$1.Location }, { type: DossierService }]; } });
+            args: [{ selector: 'valtimo-dossier-update', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i3.TaskService }, { type: i2$1.DocumentService }, { type: i1$1.ActivatedRoute }, { type: i3$2.ToastrService }, { type: i5$1.Location }, { type: DossierService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3722,11 +3521,11 @@ const routes = [
     },
 ];
 class DossierRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DossierRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: DossierRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule.forChild(routes)],
@@ -3735,7 +3534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3750,11 +3549,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class TabTranslatePipeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTranslatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TabTranslatePipeModule, declarations: [TabTranslatePipe], imports: [TranslateModule], exports: [TabTranslatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTranslatePipeModule, imports: [TranslateModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabTranslatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TabTranslatePipeModule, declarations: [TabTranslatePipe], imports: [TranslateModule], exports: [TabTranslatePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabTranslatePipeModule, imports: [TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabTranslatePipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabTranslatePipeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TranslateModule],
@@ -3764,7 +3563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3780,7 +3579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3796,7 +3595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3824,8 +3623,8 @@ class DossierModule {
             ],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DossierModule, declarations: [DossierBulkAssignModalComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: DossierModule, declarations: [DossierBulkAssignModalComponent,
             DossierListComponent,
             DossierListActionsComponent,
             DossierDetailComponent,
@@ -3833,15 +3632,12 @@ class DossierModule {
             DossierDetailTabProgressComponent,
             DossierDetailTabAuditComponent,
             DossierDetailTabDocumentsComponent,
-            DossierDetailTabContactMomentsComponent,
-            DossierDetailTabZaakobjectenComponent,
             DossierDetailTabNotesComponent,
             DossierUpdateComponent,
             DossierProcessStartModalComponent,
             DossierSupportingProcessStartModalComponent,
-            DossierDetailTabObjectTypeComponent,
-            DossierDetailTabDocumentenApiDocumentsComponent,
             DossierDetailTabS3DocumentsComponent,
+            DossierDetailTabNotFoundComponent,
             DossierAssignUserComponent,
             NoteModalComponent,
             DossierDetailTabFormioComponent], imports: [CommonModule,
@@ -3874,7 +3670,6 @@ class DossierModule {
             VModalModule,
             TitleModule,
             ButtonModule,
-            DocumentenApiMetadataModalModule,
             SearchableDropdownSelectModule,
             SearchFieldsModule,
             PageModule,
@@ -3885,7 +3680,7 @@ class DossierModule {
             LoadingModule,
             ButtonModule$1,
             IconModule,
-            FormLinkModule,
+            ProcessLinkModule,
             ModalModule$1,
             SelectModule$1,
             ConfirmationModalModule,
@@ -3895,8 +3690,13 @@ class DossierModule {
             TabTranslatePipeModule,
             CarbonListModule,
             IsArrayPipe,
-            SkeletonModule], exports: [DossierListComponent, DossierDetailComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierModule, imports: [CommonModule,
+            SkeletonModule,
+            StatusSelectorComponent,
+            RenderInPageHeaderDirectiveModule,
+            TagModule,
+            DialogModule,
+            ValtimoCdsOverflowButtonDirectiveModule], exports: [DossierListComponent, DossierDetailComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierModule, imports: [CommonModule,
             DossierRoutingModule,
             ListModule,
             WidgetModule,
@@ -3934,7 +3734,6 @@ class DossierModule {
             VModalModule,
             TitleModule,
             ButtonModule,
-            DocumentenApiMetadataModalModule,
             SearchableDropdownSelectModule,
             SearchFieldsModule,
             PageModule,
@@ -3945,7 +3744,7 @@ class DossierModule {
             LoadingModule,
             ButtonModule$1,
             IconModule,
-            FormLinkModule,
+            ProcessLinkModule,
             ModalModule$1,
             SelectModule$1,
             ConfirmationModalModule,
@@ -3954,9 +3753,14 @@ class DossierModule {
             ComboBoxModule,
             TabTranslatePipeModule,
             CarbonListModule,
-            SkeletonModule] }); }
+            SkeletonModule,
+            StatusSelectorComponent,
+            RenderInPageHeaderDirectiveModule,
+            TagModule,
+            DialogModule,
+            ValtimoCdsOverflowButtonDirectiveModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -3968,15 +3772,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DossierDetailTabProgressComponent,
                         DossierDetailTabAuditComponent,
                         DossierDetailTabDocumentsComponent,
-                        DossierDetailTabContactMomentsComponent,
-                        DossierDetailTabZaakobjectenComponent,
                         DossierDetailTabNotesComponent,
                         DossierUpdateComponent,
                         DossierProcessStartModalComponent,
                         DossierSupportingProcessStartModalComponent,
-                        DossierDetailTabObjectTypeComponent,
-                        DossierDetailTabDocumentenApiDocumentsComponent,
                         DossierDetailTabS3DocumentsComponent,
+                        DossierDetailTabNotFoundComponent,
                         DossierAssignUserComponent,
                         NoteModalComponent,
                         DossierDetailTabFormioComponent,
@@ -4020,7 +3821,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         VModalModule,
                         TitleModule,
                         ButtonModule,
-                        DocumentenApiMetadataModalModule,
                         SearchableDropdownSelectModule,
                         SearchFieldsModule,
                         PageModule,
@@ -4031,7 +3831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         LoadingModule,
                         ButtonModule$1,
                         IconModule,
-                        FormLinkModule,
+                        ProcessLinkModule,
                         ModalModule$1,
                         SelectModule$1,
                         ConfirmationModalModule,
@@ -4042,13 +3842,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CarbonListModule,
                         IsArrayPipe,
                         SkeletonModule,
+                        StatusSelectorComponent,
+                        RenderInPageHeaderDirectiveModule,
+                        TagModule,
+                        DialogModule,
+                        ValtimoCdsOverflowButtonDirectiveModule,
                     ],
                     exports: [DossierListComponent, DossierDetailComponent],
                 }]
         }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4070,5 +3875,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiTabType, CASE_TAB_TOKEN, DEFAULT_TABS, DEFAULT_TAB_COMPONENTS, DefaultTabs, DossierBulkAssignModalComponent, DossierBulkAssignService, DossierColumnService, DossierDetailComponent, DossierDetailTabAuditComponent, DossierDetailTabContactMomentsComponent, DossierDetailTabDocumentsComponent, DossierDetailTabNotesComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierDetailTabZaakobjectenComponent, DossierListAssigneeService, DossierListComponent, DossierListPaginationService, DossierListSearchService, DossierListService, DossierModule, DossierParameterService, DossierService, DossierTabApiService, DossierTabService, TAB_MAP, TabImpl, TabLoaderImpl, ZaakobjectenService };
+export { ApiTabType, CASE_TAB_TOKEN, CASE_WITHOUT_STATUS_STATUS, DEFAULT_DOSSIER_LIST_TABS, DEFAULT_TABS, DEFAULT_TAB_COMPONENTS, DOSSIER_LIST_NO_RESULTS_MESSAGE, DOSSIER_LIST_TABLE_TRANSLATIONS, DefaultTabs, DossierBulkAssignModalComponent, DossierBulkAssignService, DossierColumnService, DossierDetailComponent, DossierDetailTabAuditComponent, DossierDetailTabDocumentsComponent, DossierDetailTabNotesComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierListAssigneeService, DossierListComponent, DossierListPaginationService, DossierListSearchService, DossierListService, DossierListStatusService, DossierModule, DossierParameterService, DossierService, DossierTabApiService, DossierTabService, StartModalService, TAB_MAP, TabImpl, TabLoaderImpl };
 //# sourceMappingURL=valtimo-dossier.mjs.map