@valtimo/dossier 12.0.0 → 12.1.0

package/fesm2022/valtimo-dossier.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, ViewChild, EventEmitter, Output, ViewContainerRef, Optional, Inject, HostBinding, Input, InjectionToken, ChangeDetectionStrategy, Pipe, NgModule } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, EventEmitter, Output, ViewContainerRef, Optional, Inject, HostBinding, ViewChild, Input, InjectionToken, ChangeDetectionStrategy, signal, Pipe, NgModule } from '@angular/core';
 import * as i2$4 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, take, map, distinctUntilChanged, combineLatest, Subject, switchMap, tap, filter, Subscription, of, startWith, forkJoin, defaultIfEmpty } from 'rxjs';
+import { BehaviorSubject, take, map, distinctUntilChanged, combineLatest, Subject, switchMap, tap, filter, Subscription, startWith, of, catchError as catchError$1, delay, debounceTime, repeat, forkJoin, defaultIfEmpty } from 'rxjs';
 import * as i1 from '@valtimo/config';
-import { UploadProvider, ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, DossierListTab, ZGW_OBJECT_TYPE_COMPONENT_TOKEN, ROLE_USER, ConfigModule, HttpLoaderFactory } from '@valtimo/config';
+import { UploadProvider, ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, DossierListTab, BaseApiService, ZGW_OBJECT_TYPE_COMPONENT_TOKEN, FORM_VIEW_MODEL_TOKEN, ROLE_USER, ConfigModule, HttpLoaderFactory } from '@valtimo/config';
 import * as i2 from '@angular/common/http';
-import { HttpClient } from '@angular/common/http';
+import { HttpHeaders, HttpClient } from '@angular/common/http';
 import * as i2$1 from '@valtimo/document';
 import { InternalCaseStatusColor, InternalCaseStatusUtils, AdvancedDocumentSearchRequestImpl } from '@valtimo/document';
 import * as i6 from '@ngx-translate/core';
@@ -14,32 +14,35 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$2 from 'ngx-logger';
-import * as i3 from '@valtimo/task';
-import { CAN_VIEW_TASK_PERMISSION, TASK_DETAIL_PERMISSION_RESOURCE, TaskModule } from '@valtimo/task';
-import * as i2$3 from '@valtimo/components';
-import { FormioOptionsImpl, TimelineItemImpl, CASES_WITHOUT_STATUS_KEY, ViewType, CarbonListComponent, ListModule, WidgetModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, FormIoModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule, SelectModule, InputLabelModule, ParagraphModule, TableModule, VModalModule, TitleModule, ButtonModule, SearchableDropdownSelectModule, SearchFieldsModule, PageModule, InputModule, FormModule as FormModule$1, ConfirmationModalModule, CarbonListModule, IsArrayPipe, StatusSelectorComponent, RenderInPageHeaderDirectiveModule, ValtimoCdsOverflowButtonDirectiveModule } from '@valtimo/components';
+import * as i2$2 from '@valtimo/components';
+import { FormioOptionsImpl, TimelineItemImpl, CASES_WITHOUT_STATUS_KEY, CarbonListModule, FormIoModule, ViewType, CurrentCarbonTheme, CARBON_THEME, WidgetModule, CarbonListComponent, ListModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule, SelectModule, InputLabelModule, ParagraphModule, TableModule, VModalModule, TitleModule, ButtonModule, SearchableDropdownSelectModule, SearchFieldsModule, PageModule, InputModule as InputModule$1, FormModule as FormModule$1, ConfirmationModalModule, IsArrayPipe, StatusSelectorComponent, RenderInPageHeaderDirectiveModule, ValtimoCdsOverflowButtonDirectiveModule } from '@valtimo/components';
 export { CASES_WITHOUT_STATUS_KEY } from '@valtimo/components';
 import moment from 'moment';
-import * as i2$2 from '@valtimo/process';
-import { ProcessModule } from '@valtimo/process';
-import * as i5 from '@valtimo/form';
+import * as i3 from '@valtimo/form';
 import { FormModule } from '@valtimo/form';
