@valtimo/dossier 11.1.5 → 11.2.1

package/fesm2022/valtimo-dossier.mjs

@@ -1,8 +1,8 @@
 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 i5$2 from '@angular/forms';
+import * as i2$3 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, take, map, distinctUntilChanged, combineLatest, Subject, switchMap, tap, filter, Subscription, of, from, startWith, forkJoin } from 'rxjs';
+import { BehaviorSubject, take, map, distinctUntilChanged, combineLatest, Subject, switchMap, tap, filter, Subscription, of, startWith, from, forkJoin, defaultIfEmpty } from 'rxjs';
 import * as i1 from '@valtimo/config';
 import { UploadProvider, DossierListTab, ROLE_USER, ConfigModule, HttpLoaderFactory } from '@valtimo/config';
 import * as i2 from '@angular/common/http';
@@ -13,18 +13,17 @@ import * as i6 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i6$1 from 'ngx-logger';
+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, 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 { 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 moment from 'moment';
-import { catchError, switchMap as switchMap$1, map as map$1, tap as tap$1, take as take$1 } from 'rxjs/operators';
 import * as i2$2 from '@valtimo/process';
 import { ProcessModule } from '@valtimo/process';
 import * as i5 from '@valtimo/form';
 import { FormModule } from '@valtimo/form';
-import * as i6$2 from '@valtimo/security';
+import * as i6$1 from '@valtimo/security';
 import { AuthGuardService } from '@valtimo/security';
 import * as i7 from '@valtimo/access-control';
 import * as i5$1 from '@angular/common';
@@ -32,11 +31,12 @@ 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 } 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$2 from '@valtimo/contact-moment';
+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';
@@ -411,7 +411,7 @@ class DossierListService {
             });
         }
         return documents.content.reduce((acc, curr) => {
-            const propsObject = { id: curr.id };
+            const propsObject = { id: curr.id, locked: curr.locked };
             curr.items?.forEach(item => {
                 propsObject[item.key] = item.value;
             });
@@ -676,12 +676,12 @@ class DossierListPaginationService {
             sort: defaultSortState,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListPaginationService, deps: [{ token: i6$1.NGXLogger }, { token: DossierParameterService }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListPaginationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i6$1.NGXLogger }, { type: DossierParameterService }, { type: DossierService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.NGXLogger }, { type: DossierParameterService }, { type: DossierService }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -1060,14 +1060,11 @@ class DossierDetailTabSummaryComponent {
             .getProcessInstanceTasks(processInstanceId)
             .pipe(switchMap(tasks => combineLatest([
             of(tasks),
-            ...tasks.map(task => this.permissionService.requestPermission(CAN_VIEW_TASK_PERMISSION, {
+            ...(tasks || []).map(task => this.permissionService.requestPermission(CAN_VIEW_TASK_PERMISSION, {
                 resource: TASK_DETAIL_PERMISSION_RESOURCE.task,
                 identifier: task.id,
             })),
-        ])), catchError(() => {
-            this.loadingTasks$.next(false);
-            return of(null);
-        }))
+        ])))
             .subscribe(res => {
             const tasks = res?.[0];
             const permissions = res?.filter((_, index) => index !== 0);
@@ -1083,13 +1080,13 @@ 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$2.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 | isArray: 1) === false\">\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 *ngIf=\"tasks | isArray: 1\">\n          <valtimo-widget *ngFor=\"let task of tasks\">\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" }, { kind: "pipe", type: i3$1.IsArrayPipe, name: "isArray" }], encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 | isArray: 1) === false\">\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 *ngIf=\"tasks | isArray: 1\">\n          <valtimo-widget *ngFor=\"let task of tasks\">\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$2.UserProviderService }, { type: i7.PermissionService }]; }, propDecorators: { taskDetail: [{
+            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: [{
                 type: ViewChild,
                 args: ['taskDetail']
             }] } });
