@valtimo/task 13.38.0 → 13.40.0

package/fesm2022/valtimo-task.mjs

@@ -163,14 +163,27 @@ class TaskService extends BaseApiService {
     getTasks() {
         return this.httpClient.get(this.getApiUrl('/v1/task?filter=all'));
     }
-    getTask(id) {
-        return this.httpClient.get(this.getApiUrl(`/v1/task/${id}`));
+    getTask(id, skipStatusCodes) {
+        // Skipping status codes prevents the global HttpErrorInterceptor from showing an error toast
+        // for those responses, so callers that expect and handle a status (e.g. a 403/404 after a
+        // task assignment change removes the user's access) can do so silently.
+        const options = skipStatusCodes && skipStatusCodes.length > 0
+            ? { headers: new HttpHeaders().set(InterceptorSkip, skipStatusCodes.join(',')) }
+            : {};
+        return this.httpClient.get(this.getApiUrl(`/v1/task/${id}`), options);
     }
     getCandidateUsers(id) {
-        return this.httpClient.get(this.getApiUrl(`/v2/task/${id}/candidate-user`));
+        // The endpoint requires the assign permission. Right after an assignment change the task can be
+        // re-fetched while the (soon to be invalidated) assign permission still reads as allowed, which
+        // triggers this request and a 403. That 403 is expected, so it is skipped to avoid an error
+        // toast; callers fall back to an empty candidate list.
+        return this.httpClient.get(this.getApiUrl(`/v2/task/${id}/candidate-user`), {
+            headers: new HttpHeaders().set(InterceptorSkip, '403'),
+        });
     }
     getCandidateTeams(id) {
-        return this.httpClient.get(this.getApiUrl(`/v1/task/${id}/candidate-team`), { params: { size: '1000' } });
+        // See getCandidateUsers: a 403 is expected right after an assignment change and is skipped.
+        return this.httpClient.get(this.getApiUrl(`/v1/task/${id}/candidate-team`), { params: { size: '1000' }, headers: new HttpHeaders().set(InterceptorSkip, '403') });
     }
     assignTask(id, assigneeRequest) {
         return this.httpClient.post(this.getApiUrl(`/v1/task/${id}/assign`), assigneeRequest);
@@ -1830,11 +1843,15 @@ class TaskDetailModalComponent {
         this.candidateUsers$ = combineLatest([
             this.task$.pipe(filter$1(task => !!task)),
             this.canAssignUserToTask$,
-        ]).pipe(switchMap$1(([task, canAssign]) => canAssign ? this.taskService.getCandidateUsers(task.id) : of([])), shareReplay(1));
+        ]).pipe(switchMap$1(([task, canAssign]) => canAssign
+            ? this.taskService.getCandidateUsers(task.id).pipe(catchError$1(() => of([])))
+            : of([])), shareReplay(1));
         this.candidateTeams$ = combineLatest([
             this.task$.pipe(filter$1(task => !!task)),
             this.canAssignUserToTask$,
-        ]).pipe(switchMap$1(([task, canAssign]) => canAssign ? this.taskService.getCandidateTeams(task.id).pipe(map(page => page.content)) : of([])), shareReplay(1));
+        ]).pipe(switchMap$1(([task, canAssign]) => canAssign
+            ? this.taskService.getCandidateTeams(task.id).pipe(map(page => page.content), catchError$1(() => of([])))
+            : of([])), shareReplay(1));
         this._subscriptions = new Subscription();
         this.iconService.registerAll([FolderDetailsReference16]);
     }
