@valtimo/task 11.3.2 → 12.0.1

package/fesm2022/valtimo-task.mjs

@@ -1,38 +1,38 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
-import * as i5 from '@valtimo/security';
-import { InterceptorSkip, AuthGuardService } from '@valtimo/security';
+import { Injectable, EventEmitter, Component, Input, Output, ViewEncapsulation, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1 from '@angular/common/http';
-import { HttpClient } from '@angular/common/http';
+import { HttpParams, HttpClient } from '@angular/common/http';
 import * as i2 from '@valtimo/config';
-import { ROLE_USER, HttpLoaderFactory } from '@valtimo/config';
-import * as i8 from '@angular/common';
+import { BaseApiService, TaskListTab, ROLE_USER, HttpLoaderFactory } from '@valtimo/config';
+import * as i5 from '@valtimo/security';
+import { InterceptorSkip, AuthGuardService } from '@valtimo/security';
+import * as i9 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import * as i10 from '@ng-bootstrap/ng-bootstrap';
+import * as i11 from '@ng-bootstrap/ng-bootstrap';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i8$1 from '@ngx-translate/core';
+import * as i8 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import * as i6 from '@valtimo/components';
-import { FormioOptionsImpl, CarbonListModule, PageHeaderModule, WidgetModule, SpinnerModule, SearchableDropdownSelectModule, CamundaFormModule, FormIoModule, ModalModule } from '@valtimo/components';
-import * as i2$1 from '@valtimo/form-link';
-import { FormLinkModule } from '@valtimo/form-link';
-import * as i11 from 'carbon-components-angular';
-import { LinkModule, TabsModule, ContentSwitcherModule } from 'carbon-components-angular';
+import { ViewType, FormioOptionsImpl, CarbonListModule, PageHeaderModule, WidgetModule, SpinnerModule, SearchableDropdownSelectModule, CamundaFormModule, FormIoModule, ModalModule, RenderInPageHeaderDirectiveModule } from '@valtimo/components';
+import * as i2$1 from '@valtimo/process-link';
+import { ProcessLinkModule } from '@valtimo/process-link';
+import * as i12 from 'carbon-components-angular';
+import { LinkModule, TabsModule, ContentSwitcherModule, DropdownModule } from 'carbon-components-angular';
 import * as i1$1 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
-import { BehaviorSubject, Subscription, take, combineLatest, tap, distinctUntilChanged, switchMap, of, forkJoin, defaultIfEmpty } from 'rxjs';
+import { BehaviorSubject, combineLatest, tap, filter, switchMap, Subscription, take as take$1, distinctUntilChanged, of } from 'rxjs';
+import { map, take, filter as filter$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
 import moment from 'moment';
-import { map, take as take$1 } from 'rxjs/operators';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i7 from '@valtimo/document';
-import * as i3$1 from 'ngx-logger';
-import * as i4 from '@valtimo/access-control';
+import { isEqual } from 'lodash';
+import * as i3$1 from '@valtimo/access-control';
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -48,7 +48,7 @@ import * as i4 from '@valtimo/access-control';
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -64,7 +64,7 @@ import * as i4 from '@valtimo/access-control';
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -78,21 +78,14 @@ import * as i4 from '@valtimo/access-control';
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class TaskList {
-    constructor() {
-        this.tasks = [];
-        this.fields = [];
-        this.pagination = {
-            collectionSize: 0,
-            page: 1,
-            size: 10,
-        };
-        this.page = 0;
-    }
-}
+var TaskListColumnDefaultSort;
+(function (TaskListColumnDefaultSort) {
+    TaskListColumnDefaultSort["ASC"] = "ASC";
+    TaskListColumnDefaultSort["DESC"] = "DESC";
+})(TaskListColumnDefaultSort || (TaskListColumnDefaultSort = {}));
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -108,7 +101,7 @@ class TaskList {
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -122,60 +115,487 @@ class TaskList {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class TaskService {
-    constructor(http, configService) {
-        this.http = http;
+class TaskService extends BaseApiService {
+    constructor(httpClient, configService) {
+        super(httpClient, configService);
+        this.httpClient = httpClient;
         this.configService = configService;
-        this.valtimoEndpointUri = configService.config.valtimoApi.endpointUri;
     }
     queryTasks(params) {
-        return this.http.get(`${this.valtimoEndpointUri}v1/task`, {
+        return this.httpClient.get(this.getApiUrl('/v1/task'), {
             observe: 'response',
             params,
         });
     }
+    queryTasksPage(params) {
+        return this.httpClient.get(this.getApiUrl('/v2/task'), {
+            params,
+        });
+    }
+    queryTasksPageV3(assigneeFilter = TaskListTab.ALL, pageParams, caseDefinitionName) {
+        let httpParams = new HttpParams()
+            .set('filter', assigneeFilter.toUpperCase())
+            .set('page', pageParams.page)
+            .set('size', pageParams.size);
+        if (pageParams.sort) {
+            httpParams = httpParams.append('sort', pageParams.sort);
+        }
+        if (caseDefinitionName) {
+            return this.httpClient.post(this.getApiUrl('/v3/task'), {
+                caseDefinitionName,
+            }, { params: httpParams });
+        }
+        return this.httpClient.post(this.getApiUrl('/v3/task'), {}, { params: httpParams });
+    }
     getTasks() {
-        return this.http.get(`${this.valtimoEndpointUri}v1/task?filter=all`);
+        return this.httpClient.get(this.getApiUrl('/v1/task?filter=all`'));
     }
     getTask(id) {
-        return this.http.get(this.valtimoEndpointUri + 'v1/task/' + id);
+        return this.httpClient.get(this.getApiUrl(`/v1/task/${id}`));
     }
     getCandidateUsers(id) {
-        return this.http.get(this.valtimoEndpointUri + 'v2/task/' + id + '/candidate-user');
+        return this.httpClient.get(this.getApiUrl(`/v2/task/${id}/candidate-user`));
     }
     assignTask(id, assigneeRequest) {
-        return this.http.post(this.valtimoEndpointUri + 'v1/task/' + id + '/assign', assigneeRequest);
+        return this.httpClient.post(this.getApiUrl(`/v1/task/${id}/assign`), assigneeRequest);
     }
     unassignTask(id) {
-        return this.http.post(this.valtimoEndpointUri + 'v1/task/' + id + '/unassign', null);
+        return this.httpClient.post(this.getApiUrl(`/v1/task/${id}/unassign`), null);
     }
     completeTask(id, variables) {
-        return this.http.post(this.valtimoEndpointUri + 'v1/task/' + id + '/complete', {
+        return this.httpClient.post(this.getApiUrl(`/v1/task/${id}/complete`), {
             variables,
             filesToDelete: [],
         });
     }
     getTaskProcessLink(taskId) {
-        return this.http.get(`${this.valtimoEndpointUri}v2/process-link/task/${taskId}`, {
-            headers: { [InterceptorSkip]: '' },
+        return this.httpClient.get(this.getApiUrl(`/v2/process-link/task/${taskId}`), {
+            headers: { [InterceptorSkip]: '404' },
         });
     }
-    getTaskProcessLinkV1(taskId) {
-        return this.http.get(`${this.valtimoEndpointUri}v1/process-link/task/${taskId}`);
+    getTaskListColumns(caseDefinitionName) {
+        return this.httpClient.get(this.getApiUrl(`/v1/case/${caseDefinitionName}/task-list-column`));
     }
     getConfigCustomTaskList() {
         return this.configService.config.customTaskList;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.ConfigService }]; } });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
+
+/*
+ * 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 TaskListService {
+    get caseDefinitionName$() {
+        return this._caseDefinitionName$.asObservable();
+    }
+    get selectedTaskType$() {
+        return this._selectedTaskType$.asObservable();
+    }
+    get selectedTaskType() {
+        return this._selectedTaskType$.getValue();
+    }
+    get loadingStateForCaseDefinition$() {
+        return this._loadingStateForCaseDefinition$.asObservable();
+    }
+    get ALL_CASES_ID() {
+        return this._ALL_CASES_ID;
+    }
+    constructor(taskService) {
+        this.taskService = taskService;
+        this._ALL_CASES_ID = 'ALL_CASES';
+        this._caseDefinitionName$ = new BehaviorSubject(null);
+        this._selectedTaskType$ = new BehaviorSubject(TaskListTab.MINE);
+        this._loadingStateForCaseDefinition$ = new BehaviorSubject(false);
+    }
+    setSelectedTaskType(type) {
+        this._selectedTaskType$.next(type);
+    }
+    setCaseDefinitionName(caseDefinitionName) {
+        this._loadingStateForCaseDefinition$.next(true);
+        this._caseDefinitionName$.next(caseDefinitionName);
+    }
+    setLoadingStateForCaseDefinition(loading) {
+        this._loadingStateForCaseDefinition$.next(loading);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListService, deps: [{ token: TaskService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: TaskService }] });
+
+/*
+ * 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 TaskListSortService {
+    get sortStateForCurrentTaskType$() {
+        return this._sortStateForCurrentTaskType$;
+    }
+    get sortStringForCurrentTaskType$() {
+        return this.sortStateForCurrentTaskType$.pipe(map(sortState => (sortState ? this.getSortString(sortState) : null)));
+    }
+    get _defaultSortState() {
+        return this.taskService.getConfigCustomTaskList()?.defaultSortedColumn || null;
+    }
+    constructor(taskService, taskListService) {
+        this.taskService = taskService;
+        this.taskListService = taskListService;
+        this._sortState$ = new BehaviorSubject({
+            [TaskListTab.ALL]: this._defaultSortState,
+            [TaskListTab.MINE]: this._defaultSortState,
+            [TaskListTab.OPEN]: this._defaultSortState,
+        });
+        this._sortStateForCurrentTaskType$ = combineLatest([
+            this.taskListService.selectedTaskType$,
+            this._sortState$,
+        ]).pipe(map(([selectedTaskType, sortStates]) => sortStates[selectedTaskType]));
+    }
+    updateSortState(taskType, updatedSortState) {
+        this._sortState$.pipe(take(1)).subscribe(sortState => {
+            this._sortState$.next({
+                ...sortState,
+                [taskType]: { ...sortState[taskType], ...updatedSortState },
+            });
+        });
+    }
+    updateSortStates(updatedSortState) {
+        this._sortState$.pipe(take(1)).subscribe(sortStates => {
+            const sortStatesCopy = { ...sortStates };
+            Object.keys(sortStates).forEach(taskType => {
+                sortStatesCopy[taskType] = { ...sortStatesCopy[taskType], ...updatedSortState };
+            });
+            this._sortState$.next(sortStatesCopy);
+        });
+    }
+    clearSortStates() {
+        this._sortState$.pipe(take(1)).subscribe(sortStates => {
+            const sortStatesCopy = { ...sortStates };
+            Object.keys(sortStates).forEach(taskType => {
+                sortStatesCopy[taskType] = null;
+            });
+            this._sortState$.next(sortStatesCopy);
+        });
+    }
+    resetDefaultSortStates() {
+        this._sortState$.pipe(take(1)).subscribe(sortStates => {
+            const sortStatesCopy = { ...sortStates };
+            Object.keys(sortStates).forEach(taskType => {
+                sortStatesCopy[taskType] = this._defaultSortState;
+            });
+            this._sortState$.next(sortStatesCopy);
+        });
+    }
+    getSortString(sort) {
+        return `${sort.state.name},${sort.state.direction}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListSortService, deps: [{ token: TaskService }, { token: TaskListService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListSortService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListSortService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: TaskService }, { type: TaskListService }] });
+
+/*
+ * 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 TaskListColumnService {
+    get hasCustomConfigTaskList() {
+        return !!this.taskService.getConfigCustomTaskList();
+    }
+    get fields$() {
+        return this._fields$.asObservable();
+    }
+    get taskListColumnsForCase$() {
+        return this.taskListService.caseDefinitionName$.pipe(tap(caseDefinitionName => {
+            if (caseDefinitionName === this.taskListService.ALL_CASES_ID) {
+                this.resetTaskListFields();
+            }
+        }), filter(caseDefinitionName => !!caseDefinitionName && caseDefinitionName !== this.taskListService.ALL_CASES_ID), switchMap(caseDefinitionName => this.taskService.getTaskListColumns(caseDefinitionName)), tap(taskListColumns => {
+            if (taskListColumns.length === 0) {
+                this.taskListSortService.updateSortStates({
+                    isSorting: true,
+                    state: {
+                        name: this._DEFAULT_SPECIFIED_TASK_LIST_FIELDS[0].key,
+                        direction: 'DESC',
+                    },
+                });
+                this._fields$.next(this._DEFAULT_SPECIFIED_TASK_LIST_FIELDS);
+            }
+            else {
+                this._fields$.next(this.mapTaskListColumnToColumnConfig(taskListColumns));
+            }
+        }), tap(() => this.taskListService.setLoadingStateForCaseDefinition(false)));
+    }
+    constructor(taskService, taskListService, taskListSortService) {
+        this.taskService = taskService;
+        this.taskListService = taskListService;
+        this.taskListSortService = taskListSortService;
+        this._DEFAULT_TASK_LIST_FIELDS = [
+            {
+                key: 'created',
+                label: `task-list.fieldLabels.created`,
+                viewType: ViewType.TEXT,
+                sortable: true,
+            },
+            {
+                key: 'name',
+                label: `task-list.fieldLabels.name`,
+                viewType: ViewType.TEXT,
+                sortable: true,
+            },
+            {
+                key: 'valtimoAssignee.fullName',
+                label: `task-list.fieldLabels.valtimoAssignee.fullName`,
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'due',
+                label: `task-list.fieldLabels.due`,
+                viewType: ViewType.TEXT,
+                sortable: true,
+            },
+            {
+                key: 'context',
+                label: `task-list.fieldLabels.context`,
+                viewType: ViewType.TEXT,
+            },
+        ];
+        this._DEFAULT_SPECIFIED_TASK_LIST_FIELDS = [
+            {
+                key: 'createTime',
+                label: `task-list.fieldLabels.created`,
+                viewType: ViewType.TEXT,
+                sortable: true,
+            },
+            {
+                key: 'name',
+                label: `task-list.fieldLabels.name`,
+                viewType: ViewType.TEXT,
+                sortable: true,
+            },
+            {
+                key: 'assignee',
+                label: `task-list.fieldLabels.valtimoAssignee.fullName`,
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'dueDate',
+                label: `task-list.fieldLabels.due`,
+                viewType: ViewType.TEXT,
+                sortable: true,
+            },
+        ];
+        this._fields$ = new BehaviorSubject(this._DEFAULT_TASK_LIST_FIELDS);
+    }
+    resetTaskListFields() {
+        if (this.hasCustomConfigTaskList) {
+            this.setFieldsToCustomTaskListFields();
+        }
+        else {
+            this.setFieldsToDefaultTaskListFields();
+        }
+        this.taskListSortService.resetDefaultSortStates();
+        this.taskListService.setLoadingStateForCaseDefinition(false);
+    }
+    setFieldsToCustomTaskListFields() {
+        const customTaskListFields = this.taskService.getConfigCustomTaskList().fields;
+        if (customTaskListFields) {
+            this._fields$.next(customTaskListFields.map((column, index) => ({
+                key: column.propertyName,
+                label: `task-list.fieldLabels.${column.translationKey}`,
+                sortable: column.sortable,
+                ...(column.viewType && { viewType: column.viewType }),
+                ...(column.enum && { enum: column.enum }),
+            })));
+        }
+    }
+    setFieldsToDefaultTaskListFields() {
+        this._fields$.next(this._DEFAULT_TASK_LIST_FIELDS);
+    }
+    mapTaskListColumnToColumnConfig(taskListColumns) {
+        const hasDefaultSort = !!taskListColumns.find(column => column.defaultSort);
+        const firstSortableColumn = taskListColumns.find(column => column.sortable);
+        if (!hasDefaultSort && firstSortableColumn) {
+            this.taskListSortService.updateSortStates({
+                isSorting: true,
+                state: {
+                    name: firstSortableColumn.key,
+                    direction: 'DESC',
+                },
+            });
+        }
+        if (!hasDefaultSort && !firstSortableColumn) {
+            this.taskListSortService.clearSortStates();
+        }
+        return taskListColumns.map(column => {
+            if (column.defaultSort) {
+                this.taskListSortService.updateSortStates({
+                    isSorting: true,
+                    state: {
+                        name: column.key,
+                        direction: column.defaultSort,
+                    },
+                });
+            }
+            return {
+                viewType: this.getViewType(column.displayType.type),
+                key: column.key,
+                label: column.title || column.key,
+                sortable: column.sortable,
+                ...(column?.displayType?.displayTypeParameters?.enum && {
+                    enum: column?.displayType?.displayTypeParameters?.enum,
+                }),
+                ...(column?.displayType?.displayTypeParameters?.dateFormat && {
+                    format: column?.displayType?.displayTypeParameters?.dateFormat,
+                }),
+            };
+        });
+    }
+    getViewType(taskListColumnColumnDisplayType) {
+        switch (taskListColumnColumnDisplayType) {
+            case 'arrayCount':
+                return 'relatedFiles';
+            case 'underscoresToSpaces':
+                return 'stringReplaceUnderscore';
+            default:
+                return taskListColumnColumnDisplayType;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListColumnService, deps: [{ token: TaskService }, { token: TaskListService }, { token: TaskListSortService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListColumnService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListColumnService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: TaskService }, { type: TaskListService }, { type: TaskListSortService }] });
+
+/*
+ * 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 TaskListPaginationService {
+    get paginationForCurrentTaskType$() {
+        return this._paginationForCurrentTaskType$;
+    }
+    get paginationForCurrentTaskTypeForList$() {
+        return this._paginationForCurrentTaskType$.pipe(map(pagination => ({ ...pagination, page: pagination?.page + 1 || 1 })));
+    }
+    constructor(taskListService) {
+        this.taskListService = taskListService;
+        this._pagination$ = new BehaviorSubject({
+            [TaskListTab.ALL]: this.getDefaultPagination(),
+            [TaskListTab.MINE]: this.getDefaultPagination(),
+            [TaskListTab.OPEN]: this.getDefaultPagination(),
+        });
+        this._paginationForCurrentTaskType$ = combineLatest([
+            this.taskListService.selectedTaskType$,
+            this._pagination$,
+        ]).pipe(map(([selectedTaskType, pagination]) => pagination[selectedTaskType]));
+    }
+    updateTaskPagination(taskType, updatedPagination) {
+        this._pagination$.pipe(take(1)).subscribe(pagination => {
+            const currentPagination = pagination[taskType];
+            this._pagination$.next({
+                ...pagination,
+                [taskType]: { ...currentPagination, ...updatedPagination },
+            });
+        });
+    }
+    getLastAvailablePage(page, size, collectionSize) {
+        if (this.isNumber(page) && this.isNumber(size) && this.isNumber(collectionSize) && page !== 0) {
+            const amountOfPages = Math.ceil(collectionSize / size);
+            if (page + 1 > amountOfPages) {
+                return amountOfPages - 1;
+            }
+        }
+        return page;
+    }
+    isNumber(value) {
+        return typeof value === 'number';
+    }
+    getDefaultPagination() {
+        return {
+            page: 0,
+            size: 10,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListPaginationService, deps: [{ token: TaskListService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListPaginationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListPaginationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: TaskListService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -193,45 +613,45 @@ class AssignUserToTaskComponent {
     constructor(taskService) {
         this.taskService = taskService;
         this.assignmentOfTaskChanged = new EventEmitter();
-        this.assignedEmailOnServer$ = new BehaviorSubject(null);
+        this.assignedIdOnServer$ = new BehaviorSubject(null);
         this.assignedUserFullName$ = new BehaviorSubject(null);
         this.candidateUsersForTask$ = new BehaviorSubject(undefined);
         this.disabled$ = new BehaviorSubject(true);
-        this.userEmailToAssign = null;
+        this.userIdToAssign = null;
         this._subscriptions = new Subscription();
     }
     ngOnInit() {
         this._subscriptions.add(this.taskService.getCandidateUsers(this.taskId).subscribe(candidateUsers => {
             this.candidateUsersForTask$.next(candidateUsers);
-            if (this.assigneeEmail) {
-                this.assignedEmailOnServer$.next(this.assigneeEmail);
-                this.userEmailToAssign = this.assigneeEmail;
-                this.assignedUserFullName$.next(this.getAssignedUserName(candidateUsers, this.assigneeEmail));
+            if (this.assigneeId) {
+                this.assignedIdOnServer$.next(this.assigneeId);
+                this.userIdToAssign = this.assigneeId;
+                this.assignedUserFullName$.next(this.getAssignedUserName(candidateUsers, this.assigneeId));
             }
             this.enable();
         }));
     }
     ngOnChanges(changes) {
-        this.candidateUsersForTask$.pipe(take(1)).subscribe(candidateUsers => {
-            const currentUserEmail = changes.assigneeEmail?.currentValue || this.assigneeEmail;
-            this.assignedEmailOnServer$.next(currentUserEmail || null);
-            this.userEmailToAssign = currentUserEmail || null;
-            this.assignedUserFullName$.next(this.getAssignedUserName(candidateUsers ?? [], currentUserEmail));
+        this.candidateUsersForTask$.pipe(take$1(1)).subscribe(candidateUsers => {
+            const currentUserId = changes.assigneeId?.currentValue || this.assigneeId;
+            this.assignedIdOnServer$.next(currentUserId || null);
+            this.userIdToAssign = currentUserId || null;
+            this.assignedUserFullName$.next(this.getAssignedUserName(candidateUsers ?? [], currentUserId));
         });
     }
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
-    assignTask(userEmail) {
+    assignTask(userId) {
         this.disable();
         combineLatest([
             this.candidateUsersForTask$,
-            this.taskService.assignTask(this.taskId, { assignee: userEmail }),
+            this.taskService.assignTask(this.taskId, { assignee: userId }),
         ])
-            .pipe(take(1), tap(([candidateUsers]) => {
-            this.userEmailToAssign = userEmail;
-            this.assignedEmailOnServer$.next(userEmail);
-            this.assignedUserFullName$.next(this.getAssignedUserName(candidateUsers ?? [], userEmail));
+            .pipe(take$1(1), tap(([candidateUsers]) => {
+            this.userIdToAssign = userId;
+            this.assignedIdOnServer$.next(userId);
+            this.assignedUserFullName$.next(this.getAssignedUserName(candidateUsers ?? [], userId));
             this.emitChange();
             this.enable();
         }))
@@ -248,23 +668,23 @@ class AssignUserToTaskComponent {
         }))
             .subscribe();
     }
-    getAssignedUserName(users, userEmail) {
-        if (users && userEmail) {
-            const findUser = users.find(user => user.email === userEmail);
-            return findUser ? findUser.label : userEmail;
+    getAssignedUserName(users, userId) {
+        if (users && userId) {
+            const findUser = users.find(user => user.id === userId);
+            return findUser ? findUser.label : userId;
         }
-        return userEmail || '-';
+        return userId || '-';
     }
     mapUsersForDropdown(users) {
         return (users &&
             users
                 .map(user => ({ ...user, lastName: user.lastName?.split(' ').splice(-1)[0] || '' }))
                 .sort((a, b) => a.lastName.localeCompare(b.lastName))
-                .map(user => ({ text: user.label, id: user.email })));
+                .map(user => ({ text: user.label, id: user.id })));
     }
     clear() {
-        this.assignedEmailOnServer$.next(null);
-        this.userEmailToAssign = null;
+        this.assignedIdOnServer$.next(null);
+        this.userIdToAssign = null;
     }
     emitChange() {
         this.assignmentOfTaskChanged.emit();
@@ -275,22 +695,22 @@ class AssignUserToTaskComponent {
     disable() {
         this.disabled$.next(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignUserToTaskComponent, deps: [{ token: TaskService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: { taskId: "taskId", assigneeEmail: "assigneeEmail" }, outputs: { assignmentOfTaskChanged: "assignmentOfTaskChanged" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    candidateUsers: candidateUsersForTask$ | async,\n    disabled: disabled$ | async,\n    emailOnServer: assignedEmailOnServer$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"row mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <valtimo-searchable-dropdown-select\n          *ngIf=\"obs.candidateUsers; else loading\"\n          [style]=\"'underlinedText'\"\n          [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n          [buttonText]=\"'assignTask.header' | translate\"\n          [searchText]=\"'interface.typeToSearch' | translate\"\n          [noResultsText]=\"'interface.noSearchResults' | translate\"\n          [disabled]=\"obs.disabled\"\n          [selectedText]=\"'assignTask.assignedTo' | translate\"\n          [selectedTextValue]=\"assignedUserFullName$ | async\"\n          [clearSelectionButtonTitle]=\"'assignTask.remove' | translate\"\n          [hasSelection]=\"userEmailToAssign === obs.emailOnServer && obs.emailOnServer !== null\"\n          [width]=\"250\"\n          (itemSelected)=\"assignTask($event)\"\n          (clearSelection)=\"unassignTask()\"\n        >\n        </valtimo-searchable-dropdown-select>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignTask.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.container-fluid{color:#959595}i{font-size:13px}\n"], dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "selectedText", "selectedTextValue", "clearSelectionButtonTitle", "hasSelection", "width", "hasPermission"], outputs: ["itemSelected", "clearSelection"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i8$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AssignUserToTaskComponent, deps: [{ token: TaskService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: { taskId: "taskId", assigneeId: "assigneeId" }, outputs: { assignmentOfTaskChanged: "assignmentOfTaskChanged" }, usesOnChanges: 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    candidateUsers: candidateUsersForTask$ | async,\n    disabled: disabled$ | async,\n    idOnServer: assignedIdOnServer$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"row mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <valtimo-searchable-dropdown-select\n          *ngIf=\"obs.candidateUsers; else loading\"\n          [style]=\"'underlinedText'\"\n          [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n          [buttonText]=\"'assignTask.header' | translate\"\n          [searchText]=\"'interface.typeToSearch' | translate\"\n          [noResultsText]=\"'interface.noSearchResults' | translate\"\n          [disabled]=\"obs.disabled\"\n          [selectedText]=\"'assignTask.assignedTo' | translate\"\n          [selectedTextValue]=\"assignedUserFullName$ | async\"\n          [clearSelectionButtonTitle]=\"'assignTask.remove' | translate\"\n          [hasSelection]=\"userIdToAssign === obs.idOnServer && obs.idOnServer !== null\"\n          [width]=\"250\"\n          (itemSelected)=\"assignTask($event)\"\n          (clearSelection)=\"unassignTask()\"\n        >\n        </valtimo-searchable-dropdown-select>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignTask.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}i{font-size:13px}\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: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignUserToTaskComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AssignUserToTaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-assign-user-to-task', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    candidateUsers: candidateUsersForTask$ | async,\n    disabled: disabled$ | async,\n    emailOnServer: assignedEmailOnServer$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"row mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <valtimo-searchable-dropdown-select\n          *ngIf=\"obs.candidateUsers; else loading\"\n          [style]=\"'underlinedText'\"\n          [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n          [buttonText]=\"'assignTask.header' | translate\"\n          [searchText]=\"'interface.typeToSearch' | translate\"\n          [noResultsText]=\"'interface.noSearchResults' | translate\"\n          [disabled]=\"obs.disabled\"\n          [selectedText]=\"'assignTask.assignedTo' | translate\"\n          [selectedTextValue]=\"assignedUserFullName$ | async\"\n          [clearSelectionButtonTitle]=\"'assignTask.remove' | translate\"\n          [hasSelection]=\"userEmailToAssign === obs.emailOnServer && obs.emailOnServer !== null\"\n          [width]=\"250\"\n          (itemSelected)=\"assignTask($event)\"\n          (clearSelection)=\"unassignTask()\"\n        >\n        </valtimo-searchable-dropdown-select>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignTask.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.container-fluid{color:#959595}i{font-size:13px}\n"] }]
-        }], ctorParameters: function () { return [{ type: TaskService }]; }, propDecorators: { taskId: [{
+            args: [{ selector: 'valtimo-assign-user-to-task', 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    candidateUsers: candidateUsersForTask$ | async,\n    disabled: disabled$ | async,\n    idOnServer: assignedIdOnServer$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"row mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <valtimo-searchable-dropdown-select\n          *ngIf=\"obs.candidateUsers; else loading\"\n          [style]=\"'underlinedText'\"\n          [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n          [buttonText]=\"'assignTask.header' | translate\"\n          [searchText]=\"'interface.typeToSearch' | translate\"\n          [noResultsText]=\"'interface.noSearchResults' | translate\"\n          [disabled]=\"obs.disabled\"\n          [selectedText]=\"'assignTask.assignedTo' | translate\"\n          [selectedTextValue]=\"assignedUserFullName$ | async\"\n          [clearSelectionButtonTitle]=\"'assignTask.remove' | translate\"\n          [hasSelection]=\"userIdToAssign === obs.idOnServer && obs.idOnServer !== null\"\n          [width]=\"250\"\n          (itemSelected)=\"assignTask($event)\"\n          (clearSelection)=\"unassignTask()\"\n        >\n        </valtimo-searchable-dropdown-select>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignTask.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}i{font-size:13px}\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: TaskService }], propDecorators: { taskId: [{
                 type: Input
-            }], assigneeEmail: [{
+            }], assigneeId: [{
                 type: Input
             }], assignmentOfTaskChanged: [{
                 type: Output
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -383,7 +803,7 @@ class TaskDetailModalComponent {
             this.formIoFormData$.next(submission.data);
         }
         combineLatest([this.processLinkId$, this.taskProcessLinkType$, this.task$])
-            .pipe(take$1(1))
+            .pipe(take(1))
             .subscribe(([processLinkId, taskProcessLinkType, task]) => {
             if (taskProcessLinkType === 'form') {
                 if (processLinkId) {
@@ -402,7 +822,7 @@ class TaskDetailModalComponent {
         });
     }
     completeTask() {
-        this.task$.pipe(take$1(1)).subscribe(task => {
+        this.task$.pipe(take(1)).subscribe(task => {
             this.toastr.success(`${task.name} ${this.translateService.instant('taskDetail.taskCompleted')}`);
             this.modal.hide();
             this.task$.next(null);
@@ -430,29 +850,12 @@ class TaskDetailModalComponent {
                     }
                     this.loading$.next(false);
                 }
-                else {
-                    this.getLegacyTaskProcessLink(taskId);
-                }
             },
             error: _ => {
-                this.getLegacyTaskProcessLink(taskId);
+                this.loading$.next(false);
             },
         });
     }
-    getLegacyTaskProcessLink(taskId) {
-        this.taskService.getTaskProcessLinkV1(taskId).subscribe(resV1 => {
-            switch (resV1?.type) {
-                case 'form':
-                    this.taskProcessLinkType$.next('form');
-                    break;
-                case 'form-flow':
-                    this.taskProcessLinkType$.next('form-flow');
-                    this.formFlowInstanceId$.next(resV1.properties.formFlowInstanceId);
-                    break;
-            }
-            this.loading$.next(false);
-        });
-    }
     resetTaskProcessLinkType() {
         this.taskProcessLinkType$.next(null);
         this.processLinkId$.next(null);
@@ -471,13 +874,13 @@ class TaskDetailModalComponent {
             this.stateService.setDocumentDefinitionName(documentDefinitionName);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskDetailModalComponent, deps: [{ token: i1$1.ToastrService }, { token: i2$1.ProcessLinkService }, { token: i3.Router }, { token: TaskService }, { token: i5.UserProviderService }, { token: i6.ValtimoModalService }, { token: i6.FormIoStateService }, { token: i7.DocumentService }, { token: i8$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: { formSubmit: "formSubmit", assignmentOfTaskChanged: "assignmentOfTaskChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formFlow", first: true, predicate: ["formFlow"], descendants: true }, { propertyName: "modal", first: true, predicate: ["taskDetailModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #taskDetailModal\n  *ngIf=\"{\n    loading: loading$ | async,\n    page: page$ | async,\n    task: task$ | async,\n    formDefinition: formDefinition$ | async,\n    processLinkIsForm: processLinkIsForm$ | async,\n    formioOptions: formioOptions$ | async,\n    processLinkIsFormFlow: processLinkIsFormFlow$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n    errorMessage: errorMessage$ | async\n  } as obs\"\n  elementId=\"taskDetailModal\"\n  [title]=\"obs.page?.title\"\n  [subtitle]=\"obs.page?.subtitle\"\n  [templateBelowSubtitle]=\"assignUserToTask\"\n>\n  <div body *ngIf=\"obs.formDefinition && obs.processLinkIsForm\">\n    <valtimo-form-io\n      #form\n      [form]=\"obs.formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"obs.formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"obs.processLinkIsFormFlow\">\n    <valtimo-form-flow\n      #formFlow\n      [formIoFormData]=\"formIoFormData$\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      (formFlowComplete)=\"completeTask()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"obs.loading\">\n    <div class=\"text-black mb-0 p-3 text-center\">\n      {{ 'formManagement.loading' | translate }}\n    </div>\n  </div>\n  <div\n    body\n    *ngIf=\"\n      obs.loading === false && !obs.formDefinition && !obs.formFlowInstanceId && !obs.errorMessage\n    \"\n  >\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>\n  <div body *ngIf=\"obs.errorMessage\">\n    <div class=\"bg-danger text-black mb-0 p-3 text-center\">\n      {{ obs.errorMessage }}\n    </div>\n  </div>\n  <div footer>\n    <div class=\"mb-0 p-3 text-center\" *ngIf=\"!!obs.formDefinition\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoProcessLinkScreen()\"\n        id=\"process-link-button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n</valtimo-modal>\n\n<ng-template #assignUserToTask>\n  <ng-container *ngIf=\"task$ | async as task\">\n    <valtimo-assign-user-to-task\n      *ngIf=\"task && assignmentOfTaskChanged\"\n      [taskId]=\"task.id\"\n      [assigneeEmail]=\"task.assignee\"\n      (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n    ></valtimo-assign-user-to-task>\n  </ng-container>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */#taskDetailModal .formio-component-submit{text-align:right}\n"], dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i6.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i2$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "component", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: ["taskId", "assigneeEmail"], outputs: ["assignmentOfTaskChanged"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i8$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskDetailModalComponent, deps: [{ token: i1$1.ToastrService }, { token: i2$1.ProcessLinkService }, { token: i3.Router }, { token: TaskService }, { token: i5.UserProviderService }, { token: i6.ValtimoModalService }, { token: i6.FormIoStateService }, { token: i7.DocumentService }, { token: i8.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: { formSubmit: "formSubmit", assignmentOfTaskChanged: "assignmentOfTaskChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formFlow", first: true, predicate: ["formFlow"], descendants: true }, { propertyName: "modal", first: true, predicate: ["taskDetailModal"], 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  #taskDetailModal\n  *ngIf=\"{\n    loading: loading$ | async,\n    page: page$ | async,\n    task: task$ | async,\n    formDefinition: formDefinition$ | async,\n    processLinkIsForm: processLinkIsForm$ | async,\n    formioOptions: formioOptions$ | async,\n    processLinkIsFormFlow: processLinkIsFormFlow$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n    errorMessage: errorMessage$ | async\n  } as obs\"\n  elementId=\"taskDetailModal\"\n  [title]=\"obs.page?.title\"\n  [subtitle]=\"obs.page?.subtitle\"\n  [templateBelowSubtitle]=\"assignUserToTask\"\n>\n  <div body *ngIf=\"obs.formDefinition && obs.processLinkIsForm\">\n    <valtimo-form-io\n      #form\n      [form]=\"obs.formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"obs.formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"obs.processLinkIsFormFlow\">\n    <valtimo-form-flow\n      #formFlow\n      [formIoFormData]=\"formIoFormData$\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      (formFlowComplete)=\"completeTask()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"obs.loading\">\n    <div class=\"text-black mb-0 p-3 text-center\">\n      {{ 'formManagement.loading' | translate }}\n    </div>\n  </div>\n  <div\n    body\n    *ngIf=\"\n      obs.loading === false && !obs.formDefinition && !obs.formFlowInstanceId && !obs.errorMessage\n    \"\n  >\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>\n  <div body *ngIf=\"obs.errorMessage\">\n    <div class=\"bg-danger text-black mb-0 p-3 text-center\">\n      {{ obs.errorMessage }}\n    </div>\n  </div>\n  <div footer>\n    <div class=\"mb-0 p-3 text-center\" *ngIf=\"!!obs.formDefinition\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoProcessLinkScreen()\"\n        id=\"process-link-button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n</valtimo-modal>\n\n<ng-template #assignUserToTask>\n  <ng-container *ngIf=\"task$ | async as task\">\n    <valtimo-assign-user-to-task\n      *ngIf=\"task && assignmentOfTaskChanged\"\n      [taskId]=\"task.id\"\n      [assigneeId]=\"task.assignee\"\n      (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n    ></valtimo-assign-user-to-task>\n  </ng-container>\n</ng-template>\n", styles: ["#taskDetailModal .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: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i6.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i2$1.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "component", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: ["taskId", "assigneeId"], outputs: ["assignmentOfTaskChanged"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskDetailModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskDetailModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-task-detail-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #taskDetailModal\n  *ngIf=\"{\n    loading: loading$ | async,\n    page: page$ | async,\n    task: task$ | async,\n    formDefinition: formDefinition$ | async,\n    processLinkIsForm: processLinkIsForm$ | async,\n    formioOptions: formioOptions$ | async,\n    processLinkIsFormFlow: processLinkIsFormFlow$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n    errorMessage: errorMessage$ | async\n  } as obs\"\n  elementId=\"taskDetailModal\"\n  [title]=\"obs.page?.title\"\n  [subtitle]=\"obs.page?.subtitle\"\n  [templateBelowSubtitle]=\"assignUserToTask\"\n>\n  <div body *ngIf=\"obs.formDefinition && obs.processLinkIsForm\">\n    <valtimo-form-io\n      #form\n      [form]=\"obs.formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"obs.formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"obs.processLinkIsFormFlow\">\n    <valtimo-form-flow\n      #formFlow\n      [formIoFormData]=\"formIoFormData$\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      (formFlowComplete)=\"completeTask()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"obs.loading\">\n    <div class=\"text-black mb-0 p-3 text-center\">\n      {{ 'formManagement.loading' | translate }}\n    </div>\n  </div>\n  <div\n    body\n    *ngIf=\"\n      obs.loading === false && !obs.formDefinition && !obs.formFlowInstanceId && !obs.errorMessage\n    \"\n  >\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>\n  <div body *ngIf=\"obs.errorMessage\">\n    <div class=\"bg-danger text-black mb-0 p-3 text-center\">\n      {{ obs.errorMessage }}\n    </div>\n  </div>\n  <div footer>\n    <div class=\"mb-0 p-3 text-center\" *ngIf=\"!!obs.formDefinition\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoProcessLinkScreen()\"\n        id=\"process-link-button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n</valtimo-modal>\n\n<ng-template #assignUserToTask>\n  <ng-container *ngIf=\"task$ | async as task\">\n    <valtimo-assign-user-to-task\n      *ngIf=\"task && assignmentOfTaskChanged\"\n      [taskId]=\"task.id\"\n      [assigneeEmail]=\"task.assignee\"\n      (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n    ></valtimo-assign-user-to-task>\n  </ng-container>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */#taskDetailModal .formio-component-submit{text-align:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ToastrService }, { type: i2$1.ProcessLinkService }, { type: i3.Router }, { type: TaskService }, { type: i5.UserProviderService }, { type: i6.ValtimoModalService }, { type: i6.FormIoStateService }, { type: i7.DocumentService }, { type: i8$1.TranslateService }]; }, propDecorators: { form: [{
+            args: [{ selector: 'valtimo-task-detail-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  #taskDetailModal\n  *ngIf=\"{\n    loading: loading$ | async,\n    page: page$ | async,\n    task: task$ | async,\n    formDefinition: formDefinition$ | async,\n    processLinkIsForm: processLinkIsForm$ | async,\n    formioOptions: formioOptions$ | async,\n    processLinkIsFormFlow: processLinkIsFormFlow$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n    errorMessage: errorMessage$ | async\n  } as obs\"\n  elementId=\"taskDetailModal\"\n  [title]=\"obs.page?.title\"\n  [subtitle]=\"obs.page?.subtitle\"\n  [templateBelowSubtitle]=\"assignUserToTask\"\n>\n  <div body *ngIf=\"obs.formDefinition && obs.processLinkIsForm\">\n    <valtimo-form-io\n      #form\n      [form]=\"obs.formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"obs.formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"obs.processLinkIsFormFlow\">\n    <valtimo-form-flow\n      #formFlow\n      [formIoFormData]=\"formIoFormData$\"\n      [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n      (formFlowComplete)=\"completeTask()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"obs.loading\">\n    <div class=\"text-black mb-0 p-3 text-center\">\n      {{ 'formManagement.loading' | translate }}\n    </div>\n  </div>\n  <div\n    body\n    *ngIf=\"\n      obs.loading === false && !obs.formDefinition && !obs.formFlowInstanceId && !obs.errorMessage\n    \"\n  >\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>\n  <div body *ngIf=\"obs.errorMessage\">\n    <div class=\"bg-danger text-black mb-0 p-3 text-center\">\n      {{ obs.errorMessage }}\n    </div>\n  </div>\n  <div footer>\n    <div class=\"mb-0 p-3 text-center\" *ngIf=\"!!obs.formDefinition\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoProcessLinkScreen()\"\n        id=\"process-link-button\"\n      >\n        {{ 'formManagement.gotoProcessLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n</valtimo-modal>\n\n<ng-template #assignUserToTask>\n  <ng-container *ngIf=\"task$ | async as task\">\n    <valtimo-assign-user-to-task\n      *ngIf=\"task && assignmentOfTaskChanged\"\n      [taskId]=\"task.id\"\n      [assigneeId]=\"task.assignee\"\n      (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n    ></valtimo-assign-user-to-task>\n  </ng-container>\n</ng-template>\n", styles: ["#taskDetailModal .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.ToastrService }, { type: i2$1.ProcessLinkService }, { type: i3.Router }, { type: TaskService }, { type: i5.UserProviderService }, { type: i6.ValtimoModalService }, { type: i6.FormIoStateService }, { type: i7.DocumentService }, { type: i8.TranslateService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form']
             }], formFlow: [{
@@ -493,7 +896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -531,7 +934,7 @@ const CAN_VIEW_CASE_PERMISSION = {
 };
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -547,231 +950,255 @@ const CAN_VIEW_CASE_PERMISSION = {
  */
 moment.locale(localStorage.getItem('langKey') || '');
 class TaskListComponent {
-    constructor(configService, documentService, logger, permissionService, router, taskService, translateService) {
+    constructor(configService, documentService, permissionService, router, taskService, taskListService, translateService, taskListColumnService, taskListPaginationService, taskListSortService) {
         this.configService = configService;
         this.documentService = documentService;
-        this.logger = logger;
         this.permissionService = permissionService;
         this.router = router;
         this.taskService = taskService;
+        this.taskListService = taskListService;
         this.translateService = translateService;
-        this.tasks = {
-            mine: new TaskList(),
-            open: new TaskList(),
-            all: new TaskList(),
-        };
-        this.visibleTabs = null;
-        this.currentTaskType = 'mine';
-        this.listTitle = null;
-        this.listDescription = null;
-        this.sortState = null;
+        this.taskListColumnService = taskListColumnService;
+        this.taskListPaginationService = taskListPaginationService;
+        this.taskListSortService = taskListSortService;
+        this.selectedTaskType$ = this.taskListService.selectedTaskType$;
+        this.fields$ = this.taskListColumnService.fields$;
         this.loadingTasks$ = new BehaviorSubject(true);
-        this.activeTab$ = new BehaviorSubject('');
-        this.visibleTabs = this.configService.config?.visibleTaskListTabs || null;
-        if (this.visibleTabs) {
-            this.currentTaskType = this.visibleTabs[0];
-        }
-        this.setDefaultSorting();
+        this.visibleTabs$ = new BehaviorSubject(null);
+        this._enableLoadingAnimation$ = new BehaviorSubject(true);
+        this.cachedTasks$ = new BehaviorSubject(null);
+        this.paginationForCurrentTaskTypeForList$ = this.taskListPaginationService.paginationForCurrentTaskTypeForList$;
+        this.sortStateForCurrentTaskType$ = this.taskListSortService.sortStateForCurrentTaskType$;
+        this._reload$ = new BehaviorSubject(true);
+        this.tasks$ = combineLatest([
+            this.taskListService.loadingStateForCaseDefinition$,
+            this.selectedTaskType$,
+            this.taskListPaginationService.paginationForCurrentTaskType$,
+            this.taskListSortService.sortStringForCurrentTaskType$,
+            this.taskListService.caseDefinitionName$,
+            this._enableLoadingAnimation$,
+            this._reload$,
+        ]).pipe(filter$1(([loadingStateForCaseDefinition]) => loadingStateForCaseDefinition === false), map(([_, selectedTaskType, paginationForSelectedTaskType, sortStringForSelectedTaskType, caseDefinitionName, enableLoadingAnimation, reload,]) => this.getTaskListParams(paginationForSelectedTaskType, sortStringForSelectedTaskType, selectedTaskType, caseDefinitionName, enableLoadingAnimation, reload)), distinctUntilChanged$1((previous, current) => isEqual(previous.params, current.params)), tap(({ enableLoadingAnimation }) => {
+            if (enableLoadingAnimation)
+                this.loadingTasks$.next(true);
+        }), switchMap(({ params }) => combineLatest([
+            this.taskService.queryTasksPageV3(params.selectedTaskType, params.params, params.caseDefinitionName),
+            of(!!params.caseDefinitionName),
+        ])), switchMap(([tasksResult, isSpecified]) => this.getTaskListPermissionsRequest(tasksResult, isSpecified)), map(([isSpecified, taskResult, canViewTaskPermissions, canViewCasePermissions]) => {
+            this.updateTaskListPaginationAfterResponse(Number(taskResult.totalElements));
+            return this.mapTasksForList(isSpecified, taskResult, canViewTaskPermissions, canViewCasePermissions);
+        }), tap(tasks => {
+            this.cachedTasks$.next(tasks);
+            this.loadingTasks$.next(false);
+            this.disableLoadingAnimation();
+        }));
+        this.loadingCaseListItems$ = new BehaviorSubject(true);
+        this._selectedCaseDefinitionId$ = new BehaviorSubject(this.taskListService.ALL_CASES_ID);
+        this.caseListItems$ = combineLatest([
+            this.documentService.getAllDefinitions(),
+            this._selectedCaseDefinitionId$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([documentDefinitionRes, selectedCaseDefinitionId]) => [
+            {
+                content: this.translateService.instant('task-list.allCases'),
+                id: this.taskListService.ALL_CASES_ID,
+                selected: selectedCaseDefinitionId === this.taskListService.ALL_CASES_ID,
+            },
+            ...documentDefinitionRes.content.map(documentDefinition => ({
+                id: documentDefinition.id.name,
+                content: documentDefinition?.schema?.title,
+                selected: documentDefinition.id.name === selectedCaseDefinitionId,
+            })),
+        ]), tap(() => this.loadingCaseListItems$.next(false)));
+        this.taskListColumnsForCase$ = this.taskListColumnService.taskListColumnsForCase$;
+        this._DEFAULT_TASK_LIST_TABS = [
+            TaskListTab.MINE,
+            TaskListTab.OPEN,
+            TaskListTab.ALL,
+        ];
     }
-    ngOnDestroy() {
-        this.closeTranslationSubscription();
+    ngOnInit() {
+        this.taskListColumnService.resetTaskListFields();
+        this.setVisibleTabs();
     }
     paginationClicked(page, type) {
-        this.tasks[type].page = page - 1;
-        this.tasks[type].pagination.page = page;
-        this.getTasks(type);
+        this.taskListPaginationService.updateTaskPagination(type, { page: page - 1 });
     }
-    paginationSet(size) {
-        this.tasks.mine.pagination.size =
-            this.tasks.all.pagination.size =
-                this.tasks.open.pagination.size =
-                    size;
-        this.getTasks(this.currentTaskType);
+    paginationSet(newSize) {
+        combineLatest([
+            this.taskListPaginationService.paginationForCurrentTaskType$,
+            this.taskListService.selectedTaskType$,
+        ])
+            .pipe(take(1))
+            .subscribe(([pagination, selectedTaskType]) => {
+            this.taskListPaginationService.updateTaskPagination(selectedTaskType, {
+                size: Number(newSize),
+                page: this.taskListPaginationService.getLastAvailablePage(pagination.page, Number(newSize), pagination.collectionSize),
+            });
+        });
     }
     tabChange(tab) {
-        this.clearPagination(this.currentTaskType);
-        this.getTasks(tab);
-    }
-    showTask(task) {
-        this.router.navigate(['tasks', task.id]);
-    }
-    getTasks(type) {
-        this.loadingTasks$.next(true);
-        this.activeTab$.next(type);
-        let params;
-        this.closeTranslationSubscription();
-        this._translationSubscription = combineLatest([
-            this.translateService.stream(`task-list.${type}.title`),
-            this.translateService.stream(`task-list.${type}.description`),
-        ]).subscribe(([title, description]) => {
-            this.listTitle = title;
-            this.listDescription = description;
-        });
-        switch (type) {
-            case 'mine':
-                params = {
-                    page: this.tasks.mine.page,
-                    size: this.tasks.mine.pagination.size,
-                    filter: 'mine',
-                };
-                this.currentTaskType = 'mine';
-                break;
-            case 'open':
-                params = {
-                    page: this.tasks.open.page,
-                    size: this.tasks.open.pagination.size,
-                    filter: 'open',
-                };
-                this.currentTaskType = 'open';
-                break;
-            case 'all':
-                params = { page: this.tasks.all.page, size: this.tasks.open.pagination.size, filter: 'all' };
-                this.currentTaskType = 'all';
-                break;
-            default:
-                this.logger.fatal('Unreachable case');
-        }
-        if (this.sortState) {
-            params.sort = this.getSortString(this.sortState);
-        }
-        this.taskService
-            .queryTasks(params)
-            .pipe(switchMap(tasksResult => combineLatest([
-            of(tasksResult),
-            forkJoin(tasksResult.body.map(task => this.permissionService
-                .requestPermission(CAN_VIEW_TASK_PERMISSION, {
-                resource: TASK_DETAIL_PERMISSION_RESOURCE.task,
-                identifier: task.id,
-            })
-                .pipe(take$1(1)))).pipe(defaultIfEmpty(null)),
-            forkJoin(tasksResult.body.map(task => this.permissionService
-                .requestPermission(CAN_VIEW_CASE_PERMISSION, {
-                resource: TASK_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocument,
-                identifier: task.businessKey,
-            })
-                .pipe(take$1(1)))).pipe(defaultIfEmpty(null)),
-        ])))
-            .subscribe(([tasksResult, taskPermissions, taskCasePermissions]) => {
-            this.tasks[type].pagination = {
-                ...this.tasks[type].pagination,
-                collectionSize: tasksResult.headers.get('x-total-count'),
-            };
-            this.tasks[type].tasks = tasksResult.body;
-            this.tasks[type].tasks.map((task, taskIndex) => {
-                task.created = moment(task.created).format('DD MMM YYYY HH:mm');
-                if (task.due) {
-                    task.due = moment(task.due).format('DD MMM YYYY HH:mm');
-                }
-                task.locked = !taskPermissions[taskIndex];
-                task.caseLocked = !taskCasePermissions[taskIndex];
-            });
-            if (this.taskService.getConfigCustomTaskList()) {
-                this.customTaskListFields(type);
+        this.taskListService.selectedTaskType$.pipe(take(1)).subscribe(selectedTaskType => {
+            if (selectedTaskType !== tab) {
+                this.enableLoadingAnimation();
+                this.taskListService.setSelectedTaskType(tab);
+                this.taskListPaginationService.updateTaskPagination(tab, { page: 0 });
             }
-            else {
-                this.defaultTaskListFields(type);
-            }
-            this.loadingTasks$.next(false);
         });
     }
     openRelatedCase(event, index) {
         event.stopPropagation();
-        const tasks = this.tasks[this.currentTaskType].tasks;
-        const currentTask = tasks && tasks[index];
-        if (currentTask && !currentTask.caseLocked) {
-            this.documentService
-                .getDocument(currentTask.businessKey)
-                .pipe(take$1(1))
-                .subscribe(document => {
-                this.router.navigate([
-                    `/dossiers/${document.definitionId?.name}/document/${currentTask.businessKey}`,
-                ]);
-            });
+        this.cachedTasks$.pipe(take(1)).subscribe(cachedTasks => {
+            const currentTask = cachedTasks && cachedTasks[index];
+            if (currentTask && !currentTask.caseLocked) {
+                this.documentService
+                    .getDocument(currentTask.businessKey)
+                    .pipe(take(1))
+                    .subscribe(document => {
+                    this.router.navigate([
+                        `/dossiers/${document.definitionId?.name}/document/${currentTask.businessKey}`,
+                    ]);
+                });
+            }
+        });
+    }
+    rowOpenTaskClick(task) {
+        return !task.endTime && !task.locked ? this._taskDetail.openTaskDetails(task) : false;
+    }
+    sortChanged(sortState) {
+        this.taskListSortService.updateSortState(this.taskListService.selectedTaskType, sortState);
+    }
+    setCaseDefinition(definition) {
+        if (definition.item.id) {
+            this.loadingTasks$.next(true);
+            this.taskListService.setCaseDefinitionName(definition.item.id);
         }
     }
-    defaultTaskListFields(type) {
-        this.closeTranslationSubscription();
-        this._translationSubscription = combineLatest([
-            this.translateService.stream(`task-list.fieldLabels.created`),
-            this.translateService.stream(`task-list.fieldLabels.name`),
-            this.translateService.stream(`task-list.fieldLabels.valtimoAssignee.fullName`),
-            this.translateService.stream(`task-list.fieldLabels.due`),
-            this.translateService.stream(`task-list.fieldLabels.context`),
-        ]).subscribe(([created, name, assignee, due, context]) => {
-            this.tasks[type].fields = [
-                {
-                    key: 'created',
-                    label: created,
-                },
-                {
-                    key: 'name',
-                    label: name,
-                },
-                {
-                    key: 'valtimoAssignee.fullName',
-                    label: assignee,
-                },
-                {
-                    key: 'due',
-                    label: due,
-                },
-                {
-                    key: 'context',
-                    label: context,
-                },
-            ];
-        });
+    reload() {
+        this.enableLoadingAnimation();
+        this._reload$.next(!this._reload$.getValue());
     }
-    customTaskListFields(type) {
-        const customTaskListFields = this.taskService.getConfigCustomTaskList().fields;
-        this.closeTranslationSubscription();
-        this._translationSubscription = combineLatest(customTaskListFields.map(column => this.translateService.stream(`task-list.fieldLabels.${column.translationKey}`))).subscribe(labels => {
-            this.tasks[type].fields = customTaskListFields.map((column, index) => ({
-                key: column.propertyName,
-                label: labels[index],
-                sortable: column.sortable,
-                ...(column.viewType && { viewType: column.viewType }),
-                ...(column.enum && { enum: column.enum }),
-            }));
+    updateTaskListPaginationAfterResponse(newCollectionSize) {
+        this.taskListPaginationService.paginationForCurrentTaskType$
+            .pipe(take(1))
+            .subscribe(currentPagination => {
+            this.taskListPaginationService.updateTaskPagination(this.taskListService.selectedTaskType, {
+                collectionSize: Number(newCollectionSize),
+                page: this.taskListPaginationService.getLastAvailablePage(currentPagination.page, currentPagination.size, newCollectionSize),
+            });
         });
     }
-    rowOpenTaskClick(task) {
-        if (!task.endTime && !task.locked) {
-            this.taskDetail.openTaskDetails(task);
+    setVisibleTabs() {
+        const visibleTabs = this.configService.config?.visibleTaskListTabs;
+        if (visibleTabs) {
+            this.visibleTabs$.next(visibleTabs);
+            this.taskListService.setSelectedTaskType(visibleTabs[0]);
         }
         else {
-            return false;
+            this.visibleTabs$.next(this._DEFAULT_TASK_LIST_TABS);
+            this.taskListService.setSelectedTaskType(this._DEFAULT_TASK_LIST_TABS[0]);
         }
     }
-    setDefaultSorting() {
-        this.sortState = this.taskService.getConfigCustomTaskList()?.defaultSortedColumn || null;
+    disableLoadingAnimation() {
+        this._enableLoadingAnimation$.next(false);
     }
-    sortChanged(sortState) {
-        this.sortState = sortState;
-        this.getTasks(this.currentTaskType);
+    enableLoadingAnimation() {
+        this._enableLoadingAnimation$.next(true);
     }
-    getSortString(sort) {
-        return `${sort.state.name},${sort.state.direction}`;
+    getTaskListParams(paginationForSelectedTaskType, sortStringForSelectedTaskType, selectedTaskType, caseDefinitionName, enableLoadingAnimation, reload) {
+        const params = {
+            ...paginationForSelectedTaskType,
+            ...(sortStringForSelectedTaskType && { sort: sortStringForSelectedTaskType }),
+        };
+        delete params.collectionSize;
+        return {
+            params: {
+                reload,
+                selectedTaskType,
+                params,
+                ...(caseDefinitionName &&
+                    caseDefinitionName !== this.taskListService.ALL_CASES_ID && { caseDefinitionName }),
+            },
+            enableLoadingAnimation,
+        };
     }
-    clearPagination(type) {
-        this.tasks[type].page = 0;
+    getTaskListPermissionsRequest(tasksResult, isSpecified) {
+        const taskResults = tasksResult.content;
+        const hasTaskResults = Array.isArray(taskResults) && taskResults.length > 0;
+        return combineLatest([
+            of(isSpecified),
+            of(tasksResult),
+            hasTaskResults
+                ? combineLatest(taskResults.map(task => this.permissionService.requestPermission(CAN_VIEW_TASK_PERMISSION, {
+                    resource: TASK_DETAIL_PERMISSION_RESOURCE.task,
+                    identifier: !isSpecified ? task.id : task.id,
+                })))
+                : of(null),
+            hasTaskResults
+                ? combineLatest(taskResults.map(task => this.permissionService.requestPermission(CAN_VIEW_CASE_PERMISSION, {
+                    resource: TASK_DETAIL_PERMISSION_RESOURCE.jsonSchemaDocument,
+                    identifier: task.businessKey,
+                })))
+                : of(null),
+        ]);
     }
-    closeTranslationSubscription() {
-        this._translationSubscription?.unsubscribe();
+    mapTasksForList(isSpecified, tasks, canViewTaskPermissions, canViewCasePermissions) {
+        const MOMENT_FORMAT = 'DD MMM YYYY HH:mm';
+        if (isSpecified) {
+            return tasks.content.map((specifiedTask, specifiedTaskIndex) => specifiedTask.items.reduce((acc, curr) => ({
+                id: specifiedTask.id,
+                businessKey: specifiedTask.businessKey,
+                processInstanceId: specifiedTask.processInstanceId,
+                name: specifiedTask.name,
+                ...(moment(specifiedTask.created).isValid() && {
+                    created: moment(specifiedTask.created).format(MOMENT_FORMAT),
+                }),
+                ...(canViewTaskPermissions && { locked: !canViewTaskPermissions[specifiedTaskIndex] }),
+                ...(canViewCasePermissions && {
+                    caseLocked: !canViewCasePermissions[specifiedTaskIndex],
+                }),
+                ...acc,
+                [curr.key]: curr.value,
+            }), {}));
+        }
+        return tasks?.content?.map((task, taskIndex) => {
+            const createdDate = moment(task.created);
+            const dueDate = moment(task.due);
+            const taskCopy = { ...task };
+            if (task.due && dueDate.isValid())
+                taskCopy.due = dueDate.format(MOMENT_FORMAT);
+            if (createdDate.isValid())
+                taskCopy.created = createdDate.format(MOMENT_FORMAT);
+            if (canViewTaskPermissions)
+                taskCopy.locked = !canViewTaskPermissions[taskIndex];
+            if (canViewCasePermissions)
+                taskCopy.caseLocked = !canViewCasePermissions[taskIndex];
+            return taskCopy;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskListComponent, deps: [{ token: i2.ConfigService }, { token: i7.DocumentService }, { token: i3$1.NGXLogger }, { token: i4.PermissionService }, { token: i3.Router }, { token: TaskService }, { token: i8$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TaskListComponent, selector: "valtimo-task-list", viewQueries: [{ propertyName: "taskDetail", first: true, predicate: ["taskDetail"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"main-content\"\n  *ngIf=\"{loadingTasks: loadingTasks$ | async, activeTab: activeTab$ | async} as obs\"\n>\n  <div class=\"container-fluid\">\n    <ng-container\n      *ngTemplateOutlet=\"tasksList; context: {show: !obs.loadingTasks, activeTab: obs.activeTab}\"\n    ></ng-container>\n\n    <ng-container\n      *ngTemplateOutlet=\"\n        tasksListLoading;\n        context: {show: obs.loadingTasks, activeTab: obs.activeTab}\n      \"\n    ></ng-container>\n\n    <valtimo-task-detail-modal\n      #taskDetail\n      (formSubmit)=\"getTasks(currentTaskType)\"\n      (assignmentOfTaskChanged)=\"getTasks(currentTaskType)\"\n    ></valtimo-task-detail-modal>\n  </div>\n</div>\n\n<ng-template #configuredTabs let-activeTab=\"activeTab\">\n  <cds-tabs type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n    <cds-tab\n      *ngFor=\"let tab of visibleTabs\"\n      [heading]=\"'task-list.' + tab + '.title' | translate\"\n      [active]=\"activeTab === tab\"\n      (selected)=\"tabChange(tab)\"\n    ></cds-tab>\n  </cds-tabs>\n</ng-template>\n\n<ng-template #caseLink let-data=\"data\">\n  <div *ngIf=\"tasks[currentTaskType].tasks[data.index].caseLocked\">\n    <a\n      class=\"float-left cds--link--disabled\"\n      cdsLink\n      href=\"javascript:void(0)\"\n      ngbTooltip=\"{{ 'task-list.caseLocked' | translate }}\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      {{ 'task-list.goToCase' | translate }}\n    </a>\n  </div>\n  <div *ngIf=\"!tasks[currentTaskType].tasks[data.index].caseLocked\">\n    <a\n      class=\"float-left cds--link\"\n      cdsLink\n      href=\"javascript:void(0)\"\n      (click)=\"openRelatedCase($event, data.index)\"\n    >\n      {{ 'task-list.goToCase' | translate }}\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #tasksList let-show=\"show\" let-activeTab=\"activeTab\">\n  <valtimo-carbon-list\n    [ngClass]=\"{'hide-tasks-list': !show}\"\n    [fields]=\"tasks[currentTaskType].fields\"\n    [header]=\"false\"\n    [items]=\"tasks[currentTaskType].tasks\"\n    [lastColumnTemplate]=\"caseLink\"\n    [pagination]=\"tasks[currentTaskType].pagination\"\n    paginationIdentifier=\"taskList\"\n    lockedTooltipTranslationKey=\"task-list.rowLocked\"\n    (paginationClicked)=\"paginationClicked($event, currentTaskType)\"\n    (paginationSet)=\"paginationSet($event)\"\n    (rowClicked)=\"rowOpenTaskClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <div tabs>\n      <cds-tabs\n        *ngIf=\"visibleTabs === null; else configuredTabs; context: {activeTab: activeTab}\"\n        type=\"contained\"\n        class=\"valtimo-carbon-list__tabs\"\n      >\n        <cds-tab\n          [heading]=\"'task-list.mine.title' | translate\"\n          (selected)=\"tabChange('mine')\"\n          [active]=\"activeTab === 'mine'\"\n        >\n        </cds-tab>\n\n        <cds-tab\n          [heading]=\"'task-list.open.title' | translate\"\n          (selected)=\"tabChange('open')\"\n          [active]=\"activeTab === 'open'\"\n        >\n        </cds-tab>\n\n        <cds-tab\n          [heading]=\"'task-list.all.title' | translate\"\n          (selected)=\"tabChange('all')\"\n          [active]=\"activeTab === 'all'\"\n        >\n        </cds-tab>\n      </cds-tabs>\n    </div>\n\n    <valtimo-no-results\n      [description]=\"'task-list.' + currentTaskType + '.noResultsDescription' | translate\"\n      [title]=\"'task-list.' + currentTaskType + '.noResultsTitle' | translate\"\n    >\n    </valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tasksListLoading let-show=\"show\" let-activeTab=\"activeTab\">\n  <valtimo-carbon-list [ngClass]=\"{'hide-tasks-list': !show}\" [loading]=\"true\">\n    <div tabs>\n      <cds-tabs *ngIf=\"visibleTabs === null\" type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n        <cds-tab [heading]=\"'task-list.mine.title' | translate\" [active]=\"activeTab === 'mine'\">\n        </cds-tab>\n\n        <cds-tab [heading]=\"'task-list.open.title' | translate\" [active]=\"activeTab === 'open'\">\n        </cds-tab>\n\n        <cds-tab [heading]=\"'task-list.all.title' | translate\" [active]=\"activeTab === 'all'\">\n        </cds-tab>\n      </cds-tabs>\n\n      <cds-tabs type=\"contained\" class=\"valtimo-carbon-list__tabs\" *ngIf=\"visibleTabs\">\n        <cds-tab\n          *ngFor=\"let tab of visibleTabs\"\n          [heading]=\"'task-list.' + tab + '.title' | translate\"\n          [active]=\"activeTab === tab\"\n        ></cds-tab>\n      </cds-tabs>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.hide-tasks-list{display:none}.cds--link--disabled{cursor:not-allowed;pointer-events:auto!important;outline:0!important}\n"], dependencies: [{ kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow"] }, { kind: "component", type: i6.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i11.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i11.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i11.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i8$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListComponent, deps: [{ token: i2.ConfigService }, { token: i7.DocumentService }, { token: i3$1.PermissionService }, { token: i3.Router }, { token: TaskService }, { token: TaskListService }, { token: i8.TranslateService }, { token: TaskListColumnService }, { token: TaskListPaginationService }, { token: TaskListSortService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TaskListComponent, selector: "valtimo-task-list", providers: [
+            TaskListService,
+            TaskListColumnService,
+            TaskListPaginationService,
+            TaskListSortService,
+        ], 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\n  *ngIf=\"{\n    loading: loadingTasks$ | async,\n    selectedTaskType: selectedTaskType$ | async,\n    tasks: tasks$ | async,\n    fields: fields$ | async,\n    visibleTabs: visibleTabs$ | async,\n    pagination: paginationForCurrentTaskTypeForList$ | async,\n    taskListColumnsForCase: taskListColumnsForCase$ | async,\n    sortState: sortStateForCurrentTaskType$ | async\n  } as obs\"\n  class=\"main-content\"\n>\n  <div class=\"container-fluid\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        tasksList;\n        context: {\n          obs: obs\n        }\n      \"\n    ></ng-container>\n\n    <ng-container\n      *ngTemplateOutlet=\"\n        tasksListLoading;\n        context: {\n          obs: obs\n        }\n      \"\n    ></ng-container>\n\n    <valtimo-task-detail-modal\n      #taskDetail\n      (formSubmit)=\"reload()\"\n      (assignmentOfTaskChanged)=\"reload()\"\n    ></valtimo-task-detail-modal>\n  </div>\n</div>\n\n<ng-template #configuredTabs let-selectedTaskType=\"selectedTaskType\" let-visibleTabs=\"visibleTabs\">\n  <cds-tabs *ngIf=\"visibleTabs\" type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n    <cds-tab\n      *ngFor=\"let tab of visibleTabs\"\n      [heading]=\"'task-list.' + tab + '.title' | translate\"\n      [active]=\"selectedTaskType === tab\"\n      (selected)=\"tabChange(tab)\"\n    ></cds-tab>\n  </cds-tabs>\n</ng-template>\n\n<ng-template #caseLink let-data=\"data\">\n  <ng-container *ngIf=\"cachedTasks$ | async as cachedTasks\">\n    <div *ngIf=\"cachedTasks[data.index].caseLocked\">\n      <a\n        class=\"float-left cds--link--disabled\"\n        cdsLink\n        href=\"javascript:void(0)\"\n        ngbTooltip=\"{{ 'task-list.caseLocked' | translate }}\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        {{ 'task-list.goToCase' | translate }}\n      </a>\n    </div>\n    <div *ngIf=\"!cachedTasks[data.index].caseLocked\">\n      <a\n        class=\"float-left cds--link\"\n        cdsLink\n        href=\"javascript:void(0)\"\n        (click)=\"openRelatedCase($event, data.index)\"\n      >\n        {{ 'task-list.goToCase' | translate }}\n      </a>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #tasksList let-obs=\"obs\">\n  <valtimo-carbon-list\n    *ngIf=\"!obs.loading\"\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [items]=\"obs.tasks\"\n    [lastColumnTemplate]=\"caseLink\"\n    [pagination]=\"obs.pagination\"\n    paginationIdentifier=\"taskList\"\n    lockedTooltipTranslationKey=\"task-list.rowLocked\"\n    [initialSortState]=\"obs.sortState\"\n    (paginationClicked)=\"paginationClicked($event, obs.selectedTaskType)\"\n    (paginationSet)=\"paginationSet($event)\"\n    (rowClicked)=\"rowOpenTaskClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <div tabs>\n      <ng-container *ngIf=\"obs.visibleTabs\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            configuredTabs;\n            context: {selectedTaskType: obs.selectedTaskType, visibleTabs: obs.visibleTabs}\n          \"\n        ></ng-container>\n      </ng-container>\n    </div>\n\n    <valtimo-no-results\n      [description]=\"'task-list.' + obs.selectedTaskType + '.noResultsDescription' | translate\"\n      [title]=\"'task-list.' + obs.selectedTaskType + '.noResultsTitle' | translate\"\n    >\n    </valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tasksListLoading let-obs=\"obs\">\n  <valtimo-carbon-list *ngIf=\"obs.loading\" [loading]=\"true\">\n    <div tabs>\n      <cds-tabs *ngIf=\"!obs.visibleTabs\" type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n        <cds-tab\n          [heading]=\"'task-list.mine.title' | translate\"\n          [active]=\"obs.selectedTaskType === 'mine'\"\n        >\n        </cds-tab>\n\n        <cds-tab\n          [heading]=\"'task-list.open.title' | translate\"\n          [active]=\"obs.selectedTaskType === 'open'\"\n        >\n        </cds-tab>\n\n        <cds-tab\n          [heading]=\"'task-list.all.title' | translate\"\n          [active]=\"obs.selectedTaskType === 'all'\"\n        >\n        </cds-tab>\n      </cds-tabs>\n\n      <cds-tabs *ngIf=\"obs.visibleTabs\" type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n        <cds-tab\n          *ngFor=\"let tab of obs.visibleTabs\"\n          [heading]=\"'task-list.' + tab + '.title' | translate\"\n          [active]=\"obs.selectedTaskType === tab\"\n        ></cds-tab>\n      </cds-tabs>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <cds-dropdown\n      class=\"case-definition-selection\"\n      *ngIf=\"{\n        loadingCaseListItems: loadingCaseListItems$ | async,\n        caseListItems: caseListItems$ | async\n      } as obs\"\n      [disabled]=\"obs.loadingCaseListItems || (obs.caseListItems || []).length === 1\"\n      [skeleton]=\"obs.loadingCaseListItems\"\n      (selected)=\"setCaseDefinition($event)\"\n    >\n      <cds-dropdown-list\n        [items]=\"obs.caseListItems || []\"\n      ></cds-dropdown-list></cds-dropdown></ng-template\n></ng-container>\n", styles: [".cds--link--disabled{cursor:not-allowed;pointer-events:auto!important;outline:0!important}.case-definition-selection{display:flex;width:250px}\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: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.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: i6.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i12.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i12.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i12.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "directive", type: i6.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i12.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: i12.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-task-list', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"main-content\"\n  *ngIf=\"{loadingTasks: loadingTasks$ | async, activeTab: activeTab$ | async} as obs\"\n>\n  <div class=\"container-fluid\">\n    <ng-container\n      *ngTemplateOutlet=\"tasksList; context: {show: !obs.loadingTasks, activeTab: obs.activeTab}\"\n    ></ng-container>\n\n    <ng-container\n      *ngTemplateOutlet=\"\n        tasksListLoading;\n        context: {show: obs.loadingTasks, activeTab: obs.activeTab}\n      \"\n    ></ng-container>\n\n    <valtimo-task-detail-modal\n      #taskDetail\n      (formSubmit)=\"getTasks(currentTaskType)\"\n      (assignmentOfTaskChanged)=\"getTasks(currentTaskType)\"\n    ></valtimo-task-detail-modal>\n  </div>\n</div>\n\n<ng-template #configuredTabs let-activeTab=\"activeTab\">\n  <cds-tabs type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n    <cds-tab\n      *ngFor=\"let tab of visibleTabs\"\n      [heading]=\"'task-list.' + tab + '.title' | translate\"\n      [active]=\"activeTab === tab\"\n      (selected)=\"tabChange(tab)\"\n    ></cds-tab>\n  </cds-tabs>\n</ng-template>\n\n<ng-template #caseLink let-data=\"data\">\n  <div *ngIf=\"tasks[currentTaskType].tasks[data.index].caseLocked\">\n    <a\n      class=\"float-left cds--link--disabled\"\n      cdsLink\n      href=\"javascript:void(0)\"\n      ngbTooltip=\"{{ 'task-list.caseLocked' | translate }}\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      {{ 'task-list.goToCase' | translate }}\n    </a>\n  </div>\n  <div *ngIf=\"!tasks[currentTaskType].tasks[data.index].caseLocked\">\n    <a\n      class=\"float-left cds--link\"\n      cdsLink\n      href=\"javascript:void(0)\"\n      (click)=\"openRelatedCase($event, data.index)\"\n    >\n      {{ 'task-list.goToCase' | translate }}\n    </a>\n  </div>\n</ng-template>\n\n<ng-template #tasksList let-show=\"show\" let-activeTab=\"activeTab\">\n  <valtimo-carbon-list\n    [ngClass]=\"{'hide-tasks-list': !show}\"\n    [fields]=\"tasks[currentTaskType].fields\"\n    [header]=\"false\"\n    [items]=\"tasks[currentTaskType].tasks\"\n    [lastColumnTemplate]=\"caseLink\"\n    [pagination]=\"tasks[currentTaskType].pagination\"\n    paginationIdentifier=\"taskList\"\n    lockedTooltipTranslationKey=\"task-list.rowLocked\"\n    (paginationClicked)=\"paginationClicked($event, currentTaskType)\"\n    (paginationSet)=\"paginationSet($event)\"\n    (rowClicked)=\"rowOpenTaskClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <div tabs>\n      <cds-tabs\n        *ngIf=\"visibleTabs === null; else configuredTabs; context: {activeTab: activeTab}\"\n        type=\"contained\"\n        class=\"valtimo-carbon-list__tabs\"\n      >\n        <cds-tab\n          [heading]=\"'task-list.mine.title' | translate\"\n          (selected)=\"tabChange('mine')\"\n          [active]=\"activeTab === 'mine'\"\n        >\n        </cds-tab>\n\n        <cds-tab\n          [heading]=\"'task-list.open.title' | translate\"\n          (selected)=\"tabChange('open')\"\n          [active]=\"activeTab === 'open'\"\n        >\n        </cds-tab>\n\n        <cds-tab\n          [heading]=\"'task-list.all.title' | translate\"\n          (selected)=\"tabChange('all')\"\n          [active]=\"activeTab === 'all'\"\n        >\n        </cds-tab>\n      </cds-tabs>\n    </div>\n\n    <valtimo-no-results\n      [description]=\"'task-list.' + currentTaskType + '.noResultsDescription' | translate\"\n      [title]=\"'task-list.' + currentTaskType + '.noResultsTitle' | translate\"\n    >\n    </valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tasksListLoading let-show=\"show\" let-activeTab=\"activeTab\">\n  <valtimo-carbon-list [ngClass]=\"{'hide-tasks-list': !show}\" [loading]=\"true\">\n    <div tabs>\n      <cds-tabs *ngIf=\"visibleTabs === null\" type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n        <cds-tab [heading]=\"'task-list.mine.title' | translate\" [active]=\"activeTab === 'mine'\">\n        </cds-tab>\n\n        <cds-tab [heading]=\"'task-list.open.title' | translate\" [active]=\"activeTab === 'open'\">\n        </cds-tab>\n\n        <cds-tab [heading]=\"'task-list.all.title' | translate\" [active]=\"activeTab === 'all'\">\n        </cds-tab>\n      </cds-tabs>\n\n      <cds-tabs type=\"contained\" class=\"valtimo-carbon-list__tabs\" *ngIf=\"visibleTabs\">\n        <cds-tab\n          *ngFor=\"let tab of visibleTabs\"\n          [heading]=\"'task-list.' + tab + '.title' | translate\"\n          [active]=\"activeTab === tab\"\n        ></cds-tab>\n      </cds-tabs>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.hide-tasks-list{display:none}.cds--link--disabled{cursor:not-allowed;pointer-events:auto!important;outline:0!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2.ConfigService }, { type: i7.DocumentService }, { type: i3$1.NGXLogger }, { type: i4.PermissionService }, { type: i3.Router }, { type: TaskService }, { type: i8$1.TranslateService }]; }, propDecorators: { taskDetail: [{
+            args: [{ selector: 'valtimo-task-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        TaskListService,
+                        TaskListColumnService,
+                        TaskListPaginationService,
+                        TaskListSortService,
+                    ], 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  *ngIf=\"{\n    loading: loadingTasks$ | async,\n    selectedTaskType: selectedTaskType$ | async,\n    tasks: tasks$ | async,\n    fields: fields$ | async,\n    visibleTabs: visibleTabs$ | async,\n    pagination: paginationForCurrentTaskTypeForList$ | async,\n    taskListColumnsForCase: taskListColumnsForCase$ | async,\n    sortState: sortStateForCurrentTaskType$ | async\n  } as obs\"\n  class=\"main-content\"\n>\n  <div class=\"container-fluid\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        tasksList;\n        context: {\n          obs: obs\n        }\n      \"\n    ></ng-container>\n\n    <ng-container\n      *ngTemplateOutlet=\"\n        tasksListLoading;\n        context: {\n          obs: obs\n        }\n      \"\n    ></ng-container>\n\n    <valtimo-task-detail-modal\n      #taskDetail\n      (formSubmit)=\"reload()\"\n      (assignmentOfTaskChanged)=\"reload()\"\n    ></valtimo-task-detail-modal>\n  </div>\n</div>\n\n<ng-template #configuredTabs let-selectedTaskType=\"selectedTaskType\" let-visibleTabs=\"visibleTabs\">\n  <cds-tabs *ngIf=\"visibleTabs\" type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n    <cds-tab\n      *ngFor=\"let tab of visibleTabs\"\n      [heading]=\"'task-list.' + tab + '.title' | translate\"\n      [active]=\"selectedTaskType === tab\"\n      (selected)=\"tabChange(tab)\"\n    ></cds-tab>\n  </cds-tabs>\n</ng-template>\n\n<ng-template #caseLink let-data=\"data\">\n  <ng-container *ngIf=\"cachedTasks$ | async as cachedTasks\">\n    <div *ngIf=\"cachedTasks[data.index].caseLocked\">\n      <a\n        class=\"float-left cds--link--disabled\"\n        cdsLink\n        href=\"javascript:void(0)\"\n        ngbTooltip=\"{{ 'task-list.caseLocked' | translate }}\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        {{ 'task-list.goToCase' | translate }}\n      </a>\n    </div>\n    <div *ngIf=\"!cachedTasks[data.index].caseLocked\">\n      <a\n        class=\"float-left cds--link\"\n        cdsLink\n        href=\"javascript:void(0)\"\n        (click)=\"openRelatedCase($event, data.index)\"\n      >\n        {{ 'task-list.goToCase' | translate }}\n      </a>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #tasksList let-obs=\"obs\">\n  <valtimo-carbon-list\n    *ngIf=\"!obs.loading\"\n    [fields]=\"obs.fields\"\n    [header]=\"false\"\n    [items]=\"obs.tasks\"\n    [lastColumnTemplate]=\"caseLink\"\n    [pagination]=\"obs.pagination\"\n    paginationIdentifier=\"taskList\"\n    lockedTooltipTranslationKey=\"task-list.rowLocked\"\n    [initialSortState]=\"obs.sortState\"\n    (paginationClicked)=\"paginationClicked($event, obs.selectedTaskType)\"\n    (paginationSet)=\"paginationSet($event)\"\n    (rowClicked)=\"rowOpenTaskClick($event)\"\n    (sortChanged)=\"sortChanged($event)\"\n  >\n    <div tabs>\n      <ng-container *ngIf=\"obs.visibleTabs\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            configuredTabs;\n            context: {selectedTaskType: obs.selectedTaskType, visibleTabs: obs.visibleTabs}\n          \"\n        ></ng-container>\n      </ng-container>\n    </div>\n\n    <valtimo-no-results\n      [description]=\"'task-list.' + obs.selectedTaskType + '.noResultsDescription' | translate\"\n      [title]=\"'task-list.' + obs.selectedTaskType + '.noResultsTitle' | translate\"\n    >\n    </valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #tasksListLoading let-obs=\"obs\">\n  <valtimo-carbon-list *ngIf=\"obs.loading\" [loading]=\"true\">\n    <div tabs>\n      <cds-tabs *ngIf=\"!obs.visibleTabs\" type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n        <cds-tab\n          [heading]=\"'task-list.mine.title' | translate\"\n          [active]=\"obs.selectedTaskType === 'mine'\"\n        >\n        </cds-tab>\n\n        <cds-tab\n          [heading]=\"'task-list.open.title' | translate\"\n          [active]=\"obs.selectedTaskType === 'open'\"\n        >\n        </cds-tab>\n\n        <cds-tab\n          [heading]=\"'task-list.all.title' | translate\"\n          [active]=\"obs.selectedTaskType === 'all'\"\n        >\n        </cds-tab>\n      </cds-tabs>\n\n      <cds-tabs *ngIf=\"obs.visibleTabs\" type=\"contained\" class=\"valtimo-carbon-list__tabs\">\n        <cds-tab\n          *ngFor=\"let tab of obs.visibleTabs\"\n          [heading]=\"'task-list.' + tab + '.title' | translate\"\n          [active]=\"obs.selectedTaskType === tab\"\n        ></cds-tab>\n      </cds-tabs>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <cds-dropdown\n      class=\"case-definition-selection\"\n      *ngIf=\"{\n        loadingCaseListItems: loadingCaseListItems$ | async,\n        caseListItems: caseListItems$ | async\n      } as obs\"\n      [disabled]=\"obs.loadingCaseListItems || (obs.caseListItems || []).length === 1\"\n      [skeleton]=\"obs.loadingCaseListItems\"\n      (selected)=\"setCaseDefinition($event)\"\n    >\n      <cds-dropdown-list\n        [items]=\"obs.caseListItems || []\"\n      ></cds-dropdown-list></cds-dropdown></ng-template\n></ng-container>\n", styles: [".cds--link--disabled{cursor:not-allowed;pointer-events:auto!important;outline:0!important}.case-definition-selection{display:flex;width:250px}\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.ConfigService }, { type: i7.DocumentService }, { type: i3$1.PermissionService }, { type: i3.Router }, { type: TaskService }, { type: TaskListService }, { type: i8.TranslateService }, { type: TaskListColumnService }, { type: TaskListPaginationService }, { type: TaskListSortService }], propDecorators: { _taskDetail: [{
                 type: ViewChild,
                 args: ['taskDetail']
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -794,11 +1221,11 @@ const routes = [
     },
 ];
 class TaskRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TaskRoutingModule, imports: [CommonModule, i3.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TaskRoutingModule, imports: [CommonModule, i3.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -808,7 +1235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -823,8 +1250,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class TaskModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TaskModule, declarations: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TaskModule, declarations: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent], imports: [CommonModule,
             TaskRoutingModule,
             CarbonListModule,
             PageHeaderModule,
@@ -833,14 +1260,16 @@ class TaskModule {
             SearchableDropdownSelectModule,
             CamundaFormModule,
             BrowserAnimationsModule,
-            FormsModule, i1$1.ToastrModule, i8$1.TranslateModule, NgbModule,
+            FormsModule, i1$1.ToastrModule, i8.TranslateModule, NgbModule,
             FormIoModule,
             ModalModule,
             LinkModule,
-            FormLinkModule,
+            ProcessLinkModule,
             TabsModule,
-            ContentSwitcherModule], exports: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskModule, imports: [CommonModule,
+            ContentSwitcherModule,
+            RenderInPageHeaderDirectiveModule,
+            DropdownModule], exports: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskModule, imports: [CommonModule,
             TaskRoutingModule,
             CarbonListModule,
             PageHeaderModule,
@@ -865,11 +1294,13 @@ class TaskModule {
             FormIoModule,
             ModalModule,
             LinkModule,
-            FormLinkModule,
+            ProcessLinkModule,
             TabsModule,
-            ContentSwitcherModule] }); }
+            ContentSwitcherModule,
+            RenderInPageHeaderDirectiveModule,
+            DropdownModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TaskModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent],
@@ -899,16 +1330,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormIoModule,
                         ModalModule,
                         LinkModule,
-                        FormLinkModule,
+                        ProcessLinkModule,
                         TabsModule,
                         ContentSwitcherModule,
+                        RenderInPageHeaderDirectiveModule,
+                        DropdownModule,
                     ],
                     exports: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent],
                 }]
         }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -930,5 +1363,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AssignUserToTaskComponent, CAN_ASSIGN_TASK_PERMISSION, CAN_VIEW_CASE_PERMISSION, CAN_VIEW_TASK_PERMISSION, TASK_DETAIL_PERMISSION_RESOURCE, TaskDetailModalComponent, TaskList, TaskListComponent, TaskModule, TaskService };
+export { AssignUserToTaskComponent, CAN_ASSIGN_TASK_PERMISSION, CAN_VIEW_CASE_PERMISSION, CAN_VIEW_TASK_PERMISSION, TASK_DETAIL_PERMISSION_RESOURCE, TaskDetailModalComponent, TaskListColumnDefaultSort, TaskListComponent, TaskModule, TaskService };
 //# sourceMappingURL=valtimo-task.mjs.map