@@ -1113,28 +1110,43 @@ class DossierDetailTabProgressComponent {
     constructor(route, documentService) {
         this.route = route;
         this.documentService = documentService;
-        const snapshot = this.route.snapshot.paramMap;
-        this.documentId = snapshot.get('documentId') || '';
-    }
-    ngOnInit() {
-        this.documentService
-            .findProcessDocumentInstances(this.documentId)
-            .subscribe(processDocumentInstances => {
-            this.processDocumentInstances = processDocumentInstances.sort((a, b) => a.isActive === b.isActive ? 0 : a.isActive ? -1 : 1);
+        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 => {
             if (processDocumentInstances.length > 0) {
-                this.selectedProcessInstanceId = processDocumentInstances[0].id.processInstanceId;
+                this.selectedProcessInstanceId$.next(processDocumentInstances[0].id.processInstanceId);
             }
-        });
+        }));
+        this.processInstanceItems$ = this.processDocumentInstances$.pipe(map(processDocumentInstances => processDocumentInstances.map((processDocumentInstance, index) => ({
+            processInstanceId: processDocumentInstance.id.processInstanceId,
+            content: processDocumentInstance.processName || '-',
+            selected: index === 0,
+        }))), map(processInstanceItems => ({
+            value: processInstanceItems,
+            isLoading: false,
+        })), startWith({ isLoading: true }));
+        this.selectedProcessInstanceId$ = new BehaviorSubject(null);
+        this.selectedProcessInstance$ = combineLatest([this.processDocumentInstances$, this.selectedProcessInstanceId$]).pipe(map(([processDocumentInstances, selectedProcessInstanceId]) => processDocumentInstances.find(instance => instance.id.processInstanceId === selectedProcessInstanceId)), map(processInstanceItems => ({
+            value: processInstanceItems,
+            isLoading: false,
+        })), startWith({ isLoading: true }));
     }
     loadProcessInstance(processInstanceId) {
-        this.selectedProcessInstanceId = processInstanceId;
+        if (!!processInstanceId) {
+            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<div\n  class=\"full-height-tab-content\"\n  *ngIf=\"\n    processDocumentInstances && processDocumentInstances.length > 0;\n    else emptyProcessDocumentInstances\n  \"\n>\n  <div class=\"col-3\">\n    <label><strong>Process</strong></label\n    ><br />\n    <select class=\"form-control\" (change)=\"loadProcessInstance($event.target.value)\">\n      <option\n        *ngFor=\"let processDocumentInstance of processDocumentInstances\"\n        [value]=\"processDocumentInstance.id.processInstanceId\"\n        [selected]=\"selectedProcessInstanceId === processDocumentInstance.id.processInstanceId\"\n      >\n        {{ processDocumentInstance.processName }}\n      </option>\n    </select>\n  </div>\n  <valtimo-process-diagram\n    [processInstanceId]=\"selectedProcessInstanceId\"\n  ></valtimo-process-diagram>\n</div>\n\n<ng-template #emptyProcessDocumentInstances>\n  <span> {{ 'progress.noProcessDocumentInstances' | translate }}</span>\n</ng-template>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}\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$2.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }, { kind: "directive", type: i5$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.Option, selector: "option" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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<div\n  class=\"full-height-tab-content\"\n  *ngIf=\"\n    processDocumentInstances && processDocumentInstances.length > 0;\n    else emptyProcessDocumentInstances\n  \"\n>\n  <div class=\"col-3\">\n    <label><strong>Process</strong></label\n    ><br />\n    <select class=\"form-control\" (change)=\"loadProcessInstance($event.target.value)\">\n      <option\n        *ngFor=\"let processDocumentInstance of processDocumentInstances\"\n        [value]=\"processDocumentInstance.id.processInstanceId\"\n        [selected]=\"selectedProcessInstanceId === processDocumentInstance.id.processInstanceId\"\n      >\n        {{ processDocumentInstance.processName }}\n      </option>\n    </select>\n  </div>\n  <valtimo-process-diagram\n    [processInstanceId]=\"selectedProcessInstanceId\"\n  ></valtimo-process-diagram>\n</div>\n\n<ng-template #emptyProcessDocumentInstances>\n  <span> {{ 'progress.noProcessDocumentInstances' | translate }}</span>\n</ng-template>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}\n"] }]
+            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 }]; } });
 
 /*
@@ -1360,13 +1372,13 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
             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$2.UserProviderService }, { token: FileSortService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, 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$2.UserProviderService }, { type: FileSortService }]; } });
+        }], 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 }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -1589,13 +1601,13 @@ class DossierDetailTabContactMomentsComponent {
     refetchContactMoments() {
         this.refetchContactMoments$.next('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailTabContactMomentsComponent, deps: [{ token: i1$2.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: i5$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$2.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: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$2.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" }] }); }
+    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$2.ContactMomentService }, { type: i3$1.AlertService }, { type: i6.TranslateService }]; }, propDecorators: { modal: [{
+        }], ctorParameters: function () { return [{ type: i1$3.ContactMomentService }, { type: i3$1.AlertService }, { type: i6.TranslateService }]; }, propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['contactMomentsNoteModal']
             }] } });
@@ -1725,6 +1737,7 @@ var PERMISSION_ACTION;
     PERMISSION_ACTION["claim"] = "claim";
     PERMISSION_ACTION["delete"] = "delete";
     PERMISSION_ACTION["edit"] = "modify";
+    PERMISSION_ACTION["view"] = "view";
 })(PERMISSION_ACTION || (PERMISSION_ACTION = {}));
 var DOSSIER_DETAIL_PERMISSION_RESOURCE;
 (function (DOSSIER_DETAIL_PERMISSION_RESOURCE) {
@@ -1752,6 +1765,10 @@ const CAN_ASSIGN_CASE_PERMISSION = {
     action: PERMISSION_ACTION.assign,
     resource: DOSSIER_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocument,
 };
+const CAN_VIEW_CASE_PERMISSION = {
+    action: PERMISSION_ACTION.view,
+    resource: DOSSIER_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocument,
+};
 const CAN_CREATE_CASE_PERMISSION = {
     action: PERMISSION_ACTION.add,
     resource: DOSSIER_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocument,
@@ -2514,13 +2531,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: i5$2.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: i5$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$2.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: "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: i5$2.FormBuilder }]; }, propDecorators: { modalClass: [{
+        }], ctorParameters: function () { return [{ type: DossierBulkAssignService }, { type: i2$3.FormBuilder }]; }, propDecorators: { modalClass: [{
                 type: HostBinding,
                 args: ['class']
             }], documentIds: [{
@@ -2626,13 +2643,13 @@ class DossierSupportingProcessStartModalComponent {
             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$2.UserProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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$2.UserProviderService }]; }, propDecorators: { form: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i2$2.ProcessService }, { type: i4$2.ProcessLinkService }, { type: i6$1.UserProviderService }]; }, propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], modal: [{
@@ -2834,9 +2851,9 @@ class DossierDetailComponent {
     }
     getAllAssociatedProcessDefinitions() {
         this.documentService
-            .findProcessDocumentDefinitions(this.documentDefinitionName)
+            .findProcessDocumentDefinitionsByStartableByUser(this.documentDefinitionName, true)
             .subscribe((processDocumentDefinitions) => {
-            this.processDocumentDefinitions = processDocumentDefinitions.filter(processDocumentDefinition => processDocumentDefinition.startableByUser);
+            this.processDocumentDefinitions = processDocumentDefinitions;
             this.processDefinitionListFields = [
                 {
                     key: 'processName',
@@ -2927,13 +2944,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: i6$1.NGXLogger }, { token: i7.PermissionService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierTabService }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: i6$1.NGXLogger }, { type: i7.PermissionService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierTabService }, { type: DossierService }]; }, propDecorators: { supportingProcessStart: [{
+        }], 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: [{
                 type: ViewChild,
                 args: ['supportingProcessStartModal']
             }], viewContainerRef: [{
@@ -2941,6 +2958,32 @@ 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.
  *
@@ -2957,7 +3000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class DossierProcessStartModalComponent {
-    constructor(route, router, processService, documentService, processLinkService, formFlowService, userProviderService, logger) {
+    constructor(route, router, processService, documentService, processLinkService, formFlowService, userProviderService, permissionService, listService, startModalService, configService) {
         this.route = route;
         this.router = router;
         this.processService = processService;
@@ -2965,8 +3008,12 @@ class DossierProcessStartModalComponent {
         this.processLinkService = processLinkService;
         this.formFlowService = formFlowService;
         this.userProviderService = userProviderService;
-        this.logger = logger;
+        this.permissionService = permissionService;
+        this.listService = listService;
+        this.startModalService = startModalService;
+        this.configService = configService;
         this.formFlowComplete = new EventEmitter();
+        this._useStartEventNameAsStartFormTitle = this.configService.config.featureToggles?.useStartEventNameAsStartFormTitle;
     }
     ngOnInit() {
         this.isUserAdmin();
@@ -2975,6 +3022,11 @@ class DossierProcessStartModalComponent {
         this.processLinkId = null;
         this.formDefinition = null;
         this.formFlowInstanceId = null;
+        if (this._useStartEventNameAsStartFormTitle) {
+            this.processService.getProcessDefinitionXml(this.processDefinitionId).subscribe((result) => {
+                this._startEventName = this.startModalService.getStandardStartEventTitle(result.bpmn20Xml);
+            });
+        }
         this.processService
             .getProcessDefinitionStartProcessLink(this.processDefinitionId, null, this.documentDefinitionName)
             .pipe(take$1(1))
@@ -2998,7 +3050,8 @@ class DossierProcessStartModalComponent {
         this.router.navigate(['process-links'], { queryParams: { process: this.processDefinitionKey } });
     }
     get modalTitle() {
-        return `Start - ${this.processName}`;
+        const fallbackTitle = `Start - ${this.processName}`;
+        return this._useStartEventNameAsStartFormTitle ? (this._startEventName || fallbackTitle) : fallbackTitle;
     }
     openModal(processDocumentDefinition) {
         this.processDefinitionKey = processDocumentDefinition.id.processDefinitionKey;
@@ -3037,20 +3090,32 @@ class DossierProcessStartModalComponent {
     }
     submitCompleted(formSubmissionResult) {
         this.modal.hide();
-        this.router.navigate([
-            'dossiers',
-            this.documentDefinitionName,
-            'document',
-            formSubmissionResult.documentId,
-        ]);
+        this.permissionService
+            .requestPermission(CAN_VIEW_CASE_PERMISSION, {
+            resource: DOSSIER_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocument,
+            identifier: formSubmissionResult.documentId,
+        })
+            .subscribe(canViewCase => {
+            if (canViewCase) {
+                this.router.navigate([
+                    'dossiers',
+                    this.documentDefinitionName,
+                    'document',
+                    formSubmissionResult.documentId,
+                ]);
+            }
+            else {
+                this.listService.forceRefresh();
+            }
+        });
     }
-    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$2.UserProviderService }, { token: i6$1.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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$2.UserProviderService }, { type: i6$1.NGXLogger }]; }, propDecorators: { form: [{
+        }], 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: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], modal: [{
@@ -3232,6 +3297,7 @@ class DossierListComponent {
                 this.paginationService.setPagination(columns);
             });
         }));
+        this.paginatorConfig = { ...DEFAULT_PAGINATOR_CONFIG, itemsPerPageOptions: [1, 2, 3, 4, 10] };
         this.fields$ = combineLatest([
             this._canHaveAssignee$,
             this._columns$,
@@ -3304,7 +3370,24 @@ class DossierListComponent {
                 hasApiColumnConfig: obsApi,
                 isSearchResult: of(false),
             });
-        }), map((res) => {
+        }), switchMap(res => combineLatest([
+            of(res),
+            forkJoin(res.documents.content.map(document => this.permissionService
+                .requestPermission(CAN_VIEW_CASE_PERMISSION, {
+                resource: DOSSIER_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocument,
+                identifier: document.id,
+            })
+                .pipe(take(1)))).pipe(defaultIfEmpty([])),
+        ])), map(([res, documentsAuthorization]) => ({
+            ...res,
+            documents: {
+                ...res.documents,
+                content: res.documents.content.map((document, index) => ({
+                    ...document,
+                    locked: !documentsAuthorization[index],
+                })),
+            },
+        })), map((res) => {
             this.paginationService.setCollectionSize(res.documents);
             this.paginationService.checkPage(res.documents);
             this.updateNoResultsMessage(res.isSearchResult);
@@ -3331,9 +3414,7 @@ class DossierListComponent {
     rowClick(document) {
         this.listService.documentDefinitionName$.pipe(take(1)).subscribe(documentDefinitionName => {
             this.breadcrumbService.cacheQueryParams(`/dossiers/${documentDefinitionName}`, this.route.snapshot.queryParams);
-            this.router.navigate([
-                `/dossiers/${documentDefinitionName}/document/${document.id}`,
-            ]);
+            this.router.navigate([`/dossiers/${documentDefinitionName}/document/${document.id}`]);
         });
     }
     tabChange(tab) {
@@ -3461,7 +3542,7 @@ class DossierListComponent {
             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    [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", "header", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { 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" }] }); }
+        ], 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierListComponent, decorators: [{
             type: Component,
@@ -3472,7 +3553,7 @@ 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    [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"] }]
+                    ], 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: [{
                 type: ViewChild,
                 args: [CarbonListComponent]
@@ -3813,7 +3894,8 @@ class DossierModule {
             ComboBoxModule,
             TabTranslatePipeModule,
             CarbonListModule,
-            IsArrayPipe], exports: [DossierListComponent, DossierDetailComponent] }); }
+            IsArrayPipe,
+            SkeletonModule], exports: [DossierListComponent, DossierDetailComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierModule, imports: [CommonModule,
             DossierRoutingModule,
             ListModule,
@@ -3871,7 +3953,8 @@ class DossierModule {
             TabsModule,
             ComboBoxModule,
             TabTranslatePipeModule,
-            CarbonListModule] }); }
+            CarbonListModule,
+            SkeletonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierModule, decorators: [{
             type: NgModule,
@@ -3958,6 +4041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TabTranslatePipeModule,
                         CarbonListModule,
                         IsArrayPipe,
+                        SkeletonModule,
                     ],
                     exports: [DossierListComponent, DossierDetailComponent],
                 }]