@@ -1876,23 +1893,42 @@ class TaskDetailModalComponent {
                     .subscribe((allowed) => {
                     this.canModifyTask$.next(allowed);
                 });
+                this.permissionService
+                    .requestPermission(CAN_VIEW_TASK_PERMISSION, {
+                    resource: TASK_DETAIL_PERMISSION_RESOURCE.task,
+                    identifier: task.id,
+                })
+                    .subscribe((allowed) => {
+                    if (!allowed && this.task$.getValue()?.id === task.id) {
+                        this.logger.debug('Closing task detail as user is not allowed to view Task with id:', task.id);
+                        this.closeModal();
+                    }
+                });
             }
             else {
                 this.logger.debug('Reset is user allowed to assign a user to Task as task is null');
                 this.canAssignUserToTask$.next(false);
+                this.canModifyTask$.next(false);
             }
         }));
     }
     openTaskUpdateSseEventSubscription() {
         this._subscriptions.add(this.sseService
             .getSseEventObservable('TASK_UPDATE')
-            .pipe(filter$1(event => this.task$.getValue()?.id === event.taskId), switchMap$1(event => this.taskService.getTask(event.taskId).pipe(catchError$1(err => {
-            if (err.status === 404) {
-                return of(null);
-            }
-            this.logger.error('Failed to fetch task on SSE update', err);
-            return EMPTY;
-        }))))
+            .pipe(filter$1(event => this.task$.getValue()?.id === event.taskId), switchMap$1(event => {
+            // A task update (e.g. an assignment by another user) can change the outcome of
+            // permission checks for this task, so drop cached permissions before re-checking
+            this.permissionService.invalidateResource(TASK_DETAIL_PERMISSION_RESOURCE.task, event.taskId);
+            // a 403 or 404 means the user can no longer view the task; these are expected
+            // outcomes here, so they are skipped to avoid a global error toast
+            return this.taskService.getTask(event.taskId, ['403', '404']).pipe(catchError$1(err => {
+                if (err.status === 403 || err.status === 404) {
+                    return of(null);
+                }
+                this.logger.error('Failed to fetch task on SSE update', err);
+                return EMPTY;
+            }));
+        }))
             .subscribe(response => {
             if (!response) {
                 this.closeModal();
@@ -1992,10 +2028,9 @@ class TaskDetailModalComponent {
             assignRequest.assignedTeamKey = event.teamKey ?? '';
         this.taskService
             .assignTask(task.id, assignRequest)
-            .pipe(switchMap$1(() => this.taskService.getTask(task.id)), take(1))
+            .pipe(switchMap$1(() => this.refreshTaskAfterAssignmentChange(task.id)), take(1))
             .subscribe(response => {
-            this.refreshTask(response);
-            this.assignmentOfTaskChanged.emit();
+            this.handleAssignmentChangeResponse(response);
         });
     }
     onUnassigned() {
@@ -2004,12 +2039,34 @@ class TaskDetailModalComponent {
             return;
         this.taskService
             .unassignTask(task.id)
-            .pipe(switchMap$1(() => this.taskService.getTask(task.id)), take(1))
+            .pipe(switchMap$1(() => this.refreshTaskAfterAssignmentChange(task.id)), take(1))
             .subscribe(response => {
-            this.refreshTask(response);
-            this.assignmentOfTaskChanged.emit();
+            this.handleAssignmentChangeResponse(response);
         });
     }
+    refreshTaskAfterAssignmentChange(taskId) {
+        // The new assignment can change the outcome of permission checks for this task,
+        // so drop cached permissions before the task is re-fetched and re-checked
+        this.permissionService.invalidateResource(TASK_DETAIL_PERMISSION_RESOURCE.task, taskId);
+        // a 403 or 404 means the user can no longer view the task; these are expected
+        // outcomes here, so they are skipped to avoid a global error toast
+        return this.taskService.getTask(taskId, ['403', '404']).pipe(catchError$1(error => {
+            if (error?.status === 403 || error?.status === 404) {
+                return of(null);
+            }
+            this.logger.error('Failed to fetch task after assignment change', error);
+            return EMPTY;
+        }));
+    }
+    handleAssignmentChangeResponse(response) {
+        if (response) {
+            this.refreshTask(response);
+        }
+        else {
+            this.closeModal();
+        }
+        this.assignmentOfTaskChanged.emit();
+    }
     onFormSubmit() {
         this.formSubmit.emit();
     }
@@ -2508,7 +2565,7 @@ class TaskListComponent {
                 provide: QUICK_SEARCH_SERVICE,
                 useClass: TaskListQuickSearchService,
             },
-        ], viewQueries: [{ propertyName: "_taskDetail", first: true, predicate: ["taskDetail"], descendants: true }, { propertyName: "_unreadIndicator", first: true, predicate: ["unreadIndicator"], descendants: true, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    loading: loadingTasks$ | async,\n    selectedTaskType: selectedTaskType$ | async,\n    tasks: tasks$ | async,\n    fields: fields$ | async,\n    availableFields: availableFields$ | async,\n    hiddenColumns: hiddenColumns$ | async,\n    visibleTabs: visibleTabs$ | async,\n    pagination: paginationForCurrentTaskTypeForList$ | async,\n    taskListColumnsForCase: taskListColumnsForCase$ | async,\n    sortState: sortStateForCurrentTaskType$ | async,\n    overrideSortState: overrideSortState$ | async,\n    searchFields: searchFields$ | async,\n    loadingSearchFields: loadingSearchFields$ | async,\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n  } as obs\"\n  class=\"main-content\"\n>\n  <div class=\"container-fluid\">\n    @if (obs.caseDefinitionKey && obs.caseDefinitionKey !== ALL_CASES_ID) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          searchFields;\n          context: {\n            obs: obs,\n          }\n        \"\n      ></ng-container>\n\n      <div class=\"mb-3\">\n        <valtimo-quick-search (quickSearchEvent)=\"onQuickSearchEvent($event)\"></valtimo-quick-search>\n      </div>\n    }\n\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      (dueDateChanged)=\"reload()\"\n      (modalClosed)=\"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      [attr.data-testid]=\"'task-list-tab-' + tab\"\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 #unreadIndicator let-data=\"data\">\n  <span *ngIf=\"!data.item?.isOpened\" class=\"valtimo-task-list__unread-dot\"></span>\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\n    lockedTooltipTranslationKey=\"task-list.rowLocked\"\n    [sortState]=\"obs.overrideSortState || 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    <div carbonToolbarContent>\n      <valtimo-list-column-view\n        *ngIf=\"obs.caseDefinitionKey && obs.caseDefinitionKey !== ALL_CASES_ID\"\n        [availableFields]=\"obs.availableFields\"\n        [hiddenColumns]=\"obs.hiddenColumns\"\n        (viewUpdateEvent)=\"onViewUpdateEvent($event)\"\n      ></valtimo-list-column-view>\n    </div>\n\n    <valtimo-no-results\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | 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-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [canSaveSearch]=\"true\"\n      [searchFields]=\"obs.searchFields\"\n      [inputDisabled]=\"obs.loadingSearchFields\"\n      [caseDefinitionKey]=\"obs.caseDefinitionKey\"\n      [setValuesSubject$]=\"setSearchFieldValuesSubject$\"\n      [clearValuesSubject$]=\"clearSearchFieldValuesSubject$\"\n      (doSearch)=\"search($event)\"\n      (saveSearchEvent)=\"onSaveSearchEvent($event)\"\n    >\n    </valtimo-search-fields>\n  </div>\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      [attr.data-testid]=\"'task-list-case-dropdown'\"\n      [disabled]=\"obs.loadingCaseListItems || (obs.caseListItems || []).length === 1\"\n      [skeleton]=\"obs.loadingCaseListItems\"\n      (selected)=\"setCaseDefinition($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.caseListItems || []\"></cds-dropdown-list>\n    </cds-dropdown>\n  </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}.valtimo-task-list__unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:var(--cds-link-primary)}::ng-deep .valtimo-task-list__unread-column{width:2rem;padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i9.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i9.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "directive", type: i13.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2$1.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i2$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "directive", type: i9.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i2$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i9.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields", "caseDefinitionKey", "setValuesSubject$", "clearValuesSubject$", "defaultValues", "disableSaveSearch", "inputDisabled", "externalSearchField", "canSaveSearch"], outputs: ["doSearch", "saveSearchEvent", "clearEvent"] }, { kind: "component", type: i9.QuickSearchComponent, selector: "valtimo-quick-search", outputs: ["quickSearchEvent"] }, { kind: "component", type: i9.ListColumnViewComponent, selector: "valtimo-list-column-view", inputs: ["availableFields", "hiddenColumns", "disabled"], outputs: ["viewUpdateEvent"] }, { kind: "component", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", inputs: ["modalSize", "openFromCaseManagement"], outputs: ["formSubmit", "assignmentOfTaskChanged", "dueDateChanged", "modalClosed"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_taskDetail", first: true, predicate: ["taskDetail"], descendants: true }, { propertyName: "_unreadIndicator", first: true, predicate: ["unreadIndicator"], descendants: true, static: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    loading: loadingTasks$ | async,\n    selectedTaskType: selectedTaskType$ | async,\n    tasks: tasks$ | async,\n    fields: fields$ | async,\n    availableFields: availableFields$ | async,\n    hiddenColumns: hiddenColumns$ | async,\n    visibleTabs: visibleTabs$ | async,\n    pagination: paginationForCurrentTaskTypeForList$ | async,\n    taskListColumnsForCase: taskListColumnsForCase$ | async,\n    sortState: sortStateForCurrentTaskType$ | async,\n    overrideSortState: overrideSortState$ | async,\n    searchFields: searchFields$ | async,\n    loadingSearchFields: loadingSearchFields$ | async,\n    caseDefinitionKey: caseDefinitionKey$ | async,\n    noResultsMessage: noResultsMessage$ | async,\n  } as obs\"\n  class=\"main-content\"\n>\n  <div class=\"container-fluid\">\n    @if (obs.caseDefinitionKey && obs.caseDefinitionKey !== ALL_CASES_ID) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          searchFields;\n          context: {\n            obs: obs,\n          }\n        \"\n      ></ng-container>\n\n      <div class=\"mb-3\">\n        <valtimo-quick-search (quickSearchEvent)=\"onQuickSearchEvent($event)\"></valtimo-quick-search>\n      </div>\n    }\n\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      (dueDateChanged)=\"reload()\"\n      (modalClosed)=\"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      [attr.data-testid]=\"'task-list-tab-' + tab\"\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 #unreadIndicator let-data=\"data\">\n  <span *ngIf=\"!data.item?.isOpened\" class=\"valtimo-task-list__unread-dot\"></span>\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\n    lockedTooltipTranslationKey=\"task-list.rowLocked\"\n    [sortState]=\"obs.overrideSortState || 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    <div carbonToolbarContent>\n      <valtimo-list-column-view\n        *ngIf=\"obs.caseDefinitionKey && obs.caseDefinitionKey !== ALL_CASES_ID\"\n        [availableFields]=\"obs.availableFields\"\n        [hiddenColumns]=\"obs.hiddenColumns\"\n        (viewUpdateEvent)=\"onViewUpdateEvent($event)\"\n      ></valtimo-list-column-view>\n    </div>\n\n    <valtimo-no-results\n      [description]=\"obs.noResultsMessage.description | translate\"\n      [title]=\"obs.noResultsMessage.title | 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-template #searchFields let-obs=\"obs\">\n  <div class=\"mb-3\">\n    <valtimo-search-fields\n      [canSaveSearch]=\"true\"\n      [searchFields]=\"obs.searchFields\"\n      [inputDisabled]=\"obs.loadingSearchFields\"\n      [caseDefinitionKey]=\"obs.caseDefinitionKey\"\n      [setValuesSubject$]=\"setSearchFieldValuesSubject$\"\n      [clearValuesSubject$]=\"clearSearchFieldValuesSubject$\"\n      (doSearch)=\"search($event)\"\n      (saveSearchEvent)=\"onSaveSearchEvent($event)\"\n    >\n    </valtimo-search-fields>\n  </div>\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      [attr.data-testid]=\"'task-list-case-dropdown'\"\n      [disabled]=\"obs.loadingCaseListItems || (obs.caseListItems || []).length === 1\"\n      [skeleton]=\"obs.loadingCaseListItems\"\n      (selected)=\"setCaseDefinition($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs.caseListItems || []\"></cds-dropdown-list>\n    </cds-dropdown>\n  </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}.valtimo-task-list__unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:var(--cds-link-primary)}::ng-deep .valtimo-task-list__unread-column{width:2rem;padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i9.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "initialSearchValue", "searchDebounceMs", "invalidSearchFields", "searchFields", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled", "expandedRowTemplate", "expandedRowKey", "trackByKey"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i9.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "directive", type: i13.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2$1.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i2$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "directive", type: i9.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i2$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i9.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields", "caseDefinitionKey", "setValuesSubject$", "clearValuesSubject$", "defaultValues", "disableSaveSearch", "inputDisabled", "externalSearchField", "canSaveSearch"], outputs: ["doSearch", "saveSearchEvent", "clearEvent"] }, { kind: "component", type: i9.QuickSearchComponent, selector: "valtimo-quick-search", outputs: ["quickSearchEvent"] }, { kind: "component", type: i9.ListColumnViewComponent, selector: "valtimo-list-column-view", inputs: ["availableFields", "hiddenColumns", "disabled"], outputs: ["viewUpdateEvent"] }, { kind: "component", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", inputs: ["modalSize", "openFromCaseManagement"], outputs: ["formSubmit", "assignmentOfTaskChanged", "dueDateChanged", "modalClosed"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TaskListComponent, decorators: [{
             type: Component,