-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';
+import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i10 from '@ng-bootstrap/ng-bootstrap';
-import { NgbButtonsModule, NgbTooltipModule, NgbPaginationModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i10$1 from 'carbon-components-angular';
-import { Tabs, LoadingModule, ButtonModule as ButtonModule$1, IconModule, ModalModule as ModalModule$1, SelectModule as SelectModule$1, DropdownModule, TabsModule, ComboBoxModule, SkeletonModule, TagModule, DialogModule } from 'carbon-components-angular';
-import * as i3$1 from 'ngx-spinner';
+import * as i2$3 from '@valtimo/process';
+import { ProcessModule } from '@valtimo/process';
+import * as i4 from 'carbon-components-angular';
+import { InputModule, PaginationModel, PaginationModule, TilesModule, LoadingModule, LayerModule, TagModule, Tabs, ButtonModule as ButtonModule$1, IconModule, ModalModule as ModalModule$1, SelectModule as SelectModule$1, DropdownModule, TabsModule, ComboBoxModule, SkeletonModule, DialogModule } from 'carbon-components-angular';
+import * as i3$2 from 'ngx-spinner';
+import * as i6$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule, NgbButtonsModule, NgbPaginationModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { switchMap as switchMap$1, map as map$1, take as take$1, tap as tap$1, catchError } from 'rxjs/operators';
-import * as i3$2 from 'ngx-toastr';
-import * as i4 from '@valtimo/resource';
+import * as i3$3 from 'ngx-toastr';
+import * as i4$1 from '@valtimo/resource';
+import * as i7 from '@valtimo/access-control';
+import * as i4$3 from '@valtimo/security';
+import { InterceptorSkip, AuthGuardService } from '@valtimo/security';
+import { v4 } from 'uuid';
+import Muuri from 'muuri';
 import { ChevronDown16 } from '@carbon/icons';
-import * as i4$2 from 'keycloak-angular';
-import * as i4$1 from '@valtimo/process-link';
+import * as i4$4 from 'keycloak-angular';
+import moment$1 from 'moment/moment';
+import * as i1$3 from '@valtimo/task';
+import { CAN_VIEW_TASK_PERMISSION, TASK_DETAIL_PERMISSION_RESOURCE, TaskModule } from '@valtimo/task';
+import * as i4$2 from '@valtimo/process-link';
 import { ProcessLinkModule } from '@valtimo/process-link';
 import { isEqual } from 'lodash';
 
@@ -755,6 +758,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 
+var CaseWidgetDisplayTypeKey;
+(function (CaseWidgetDisplayTypeKey) {
+    CaseWidgetDisplayTypeKey["TEXT"] = "text";
+    CaseWidgetDisplayTypeKey["BOOLEAN"] = "boolean";
+    CaseWidgetDisplayTypeKey["CURRENCY"] = "currency";
+    CaseWidgetDisplayTypeKey["DATE"] = "date";
+    CaseWidgetDisplayTypeKey["DATE_TIME"] = "datetime";
+    CaseWidgetDisplayTypeKey["ENUM"] = "enum";
+    CaseWidgetDisplayTypeKey["NUMBER"] = "number";
+    CaseWidgetDisplayTypeKey["PERCENT"] = "percent";
+})(CaseWidgetDisplayTypeKey || (CaseWidgetDisplayTypeKey = {}));
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var CaseWidgetType;
+(function (CaseWidgetType) {
+    CaseWidgetType["FIELDS"] = "fields";
+    CaseWidgetType["TABLE"] = "table";
+    CaseWidgetType["CUSTOM"] = "custom";
+    CaseWidgetType["COLLECTION"] = "collection";
+    CaseWidgetType["FORMIO"] = "formio";
+})(CaseWidgetType || (CaseWidgetType = {}));
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var DefaultTabs;
+(function (DefaultTabs) {
+    DefaultTabs["summary"] = "summary";
+    DefaultTabs["progress"] = "progress";
+    DefaultTabs["audit"] = "audit";
+    DefaultTabs["documents"] = "documents";
+    DefaultTabs["notes"] = "notes";
+})(DefaultTabs || (DefaultTabs = {}));
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -771,6 +834,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var ApiTabType;
+(function (ApiTabType) {
+    ApiTabType["STANDARD"] = "standard";
+    ApiTabType["FORMIO"] = "formio";
+    ApiTabType["CUSTOM"] = "custom";
+    ApiTabType["WIDGETS"] = "widgets";
+})(ApiTabType || (ApiTabType = {}));
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -788,6 +890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  */
 class TabLoaderImpl {
     constructor(tabs, componentFactoryResolver, viewContainerRef, router, route) {
+        this._activeTab$ = new BehaviorSubject(null);
         this._tabs = null;
         this._componentFactoryResolver = null;
         this._viewContainerRef = null;
@@ -802,6 +905,9 @@ class TabLoaderImpl {
     get tabs() {
         return this._tabs;
     }
+    get activeTab$() {
+        return this._activeTab$.pipe(filter(tab => !!tab));
+    }
     initial(tabName) {
         let initialTab;
         if (tabName) {
@@ -845,20 +951,22 @@ class TabLoaderImpl {
     setActive(tab) {
         tab.activate();
         this._activeTab = tab;
+        this._activeTab$.next(tab);
     }
 }
 class TabImpl {
-    constructor(name, sequence, component, contentKey, title) {
+    constructor(name, sequence, component, contentKey, title, showTasks = false) {
         this._active = false;
+        this._showTasks = false;
         this._name = name;
         this._sequence = sequence;
         this._component = component;
-        if (contentKey) {
+        if (contentKey)
             this._contentKey = contentKey;
-        }
-        if (title) {
+        if (title)
             this._title = title;
-        }
+        if (showTasks)
+            this._showTasks = showTasks;
     }
     get name() {
         return this._name;
@@ -875,6 +983,9 @@ class TabImpl {
     get title() {
         return this._title;
     }
+    get showTasks() {
+        return this._showTasks;
+    }
     activate() {
         this._active = true;
     }
@@ -886,52 +997,6 @@ class TabImpl {
     }
 }
 
-/*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var DefaultTabs;
-(function (DefaultTabs) {
-    DefaultTabs["summary"] = "summary";
-    DefaultTabs["progress"] = "progress";
-    DefaultTabs["audit"] = "audit";
-    DefaultTabs["documents"] = "documents";
-    DefaultTabs["notes"] = "notes";
-})(DefaultTabs || (DefaultTabs = {}));
-
-/*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var ApiTabType;
-(function (ApiTabType) {
-    ApiTabType["STANDARD"] = "standard";
-    ApiTabType["FORMIO"] = "formio";
-    ApiTabType["CUSTOM"] = "custom";
-})(ApiTabType || (ApiTabType = {}));
-
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -966,22 +1031,11 @@ var ApiTabType;
 moment.locale(localStorage.getItem('langKey') || '');
 moment.defaultFormat = 'DD MMM YYYY HH:mm';
 class DossierDetailTabSummaryComponent {
-    constructor(router, documentService, taskService, processService, el, renderer, route, formService, userProviderService, permissionService) {
-        this.router = router;
+    constructor(documentService, route, formService) {
         this.documentService = documentService;
-        this.taskService = taskService;
-        this.processService = processService;
-        this.el = el;
-        this.renderer = renderer;
         this.route = route;
         this.formService = formService;
-        this.userProviderService = userProviderService;
-        this.permissionService = permissionService;
-        this.processDocumentInstances = [];
-        this.tasks = [];
         this.formDefinition = null;
-        this.roles = [];
-        this.loadingTasks$ = new BehaviorSubject(true);
         this._subscriptions = new Subscription();
         this.snapshot = this.route.snapshot.paramMap;
         this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
@@ -1005,60 +1059,14 @@ class DossierDetailTabSummaryComponent {
             .subscribe(formDefinition => {
             this.formDefinition = formDefinition;
         }));
-        this._subscriptions.add(this.userProviderService.getUserSubject().subscribe(user => {
-            this.roles = user.roles;
-            this.tasks = [];
-            this.loadProcessDocumentInstances(this.documentId);
-        }));
-    }
-    loadProcessDocumentInstances(documentId) {
-        this._subscriptions.add(this.documentService
-            .findProcessDocumentInstances(documentId)
-            .subscribe(processDocumentInstances => {
-            this.processDocumentInstances = processDocumentInstances;
-            this.processDocumentInstances.forEach(instance => {
-                this.loadProcessInstanceTasks(instance.id.processInstanceId);
-            });
-        }));
-    }
-    rowTaskClick(task) {
-        this.taskDetail.openTaskDetails(task);
-    }
-    loadProcessInstanceTasks(processInstanceId) {
-        this._subscriptions.add(this.processService
-            .getProcessInstanceTasks(processInstanceId)
-            .pipe(switchMap(tasks => combineLatest([
-            of(tasks),
-            ...(tasks || []).map(task => this.permissionService.requestPermission(CAN_VIEW_TASK_PERMISSION, {
-                resource: TASK_DETAIL_PERMISSION_RESOURCE.task,
-                identifier: task.id,
-            })),
-        ])))
-            .subscribe(res => {
-            const tasks = res?.[0];
-            const permissions = res?.filter((_, index) => index !== 0);
-            if (!!tasks) {
-                tasks.forEach((task, taskIndex) => {
-                    task.createdUnix = this.moment(task.created).unix();
-                    task.created = this.moment(task.created).format('DD MMM YYYY HH:mm');
-                    task.isLocked = !permissions[taskIndex];
-                });
-                this.tasks = this.tasks.concat(tasks);
-                this.tasks.sort((t1, t2) => t2.createdUnix - t1.createdUnix);
-            }
-            this.loadingTasks$.next(false);
-        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabSummaryComponent, deps: [{ token: i1$1.Router }, { token: i2$1.DocumentService }, { token: i3.TaskService }, { token: i2$2.ProcessService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.ActivatedRoute }, { token: i5.FormService }, { token: i6$1.UserProviderService }, { token: i7.PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabSummaryComponent, selector: "valtimo-dossier-detail-tab-summary", viewQueries: [{ propertyName: "taskDetail", first: true, predicate: ["taskDetail"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\" *ngIf=\"{loadingTasks: loadingTasks$ | async} as obs\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">{{ 'summary.userTasks' | translate }}</h4>\n      <ng-container *ngIf=\"!obs.loadingTasks; else loadingTasksTemplate\">\n        <ng-container *ngIf=\"!tasks.length\">\n          <valtimo-widget>\n            <div class=\"p-3\">\n              <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n              <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n              <div class=\"clearfix\"></div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n\n        <ng-container *ngFor=\"let task of tasks\">\n          <valtimo-widget>\n            <div\n              *ngIf=\"!task.isLocked\"\n              class=\"p-3 clickable hoverable\"\n              (click)=\"rowTaskClick(task)\"\n            >\n              <span class=\"float-right badge badge-pill badge-primary\">{{\n                'summary.taskOpen' | translate\n              }}</span>\n              <strong>{{ task.name }}</strong>\n              <div class=\"mt-1\">{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n            <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked\">\n              <span\n                class=\"float-right badge badge-pill badge-secondary bg-grey\"\n                ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n              >\n                <i class=\"icon mdi mdi-lock\"></i>\n              </span>\n              <strong>{{ task.name }}</strong>\n              <div>{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n      </ng-container>\n\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingTasksTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: [".hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i3.TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i10$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabSummaryComponent, deps: [{ token: i2$1.DocumentService }, { token: i1$1.ActivatedRoute }, { token: i3.FormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabSummaryComponent, selector: "valtimo-dossier-detail-tab-summary", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row 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  </div>\n</div>\n", styles: [".hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail-tab-summary', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\" *ngIf=\"{loadingTasks: loadingTasks$ | async} as obs\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">{{ 'summary.userTasks' | translate }}</h4>\n      <ng-container *ngIf=\"!obs.loadingTasks; else loadingTasksTemplate\">\n        <ng-container *ngIf=\"!tasks.length\">\n          <valtimo-widget>\n            <div class=\"p-3\">\n              <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n              <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n              <div class=\"clearfix\"></div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n\n        <ng-container *ngFor=\"let task of tasks\">\n          <valtimo-widget>\n            <div\n              *ngIf=\"!task.isLocked\"\n              class=\"p-3 clickable hoverable\"\n              (click)=\"rowTaskClick(task)\"\n            >\n              <span class=\"float-right badge badge-pill badge-primary\">{{\n                'summary.taskOpen' | translate\n              }}</span>\n              <strong>{{ task.name }}</strong>\n              <div class=\"mt-1\">{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n            <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked\">\n              <span\n                class=\"float-right badge badge-pill badge-secondary bg-grey\"\n                ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n              >\n                <i class=\"icon mdi mdi-lock\"></i>\n              </span>\n              <strong>{{ task.name }}</strong>\n              <div>{{ 'summary.taskCreated' | translate }} {{ task.created }}</div>\n            </div>\n          </valtimo-widget>\n        </ng-container>\n      </ng-container>\n\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\n  </div>\n</div>\n\n<ng-template #loadingTasksTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: [".hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}.loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i2$1.DocumentService }, { type: i3.TaskService }, { type: i2$2.ProcessService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.ActivatedRoute }, { type: i5.FormService }, { type: i6$1.UserProviderService }, { type: i7.PermissionService }], propDecorators: { taskDetail: [{
-                type: ViewChild,
-                args: ['taskDetail']
-            }] } });
+            args: [{ selector: 'valtimo-dossier-detail-tab-summary', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\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  </div>\n</div>\n", styles: [".hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.DocumentService }, { type: i1$1.ActivatedRoute }, { type: i3.FormService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1107,7 +1115,7 @@ class DossierDetailTabProgressComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabProgressComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabProgressComponent, selector: "valtimo-dossier-detail-tab-progress", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  class=\"full-height-tab-content\"\n  *ngIf=\"{\n    processInstanceItems: processInstanceItems$ | async,\n    selectedProcessInstance: selectedProcessInstance$ | async\n  } as obs\"\n>\n  <span *ngIf=\"!obs.processInstanceItems.isLoading && !obs.processInstanceItems.value\">{{\n    'progress.noProcessDocumentInstances' | translate\n  }}</span>\n  <div class=\"process-info-row\">\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'progress.process' | translate\"\n      [skeleton]=\"obs.processInstanceItems.isLoading\"\n      [style.width.px]=\"350\"\n      (selected)=\"loadProcessInstance($event.item.processInstanceId)\"\n    >\n      <cds-dropdown-list [items]=\"obs.processInstanceItems.value || []\"></cds-dropdown-list>\n    </cds-dropdown>\n    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.version }} ({{ 'progress.of' | translate }}\n        {{ obs.selectedProcessInstance.value.latestVersion }})\n      </span>\n    </div>\n    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\n  <div>\n    <valtimo-process-diagram\n      *ngIf=\"!obs.selectedProcessInstance.isLoading\"\n      [processInstanceId]=\"obs.selectedProcessInstance.value.id.processInstanceId\"\n    ></valtimo-process-diagram>\n  </div>\n</ng-container>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}.process-info-row{display:flex;gap:24px}.process-info-text{color:var(--v-color-black);font-size:var(--v-font-size-default)}.process-info-text{display:flex;height:40px;align-items:center}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }, { kind: "component", type: i2$3.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i10$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i10$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i10$1.SkeletonText, selector: "cds-skeleton-text, ibm-skeleton-text", inputs: ["lines", "minLineWidth", "maxLineWidth"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabProgressComponent, selector: "valtimo-dossier-detail-tab-progress", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  class=\"full-height-tab-content\"\n  *ngIf=\"{\n    processInstanceItems: processInstanceItems$ | async,\n    selectedProcessInstance: selectedProcessInstance$ | async\n  } as obs\"\n>\n  <span *ngIf=\"!obs.processInstanceItems.isLoading && !obs.processInstanceItems.value\">{{\n    'progress.noProcessDocumentInstances' | translate\n  }}</span>\n  <div class=\"process-info-row\">\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'progress.process' | translate\"\n      [skeleton]=\"obs.processInstanceItems.isLoading\"\n      [style.width.px]=\"350\"\n      (selected)=\"loadProcessInstance($event.item.processInstanceId)\"\n    >\n      <cds-dropdown-list [items]=\"obs.processInstanceItems.value || []\"></cds-dropdown-list>\n    </cds-dropdown>\n    <div>\n      <v-input-label [title]=\"'progress.version' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"30\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.version }} ({{ 'progress.of' | translate }}\n        {{ obs.selectedProcessInstance.value.latestVersion }})\n      </span>\n    </div>\n    <div>\n      <v-input-label [title]=\"'progress.startedBy' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedBy || ('progress.system' | translate) }}\n      </span>\n    </div>\n    <div>\n      <v-input-label [title]=\"'progress.startedOn' | translate\"></v-input-label>\n      <cds-skeleton-text\n        *ngIf=\"obs.selectedProcessInstance.isLoading\"\n        [lines]=\"1\"\n        [maxLineWidth]=\"50\"\n      ></cds-skeleton-text>\n      <span *ngIf=\"!obs.selectedProcessInstance.isLoading\" class=\"process-info-text\">\n        {{ obs.selectedProcessInstance.value.startedOn.toLocaleDateString() }}\n      </span>\n    </div>\n  </div>\n  <div>\n    <valtimo-process-diagram\n      *ngIf=\"!obs.selectedProcessInstance.isLoading\"\n      [processInstanceId]=\"obs.selectedProcessInstance.value.id.processInstanceId\"\n    ></valtimo-process-diagram>\n  </div>\n</ng-container>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}.process-info-row{display:flex;gap:24px}.process-info-text{color:var(--v-color-black);font-size:var(--v-font-size-default)}.process-info-text{display:flex;height:40px;align-items:center}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }, { kind: "component", type: i2$2.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "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: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabProgressComponent, decorators: [{
             type: Component,
@@ -1169,13 +1177,13 @@ class DossierDetailTabAuditComponent {
         this.currentAuditPage = page - 1;
         this.loadAuditPage(this.currentAuditPage);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabAuditComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$1.NgxSpinnerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabAuditComponent, selector: "valtimo-dossier-detail-tab-audit", outputs: { paginationClicked: "paginationClicked" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "component", type: i2$3.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i10.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabAuditComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$2.NgxSpinnerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabAuditComponent, selector: "valtimo-dossier-detail-tab-audit", outputs: { paginationClicked: "paginationClicked" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "component", type: i2$2.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i6$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabAuditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-audit', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$1.NgxSpinnerService }], propDecorators: { paginationClicked: [{
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$2.NgxSpinnerService }], propDecorators: { paginationClicked: [{
                 type: Output
             }] } });
 
@@ -1196,7 +1204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  */
 class DossierDetailTabNotFoundComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabNotFoundComponent, selector: "valtimo-dossier-detail-not-found", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-no-results\n  [title]=\"'dossier.tabs.componentNotFound' | translate\"\n  [description]=\"'dossier.tabs.componentNotFoundMessage' | translate\"\n  illustration=\"valtimo-layout/img/emptystate-error.svg\"\n></valtimo-no-results>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i2$3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabNotFoundComponent, selector: "valtimo-dossier-detail-not-found", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-no-results\n  [title]=\"'dossier.tabs.componentNotFound' | translate\"\n  [description]=\"'dossier.tabs.componentNotFoundMessage' | translate\"\n  illustration=\"valtimo-layout/img/emptystate-error.svg\"\n></valtimo-no-results>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotFoundComponent, decorators: [{
             type: Component,
@@ -1318,13 +1326,13 @@ class DossierDetailTabS3DocumentsComponent {
     refetchDocuments() {
         this.refetch$.next(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabS3DocumentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$2.ToastrService }, { token: i4.UploadProviderService }, { token: i4.DownloadService }, { token: i2$3.PromptService }, { token: i6.TranslateService }, { token: i1.ConfigService }, { token: i2$1.FileSortService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabS3DocumentsComponent, selector: "valtimo-dossier-detail-tab-s3-documents", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i2$3.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i2$3.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i2$3.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabS3DocumentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$3.ToastrService }, { token: i4$1.UploadProviderService }, { token: i4$1.DownloadService }, { token: i2$2.PromptService }, { token: i6.TranslateService }, { token: i1.ConfigService }, { token: i2$1.FileSortService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabS3DocumentsComponent, selector: "valtimo-dossier-detail-tab-s3-documents", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i2$2.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i2$2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i2$2.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabS3DocumentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-s3-documents', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"acceptedFiles\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$2.ToastrService }, { type: i4.UploadProviderService }, { type: i4.DownloadService }, { type: i2$3.PromptService }, { type: i6.TranslateService }, { type: i1.ConfigService }, { type: i2$1.FileSortService }] });
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$1.DocumentService }, { type: i3$3.ToastrService }, { type: i4$1.UploadProviderService }, { type: i4$1.DownloadService }, { type: i2$2.PromptService }, { type: i6.TranslateService }, { type: i1.ConfigService }, { type: i2$1.FileSortService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1374,7 +1382,7 @@ class DossierDetailTabDocumentsComponent {
         this.documentenApiUploadProvider$.next(uploadProvider === UploadProvider.DOCUMENTEN_API);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabDocumentsComponent, deps: [{ token: i1.ConfigService }, { token: ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabDocumentsComponent, selector: "valtimo-dossier-detail-tab-documents", host: { properties: { "class.tab--no-margin": "this.noMargin", "class.tab--no-min-height": "this.noMinHeight" } }, viewQueries: [{ propertyName: "_externalDocumentsTab", first: true, predicate: ["externalDocumentsTab"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dossier-detail-tab-s3-documents\n  *ngIf=\"(s3UploadProvider$ | async) || (openZaakUploadProvider$ | async)\"\n></valtimo-dossier-detail-tab-s3-documents>\n\n<ng-template #externalDocumentsTab></ng-template>\n", dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DossierDetailTabS3DocumentsComponent, selector: "valtimo-dossier-detail-tab-s3-documents" }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabDocumentsComponent, selector: "valtimo-dossier-detail-tab-documents", host: { properties: { "class.tab--no-margin": "this.noMargin", "class.tab--no-min-height": "this.noMinHeight" } }, viewQueries: [{ propertyName: "_externalDocumentsTab", first: true, predicate: ["externalDocumentsTab"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dossier-detail-tab-s3-documents\n  *ngIf=\"(s3UploadProvider$ | async) || (openZaakUploadProvider$ | async)\"\n></valtimo-dossier-detail-tab-s3-documents>\n\n<ng-template #externalDocumentsTab></ng-template>\n", dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DossierDetailTabS3DocumentsComponent, selector: "valtimo-dossier-detail-tab-s3-documents" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabDocumentsComponent, decorators: [{
             type: Component,
@@ -1629,13 +1637,13 @@ class NoteModalComponent {
     setValid(data) {
         this.valid$.next(!!data.content);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NoteModalComponent, deps: [{ token: NotesService }, { token: i2$3.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NoteModalComponent, selector: "valtimo-note-modal", inputs: { customData: "customData" }, outputs: { createNoteEvent: "createNoteEvent", editNoteEvent: "editNoteEvent" }, viewQueries: [{ propertyName: "noteModal", first: true, predicate: ["noteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-modal\n  #noteModal\n  *ngIf=\"{disabled: disabled$ | async, valid: valid$ | async, modalType: modalType$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{\n        (obs.modalType === 'add' ? 'dossier.notes.addNote' : 'dossier.notes.modifyNote') | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <ng-container\n        *ngTemplateOutlet=\"\n          obs.modalType === 'add' ? addNoteButton : editNoteButton;\n          context: {obs: obs}\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addNoteButton let-obs=\"obs\">\n  <v-button\n    (clickEvent)=\"emitNoteData()\"\n    [disabled]=\"obs.disabled || !obs.valid\"\n    mdiIcon=\"plus\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.addNote' | translate }}\n  </v-button>\n</ng-template>\n<ng-template #editNoteButton let-obs=\"obs\">\n  <v-button\n    [disabled]=\"obs.disabled || !obs.valid\"\n    (clickEvent)=\"emitNoteData()\"\n    mdiIcon=\"pencil\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.modifyNote' | translate }}\n  </v-button>\n</ng-template>\n\n<ng-template #form>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n        type=\"textarea\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'dossier.notes.input.content' | translate\"\n        name=\"content\"\n        [fullWidth]=\"true\"\n        [rows]=\"10\"\n        [defaultValue]=\"customData?.summaryTranslationKey || ''\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n", styles: [".buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i2$3.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i2$3.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: i2$3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NoteModalComponent, deps: [{ token: NotesService }, { token: i2$2.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: NoteModalComponent, selector: "valtimo-note-modal", inputs: { customData: "customData" }, outputs: { createNoteEvent: "createNoteEvent", editNoteEvent: "editNoteEvent" }, viewQueries: [{ propertyName: "noteModal", first: true, predicate: ["noteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-modal\n  #noteModal\n  *ngIf=\"{disabled: disabled$ | async, valid: valid$ | async, modalType: modalType$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{\n        (obs.modalType === 'add' ? 'dossier.notes.addNote' : 'dossier.notes.modifyNote') | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <ng-container\n        *ngTemplateOutlet=\"\n          obs.modalType === 'add' ? addNoteButton : editNoteButton;\n          context: {obs: obs}\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addNoteButton let-obs=\"obs\">\n  <v-button\n    (clickEvent)=\"emitNoteData()\"\n    [disabled]=\"obs.disabled || !obs.valid\"\n    mdiIcon=\"plus\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.addNote' | translate }}\n  </v-button>\n</ng-template>\n<ng-template #editNoteButton let-obs=\"obs\">\n  <v-button\n    [disabled]=\"obs.disabled || !obs.valid\"\n    (clickEvent)=\"emitNoteData()\"\n    mdiIcon=\"pencil\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.modifyNote' | translate }}\n  </v-button>\n</ng-template>\n\n<ng-template #form>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n        type=\"textarea\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'dossier.notes.input.content' | translate\"\n        name=\"content\"\n        [fullWidth]=\"true\"\n        [rows]=\"10\"\n        [defaultValue]=\"customData?.summaryTranslationKey || ''\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n", styles: [".buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i2$2.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i2$2.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$2.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: i2$2.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: NoteModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-note-modal', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-modal\n  #noteModal\n  *ngIf=\"{disabled: disabled$ | async, valid: valid$ | async, modalType: modalType$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{\n        (obs.modalType === 'add' ? 'dossier.notes.addNote' : 'dossier.notes.modifyNote') | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"form\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <ng-container\n        *ngTemplateOutlet=\"\n          obs.modalType === 'add' ? addNoteButton : editNoteButton;\n          context: {obs: obs}\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addNoteButton let-obs=\"obs\">\n  <v-button\n    (clickEvent)=\"emitNoteData()\"\n    [disabled]=\"obs.disabled || !obs.valid\"\n    mdiIcon=\"plus\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.addNote' | translate }}\n  </v-button>\n</ng-template>\n<ng-template #editNoteButton let-obs=\"obs\">\n  <v-button\n    [disabled]=\"obs.disabled || !obs.valid\"\n    (clickEvent)=\"emitNoteData()\"\n    mdiIcon=\"pencil\"\n    type=\"success\"\n  >\n    {{ 'dossier.notes.modifyNote' | translate }}\n  </v-button>\n</ng-template>\n\n<ng-template #form>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n        type=\"textarea\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'dossier.notes.input.content' | translate\"\n        name=\"content\"\n        [fullWidth]=\"true\"\n        [rows]=\"10\"\n        [defaultValue]=\"customData?.summaryTranslationKey || ''\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n", styles: [".buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: NotesService }, { type: i2$3.ModalService }], propDecorators: { noteModal: [{
+        }], ctorParameters: () => [{ type: NotesService }, { type: i2$2.ModalService }], propDecorators: { noteModal: [{
                 type: ViewChild,
                 args: ['noteModal']
             }], customData: [{
@@ -1789,13 +1797,13 @@ class DossierDetailTabNotesComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotesComponent, deps: [{ token: NotesService }, { token: i7.PermissionService }, { token: i2$3.PromptService }, { token: i1$1.ActivatedRoute }, { token: i3$2.ToastrService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabNotesComponent, selector: "valtimo-dossier-detail-tab-notes", host: { properties: { "class.tab--no-margin": "this.noMargin" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    canAdd: canAdd$ | async,\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.canAdd\"\n      [disabled]=\"obs.loading\"\n      (click)=\"showAddModal()\"\n      aria-expanded=\"false\"\n      aria-haspopup=\"true\"\n    >\n      {{ 'dossier.notes.addNote' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </div>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline\n      *ngIf=\"timelineItems.length > 0\"\n      [actions]=\"actions\"\n      [items]=\"timelineItems\"\n    ></valtimo-timeline>\n    <valtimo-no-results\n      *ngIf=\"timelineItems.length === 0\"\n      [description]=\"'dossier.notes.noResults.description' | translate\"\n      [title]=\"'dossier.notes.noResults.title' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    ></valtimo-no-results>\n  </div>\n\n  <valtimo-spinner\n    [useBootstrapSpinner]=\"false\"\n    name=\"auditSpinner\"\n    bdColor=\"rgba(125, 125, 125, 0.35)\"\n    color=\"#264251\"\n    type=\"square-jelly-box\"\n  >\n  </valtimo-spinner>\n\n  <div *ngIf=\"obs.pagination\" class=\"d-flex justify-content-end row mr-0 ml-0\">\n    <ngb-pagination\n      *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n      [collectionSize]=\"obs.pagination.collectionSize\"\n      [maxSize]=\"obs.pagination.size\"\n      [pageSize]=\"obs.pagination.size\"\n      [rotate]=\"true\"\n      [(page)]=\"obs.pagination.page\"\n      (pageChange)=\"paginationClicked($event)\"\n    ></ngb-pagination>\n  </div>\n</ng-container>\n\n<valtimo-note-modal\n  [customData]=\"customData$ | async\"\n  (createNoteEvent)=\"createNewNote($event)\"\n  (editNoteEvent)=\"editNoteEvent($event)\"\n></valtimo-note-modal>\n", styles: [":host{display:flex;flex-direction:column}.add-note{align-self:flex-end}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "component", type: i2$3.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i10.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i10$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i10$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: NoteModalComponent, selector: "valtimo-note-modal", inputs: ["customData"], outputs: ["createNoteEvent", "editNoteEvent"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotesComponent, deps: [{ token: NotesService }, { token: i7.PermissionService }, { token: i2$2.PromptService }, { token: i1$1.ActivatedRoute }, { token: i3$3.ToastrService }, { token: i6.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabNotesComponent, selector: "valtimo-dossier-detail-tab-notes", host: { properties: { "class.tab--no-margin": "this.noMargin" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    canAdd: canAdd$ | async,\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.canAdd\"\n      [disabled]=\"obs.loading\"\n      (click)=\"showAddModal()\"\n      aria-expanded=\"false\"\n      aria-haspopup=\"true\"\n    >\n      {{ 'dossier.notes.addNote' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </div>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline\n      *ngIf=\"timelineItems.length > 0\"\n      [actions]=\"actions\"\n      [items]=\"timelineItems\"\n    ></valtimo-timeline>\n    <valtimo-no-results\n      *ngIf=\"timelineItems.length === 0\"\n      [description]=\"'dossier.notes.noResults.description' | translate\"\n      [title]=\"'dossier.notes.noResults.title' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    ></valtimo-no-results>\n  </div>\n\n  <valtimo-spinner\n    [useBootstrapSpinner]=\"false\"\n    name=\"auditSpinner\"\n    bdColor=\"rgba(125, 125, 125, 0.35)\"\n    color=\"#264251\"\n    type=\"square-jelly-box\"\n  >\n  </valtimo-spinner>\n\n  <div *ngIf=\"obs.pagination\" class=\"d-flex justify-content-end row mr-0 ml-0\">\n    <ngb-pagination\n      *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n      [collectionSize]=\"obs.pagination.collectionSize\"\n      [maxSize]=\"obs.pagination.size\"\n      [pageSize]=\"obs.pagination.size\"\n      [rotate]=\"true\"\n      [(page)]=\"obs.pagination.page\"\n      (pageChange)=\"paginationClicked($event)\"\n    ></ngb-pagination>\n  </div>\n</ng-container>\n\n<valtimo-note-modal\n  [customData]=\"customData$ | async\"\n  (createNoteEvent)=\"createNewNote($event)\"\n  (editNoteEvent)=\"editNoteEvent($event)\"\n></valtimo-note-modal>\n", styles: [":host{display:flex;flex-direction:column}.add-note{align-self:flex-end}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }, { kind: "component", type: i2$2.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i6$1.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { 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: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: NoteModalComponent, selector: "valtimo-note-modal", inputs: ["customData"], outputs: ["createNoteEvent", "editNoteEvent"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabNotesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-notes', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<ng-container\n  *ngIf=\"{\n    canAdd: canAdd$ | async,\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <button\n      cdsButton=\"primary\"\n      *ngIf=\"obs.canAdd\"\n      [disabled]=\"obs.loading\"\n      (click)=\"showAddModal()\"\n      aria-expanded=\"false\"\n      aria-haspopup=\"true\"\n    >\n      {{ 'dossier.notes.addNote' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n    </button>\n  </div>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline\n      *ngIf=\"timelineItems.length > 0\"\n      [actions]=\"actions\"\n      [items]=\"timelineItems\"\n    ></valtimo-timeline>\n    <valtimo-no-results\n      *ngIf=\"timelineItems.length === 0\"\n      [description]=\"'dossier.notes.noResults.description' | translate\"\n      [title]=\"'dossier.notes.noResults.title' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    ></valtimo-no-results>\n  </div>\n\n  <valtimo-spinner\n    [useBootstrapSpinner]=\"false\"\n    name=\"auditSpinner\"\n    bdColor=\"rgba(125, 125, 125, 0.35)\"\n    color=\"#264251\"\n    type=\"square-jelly-box\"\n  >\n  </valtimo-spinner>\n\n  <div *ngIf=\"obs.pagination\" class=\"d-flex justify-content-end row mr-0 ml-0\">\n    <ngb-pagination\n      *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n      [collectionSize]=\"obs.pagination.collectionSize\"\n      [maxSize]=\"obs.pagination.size\"\n      [pageSize]=\"obs.pagination.size\"\n      [rotate]=\"true\"\n      [(page)]=\"obs.pagination.page\"\n      (pageChange)=\"paginationClicked($event)\"\n    ></ngb-pagination>\n  </div>\n</ng-container>\n\n<valtimo-note-modal\n  [customData]=\"customData$ | async\"\n  (createNoteEvent)=\"createNewNote($event)\"\n  (editNoteEvent)=\"editNoteEvent($event)\"\n></valtimo-note-modal>\n", styles: [":host{display:flex;flex-direction:column}.add-note{align-self:flex-end}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: NotesService }, { type: i7.PermissionService }, { type: i2$3.PromptService }, { type: i1$1.ActivatedRoute }, { type: i3$2.ToastrService }, { type: i6.TranslateService }], propDecorators: { noMargin: [{
+        }], ctorParameters: () => [{ type: NotesService }, { type: i7.PermissionService }, { type: i2$2.PromptService }, { type: i1$1.ActivatedRoute }, { type: i3$3.ToastrService }, { type: i6.TranslateService }], propDecorators: { noMargin: [{
                 type: HostBinding,
                 args: ['class.tab--no-margin']
             }] } });
@@ -1899,13 +1907,774 @@ const DOSSIER_LIST_NO_RESULTS_MESSAGE = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const CASE_WITHOUT_STATUS_STATUS = {
-    key: CASES_WITHOUT_STATUS_KEY,
-    documentDefinitionName: '',
-    title: '',
-    color: InternalCaseStatusColor.Gray,
-    visibleInCaseListByDefault: false,
-};
+const CASE_WITHOUT_STATUS_STATUS = {
+    key: CASES_WITHOUT_STATUS_KEY,
+    documentDefinitionName: '',
+    title: '',
+    color: InternalCaseStatusColor.Gray,
+    visibleInCaseListByDefault: false,
+};
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const WIDGET_WIDTH_1X = 320;
+const WIDGET_HEIGHT_1X = 200;
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const CUSTOM_CASE_WIDGET_TOKEN = new InjectionToken('Specify a component to display per configured custom case widget component key.');
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierDetailTabFormioComponent {
+    constructor(tabService, route, formService) {
+        this.tabService = tabService;
+        this.route = route;
+        this.formService = formService;
+        this.loading$ = new BehaviorSubject(true);
+        this.formNotFound$ = new BehaviorSubject('');
+        this.noFormSpecified$ = new BehaviorSubject(false);
+        this.prefilledForm$ = combineLatest([
+            this.tabService.tabs$,
+            this.route.params,
+        ]).pipe(switchMap(([tabs, params]) => {
+            const currentTabName = params?.tab;
+            const documentId = params?.documentId;
+            const currentTab = tabs.find(tab => tab.name === currentTabName);
+            if (!documentId || !currentTab?.contentKey) {
+                this.noFormSpecified$.next(true);
+                return of(null);
+            }
+            this._formDefinitionName = currentTab.contentKey;
+            return this.formService.getFormDefinitionByNamePreFilled(currentTab.contentKey, documentId);
+        }), tap(() => this.loading$.next(false)), catchError(() => {
+            this.formNotFound$.next(this._formDefinitionName);
+            this.loading$.next(false);
+            return of(null);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabFormioComponent, deps: [{ token: DossierTabService }, { token: i1$1.ActivatedRoute }, { token: i3.FormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabFormioComponent, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    prefilledForm: prefilledForm$ | async,\n    loading: loading$ | async,\n    formNotFound: formNotFound$ | async,\n    noFormSpecified: noFormSpecified$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n\n  <p *ngIf=\"obs.formNotFound\" class=\"error-message\">\n    {{ 'dossier.formio.formNotFound' | translate: {formDefinitionName: obs.formNotFound} }}\n  </p>\n\n  <p *ngIf=\"obs.noFormSpecified\" class=\"error-message\">\n    {{ 'dossier.formio.noFormSpecified' | translate }}\n  </p>\n\n  <valtimo-form-io *ngIf=\"obs.prefilledForm\" [form]=\"obs.prefilledForm\"> </valtimo-form-io>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabFormioComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    prefilledForm: prefilledForm$ | async,\n    loading: loading$ | async,\n    formNotFound: formNotFound$ | async,\n    noFormSpecified: noFormSpecified$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n\n  <p *ngIf=\"obs.formNotFound\" class=\"error-message\">\n    {{ 'dossier.formio.formNotFound' | translate: {formDefinitionName: obs.formNotFound} }}\n  </p>\n\n  <p *ngIf=\"obs.noFormSpecified\" class=\"error-message\">\n    {{ 'dossier.formio.noFormSpecified' | translate }}\n  </p>\n\n  <valtimo-form-io *ngIf=\"obs.prefilledForm\" [form]=\"obs.prefilledForm\"> </valtimo-form-io>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: DossierTabService }, { type: i1$1.ActivatedRoute }, { type: i3.FormService }] });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetCustomComponent {
+    set widgetConfig(value) {
+        if (value)
+            this._widgetConfigSubject$.next(value);
+    }
+    get widgetConfig$() {
+        return this._widgetConfigSubject$.pipe(filter(config => config !== null));
+    }
+    constructor(customCaseWidgetConfig, cdr) {
+        this.customCaseWidgetConfig = customCaseWidgetConfig;
+        this.cdr = cdr;
+        this._customCaseWidgetConfig$ = new BehaviorSubject({});
+        this._widgetConfigSubject$ = new BehaviorSubject(null);
+        this.noCustomComponentAvailable = signal(false);
+        this._subscriptions = new Subscription();
+        if (customCaseWidgetConfig)
+            this._customCaseWidgetConfig$.next(customCaseWidgetConfig);
+    }
+    ngAfterViewInit() {
+        this.openCustomWidgetSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    openCustomWidgetSubscription() {
+        this._subscriptions.add(combineLatest([this.widgetConfig$, this._customCaseWidgetConfig$]).subscribe(([widgetConfig, customCaseWidgetConfig]) => {
+            const customWidgetComponentKey = widgetConfig?.properties?.componentKey;
+            const customComponent = customCaseWidgetConfig[customWidgetComponentKey];
+            if (!customComponent) {
+                this.noCustomComponentAvailable.set(true);
+                return;
+            }
+            const componentRef = this._customWidgetContainerRef.createComponent(customComponent);
+            componentRef.changeDetectorRef.detectChanges();
+            this.cdr.detectChanges();
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetCustomComponent, deps: [{ token: CUSTOM_CASE_WIDGET_TOKEN, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: WidgetCustomComponent, isStandalone: true, selector: "valtimo-widget-custom", inputs: { widgetConfig: "widgetConfig" }, viewQueries: [{ propertyName: "_customWidgetContainerRef", first: true, predicate: ["customWidgetContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"custom-widget\">\n  <h4 class=\"custom-widget__title\">{{ (widgetConfig$ | async)?.title || '-' }}</h4>\n\n  <div class=\"custom-widget__content\">\n    <ng-template #customWidgetContainer></ng-template>\n\n    @if (noCustomComponentAvailable()) {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'dossier.widgets.noCustomComponentDescription' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </div>\n</div>\n", styles: [".custom-widget{padding:24px}.custom-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetCustomComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-custom', standalone: true, imports: [CommonModule, CarbonListModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"custom-widget\">\n  <h4 class=\"custom-widget__title\">{{ (widgetConfig$ | async)?.title || '-' }}</h4>\n\n  <div class=\"custom-widget__content\">\n    <ng-template #customWidgetContainer></ng-template>\n\n    @if (noCustomComponentAvailable()) {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'dossier.widgets.noCustomComponentDescription' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </div>\n</div>\n", styles: [".custom-widget{padding:24px}.custom-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CUSTOM_CASE_WIDGET_TOKEN]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { _customWidgetContainerRef: [{
+                type: ViewChild,
+                args: ['customWidgetContainer', { read: ViewContainerRef }]
+            }], widgetConfig: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetFieldComponent {
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this.widgetConfiguration$.next(value);
+    }
+    set widgetData(value) {
+        if (!value)
+            return;
+        this.widgetData$.next(value);
+        this.isEmptyWidgetData$.next(this.checkEmptyWidgetData(value));
+    }
+    constructor(viewContentService) {
+        this.viewContentService = viewContentService;
+        this.class = 'widget-field';
+        this.collapseVertically = false;
+        this.isEmptyWidgetData$ = new BehaviorSubject(false);
+        this.renderVertically = signal(0);
+        this.widgetConfiguration$ = new BehaviorSubject(null);
+        this.widgetData$ = new BehaviorSubject(null);
+        this.widgetPropertyValue$ = combineLatest([this.widgetConfiguration$, this.widgetData$]).pipe(map(([widget, widgetData]) => widget?.properties.columns.map(column => column.reduce((columnFields, property) => [
+            ...columnFields,
+            ...(widgetData?.hasOwnProperty(property.key)
+                ? [
+                    {
+                        title: property.title,
+                        value: widgetData[property.key] !== null && widgetData[property.key] !== undefined
+                            ? this.viewContentService.get(widgetData[property.key], {
+                                ...property.displayProperties,
+                                viewType: property.displayProperties?.type ?? 'text',
+                            })
+                            : '-',
+                    },
+                ]
+                : []),
+        ], []))));
+    }
+    ngAfterViewInit() {
+        if (this.collapseVertically && this._widgetFieldRef)
+            this.openWidthObserver();
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+    }
+    openWidthObserver() {
+        this._observer = new ResizeObserver(event => {
+            this.observerMutation(event);
+        });
+        this._observer.observe(this._widgetFieldRef.nativeElement);
+    }
+    observerMutation(event) {
+        const elementWidth = event[0]?.borderBoxSize[0]?.inlineSize;
+        if (typeof elementWidth === 'number' && elementWidth !== 0) {
+            if (elementWidth < 640) {
+                this.renderVertically.set(1);
+            }
+            else if (elementWidth > 640 && elementWidth <= 768) {
+                this.renderVertically.set(2);
+            }
+            else if (elementWidth > 768 && elementWidth <= 1080) {
+                this.renderVertically.set(3);
+            }
+            else if (elementWidth > 1080) {
+                this.renderVertically.set(4);
+            }
+        }
+    }
+    checkEmptyWidgetData(widgetData) {
+        return widgetData && Object.keys(widgetData).length === 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetFieldComponent, deps: [{ token: i2$2.ViewContentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: WidgetFieldComponent, isStandalone: true, selector: "valtimo-widget-field", inputs: { collapseVertically: "collapseVertically", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetFieldRef", first: true, predicate: ["widgetField"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async\n  } as obs\"\n>\n  <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4\n      }\"\n    >\n      @for (column of obs?.widgetPropertyValue; track column.key) {\n        <div class=\"widget-field__column\">\n          @for (property of column; track property) {\n            <cds-label>\n              {{ property?.title }}\n\n              <input cdsText [value]=\"property?.value\" [readonly]=\"true\" />\n            </cds-label>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;grid-gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i4.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i4.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, WidgetFieldComponent, InputModule, TranslateModule, CarbonListModule], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    widgetPropertyValue: widgetPropertyValue$ | async,\n    widgetData: widgetData$ | async,\n    isEmptyWidgetData: isEmptyWidgetData$ | async\n  } as obs\"\n>\n  <h4 class=\"widget-field__title\">{{ obs?.widgetConfiguration?.title }}</h4>\n\n  @if (obs?.isEmptyWidgetData) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  } @else {\n    <div\n      #widgetField\n      [ngClass]=\"{\n        'widget-field__render-vertically': renderVertically() === 1,\n        'widget-field__render-two-columns': renderVertically() === 2,\n        'widget-field__render-three-columns': renderVertically() === 3,\n        'widget-field__container': renderVertically() === 4\n      }\"\n    >\n      @for (column of obs?.widgetPropertyValue; track column.key) {\n        <div class=\"widget-field__column\">\n          @for (property of column; track property) {\n            <cds-label>\n              {{ property?.title }}\n\n              <input cdsText [value]=\"property?.value\" [readonly]=\"true\" />\n            </cds-label>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".widget-field{padding:24px}.widget-field,.widget-field__column{display:flex;flex-direction:column;gap:16px}.widget-field__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.widget-field__container{display:grid;grid-gap:24px;grid-template-columns:repeat(4,1fr)}.widget-field__render-vertically,.widget-field__render-two-columns,.widget-field__render-three-columns{display:grid;grid-gap:24px}.widget-field__render-vertically{grid-template-columns:repeat(1,1fr)}.widget-field__render-two-columns{grid-template-columns:repeat(2,1fr)}.widget-field__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$2.ViewContentService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], _widgetFieldRef: [{
+                type: ViewChild,
+                args: ['widgetField']
+            }], collapseVertically: [{
+                type: Input
+            }], widgetConfiguration: [{
+                type: Input
+            }], widgetData: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetFormioComponent {
+    set documentId(value) {
+        if (value)
+            this._documentIdSubject$.next(value);
+    }
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this.layoutService.setWidgetWithExternalData(value.uuid);
+        this._widgetConfigurationSubject$.next(value);
+    }
+    get widgetConfiguration$() {
+        return this._widgetConfigurationSubject$.pipe(filter(config => !!config));
+    }
+    get _documentId$() {
+        return this._documentIdSubject$.pipe(filter(id => !!id));
+    }
+    constructor(formService, layoutService) {
+        this.formService = formService;
+        this.layoutService = layoutService;
+        this._widgetConfigurationSubject$ = new BehaviorSubject(null);
+        this._documentIdSubject$ = new BehaviorSubject('');
+        this.prefilledFormDefinition$ = combineLatest([
+            this.widgetConfiguration$,
+            this._documentId$,
+        ]).pipe(switchMap(([config, documentId]) => combineLatest([
+            this.formService.getFormDefinitionByNamePreFilled(config.properties.formDefinitionName, documentId),
+            of(config),
+        ])), tap(([_, config]) => this.layoutService.setWidgetWithExternalDataReady(config.uuid)), map(([formDef]) => formDef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetFormioComponent, deps: [{ token: i3.FormService }, { token: DossierWidgetsLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: WidgetFormioComponent, isStandalone: true, selector: "valtimo-widget-formio", inputs: { documentId: "documentId", widgetConfiguration: "widgetConfiguration" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"formio-widget\" *ngIf=\"prefilledFormDefinition$ | async as prefilledFormDefinition\">\n  <h4 class=\"formio-widget__title\">{{ (widgetConfiguration$ | async)?.title || '-' }}</h4>\n\n  <valtimo-form-io [form]=\"prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".formio-widget{padding:24px}.formio-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px;margin-bottom:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetFormioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-formio', standalone: true, imports: [CommonModule, TranslateModule, FormIoModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"formio-widget\" *ngIf=\"prefilledFormDefinition$ | async as prefilledFormDefinition\">\n  <h4 class=\"formio-widget__title\">{{ (widgetConfiguration$ | async)?.title || '-' }}</h4>\n\n  <valtimo-form-io [form]=\"prefilledFormDefinition\"></valtimo-form-io>\n</div>\n", styles: [".formio-widget{padding:24px}.formio-widget__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px;margin-bottom:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i3.FormService }, { type: DossierWidgetsLayoutService }], propDecorators: { documentId: [{
+                type: Input
+            }], widgetConfiguration: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetTableComponent {
+    set widgetConfiguration(value) {
+        this._widgetConfiguration = value;
+        this.fields$.next(value.properties.columns.map((column, index) => ({
+            key: column.key,
+            label: column.title,
+            viewType: column.displayProperties?.type ?? ViewType.TEXT,
+            className: `valtimo-widget-table--transparent ${index === 0 && value.properties.firstColumnAsTitle ? 'valtimo-widget-table--title' : ''}`,
+            ...(!!column.displayProperties?.['format'] && {
+                format: column.displayProperties['format'],
+            }),
+            ...(!!column.displayProperties?.['digitsInfo'] && {
+                digitsInfo: column.displayProperties['digitsInfo'],
+            }),
+            ...(!!column.displayProperties?.['display'] && {
+                display: column.displayProperties['display'],
+            }),
+            ...(!!column.displayProperties?.['currencyCode'] && {
+                currencyCode: column.displayProperties['currencyCode'],
+            }),
+        })));
+        this.cdr.detectChanges();
+    }
+    get widgetConfiguration() {
+        return this._widgetConfiguration;
+    }
+    get _initialNumberOfElements$() {
+        return this._initialNumberOfElementsSubject$.pipe(filter(numberOfElements => numberOfElements !== null));
+    }
+    set widgetData(value) {
+        if (!value)
+            return;
+        this.showPagination$.next(value.totalElements > value.size);
+        this._initialNumberOfElementsSubject$.next(value.numberOfElements);
+        this._widgetData$.next(value.content);
+        this.paginationModel.set(value.totalPages < 2
+            ? null
+            : {
+                currentPage: 1,
+                totalDataLength: Math.ceil(value.totalElements / value.size),
+                pageLength: value.size,
+            });
+        this.cdr.detectChanges();
+    }
+    constructor(dossierWidgetsApiService, cdr) {
+        this.dossierWidgetsApiService = dossierWidgetsApiService;
+        this.cdr = cdr;
+        this._initialNumberOfElementsSubject$ = new BehaviorSubject(null);
+        this.showPagination$ = new BehaviorSubject(false);
+        this._widgetData$ = new BehaviorSubject(null);
+        this.fields$ = new BehaviorSubject([]);
+        this._queryParams$ = new BehaviorSubject(null);
+        this.paginationModel = signal(new PaginationModel());
+        this.widgetData$ = combineLatest([
+            this._widgetData$,
+            this._queryParams$,
+            this._initialNumberOfElements$,
+        ]).pipe(switchMap(([data, queryParams, initialNumberOfElements]) => combineLatest([
+            !queryParams
+                ? of(data)
+                : this.dossierWidgetsApiService
+                    .getWidgetData(this.documentId, this.tabKey, this.widgetConfiguration.key, queryParams)
+                    .pipe(map((res) => res.content)),
+            of(initialNumberOfElements),
+        ])), filter(([items]) => !!items), map(([items, initialNumberOfElements]) => {
+            if (items.length === initialNumberOfElements) {
+                return items;
+            }
+            const rows = new Array(initialNumberOfElements).fill(null);
+            return rows.map((_, index) => items[index] || {});
+        }));
+    }
+    onSelectPage(page) {
+        this._queryParams$.next(`page=${page - 1}&size=${this.paginationModel().pageLength}`);
+        this.paginationModel.update((model) => ({
+            ...model,
+            currentPage: page,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetTableComponent, deps: [{ token: DossierWidgetsApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: WidgetTableComponent, isStandalone: true, selector: "valtimo-widget-table", inputs: { documentId: "documentId", tabKey: "tabKey", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async\n  } as obs\"\n  class=\"valtimo-widget-table\"\n>\n  <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n\n  @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n    <section class=\"valtimo-widget-table__content\">\n      <valtimo-carbon-list\n        [header]=\"false\"\n        [hideToolbar]=\"true\"\n        [fields]=\"obs.fields\"\n        [items]=\"obs.widgetData\"\n      >\n      </valtimo-carbon-list>\n\n      <cds-pagination-nav\n        *ngIf=\"paginationModel()\"\n        class=\"valtimo-widget-table__pagination\"\n        [model]=\"paginationModel()\"\n        (selectPage)=\"onSelectPage($event)\"\n      >\n      </cds-pagination-nav>\n    </section>\n  } @else {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i4.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i4.Tile, selector: "cds-tile, ibm-tile", inputs: ["theme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, CarbonListModule, PaginationModule, TilesModule, TranslateModule], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-tile\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async\n  } as obs\"\n  class=\"valtimo-widget-table\"\n>\n  <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n\n  @if (obs.widgetData && obs.fields && obs.widgetData.length) {\n    <section class=\"valtimo-widget-table__content\">\n      <valtimo-carbon-list\n        [header]=\"false\"\n        [hideToolbar]=\"true\"\n        [fields]=\"obs.fields\"\n        [items]=\"obs.widgetData\"\n      >\n      </valtimo-carbon-list>\n\n      <cds-pagination-nav\n        *ngIf=\"paginationModel()\"\n        class=\"valtimo-widget-table__pagination\"\n        [model]=\"paginationModel()\"\n        (selectPage)=\"onSelectPage($event)\"\n      >\n      </cds-pagination-nav>\n    </section>\n  } @else {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n</cds-tile>\n", styles: [".valtimo-widget-table{padding:24px;display:flex;flex-direction:column;gap:16px}.valtimo-widget-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-table__content valtimo-carbon-list{width:100%}.valtimo-widget-table__pagination{padding:8px 0}.valtimo-widget-table .cds--data-table>thead{background:transparent!important}.valtimo-widget-table .cds--data-table td,.valtimo-widget-table .cds--data-table tr,.valtimo-widget-table .cds--data-table th{display:flex;width:100%}.valtimo-widget-table .cds--data-table td{white-space:nowrap;overflow:hidden}.valtimo-widget-table .cds--data-table td span{text-overflow:ellipsis;overflow:hidden}.valtimo-widget-table .cds--data-table tr{gap:16px}.valtimo-widget-table .cds--table-header-label>span{font-weight:400;font-size:12px;color:var(--cds-text-secondary)}.valtimo-widget-table--transparent{background:transparent!important}.valtimo-widget-table--title{border:none!important;font-style:italic}.valtimo-widget-table .widget-title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}\n"] }]
+        }], ctorParameters: () => [{ type: DossierWidgetsApiService }, { type: i0.ChangeDetectorRef }], propDecorators: { documentId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], tabKey: [{
+                type: Input,
+                args: [{ required: true }]
+            }], widgetConfiguration: [{
+                type: Input,
+                args: [{ required: true }]
+            }], widgetData: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetCollectionComponent {
+    set widgetConfiguration(value) {
+        if (!value)
+            return;
+        this.widgetConfiguration$.next(value);
+    }
+    get _initialNumberOfElements$() {
+        return this._initialNumberOfElementsSubject$.pipe(filter(numberOfElements => numberOfElements !== null));
+    }
+    set widgetData(value) {
+        if (!value)
+            return;
+        this.showPagination$.next(value.totalElements > value.size);
+        this._initialNumberOfElementsSubject$.next(value.numberOfElements);
+        this._widgetDataSubject$.next(value.content);
+        this.paginationModel.set(value.totalPages < 0
+            ? null
+            : {
+                currentPage: 1,
+                totalDataLength: Math.ceil(value.totalElements / value.size),
+                pageLength: value.size,
+            });
+        this.cdr.detectChanges();
+    }
+    constructor(viewContentService, cdr, widgetApiService) {
+        this.viewContentService = viewContentService;
+        this.cdr = cdr;
+        this.widgetApiService = widgetApiService;
+        this.class = 'valtimo-widget-collection';
+        this.showPagination$ = new BehaviorSubject(false);
+        this._initialNumberOfElementsSubject$ = new BehaviorSubject(null);
+        this.widgetTitle = signal('-');
+        this.widgetConfiguration$ = new BehaviorSubject(null);
+        this.paginationModel = signal(new PaginationModel());
+        this.amountOfColumns = signal(0);
+        this._widgetDataSubject$ = new BehaviorSubject(null);
+        this._queryParams$ = new BehaviorSubject(null);
+        this._widgetData$ = combineLatest([
+            this._widgetDataSubject$,
+            this._queryParams$,
+            this._initialNumberOfElements$,
+            this.widgetConfiguration$,
+        ]).pipe(switchMap(([data, queryParams, initialNumberOfElements, widgetConfiguration]) => combineLatest([
+            !queryParams
+                ? of(data)
+                : this.widgetApiService
+                    .getWidgetData(this.documentId, this.tabKey, widgetConfiguration.key, queryParams)
+                    .pipe(map((res) => res.content)),
+            of(initialNumberOfElements),
+        ])), filter(([items]) => !!items), map(([items, initialNumberOfElements]) => {
+            if (items.length === initialNumberOfElements) {
+                return items;
+            }
+            const rows = new Array(initialNumberOfElements).fill(null);
+            return rows.map((_, index) => items[index] || { ...items[0], hidden: true });
+        }));
+        this.collectionWidgetCards$ = combineLatest([this.widgetConfiguration$, this._widgetData$]).pipe(filter(([widgetConfig, widgetData]) => !!widgetConfig && !!widgetData), tap(([widgetConfig]) => this.widgetTitle.set(widgetConfig.title)), map(([widgetConfig, widgetData]) => widgetData.map((cardData, index) => ({
+            hidden: cardData.hidden,
+            key: index,
+            title: this.getCardTitle({
+                value: cardData.title,
+                displayProperties: widgetConfig?.properties?.title?.displayProperties,
+            }),
+            fields: widgetConfig?.properties.fields.reduce((cardFieldsAccumulator, currentField) => [
+                ...cardFieldsAccumulator,
+                this.getCardField(currentField, cardData),
+            ], []),
+        }))));
+    }
+    ngAfterViewInit() {
+        this.openWidthObserver();
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+    }
+    onSelectPage(page) {
+        this._queryParams$.next(`page=${page - 1}&size=${this.paginationModel().pageLength}`);
+        this.paginationModel.update((model) => ({
+            ...model,
+            currentPage: page,
+        }));
+    }
+    getCardField(field, data) {
+        const resolvedValue = this.viewContentService.get(data.fields[field.key], {
+            ...field.displayProperties,
+            viewType: field.displayProperties?.type ?? CaseWidgetDisplayTypeKey.TEXT,
+        });
+        return {
+            key: field.key,
+            title: field.title,
+            width: field.width,
+            value: resolvedValue || data.fields[field.key],
+        };
+    }
+    openWidthObserver() {
+        this._observer = new ResizeObserver(event => {
+            this.observerMutation(event);
+        });
+        this._observer.observe(this._widgetCollectionRef.nativeElement);
+    }
+    observerMutation(event) {
+        const elementWidth = event[0]?.borderBoxSize[0]?.inlineSize;
+        if (typeof elementWidth === 'number' && elementWidth !== 0) {
+            if (elementWidth < 640) {
+                this.amountOfColumns.set(1);
+            }
+            else if (elementWidth > 640 && elementWidth <= 768) {
+                this.amountOfColumns.set(2);
+            }
+            else if (elementWidth > 768 && elementWidth <= 1080) {
+                this.amountOfColumns.set(3);
+            }
+            else if (elementWidth > 1080) {
+                this.amountOfColumns.set(4);
+            }
+        }
+    }
+    getCardTitle(collectionCaseWidgetTitle) {
+        const widgetTitleValue = collectionCaseWidgetTitle.value;
+        const widgetTitleDisplayProperties = collectionCaseWidgetTitle.displayProperties;
+        if (!widgetTitleDisplayProperties && widgetTitleValue) {
+            return widgetTitleValue;
+        }
+        else if (widgetTitleDisplayProperties && widgetTitleValue) {
+            const convertedTitle = this.viewContentService.get(widgetTitleValue, {
+                ...widgetTitleDisplayProperties,
+                viewType: widgetTitleDisplayProperties.type,
+            });
+            if (convertedTitle)
+                return convertedTitle;
+        }
+        return '-';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetCollectionComponent, deps: [{ token: i2$2.ViewContentService }, { token: i0.ChangeDetectorRef }, { token: DossierWidgetsApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: WidgetCollectionComponent, isStandalone: true, selector: "valtimo-widget-collection", inputs: { documentId: "documentId", tabKey: "tabKey", widgetConfiguration: "widgetConfiguration", widgetData: "widgetData" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_widgetCollectionRef", first: true, predicate: ["widgetCollection"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async\n  } as obs\"\n>\n  <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half'\n            }\"\n          >\n            <cds-label>\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (!obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i4.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i4.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "component", type: i4.PaginationNav, selector: "cds-pagination-nav, ibm-pagination-navm", inputs: ["model", "disabled", "numOfItemsToShow", "translations"], outputs: ["selectPage"] }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetCollectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-widget-collection', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        InputModule,
+                        PaginationModule,
+                        TilesModule,
+                        CarbonListModule,
+                        TranslateModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    widgetConfiguration: widgetConfiguration$ | async,\n    collectionWidgetCards: collectionWidgetCards$ | async\n  } as obs\"\n>\n  <span class=\"valtimo-widget-collection__title\">{{ widgetTitle() }}</span>\n\n  <div\n    #widgetCollection\n    [ngClass]=\"{\n      'valtimo-widget-collection__render-vertically': amountOfColumns() === 1,\n      'valtimo-widget-collection__render-two-columns': amountOfColumns() === 2,\n      'valtimo-widget-collection__render-three-columns': amountOfColumns() === 3,\n      'valtimo-widget-collection__container': amountOfColumns() === 4\n    }\"\n  >\n    @for (card of obs?.collectionWidgetCards; track card.key) {\n      <div\n        class=\"valtimo-widget-collection__card\"\n        [ngClass]=\"{'valtimo-widget-collection__card--hidden': card.hidden}\"\n      >\n        <span class=\"valtimo-widget-collection__card-title\">{{ card.title }}</span>\n\n        @for (field of card.fields; track field.key) {\n          <div\n            [ngClass]=\"{\n              'valtimo-widget-collection__full-width-input': field?.width === 'full',\n              'valtimo-widget-collection__half-width-input': field?.width === 'half'\n            }\"\n          >\n            <cds-label>\n              {{ field?.title }}\n\n              <input\n                [value]=\"field?.value\"\n                [readonly]=\"true\"\n                class=\"valtimo-widget-collection__card-input\"\n                cdsText\n              />\n            </cds-label>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (!obs?.collectionWidgetCards?.length) {\n    <valtimo-no-results\n      [collapseVertically]=\"true\"\n      [description]=\"'dossier.widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  }\n\n  <cds-pagination-nav\n    *ngIf=\"paginationModel() && (showPagination$ | async)\"\n    class=\"valtimo-widget-collection__pagination\"\n    [model]=\"paginationModel()\"\n    (selectPage)=\"onSelectPage($event)\"\n  >\n  </cds-pagination-nav>\n</ng-container>\n", styles: [".valtimo-widget-collection{padding:24px}.valtimo-widget-collection__title{color:var(--cds-text-primary);font-weight:600;font-size:16px;line-height:24px}.valtimo-widget-collection__container{display:flex;column-gap:16px}.valtimo-widget-collection,.valtimo-widget-collection__column{display:flex;flex-direction:column}.valtimo-widget-collection__card{margin-top:16px;display:flex;flex-flow:row wrap;background-color:var(--cds-background);padding:16px;width:100%;gap:16px}.valtimo-widget-collection__card--hidden{visibility:hidden}.valtimo-widget-collection__card-title{color:var(--cds-text-primary);font-weight:500;font-size:14px;line-height:22px;font-style:italic;width:100%}.valtimo-widget-collection__card-input{background:transparent}.valtimo-widget-collection__full-width-input{width:100%}.valtimo-widget-collection__half-width-input{width:calc(50% - 16px);box-sizing:border-box}.valtimo-widget-collection__pagination{padding:8px 0;display:flex;justify-content:center}.valtimo-widget-collection__render-vertically,.valtimo-widget-collection__render-two-columns,.valtimo-widget-collection__render-three-columns{display:grid;grid-gap:16px}.valtimo-widget-collection__render-two-columns{grid-template-columns:repeat(2,1fr)}.valtimo-widget-collection__render-three-columns{grid-template-columns:repeat(3,1fr)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$2.ViewContentService }, { type: i0.ChangeDetectorRef }, { type: DossierWidgetsApiService }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], _widgetCollectionRef: [{
+                type: ViewChild,
+                args: ['widgetCollection']
+            }], documentId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], tabKey: [{
+                type: Input,
+                args: [{ required: true }]
+            }], widgetConfiguration: [{
+                type: Input
+            }], widgetData: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetBlockComponent {
+    set widget(value) {
+        this._widgetUuid = value.uuid;
+        this._widget$.next(value);
+    }
+    get widget$() {
+        return this._widget$.pipe(filter(widget => widget !== null));
+    }
+    get _viewContainerRef$() {
+        return this._viewContainerRefSubject$.pipe(filter(ref => !!ref));
+    }
+    constructor(dossierWidgetsLayoutService, dossierTabService, route, widgetsApiService, cdsThemeService, renderer, viewRef) {
+        this.dossierWidgetsLayoutService = dossierWidgetsLayoutService;
+        this.dossierTabService = dossierTabService;
+        this.route = route;
+        this.widgetsApiService = widgetsApiService;
+        this.cdsThemeService = cdsThemeService;
+        this.renderer = renderer;
+        this.viewRef = viewRef;
+        this._widget$ = new BehaviorSubject(null);
+        this._viewContainerRefSubject$ = new BehaviorSubject(null);
+        this._contentHeight$ = new BehaviorSubject(0);
+        this.blockHeightPx$ = combineLatest([
+            this._contentHeight$,
+            this._viewContainerRef$,
+        ]).pipe(filter(([contentHeight]) => contentHeight !== 0), tap(([contentHeight, viewRef]) => {
+            const blockHeight = Math.ceil((contentHeight + 16) / WIDGET_HEIGHT_1X) * WIDGET_HEIGHT_1X;
+            this.renderer.setStyle(viewRef.element.nativeElement, 'height', `${blockHeight}px`);
+            this.dossierWidgetsLayoutService.triggerMuuriLayout();
+        }));
+        this.blockWidthPercentage$ = combineLatest([
+            this.dossierWidgetsLayoutService.amountOfColumns$,
+            this.widget$,
+            this._viewContainerRef$,
+        ]).pipe(tap(([amountOfColumns, widget, viewRef]) => {
+            const percentage = widget.width > amountOfColumns ? 100 : (widget.width / amountOfColumns) * 100;
+            this.renderer.setStyle(viewRef.element.nativeElement, 'width', `${percentage}%`);
+            this.dossierWidgetsLayoutService.triggerMuuriLayout();
+        }));
+        this.CaseWidgetType = CaseWidgetType;
+        this.documentId$ = this.route.params.pipe(map(params => params?.documentId), filter(documentId => !!documentId));
+        this.tabKey$ = this.dossierTabService.activeTabKey$;
+        this.widgetData$ = combineLatest([
+            this.widget$,
+            this.tabKey$,
+            this.documentId$,
+        ]).pipe(switchMap(([widget, tabkey, documentId]) => 
+        // custom component and formio widgets do not fetch additional data
+        widget.type === CaseWidgetType.CUSTOM || widget.type === CaseWidgetType.FORMIO
+            ? of({})
+            : this.widgetsApiService.getWidgetData(documentId, tabkey, widget.key, widget.type === CaseWidgetType.TABLE || widget.type === CaseWidgetType.COLLECTION
+                ? this.getPageSizeParam(widget)
+                : undefined)), tap(() => {
+            this.dossierWidgetsLayoutService.setCaseWidgetDataLoaded(this._widgetUuid);
+        }), catchError$1((error) => {
+            if (error.status === 404)
+                this.dossierWidgetsLayoutService.setCaseWidgetDataLoaded(this._widgetUuid);
+            return of(null);
+        }));
+        this.theme$ = combineLatest([this.cdsThemeService.currentTheme$, this.widget$]).pipe(map(([currentTheme, widgetConfiguration]) => {
+            return currentTheme === CurrentCarbonTheme.G10
+                ? widgetConfiguration.highContrast
+                    ? CARBON_THEME.G100
+                    : CARBON_THEME.G10
+                : widgetConfiguration.highContrast
+                    ? CARBON_THEME.WHITE
+                    : CARBON_THEME.G90;
+        }));
+        this._subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        this._viewContainerRefSubject$.next(this.viewRef);
+        this.openContentHeightObserver();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+        this._observer?.disconnect();
+    }
+    openContentHeightObserver() {
+        this._observer = new ResizeObserver(event => {
+            this.observerMutation(event);
+        });
+        this._observer.observe(this._widgetBlockContentRef.nativeElement);
+    }
+    observerMutation(event) {
+        const widgetContentHeight = event[0]?.borderBoxSize[0]?.blockSize;
+        if (typeof widgetContentHeight === 'number' && widgetContentHeight !== 0) {
+            this._contentHeight$.next(widgetContentHeight);
+        }
+    }
+    getPageSizeParam(widgetConfiguration) {
+        return `size=${widgetConfiguration.properties.defaultPageSize}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetBlockComponent, deps: [{ token: DossierWidgetsLayoutService }, { token: DossierTabService }, { token: i1$1.ActivatedRoute }, { token: DossierWidgetsApiService }, { token: i2$2.CdsThemeService }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: WidgetBlockComponent, isStandalone: true, selector: "valtimo-dossier-widget-block", inputs: { widget: "widget" }, viewQueries: [{ propertyName: "_widgetBlockContentRef", first: true, predicate: ["widgetBlockContent"], descendants: true }, { propertyName: "_widgetBlockRef", first: true, predicate: ["widgetBlock"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    documentId: documentId$ | async,\n    tabKey: tabKey$ | async,\n    widgetConfiguration: widget$ | async,\n    widgetData: widgetData$ | async,\n    theme: theme$ | async,\n    blockHeightPx: blockHeightPx$ | async,\n    blockWidthPercentage: blockWidthPercentage$ | async\n  } as obs\"\n>\n  <div #widgetBlock class=\"widget-block\" [attr.data-carbon-theme]=\"obs.theme\">\n    <div #widgetBlockContent class=\"widget-block__content\">\n      @if (obs.widgetData) {\n        @switch (obs.widgetConfiguration.type) {\n          @case (CaseWidgetType.TABLE) {\n            <valtimo-widget-table\n              [documentId]=\"obs.documentId\"\n              [tabKey]=\"obs.tabKey\"\n              [widgetConfiguration]=\"obs.widgetConfiguration\"\n              [widgetData]=\"obs.widgetData\"\n            ></valtimo-widget-table>\n          }\n\n          @case (CaseWidgetType.COLLECTION) {\n            <valtimo-widget-collection\n              [documentId]=\"obs.documentId\"\n              [tabKey]=\"obs.tabKey\"\n              [widgetConfiguration]=\"obs.widgetConfiguration\"\n              [widgetData]=\"obs.widgetData\"\n            ></valtimo-widget-collection>\n          }\n\n          @case (CaseWidgetType.CUSTOM) {\n            <valtimo-widget-custom [widgetConfig]=\"obs.widgetConfiguration\"></valtimo-widget-custom>\n          }\n\n          @case (CaseWidgetType.FIELDS) {\n            <valtimo-widget-field\n              [collapseVertically]=\"true\"\n              [widgetConfiguration]=\"obs.widgetConfiguration\"\n              [widgetData]=\"obs.widgetData\"\n            ></valtimo-widget-field>\n          }\n\n          @case (CaseWidgetType.FORMIO) {\n            <valtimo-widget-formio\n              [widgetConfiguration]=\"obs.widgetConfiguration\"\n              [documentId]=\"obs.documentId\"\n            ></valtimo-widget-formio>\n          }\n\n          @default {\n            <div class=\"widget-block__not-available\">\n              <valtimo-no-results\n                [collapseVertically]=\"true\"\n                [description]=\"'dossier.widgets.noWidget' | translate\"\n                [smallPadding]=\"true\"\n              ></valtimo-no-results>\n            </div>\n          }\n        }\n      } @else {\n        <div class=\"widget-block__not-available\">\n          <valtimo-no-results\n            [collapseVertically]=\"true\"\n            [description]=\"'dossier.widgets.noData' | translate\"\n            [smallPadding]=\"true\"\n          ></valtimo-no-results>\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;position:absolute}.widget-block{width:100%;height:100%;box-sizing:border-box;padding:8px;overflow-wrap:break-word;background-color:var(--cds-layer-01);background-clip:content-box}.widget-block__not-available{padding:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: WidgetTableComponent, selector: "valtimo-widget-table", inputs: ["documentId", "tabKey", "widgetConfiguration", "widgetData"] }, { kind: "component", type: WidgetCustomComponent, selector: "valtimo-widget-custom", inputs: ["widgetConfig"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: WidgetFieldComponent, selector: "valtimo-widget-field", inputs: ["collapseVertically", "widgetConfiguration", "widgetData"] }, { kind: "component", type: WidgetFormioComponent, selector: "valtimo-widget-formio", inputs: ["documentId", "widgetConfiguration"] }, { kind: "component", type: WidgetCollectionComponent, selector: "valtimo-widget-collection", inputs: ["documentId", "tabKey", "widgetConfiguration", "widgetData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetBlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-widget-block', standalone: true, imports: [
+                        CommonModule,
+                        LoadingModule,
+                        WidgetTableComponent,
+                        WidgetCustomComponent,
+                        CarbonListModule,
+                        TranslateModule,
+                        TilesModule,
+                        WidgetFieldComponent,
+                        WidgetFormioComponent,
+                        WidgetCollectionComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    documentId: documentId$ | async,\n    tabKey: tabKey$ | async,\n    widgetConfiguration: widget$ | async,\n    widgetData: widgetData$ | async,\n    theme: theme$ | async,\n    blockHeightPx: blockHeightPx$ | async,\n    blockWidthPercentage: blockWidthPercentage$ | async\n  } as obs\"\n>\n  <div #widgetBlock class=\"widget-block\" [attr.data-carbon-theme]=\"obs.theme\">\n    <div #widgetBlockContent class=\"widget-block__content\">\n      @if (obs.widgetData) {\n        @switch (obs.widgetConfiguration.type) {\n          @case (CaseWidgetType.TABLE) {\n            <valtimo-widget-table\n              [documentId]=\"obs.documentId\"\n              [tabKey]=\"obs.tabKey\"\n              [widgetConfiguration]=\"obs.widgetConfiguration\"\n              [widgetData]=\"obs.widgetData\"\n            ></valtimo-widget-table>\n          }\n\n          @case (CaseWidgetType.COLLECTION) {\n            <valtimo-widget-collection\n              [documentId]=\"obs.documentId\"\n              [tabKey]=\"obs.tabKey\"\n              [widgetConfiguration]=\"obs.widgetConfiguration\"\n              [widgetData]=\"obs.widgetData\"\n            ></valtimo-widget-collection>\n          }\n\n          @case (CaseWidgetType.CUSTOM) {\n            <valtimo-widget-custom [widgetConfig]=\"obs.widgetConfiguration\"></valtimo-widget-custom>\n          }\n\n          @case (CaseWidgetType.FIELDS) {\n            <valtimo-widget-field\n              [collapseVertically]=\"true\"\n              [widgetConfiguration]=\"obs.widgetConfiguration\"\n              [widgetData]=\"obs.widgetData\"\n            ></valtimo-widget-field>\n          }\n\n          @case (CaseWidgetType.FORMIO) {\n            <valtimo-widget-formio\n              [widgetConfiguration]=\"obs.widgetConfiguration\"\n              [documentId]=\"obs.documentId\"\n            ></valtimo-widget-formio>\n          }\n\n          @default {\n            <div class=\"widget-block__not-available\">\n              <valtimo-no-results\n                [collapseVertically]=\"true\"\n                [description]=\"'dossier.widgets.noWidget' | translate\"\n                [smallPadding]=\"true\"\n              ></valtimo-no-results>\n            </div>\n          }\n        }\n      } @else {\n        <div class=\"widget-block__not-available\">\n          <valtimo-no-results\n            [collapseVertically]=\"true\"\n            [description]=\"'dossier.widgets.noData' | translate\"\n            [smallPadding]=\"true\"\n          ></valtimo-no-results>\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;position:absolute}.widget-block{width:100%;height:100%;box-sizing:border-box;padding:8px;overflow-wrap:break-word;background-color:var(--cds-layer-01);background-clip:content-box}.widget-block__not-available{padding:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: DossierWidgetsLayoutService }, { type: DossierTabService }, { type: i1$1.ActivatedRoute }, { type: DossierWidgetsApiService }, { type: i2$2.CdsThemeService }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }], propDecorators: { _widgetBlockContentRef: [{
+                type: ViewChild,
+                args: ['widgetBlockContent']
+            }], _widgetBlockRef: [{
+                type: ViewChild,
+                args: ['widgetBlock']
+            }], widget: [{
+                type: Input
+            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1922,6 +2691,55 @@ const CASE_WITHOUT_STATUS_STATUS = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class WidgetsContainerComponent {
+    set widgets(value) {
+        const widgetsWithUuids = value.map(widget => ({ ...widget, uuid: v4() }));
+        this.dossierWidgetsLayoutService.setWidgets(widgetsWithUuids);
+        this.widgetsWithUuids$.next(widgetsWithUuids);
+    }
+    constructor(dossierWidgetsLayoutService) {
+        this.dossierWidgetsLayoutService = dossierWidgetsLayoutService;
+        this.widgetsWithUuids$ = new BehaviorSubject([]);
+    }
+    ngAfterViewInit() {
+        this._observer = new ResizeObserver(event => {
+            this.observerMutation(event);
+        });
+        this._observer.observe(this._widgetsContainerRef.nativeElement);
+        this.initMuuri();
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+    }
+    observerMutation(event) {
+        const containerWidth = event[0]?.borderBoxSize[0]?.inlineSize;
+        if (typeof containerWidth === 'number' && containerWidth !== 0) {
+            this.dossierWidgetsLayoutService.setContainerWidth(containerWidth);
+            this.dossierWidgetsLayoutService.triggerMuuriLayout();
+        }
+    }
+    initMuuri() {
+        this.dossierWidgetsLayoutService.loaded$.pipe(take(1), delay(300)).subscribe(() => {
+            this.dossierWidgetsLayoutService.setMuuri(new Muuri(this._widgetsContainerRef.nativeElement, {
+                layout: {
+                    fillGaps: true,
+                },
+                layoutOnResize: false,
+            }));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetsContainerComponent, deps: [{ token: DossierWidgetsLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: WidgetsContainerComponent, isStandalone: true, selector: "valtimo-dossier-widgets-container", inputs: { widgets: "widgets" }, viewQueries: [{ propertyName: "_widgetsContainerRef", first: true, predicate: ["widgetsContainer"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div #widgetsContainer class=\"widgets-container\">\n  @for (widget of widgetsWithUuids$ | async; track widget.uuid) {\n    <valtimo-dossier-widget-block [widget]=\"widget\"></valtimo-dossier-widget-block>\n  }\n</div>\n", styles: [".widgets-container{position:relative;width:calc(100% + 16px);margin-left:-8px;margin-top:-8px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "component", type: WidgetBlockComponent, selector: "valtimo-dossier-widget-block", inputs: ["widget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetsContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-widgets-container', standalone: true, imports: [CommonModule, WidgetBlockComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div #widgetsContainer class=\"widgets-container\">\n  @for (widget of widgetsWithUuids$ | async; track widget.uuid) {\n    <valtimo-dossier-widget-block [widget]=\"widget\"></valtimo-dossier-widget-block>\n  }\n</div>\n", styles: [".widgets-container{position:relative;width:calc(100% + 16px);margin-left:-8px;margin-top:-8px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: DossierWidgetsLayoutService }], propDecorators: { _widgetsContainerRef: [{
+                type: ViewChild,
+                args: ['widgetsContainer']
+            }], widgets: [{
+                type: Input
+            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1938,40 +2756,50 @@ const CASE_WITHOUT_STATUS_STATUS = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierDetailTabFormioComponent {
-    constructor(tabService, route, formService) {
-        this.tabService = tabService;
+class DossierDetailWidgetsComponent {
+    constructor(route, dossierTabService, widgetsApiService, dossierWidgetsLayoutService) {
         this.route = route;
-        this.formService = formService;
-        this.loading$ = new BehaviorSubject(true);
-        this.formNotFound$ = new BehaviorSubject('');
-        this.noFormSpecified$ = new BehaviorSubject(false);
-        this.prefilledForm$ = combineLatest([
-            this.tabService.tabs$,
-            this.route.params,
-        ]).pipe(switchMap(([tabs, params]) => {
-            const currentTabName = params?.tab;
-            const documentId = params?.documentId;
-            const currentTab = tabs.find(tab => tab.name === currentTabName);
-            if (!documentId || !currentTab?.contentKey) {
-                this.noFormSpecified$.next(true);
-                return of(null);
-            }
-            this._formDefinitionName = currentTab.contentKey;
-            return this.formService.getFormDefinitionByNamePreFilled(currentTab.contentKey, documentId);
-        }), tap(() => this.loading$.next(false)), catchError(() => {
-            this.formNotFound$.next(this._formDefinitionName);
-            this.loading$.next(false);
-            return of(null);
-        }));
+        this.dossierTabService = dossierTabService;
+        this.widgetsApiService = widgetsApiService;
+        this.dossierWidgetsLayoutService = dossierWidgetsLayoutService;
+        this._noMargin = true;
+        this._noBackground = true;
+        this._noMinHeight = true;
+        this._documentId$ = this.route.params.pipe(map(params => params?.documentId), filter(documentId => !!documentId));
+        this._tabKey$ = this.dossierTabService.activeTabKey$;
+        this.loadingWidgetConfiguration$ = new BehaviorSubject(true);
+        this.widgetConfiguration$ = combineLatest([this._documentId$, this._tabKey$]).pipe(switchMap(([documentId, tabKey]) => this.widgetsApiService.getWidgetTabConfiguration(documentId, tabKey)), tap(() => this.loadingWidgetConfiguration$.next(false)));
+        this.loaded$ = this.dossierWidgetsLayoutService.loaded$.pipe(delay(400));
+    }
+    ngOnInit() {
+        this.dossierTabService.disableTabHorizontalOverflow();
+    }
+    ngOnDestroy() {
+        this.dossierWidgetsLayoutService.reset();
+        this.dossierTabService.enableTabHorizontalOverflow();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabFormioComponent, deps: [{ token: DossierTabService }, { token: i1$1.ActivatedRoute }, { token: i5.FormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierDetailTabFormioComponent, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    prefilledForm: prefilledForm$ | async,\n    loading: loading$ | async,\n    formNotFound: formNotFound$ | async,\n    noFormSpecified: noFormSpecified$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n\n  <p *ngIf=\"obs.formNotFound\" class=\"error-message\">\n    {{ 'dossier.formio.formNotFound' | translate: {formDefinitionName: obs.formNotFound} }}\n  </p>\n\n  <p *ngIf=\"obs.noFormSpecified\" class=\"error-message\">\n    {{ 'dossier.formio.noFormSpecified' | translate }}\n  </p>\n\n  <valtimo-form-io *ngIf=\"obs.prefilledForm\" [form]=\"obs.prefilledForm\"> </valtimo-form-io>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i10$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailWidgetsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DossierTabService }, { token: DossierWidgetsApiService }, { token: DossierWidgetsLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DossierDetailWidgetsComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class.tab--no-margin": "this._noMargin", "class.tab--no-background": "this._noBackground", "class.tab--no-min-height": "this._noMinHeight" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    loadingWidgetConfiguration: loadingWidgetConfiguration$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n    loaded: loaded$ | async\n  } as obs\"\n>\n  <ng-container\n    *ngIf=\"{\n      noWidgetsConfigured:\n        obs.widgetConfiguration?.widgets && obs.widgetConfiguration.widgets.length === 0\n    } as vars\"\n  >\n    @if (!obs.loaded && !vars.noWidgetsConfigured) {\n      <div class=\"loading-container\">\n        <cds-loading></cds-loading>\n      </div>\n    }\n\n    @if (vars.noWidgetsConfigured) {\n      <valtimo-no-results\n        [title]=\"'dossier.widgets.noWidgets' | translate\"\n        [description]=\"'dossier.widgets.noWidgetsDescription' | translate\"\n        illustration=\"valtimo-layout/img/no-widgets.svg\"\n      ></valtimo-no-results>\n    }\n\n    <div [style.visibility]=\"!obs.loaded ? 'hidden' : 'visible'\">\n      <valtimo-dossier-widgets-container\n        [widgets]=\"obs.widgetConfiguration?.widgets || []\"\n      ></valtimo-dossier-widgets-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;justify-content:center;padding:16px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: WidgetsContainerComponent, selector: "valtimo-dossier-widgets-container", inputs: ["widgets"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabFormioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailWidgetsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    prefilledForm: prefilledForm$ | async,\n    loading: loading$ | async,\n    formNotFound: formNotFound$ | async,\n    noFormSpecified: noFormSpecified$ | async\n  } as obs\"\n>\n  <div *ngIf=\"obs.loading\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n\n  <p *ngIf=\"obs.formNotFound\" class=\"error-message\">\n    {{ 'dossier.formio.formNotFound' | translate: {formDefinitionName: obs.formNotFound} }}\n  </p>\n\n  <p *ngIf=\"obs.noFormSpecified\" class=\"error-message\">\n    {{ 'dossier.formio.noFormSpecified' | translate }}\n  </p>\n\n  <valtimo-form-io *ngIf=\"obs.prefilledForm\" [form]=\"obs.prefilledForm\"> </valtimo-form-io>\n</ng-container>\n", styles: [".loading-container{display:flex;width:100%;flex-direction:row;justify-content:center}.error-message{text-align:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: DossierTabService }, { type: i1$1.ActivatedRoute }, { type: i5.FormService }] });
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        LoadingModule,
+                        WidgetsContainerComponent,
+                        CarbonListModule,
+                        TranslateModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    loadingWidgetConfiguration: loadingWidgetConfiguration$ | async,\n    widgetConfiguration: widgetConfiguration$ | async,\n    loaded: loaded$ | async\n  } as obs\"\n>\n  <ng-container\n    *ngIf=\"{\n      noWidgetsConfigured:\n        obs.widgetConfiguration?.widgets && obs.widgetConfiguration.widgets.length === 0\n    } as vars\"\n  >\n    @if (!obs.loaded && !vars.noWidgetsConfigured) {\n      <div class=\"loading-container\">\n        <cds-loading></cds-loading>\n      </div>\n    }\n\n    @if (vars.noWidgetsConfigured) {\n      <valtimo-no-results\n        [title]=\"'dossier.widgets.noWidgets' | translate\"\n        [description]=\"'dossier.widgets.noWidgetsDescription' | translate\"\n        illustration=\"valtimo-layout/img/no-widgets.svg\"\n      ></valtimo-no-results>\n    }\n\n    <div [style.visibility]=\"!obs.loaded ? 'hidden' : 'visible'\">\n      <valtimo-dossier-widgets-container\n        [widgets]=\"obs.widgetConfiguration?.widgets || []\"\n      ></valtimo-dossier-widgets-container>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".loading-container{display:flex;justify-content:center;padding:16px 0}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DossierTabService }, { type: DossierWidgetsApiService }, { type: DossierWidgetsLayoutService }], propDecorators: { _noMargin: [{
+                type: HostBinding,
+                args: ['class.tab--no-margin']
+            }], _noBackground: [{
+                type: HostBinding,
+                args: ['class.tab--no-background']
+            }], _noMinHeight: [{
+                type: HostBinding,
+                args: ['class.tab--no-min-height']
+            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1988,16 +2816,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierTabApiService {
-    constructor(configService, http) {
+class DossierTabApiService extends BaseApiService {
+    constructor(httpClient, configService) {
+        super(httpClient, configService);
+        this.httpClient = httpClient;
         this.configService = configService;
-        this.http = http;
-        this.VALTIMO_API_ENDPOINT_URI = this.configService.config.valtimoApi.endpointUri;
     }
-    getDossierTabs(documentDefinitionName) {
-        return this.http.get(`${this.VALTIMO_API_ENDPOINT_URI}v1/case-definition/${documentDefinitionName}/tab`);
+    getDossierTabs(documentDefinitionName, documentId) {
+        return this.configService
+            .getFeatureToggleObservable('enableCaseWidgets')
+            .pipe(switchMap(enableCaseWidgets => enableCaseWidgets
+            ? this.httpClient.get(this.getApiUrl(`v1/document/${documentId}/tab`))
+            : this.httpClient.get(this.getApiUrl(`v1/case-definition/${documentDefinitionName}/tab`))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabApiService, deps: [{ token: i1.ConfigService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabApiService, deps: [{ token: i2.HttpClient }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabApiService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierTabApiService, decorators: [{
@@ -2005,7 +2837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.ConfigService }, { type: i2.HttpClient }] });
+        }], ctorParameters: () => [{ type: i2.HttpClient }, { type: i1.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -2023,9 +2855,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class DossierTabService {
+    get tabHorizontalOverflowDisabled() {
+        return this._tabHorizontalOverflowDisabled.asReadonly();
+    }
     get tabs$() {
         return this._tabs$.pipe(filter(tabs => !!tabs));
     }
+    get activeTab$() {
+        return this._tabLoader$.pipe(filter(tabLoader => !!tabLoader), switchMap(tabLoader => tabLoader.activeTab$));
+    }
+    get activeTabKey$() {
+        return this.activeTab$.pipe(map(tab => tab.name));
+    }
+    get showTaskList$() {
+        return this._tabLoader$.pipe(filter(tabLoader => !!tabLoader), switchMap(tabLoader => tabLoader.activeTab$), map(activeTab => !!activeTab?.showTasks || activeTab.contentKey === DefaultTabs.summary));
+    }
     constructor(tabMap = DEFAULT_TABS, caseTabConfig, zgwObjectTypeComponent, configService, route, dossierTabApiService) {
         this.tabMap = tabMap;
         this.caseTabConfig = caseTabConfig;
@@ -2034,8 +2878,11 @@ class DossierTabService {
         this.route = route;
         this.dossierTabApiService = dossierTabApiService;
         this._documentDefinitionName$ = this.route.params.pipe(map(params => params?.documentDefinitionName), filter(documentDefinitionName => !!documentDefinitionName));
+        this._documentId$ = this.route.params.pipe(map(params => params?.documentId), filter(documentId => !!documentId));
         this._tabs$ = new BehaviorSubject(null);
         this._subscriptions = new Subscription();
+        this._tabLoader$ = new BehaviorSubject(null);
+        this._tabHorizontalOverflowDisabled = signal(false);
         this._tabManagementEnabled =
             this.configService.config.featureToggles?.enableTabManagement ?? true;
         this.openDocumentDefinitionNameSubscription();
@@ -2043,6 +2890,15 @@ class DossierTabService {
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
+    setTabLoader(tabLoader) {
+        this._tabLoader$.next(tabLoader);
+    }
+    disableTabHorizontalOverflow() {
+        this._tabHorizontalOverflowDisabled.set(true);
+    }
+    enableTabHorizontalOverflow() {
+        this._tabHorizontalOverflowDisabled.set(false);
+    }
     getConfigurableTabs(documentDefinitionName) {
         const tabMap = new Map();
         if (this.configService?.config?.caseObjectTypes) {
@@ -2066,9 +2922,9 @@ class DossierTabService {
         return tabs;
     }
     openDocumentDefinitionNameSubscription() {
-        this._subscriptions.add(this._documentDefinitionName$.subscribe(documentDefinitionName => {
+        this._subscriptions.add(combineLatest([this._documentDefinitionName$, this._documentId$]).subscribe(([documentDefinitionName, documentId]) => {
             if (this._tabManagementEnabled) {
-                this.setApiTabs(documentDefinitionName);
+                this.setApiTabs(documentDefinitionName, documentId);
             }
             else {
                 this.setEnvironmentTabs(documentDefinitionName);
@@ -2080,8 +2936,8 @@ class DossierTabService {
         const allEnvironmentTabs = this.getAllEnvironmentTabs(configurableTabs);
         this._tabs$.next(allEnvironmentTabs);
     }
-    setApiTabs(documentDefinitionName) {
-        this.dossierTabApiService.getDossierTabs(documentDefinitionName).subscribe({
+    setApiTabs(documentDefinitionName, documentId) {
+        this.dossierTabApiService.getDossierTabs(documentDefinitionName, documentId).subscribe({
             next: tabs => {
                 const supportedTabs = tabs.filter(tab => this.filterTab(tab));
                 const mappedTabs = supportedTabs.map((tab, index) => this.mapTab(tab, index));
@@ -2105,11 +2961,14 @@ class DossierTabService {
     mapTab(tab, index) {
         switch (tab.type) {
             case ApiTabType.STANDARD:
-                return new TabImpl(tab.key, index, DEFAULT_TAB_COMPONENTS[tab.contentKey], tab.contentKey, tab.name);
+                return new TabImpl(tab.key, index, DEFAULT_TAB_COMPONENTS[tab.contentKey], tab.contentKey, tab.name, tab.showTasks);
             case ApiTabType.FORMIO:
-                return new TabImpl(tab.key, index, DossierDetailTabFormioComponent, tab.contentKey, tab.name);
+                return new TabImpl(tab.key, index, DossierDetailTabFormioComponent, tab.contentKey, tab.name, tab.showTasks);
             case ApiTabType.CUSTOM:
-                return new TabImpl(tab.key, index, this.caseTabConfig[tab.contentKey], tab.contentKey, tab.name);
+                return new TabImpl(tab.key, index, this.caseTabConfig[tab.contentKey], tab.contentKey, tab.name, tab.showTasks);
+            case ApiTabType.WIDGETS:
+                return (this.configService.featureToggles?.enableCaseWidgets &&
+                    new TabImpl(tab.key, index, DossierDetailWidgetsComponent, tab.contentKey, tab.name, tab.showTasks));
             default:
                 return null;
         }
@@ -2230,6 +3089,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 }]
         }] });
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierWidgetsApiService extends BaseApiService {
+    constructor(httpClient, configService) {
+        super(httpClient, configService);
+        this.httpClient = httpClient;
+        this.configService = configService;
+    }
+    getWidgetTabConfiguration(documentId, tabKey) {
+        return this.httpClient.get(this.getApiUrl(`v1/document/${documentId}/widget-tab/${tabKey}`));
+    }
+    getWidgetData(documentId, tabKey, widgetKey, queryParams) {
+        return this.httpClient.get(this.getApiUrl(!queryParams
+            ? `v1/document/${documentId}/widget-tab/${tabKey}/widget/${widgetKey}`
+            : `v1/document/${documentId}/widget-tab/${tabKey}/widget/${widgetKey}?${queryParams}`), { headers: new HttpHeaders().set(InterceptorSkip, '404') });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierWidgetsApiService, deps: [{ token: i2.HttpClient }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierWidgetsApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierWidgetsApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i2.HttpClient }, { type: i1.ConfigService }] });
+
+class DossierWidgetsLayoutService {
+    get _muuri$() {
+        return this._muuriSubject$.pipe(filter(muuri => !!muuri));
+    }
+    get _containerWidth$() {
+        return this._containerWidthSubject$.pipe(filter(width => width !== null));
+    }
+    get amountOfColumns$() {
+        return this._containerWidth$.pipe(map(containerWidth => Math.floor(containerWidth / WIDGET_WIDTH_1X)));
+    }
+    get _widgets$() {
+        return this._widgetsSubject$.pipe(filter(widgets => widgets !== null));
+    }
+    get _caseWidgetDataLoaded$() {
+        return this._caseWidgetDataLoadedSubject$.pipe(filter(loaded => loaded !== null));
+    }
+    get loaded$() {
+        return combineLatest([
+            this._caseWidgetDataLoaded$,
+            this._widgets$,
+            this._widgetsWithExternalData$,
+            this._widgetsWithExternalDataReady$,
+            this._containerWidth$,
+        ]).pipe(map(([caseWidgetDataLoaded, widgets, widgetsWithExternalData, widgetsWithExternalDataReady]) => caseWidgetDataLoaded?.length === widgets.length &&
+            widgetsWithExternalData.length === widgetsWithExternalDataReady.length), filter(loaded => !!loaded));
+    }
+    constructor() {
+        this._containerWidthSubject$ = new BehaviorSubject(null);
+        this._widgetsSubject$ = new BehaviorSubject(null);
+        this._caseWidgetDataLoadedSubject$ = new BehaviorSubject(null);
+        this._muuriSubject$ = new BehaviorSubject(null);
+        this._triggerMuuriLayout$ = new Subject();
+        this._widgetsWithExternalData$ = new BehaviorSubject([]);
+        this._widgetsWithExternalDataReady$ = new BehaviorSubject([]);
+        this._subscriptions = new Subscription();
+        this.openMuuriSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    setMuuri(muuri) {
+        this._muuriSubject$.next(muuri);
+    }
+    triggerMuuriLayout() {
+        this._triggerMuuriLayout$.next(null);
+    }
+    setWidgets(widgets) {
+        this._widgetsSubject$.next(widgets);
+    }
+    setWidgetWithExternalData(uuid) {
+        this._widgetsWithExternalData$.pipe(take(1)).subscribe(widgetsWithExternalData => {
+            this._widgetsWithExternalData$.next([...widgetsWithExternalData, uuid]);
+        });
+    }
+    setWidgetWithExternalDataReady(uuid) {
+        this._widgetsWithExternalDataReady$.pipe(take(1)).subscribe(widgetsWithExternalDataReady => {
+            this._widgetsWithExternalDataReady$.next([...widgetsWithExternalDataReady, uuid]);
+        });
+    }
+    setContainerWidth(width) {
+        this._containerWidthSubject$.next(width);
+    }
+    setCaseWidgetDataLoaded(uuid) {
+        this._caseWidgetDataLoadedSubject$.pipe(take(1)).subscribe(caseWidgetDataLoaded => {
+            if (!(caseWidgetDataLoaded || []).includes(uuid)) {
+                this._caseWidgetDataLoadedSubject$.next([...(caseWidgetDataLoaded || []), uuid]);
+            }
+        });
+    }
+    reset() {
+        this._containerWidthSubject$.next(null);
+        this._widgetsSubject$.next(null);
+        this._caseWidgetDataLoadedSubject$.next(null);
+        this._widgetsWithExternalData$.next([]);
+        this._widgetsWithExternalDataReady$.next([]);
+        this._muuriSubject$.next(null);
+    }
+    openMuuriSubscription() {
+        this._subscriptions.add(combineLatest([this._muuri$, this._triggerMuuriLayout$])
+            .pipe(debounceTime(150))
+            .subscribe(([muuri]) => {
+            muuri.refreshItems();
+            muuri.layout();
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierWidgetsLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierWidgetsLayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierWidgetsLayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -2296,7 +3287,7 @@ class DossierBulkAssignModalComponent {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierBulkAssignModalComponent, deps: [{ token: DossierBulkAssignService }, { token: i2$4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: { documentIds: "documentIds", open: "open" }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "class": "this.modalClass" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"open\" (close)=\"closeModal()\" showFooter=\"true\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dossier.bulkAssign.modal.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form *ngIf=\"candidateUsers$ | async as candidateUsers\" [formGroup]=\"formGroup\">\n      <cds-combo-box\n        formControlName=\"assignee\"\n        [dropUp]=\"false\"\n        [items]=\"candidateUsers\"\n        [label]=\"'dossier.bulkAssign.modal.selectLabel' | translate\"\n        [placeholder]=\"'dossier.bulkAssign.modal.selectPlaceholder' | translate\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">{{ 'interface.cancel' | translate }}</button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"closeModal(true)\">\n      {{ 'dossier.bulkAssign.modal.confirm' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["::ng-deep .valtimo-dossier-bulk-assign-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-container,::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-content{overflow:unset}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i10$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i10$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i10$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i10$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i10$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i10$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i10$1.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: { documentIds: "documentIds", open: "open" }, outputs: { closeEvent: "closeEvent" }, host: { properties: { "class": "this.modalClass" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal [open]=\"open\" (close)=\"closeModal()\" showFooter=\"true\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'dossier.bulkAssign.modal.title' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form *ngIf=\"candidateUsers$ | async as candidateUsers\" [formGroup]=\"formGroup\">\n      <cds-combo-box\n        formControlName=\"assignee\"\n        [dropUp]=\"false\"\n        [items]=\"candidateUsers\"\n        [label]=\"'dossier.bulkAssign.modal.selectLabel' | translate\"\n        [placeholder]=\"'dossier.bulkAssign.modal.selectPlaceholder' | translate\"\n      >\n        <cds-dropdown-list></cds-dropdown-list>\n      </cds-combo-box>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">{{ 'interface.cancel' | translate }}</button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"closeModal(true)\">\n      {{ 'dossier.bulkAssign.modal.confirm' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["::ng-deep .valtimo-dossier-bulk-assign-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-container,::ng-deep .valtimo-dossier-bulk-assign-modal .cds--modal-content{overflow:unset}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierBulkAssignModalComponent, decorators: [{
             type: Component,
@@ -2312,6 +3303,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 type: Output
             }] } });
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+moment$1.locale(localStorage.getItem('langKey') || '');
+moment$1.defaultFormat = 'DD MMM YYYY HH:mm';
+class DossierDetailTaskListComponent {
+    constructor(documentService, processService, route, permissionService) {
+        this.documentService = documentService;
+        this.processService = processService;
+        this.route = route;
+        this.permissionService = permissionService;
+        this.loadingTasks$ = new BehaviorSubject(true);
+        this._refresh$ = new BehaviorSubject(null);
+        this._documentId$ = this.route.params.pipe(map(params => params?.documentId), filter(documentId => !!documentId));
+        this.processInstanceTasks$ = this._refresh$.pipe(switchMap(() => this._documentId$), switchMap(documentId => this.documentService
+            .findProcessDocumentInstances(documentId)
+            .pipe(repeat({ count: 5, delay: 1500 }))), switchMap(processDocumentInstances => combineLatest([
+            ...processDocumentInstances.map(processDocumentInstance => this.processService.getProcessInstanceTasks(processDocumentInstance.id.processInstanceId)),
+        ])), map(res => res.reduce((acc, curr) => [...acc, ...curr], [])), switchMap(tasks => combineLatest([
+            of(tasks),
+            ...(tasks || []).map(task => this.permissionService.requestPermission(CAN_VIEW_TASK_PERMISSION, {
+                resource: TASK_DETAIL_PERMISSION_RESOURCE.task,
+                identifier: task.id,
+            })),
+        ])), map(res => {
+            const tasks = res[0] || [];
+            const permissions = res?.filter((_, index) => index !== 0);
+            const mappedTasks = this.mapTasks(tasks, permissions);
+            const uniqueTasks = this.getUniqueTasks(mappedTasks);
+            return this.getSortedTasks(uniqueTasks);
+        }), tap(() => this.loadingTasks$.next(false)));
+    }
+    rowTaskClick(task) {
+        if (task.isLocked)
+            return;
+        this._taskDetailModal.openTaskDetails(task);
+    }
+    refresh() {
+        this._refresh$.next(null);
+    }
+    mapTasks(tasks, permissions) {
+        return tasks.map((task, index) => ({
+            ...task,
+            createdUnix: moment$1(task.created).unix(),
+            created: moment$1(task.created).format('DD MMM YYYY HH:mm'),
+            ...(task.due && { dueUnix: moment$1(task.due).unix() }),
+            isLocked: !permissions[index],
+        }));
+    }
+    getUniqueTasks(tasks) {
+        return tasks.reduce((acc, curr) => {
+            if (!acc.find(task => task.id === curr.id)) {
+                return [...acc, curr];
+            }
+            return acc;
+        }, []);
+    }
+    getSortedTasks(tasks) {
+        return tasks.sort((t1, t2) => {
+            // high priority tasks on top
+            if (t2.priority !== t1.priority) {
+                return t2.priority - t1.priority;
+            }
+            // task with approaching due date on top
+            const due1 = t1?.dueUnix || Number.MAX_VALUE;
+            const due2 = t2?.dueUnix || Number.MAX_VALUE;
+            if (due1 !== due2) {
+                return due1 - due2;
+            }
+            // new task on top
+            const createdCompare = t2.createdUnix / 5000 - t1.createdUnix / 5000;
+            if (createdCompare !== 0) {
+                return createdCompare;
+            }
+            // task with approximately the same age, are sorted by name
+            return t1.name.localeCompare(t2.name);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTaskListComponent, deps: [{ token: i2$1.DocumentService }, { token: i2$3.ProcessService }, { token: i1$1.ActivatedRoute }, { token: i7.PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DossierDetailTaskListComponent, isStandalone: true, selector: "valtimo-dossier-detail-task-list", viewQueries: [{ propertyName: "_taskDetailModal", first: true, predicate: ["taskDetail"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"task-list\"\n  *ngIf=\"{loadingTasks: loadingTasks$ | async, tasks: processInstanceTasks$ | async} as obs\"\n>\n  <h2 class=\"task-list__title\">{{ 'summary.userTasks' | translate }}</h2>\n\n  <div\n    class=\"task-list__tasks-container\"\n    cdsLayer=\"1\"\n    *ngIf=\"!obs.loadingTasks && obs.tasks; else loadingTasksTemplate\"\n  >\n    @if (obs.tasks.length === 0) {\n      <ng-container *ngTemplateOutlet=\"noTasksTemplate\"></ng-container>\n    } @else {\n      @for (task of obs.tasks; track task.id) {\n        <ng-container *ngTemplateOutlet=\"taskTemplate; context: {task: task}\"></ng-container>\n      }\n    }\n  </div>\n\n  <valtimo-task-detail-modal\n    #taskDetail\n    (formSubmit)=\"refresh()\"\n    (assignmentOfTaskChanged)=\"refresh()\"\n  ></valtimo-task-detail-modal>\n</div>\n\n<ng-template #taskTemplate let-task=\"task\">\n  <cds-clickable-tile (click)=\"rowTaskClick(task)\">\n    <div class=\"task\">\n      <div class=\"task__header\">\n        <span class=\"task__title\">{{ task.name }}</span>\n\n        <cds-tag class=\"cds-tag--no-margin\" [type]=\"task.locked ? 'cool-gray' : 'green'\">\n          @if (!task.locked) {\n            {{ 'summary.taskOpen' | translate }}\n          } @else {\n            <i class=\"icon mdi mdi-lock\"></i>\n          }\n        </cds-tag>\n      </div>\n\n      <div class=\"task__description\">\n        {{ 'summary.taskCreated' | translate }} {{ task.created }}\n      </div>\n    </div>\n  </cds-clickable-tile>\n</ng-template>\n\n<ng-template #noTasksTemplate>\n  <valtimo-no-results\n    [alwaysRenderVertically]=\"true\"\n    illustration=\"valtimo-layout/img/emptystate-success.svg\"\n    [description]=\"'summary.userTasksDoneState' | translate\"\n    [smallPadding]=\"true\"\n  ></valtimo-no-results>\n</ng-template>\n\n<ng-template #loadingTasksTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: [".task-list{width:412px;background-color:var(--cds-layer);padding:24px;display:flex;flex-direction:column}.task-list__title{font-size:24px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:16px}.task-list__tasks-container,.task{display:flex;flex-direction:column;gap:8px}.task__header{display:flex;justify-content:space-between;align-items:center;gap:8px}.task__title,.task__description{font-size:14px;font-style:normal;font-weight:600;line-height:20px;letter-spacing:.16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task__description{font-weight:400}.loading-container{width:100%;display:flex;justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: WidgetModule }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: TaskModule }, { kind: "component", type: i1$3.TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i4.ClickableTile, selector: "cds-clickable-tile, ibm-clickable-tile", inputs: ["theme", "href", "target", "disabled", "route", "routeExtras"], outputs: ["navigation"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i4.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTaskListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-detail-task-list', standalone: true, imports: [
+                        CommonModule,
+                        NgbTooltipModule,
+                        TranslateModule,
+                        WidgetModule,
+                        LoadingModule,
+                        TaskModule,
+                        TilesModule,
+                        LayerModule,
+                        TagModule,
+                        CarbonListModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"task-list\"\n  *ngIf=\"{loadingTasks: loadingTasks$ | async, tasks: processInstanceTasks$ | async} as obs\"\n>\n  <h2 class=\"task-list__title\">{{ 'summary.userTasks' | translate }}</h2>\n\n  <div\n    class=\"task-list__tasks-container\"\n    cdsLayer=\"1\"\n    *ngIf=\"!obs.loadingTasks && obs.tasks; else loadingTasksTemplate\"\n  >\n    @if (obs.tasks.length === 0) {\n      <ng-container *ngTemplateOutlet=\"noTasksTemplate\"></ng-container>\n    } @else {\n      @for (task of obs.tasks; track task.id) {\n        <ng-container *ngTemplateOutlet=\"taskTemplate; context: {task: task}\"></ng-container>\n      }\n    }\n  </div>\n\n  <valtimo-task-detail-modal\n    #taskDetail\n    (formSubmit)=\"refresh()\"\n    (assignmentOfTaskChanged)=\"refresh()\"\n  ></valtimo-task-detail-modal>\n</div>\n\n<ng-template #taskTemplate let-task=\"task\">\n  <cds-clickable-tile (click)=\"rowTaskClick(task)\">\n    <div class=\"task\">\n      <div class=\"task__header\">\n        <span class=\"task__title\">{{ task.name }}</span>\n\n        <cds-tag class=\"cds-tag--no-margin\" [type]=\"task.locked ? 'cool-gray' : 'green'\">\n          @if (!task.locked) {\n            {{ 'summary.taskOpen' | translate }}\n          } @else {\n            <i class=\"icon mdi mdi-lock\"></i>\n          }\n        </cds-tag>\n      </div>\n\n      <div class=\"task__description\">\n        {{ 'summary.taskCreated' | translate }} {{ task.created }}\n      </div>\n    </div>\n  </cds-clickable-tile>\n</ng-template>\n\n<ng-template #noTasksTemplate>\n  <valtimo-no-results\n    [alwaysRenderVertically]=\"true\"\n    illustration=\"valtimo-layout/img/emptystate-success.svg\"\n    [description]=\"'summary.userTasksDoneState' | translate\"\n    [smallPadding]=\"true\"\n  ></valtimo-no-results>\n</ng-template>\n\n<ng-template #loadingTasksTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: [".task-list{width:412px;background-color:var(--cds-layer);padding:24px;display:flex;flex-direction:column}.task-list__title{font-size:24px;font-style:normal;font-weight:600;line-height:24px;margin-bottom:16px}.task-list__tasks-container,.task{display:flex;flex-direction:column;gap:8px}.task__header{display:flex;justify-content:space-between;align-items:center;gap:8px}.task__title,.task__description{font-size:14px;font-style:normal;font-weight:600;line-height:20px;letter-spacing:.16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task__description{font-weight:400}.loading-container{width:100%;display:flex;justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.DocumentService }, { type: i2$3.ProcessService }, { type: i1$1.ActivatedRoute }, { type: i7.PermissionService }], propDecorators: { _taskDetailModal: [{
+                type: ViewChild,
+                args: ['taskDetail']
+            }] } });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -2407,13 +3510,13 @@ class DossierSupportingProcessStartModalComponent {
             queryParams: { process: this.processDefinitionKey$.getValue() },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierSupportingProcessStartModalComponent, deps: [{ token: i1$1.Router }, { token: i2$2.ProcessService }, { token: i4$1.ProcessLinkService }, { token: i6$1.UserProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["supportingProcessStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  *ngIf=\"{\n    processDefinitionKey: processDefinitionKey$ | async,\n    processName: processName$ | async\n  } as vars\"\n  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"\n    (vars.processDefinitionKey | translate) !== vars.processDefinitionKey\n      ? (vars.processDefinitionKey | translate)\n      : vars.processName\n  \"\n>\n  <div body *ngIf=\"formDefinition$ | async as formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission$ | async\"\n      [form]=\"formDefinition\"\n      [options]=\"options$ | async\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId$ | async as formFlowInstanceId\">\n    <valtimo-form-flow\n      #formFlow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n\n  <ng-container\n    *ngIf=\"{\n      formDefinition: formDefinition$ | async,\n      formFlowInstanceId: formFlowInstanceId$ | async\n    } as obs\"\n  >\n    <div body *ngIf=\"!obs.formDefinition && !obs.formFlowInstanceId\">\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          (isAdmin$ | async)\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</valtimo-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i2$3.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i4$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierSupportingProcessStartModalComponent, deps: [{ token: i1$1.Router }, { token: i2$3.ProcessService }, { token: i4$2.ProcessLinkService }, { token: i4$3.UserProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["supportingProcessStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  *ngIf=\"{\n    processDefinitionKey: processDefinitionKey$ | async,\n    processName: processName$ | async\n  } as vars\"\n  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"\n    (vars.processDefinitionKey | translate) !== vars.processDefinitionKey\n      ? (vars.processDefinitionKey | translate)\n      : vars.processName\n  \"\n>\n  <div body *ngIf=\"formDefinition$ | async as formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission$ | async\"\n      [form]=\"formDefinition\"\n      [options]=\"options$ | async\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId$ | async as formFlowInstanceId\">\n    <valtimo-form-flow\n      #formFlow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n\n  <ng-container\n    *ngIf=\"{\n      formDefinition: formDefinition$ | async,\n      formFlowInstanceId: formFlowInstanceId$ | async\n    } as obs\"\n  >\n    <div body *ngIf=\"!obs.formDefinition && !obs.formFlowInstanceId\">\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          (isAdmin$ | async)\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</valtimo-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i2$2.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: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierSupportingProcessStartModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-supporting-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  *ngIf=\"{\n    processDefinitionKey: processDefinitionKey$ | async,\n    processName: processName$ | async\n  } as vars\"\n  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"\n    (vars.processDefinitionKey | translate) !== vars.processDefinitionKey\n      ? (vars.processDefinitionKey | translate)\n      : vars.processName\n  \"\n>\n  <div body *ngIf=\"formDefinition$ | async as formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission$ | async\"\n      [form]=\"formDefinition\"\n      [options]=\"options$ | async\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId$ | async as formFlowInstanceId\">\n    <valtimo-form-flow\n      #formFlow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n\n  <ng-container\n    *ngIf=\"{\n      formDefinition: formDefinition$ | async,\n      formFlowInstanceId: formFlowInstanceId$ | async\n    } as obs\"\n  >\n    <div body *ngIf=\"!obs.formDefinition && !obs.formFlowInstanceId\">\n      <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n        {{\n          (isAdmin$ | async)\n            ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n            : ('formManagement.noFormDefinitionFoundUser' | translate)\n        }}\n      </div>\n      <div class=\"mb-0 mt-4 p-3 text-center\">\n        <button\n          class=\"btn btn-secondary btn-space\"\n          type=\"button\"\n          (click)=\"gotoFormLinkScreen()\"\n          id=\"form-link-button\"\n        >\n          {{ 'formManagement.gotoProcessLinksButton' | translate }}\n        </button>\n      </div>\n    </div>\n  </ng-container>\n</valtimo-modal>\n", styles: ["#supportingProcessStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i2$2.ProcessService }, { type: i4$1.ProcessLinkService }, { type: i6$1.UserProviderService }], propDecorators: { form: [{
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i2$3.ProcessService }, { type: i4$2.ProcessLinkService }, { type: i4$3.UserProviderService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], modal: [{
@@ -2496,7 +3599,7 @@ class DossierAssignUserComponent {
         this.disabled$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierAssignUserComponent, deps: [{ token: i2$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: { documentId: "documentId", assigneeId: "assigneeId", assigneeFullName: "assigneeFullName", hasPermission: "hasPermission" }, outputs: { assignmentOfDocumentChanged: "assignmentOfDocumentChanged" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n      <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #content>\n  <ng-container\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      assigneeFullName: assigneeFullName$ | async,\n      assigneeId: assigneeId$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"!hasPermission && obs.assigneeFullName\">\n      <ng-container *ngTemplateOutlet=\"fullName; context: {obs: obs}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"hasPermission\">\n      <ng-container *ngTemplateOutlet=\"selectUser; context: {obs: obs}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #fullName let-obs=\"obs\">\n  <valtimo-searchable-dropdown-select\n    [buttonText]=\"'assignDocument.header' | translate\"\n    [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n    [hasPermission]=\"false\"\n    [hasSelection]=\"true\"\n    [noResultsText]=\"'interface.noSearchResults' | translate\"\n    [searchText]=\"'interface.typeToSearch' | translate\"\n    [selectedTextValue]=\"obs.assigneeFullName\"\n    [selectedText]=\"'assignDocument.assignedTo' | translate\"\n    [style]=\"'underlinedText'\"\n    [width]=\"250\"\n    class=\"dossier-candidates-dropdown\"\n  >\n  </valtimo-searchable-dropdown-select>\n</ng-template>\n\n<ng-template #selectUser let-obs=\"obs\">\n  <ng-container *ngIf=\"userItems$ | async as userItems; else loadingUsers\">\n    <valtimo-searchable-dropdown-select\n      [buttonText]=\"'assignDocument.header' | translate\"\n      [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n      [disabled]=\"obs.disabled\"\n      [hasPermission]=\"hasPermission\"\n      [showClearSelection]=\"false\"\n      [hasSelection]=\"obs.assigneeId\"\n      [items]=\"userItems\"\n      [noResultsText]=\"'interface.noSearchResults' | translate\"\n      [searchText]=\"'interface.typeToSearch' | translate\"\n      [selectedTextValue]=\"obs.assigneeFullName\"\n      [selectedText]=\"'assignDocument.assignedTo' | translate\"\n      [style]=\"'underlinedText'\"\n      [width]=\"250\"\n      (clearSelection)=\"unassignDocument()\"\n      (itemSelected)=\"assignDocument($event)\"\n      class=\"dossier-candidates-dropdown\"\n    >\n    </valtimo-searchable-dropdown-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingUsers>\n  <h5>\n    <b>{{ 'assignDocument.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}valtimo-searchable-dropdown-select{color:var(--cds-text-helper)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important;line-height:18px!important}h5{font-size:14px!important}:host .dossier-candidates-dropdown h5{margin-block:0}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "selectedText", "selectedTextValue", "clearSelectionButtonTitle", "hasSelection", "width", "hasPermission", "showClearSelection"], outputs: ["itemSelected", "clearSelection"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: { documentId: "documentId", assigneeId: "assigneeId", assigneeFullName: "assigneeFullName", hasPermission: "hasPermission" }, outputs: { assignmentOfDocumentChanged: "assignmentOfDocumentChanged" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n      <ng-container *ngTemplateOutlet=\"content\"> </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #content>\n  <ng-container\n    *ngIf=\"{\n      disabled: disabled$ | async,\n      assigneeFullName: assigneeFullName$ | async,\n      assigneeId: assigneeId$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"!hasPermission && obs.assigneeFullName\">\n      <ng-container *ngTemplateOutlet=\"fullName; context: {obs: obs}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"hasPermission\">\n      <ng-container *ngTemplateOutlet=\"selectUser; context: {obs: obs}\"></ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #fullName let-obs=\"obs\">\n  <valtimo-searchable-dropdown-select\n    [buttonText]=\"'assignDocument.header' | translate\"\n    [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n    [hasPermission]=\"false\"\n    [hasSelection]=\"true\"\n    [noResultsText]=\"'interface.noSearchResults' | translate\"\n    [searchText]=\"'interface.typeToSearch' | translate\"\n    [selectedTextValue]=\"obs.assigneeFullName\"\n    [selectedText]=\"'assignDocument.assignedTo' | translate\"\n    [style]=\"'underlinedText'\"\n    [width]=\"250\"\n    class=\"dossier-candidates-dropdown\"\n  >\n  </valtimo-searchable-dropdown-select>\n</ng-template>\n\n<ng-template #selectUser let-obs=\"obs\">\n  <ng-container *ngIf=\"userItems$ | async as userItems; else loadingUsers\">\n    <valtimo-searchable-dropdown-select\n      [buttonText]=\"'assignDocument.header' | translate\"\n      [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n      [disabled]=\"obs.disabled\"\n      [hasPermission]=\"hasPermission\"\n      [showClearSelection]=\"false\"\n      [hasSelection]=\"obs.assigneeId\"\n      [items]=\"userItems\"\n      [noResultsText]=\"'interface.noSearchResults' | translate\"\n      [searchText]=\"'interface.typeToSearch' | translate\"\n      [selectedTextValue]=\"obs.assigneeFullName\"\n      [selectedText]=\"'assignDocument.assignedTo' | translate\"\n      [style]=\"'underlinedText'\"\n      [width]=\"250\"\n      (clearSelection)=\"unassignDocument()\"\n      (itemSelected)=\"assignDocument($event)\"\n      class=\"dossier-candidates-dropdown\"\n    >\n    </valtimo-searchable-dropdown-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingUsers>\n  <h5>\n    <b>{{ 'assignDocument.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}valtimo-searchable-dropdown-select{color:var(--cds-text-helper)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important;line-height:18px!important}h5{font-size:14px!important}:host .dossier-candidates-dropdown h5{margin-block:0}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "selectedText", "selectedTextValue", "clearSelectionButtonTitle", "hasSelection", "width", "hasPermission", "showClearSelection"], outputs: ["itemSelected", "clearSelection"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierAssignUserComponent, decorators: [{
             type: Component,
@@ -2616,6 +3719,8 @@ class DossierDetailComponent {
         this.loadingTabs$ = new BehaviorSubject(true);
         this.noTabsConfigured$ = new BehaviorSubject(false);
         this.compactMode$ = this.pageHeaderService.compactMode$;
+        this.tabHorizontalOverflowDisabled = this.dossierTabService.tabHorizontalOverflowDisabled;
+        this.showTaskList$ = this.dossierTabService.showTaskList$;
         this._snapshot = this.route.snapshot.paramMap;
         this.documentDefinitionName = this._snapshot.get('documentDefinitionName') || '';
         this.documentId = this._snapshot.get('documentId') || '';
@@ -2691,6 +3796,7 @@ class DossierDetailComponent {
                 this._initialTabName = this._snapshot.get('tab') ?? '';
                 this.tabLoader = new TabLoaderImpl(tabs, this.componentFactoryResolver, this.viewContainerRef, this.router, this.route);
                 this.tabLoader.initial(this._initialTabName);
+                this.dossierTabService.setTabLoader(this.tabLoader);
                 this.loadingTabs$.next(false);
             }
             else {
@@ -2741,13 +3847,13 @@ class DossierDetailComponent {
             href: `/dossiers/${this.documentDefinitionName}`,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i2$3.BreadcrumbService }, { token: i0.ComponentFactoryResolver }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: i4$2.KeycloakService }, { token: i5$1.Location }, { token: i1$2.NGXLogger }, { token: i7.PermissionService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierTabService }, { token: DossierService }, { token: i2$1.CaseStatusService }, { token: i2$3.PageTitleService }, { token: i10$1.IconService }, { token: i2$3.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DossierDetailComponent, selector: "valtimo-dossier-detail", providers: [DossierTabService], viewQueries: [{ propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n      <ng-template #tabs>\n        <ng-container *ngIf=\"tabLoader\">\n          <cds-tabs type=\"contained\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.isActive()\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              [id]=\"\"\n              (selected)=\"tabLoader.load(tab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n\n      <div class=\"card-body bg-white p-5 position-relative tab-container\">\n        <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n          <cds-loading></cds-loading>\n        </div>\n\n        <valtimo-no-results\n          *ngIf=\"noTabsConfigured$ | async\"\n          [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n          [title]=\"'dossier.tabs.noResults' | translate\"\n        ></valtimo-no-results>\n\n        <ng-template #tabContainer></ng-template>\n\n        <div class=\"clearfix\"></div>\n      </div>\n    </div>\n\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs'\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{'--compact': compactMode$ | async}\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\">{{ obs.caseStatus.title }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <cds-overflow-menu-option (selected)=\"unassignAssignee()\" [disabled]=\"!obs.assigneeId\">\n            {{ 'assignDocument.remove' | translate }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"250\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{\n              (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n              processDocumentDefinition?.id?.processDefinitionKey\n                ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                : processDocumentDefinition.processName\n            }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".tab-container{min-height:300px}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions.--compact{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;height:var(--cds-layout-size-height-md)}.dossier-status-assign-custom-title.--compact{align-items:center}\n"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i10$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i10$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i10$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i10$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i10$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i2$3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "directive", type: i2$3.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i10$1.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i10$1.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i10$1.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i2$3.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: ["formSubmit"] }, { kind: "component", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: ["documentId", "assigneeId", "assigneeFullName", "hasPermission"], outputs: ["assignmentOfDocumentChanged"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: TabTranslatePipe, name: "tabTranslate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i2$2.BreadcrumbService }, { token: i0.ComponentFactoryResolver }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: i4$4.KeycloakService }, { token: i3$1.Location }, { token: i1$2.NGXLogger }, { token: i7.PermissionService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierTabService }, { token: DossierService }, { token: i2$1.CaseStatusService }, { token: i2$2.PageTitleService }, { token: i4.IconService }, { token: i2$2.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DossierDetailComponent, selector: "valtimo-dossier-detail", providers: [DossierTabService], viewQueries: [{ propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], descendants: true }, { propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n      <ng-template #tabs>\n        <ng-container *ngIf=\"tabLoader\">\n          <cds-tabs type=\"inline\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.isActive()\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              [id]=\"\"\n              (selected)=\"tabLoader.load(tab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n\n      <div class=\"tab-content-container\">\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\n        <div *ngIf=\"showTaskList$ | async\" class=\"tab-content-container__task-list\">\n          <valtimo-dossier-detail-task-list></valtimo-dossier-detail-task-list>\n        </div>\n      </div>\n    </div>\n\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs'\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{'--compact': compactMode$ | async}\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\">{{ obs.caseStatus.title }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <cds-overflow-menu-option (selected)=\"unassignAssignee()\" [disabled]=\"!obs.assigneeId\">\n            {{ 'assignDocument.remove' | translate }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"250\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{\n              (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n              processDocumentDefinition?.id?.processDefinitionKey\n                ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                : processDocumentDefinition.processName\n            }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{min-height:300px}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--no-background){background:transparent!important}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions.--compact{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;height:var(--cds-layout-size-height-md)}.dossier-status-assign-custom-title.--compact{align-items:center}.tab-content-container{overflow:hidden;display:flex;gap:24px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4.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: "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: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "directive", type: i2$2.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i4.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i4.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i4.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i2$2.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: DossierDetailTaskListComponent, selector: "valtimo-dossier-detail-task-list" }, { 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: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: TabTranslatePipe, name: "tabTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-detail', providers: [DossierTabService], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n      <ng-template #tabs>\n        <ng-container *ngIf=\"tabLoader\">\n          <cds-tabs type=\"contained\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.isActive()\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              [id]=\"\"\n              (selected)=\"tabLoader.load(tab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n\n      <div class=\"card-body bg-white p-5 position-relative tab-container\">\n        <div *ngIf=\"loadingTabs$ | async\" class=\"loading-container\">\n          <cds-loading></cds-loading>\n        </div>\n\n        <valtimo-no-results\n          *ngIf=\"noTabsConfigured$ | async\"\n          [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n          [title]=\"'dossier.tabs.noResults' | translate\"\n        ></valtimo-no-results>\n\n        <ng-template #tabContainer></ng-template>\n\n        <div class=\"clearfix\"></div>\n      </div>\n    </div>\n\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs'\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{'--compact': compactMode$ | async}\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\">{{ obs.caseStatus.title }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <cds-overflow-menu-option (selected)=\"unassignAssignee()\" [disabled]=\"!obs.assigneeId\">\n            {{ 'assignDocument.remove' | translate }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"250\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{\n              (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n              processDocumentDefinition?.id?.processDefinitionKey\n                ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                : processDocumentDefinition.processName\n            }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".tab-container{min-height:300px}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions.--compact{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;height:var(--cds-layout-size-height-md)}.dossier-status-assign-custom-title.--compact{align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.BreadcrumbService }, { type: i0.ComponentFactoryResolver }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: i4$2.KeycloakService }, { type: i5$1.Location }, { type: i1$2.NGXLogger }, { type: i7.PermissionService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierTabService }, { type: DossierService }, { type: i2$1.CaseStatusService }, { type: i2$3.PageTitleService }, { type: i10$1.IconService }, { type: i2$3.PageHeaderService }], propDecorators: { supportingProcessStart: [{
+            args: [{ selector: 'valtimo-dossier-detail', providers: [DossierTabService], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div\n  class=\"main-content\"\n  [ngClass]=\"{'main-content--no-horizontal-overflow': tabHorizontalOverflowDisabled()}\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n      <ng-template #tabs>\n        <ng-container *ngIf=\"tabLoader\">\n          <cds-tabs type=\"inline\" class=\"case-detail-tabs\">\n            <cds-tab\n              *ngFor=\"let tab of tabLoader.tabs\"\n              [active]=\"tab.isActive()\"\n              heading=\"{{ tab | tabTranslate | async }}\"\n              [id]=\"\"\n              (selected)=\"tabLoader.load(tab)\"\n            ></cds-tab>\n          </cds-tabs>\n        </ng-container>\n      </ng-template>\n\n      <div class=\"tab-content-container\">\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\n        <div *ngIf=\"showTaskList$ | async\" class=\"tab-content-container__task-list\">\n          <valtimo-dossier-detail-task-list></valtimo-dossier-detail-task-list>\n        </div>\n      </div>\n    </div>\n\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n\n<ng-template\n  #caseDetailHeader\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div class=\"row\" *ngIf=\"(customDossierHeaderItems || []).length > 0\">\n    <span\n      *ngFor=\"let item of customDossierHeaderItems\"\n      [ngClass]=\"{\n        h1: item.textSize === 'xl',\n        h2: item.textSize === 'lg',\n        h3: item.textSize === 'md',\n        h4: item.textSize === 'sm',\n        h5: item.textSize === 'xs'\n      }\"\n      class=\"mb-0 mt-0 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n        item.columnSize * 2\n      }} {{ item.customClass }}\"\n    >\n      <span *ngIf=\"item.label\">{{ item.label | translate }}</span>\n\n      <span *ngIf=\"item.label && item.value\">: </span>\n\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      caseDetailAssignee;\n      context: {canHaveAssignee: canHaveAssignee, document: document, canAssign: canAssign}\n    \"\n  ></ng-container>\n</ng-template>\n\n<ng-template\n  #caseDetailAssignee\n  let-canHaveAssignee=\"canHaveAssignee\"\n  let-document=\"document\"\n  let-canAssign=\"canAssign\"\n>\n  <div *ngIf=\"canHaveAssignee && document\">\n    <valtimo-dossier-assign-user\n      *ngIf=\"canAssignLoaded$ | async\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      [assigneeId]=\"document.assigneeId\"\n      [documentId]=\"document.id\"\n      [hasPermission]=\"canAssign\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton let-canClaim=\"canClaim\" let-canHaveAssignee=\"canHaveAssignee\">\n  <cds-overflow-menu-option\n    *ngIf=\"canClaim && canHaveAssignee\"\n    [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    (click)=\"claimAssignee()\"\n  >\n    <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n  </cds-overflow-menu-option>\n</ng-template>\n\n<ng-template #customStartTrigger>\n  <button\n    [size]=\"(compactMode$ | async) ? 'sm' : 'lg'\"\n    cdsButton=\"primary\"\n    [disabled]=\"processDocumentDefinitions.length === 0\"\n    [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n  >\n    {{ 'dossier.startSubProcess' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"chevron--down\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <div\n      class=\"dossier-actions\"\n      [ngClass]=\"{'--compact': compactMode$ | async}\"\n      *ngIf=\"{\n        assigneeId: assigneeId$ | async,\n        canAssign: canAssign$ | async,\n        canClaim: canClaim$ | async,\n        canHaveAssignee: canHaveAssignee$ | async,\n        document: document$ | async,\n        caseStatus: caseStatus$ | async\n      } as obs\"\n    >\n      <div\n        class=\"dossier-status-assign-custom-title\"\n        [ngClass]=\"{'--compact': compactMode$ | async}\"\n      >\n        @if (obs.caseStatus) {\n          <cds-tag size=\"sm\" [type]=\"obs.caseStatus.tagType\">{{ obs.caseStatus.title }}</cds-tag>\n        }\n\n        <div class=\"dossier-assign-user\" [ngClass]=\"{'--compact': compactMode$ | async}\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              caseDetailAssignee;\n              context: {\n                canHaveAssignee: obs.canHaveAssignee,\n                document: obs.document,\n                canAssign: obs.canAssign\n              }\n            \"\n          ></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\n      </div>\n\n      <div class=\"buttons-container\">\n        <cds-overflow-menu\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          *ngIf=\"obs.canHaveAssignee\"\n          flip=\"true\"\n          [offset]=\"(compactMode$ | async) ? {y: 48, x: -4} : {y: 48, x: 4}\"\n          class=\"overflow-button assign-overflow\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              claimButton;\n              context: {canClaim: obs.canClaim, canHaveAssignee: obs.canHaveAssignee}\n            \"\n          >\n          </ng-container>\n          <cds-overflow-menu-option (selected)=\"unassignAssignee()\" [disabled]=\"!obs.assigneeId\">\n            {{ 'assignDocument.remove' | translate }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n\n        <cds-overflow-menu\n          valtimoCdsOverflowButton\n          [ngClass]=\"{'--compact': compactMode$ | async}\"\n          [width]=\"250\"\n          [customTrigger]=\"customStartTrigger\"\n          [offset]=\"{y: 48, x: 35}\"\n          class=\"overflow-button case-detail-overflow\"\n        >\n          <cds-overflow-menu-option\n            *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n            (click)=\"startProcess(processDocumentDefinition)\"\n          >\n            {{\n              (processDocumentDefinition?.id?.processDefinitionKey | translate) !==\n              processDocumentDefinition?.id?.processDefinitionKey\n                ? (processDocumentDefinition.id.processDefinitionKey | translate)\n                : processDocumentDefinition.processName\n            }}\n          </cds-overflow-menu-option>\n        </cds-overflow-menu>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".main-content--no-horizontal-overflow{overflow-x:hidden}.tab-container{min-height:300px}.tab-container:has(>.tab--no-margin){padding:0!important}.tab-container:has(>.tab--no-min-height){min-height:unset}.tab-container:has(>.tab--no-background){background:transparent!important}.loading-container{display:flex;justify-content:center;flex-direction:row}.dossier-detail-page-header{display:flex;width:100%;justify-content:flex-start;padding-bottom:5px}.dossier-detail-page-header ::ng-deep .cds--tag{margin:0}.case-detail-tabs{display:flex;margin-bottom:24px}.case-detail-tabs cds-tab{display:none!important}.cds--overflow-menu-options{margin-top:32px}.assign-overflow{margin-right:8px}.buttons-container{display:flex;flex-direction:row}.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end;padding-bottom:4px}.dossier-actions.--compact{padding-bottom:0;align-items:flex-start}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.dossier-status-assign-custom-title{display:flex;gap:16px;align-items:flex-end}.dossier-status-assign-custom-title .cds--tag{margin:0;height:var(--cds-layout-size-height-md)}.dossier-status-assign-custom-title.--compact{align-items:center}.tab-content-container{overflow:hidden;display:flex;gap:24px}\n"] }]
+        }], ctorParameters: () => [{ type: i2$2.BreadcrumbService }, { type: i0.ComponentFactoryResolver }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: i4$4.KeycloakService }, { type: i3$1.Location }, { type: i1$2.NGXLogger }, { type: i7.PermissionService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierTabService }, { type: DossierService }, { type: i2$1.CaseStatusService }, { type: i2$2.PageTitleService }, { type: i4.IconService }, { type: i2$2.PageHeaderService }], propDecorators: { supportingProcessStart: [{
                 type: ViewChild,
                 args: ['supportingProcessStartModal']
             }], viewContainerRef: [{
@@ -2771,7 +3877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class DossierProcessStartModalComponent {
-    constructor(route, router, processService, documentService, processLinkService, formFlowService, userProviderService, permissionService, listService, startModalService, configService) {
+    constructor(route, router, processService, documentService, processLinkService, formFlowService, userProviderService, permissionService, listService, startModalService, configService, formViewModel) {
         this.route = route;
         this.router = router;
         this.processService = processService;
@@ -2783,13 +3889,19 @@ class DossierProcessStartModalComponent {
         this.listService = listService;
         this.startModalService = startModalService;
         this.configService = configService;
+        this.formViewModel = formViewModel;
+        this.isFormViewModel = false;
         this.formFlowComplete = new EventEmitter();
+        this._subscriptions = new Subscription();
         this._useStartEventNameAsStartFormTitle =
             this.configService.config.featureToggles?.useStartEventNameAsStartFormTitle;
     }
     ngOnInit() {
         this.isUserAdmin();
     }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
     loadProcessLink() {
         this.processLinkId = null;
         this.formDefinition = null;
@@ -2808,9 +3920,18 @@ class DossierProcessStartModalComponent {
                     case 'form':
                         this.formDefinition = startProcessResult.properties.prefilledForm;
                         this.processLinkId = startProcessResult.processLinkId;
+                        this.isFormViewModel = false;
                         break;
                     case 'form-flow':
                         this.formFlowInstanceId = startProcessResult.properties.formFlowInstanceId;
+                        this.isFormViewModel = false;
+                        break;
+                    case 'form-view-model':
+                        this.formDefinition = startProcessResult.properties.formDefinition;
+                        this.formName = startProcessResult.properties.formName;
+                        this.processLinkId = startProcessResult.processLinkId;
+                        this.isFormViewModel = true;
+                        this.setFormViewModelComponent();
                         break;
                 }
             }
@@ -2883,18 +4004,41 @@ class DossierProcessStartModalComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierProcessStartModalComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$2.ProcessService }, { token: i2$1.DocumentService }, { token: i4$1.ProcessLinkService }, { token: i4$1.FormFlowService }, { token: i6$1.UserProviderService }, { token: i7.PermissionService }, { token: DossierListService }, { token: StartModalService }, { token: i1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId\">\n    <valtimo-form-flow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formFlowSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        (click)=\"gotoProcessLinkScreen()\"\n        class=\"btn btn-secondary btn-space\"\n        id=\"process-link-button\"\n        type=\"button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n", styles: ["#processStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i2$3.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "directive", type: i6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i4$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    setFormViewModelComponent() {
+        if (!this.formViewModel.component)
+            return;
+        this.formViewModelDynamicContainer.clear();
+        const formViewModelComponent = this.formViewModelDynamicContainer.createComponent(this.formViewModel.component);
+        formViewModelComponent.instance.form = this.formDefinition;
+        formViewModelComponent.instance.formName = this.formName;
+        formViewModelComponent.instance.isStartForm = true;
+        formViewModelComponent.instance.processDefinitionKey = this.processDefinitionKey;
+        formViewModelComponent.instance.documentDefinitionName = this.documentDefinitionName;
+        this._subscriptions.add(formViewModelComponent.instance.formSubmit.subscribe(() => {
+            this.listService.forceRefresh();
+            this.modal.hide();
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierProcessStartModalComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$3.ProcessService }, { token: i2$1.DocumentService }, { token: i4$2.ProcessLinkService }, { token: i4$2.FormFlowService }, { token: i4$3.UserProviderService }, { token: i7.PermissionService }, { token: DossierListService }, { token: StartModalService }, { token: i1.ConfigService }, { token: FORM_VIEW_MODEL_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["processStartModal"], descendants: true }, { propertyName: "formViewModelDynamicContainer", first: true, predicate: ["formViewModelComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition && !isFormViewModel\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body>\n    <ng-template #formViewModelComponent></ng-template>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId\">\n    <valtimo-form-flow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formFlowSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        (click)=\"gotoProcessLinkScreen()\"\n        class=\"btn btn-secondary btn-space\"\n        id=\"process-link-button\"\n        type=\"button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n", styles: ["#processStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i2$2.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: "17.3.3", ngImport: i0, type: DossierProcessStartModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId\">\n    <valtimo-form-flow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formFlowSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        (click)=\"gotoProcessLinkScreen()\"\n        class=\"btn btn-secondary btn-space\"\n        id=\"process-link-button\"\n        type=\"button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n", styles: ["#processStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2$2.ProcessService }, { type: i2$1.DocumentService }, { type: i4$1.ProcessLinkService }, { type: i4$1.FormFlowService }, { type: i6$1.UserProviderService }, { type: i7.PermissionService }, { type: DossierListService }, { type: StartModalService }, { type: i1.ConfigService }], propDecorators: { form: [{
+            args: [{ selector: 'valtimo-dossier-process-start-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition && !isFormViewModel\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body>\n    <ng-template #formViewModelComponent></ng-template>\n  </div>\n  <div body *ngIf=\"formFlowInstanceId\">\n    <valtimo-form-flow\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"formFlowSubmitted()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        (click)=\"gotoProcessLinkScreen()\"\n        class=\"btn btn-secondary btn-space\"\n        id=\"process-link-button\"\n        type=\"button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formFlowInstanceId && !formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n", styles: ["#processStartModal .formio-component-submit{text-align:right}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2$3.ProcessService }, { type: i2$1.DocumentService }, { type: i4$2.ProcessLinkService }, { type: i4$2.FormFlowService }, { type: i4$3.UserProviderService }, { type: i7.PermissionService }, { type: DossierListService }, { type: StartModalService }, { type: i1.ConfigService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FORM_VIEW_MODEL_TOKEN]
+                }] }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], modal: [{
                 type: ViewChild,
                 args: ['processStartModal', { static: false }]
+            }], formViewModelDynamicContainer: [{
+                type: ViewChild,
+                args: ['formViewModelComponent', { static: true, read: ViewContainerRef }]
             }], formFlowComplete: [{
                 type: Output
             }] } });
@@ -2961,7 +4105,7 @@ class DossierListActionsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListActionsComponent, deps: [{ token: i2$1.DocumentService }, { token: DossierListService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: { loading: "loading" }, outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\">\n  <div\n    class=\"modal fade\"\n    id=\"startProcess\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"startProcessLabel\"\n    aria-hidden=\"true\"\n  >\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"startProcessLabel\">\n            {{ 'dashboard.startProcess.title' | translate }}\n          </h3>\n\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"table-responsive\">\n            <table class=\"table m-0\">\n              <tr\n                *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                (click)=\"selectProcess(processDocumentDefinition)\"\n                style=\"cursor: pointer\"\n              >\n                <td>{{ processDocumentDefinition.processName }}</td>\n              </tr>\n            </table>\n          </div>\n        </div>\n\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n            {{ 'cta.close' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<valtimo-dossier-process-start-modal\n  #processStartModal\n  (formFlowComplete)=\"onFormFlowComplete()\"\n></valtimo-dossier-process-start-modal>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: { loading: "loading" }, outputs: { formFlowComplete: "formFlowComplete" }, viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\">\n  <div\n    class=\"modal fade\"\n    id=\"startProcess\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    aria-labelledby=\"startProcessLabel\"\n    aria-hidden=\"true\"\n  >\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\" id=\"startProcessLabel\">\n            {{ 'dashboard.startProcess.title' | translate }}\n          </h3>\n\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <div class=\"table-responsive\">\n            <table class=\"table m-0\">\n              <tr\n                *ngFor=\"let processDocumentDefinition of associatedProcessDocumentDefinitions\"\n                (click)=\"selectProcess(processDocumentDefinition)\"\n                style=\"cursor: pointer\"\n              >\n                <td>{{ processDocumentDefinition.processName }}</td>\n              </tr>\n            </table>\n          </div>\n        </div>\n\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n            {{ 'cta.close' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<valtimo-dossier-process-start-modal\n  #processStartModal\n  (formFlowComplete)=\"onFormFlowComplete()\"\n></valtimo-dossier-process-start-modal>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", outputs: ["formFlowComplete"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListActionsComponent, decorators: [{
             type: Component,
@@ -3204,10 +4348,10 @@ class DossierListComponent {
     search(searchFieldValues) {
         this.searchService.search(searchFieldValues);
     }
-    rowClick(document) {
+    rowClick(item) {
         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/${item.id}`]);
         });
     }
     tabChange(tab) {
@@ -3331,7 +4475,7 @@ class DossierListComponent {
                 title: `dossier.noResults.${this.activeTab ?? 'ALL'}.title`,
             });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListComponent, deps: [{ token: DossierListAssigneeService }, { token: i2$3.BreadcrumbService }, { token: DossierBulkAssignService }, { token: DossierColumnService }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: DossierListService }, { token: i2$3.PageTitleService }, { token: DossierListPaginationService }, { token: DossierParameterService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierListSearchService }, { token: i6.TranslateService }, { token: i7.PermissionService }, { token: DossierListStatusService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListComponent, deps: [{ token: DossierListAssigneeService }, { token: i2$2.BreadcrumbService }, { token: DossierBulkAssignService }, { token: DossierColumnService }, { token: i1.ConfigService }, { token: i2$1.DocumentService }, { token: DossierListService }, { token: i2$2.PageTitleService }, { token: DossierListPaginationService }, { token: DossierParameterService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: DossierListSearchService }, { token: i6.TranslateService }, { token: i7.PermissionService }, { token: DossierListStatusService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierListComponent, selector: "valtimo-dossier-list", providers: [
             DossierListService,
             DossierColumnService,
@@ -3340,7 +4484,7 @@ class DossierListComponent {
             DossierListPaginationService,
             DossierListSearchService,
             DossierListStatusService,
-        ], viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }, { propertyName: "listActionsComponent", first: true, predicate: DossierListActionsComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: Tabs, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    documentItems: documentItems$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n    searchFields: searchFields$ | async,\n    schema: schema$ | async,\n    showAssignModal: showAssignModal$ | async,\n    selectedDocumentIds: selectedDocumentIds$ | async,\n    statuses: statuses$ | async,\n    selectedStatuses: selectedStatuses$ | async,\n    showStatusSelector: showStatusSelector$ | async,\n    loaded:\n      !loadingFields &&\n      !loadingPagination &&\n      !loadingSearchFields &&\n      !loadingAssigneeFilter &&\n      !loadingDocumentItems\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid\">\n      <div class=\"col-12 px-0 mb-5\">\n        <valtimo-dossier-list-actions\n          [loading]=\"!obs.loaded\"\n          (formFlowComplete)=\"forceRefresh()\"\n        ></valtimo-dossier-list-actions>\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n\n        <ng-container *ngIf=\"obs.loaded; else loading\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"bulkAssignModal; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changePageModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changeTabModal\"></ng-container>\n</ng-container>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [searchFields]=\"obs.searchFields\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [defaultValues]=\"searchFieldValues$ | async\"\n      [inputDisabled]=\"!obs.loaded\"\n      [externalSearchField]=\"obs.showStatusSelector\"\n    >\n      <valtimo-status-selector\n        *ngIf=\"obs.showStatusSelector\"\n        [statuses]=\"obs.statuses\"\n        [selectedStatuses]=\"obs.selectedStatuses\"\n        [disabled]=\"!obs.loaded\"\n        (selectedStatusesChangeEvent)=\"onSelectedStatusesChange($event)\"\n      ></valtimo-status-selector>\n    </valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [initialSortState]=\"pagination.sort\"\n    [items]=\"obs.documentItems\"\n    [pagination]=\"pagination\"\n    paginationIdentifier=\"dossierList\"\n    lockedTooltipTranslationKey=\"dossier.rowLocked\"\n    [showSelectionColumn]=\"canHaveAssignee\"\n    [tableTranslations]=\"tableTranslations\"\n    (paginationClicked)=\"pageChange($event)\"\n    (paginationSet)=\"pageSizeChange($event)\"\n    (rowClicked)=\"rowClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showAssignModal()\">\n        {{ 'dossier.bulkAssign.assign' | translate }}\n      </button>\n    </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"dossierListActions\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"obs.noResultsMessage.isSearchResult ? null : dossierListActions\"\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | translate\"\n    ></valtimo-no-results>\n\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs\n      *ngIf=\"!visibleDossierTabs; else configuredTabs\"\n      type=\"contained\"\n      class=\"dossier-list-tabs\"\n    >\n      <cds-tab\n        *ngFor=\"let tab of defaultTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #configuredTabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs type=\"contained\" class=\"dossier-list-tabs\">\n      <cds-tab\n        *ngFor=\"let tab of visibleDossierTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading\n  ><valtimo-carbon-list [loading]=\"true\">\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div> </valtimo-carbon-list\n></ng-template>\n\n<ng-template #bulkAssignModal let-obs=\"obs\">\n  <valtimo-dossier-bulk-assign-modal\n    [documentIds]=\"obs.selectedDocumentIds\"\n    [open]=\"obs.showAssignModal\"\n    (closeEvent)=\"onCloseEvent($event, obs.selectedDocumentIds)\"\n  ></valtimo-dossier-bulk-assign-modal>\n</ng-template>\n\n<ng-template #changePageModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changePageModal.confirm\"\n    contentTranslationKey=\"dossier.changePageModal.content\"\n    [outputOnConfirm]=\"paginationChange$ | async\"\n    [showModalSubject$]=\"showChangePageModal$\"\n    titleTranslationKey=\"dossier.changePageModal.title\"\n    (confirmEvent)=\"onChangePageConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #changeTabModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changeTabModal.confirm\"\n    contentTranslationKey=\"dossier.changeTabModal.content\"\n    [outputOnConfirm]=\"tabChange$ | async\"\n    [showModalSubject$]=\"showChangeTabModal$\"\n    titleTranslationKey=\"dossier.changeTabModal.title\"\n    (cancelEvent)=\"onChangeTabCancel()\"\n    (confirmEvent)=\"onChangeTabConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #dossierListActions>\n  <button\n    *ngIf=\"canCreateDocument$ | async\"\n    cdsButton=\"primary\"\n    [disabled]=\"listActionsComponent?.disableStartDossierButton$ | async\"\n    (click)=\"startDossier()\"\n  >\n    {{ 'Start Dossier' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: [".dossier-list-tabs cds-tab{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields", "documentDefinitionName", "setValuesSubject$", "defaultValues", "inputDisabled", "externalSearchField"], outputs: ["doSearch"] }, { kind: "directive", type: i10$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i10$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i10$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i10$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i2$3.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i2$3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: i2$3.StatusSelectorComponent, selector: "valtimo-status-selector", inputs: ["statuses", "selectedStatuses", "carbonTheme", "disabled"], outputs: ["selectedStatusesChangeEvent"] }, { kind: "component", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: ["documentIds", "open"], outputs: ["closeEvent"] }, { kind: "component", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: ["loading"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }, { propertyName: "listActionsComponent", first: true, predicate: DossierListActionsComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: Tabs, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    documentItems: documentItems$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n    searchFields: searchFields$ | async,\n    schema: schema$ | async,\n    showAssignModal: showAssignModal$ | async,\n    selectedDocumentIds: selectedDocumentIds$ | async,\n    statuses: statuses$ | async,\n    selectedStatuses: selectedStatuses$ | async,\n    showStatusSelector: showStatusSelector$ | async,\n    loaded:\n      !loadingFields &&\n      !loadingPagination &&\n      !loadingSearchFields &&\n      !loadingAssigneeFilter &&\n      !loadingDocumentItems\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid\">\n      <div class=\"col-12 px-0 mb-5\">\n        <valtimo-dossier-list-actions\n          [loading]=\"!obs.loaded\"\n          (formFlowComplete)=\"forceRefresh()\"\n        ></valtimo-dossier-list-actions>\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n\n        <ng-container *ngIf=\"obs.loaded; else loading\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"bulkAssignModal; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changePageModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changeTabModal\"></ng-container>\n</ng-container>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [searchFields]=\"obs.searchFields\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [defaultValues]=\"searchFieldValues$ | async\"\n      [inputDisabled]=\"!obs.loaded\"\n      [externalSearchField]=\"obs.showStatusSelector\"\n    >\n      <valtimo-status-selector\n        *ngIf=\"obs.showStatusSelector\"\n        [statuses]=\"obs.statuses\"\n        [selectedStatuses]=\"obs.selectedStatuses\"\n        [disabled]=\"!obs.loaded\"\n        (selectedStatusesChangeEvent)=\"onSelectedStatusesChange($event)\"\n      ></valtimo-status-selector>\n    </valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [initialSortState]=\"pagination.sort\"\n    [items]=\"obs.documentItems\"\n    [pagination]=\"pagination\"\n    paginationIdentifier=\"dossierList\"\n    lockedTooltipTranslationKey=\"dossier.rowLocked\"\n    [showSelectionColumn]=\"canHaveAssignee\"\n    [tableTranslations]=\"tableTranslations\"\n    (paginationClicked)=\"pageChange($event)\"\n    (paginationSet)=\"pageSizeChange($event)\"\n    (rowClicked)=\"rowClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showAssignModal()\">\n        {{ 'dossier.bulkAssign.assign' | translate }}\n      </button>\n    </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"dossierListActions\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"obs.noResultsMessage.isSearchResult ? null : dossierListActions\"\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | translate\"\n    ></valtimo-no-results>\n\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs\n      *ngIf=\"!visibleDossierTabs; else configuredTabs\"\n      type=\"contained\"\n      class=\"dossier-list-tabs\"\n    >\n      <cds-tab\n        *ngFor=\"let tab of defaultTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #configuredTabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs type=\"contained\" class=\"dossier-list-tabs\">\n      <cds-tab\n        *ngFor=\"let tab of visibleDossierTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading\n  ><valtimo-carbon-list [loading]=\"true\">\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div> </valtimo-carbon-list\n></ng-template>\n\n<ng-template #bulkAssignModal let-obs=\"obs\">\n  <valtimo-dossier-bulk-assign-modal\n    [documentIds]=\"obs.selectedDocumentIds\"\n    [open]=\"obs.showAssignModal\"\n    (closeEvent)=\"onCloseEvent($event, obs.selectedDocumentIds)\"\n  ></valtimo-dossier-bulk-assign-modal>\n</ng-template>\n\n<ng-template #changePageModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changePageModal.confirm\"\n    contentTranslationKey=\"dossier.changePageModal.content\"\n    [outputOnConfirm]=\"paginationChange$ | async\"\n    [showModalSubject$]=\"showChangePageModal$\"\n    titleTranslationKey=\"dossier.changePageModal.title\"\n    (confirmEvent)=\"onChangePageConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #changeTabModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changeTabModal.confirm\"\n    contentTranslationKey=\"dossier.changeTabModal.content\"\n    [outputOnConfirm]=\"tabChange$ | async\"\n    [showModalSubject$]=\"showChangeTabModal$\"\n    titleTranslationKey=\"dossier.changeTabModal.title\"\n    (cancelEvent)=\"onChangeTabCancel()\"\n    (confirmEvent)=\"onChangeTabConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #dossierListActions>\n  <button\n    *ngIf=\"canCreateDocument$ | async\"\n    cdsButton=\"primary\"\n    [disabled]=\"listActionsComponent?.disableStartDossierButton$ | async\"\n    (click)=\"startDossier()\"\n  >\n    {{ 'Start Dossier' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: [".dossier-list-tabs cds-tab{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields", "documentDefinitionName", "setValuesSubject$", "clearValuesSubject$", "defaultValues", "inputDisabled", "externalSearchField"], 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: i2$2.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i4.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: i2$2.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i2$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i2$2.StatusSelectorComponent, selector: "valtimo-status-selector", inputs: ["statuses", "selectedStatuses", "carbonTheme", "disabled"], outputs: ["selectedStatusesChangeEvent"] }, { kind: "component", type: DossierBulkAssignModalComponent, selector: "valtimo-dossier-bulk-assign-modal", inputs: ["documentIds", "open"], outputs: ["closeEvent"] }, { kind: "component", type: DossierListActionsComponent, selector: "valtimo-dossier-list-actions", inputs: ["loading"], outputs: ["formFlowComplete"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierListComponent, decorators: [{
             type: Component,
@@ -3353,7 +4497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         DossierListSearchService,
                         DossierListStatusService,
                     ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    documentItems: documentItems$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n    searchFields: searchFields$ | async,\n    schema: schema$ | async,\n    showAssignModal: showAssignModal$ | async,\n    selectedDocumentIds: selectedDocumentIds$ | async,\n    statuses: statuses$ | async,\n    selectedStatuses: selectedStatuses$ | async,\n    showStatusSelector: showStatusSelector$ | async,\n    loaded:\n      !loadingFields &&\n      !loadingPagination &&\n      !loadingSearchFields &&\n      !loadingAssigneeFilter &&\n      !loadingDocumentItems\n  } as obs\"\n>\n  <div class=\"main-content pt-0\">\n    <div class=\"container-fluid\">\n      <div class=\"col-12 px-0 mb-5\">\n        <valtimo-dossier-list-actions\n          [loading]=\"!obs.loaded\"\n          (formFlowComplete)=\"forceRefresh()\"\n        ></valtimo-dossier-list-actions>\n        <ng-container *ngTemplateOutlet=\"searchFields; context: {obs: obs}\"></ng-container>\n\n        <ng-container *ngIf=\"obs.loaded; else loading\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"bulkAssignModal; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changePageModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"changeTabModal\"></ng-container>\n</ng-container>\n\n<ng-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [searchFields]=\"obs.searchFields\"\n      (doSearch)=\"search($event)\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [defaultValues]=\"searchFieldValues$ | async\"\n      [inputDisabled]=\"!obs.loaded\"\n      [externalSearchField]=\"obs.showStatusSelector\"\n    >\n      <valtimo-status-selector\n        *ngIf=\"obs.showStatusSelector\"\n        [statuses]=\"obs.statuses\"\n        [selectedStatuses]=\"obs.selectedStatuses\"\n        [disabled]=\"!obs.loaded\"\n        (selectedStatusesChangeEvent)=\"onSelectedStatusesChange($event)\"\n      ></valtimo-status-selector>\n    </valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [initialSortState]=\"pagination.sort\"\n    [items]=\"obs.documentItems\"\n    [pagination]=\"pagination\"\n    paginationIdentifier=\"dossierList\"\n    lockedTooltipTranslationKey=\"dossier.rowLocked\"\n    [showSelectionColumn]=\"canHaveAssignee\"\n    [tableTranslations]=\"tableTranslations\"\n    (paginationClicked)=\"pageChange($event)\"\n    (paginationSet)=\"pageSizeChange($event)\"\n    (rowClicked)=\"rowClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showAssignModal()\">\n        {{ 'dossier.bulkAssign.assign' | translate }}\n      </button>\n    </ng-container>\n\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"dossierListActions\"></ng-container>\n    </div>\n\n    <valtimo-no-results\n      [action]=\"obs.noResultsMessage.isSearchResult ? null : dossierListActions\"\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | translate\"\n    ></valtimo-no-results>\n\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs\n      *ngIf=\"!visibleDossierTabs; else configuredTabs\"\n      type=\"contained\"\n      class=\"dossier-list-tabs\"\n    >\n      <cds-tab\n        *ngFor=\"let tab of defaultTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #configuredTabs>\n  <ng-container *ngIf=\"assigneeFilter$ | async as assigneeFilter\">\n    <cds-tabs type=\"contained\" class=\"dossier-list-tabs\">\n      <cds-tab\n        *ngFor=\"let tab of visibleDossierTabs; trackBy: trackByIndex\"\n        [active]=\"assigneeFilter === tab\"\n        heading=\"{{ 'dossier.tabs.' + tab | translate }}\"\n        [id]=\"tab\"\n        (selected)=\"tabChange(tab)\"\n      ></cds-tab>\n    </cds-tabs>\n  </ng-container>\n</ng-template>\n\n<ng-template #loading\n  ><valtimo-carbon-list [loading]=\"true\">\n    <div tabs *ngIf=\"canHaveAssignee\">\n      <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n    </div> </valtimo-carbon-list\n></ng-template>\n\n<ng-template #bulkAssignModal let-obs=\"obs\">\n  <valtimo-dossier-bulk-assign-modal\n    [documentIds]=\"obs.selectedDocumentIds\"\n    [open]=\"obs.showAssignModal\"\n    (closeEvent)=\"onCloseEvent($event, obs.selectedDocumentIds)\"\n  ></valtimo-dossier-bulk-assign-modal>\n</ng-template>\n\n<ng-template #changePageModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changePageModal.confirm\"\n    contentTranslationKey=\"dossier.changePageModal.content\"\n    [outputOnConfirm]=\"paginationChange$ | async\"\n    [showModalSubject$]=\"showChangePageModal$\"\n    titleTranslationKey=\"dossier.changePageModal.title\"\n    (confirmEvent)=\"onChangePageConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #changeTabModal>\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"dossier.changeTabModal.confirm\"\n    contentTranslationKey=\"dossier.changeTabModal.content\"\n    [outputOnConfirm]=\"tabChange$ | async\"\n    [showModalSubject$]=\"showChangeTabModal$\"\n    titleTranslationKey=\"dossier.changeTabModal.title\"\n    (cancelEvent)=\"onChangeTabCancel()\"\n    (confirmEvent)=\"onChangeTabConfirm($event)\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n\n<ng-template #dossierListActions>\n  <button\n    *ngIf=\"canCreateDocument$ | async\"\n    cdsButton=\"primary\"\n    [disabled]=\"listActionsComponent?.disableStartDossierButton$ | async\"\n    (click)=\"startDossier()\"\n  >\n    {{ 'Start Dossier' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n", styles: [".dossier-list-tabs cds-tab{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: DossierListAssigneeService }, { type: i2$3.BreadcrumbService }, { type: DossierBulkAssignService }, { type: DossierColumnService }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: DossierListService }, { type: i2$3.PageTitleService }, { type: DossierListPaginationService }, { type: DossierParameterService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierListSearchService }, { type: i6.TranslateService }, { type: i7.PermissionService }, { type: DossierListStatusService }], propDecorators: { carbonList: [{
+        }], ctorParameters: () => [{ type: DossierListAssigneeService }, { type: i2$2.BreadcrumbService }, { type: DossierBulkAssignService }, { type: DossierColumnService }, { type: i1.ConfigService }, { type: i2$1.DocumentService }, { type: DossierListService }, { type: i2$2.PageTitleService }, { type: DossierListPaginationService }, { type: DossierParameterService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: DossierListSearchService }, { type: i6.TranslateService }, { type: i7.PermissionService }, { type: DossierListStatusService }], propDecorators: { carbonList: [{
                 type: ViewChild,
                 args: [CarbonListComponent]
             }], listActionsComponent: [{
@@ -3459,13 +4603,13 @@ class DossierUpdateComponent {
     returnZero() {
         return 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierUpdateComponent, deps: [{ token: i3.TaskService }, { token: i2$1.DocumentService }, { token: i1$1.ActivatedRoute }, { token: i3$2.ToastrService }, { token: i5$1.Location }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierUpdateComponent, selector: "valtimo-dossier-update", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i2$3.CamundaFormComponent, selector: "valtimo-camunda-form", inputs: ["componentName", "formFields"], outputs: ["submitted"] }, { kind: "pipe", type: i5$1.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierUpdateComponent, deps: [{ token: i1$3.TaskService }, { token: i2$1.DocumentService }, { token: i1$1.ActivatedRoute }, { token: i3$3.ToastrService }, { token: i3$1.Location }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierUpdateComponent, selector: "valtimo-dossier-update", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i2$2.CamundaFormComponent, selector: "valtimo-camunda-form", inputs: ["componentName", "formFields"], outputs: ["submitted"] }, { kind: "pipe", type: i3$1.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierUpdateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-update', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i3.TaskService }, { type: i2$1.DocumentService }, { type: i1$1.ActivatedRoute }, { type: i3$2.ToastrService }, { type: i5$1.Location }, { type: DossierService }] });
+        }], ctorParameters: () => [{ type: i1$3.TaskService }, { type: i2$1.DocumentService }, { type: i1$1.ActivatedRoute }, { type: i3$3.ToastrService }, { type: i3$1.Location }, { type: DossierService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3674,7 +4818,7 @@ class DossierModule {
             SearchFieldsModule,
             PageModule,
             FormModule,
-            InputModule,
+            InputModule$1,
             FormModule$1,
             NgbModule,
             LoadingModule,
@@ -3695,7 +4839,9 @@ class DossierModule {
             RenderInPageHeaderDirectiveModule,
             TagModule,
             DialogModule,
-            ValtimoCdsOverflowButtonDirectiveModule], exports: [DossierListComponent, DossierDetailComponent] }); }
+            ValtimoCdsOverflowButtonDirectiveModule,
+            DossierDetailWidgetsComponent,
+            DossierDetailTaskListComponent], exports: [DossierListComponent, DossierDetailComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierModule, imports: [CommonModule,
             DossierRoutingModule,
             ListModule,
@@ -3738,7 +4884,7 @@ class DossierModule {
             SearchFieldsModule,
             PageModule,
             FormModule,
-            InputModule,
+            InputModule$1,
             FormModule$1,
             NgbModule,
             LoadingModule,
@@ -3758,7 +4904,9 @@ class DossierModule {
             RenderInPageHeaderDirectiveModule,
             TagModule,
             DialogModule,
-            ValtimoCdsOverflowButtonDirectiveModule] }); }
+            ValtimoCdsOverflowButtonDirectiveModule,
+            DossierDetailWidgetsComponent,
+            DossierDetailTaskListComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierModule, decorators: [{
             type: NgModule,
@@ -3825,7 +4973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         SearchFieldsModule,
                         PageModule,
                         FormModule,
-                        InputModule,
+                        InputModule$1,
                         FormModule$1,
                         NgbModule,
                         LoadingModule,
@@ -3847,6 +4995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         TagModule,
                         DialogModule,
                         ValtimoCdsOverflowButtonDirectiveModule,
+                        DossierDetailWidgetsComponent,
+                        DossierDetailTaskListComponent,
                     ],
                     exports: [DossierListComponent, DossierDetailComponent],
                 }]
@@ -3875,5 +5025,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApiTabType, CASE_TAB_TOKEN, CASE_WITHOUT_STATUS_STATUS, DEFAULT_DOSSIER_LIST_TABS, DEFAULT_TABS, DEFAULT_TAB_COMPONENTS, DOSSIER_LIST_NO_RESULTS_MESSAGE, DOSSIER_LIST_TABLE_TRANSLATIONS, DefaultTabs, DossierBulkAssignModalComponent, DossierBulkAssignService, DossierColumnService, DossierDetailComponent, DossierDetailTabAuditComponent, DossierDetailTabDocumentsComponent, DossierDetailTabNotesComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierListAssigneeService, DossierListComponent, DossierListPaginationService, DossierListSearchService, DossierListService, DossierListStatusService, DossierModule, DossierParameterService, DossierService, DossierTabApiService, DossierTabService, StartModalService, TAB_MAP, TabImpl, TabLoaderImpl };
+export { ApiTabType, CASE_TAB_TOKEN, CASE_WITHOUT_STATUS_STATUS, CUSTOM_CASE_WIDGET_TOKEN, CaseWidgetDisplayTypeKey, CaseWidgetType, DEFAULT_DOSSIER_LIST_TABS, DEFAULT_TABS, DEFAULT_TAB_COMPONENTS, DOSSIER_LIST_NO_RESULTS_MESSAGE, DOSSIER_LIST_TABLE_TRANSLATIONS, DefaultTabs, DossierBulkAssignModalComponent, DossierBulkAssignService, DossierColumnService, DossierDetailComponent, DossierDetailTabAuditComponent, DossierDetailTabDocumentsComponent, DossierDetailTabNotesComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierListAssigneeService, DossierListComponent, DossierListPaginationService, DossierListSearchService, DossierListService, DossierListStatusService, DossierModule, DossierParameterService, DossierService, DossierTabApiService, DossierTabService, DossierWidgetsApiService, DossierWidgetsLayoutService, StartModalService, TAB_MAP, TabImpl, TabLoaderImpl, WIDGET_HEIGHT_1X, WIDGET_WIDTH_1X };
 //# sourceMappingURL=valtimo-dossier.mjs.map