@valtimo/task-management 12.0.0

package/fesm2022/valtimo-task-management.mjs

@@ -0,0 +1,993 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, EventEmitter, Input, Output, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i6 from '@valtimo/components';
+import { ViewType, CarbonListModule, CARBON_THEME, CARBON_CONSTANTS, TooltipIconModule, CarbonMultiInputModule, ValtimoCdsModalDirectiveModule, MoveRowDirection, ConfirmationModalModule } from '@valtimo/components';
+import { BehaviorSubject, switchMap, map, tap, combineLatest, of, filter, Subject, take } from 'rxjs';
+import moment from 'moment/moment';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i1 from '@valtimo/document';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i5 from 'carbon-components-angular';
+import { TabsModule, ModalModule, CheckboxModule, DropdownModule, InputModule, ButtonModule, IconModule } from 'carbon-components-angular';
+import * as i2 from '@valtimo/config';
+import { BaseApiService, ROLE_ADMIN } from '@valtimo/config';
+import * as i1$3 from '@angular/common/http';
+import * as i4 from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TaskListColumnDefaultSort } from '@valtimo/task';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { isEqual } from 'lodash';
+import { AuthGuardService } from '@valtimo/security';
+
+/*
+ * 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 TaskManagementComponent {
+    constructor(documentService, router) {
+        this.documentService = documentService;
+        this.router = router;
+        this.pagination = {
+            collectionSize: 0,
+            page: 1,
+            size: 10,
+        };
+        this._refreshData$ = new BehaviorSubject(null);
+        this.dossiers$ = this._refreshData$.pipe(switchMap(() => this.documentService.queryDefinitionsForManagement({
+            page: this.pagination.page - 1,
+            size: this.pagination.size,
+        })), map((documentDefinitionPage) => {
+            this.pagination = {
+                ...this.pagination,
+                collectionSize: documentDefinitionPage.totalElements,
+            };
+            return documentDefinitionPage.content.map((documentDefinition) => ({
+                ...documentDefinition,
+                createdOn: moment(documentDefinition.createdOn).format('DD MMM YYYY HH:mm'),
+            }));
+        }));
+        this.dossierFields = [
+            { key: 'schema.title', label: 'taskManagement.caseName', viewType: ViewType.TEXT },
+        ];
+    }
+    paginationClicked(page) {
+        this.pagination = { ...this.pagination, page };
+        this._refreshData$.next(null);
+    }
+    paginationSet(size) {
+        this.pagination = { ...this.pagination, size };
+        this._refreshData$.next(null);
+    }
+    redirectToDetails(documentDefinition) {
+        this.router.navigate(['/task-management/dossier', documentDefinition.id.name]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementComponent, deps: [{ token: i1.DocumentService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TaskManagementComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  *ngIf=\"dossiers$ | async as dossiers; else loading\"\n  [items]=\"dossiers\"\n  [fields]=\"dossierFields\"\n  [pagination]=\"pagination\"\n  paginationIdentifier=\"dossierManagementList\"\n  (paginationClicked)=\"paginationClicked($event)\"\n  (paginationSet)=\"paginationSet($event)\"\n  (rowClicked)=\"redirectToDetails($event)\"\n  [hideToolbar]=\"true\"\n>\n  <valtimo-no-results\n    [description]=\"'dossierManagement.noResults.description' | translate\"\n    [title]=\"'dossierManagement.noResults.title' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #loading>\n  <valtimo-carbon-list loading=\"true\"></valtimo-carbon-list>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CarbonListModule, TranslateModule], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  *ngIf=\"dossiers$ | async as dossiers; else loading\"\n  [items]=\"dossiers\"\n  [fields]=\"dossierFields\"\n  [pagination]=\"pagination\"\n  paginationIdentifier=\"dossierManagementList\"\n  (paginationClicked)=\"paginationClicked($event)\"\n  (paginationSet)=\"paginationSet($event)\"\n  (rowClicked)=\"redirectToDetails($event)\"\n  [hideToolbar]=\"true\"\n>\n  <valtimo-no-results\n    [description]=\"'dossierManagement.noResults.description' | translate\"\n    [title]=\"'dossierManagement.noResults.title' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #loading>\n  <valtimo-carbon-list loading=\"true\"></valtimo-carbon-list>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1.DocumentService }, { type: i1$1.Router }] });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var TaskManagementTab;
+(function (TaskManagementTab) {
+    TaskManagementTab[TaskManagementTab["COLUMNS"] = 0] = "COLUMNS";
+})(TaskManagementTab || (TaskManagementTab = {}));
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class TaskManagementService {
+    constructor() {
+        this._activeTab$ = new BehaviorSubject(TaskManagementTab.COLUMNS);
+    }
+    get activeTab$() {
+        return this._activeTab$.asObservable();
+    }
+    setActiveTab(tab) {
+        this._activeTab$.next(tab);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * 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 TaskManagementApiService extends BaseApiService {
+    constructor(httpClient, configService) {
+        super(httpClient, configService);
+        this.httpClient = httpClient;
+        this.configService = configService;
+    }
+    getTaskListColumns(caseDefinitionName) {
+        return this.httpClient.get(this.getApiUrl(`/management/v1/case/${caseDefinitionName}/task-list-column`));
+    }
+    updateTaskListColumn(caseDefinitionName, column) {
+        return this.httpClient.put(this.getApiUrl(`/management/v1/case/${caseDefinitionName}/task-list-column/${column.key}`), column);
+    }
+    deleteTaskListColumn(caseDefinitionName, columnKey) {
+        return this.httpClient.delete(this.getApiUrl(`/management/v1/case/${caseDefinitionName}/task-list-column/${columnKey}`));
+    }
+    swapTaskListColumns(caseDefinitionName, firstColumn, secondColumn) {
+        return this.httpClient.post(this.getApiUrl(`/management/v1/case/${caseDefinitionName}/task-list-column`), { first: firstColumn.key, second: secondColumn.key });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementApiService, deps: [{ token: i1$3.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$3.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.
+ */
+
+/*
+ * 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 TaskManagementColumnModalComponent {
+    set taskListColumns(value) {
+        if (value?.length > 0) {
+            this._taskListColumns$.next(value);
+        }
+    }
+    set type(value) {
+        this.type$.next(value);
+    }
+    get type() {
+        return this.type$.getValue();
+    }
+    set show(showModal) {
+        this.show$.next(showModal);
+        if (showModal)
+            this.enable();
+        if (!showModal)
+            this.resetFormAfterTimeout();
+    }
+    set selectedTaskListColumn(column) {
+        if (column)
+            this.prefillForm(column);
+    }
+    get taskListColumns$() {
+        return this._taskListColumns$.pipe(distinctUntilChanged((previous, current) => isEqual(previous, current)));
+    }
+    get title() {
+        return this.formGroup.get('title');
+    }
+    get key() {
+        return this.formGroup.get('key');
+    }
+    get keyValue$() {
+        return this.key.valueChanges.pipe(distinctUntilChanged());
+    }
+    get path() {
+        return this.formGroup.get('path');
+    }
+    get dateFormat() {
+        return this.formGroup.get('dateFormat');
+    }
+    get displayType() {
+        return this.formGroup.get('displayType');
+    }
+    get sortable() {
+        return this.formGroup.get('sortable');
+    }
+    get defaultSort() {
+        return this.formGroup.get('defaultSort');
+    }
+    get _SORT_ASC_ITEM() {
+        return {
+            content: this.translateService.instant(`listColumn.sortableAsc`),
+            key: 'ASC',
+        };
+    }
+    get _SORT_DESC_ITEM() {
+        return {
+            content: this.translateService.instant(`listColumn.sortableDesc`),
+            key: 'DESC',
+        };
+    }
+    get enumValues$() {
+        return this._enumValues$.pipe(distinctUntilChanged((previous, current) => isEqual(previous, current)));
+    }
+    get enumValid$() {
+        return this.enumValues$.pipe(map(values => this.getValidEnumValues(values).length > 0));
+    }
+    get yesNoValues$() {
+        return this._yesNoValues$.pipe(distinctUntilChanged((previous, current) => isEqual(previous, current)));
+    }
+    constructor(translateService, taskManagementApiService) {
+        this.translateService = translateService;
+        this.taskManagementApiService = taskManagementApiService;
+        this.carbonTheme = CARBON_THEME.G10;
+        this.closeEvent = new EventEmitter();
+        this.type$ = new BehaviorSubject('add');
+        this.isAdd$ = this.type$.pipe(map(type => type === 'add'));
+        this.isEdit$ = this.type$.pipe(map(type => type === 'edit'), tap(isEdit => {
+            if (isEdit) {
+                this.key.disable();
+            }
+            else {
+                this.key.enable();
+            }
+        }));
+        this.show$ = new BehaviorSubject(false);
+        this.disabled$ = new BehaviorSubject(false);
+        this._taskListColumns$ = new BehaviorSubject([]);
+        this._INVALID_KEY = 'INVALID_KEY';
+        this.DISPLAY_TYPES = [
+            ViewType.TEXT,
+            ViewType.DATE,
+            ViewType.BOOLEAN,
+            ViewType.ENUM,
+            ViewType.ARRAY_COUNT,
+            ViewType.UNDERSCORES_TO_SPACES,
+        ];
+        this.getInvalidListItem = (translateKey) => ({
+            content: this.translateService.instant(translateKey),
+            key: this._INVALID_KEY,
+            selected: true,
+        });
+        this.uniqueKeyValidator = (keyFormControl) => {
+            const taskListColumns = this._taskListColumns$.getValue();
+            return !taskListColumns?.find(column => column?.key?.trim()?.toLowerCase() === keyFormControl?.value?.trim()?.toLowerCase())
+                ? null
+                : { notUnique: true };
+        };
+        this.listItemValidator = (listItemControl) => listItemControl?.value?.key && listItemControl.value.key !== this._INVALID_KEY
+            ? null
+            : { invalidItem: true };
+        this.formGroup = new FormGroup({
+            title: new FormControl(null),
+            key: new FormControl(null, [this.uniqueKeyValidator.bind(this), Validators.required]),
+            path: new FormControl(null, Validators.required),
+            dateFormat: new FormControl(null),
+            displayType: new FormControl(this.getInvalidListItem(`listColumn.selectDefaultSort`), [
+                Validators.required,
+                this.listItemValidator.bind(this),
+            ]),
+            sortable: new FormControl(false),
+            defaultSort: new FormControl(this.getInvalidListItem(`listColumn.selectDefaultSort`), [
+                Validators.required,
+            ]),
+        });
+        this.sortItems$ = combineLatest([
+            this.defaultSort?.valueChanges || of(null),
+            this.translateService.stream('key'),
+        ]).pipe(map(([defaultSortItem]) => [
+            this.getInvalidListItem(`listColumn.selectDefaultSort`),
+            this._SORT_ASC_ITEM,
+            this._SORT_DESC_ITEM,
+        ].map((item, index) => ({
+            ...item,
+            selected: defaultSortItem?.key === item?.key,
+        }))));
+        this.viewTypeItems$ = combineLatest([
+            this.displayType?.valueChanges || of(null),
+            this.translateService.stream('key'),
+        ]).pipe(map(([displayTypeItem]) => [
+            {
+                content: this.translateService.instant(`listColumnDisplayType.select`),
+                key: this._INVALID_KEY,
+            },
+            ...this.DISPLAY_TYPES.map(type => this.getListItemFromViewType(type)),
+        ].map((item, index) => ({
+            ...item,
+            selected: displayTypeItem?.key === item?.key,
+        }))));
+        this.showDateFormat$ = this.formGroup.valueChanges.pipe(map(formValues => !!(formValues.displayType?.key === this.DISPLAY_TYPES[1])), tap(showDateFormat => (this._showDateFormat = showDateFormat)));
+        this.showEnum$ = this.formGroup.valueChanges.pipe(map(formValues => !!(formValues.displayType?.key === ViewType.ENUM)), tap(showEnum => {
+            this._showEnum = showEnum;
+            if ((this._enumValues$.getValue() || []).length === 0)
+                this.resetEnumValues();
+        }));
+        this.showYesNo$ = this.formGroup.valueChanges.pipe(map(formValues => !!(formValues.displayType?.key === ViewType.BOOLEAN)), tap(showYesNo => {
+            this._showYesNo = showYesNo;
+            if ((this._yesNoValues$.getValue() || []).length === 0)
+                this.resetYesNoValues();
+        }));
+        this.CARBON_THEME_WHITE = CARBON_THEME.WHITE;
+        this.disableDefaultSort$ = combineLatest([this.taskListColumns$, this.keyValue$]).pipe(map(([taskListColumns, keyValue]) => {
+            const defaultSortColumn = taskListColumns.find(column => column?.defaultSort === TaskListColumnDefaultSort.ASC ||
+                column?.defaultSort === TaskListColumnDefaultSort.DESC);
+            const defaultSortColumnExists = !!defaultSortColumn;
+            const enabled = !defaultSortColumnExists || defaultSortColumn.key === keyValue;
+            if (enabled) {
+                this.defaultSort?.enable();
+            }
+            else {
+                this.defaultSort?.disable();
+            }
+            return !enabled;
+        }));
+        this._DEFAULT_ENUM_VALUES = [{ key: '', value: '' }];
+        this._enumValues$ = new BehaviorSubject(this._DEFAULT_ENUM_VALUES);
+        this._yesNoValues$ = new BehaviorSubject(this._DEFAULT_ENUM_VALUES);
+    }
+    closeModal() {
+        this.closeEvent.emit('close');
+    }
+    save() {
+        this.disable();
+        this.taskManagementApiService
+            .updateTaskListColumn(this.documentDefinitionName, this.getTaskListColumnFromFormValue(this._showEnum, this._showDateFormat, this._showYesNo))
+            .subscribe({
+            next: () => {
+                this.closeModalAndRefresh();
+                this.enableAfterTimeout();
+            },
+            error: () => {
+                this.enable();
+            },
+        });
+    }
+    enumValueChange(value) {
+        this._enumValues$.next(value);
+    }
+    yesNoValueChange(value) {
+        this._yesNoValues$.next(value);
+    }
+    resetEnumValues() {
+        this._enumValues$.next(this._DEFAULT_ENUM_VALUES);
+    }
+    resetYesNoValues() {
+        this._yesNoValues$.next(this._DEFAULT_ENUM_VALUES);
+    }
+    resetFormAfterTimeout() {
+        setTimeout(() => {
+            this.resetForm();
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    resetForm() {
+        this.resetEnumValues();
+        this.resetYesNoValues();
+        this.formGroup.reset({
+            title: null,
+            key: null,
+            dateFormat: null,
+            displayType: this.getInvalidListItem('listColumnDisplayType.select'),
+            sortable: false,
+            defaultSort: this.getInvalidListItem(`listColumn.selectDefaultSort`),
+        });
+    }
+    disable() {
+        this.disabled$.next(true);
+    }
+    enableAfterTimeout() {
+        setTimeout(() => {
+            this.enable();
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    enable() {
+        this.disabled$.next(false);
+    }
+    closeModalAndRefresh() {
+        this.closeEvent.emit('refresh');
+    }
+    getTaskListColumnFromFormValue(includeEnum, includeDateFormat, includeYesNo) {
+        const validEnumValues = this.getValidEnumValues(this._enumValues$.getValue());
+        const mappedEnumValues = validEnumValues && validEnumValues.length > 0 && this.mapEnumValues(validEnumValues);
+        const validYesNoValues = this.getValidEnumValues(this._yesNoValues$.getValue());
+        const mappedYesNoValues = validYesNoValues && validYesNoValues.length > 0 && this.mapEnumValues(validYesNoValues);
+        const formValue = this.formGroup.getRawValue();
+        const taskListColumn = {
+            ...(formValue.title && { title: formValue.title }),
+            key: formValue.key,
+            path: formValue.path,
+            displayType: {
+                type: formValue.displayType.key,
+                displayTypeParameters: {
+                    ...(includeDateFormat && formValue.dateFormat && { dateFormat: formValue.dateFormat }),
+                    ...(includeEnum && mappedEnumValues && { enum: mappedEnumValues }),
+                    ...(includeYesNo && mappedYesNoValues && { enum: mappedYesNoValues }),
+                },
+            },
+            sortable: formValue.sortable,
+            ...(formValue.defaultSort.key !== this._INVALID_KEY && {
+                defaultSort: formValue.defaultSort.key,
+            }),
+        };
+        return taskListColumn;
+    }
+    mapEnumValues(enumValues) {
+        return enumValues.reduce((acc, curr) => ({ ...acc, [curr.key]: curr.value }), {});
+    }
+    getValidEnumValues(values) {
+        return (values || []).filter(value => value.value && value.key);
+    }
+    getListItemFromViewType(viewType) {
+        return {
+            content: this.translateService.instant(`listColumnDisplayType.${viewType}`),
+            key: viewType,
+        };
+    }
+    getMultiInputValuesFromTaskListColumnEnum(taskListColumnEnum) {
+        return Object.keys(taskListColumnEnum).reduce((acc, curr) => [...acc, { key: curr, value: taskListColumnEnum[curr] }], []);
+    }
+    prefillForm(column) {
+        if (column?.displayType?.type === ViewType.ENUM &&
+            column?.displayType?.displayTypeParameters?.enum) {
+            this._enumValues$.next(this.getMultiInputValuesFromTaskListColumnEnum(column.displayType.displayTypeParameters.enum));
+        }
+        if (column?.displayType?.type === ViewType.BOOLEAN &&
+            column?.displayType?.displayTypeParameters?.enum) {
+            this._yesNoValues$.next(this.getMultiInputValuesFromTaskListColumnEnum(column.displayType.displayTypeParameters.enum));
+        }
+        this.formGroup.patchValue({
+            key: column.key,
+            path: column.path,
+            sortable: column.sortable,
+            displayType: this.getListItemFromViewType(column.displayType.type),
+            ...(column.title && { title: column.title }),
+            ...(!column.defaultSort && {
+                defaultSort: this.getInvalidListItem(`listColumn.selectDefaultSort`),
+            }),
+            ...(column.defaultSort === 'ASC' && { defaultSort: this._SORT_ASC_ITEM }),
+            ...(column.defaultSort === 'DESC' && { defaultSort: this._SORT_DESC_ITEM }),
+            ...(column.displayType?.type === ViewType.DATE && {
+                dateFormat: column.displayType.displayTypeParameters.dateFormat,
+            }),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementColumnModalComponent, deps: [{ token: i1$2.TranslateService }, { token: TaskManagementApiService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TaskManagementColumnModalComponent, isStandalone: true, selector: "valtimo-task-management-column-modal", inputs: { carbonTheme: "carbonTheme", taskListColumns: "taskListColumns", type: "type", show: "show", documentDefinitionName: "documentDefinitionName", selectedTaskListColumn: "selectedTaskListColumn" }, outputs: { closeEvent: "closeEvent" }, 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    show: show$ | async,\n    type: type$ | async,\n    isAdd: isAdd$ | async,\n    isEdit: isEdit$ | async,\n    disabled: disabled$ | async,\n    showDateFormat: showDateFormat$ | async,\n    showEnum: showEnum$ | async,\n    showYesNo: showYesNo$ | async,\n    disableDefaultSort: disableDefaultSort$ | async,\n    enumValues: enumValues$ | async,\n    enumValid: enumValid$ | async,\n    yesNoValues: yesNoValues$ | async,\n    viewTypeItems: viewTypeItems$ | async,\n    sortItems: sortItems$ | async\n  } as obs\"\n>\n  <cds-modal size=\"sm\" [open]=\"obs.show\" valtimoCdsModal>\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          obs.type === 'add'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"form; context: {obs: obs}\"></ng-container>\n    </section>\n\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {obs: obs}\"> </ng-container>\n  </cds-modal>\n</ng-container>\n\n<ng-template #form let-obs=\"obs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [invalid]=\"key?.touched && key?.invalid\"\n        [disabled]=\"obs.disabled || obs.isEdit\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input cdsText formControlName=\"key\" />\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input cdsText formControlName=\"path\" />\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <cds-dropdown\n          *ngIf=\"obs.viewTypeItems\"\n          formControlName=\"displayType\"\n          [disabled]=\"obs.disabled\"\n        >\n          <cds-dropdown-list [items]=\"obs.viewTypeItems\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"obs.showDateFormat\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"obs.showEnum\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.enumTitle' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.enumTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"obs.showEnum\"\n          [fullWidth]=\"true\"\n          [carbonTheme]=\"CARBON_THEME_WHITE\"\n          [defaultValues]=\"obs.enumValues\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"obs.showYesNo\" [ngClass]=\"'no-margin'\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.enumTitleOptional' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.enumTooltipOptional' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"obs.showYesNo\"\n          [fullWidth]=\"true\"\n          [carbonTheme]=\"CARBON_THEME_WHITE\"\n          [defaultValues]=\"obs.yesNoValues\"\n          type=\"keyValue\"\n          [hideAddButton]=\"true\"\n          [hideDeleteButton]=\"true\"\n          [maxRows]=\"1\"\n          [keyColumnTitle]=\"'viewTypeConverter.Yes' | translate\"\n          [valueColumnTitle]=\"'viewTypeConverter.No' | translate\"\n          (valueChange)=\"yesNoValueChange($event)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\" [disabled]=\"obs.disabled\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"obs.disabled || obs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <cds-dropdown formControlName=\"defaultSort\" [disabled]=\"obs.disabled\" *ngIf=\"obs.sortItems\">\n          <cds-dropdown-list [items]=\"obs.sortItems\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-obs=\"obs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        (click)=\"closeModal()\"\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        (click)=\"save()\"\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"!obs.valid\"\n        [disabled]=\"obs.disabled || formGroup?.invalid || (obs.showEnum && !obs.enumValid)\"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n", styles: [".cds--text-input__field-wrapper cds-label{width:100%}.cds--text-input__field-wrapper ::ng-deep .cds--label{width:100%}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:16px}.label-with-tooltip{display:flex;align-items:center}.select-label{padding-bottom:8px}.list-column-form{margin-bottom:16px}.no-margin{margin-bottom:0!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TabsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i5.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5.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: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TooltipIconModule }, { kind: "component", type: i6.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "ngmodule", type: CarbonMultiInputModule }, { kind: "component", type: i6.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ValtimoCdsModalDirectiveModule }, { kind: "directive", type: i6.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementColumnModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-task-management-column-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        CarbonListModule,
+                        TranslateModule,
+                        TabsModule,
+                        FormsModule,
+                        ModalModule,
+                        CheckboxModule,
+                        DropdownModule,
+                        InputModule,
+                        ReactiveFormsModule,
+                        TooltipIconModule,
+                        CarbonMultiInputModule,
+                        ButtonModule,
+                        ValtimoCdsModalDirectiveModule,
+                    ], 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    show: show$ | async,\n    type: type$ | async,\n    isAdd: isAdd$ | async,\n    isEdit: isEdit$ | async,\n    disabled: disabled$ | async,\n    showDateFormat: showDateFormat$ | async,\n    showEnum: showEnum$ | async,\n    showYesNo: showYesNo$ | async,\n    disableDefaultSort: disableDefaultSort$ | async,\n    enumValues: enumValues$ | async,\n    enumValid: enumValid$ | async,\n    yesNoValues: yesNoValues$ | async,\n    viewTypeItems: viewTypeItems$ | async,\n    sortItems: sortItems$ | async\n  } as obs\"\n>\n  <cds-modal size=\"sm\" [open]=\"obs.show\" valtimoCdsModal>\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          obs.type === 'add'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"form; context: {obs: obs}\"></ng-container>\n    </section>\n\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {obs: obs}\"> </ng-container>\n  </cds-modal>\n</ng-container>\n\n<ng-template #form let-obs=\"obs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [invalid]=\"key?.touched && key?.invalid\"\n        [disabled]=\"obs.disabled || obs.isEdit\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input cdsText formControlName=\"key\" />\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input cdsText formControlName=\"path\" />\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <cds-dropdown\n          *ngIf=\"obs.viewTypeItems\"\n          formControlName=\"displayType\"\n          [disabled]=\"obs.disabled\"\n        >\n          <cds-dropdown-list [items]=\"obs.viewTypeItems\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"obs.showDateFormat\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"obs.showEnum\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.enumTitle' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.enumTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"obs.showEnum\"\n          [fullWidth]=\"true\"\n          [carbonTheme]=\"CARBON_THEME_WHITE\"\n          [defaultValues]=\"obs.enumValues\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"obs.showYesNo\" [ngClass]=\"'no-margin'\">\n      <cds-label [disabled]=\"obs.disabled\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.enumTitleOptional' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.enumTooltipOptional' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"obs.showYesNo\"\n          [fullWidth]=\"true\"\n          [carbonTheme]=\"CARBON_THEME_WHITE\"\n          [defaultValues]=\"obs.yesNoValues\"\n          type=\"keyValue\"\n          [hideAddButton]=\"true\"\n          [hideDeleteButton]=\"true\"\n          [maxRows]=\"1\"\n          [keyColumnTitle]=\"'viewTypeConverter.Yes' | translate\"\n          [valueColumnTitle]=\"'viewTypeConverter.No' | translate\"\n          (valueChange)=\"yesNoValueChange($event)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\" [disabled]=\"obs.disabled\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"obs.disabled || obs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"obs.disabled\"\n          ></v-tooltip-icon>\n        </span>\n\n        <cds-dropdown formControlName=\"defaultSort\" [disabled]=\"obs.disabled\" *ngIf=\"obs.sortItems\">\n          <cds-dropdown-list [items]=\"obs.sortItems\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-obs=\"obs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        (click)=\"closeModal()\"\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"obs.disabled\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n\n      <button\n        (click)=\"save()\"\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"!obs.valid\"\n        [disabled]=\"obs.disabled || formGroup?.invalid || (obs.showEnum && !obs.enumValid)\"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n", styles: [".cds--text-input__field-wrapper cds-label{width:100%}.cds--text-input__field-wrapper ::ng-deep .cds--label{width:100%}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:16px}.label-with-tooltip{display:flex;align-items:center}.select-label{padding-bottom:8px}.list-column-form{margin-bottom:16px}.no-margin{margin-bottom:0!important}\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$2.TranslateService }, { type: TaskManagementApiService }], propDecorators: { carbonTheme: [{
+                type: Input
+            }], taskListColumns: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], selectedTaskListColumn: [{
+                type: Input
+            }], closeEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class TaskManagementColumnsComponent {
+    constructor(route, taskManagementApiService, translateService) {
+        this.route = route;
+        this.taskManagementApiService = taskManagementApiService;
+        this.translateService = translateService;
+        this.carbonTheme = CARBON_THEME.G10;
+        this._refreshColumns$ = new BehaviorSubject(null);
+        this.documentDefinitionName$ = this.route.params.pipe(map(params => params?.name), filter(name => !!name));
+        this.loadingColumns$ = new BehaviorSubject(true);
+        this.selectedTaskListColumn$ = new Subject();
+        this.cachedTaskListColumns$ = new BehaviorSubject([]);
+        this.taskListColumns$ = combineLatest([
+            this.documentDefinitionName$,
+            this._refreshColumns$,
+            this.translateService.stream('key'),
+        ]).pipe(tap(([_, refresh]) => {
+            if (refresh !== 'noAnimation')
+                this.loadingColumns$.next(true);
+        }), switchMap(([documentDefinitionName]) => this.taskManagementApiService.getTaskListColumns(documentDefinitionName)), tap(columns => {
+            this.cachedTaskListColumns$.next(columns);
+        }), map(columns => columns.map(column => ({
+            ...column,
+            title: column.title || '-',
+            sortable: column.sortable
+                ? this.translateService.instant('listColumn.sortableYes')
+                : this.translateService.instant('listColumn.sortableNo'),
+            defaultSort: (column.defaultSort === 'ASC' &&
+                this.translateService.instant('listColumn.sortableAsc')) ||
+                (column.defaultSort === 'DESC' &&
+                    this.translateService.instant('listColumn.sortableDesc')) ||
+                '-',
+            displayType: this.translateService.instant(`listColumnDisplayType.${column?.displayType?.type}`),
+            displayTypeParameters: this.getDisplayTypeParametersView(column.displayType.displayTypeParameters),
+        }))), tap(() => {
+            this.enable();
+            this.loadingColumns$.next(false);
+        }));
+        this.showDeleteModal$ = new Subject();
+        this.deleteRowKey$ = new BehaviorSubject('');
+        this.disabled$ = new BehaviorSubject(true);
+        this.fields = [
+            {
+                viewType: 'string',
+                sortable: false,
+                key: 'title',
+                label: 'listColumn.title',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                key: 'key',
+                label: 'listColumn.key',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                key: 'path',
+                label: 'listColumn.path',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                key: 'displayType',
+                label: 'listColumn.displayType',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                key: 'displayTypeParameters',
+                label: 'listColumn.displayTypeParameters',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                key: 'sortable',
+                label: 'listColumn.sortable',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                key: 'defaultSort',
+                label: 'listColumn.defaultSort',
+            },
+        ];
+        this.actionItems = [
+            {
+                label: 'interface.delete',
+                callback: this.deleteRow.bind(this),
+                type: 'danger',
+            },
+        ];
+        this.modalType$ = new Subject();
+        this.showModal$ = new Subject();
+    }
+    refreshColumns(noAnimation = false) {
+        this._refreshColumns$.next(noAnimation ? 'noAnimation' : null);
+    }
+    deleteRow(taskListColumn) {
+        this.showDeleteModal$.next(true);
+        this.deleteRowKey$.next(taskListColumn.key);
+    }
+    onMoveRowClick(event, documentDefinitionName) {
+        const { direction, index } = event;
+        this.disable();
+        this.cachedTaskListColumns$
+            .pipe(take(1), switchMap(taskListColumns => this.taskManagementApiService.swapTaskListColumns(documentDefinitionName, taskListColumns[index], taskListColumns[direction === MoveRowDirection.UP ? index - 1 : index + 1])))
+            .subscribe({
+            next: () => {
+                this.refreshColumns(true);
+            },
+            error: () => this.enable(),
+        });
+    }
+    columnRowClicked(row) {
+        this.cachedTaskListColumns$.pipe(take(1)).subscribe(cachedTaskListColumns => {
+            const selectedTaskListColumn = cachedTaskListColumns.find(column => column.key === row.key);
+            this.selectedTaskListColumn$.next(selectedTaskListColumn);
+            this.showModal('edit');
+        });
+    }
+    showModal(type) {
+        this.modalType$.next(type);
+        this.showModal$.next(true);
+    }
+    onModalCloseEvent(event) {
+        this.showModal$.next(false);
+        if (event === 'refresh') {
+            this.disable();
+            this.refreshColumns();
+        }
+        setTimeout(() => {
+            this.clearSelectedTaskListColumn();
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    deleteRowConfirmation(columnKey, documentDefinitionName) {
+        this.disable();
+        this.taskManagementApiService
+            .deleteTaskListColumn(documentDefinitionName, columnKey)
+            .subscribe({
+            next: () => {
+                this.refreshColumns(true);
+            },
+            error: () => this.enable(),
+        });
+    }
+    getDisplayTypeParametersView(displayTypeParameters) {
+        if (displayTypeParameters?.dateFormat) {
+            return displayTypeParameters.dateFormat;
+        }
+        else if (displayTypeParameters?.enum) {
+            return Object.keys(displayTypeParameters.enum).reduce((acc, curr) => {
+                const keyValuePairString = `${curr}: ${displayTypeParameters.enum[curr]}`;
+                if (!acc) {
+                    return `${keyValuePairString}`;
+                }
+                return `${acc}, ${keyValuePairString}`;
+            }, '');
+        }
+        return '-';
+    }
+    disable() {
+        this.disabled$.next(true);
+    }
+    enable() {
+        this.disabled$.next(false);
+    }
+    clearSelectedTaskListColumn() {
+        this.selectedTaskListColumn$.next(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementColumnsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: TaskManagementApiService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TaskManagementColumnsComponent, isStandalone: true, selector: "valtimo-task-management-columns", inputs: { carbonTheme: "carbonTheme" }, providers: [TaskManagementService], 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    taskListColumns: taskListColumns$ | async,\n    cachedTaskListColumns: cachedTaskListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    loadingColumns: loadingColumns$ | async,\n    modalType: modalType$ | async,\n    showModal: showModal$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <valtimo-task-management-column-modal\n    [taskListColumns]=\"obs.cachedTaskListColumns\"\n    [type]=\"obs.modalType\"\n    [show]=\"obs.showModal\"\n    [documentDefinitionName]=\"obs.documentDefinitionName\"\n    [selectedTaskListColumn]=\"selectedTaskListColumn$ | async\"\n    (closeEvent)=\"onModalCloseEvent($event)\"\n  ></valtimo-task-management-column-modal>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event, obs.documentDefinitionName)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.taskListColumns\"\n    [loading]=\"obs.loadingColumns\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"columnRowClicked($event)\"\n    (moveRow)=\"onMoveRowClick($event, obs.documentDefinitionName)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.noConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button cdsButton=\"primary\" (click)=\"showModal('add')\" [disabled]=\"obs.disabled\">\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: TaskManagementColumnModalComponent, selector: "valtimo-task-management-column-modal", inputs: ["carbonTheme", "taskListColumns", "type", "show", "documentDefinitionName", "selectedTaskListColumn"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i6.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-task-management-columns', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        CarbonListModule,
+                        TranslateModule,
+                        TabsModule,
+                        TaskManagementColumnModalComponent,
+                        ButtonModule,
+                        IconModule,
+                        ConfirmationModalModule,
+                    ], providers: [TaskManagementService], 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    taskListColumns: taskListColumns$ | async,\n    cachedTaskListColumns: cachedTaskListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    loadingColumns: loadingColumns$ | async,\n    modalType: modalType$ | async,\n    showModal: showModal$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <valtimo-task-management-column-modal\n    [taskListColumns]=\"obs.cachedTaskListColumns\"\n    [type]=\"obs.modalType\"\n    [show]=\"obs.showModal\"\n    [documentDefinitionName]=\"obs.documentDefinitionName\"\n    [selectedTaskListColumn]=\"selectedTaskListColumn$ | async\"\n    (closeEvent)=\"onModalCloseEvent($event)\"\n  ></valtimo-task-management-column-modal>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event, obs.documentDefinitionName)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.taskListColumns\"\n    [loading]=\"obs.loadingColumns\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"columnRowClicked($event)\"\n    (moveRow)=\"onMoveRowClick($event, obs.documentDefinitionName)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.noConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button cdsButton=\"primary\" (click)=\"showModal('add')\" [disabled]=\"obs.disabled\">\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: TaskManagementApiService }, { type: i1$2.TranslateService }], propDecorators: { carbonTheme: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * 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 TaskManagementDetailComponent {
+    constructor(route, documentService, pageTitleService, taskManagementService) {
+        this.route = route;
+        this.documentService = documentService;
+        this.pageTitleService = pageTitleService;
+        this.taskManagementService = taskManagementService;
+        this.carbonTheme = CARBON_THEME.G10;
+        this.setDocumentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''), filter(docDefName => !!docDefName), switchMap(documentDefinitionName => this.documentService.getDocumentDefinition(documentDefinitionName)), tap(documentDefinition => {
+            this.pageTitleService.setCustomPageTitle(documentDefinition?.schema?.title || '-');
+        }));
+        this.activeTab$ = this.taskManagementService.activeTab$;
+        this.TAB_ENUM = TaskManagementTab;
+    }
+    setActiveTab(tab) {
+        this.taskManagementService.setActiveTab(tab);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementDetailComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1.DocumentService }, { token: i6.PageTitleService }, { token: TaskManagementService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TaskManagementDetailComponent, isStandalone: true, selector: "ng-component", inputs: { carbonTheme: "carbonTheme" }, providers: [TaskManagementService], 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    documentDefinitionName: setDocumentDefinitionName$ | async,\n    activeTab: activeTab$ | async\n  } as obs\"\n  class=\"task-management-detail\"\n>\n  <ng-container *ngIf=\"{columns: obs.activeTab === TAB_ENUM.COLUMNS} as activeTab\">\n    <cds-tabs class=\"dossier-management-tabs\" type=\"contained\">\n      <cds-tab\n        [active]=\"activeTab.columns\"\n        [heading]=\"'taskManagement.columns' | translate\"\n        (selected)=\"setActiveTab(TAB_ENUM.COLUMNS)\"\n      ></cds-tab>\n    </cds-tabs>\n\n    <valtimo-task-management-columns *ngIf=\"activeTab.columns\"> </valtimo-task-management-columns>\n  </ng-container>\n</div>\n", styles: [".task-management-detail .cds--tab-content{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: TaskManagementColumnsComponent, selector: "valtimo-task-management-columns", inputs: ["carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementDetailComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        CarbonListModule,
+                        TranslateModule,
+                        TabsModule,
+                        TaskManagementColumnsComponent,
+                    ], providers: [TaskManagementService], encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    documentDefinitionName: setDocumentDefinitionName$ | async,\n    activeTab: activeTab$ | async\n  } as obs\"\n  class=\"task-management-detail\"\n>\n  <ng-container *ngIf=\"{columns: obs.activeTab === TAB_ENUM.COLUMNS} as activeTab\">\n    <cds-tabs class=\"dossier-management-tabs\" type=\"contained\">\n      <cds-tab\n        [active]=\"activeTab.columns\"\n        [heading]=\"'taskManagement.columns' | translate\"\n        (selected)=\"setActiveTab(TAB_ENUM.COLUMNS)\"\n      ></cds-tab>\n    </cds-tabs>\n\n    <valtimo-task-management-columns *ngIf=\"activeTab.columns\"> </valtimo-task-management-columns>\n  </ng-container>\n</div>\n", styles: [".task-management-detail .cds--tab-content{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1.DocumentService }, { type: i6.PageTitleService }, { type: TaskManagementService }], propDecorators: { carbonTheme: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const routes = [
+    {
+        path: 'task-management',
+        component: TaskManagementComponent,
+        canActivate: [AuthGuardService],
+        data: { title: 'Tasks', roles: [ROLE_ADMIN] },
+    },
+    {
+        path: 'task-management/dossier/:name',
+        component: TaskManagementDetailComponent,
+        canActivate: [AuthGuardService],
+        data: { title: 'Task details', roles: [ROLE_ADMIN], customPageTitle: true },
+    },
+];
+class TaskManagementRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+/*
+ * 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 TaskManagementModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementModule, imports: [TaskManagementRoutingModule, TaskManagementComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementModule, imports: [TaskManagementRoutingModule, TaskManagementComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TaskManagementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TaskManagementRoutingModule, TaskManagementComponent],
+                }]
+        }] });
+
+/*
+ * 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.
+ */
+/*
+ * Public API Surface of task
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TaskManagementApiService, TaskManagementColumnModalComponent, TaskManagementColumnsComponent, TaskManagementComponent, TaskManagementDetailComponent, TaskManagementModule, TaskManagementService, TaskManagementTab };
+//# sourceMappingURL=valtimo-task-management.mjs.map