@valtimo/dossier-management 11.3.2 → 12.0.1

package/fesm2022/valtimo-dossier-management.mjs

@@ -1,37 +1,37 @@
 import * as i6 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Injectable, Optional, Inject, EventEmitter, ViewChild, Output, ChangeDetectionStrategy, Input, ViewEncapsulation, NgModule } from '@angular/core';
-import * as i2$1 from '@angular/forms';
+import { Component, Injectable, Optional, Inject, EventEmitter, ViewChild, Output, ChangeDetectionStrategy, Input, ViewContainerRef, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i1$3 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i9 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import * as i7 from '@valtimo/components';
-import { ViewType, MoveRowDirection, CARBON_CONSTANTS, WidgetModule, DropzoneModule, ListModule, ModalModule, MultiselectDropdownModule, ParagraphModule, SelectModule, SpinnerModule, InputModule, FormModule, TooltipIconModule, CarbonMultiInputModule, ConfirmationModalModule, TableModule, ValtimoCdsModalDirectiveModule, CarbonListModule, RenderInPageHeaderDirectiveModule, ValtimoCdsOverflowButtonDirectiveModule, EditorModule } from '@valtimo/components';
-import * as i1$2 from '@valtimo/config';
-import { UploadProvider, ROLE_ADMIN, ConfigModule } from '@valtimo/config';
-import * as i4 from 'carbon-components-angular';
-import { NotificationService, NotificationModule, ButtonModule, IconModule, ModalModule as ModalModule$1, InputModule as InputModule$1, DropdownModule, CheckboxModule, LoadingModule, LinkModule, ComboBoxModule, DialogModule, TabsModule, TagModule, FileUploaderModule, ProgressBarModule } from 'carbon-components-angular';
+import * as i5 from '@valtimo/components';
+import { ViewType, MoveRowDirection, CARBON_CONSTANTS, PendingChangesComponent, pendingChangesGuard, WidgetModule, DropzoneModule, ListModule, ModalModule, MultiselectDropdownModule, ParagraphModule, SelectModule, SpinnerModule, InputModule, FormModule, TooltipIconModule, CarbonMultiInputModule, ConfirmationModalModule, TableModule, ValtimoCdsModalDirectiveModule, CarbonListModule, RenderInPageHeaderDirectiveModule, ValtimoCdsOverflowButtonDirectiveModule, EditorModule } from '@valtimo/components';
+import * as i2$1 from '@valtimo/config';
+import { CASE_MANAGEMENT_TAB_TOKEN, ZGW_CASE_CONFIGURATION_EXTENSIONS_TOKEN, ROLE_ADMIN, ConfigModule } from '@valtimo/config';
+import * as i2$2 from 'carbon-components-angular';
+import { NotificationService, NotificationModule, ButtonModule, IconModule, ModalModule as ModalModule$1, InputModule as InputModule$1, DropdownModule, CheckboxModule, LoadingModule, LinkModule, ComboBoxModule, DialogModule, TabsModule, TagModule, FileUploaderModule, ProgressBarModule, ToggleModule, TooltipModule } from 'carbon-components-angular';
 import { BehaviorSubject, map, switchMap, combineLatest, take, tap as tap$1, of, catchError, filter, distinctUntilChanged, Subscription, delay, startWith, Subject } from 'rxjs';
-import { tap, take as take$1 } from 'rxjs/operators';
+import { tap, take as take$1, switchMap as switchMap$1, map as map$1 } from 'rxjs/operators';
 import * as i1 from '@valtimo/document';
-import { DocumentDefinitionCreateRequest } from '@valtimo/document';
+import { DocumentDefinitionCreateRequest, InternalCaseStatusColor, InternalCaseStatusUtils } from '@valtimo/document';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { DefaultTabs, CASE_TAB_TOKEN, ApiTabType } from '@valtimo/dossier';
 import * as i1$1 from '@valtimo/form';
-import * as i1$3 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 import { InterceptorSkipHeader, AuthGuardService } from '@valtimo/security';
-import * as i4$1 from '@valtimo/process';
-import { ArrowDown16, ArrowUp16, Code16, Development16, WatsonHealthPageScroll16, Link16, WarningFilled16, Upload16 } from '@carbon/icons';
-import * as i4$2 from '@angular/platform-browser';
-import * as i2$2 from 'ngx-toastr';
+import * as i4 from '@valtimo/process';
+import * as i2$3 from 'ngx-toastr';
+import { Edit16, Save16, ArrowDown16, ArrowUp16, Code16, Development16, WatsonHealthPageScroll16, Link16, WarningFilled16, Information16, Search20, TrashCan20, Upload16 } from '@carbon/icons';
+import * as i4$1 from '@angular/platform-browser';
 import moment from 'moment';
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -88,16 +88,16 @@ class DossierManagementAssigneeComponent {
             autoAssignTasks: !currentSettings.autoAssignTasks,
         }, documentDefinitionName);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementAssigneeComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<h2 class=\"mb-4 mt-6\">{{ 'dossierManagement.toggleAssignee.title' | translate }}</h2>\n\n<ng-container\n  *ngIf=\"{\n    currentValue: currentValue$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <label\n      class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n      placement=\"bottom\"\n    >\n      <input\n        [checked]=\"obs?.currentValue?.canHaveAssignee\"\n        class=\"custom-control-input\"\n        type=\"checkbox\"\n        [disabled]=\"obs.disabled\"\n        (click)=\"toggleAssignee(obs?.currentValue, obs.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.toggleAssignee.checkboxDescription' | translate\n      }}</span>\n    </label>\n  </ng-container>\n  <ng-container *ngIf=\"obs?.currentValue?.canHaveAssignee\">\n    <label\n      class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n      placement=\"bottom\"\n    >\n      <input\n        [checked]=\"obs?.currentValue?.autoAssignTasks\"\n        class=\"custom-control-input\"\n        type=\"checkbox\"\n        [disabled]=\"obs.disabled\"\n        (click)=\"toggleTaskAssignment(obs?.currentValue, obs?.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.toggleAutoAssignTasks.checkboxDescription' | translate\n      }}</span>\n    </label>\n  </ng-container>\n</ng-container>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementAssigneeComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee", 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<h2 class=\"mb-4\">{{ 'dossierManagement.toggleAssignee.title' | translate }}</h2>\n\n<ng-container\n  *ngIf=\"{\n    currentValue: currentValue$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <label\n      class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n      placement=\"bottom\"\n    >\n      <input\n        [checked]=\"obs?.currentValue?.canHaveAssignee\"\n        class=\"custom-control-input\"\n        type=\"checkbox\"\n        [disabled]=\"obs.disabled\"\n        (click)=\"toggleAssignee(obs?.currentValue, obs.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.toggleAssignee.checkboxDescription' | translate\n      }}</span>\n    </label>\n  </ng-container>\n  <ng-container *ngIf=\"obs?.currentValue?.canHaveAssignee\">\n    <label\n      class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n      placement=\"bottom\"\n    >\n      <input\n        [checked]=\"obs?.currentValue?.autoAssignTasks\"\n        class=\"custom-control-input\"\n        type=\"checkbox\"\n        [disabled]=\"obs.disabled\"\n        (click)=\"toggleTaskAssignment(obs?.currentValue, obs?.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.toggleAutoAssignTasks.checkboxDescription' | translate\n      }}</span>\n    </label>\n  </ng-container>\n</ng-container>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementAssigneeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementAssigneeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-assignee', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<h2 class=\"mb-4 mt-6\">{{ 'dossierManagement.toggleAssignee.title' | translate }}</h2>\n\n<ng-container\n  *ngIf=\"{\n    currentValue: currentValue$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <label\n      class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n      placement=\"bottom\"\n    >\n      <input\n        [checked]=\"obs?.currentValue?.canHaveAssignee\"\n        class=\"custom-control-input\"\n        type=\"checkbox\"\n        [disabled]=\"obs.disabled\"\n        (click)=\"toggleAssignee(obs?.currentValue, obs.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.toggleAssignee.checkboxDescription' | translate\n      }}</span>\n    </label>\n  </ng-container>\n  <ng-container *ngIf=\"obs?.currentValue?.canHaveAssignee\">\n    <label\n      class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n      placement=\"bottom\"\n    >\n      <input\n        [checked]=\"obs?.currentValue?.autoAssignTasks\"\n        class=\"custom-control-input\"\n        type=\"checkbox\"\n        [disabled]=\"obs.disabled\"\n        (click)=\"toggleTaskAssignment(obs?.currentValue, obs?.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.toggleAutoAssignTasks.checkboxDescription' | translate\n      }}</span>\n    </label>\n  </ng-container>\n</ng-container>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }]; } });
+            args: [{ selector: 'valtimo-dossier-management-assignee', 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<h2 class=\"mb-4\">{{ 'dossierManagement.toggleAssignee.title' | translate }}</h2>\n\n<ng-container\n  *ngIf=\"{\n    currentValue: currentValue$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    loading: loading$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <label\n      class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n      placement=\"bottom\"\n    >\n      <input\n        [checked]=\"obs?.currentValue?.canHaveAssignee\"\n        class=\"custom-control-input\"\n        type=\"checkbox\"\n        [disabled]=\"obs.disabled\"\n        (click)=\"toggleAssignee(obs?.currentValue, obs.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.toggleAssignee.checkboxDescription' | translate\n      }}</span>\n    </label>\n  </ng-container>\n  <ng-container *ngIf=\"obs?.currentValue?.canHaveAssignee\">\n    <label\n      class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n      placement=\"bottom\"\n    >\n      <input\n        [checked]=\"obs?.currentValue?.autoAssignTasks\"\n        class=\"custom-control-input\"\n        type=\"checkbox\"\n        [disabled]=\"obs.disabled\"\n        (click)=\"toggleTaskAssignment(obs?.currentValue, obs?.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.toggleAutoAssignTasks.checkboxDescription' | translate\n      }}</span>\n    </label>\n  </ng-container>\n</ng-container>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -119,10 +119,11 @@ var TabEnum;
     TabEnum["SEARCH"] = "search";
     TabEnum["LIST"] = "list";
     TabEnum["TABS"] = "tabs";
+    TabEnum["STATUSES"] = "statuses";
 })(TabEnum || (TabEnum = {}));
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -137,6 +138,9 @@ var TabEnum;
  * limitations under the License.
  */
 class TabService {
+    get injectedCaseManagementTabs$() {
+        return this._injectedCaseManagementTabs$.asObservable();
+    }
     get currentTab$() {
         return this._currentTab$.asObservable();
     }
@@ -149,10 +153,12 @@ class TabService {
     set configuredContentKeys(value) {
         this._configuredContentKeys$.next(value);
     }
-    constructor(caseTabConfig, formService, translateService) {
+    constructor(caseTabConfig, caseManagementTabConfig, formService, translateService) {
         this.caseTabConfig = caseTabConfig;
+        this.caseManagementTabConfig = caseManagementTabConfig;
         this.formService = formService;
         this.translateService = translateService;
+        this._injectedCaseManagementTabs$ = new BehaviorSubject([]);
         this._currentTab$ = new BehaviorSubject(TabEnum.DOCUMENT);
         this._configuredContentKeys$ = new BehaviorSubject([]);
         this.formDefinitions$ = this.formService
@@ -186,21 +192,32 @@ class TabService {
             formIO: !formDefinitions.length ||
                 formDefinitions.every((tabItem) => tabKeys.includes(tabItem.contentKey)),
         })));
+        this.setInjectedCaseManagementTabs(this.caseManagementTabConfig);
+    }
+    setInjectedCaseManagementTabs(caseManagementTabConfig) {
+        if (!caseManagementTabConfig)
+            return;
+        this._injectedCaseManagementTabs$.next(Array.isArray(caseManagementTabConfig) ? caseManagementTabConfig : [caseManagementTabConfig]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabService, deps: [{ token: CASE_TAB_TOKEN, optional: true }, { token: i1$1.FormService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabService, deps: [{ token: CASE_TAB_TOKEN, optional: true }, { token: CASE_MANAGEMENT_TAB_TOKEN, optional: true }, { token: i1$1.FormService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [CASE_TAB_TOKEN]
-                }] }, { type: i1$1.FormService }, { type: i3.TranslateService }]; } });
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CASE_MANAGEMENT_TAB_TOKEN]
+                }] }, { type: i1$1.FormService }, { type: i3.TranslateService }] });
 
 class TabManagementService {
     constructor(configService, http) {
@@ -264,20 +281,20 @@ class TabManagementService {
         }
         return tab;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabManagementService, deps: [{ token: i1$2.ConfigService }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabManagementService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabManagementService, deps: [{ token: i2$1.ConfigService }, { token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabManagementService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabManagementService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.ConfigService }, { type: i1$3.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i2$1.ConfigService }, { type: i1$2.HttpClient }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
- *
  * You may obtain a copy of the License at
+ *
  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
  *
  * Unless required by applicable law or agreed to in writing, software
@@ -295,18 +312,18 @@ class DossierExportService {
     exportDocumentDefinition(documentDefinitionName, version = 1) {
         return this.http.get(`${this.valtimoEndpointUri}management/v1/case/${documentDefinitionName}/${version}/export`, { observe: 'response', responseType: 'blob', headers: InterceptorSkipHeader });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierExportService, deps: [{ token: i1$3.HttpClient }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierExportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierExportService, deps: [{ token: i1$2.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierExportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierExportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }, { type: i1$2.ConfigService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2$1.ConfigService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -322,10 +339,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class DossierDetailService {
     get selectedVersionNumber$() {
-        return this._selectedVersionNumber$.pipe(filter(version => typeof version === 'number'), distinctUntilChanged());
+        return this._selectedVersionNumber$.pipe(filter(version => typeof version === 'number'));
+    }
+    get previousSelectedVersionNumber$() {
+        return this._previousSelectedVersionNumber$.asObservable();
     }
     get selectedDocumentDefinitionName$() {
-        return this._selectedDocumentDefinitionName$.pipe(filter(name => !!name), distinctUntilChanged());
+        return this._selectedDocumentDefinitionName$.pipe(filter(name => !!name));
     }
     get selectedDocumentDefinitionIsReadOnly$() {
         return this.documentDefinition$.pipe(map(definition => definition.readOnly), distinctUntilChanged());
@@ -343,11 +363,12 @@ class DossierDetailService {
         this.documentService = documentService;
         this.pageTitleService = pageTitleService;
         this._loadingDocumentDefinition$ = new BehaviorSubject(true);
+        this._previousSelectedVersionNumber$ = new BehaviorSubject(null);
         this._selectedVersionNumber$ = new BehaviorSubject(null);
         this._selectedDocumentDefinitionName$ = new BehaviorSubject('');
         this._documentDefinition$ = new BehaviorSubject(null);
-        this._documentDefinitionModel$ = this.documentDefinition$.pipe(map(definition => ({
-            value: JSON.stringify(definition, null, 2),
+        this._documentDefinitionModel$ = this.documentDefinition$.pipe(map((definition) => ({
+            value: JSON.stringify(definition.schema, null, 2),
             language: 'json',
         })));
         this._subscriptions = new Subscription();
@@ -359,6 +380,9 @@ class DossierDetailService {
     setSelectedVersionNumber(versionNumber) {
         this._selectedVersionNumber$.next(versionNumber);
     }
+    setPreviousSelectedVersionNumber(versionNumber) {
+        this._previousSelectedVersionNumber$.next(versionNumber);
+    }
     setSelectedDocumentDefinitionName(name) {
         this._selectedDocumentDefinitionName$.next(name);
     }
@@ -372,20 +396,20 @@ class DossierDetailService {
             this.setLoadingDocumentDefinition(true);
         }), switchMap(([selectedVersion, selectedDocumentDefinitionName]) => this.documentService.getDocumentDefinitionByVersion(selectedDocumentDefinitionName, selectedVersion)), tap$1(res => {
             this._documentDefinition$.next(res);
-            this.pageTitleService.setCustomPageTitle(res?.schema?.title || '-');
+            this.pageTitleService.setCustomPageTitle(res?.schema?.title || '-', true);
             this.setLoadingDocumentDefinition(false);
         }))
             .subscribe());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailService, deps: [{ token: i1.DocumentService }, { token: i7.PageTitleService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailService, deps: [{ token: i1.DocumentService }, { token: i5.PageTitleService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierDetailService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i7.PageTitleService }]; } });
+        }], ctorParameters: () => [{ type: i1.DocumentService }, { type: i5.PageTitleService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -401,7 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -495,13 +519,13 @@ class DossierManagementConnectModalComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementConnectModalComponent, deps: [{ token: i1.DocumentService }, { token: DossierDetailService }, { token: i4.NotificationService }, { token: i4$1.ProcessService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementConnectModalComponent, selector: "valtimo-dossier-management-connect-modal", outputs: { reloadProcessDocumentDefinitions: "reloadProcessDocumentDefinitions" }, providers: [NotificationService], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["dossierConnectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #dossierConnectModal\n  elementId=\"dossierConnectModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"Connect document definition to process definition\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <p>\n      {{ 'Select process definition for document definition' | translate }}\n      <strong>{{ documentDefinition.id.name }} *</strong>\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"newDocumentProcessDefinition\">\n        <option [ngValue]=\"null\">{{ 'dossierManagement.selectProcessDef' | translate }}</option>\n        <option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [disabled]=\"processDocumentDefinitionExists[processDefinition.key]\"\n          [ngValue]=\"processDefinition\"\n        >\n          {{ processDefinition.name }} ({{ processDefinition.key }})\n        </option>\n      </select>\n    </div>\n    <p>\n      {{ 'Select options for the selected process' | translate }}\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionInit\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.processCreatesCase' | translate\n        }}</span>\n      </label>\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline ml-2 pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionStartableByUser\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.startableWithinCase' | translate\n        }}</span>\n      </label>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!newDocumentProcessDefinition\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\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: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "directive", type: i9.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementConnectModalComponent, deps: [{ token: i1.DocumentService }, { token: DossierDetailService }, { token: i2$2.NotificationService }, { token: i4.ProcessService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementConnectModalComponent, selector: "valtimo-dossier-management-connect-modal", outputs: { reloadProcessDocumentDefinitions: "reloadProcessDocumentDefinitions" }, providers: [NotificationService], viewQueries: [{ propertyName: "_modal", first: true, predicate: ["dossierConnectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #dossierConnectModal\n  elementId=\"dossierConnectModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"Connect document definition to process definition\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <p>\n      {{ 'Select process definition for document definition' | translate }}\n      <strong>{{ documentDefinition.id.name }} *</strong>\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"newDocumentProcessDefinition\">\n        <option [ngValue]=\"null\">{{ 'dossierManagement.selectProcessDef' | translate }}</option>\n        <option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [disabled]=\"processDocumentDefinitionExists[processDefinition.key]\"\n          [ngValue]=\"processDefinition\"\n        >\n          {{ processDefinition.name }} ({{ processDefinition.key }})\n        </option>\n      </select>\n    </div>\n    <p>\n      {{ 'Select options for the selected process' | translate }}\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionInit\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.processCreatesCase' | translate\n        }}</span>\n      </label>\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline ml-2 pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionStartableByUser\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.startableWithinCase' | translate\n        }}</span>\n      </label>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!newDocumentProcessDefinition\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "directive", type: i9.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementConnectModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementConnectModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-connect-modal', providers: [NotificationService], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #dossierConnectModal\n  elementId=\"dossierConnectModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"Connect document definition to process definition\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <p>\n      {{ 'Select process definition for document definition' | translate }}\n      <strong>{{ documentDefinition.id.name }} *</strong>\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"newDocumentProcessDefinition\">\n        <option [ngValue]=\"null\">{{ 'dossierManagement.selectProcessDef' | translate }}</option>\n        <option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [disabled]=\"processDocumentDefinitionExists[processDefinition.key]\"\n          [ngValue]=\"processDefinition\"\n        >\n          {{ processDefinition.name }} ({{ processDefinition.key }})\n        </option>\n      </select>\n    </div>\n    <p>\n      {{ 'Select options for the selected process' | translate }}\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionInit\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.processCreatesCase' | translate\n        }}</span>\n      </label>\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline ml-2 pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionStartableByUser\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.startableWithinCase' | translate\n        }}</span>\n      </label>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!newDocumentProcessDefinition\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: DossierDetailService }, { type: i4.NotificationService }, { type: i4$1.ProcessService }, { type: i3.TranslateService }]; }, propDecorators: { _modal: [{
+            args: [{ selector: 'valtimo-dossier-management-connect-modal', providers: [NotificationService], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #dossierConnectModal\n  elementId=\"dossierConnectModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"Connect document definition to process definition\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <p>\n      {{ 'Select process definition for document definition' | translate }}\n      <strong>{{ documentDefinition.id.name }} *</strong>\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"newDocumentProcessDefinition\">\n        <option [ngValue]=\"null\">{{ 'dossierManagement.selectProcessDef' | translate }}</option>\n        <option\n          *ngFor=\"let processDefinition of processDefinitions\"\n          [disabled]=\"processDocumentDefinitionExists[processDefinition.key]\"\n          [ngValue]=\"processDefinition\"\n        >\n          {{ processDefinition.name }} ({{ processDefinition.key }})\n        </option>\n      </select>\n    </div>\n    <p>\n      {{ 'Select options for the selected process' | translate }}\n    </p>\n    <div class=\"input-group mb-3 align-items-center\">\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionInit\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.processCreatesCase' | translate\n        }}</span>\n      </label>\n      <label\n        class=\"custom-control custom-checkbox custom-control-inline ml-2 pl-6 mb-0\"\n        placement=\"bottom\"\n        ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n      >\n        <input\n          class=\"custom-control-input\"\n          type=\"checkbox\"\n          [(ngModel)]=\"newDocumentProcessDefinitionStartableByUser\"\n        /><span class=\"custom-control-label custom-control-color\">{{\n          'processCaseConnection.startableWithinCase' | translate\n        }}</span>\n      </label>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!newDocumentProcessDefinition\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1.DocumentService }, { type: DossierDetailService }, { type: i2$2.NotificationService }, { type: i4.ProcessService }, { type: i3.TranslateService }], propDecorators: { _modal: [{
                 type: ViewChild,
                 args: ['dossierConnectModal']
             }], reloadProcessDocumentDefinitions: [{
@@ -509,7 +533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -523,9 +547,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class DossierManagementRemoveModalComponent {
+    constructor(documentService, toasterService, router, translateService, menuService) {
+        this.documentService = documentService;
+        this.toasterService = toasterService;
+        this.router = router;
+        this.translateService = translateService;
+        this.menuService = menuService;
+        this.documentDefinition = null;
+        this.errors = [];
+    }
+    openModal(documentDefinition) {
+        this.documentDefinition = documentDefinition;
+        this.modal.show();
+    }
+    removeDocumentDefinition() {
+        this.documentService
+            .removeDocumentDefinitionForManagement(this.documentDefinition.id.name)
+            .subscribe(() => {
+            this.menuService.reload();
+            this.router.navigate(['/dossier-management']);
+            this.toasterService.success(this.translateService.instant('remove-document-definition-success'));
+        }, (result) => {
+            this.errors = result.errors;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementRemoveModalComponent, deps: [{ token: i1.DocumentService }, { token: i2$3.ToastrService }, { token: i2.Router }, { token: i3.TranslateService }, { token: i5.MenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ["documentDefinitionRemoveModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #documentDefinitionRemoveModal\n  elementId=\"documentDefinitionRemoveModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"{{ 'Remove document definition' | translate }}\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <div class=\"alert alert-contrast alert-danger mt-2\" role=\"alert\">\n      <div class=\"icon\"><span class=\"mdi mdi-alert-triangle\"></span></div>\n      <div\n        class=\"message\"\n        [innerHTML]=\"'remove-document-definition-confirmation' | translate\"\n      ></div>\n    </div>\n    <div *ngIf=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n      <ol>\n        <li *ngFor=\"let error of errors\">\n          {{ error }}\n        </li>\n      </ol>\n    </div>\n  </div>\n  <div footer>\n    <button (click)=\"removeDocumentDefinition()\" class=\"btn btn-primary\" data-dismiss=\"modal\">\n      {{ 'remove-document-definition-confirmation-button' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementRemoveModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-management-remove-modal', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #documentDefinitionRemoveModal\n  elementId=\"documentDefinitionRemoveModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"{{ 'Remove document definition' | translate }}\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <div class=\"alert alert-contrast alert-danger mt-2\" role=\"alert\">\n      <div class=\"icon\"><span class=\"mdi mdi-alert-triangle\"></span></div>\n      <div\n        class=\"message\"\n        [innerHTML]=\"'remove-document-definition-confirmation' | translate\"\n      ></div>\n    </div>\n    <div *ngIf=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n      <ol>\n        <li *ngFor=\"let error of errors\">\n          {{ error }}\n        </li>\n      </ol>\n    </div>\n  </div>\n  <div footer>\n    <button (click)=\"removeDocumentDefinition()\" class=\"btn btn-primary\" data-dismiss=\"modal\">\n      {{ 'remove-document-definition-confirmation-button' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1.DocumentService }, { type: i2$3.ToastrService }, { type: i2.Router }, { type: i3.TranslateService }, { type: i5.MenuService }], propDecorators: { modal: [{
+                type: ViewChild,
+                args: ['documentDefinitionRemoveModal']
+            }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -539,9 +598,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class DossierManagementDetailContainerActionsComponent {
+    set documentDefinitionName(value) {
+        this.dossierDetailService.setSelectedDocumentDefinitionName(value);
+    }
+    constructor(document, notificationService, dossierExportService, translateService, documentService, dossierDetailService, pageHeaderService) {
+        this.document = document;
+        this.notificationService = notificationService;
+        this.dossierExportService = dossierExportService;
+        this.translateService = translateService;
+        this.documentService = documentService;
+        this.dossierDetailService = dossierDetailService;
+        this.pageHeaderService = pageHeaderService;
+        this.documentDefinitionTitle = '';
+        this.versionSet = new EventEmitter();
+        this.CARBON_THEME = 'g10';
+        this.exporting$ = new BehaviorSubject(false);
+        this.selectedVersionNumber$ = this.dossierDetailService.selectedVersionNumber$;
+        this._previousSelectedVersionNumber$ = this.dossierDetailService.previousSelectedVersionNumber$;
+        this._documentDefinitionName$ = this.dossierDetailService.selectedDocumentDefinitionName$;
+        this.loadingVersion$ = new BehaviorSubject(true);
+        this._documentDefinitionVersions$ = this._documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.documentService.getDocumentDefinitionVersions(documentDefinitionName)), tap$1(res => {
+            this.dossierDetailService.setSelectedVersionNumber(this.findLargestInArray(res.versions));
+            this.loadingVersion$.next(false);
+        }));
+        this.versionListItems$ = combineLatest([
+            this._documentDefinitionVersions$,
+            this.selectedVersionNumber$,
+            this._previousSelectedVersionNumber$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([versionsRes, selectVersionNumber, previousVersionNumber]) => versionsRes?.versions?.map(version => ({
+            content: `${this.translateService.instant('dossierManagement.version')}${version}`,
+            selected: selectVersionNumber === version || previousVersionNumber === version,
+            id: `${version}`,
+        })) || []));
+        this.selectedDocumentDefinition$ = this.dossierDetailService.documentDefinition$;
+        this.selectedDocumentDefinitionIsReadOnly$ = this.dossierDetailService.selectedDocumentDefinitionIsReadOnly$;
+        this.compactMode$ = this.pageHeaderService.compactMode$;
+    }
+    export() {
+        this.closeCurrentNotification();
+        this._currentNotification = this.notificationService.showNotification({
+            type: 'info',
+            title: '',
+            showClose: false,
+            template: this._exportMessageTemplateRef,
+        });
+        let selectedVersionNumber;
+        this.startExporting();
+        combineLatest([this.selectedVersionNumber$, this._documentDefinitionName$])
+            .pipe(take$1(1), tap$1(([selectedVersion]) => (selectedVersionNumber = selectedVersion)), switchMap(([selectedVersion, documentDefinitionName]) => this.dossierExportService.exportDocumentDefinition(documentDefinitionName, selectedVersion)))
+            .subscribe({
+            next: response => {
+                this.closeCurrentNotification();
+                this._currentNotification = this.notificationService.showNotification({
+                    type: 'success',
+                    title: this.translateService.instant('dossierManagement.exportSuccessTitle'),
+                    duration: 5000,
+                });
+                this.downloadZip(response, selectedVersionNumber);
+                this.stopExporting();
+            },
+            error: () => {
+                this.closeCurrentNotification();
+                this._currentNotification = this.notificationService.showNotification({
+                    type: 'error',
+                    title: this.translateService.instant('dossierManagement.exportErrorTitle'),
+                    message: this.translateService.instant('dossierManagement.exportErrorMessage'),
+                    duration: 5000,
+                });
+                this.stopExporting();
+            },
+        });
+    }
+    setVersion(version) {
+        this.versionSet.emit(Number(version.item.id));
+    }
+    openDossierRemoveModal() {
+        this.selectedDocumentDefinition$.pipe(take$1(1)).subscribe(definition => {
+            this._dossierRemoveModal.openModal(definition);
+        });
+    }
+    startExporting() {
+        this.exporting$.next(true);
+    }
+    stopExporting() {
+        this.exporting$.next(false);
+    }
+    downloadZip(response, versionNumber) {
+        const link = document.createElement('a');
+        const contentDisposition = response.headers.get('content-disposition');
+        const splitContentDisposition = contentDisposition.split('filename=');
+        const fileName = splitContentDisposition.length > 1 && splitContentDisposition[1];
+        link.href = this.document.defaultView.URL.createObjectURL(response.body);
+        link.download = fileName || `${this.documentDefinitionName}_${versionNumber}.valtimo.zip`;
+        link.target = '_blank';
+        link.click();
+        link.remove();
+    }
+    closeCurrentNotification() {
+        if (this._currentNotification) {
+            this.notificationService.close(this._currentNotification);
+        }
+    }
+    findLargestInArray(array) {
+        return array.reduce(function (a, b) {
+            return a > b ? a : b;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementDetailContainerActionsComponent, deps: [{ token: DOCUMENT }, { token: i2$2.NotificationService }, { token: DossierExportService }, { token: i3.TranslateService }, { token: i1.DocumentService }, { token: DossierDetailService }, { token: i5.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementDetailContainerActionsComponent, selector: "valtimo-dossier-management-detail-container-actions", inputs: { documentDefinitionTitle: "documentDefinitionTitle", documentDefinitionName: "documentDefinitionName" }, outputs: { versionSet: "versionSet" }, providers: [NotificationService], viewQueries: [{ propertyName: "_exportMessageTemplateRef", first: true, predicate: ["exportingMessage"], descendants: true }, { propertyName: "_dossierRemoveModal", first: true, predicate: ["dossierRemoveModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"dossier-actions\"\n  *ngIf=\"{\n    exporting: exporting$ | async,\n    loadingVersion: loadingVersion$ | async,\n    versionListItems: versionListItems$ | async,\n    selectedDocumentDefinition: selectedDocumentDefinition$ | async,\n    selectedDocumentDefinitionIsReadOnly: selectedDocumentDefinitionIsReadOnly$ | async,\n    compactMode: compactMode$ | async\n  } as obs\"\n  [ngClass]=\"{'--compact': obs.compactMode}\"\n>\n  <div class=\"dossier-metadata\">\n    <ng-container *ngTemplateOutlet=\"versionSelection; context: {obs: obs}\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"readOnly; context: {obs: obs}\"></ng-container>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"exportMenu; context: {obs: obs}\"></ng-container>\n</div>\n\n<ng-template #versionSelection let-obs=\"obs\">\n  <cds-dropdown\n    class=\"version-selection\"\n    [disabled]=\"obs.loadingVersion || (obs.versionListItems.length || []) === 1\"\n    [skeleton]=\"obs.loadingVersion\"\n    (selected)=\"setVersion($event)\"\n    [size]=\"obs.compactMode ? 'sm' : 'md'\"\n  >\n    <cds-dropdown-list [items]=\"obs.versionListItems || []\"></cds-dropdown-list>\n  </cds-dropdown>\n</ng-template>\n\n<ng-template #exportMenu let-obs=\"obs\">\n  <cds-overflow-menu\n    valtimoCdsOverflowButton\n    [width]=\"250\"\n    [customTrigger]=\"customTrigger\"\n    [offset]=\"{y: 48, x: 37}\"\n    class=\"overflow-button\"\n  >\n    <cds-overflow-menu-option\n      [id]=\"'exportDocumentDefinition'\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"export()\"\n      >{{\n        'dossierManagement.export' | translate: {value: documentDefinitionTitle}\n      }}</cds-overflow-menu-option\n    >\n\n    <cds-overflow-menu-option\n      *ngIf=\"obs.selectedDocumentDefinition && !obs.selectedDocumentDefinition.readOnly\"\n      [id]=\"'removeDocumentDefinition'\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"openDossierRemoveModal()\"\n      >{{ 'Remove document definition' | translate }}</cds-overflow-menu-option\n    >\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #customTrigger>\n  <button cdsButton=\"tertiary\" [size]=\"(compactMode$ | async) ? 'sm' : 'md'\">\n    {{ 'dossierManagement.more' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #exportingMessage>\n  <div class=\"exporting-message\">\n    <span class=\"cds--inline-notification__title\">{{\n      'dossierManagement.preparingDownload' | translate\n    }}</span>\n\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #readOnly let-obs=\"obs\">\n  <cds-tag *ngIf=\"obs.selectedDocumentDefinitionIsReadOnly\" type=\"blue\">{{\n    'dossierManagement.readonly' | translate\n  }}</cds-tag>\n</ng-template>\n\n<valtimo-dossier-management-remove-modal\n  #dossierRemoveModal\n></valtimo-dossier-management-remove-modal>\n", styles: [".dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end}.dossier-actions.--compact{align-items:center}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.exporting-message{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}.dossier-metadata{display:flex;gap:24px;align-items:flex-end}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.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: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$2.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i5.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementDetailContainerActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-management-detail-container-actions', changeDetection: ChangeDetectionStrategy.OnPush, providers: [NotificationService], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"dossier-actions\"\n  *ngIf=\"{\n    exporting: exporting$ | async,\n    loadingVersion: loadingVersion$ | async,\n    versionListItems: versionListItems$ | async,\n    selectedDocumentDefinition: selectedDocumentDefinition$ | async,\n    selectedDocumentDefinitionIsReadOnly: selectedDocumentDefinitionIsReadOnly$ | async,\n    compactMode: compactMode$ | async\n  } as obs\"\n  [ngClass]=\"{'--compact': obs.compactMode}\"\n>\n  <div class=\"dossier-metadata\">\n    <ng-container *ngTemplateOutlet=\"versionSelection; context: {obs: obs}\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"readOnly; context: {obs: obs}\"></ng-container>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"exportMenu; context: {obs: obs}\"></ng-container>\n</div>\n\n<ng-template #versionSelection let-obs=\"obs\">\n  <cds-dropdown\n    class=\"version-selection\"\n    [disabled]=\"obs.loadingVersion || (obs.versionListItems.length || []) === 1\"\n    [skeleton]=\"obs.loadingVersion\"\n    (selected)=\"setVersion($event)\"\n    [size]=\"obs.compactMode ? 'sm' : 'md'\"\n  >\n    <cds-dropdown-list [items]=\"obs.versionListItems || []\"></cds-dropdown-list>\n  </cds-dropdown>\n</ng-template>\n\n<ng-template #exportMenu let-obs=\"obs\">\n  <cds-overflow-menu\n    valtimoCdsOverflowButton\n    [width]=\"250\"\n    [customTrigger]=\"customTrigger\"\n    [offset]=\"{y: 48, x: 37}\"\n    class=\"overflow-button\"\n  >\n    <cds-overflow-menu-option\n      [id]=\"'exportDocumentDefinition'\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"export()\"\n      >{{\n        'dossierManagement.export' | translate: {value: documentDefinitionTitle}\n      }}</cds-overflow-menu-option\n    >\n\n    <cds-overflow-menu-option\n      *ngIf=\"obs.selectedDocumentDefinition && !obs.selectedDocumentDefinition.readOnly\"\n      [id]=\"'removeDocumentDefinition'\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"openDossierRemoveModal()\"\n      >{{ 'Remove document definition' | translate }}</cds-overflow-menu-option\n    >\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #customTrigger>\n  <button cdsButton=\"tertiary\" [size]=\"(compactMode$ | async) ? 'sm' : 'md'\">\n    {{ 'dossierManagement.more' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #exportingMessage>\n  <div class=\"exporting-message\">\n    <span class=\"cds--inline-notification__title\">{{\n      'dossierManagement.preparingDownload' | translate\n    }}</span>\n\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #readOnly let-obs=\"obs\">\n  <cds-tag *ngIf=\"obs.selectedDocumentDefinitionIsReadOnly\" type=\"blue\">{{\n    'dossierManagement.readonly' | translate\n  }}</cds-tag>\n</ng-template>\n\n<valtimo-dossier-management-remove-modal\n  #dossierRemoveModal\n></valtimo-dossier-management-remove-modal>\n", styles: [".dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end}.dossier-actions.--compact{align-items:center}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.exporting-message{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}.dossier-metadata{display:flex;gap:24px;align-items:flex-end}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i2$2.NotificationService }, { type: DossierExportService }, { type: i3.TranslateService }, { type: i1.DocumentService }, { type: DossierDetailService }, { type: i5.PageHeaderService }], propDecorators: { _exportMessageTemplateRef: [{
+                type: ViewChild,
+                args: ['exportingMessage']
+            }], _dossierRemoveModal: [{
+                type: ViewChild,
+                args: ['dossierRemoveModal']
+            }], documentDefinitionTitle: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], versionSet: [{
+                type: Output
+            }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -555,66 +744,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierManagementLinkProcessComponent {
-    constructor(configService, processService, route, documentService) {
-        this.configService = configService;
-        this.processService = processService;
-        this.route = route;
+
+/*
+ * 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.
+ */
+class DossierManagementDocumentDefinitionComponent {
+    constructor(documentService, dossierDetailService, iconService, pageHeaderService) {
         this.documentService = documentService;
-        this.documentDefinitionName = null;
-        this.selectionId$ = new BehaviorSubject('');
-        this.processItems$ = this.processService
-            .getProcessDefinitions()
-            .pipe(map(definitions => definitions.filter(definition => !!definition?.key) || []), map(processes => processes.map(process => ({ text: process?.name || '-', id: process.key }))));
-        this.disabled$ = new BehaviorSubject(false);
-        this.setDocumentenApiUploaderProvider(configService.config);
-        this.documentDefinitionName = this.route.snapshot.paramMap.get('name');
+        this.dossierDetailService = dossierDetailService;
+        this.iconService = iconService;
+        this.pageHeaderService = pageHeaderService;
+        this.cancelRedirect = new EventEmitter();
+        this.confirmRedirect = new EventEmitter();
+        this.pendingChangesUpdate = new EventEmitter();
+        this.loadingDocumentDefinition$ = this.dossierDetailService.loadingDocumentDefinition$;
+        this._refreshEditor$ = new BehaviorSubject(null);
+        this.documentDefinitionModel$ = this._refreshEditor$.pipe(switchMap$1(() => this.dossierDetailService.documentDefinitionModel$));
+        this._pendingChanges$ = new BehaviorSubject(false);
+        this.pendingChanges$ = this._pendingChanges$.pipe(tap((pendingChanges) => {
+            this.pendingChangesUpdate.emit(pendingChanges);
+        }));
+        this.editActive$ = new BehaviorSubject(false);
+        this.showSaveConfirmation$ = new BehaviorSubject(false);
+        this.showCancelConfirmation$ = new BehaviorSubject(false);
+        this.selectedDocumentDefinition$ = this.dossierDetailService.documentDefinition$.pipe(tap((documentDefinition) => (this._initialId = documentDefinition.schema.$id)));
+        this._changeIsValid$ = new BehaviorSubject(false);
+        this._idChanged$ = new BehaviorSubject(false);
+        this.saveButtonDisabled$ = combineLatest([
+            this.pendingChanges$,
+            this._changeIsValid$,
+            this._idChanged$,
+        ]).pipe(map$1(([pendingChanges, changeIsValid, idChanged]) => !pendingChanges || !changeIsValid || idChanged));
+        this.compactMode$ = this.pageHeaderService.compactMode$;
+        this.iconService.registerAll([Edit16, Save16]);
     }
-    ngOnInit() {
-        if (this.documentenApiUploadProvider) {
-            this.getDefaultSelection();
-        }
+    downloadDefinition() {
+        this.selectedDocumentDefinition$.pipe(take$1(1)).subscribe(definition => {
+            const dataString = 'data:text/json;charset=utf-8,' +
+                encodeURIComponent(JSON.stringify(definition.schema, null, 2));
+            const downloadAnchorElement = document.getElementById('downloadAnchorElement');
+            if (!downloadAnchorElement) {
+                return;
+            }
+            downloadAnchorElement.setAttribute('href', dataString);
+            downloadAnchorElement.setAttribute('download', `${definition.id.name}-v${definition.id.version}.json`);
+            downloadAnchorElement.click();
+        });
     }
-    selectProcess(processDefinitionKey) {
-        this.disabled$.next(true);
-        const currentSelectionId = this.selectionId$.getValue();
-        if (processDefinitionKey && processDefinitionKey !== currentSelectionId) {
-            this.disabled$.next(true);
-            this.documentService
-                .updateLinkedUploadProcess(this.documentDefinitionName, processDefinitionKey)
-                .subscribe(processLink => {
-                this.selectionId$.next(processLink.processDefinitionKey);
-                this.disabled$.next(false);
-            });
-        }
-        else if (!processDefinitionKey) {
-            this.documentService.deleteLinkedUploadProcess(this.documentDefinitionName).subscribe(() => {
-                this.disabled$.next(false);
-            });
-        }
+    discardChanges() {
+        this.showCancelConfirmation$.next(false);
+        this.confirmRedirect.emit();
+        this.resetEditorState();
     }
-    setDocumentenApiUploaderProvider(config) {
-        this.documentenApiUploadProvider = config.uploadProvider === UploadProvider.DOCUMENTEN_API;
+    keepEditingDefinition() {
+        this.cancelRedirect.emit();
+        this.showSaveConfirmation$.next(false);
+        this.showCancelConfirmation$.next(false);
     }
-    getDefaultSelection() {
+    onCancelClick(pendingChanges) {
+        if (pendingChanges) {
+            this.showCancelConfirmation$.next(true);
+            return;
+        }
+        this.resetEditorState();
+    }
+    saveDefinition() {
+        this.showSaveConfirmation$.next(false);
+        this.editActive$.next(false);
+        const newDocumentDefinition = new DocumentDefinitionCreateRequest(JSON.stringify(this._changesToSave));
         this.documentService
-            .getLinkedUploadProcess(this.documentDefinitionName)
-            .subscribe(linkedUploadProcess => {
-            if (linkedUploadProcess) {
-                this.selectionId$.next(linkedUploadProcess.processDefinitionKey);
-            }
+            .createDocumentDefinitionForManagement(newDocumentDefinition)
+            .pipe(take$1(1))
+            .subscribe({
+            next: () => {
+                this.dossierDetailService.setSelectedDocumentDefinitionName(this.documentDefinitionName);
+                this.confirmRedirect.emit();
+                this._pendingChanges$.next(false);
+            },
+            error: () => {
+                this.cancelRedirect.emit();
+            },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementLinkProcessComponent, deps: [{ token: i1$2.ConfigService }, { token: i4$1.ProcessService }, { token: i2.ActivatedRoute }, { token: i1.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"documentenApiUploadProvider\">\n  <h2 class=\"mb-4\">{{ 'dossierManagement.linkProcess.title' | translate }}</h2>\n  <v-paragraph [margin]=\"true\">{{\n    'dossierManagement.linkProcess.description' | translate\n  }}</v-paragraph>\n  <ng-container\n    *ngIf=\"{\n      processItems: processItems$ | async,\n      disabled: disabled$ | async,\n      defaultSelectionId: selectionId$ | async\n    } as obs\"\n  >\n    <v-select\n      *ngIf=\"obs.processItems\"\n      (selectedChange)=\"selectProcess($event)\"\n      [defaultSelectionId]=\"obs.defaultSelectionId\"\n      [disabled]=\"obs.disabled\"\n      [items]=\"obs.processItems\"\n      [loading]=\"!obs.processItems\"\n      [margin]=\"true\"\n      [required]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-container>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i7.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme"], outputs: ["selectedChange"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    onEditClick() {
+        this.editActive$.next(true);
+    }
+    onSaveClick() {
+        this.showSaveConfirmation$.next(true);
+    }
+    onValueChangeEvent(value) {
+        this._pendingChanges$.next(true);
+        this._changesToSave = JSON.parse(value);
+        const id = this._changesToSave.$id;
+        this._idChanged$.next(this._initialId !== id);
+    }
+    onValidEvent(valid) {
+        this._changeIsValid$.next(valid);
+    }
+    onCanDeactivate() {
+        this.showCancelConfirmation$.next(true);
+    }
+    resetEditorState() {
+        this._refreshEditor$.next(null);
+        this.editActive$.next(false);
+        this._pendingChanges$.next(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementDocumentDefinitionComponent, deps: [{ token: i1.DocumentService }, { token: DossierDetailService }, { token: i2$2.IconService }, { token: i5.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementDocumentDefinitionComponent, selector: "valtimo-dossier-management-document-definition", inputs: { documentDefinitionName: "documentDefinitionName" }, outputs: { cancelRedirect: "cancelRedirect", confirmRedirect: "confirmRedirect", pendingChangesUpdate: "pendingChangesUpdate" }, viewQueries: [{ propertyName: "cancelModal", first: true, predicate: ["cancelModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    documentDefinitionModel: documentDefinitionModel$ | async,\n    editActive: editActive$ | async,\n    loadingDocumentDefinition: loadingDocumentDefinition$ | async,\n    pendingChanges: pendingChanges$ | async,\n    saveButtonDisabled: saveButtonDisabled$ | async,\n    selectedDocumentDefinition: selectedDocumentDefinition$ | async,\n    compactMode: compactMode$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <ng-container *ngIf=\"!obs.editActive; else editActive\">\n      <button\n        cdsButton=\"ghost\"\n        (click)=\"downloadDefinition()\"\n        [disabled]=\"obs.loadingDocumentDefinition || !obs.selectedDocumentDefinition\"\n      >\n        {{ 'interface.download' | translate }}\n\n        <svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [disabled]=\"obs.selectedDocumentDefinition?.readOnly\"\n        (click)=\"onEditClick()\"\n      >\n        {{ 'interface.edit' | translate }}\n\n        <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n      </button>\n    </ng-container>\n  </div>\n\n  <valtimo-editor\n    *ngIf=\"!obs.loadingDocumentDefinition; else loading\"\n    [model]=\"obs.documentDefinitionModel\"\n    [disabled]=\"!obs.editActive\"\n    (validEvent)=\"onValidEvent($event)\"\n    (valueChangeEvent)=\"onValueChangeEvent($event)\"\n    [fitPage]=\"true\"\n    [fitPageExtraSpace]=\"96\"\n  >\n  </valtimo-editor>\n\n  <a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n\n  <ng-template #editActive>\n    <button cdsButton=\"secondary\" (click)=\"onCancelClick(obs.pendingChanges)\">\n      {{ 'interface.cancel' | translate }}\n\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"obs.saveButtonDisabled\" (click)=\"onSaveClick()\">\n      {{ 'interface.save' | translate }}\n\n      <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showSaveConfirmation$\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    confirmButtonTextTranslationKey=\"interface.save\"\n    contentTranslationKey=\"dossierManagement.documentDefinition.saveModalContent\"\n    titleTranslationKey=\"interface.save\"\n    (cancelEvent)=\"keepEditing()\"\n    (confirmEvent)=\"saveDefinition()\"\n  ></valtimo-confirmation-modal>\n\n  <valtimo-confirmation-modal\n    #cancelModal\n    [showModalSubject$]=\"showCancelConfirmation$\"\n    cancelButtonTextTranslationKey=\"dossierManagement.documentDefinition.cancelModal.keepEditing\"\n    cancelButtonType=\"ghost\"\n    confirmButtonTextTranslationKey=\"interface.discard\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"dossierManagement.documentDefinition.cancelModal.content\"\n    optionalButtonTextTranslationKey=\"interface.save\"\n    optionalButtonType=\"secondary\"\n    titleTranslationKey=\"dossierManagement.documentDefinition.cancelModal.title\"\n    showOptionalButton=\"true\"\n    spacerAfterCancelButton=\"true\"\n    (cancelEvent)=\"keepEditingDefinition()\"\n    (confirmEvent)=\"discardChanges()\"\n    (optionalEvent)=\"saveDefinition()\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center;padding-top:16px;padding-bottom:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i5.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i5.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageExtraSpace"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementLinkProcessComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementDocumentDefinitionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-link-process', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"documentenApiUploadProvider\">\n  <h2 class=\"mb-4\">{{ 'dossierManagement.linkProcess.title' | translate }}</h2>\n  <v-paragraph [margin]=\"true\">{{\n    'dossierManagement.linkProcess.description' | translate\n  }}</v-paragraph>\n  <ng-container\n    *ngIf=\"{\n      processItems: processItems$ | async,\n      disabled: disabled$ | async,\n      defaultSelectionId: selectionId$ | async\n    } as obs\"\n  >\n    <v-select\n      *ngIf=\"obs.processItems\"\n      (selectedChange)=\"selectProcess($event)\"\n      [defaultSelectionId]=\"obs.defaultSelectionId\"\n      [disabled]=\"obs.disabled\"\n      [items]=\"obs.processItems\"\n      [loading]=\"!obs.processItems\"\n      [margin]=\"true\"\n      [required]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-container>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.ConfigService }, { type: i4$1.ProcessService }, { type: i2.ActivatedRoute }, { type: i1.DocumentService }]; } });
+            args: [{ selector: 'valtimo-dossier-management-document-definition', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    documentDefinitionModel: documentDefinitionModel$ | async,\n    editActive: editActive$ | async,\n    loadingDocumentDefinition: loadingDocumentDefinition$ | async,\n    pendingChanges: pendingChanges$ | async,\n    saveButtonDisabled: saveButtonDisabled$ | async,\n    selectedDocumentDefinition: selectedDocumentDefinition$ | async,\n    compactMode: compactMode$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <ng-container *ngIf=\"!obs.editActive; else editActive\">\n      <button\n        cdsButton=\"ghost\"\n        (click)=\"downloadDefinition()\"\n        [disabled]=\"obs.loadingDocumentDefinition || !obs.selectedDocumentDefinition\"\n      >\n        {{ 'interface.download' | translate }}\n\n        <svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"primary\"\n        [disabled]=\"obs.selectedDocumentDefinition?.readOnly\"\n        (click)=\"onEditClick()\"\n      >\n        {{ 'interface.edit' | translate }}\n\n        <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n      </button>\n    </ng-container>\n  </div>\n\n  <valtimo-editor\n    *ngIf=\"!obs.loadingDocumentDefinition; else loading\"\n    [model]=\"obs.documentDefinitionModel\"\n    [disabled]=\"!obs.editActive\"\n    (validEvent)=\"onValidEvent($event)\"\n    (valueChangeEvent)=\"onValueChangeEvent($event)\"\n    [fitPage]=\"true\"\n    [fitPageExtraSpace]=\"96\"\n  >\n  </valtimo-editor>\n\n  <a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n\n  <ng-template #editActive>\n    <button cdsButton=\"secondary\" (click)=\"onCancelClick(obs.pendingChanges)\">\n      {{ 'interface.cancel' | translate }}\n\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"obs.saveButtonDisabled\" (click)=\"onSaveClick()\">\n      {{ 'interface.save' | translate }}\n\n      <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showSaveConfirmation$\"\n    cancelButtonTextTranslationKey=\"interface.cancel\"\n    confirmButtonTextTranslationKey=\"interface.save\"\n    contentTranslationKey=\"dossierManagement.documentDefinition.saveModalContent\"\n    titleTranslationKey=\"interface.save\"\n    (cancelEvent)=\"keepEditing()\"\n    (confirmEvent)=\"saveDefinition()\"\n  ></valtimo-confirmation-modal>\n\n  <valtimo-confirmation-modal\n    #cancelModal\n    [showModalSubject$]=\"showCancelConfirmation$\"\n    cancelButtonTextTranslationKey=\"dossierManagement.documentDefinition.cancelModal.keepEditing\"\n    cancelButtonType=\"ghost\"\n    confirmButtonTextTranslationKey=\"interface.discard\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"dossierManagement.documentDefinition.cancelModal.content\"\n    optionalButtonTextTranslationKey=\"interface.save\"\n    optionalButtonType=\"secondary\"\n    titleTranslationKey=\"dossierManagement.documentDefinition.cancelModal.title\"\n    showOptionalButton=\"true\"\n    spacerAfterCancelButton=\"true\"\n    (cancelEvent)=\"keepEditingDefinition()\"\n    (confirmEvent)=\"discardChanges()\"\n    (optionalEvent)=\"saveDefinition()\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center;padding-top:16px;padding-bottom:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1.DocumentService }, { type: DossierDetailService }, { type: i2$2.IconService }, { type: i5.PageHeaderService }], propDecorators: { cancelModal: [{
+                type: ViewChild,
+                args: ['cancelModal']
+            }], documentDefinitionName: [{
+                type: Input
+            }], cancelRedirect: [{
+                type: Output
+            }], confirmRedirect: [{
+                type: Output
+            }], pendingChangesUpdate: [{
+                type: Output
+            }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -629,21 +928,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class DossierManagementDetailComponent {
-    constructor(documentService, route) {
+    constructor(documentService, route, zgwCaseConfigurationExtensionComponents, cdr) {
         this.documentService = documentService;
         this.route = route;
+        this.zgwCaseConfigurationExtensionComponents = zgwCaseConfigurationExtensionComponents;
+        this.cdr = cdr;
         this.documentDefinition$ = this.route.paramMap.pipe(switchMap((params) => this.documentService.getDocumentDefinitionForManagement(params.get('name') ?? '')));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"col-12 px-0 mb-5\">\n  <valtimo-widget *ngIf=\"documentDefinition$ | async\">\n    <div class=\"row pt-4 mb-5 pb-4 pl-2 pr-2\">\n      <div class=\"col-10 offset-1\">\n        <valtimo-dossier-management-link-process></valtimo-dossier-management-link-process>\n\n        <valtimo-extension\n          module=\"dossier-management\"\n          page=\"dossier\"\n          section=\"right-panel\"\n        ></valtimo-extension>\n        <valtimo-dossier-management-assignee></valtimo-dossier-management-assignee>\n      </div>\n    </div>\n  </valtimo-widget>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.row{margin:0}.dossier-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{background:transparent;border:none}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i1$2.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { kind: "component", type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process" }, { kind: "component", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] }); }
+    ngAfterViewInit() {
+        this.renderExtensions();
+    }
+    renderExtensions() {
+        if (!Array.isArray(this.zgwCaseConfigurationExtensionComponents) ||
+            this.zgwCaseConfigurationExtensionComponents.length === 0) {
+            return;
+        }
+        this.zgwCaseConfigurationExtensionComponents.forEach(extensionComponent => {
+            this._extensions.createComponent(extensionComponent);
+        });
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementDetailComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: ZGW_CASE_CONFIGURATION_EXTENSIONS_TOKEN, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail", viewQueries: [{ propertyName: "_extensions", first: true, predicate: ["extensions"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"col-12 px-0 mb-5\">\n  <valtimo-widget>\n    <div class=\"row pt-4 mb-5 pb-4 pl-2 pr-2\">\n      <div class=\"col-10 offset-1\">\n        <ng-template #extensions></ng-template>\n\n        <valtimo-dossier-management-assignee\n          *ngIf=\"documentDefinition$ | async\"\n        ></valtimo-dossier-management-assignee>\n      </div>\n    </div>\n  </valtimo-widget>\n</div>\n", styles: [".row{margin:0}.dossier-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{background:transparent;border:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-detail', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"col-12 px-0 mb-5\">\n  <valtimo-widget *ngIf=\"documentDefinition$ | async\">\n    <div class=\"row pt-4 mb-5 pb-4 pl-2 pr-2\">\n      <div class=\"col-10 offset-1\">\n        <valtimo-dossier-management-link-process></valtimo-dossier-management-link-process>\n\n        <valtimo-extension\n          module=\"dossier-management\"\n          page=\"dossier\"\n          section=\"right-panel\"\n        ></valtimo-extension>\n        <valtimo-dossier-management-assignee></valtimo-dossier-management-assignee>\n      </div>\n    </div>\n  </valtimo-widget>\n</div>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.row{margin:0}.dossier-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{background:transparent;border:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }]; } });
+            args: [{ selector: 'valtimo-dossier-management-detail', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"col-12 px-0 mb-5\">\n  <valtimo-widget>\n    <div class=\"row pt-4 mb-5 pb-4 pl-2 pr-2\">\n      <div class=\"col-10 offset-1\">\n        <ng-template #extensions></ng-template>\n\n        <valtimo-dossier-management-assignee\n          *ngIf=\"documentDefinition$ | async\"\n        ></valtimo-dossier-management-assignee>\n      </div>\n    </div>\n  </valtimo-widget>\n</div>\n", styles: [".row{margin:0}.dossier-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{background:transparent;border: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.DocumentService }, { type: i2.ActivatedRoute }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ZGW_CASE_CONFIGURATION_EXTENSIONS_TOKEN]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { _extensions: [{
+                type: ViewChild,
+                args: ['extensions', { read: ViewContainerRef }]
+            }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -669,12 +991,21 @@ class DossierManagementSearchFieldsComponent {
         this.downloadUrl$ = new BehaviorSubject(undefined);
         this.disableInput$ = new BehaviorSubject(false);
         this.selectedSearchField$ = new BehaviorSubject(undefined);
+        this.selectedDeleteSearchField$ = new BehaviorSubject(undefined);
         this.formData$ = new BehaviorSubject(null);
         this.valid$ = new BehaviorSubject(false);
+        this.showFields$ = new BehaviorSubject(false);
+        this.modalShowing$ = new BehaviorSubject(false);
+        this.showDeleteModal$ = new BehaviorSubject(false);
         this._subscriptions = new Subscription();
         this.actionItems = [
             {
-                callback: this.deleteSelectedSearchField.bind(this),
+                label: 'interface.edit',
+                callback: this.showEditModal.bind(this),
+                type: 'normal',
+            },
+            {
+                callback: this.showDeleteModal.bind(this),
                 label: 'interface.delete',
                 type: 'danger',
             },
@@ -728,7 +1059,9 @@ class DossierManagementSearchFieldsComponent {
             'datetime',
             'boolean',
         ];
-        this.dataTypeItems$ = this.translateService.stream('key').pipe(map(() => this.DATA_TYPES.map(dataType => ({
+        this.dataTypeItems$ = this.translateService
+            .stream('key')
+            .pipe(map(() => this.DATA_TYPES.map(dataType => ({
             id: dataType,
             text: this.translateService.instant(`searchFields.${dataType}`),
         }))));
@@ -773,14 +1106,13 @@ class DossierManagementSearchFieldsComponent {
         }))));
         this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''), filter(docDefName => !!docDefName), tap$1((documentDefinitionName) => (this._documentDefinitionName = documentDefinitionName)));
         this.loadingSearchFields = true;
-        this.showSearchFieldsForm = false;
         this.refreshSearchFields$ = new BehaviorSubject(null);
         this.searchFields$ = combineLatest([
             this.documentDefinitionName$,
             this.refreshSearchFields$,
         ]).pipe(switchMap(([documentDefinitionName]) => this.documentService.getDocumentSearchFields(documentDefinitionName)), tap$1(searchFields => {
             this.documentDefinitionName$.pipe(take(1)).subscribe(documentDefinitionName => {
-                if (searchFields && Array.isArray(searchFields) && searchFields.length > 0) {
+                if (searchFields && Array.isArray(searchFields) && searchFields?.length > 0) {
                     this.setDownload(documentDefinitionName, searchFields);
                 }
             });
@@ -848,6 +1180,7 @@ class DossierManagementSearchFieldsComponent {
             fieldTypeIsDropdown &&
             !!formData?.dropdownDataProvider &&
             this.dropdownDataProviderSupportsUpdates(formData?.dropdownDataProvider)));
+        this.CARBON_THEME = 'white';
         this.iconService.registerAll([ArrowDown16, ArrowUp16]);
     }
     ngOnInit() {
@@ -864,7 +1197,8 @@ class DossierManagementSearchFieldsComponent {
             if (!inputDisabled) {
                 this.searchFieldActionTypeIsAdd = searchFieldActionTypeIsAdd;
                 const searchFieldToSelect = this.cachedSearchFields.find(field => field.key === searchField.key);
-                this.selectedSearchField$.next(searchFieldToSelect);
+                this.selectedSearchField$.next(searchFieldToSelect || {});
+                this.showModal();
             }
         });
     }
@@ -888,21 +1222,21 @@ class DossierManagementSearchFieldsComponent {
         const searchFieldIndex = searchFields.findIndex(field => field.key === searchFieldRow.key);
         const foundSearchField = { ...searchFields[searchFieldIndex] };
         const filteredSearchFields = searchFields.filter(field => field.key !== searchFieldRow.key);
-        const multipleSearchFields = searchFields.length > 1;
+        const multipleSearchFields = searchFields?.length > 1;
         if (multipleSearchFields && moveUp && searchFieldIndex > 0) {
             const searchFieldBeforeKey = `${searchFields[searchFieldIndex - 1].key}`;
             const searchFieldBeforeIndex = filteredSearchFields.findIndex(field => field.key === searchFieldBeforeKey);
             filteredSearchFields.splice(searchFieldBeforeIndex, 0, foundSearchField);
             this.updateSearchFields(documentDefinitionName, filteredSearchFields);
         }
-        else if (multipleSearchFields && !moveUp && searchFieldIndex < searchFields.length) {
+        else if (multipleSearchFields && !moveUp && searchFieldIndex < searchFields?.length) {
             const searchFieldAfterKey = `${searchFields[searchFieldIndex + 1].key}`;
             const searchFieldAfterIndex = filteredSearchFields.findIndex(field => field.key === searchFieldAfterKey);
             filteredSearchFields.splice(searchFieldAfterIndex + 1, 0, foundSearchField);
             this.updateSearchFields(documentDefinitionName, filteredSearchFields);
         }
     }
-    deleteSelectedSearchField(selectedSearchField) {
+    onDeleteSelectedSearchFieldConfirm(selectedSearchField) {
         this.disableInput();
         if (this.dropdownDataProviderSupportsUpdates(selectedSearchField?.dropdownDataProvider)) {
             this.documentService
@@ -978,6 +1312,9 @@ class DossierManagementSearchFieldsComponent {
             this.enableInput();
         });
     }
+    onModalClose() {
+        this.hideModal();
+    }
     nextIfChanged(behaviourSubject$, value) {
         if (JSON.stringify(behaviourSubject$.value) !== JSON.stringify(value)) {
             behaviourSubject$.next(value);
@@ -992,7 +1329,8 @@ class DossierManagementSearchFieldsComponent {
             data.dataType &&
             validMatchType &&
             validDropdownDataProvider &&
-            data.path);
+            data.path &&
+            data.fieldType);
         const keyIsUnique = !this.searchFieldActionTypeIsAdd ||
             this.cachedSearchFields.findIndex(field => field.key === data.key) === -1;
         return containsAllValues && keyIsUnique;
@@ -1004,21 +1342,22 @@ class DossierManagementSearchFieldsComponent {
         return dropdownDataProvider === 'dropdownDatabaseDataProvider';
     }
     openSelectedSearchFieldSubscription() {
-        this._subscriptions.add(this.selectedSearchField$.subscribe(() => {
-            this.showModal();
+        this._subscriptions.add(this.selectedSearchField$.subscribe(selectedSearchField => {
+            if (selectedSearchField)
+                this.showModal();
         }));
     }
     openModalShowingSubscription() {
-        this._subscriptions.add(this.modal.modalShowing$.subscribe(modalShowing => {
+        this._subscriptions.add(this.modalShowing$.subscribe(modalShowing => {
             if (modalShowing) {
                 setTimeout(() => {
-                    this.showSearchFieldsForm = true;
+                    this.showFields$.next(true);
                 }, 0);
             }
             else {
                 setTimeout(() => {
-                    this.showSearchFieldsForm = false;
-                }, 150);
+                    this.showFields$.next(false);
+                }, CARBON_CONSTANTS.modalAnimationMs);
             }
         }));
     }
@@ -1034,29 +1373,33 @@ class DossierManagementSearchFieldsComponent {
         this.disableInput$.next(false);
     }
     showModal() {
-        this.modal?.show();
+        this.modalShowing$.next(true);
     }
     hideModal() {
-        this.modal?.hide();
+        this.modalShowing$.next(false);
     }
     refreshSearchFields() {
         this.refreshSearchFields$.next(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementSearchFieldsComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: i3.TranslateService }, { token: i4$2.DomSanitizer }, { token: i4.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", outputs: { searchField: "searchField" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["searchFieldModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    searchFields: translatedSearchFields$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    valid: valid$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"dossier-management-search-fields__buttons\">\n    <a\n      cdsLink\n      class=\"center-link\"\n      [disabled]=\"\n        !obs.downloadUrl || !obs.downloadName || obs.searchFields.length <= 0 || obs.disableInput\n      \"\n      [download]=\"obs.downloadName\"\n      [href]=\"obs.downloadUrl\"\n    >\n      {{ 'searchFields.downloadButtonText' | translate }}\n    </a>\n\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"loadingSearchFields || obs.disableInput\"\n      (click)=\"searchFieldClicked($event, true)\"\n    >\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n      {{ 'searchFieldsOverview.addRow' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.searchFields\"\n    [loading]=\"!obs.searchFields\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    (moveRow)=\"onMoveRowClick($event, obs.documentDefinitionName)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <valtimo-modal\n    #searchFieldModal\n    elementId=\"searchFieldModal\"\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [showFooter]=\"true\"\n  >\n    <div body class=\"mt-2\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"showSearchFieldsForm && {searchField: selectedSearchField$ | async} as searchObs\"\n      >\n        <v-input\n          name=\"title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n        >\n        </v-input>\n        <v-input\n          name=\"key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [widthPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n        >\n        </v-input>\n        <v-input\n          name=\"path\"\n          [title]=\"'searchFieldsOverview.path' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n        >\n        </v-input>\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n        ></v-select>\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n        ></v-select>\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n        ></v-select>\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n        ></v-select>\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n        >\n        </valtimo-carbon-multi-input>\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n        ></v-table>\n      </v-form>\n    </div>\n    <div footer>\n      <div class=\"col-12 p-0\">\n        <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n  </valtimo-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <div class=\"buttons-container\" *ngIf=\"{searchField: selectedSearchField$ | async} as searchObs\">\n    <div class=\"right-buttons\">\n      <button\n        class=\"btn btn-space btn-secondary\"\n        *ngIf=\"!searchFieldActionTypeIsAdd\"\n        [disabled]=\"obs.disableInput\"\n        (click)=\"deleteSelectedSearchField(searchObs.searchField)\"\n      >\n        {{ 'searchFieldsOverview.delete' | translate }}\n      </button>\n      <button\n        (click)=\"saveSearchField(obs.documentDefinitionName)\"\n        type=\"button\"\n        class=\"btn btn-primary btn-space mr-0\"\n        [disabled]=\"obs.disableInput || !obs.valid\"\n      >\n        {{ 'searchFieldsOverview.submit' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.dossier-management-search-fields__buttons{display:flex;gap:16px}.dossier-management-search-fields__buttons .center-link{display:flex;align-items:center}.dossier-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.dossier-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\n"], dependencies: [{ 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: i7.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i7.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme"], outputs: ["selectedChange"] }, { kind: "component", type: i7.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "directive", type: i4.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i7.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    showDeleteModal(searchField) {
+        this.selectedDeleteSearchField$.next(searchField);
+        this.showDeleteModal$.next(true);
+    }
+    showEditModal(searchField) {
+        this.searchFieldClicked(searchField, false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementSearchFieldsComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: i3.TranslateService }, { token: i4$1.DomSanitizer }, { token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", outputs: { searchField: "searchField" }, 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    searchFields: translatedSearchFields$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    valid: valid$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    [download]=\"obs.downloadName\"\n    [href]=\"obs.downloadUrl\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.searchFields\"\n    [loading]=\"!obs.searchFields\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\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]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n      [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [widthPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"path\"\n          [title]=\"'searchFieldsOverview.path' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onModalClose()\" [disabled]=\"obs.disableInput\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.documentDefinitionName)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.dossier-management-search-fields__buttons{display:flex;gap:16px}.dossier-management-search-fields__buttons .center-link{display:flex;align-items:center}.dossier-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.dossier-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top: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: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline"], outputs: ["selectedChange"] }, { kind: "component", type: i5.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: i5.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i5.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: "component", type: i5.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i5.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "directive", type: i5.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i5.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: i5.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementSearchFieldsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementSearchFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-search-fields', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    searchFields: translatedSearchFields$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    valid: valid$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"dossier-management-search-fields__buttons\">\n    <a\n      cdsLink\n      class=\"center-link\"\n      [disabled]=\"\n        !obs.downloadUrl || !obs.downloadName || obs.searchFields.length <= 0 || obs.disableInput\n      \"\n      [download]=\"obs.downloadName\"\n      [href]=\"obs.downloadUrl\"\n    >\n      {{ 'searchFields.downloadButtonText' | translate }}\n    </a>\n\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"loadingSearchFields || obs.disableInput\"\n      (click)=\"searchFieldClicked($event, true)\"\n    >\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n      {{ 'searchFieldsOverview.addRow' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.searchFields\"\n    [loading]=\"!obs.searchFields\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    (moveRow)=\"onMoveRowClick($event, obs.documentDefinitionName)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <valtimo-modal\n    #searchFieldModal\n    elementId=\"searchFieldModal\"\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [showFooter]=\"true\"\n  >\n    <div body class=\"mt-2\">\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"showSearchFieldsForm && {searchField: selectedSearchField$ | async} as searchObs\"\n      >\n        <v-input\n          name=\"title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n        >\n        </v-input>\n        <v-input\n          name=\"key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [widthPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n        >\n        </v-input>\n        <v-input\n          name=\"path\"\n          [title]=\"'searchFieldsOverview.path' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n        >\n        </v-input>\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n        ></v-select>\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n        ></v-select>\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n        ></v-select>\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n        ></v-select>\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n        >\n        </valtimo-carbon-multi-input>\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n        ></v-table>\n      </v-form>\n    </div>\n    <div footer>\n      <div class=\"col-12 p-0\">\n        <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n  </valtimo-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <div class=\"buttons-container\" *ngIf=\"{searchField: selectedSearchField$ | async} as searchObs\">\n    <div class=\"right-buttons\">\n      <button\n        class=\"btn btn-space btn-secondary\"\n        *ngIf=\"!searchFieldActionTypeIsAdd\"\n        [disabled]=\"obs.disableInput\"\n        (click)=\"deleteSelectedSearchField(searchObs.searchField)\"\n      >\n        {{ 'searchFieldsOverview.delete' | translate }}\n      </button>\n      <button\n        (click)=\"saveSearchField(obs.documentDefinitionName)\"\n        type=\"button\"\n        class=\"btn btn-primary btn-space mr-0\"\n        [disabled]=\"obs.disableInput || !obs.valid\"\n      >\n        {{ 'searchFieldsOverview.submit' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.dossier-management-search-fields__buttons{display:flex;gap:16px}.dossier-management-search-fields__buttons .center-link{display:flex;align-items:center}.dossier-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.dossier-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i3.TranslateService }, { type: i4$2.DomSanitizer }, { type: i4.IconService }]; }, propDecorators: { modal: [{
-                type: ViewChild,
-                args: ['searchFieldModal']
-            }], searchField: [{
+            args: [{ selector: 'valtimo-dossier-management-search-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    searchFields: translatedSearchFields$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    valid: valid$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    [download]=\"obs.downloadName\"\n    [href]=\"obs.downloadUrl\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.searchFields\"\n    [loading]=\"!obs.searchFields\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\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]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n      [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [widthPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"path\"\n          [title]=\"'searchFieldsOverview.path' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onModalClose()\" [disabled]=\"obs.disableInput\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.documentDefinitionName)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.dossier-management-search-fields__buttons{display:flex;gap:16px}.dossier-management-search-fields__buttons .center-link{display:flex;align-items:center}.dossier-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.dossier-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top: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.DocumentService }, { type: i2.ActivatedRoute }, { type: i3.TranslateService }, { type: i4$1.DomSanitizer }, { type: i2$2.IconService }], propDecorators: { searchField: [{
                 type: Output
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1200,6 +1543,7 @@ class DossierManagementListColumnsComponent {
             ViewType.ENUM,
             ViewType.ARRAY_COUNT,
             ViewType.UNDERSCORES_TO_SPACES,
+            ViewType.TAGS,
         ];
         this.showDateFormat$ = this.formGroup.valueChanges.pipe(map(formValues => !!(formValues.displayType?.key === this.DISPLAY_TYPES[1])), tap$1(showDateFormat => {
             if (showDateFormat === false && !!this.formGroup.value.dateFormat) {
@@ -1297,10 +1641,10 @@ class DossierManagementListColumnsComponent {
             });
         }
     }
-    moveRow(caseListColumnRowIndex, moveUp, clickEvent, documentDefinitionName) {
+    onMoveRowEvent(event, documentDefinitionName) {
         const caseListColumns = [...this.cachedCaseListColumns];
-        const caseListColumnRow = caseListColumns[caseListColumnRowIndex];
-        clickEvent.stopPropagation();
+        const caseListColumnRow = caseListColumns[event.index];
+        const moveUp = event.direction === MoveRowDirection.UP;
         const caseListColumnIndex = caseListColumns.findIndex(field => field.key === caseListColumnRow.key);
         const foundCaseListColumn = { ...caseListColumns[caseListColumnIndex] };
         const filteredCaseListColumns = caseListColumns.filter(field => field.key !== caseListColumnRow.key);
@@ -1491,16 +1835,16 @@ class DossierManagementListColumnsComponent {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementListColumnsComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: i3.TranslateService }, { token: i1$2.ConfigService }, { token: i4$2.DomSanitizer }, { token: i4.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content list-columns__buttons\">\n    <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"!obs.hasEnvironmentConfig; else environmentConfigWarning\">\n    <ng-container *ngIf=\"!obs.caseListColumn || obs.caseListColumn?.length > 0\">\n      <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"obs.caseListColumn?.length === 0\">\n      <ng-container *ngTemplateOutlet=\"noConfigWarning\"></ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loadingCaseListColumns\"\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    [hideToolbar]=\"true\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <a\n    cdsLink\n    class=\"center-link\"\n    [href]=\"obs.downloadUrl\"\n    [download]=\"obs.downloadName\"\n    [disabled]=\"\n      obs.hasEnvironmentConfig ||\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      loadingCaseListColumns\n    \"\n  >\n    {{ 'listColumn.downloadButtonText' | translate }}\n  </a>\n\n  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n        [invalid]=\"modalObs.validKey === false\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"path\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <cds-dropdown-list [items]=\"viewTypeItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n    <div\n      class=\"cds--text-input__field-wrapper\"\n      *ngIf=\"modalObs.showEnum || modalObs.isYesNo\"\n      [ngClass]=\"{'no-margin': modalObs.isYesNo}\"\n    >\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{\n            modalObs.isYesNo\n              ? ('listColumn.enumTitleOptional' | translate)\n              : ('listColumn.enumTitle' | translate)\n          }}\n          <v-tooltip-icon\n            [tooltip]=\"\n              modalObs.isYesNo\n                ? ('listColumn.enumTooltipOptional' | translate)\n                : ('listColumn.enumTooltip' | translate)\n            \"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <valtimo-carbon-multi-input\n          *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n          [defaultValues]=\"defaultEnumValues$ | async\"\n          [hideAddButton]=\"modalObs.isYesNo\"\n          [hideDeleteButton]=\"modalObs.isYesNo\"\n          [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n          [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n          [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <cds-dropdown-list [items]=\"sortItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCasListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.label-with-tooltip{display:flex;align-items:center}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:1rem}.no-margin{margin-bottom:0!important}.display-type-dropdown{width:300px}.list-column-form{margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.dossier-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i4.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i4.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i4.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i4.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i4.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i4.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i4.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i7.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i7.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "directive", type: i4.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i7.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent", "cancelEvent"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementListColumnsComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: i3.TranslateService }, { token: i2$1.ConfigService }, { token: i4$1.DomSanitizer }, { token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns", 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    caseListColumn: translatedCaseListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loadingCaseListColumns\"\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    [movingRowsEnabled]=\"true\"\n    (moveRow)=\"onMoveRowEvent($event, obs.documentDefinitionName)\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.noConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n    ></valtimo-no-results>\n\n    <valtimo-no-results\n      *ngIf=\"obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.hasEnvConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.hasEnvConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-error.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [href]=\"obs.downloadUrl\"\n    [download]=\"obs.downloadName\"\n    [disabled]=\"\n      obs.hasEnvironmentConfig ||\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      loadingCaseListColumns\n    \"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n        [invalid]=\"modalObs.validKey === false\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"path\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <cds-dropdown-list [items]=\"viewTypeItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n    <div\n      class=\"cds--text-input__field-wrapper\"\n      *ngIf=\"modalObs.showEnum || modalObs.isYesNo\"\n      [ngClass]=\"{'no-margin': modalObs.isYesNo}\"\n    >\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{\n            modalObs.isYesNo\n              ? ('listColumn.enumTitleOptional' | translate)\n              : ('listColumn.enumTitle' | translate)\n          }}\n          <v-tooltip-icon\n            [tooltip]=\"\n              modalObs.isYesNo\n                ? ('listColumn.enumTooltipOptional' | translate)\n                : ('listColumn.enumTooltip' | translate)\n            \"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <valtimo-carbon-multi-input\n          *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n          [defaultValues]=\"defaultEnumValues$ | async\"\n          [hideAddButton]=\"modalObs.isYesNo\"\n          [hideDeleteButton]=\"modalObs.isYesNo\"\n          [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n          [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n          [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <cds-dropdown-list [items]=\"sortItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCasListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.label-with-tooltip{display:flex;align-items:center}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:1rem}.no-margin{margin-bottom:0!important}.display-type-dropdown{width:300px}.list-column-form{margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.dossier-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.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: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$2.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i5.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i5.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: "component", type: i5.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "directive", type: i5.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i5.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: i5.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementListColumnsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementListColumnsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-list-columns', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    caseListColumn: translatedCaseListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async\n  } as obs\"\n>\n  <div class=\"cds--toolbar-content list-columns__buttons\">\n    <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"!obs.hasEnvironmentConfig; else environmentConfigWarning\">\n    <ng-container *ngIf=\"!obs.caseListColumn || obs.caseListColumn?.length > 0\">\n      <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"obs.caseListColumn?.length === 0\">\n      <ng-container *ngTemplateOutlet=\"noConfigWarning\"></ng-container>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loadingCaseListColumns\"\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    [hideToolbar]=\"true\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <a\n    cdsLink\n    class=\"center-link\"\n    [href]=\"obs.downloadUrl\"\n    [download]=\"obs.downloadName\"\n    [disabled]=\"\n      obs.hasEnvironmentConfig ||\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      loadingCaseListColumns\n    \"\n  >\n    {{ 'listColumn.downloadButtonText' | translate }}\n  </a>\n\n  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n        [invalid]=\"modalObs.validKey === false\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"path\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <cds-dropdown-list [items]=\"viewTypeItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n    <div\n      class=\"cds--text-input__field-wrapper\"\n      *ngIf=\"modalObs.showEnum || modalObs.isYesNo\"\n      [ngClass]=\"{'no-margin': modalObs.isYesNo}\"\n    >\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{\n            modalObs.isYesNo\n              ? ('listColumn.enumTitleOptional' | translate)\n              : ('listColumn.enumTitle' | translate)\n          }}\n          <v-tooltip-icon\n            [tooltip]=\"\n              modalObs.isYesNo\n                ? ('listColumn.enumTooltipOptional' | translate)\n                : ('listColumn.enumTooltip' | translate)\n            \"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <valtimo-carbon-multi-input\n          *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n          [defaultValues]=\"defaultEnumValues$ | async\"\n          [hideAddButton]=\"modalObs.isYesNo\"\n          [hideDeleteButton]=\"modalObs.isYesNo\"\n          [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n          [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n          [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <cds-dropdown-list [items]=\"sortItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCasListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.label-with-tooltip{display:flex;align-items:center}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:1rem}.no-margin{margin-bottom:0!important}.display-type-dropdown{width:300px}.list-column-form{margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.dossier-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i3.TranslateService }, { type: i1$2.ConfigService }, { type: i4$2.DomSanitizer }, { type: i4.IconService }]; } });
+            args: [{ selector: 'valtimo-dossier-management-list-columns', 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    caseListColumn: translatedCaseListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loadingCaseListColumns\"\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    [movingRowsEnabled]=\"true\"\n    (moveRow)=\"onMoveRowEvent($event, obs.documentDefinitionName)\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.noConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n    ></valtimo-no-results>\n\n    <valtimo-no-results\n      *ngIf=\"obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.hasEnvConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.hasEnvConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-error.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [href]=\"obs.downloadUrl\"\n    [download]=\"obs.downloadName\"\n    [disabled]=\"\n      obs.hasEnvironmentConfig ||\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      loadingCaseListColumns\n    \"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n        [invalid]=\"modalObs.validKey === false\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"path\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <cds-dropdown-list [items]=\"viewTypeItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n    <div\n      class=\"cds--text-input__field-wrapper\"\n      *ngIf=\"modalObs.showEnum || modalObs.isYesNo\"\n      [ngClass]=\"{'no-margin': modalObs.isYesNo}\"\n    >\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{\n            modalObs.isYesNo\n              ? ('listColumn.enumTitleOptional' | translate)\n              : ('listColumn.enumTitle' | translate)\n          }}\n          <v-tooltip-icon\n            [tooltip]=\"\n              modalObs.isYesNo\n                ? ('listColumn.enumTooltipOptional' | translate)\n                : ('listColumn.enumTooltip' | translate)\n            \"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <valtimo-carbon-multi-input\n          *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n          [defaultValues]=\"defaultEnumValues$ | async\"\n          [hideAddButton]=\"modalObs.isYesNo\"\n          [hideDeleteButton]=\"modalObs.isYesNo\"\n          [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n          [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n          [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <cds-dropdown-list [items]=\"sortItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCasListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.label-with-tooltip{display:flex;align-items:center}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:1rem}.no-margin{margin-bottom:0!important}.display-type-dropdown{width:300px}.list-column-form{margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.dossier-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content:flex-end}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i3.TranslateService }, { type: i2$1.ConfigService }, { type: i4$1.DomSanitizer }, { type: i2$2.IconService }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1556,18 +1900,18 @@ class TabFormComponent {
             selected: this.form?.get('contentKey')?.value === tabItem.contentKey,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabFormComponent, deps: [{ token: TabService }, { token: i2$1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabFormComponent, selector: "valtimo-tab-form", inputs: { tabType: "tabType" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\">\n  <cds-label>\n    {{ 'dossierManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label\n    [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n    [invalidText]=\"'dossierManagement.tabManagement.addModal.uniqueKeyError' | translate\"\n  >\n    {{ 'dossierManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'dossierManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list></cds-dropdown-list>\n  </cds-combo-box>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i4.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabFormComponent, deps: [{ token: TabService }, { token: i1$3.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TabFormComponent, selector: "valtimo-tab-form", inputs: { tabType: "tabType" }, 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\">\n  <cds-label>\n    {{ 'dossierManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label\n    [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n    [invalidText]=\"'dossierManagement.tabManagement.addModal.uniqueKeyError' | translate\"\n  >\n    {{ 'dossierManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'dossierManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list></cds-dropdown-list>\n  </cds-combo-box>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TabFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-tab-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\">\n  <cds-label>\n    {{ 'dossierManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label\n    [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n    [invalidText]=\"'dossierManagement.tabManagement.addModal.uniqueKeyError' | translate\"\n  >\n    {{ 'dossierManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'dossierManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list></cds-dropdown-list>\n  </cds-combo-box>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\n"] }]
-        }], ctorParameters: function () { return [{ type: TabService }, { type: i2$1.FormGroupDirective }]; }, propDecorators: { tabType: [{
+            args: [{ selector: 'valtimo-tab-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\">\n  <cds-label>\n    {{ 'dossierManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label\n    [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n    [invalidText]=\"'dossierManagement.tabManagement.addModal.uniqueKeyError' | translate\"\n  >\n    {{ 'dossierManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'dossierManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list></cds-dropdown-list>\n  </cds-combo-box>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: TabService }, { type: i1$3.FormGroupDirective }], propDecorators: { tabType: [{
                 type: Input
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1643,13 +1987,13 @@ class DossierManagementAddTabModalComponent {
             ? null
             : { uniqueKey: { value: control.value } };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementAddTabModalComponent, deps: [{ token: i2$1.FormBuilder }, { token: i4.IconService }, { token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementAddTabModalComponent, selector: "valtimo-dossier-management-add-tab-modal", inputs: { documentDefinitionName: "documentDefinitionName", open: "open" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('dossierManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (documentDefinitionName | titlecase)})\n          : ('dossierManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'dossierManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <button\n          *ngFor=\"let tabType of tabTypes\"\n          cdsButton=\"secondary\"\n          [disabled]=\"tabType.disabled\"\n          (click)=\"onTabTypeSelect(tabType.type)\"\n        >\n          {{ tabType.title | translate }}\n\n          <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}\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: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i4.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i4.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i4.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i4.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i4.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TabFormComponent, selector: "valtimo-tab-form", inputs: ["tabType"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementAddTabModalComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2$2.IconService }, { token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementAddTabModalComponent, selector: "valtimo-dossier-management-add-tab-modal", inputs: { documentDefinitionName: "documentDefinitionName", open: "open" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('dossierManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (documentDefinitionName | titlecase)})\n          : ('dossierManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'dossierManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <button\n          *ngFor=\"let tabType of tabTypes\"\n          cdsButton=\"secondary\"\n          [disabled]=\"tabType.disabled\"\n          (click)=\"onTabTypeSelect(tabType.type)\"\n        >\n          {{ tabType.title | translate }}\n\n          <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "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: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: TabFormComponent, selector: "valtimo-tab-form", inputs: ["tabType"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementAddTabModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementAddTabModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-add-tab-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('dossierManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (documentDefinitionName | titlecase)})\n          : ('dossierManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'dossierManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <button\n          *ngFor=\"let tabType of tabTypes\"\n          cdsButton=\"secondary\"\n          [disabled]=\"tabType.disabled\"\n          (click)=\"onTabTypeSelect(tabType.type)\"\n        >\n          {{ tabType.title | translate }}\n\n          <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: i4.IconService }, { type: TabService }]; }, propDecorators: { documentDefinitionName: [{
+            args: [{ selector: 'valtimo-dossier-management-add-tab-modal', changeDetection: ChangeDetectionStrategy.OnPush, 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<cds-modal valtimoCdsModal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('dossierManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (documentDefinitionName | titlecase)})\n          : ('dossierManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'dossierManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <button\n          *ngFor=\"let tabType of tabTypes\"\n          cdsButton=\"secondary\"\n          [disabled]=\"tabType.disabled\"\n          (click)=\"onTabTypeSelect(tabType.type)\"\n        >\n          {{ tabType.title | translate }}\n\n          <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$2.IconService }, { type: TabService }], propDecorators: { documentDefinitionName: [{
                 type: Input
             }], open: [{
                 type: Input
@@ -1658,7 +2002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1705,13 +2049,13 @@ class DossierManagementEditTabModalComponent {
         }
         this.closeModalEvent.emit({ ...this.tab, name, contentKey });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementEditTabModalComponent, deps: [{ token: i2$1.FormBuilder }, { token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementEditTabModalComponent, selector: "valtimo-dossier-management-edit-tab-modal", inputs: { open: "open", tab: "tab" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal *ngIf=\"form\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        'dossierManagement.tabManagement.editModal.title'\n          | translate: {name: tab?.name ?? 'dossier.tabs.' + tab.key | translate}\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent>\n    <valtimo-tab-form\n      [configuredContentKeys]=\"configuredKeysForEdit\"\n      [tabType]=\"tab?.type\"\n    ></valtimo-tab-form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"editTab()\">\n      {{ 'dossierManagement.tabManagement.editModal.updateTab' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i4.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i4.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i4.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i4.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i4.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TabFormComponent, selector: "valtimo-tab-form", inputs: ["tabType"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementEditTabModalComponent, deps: [{ token: i1$3.FormBuilder }, { token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementEditTabModalComponent, selector: "valtimo-dossier-management-edit-tab-modal", inputs: { open: "open", tab: "tab" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal *ngIf=\"form\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        'dossierManagement.tabManagement.editModal.title'\n          | translate: {name: tab?.name ?? 'dossier.tabs.' + tab.key | translate}\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent>\n    <valtimo-tab-form\n      [configuredContentKeys]=\"configuredKeysForEdit\"\n      [tabType]=\"tab?.type\"\n    ></valtimo-tab-form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"editTab()\">\n      {{ 'dossierManagement.tabManagement.editModal.updateTab' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: TabFormComponent, selector: "valtimo-tab-form", inputs: ["tabType"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementEditTabModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementEditTabModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-edit-tab-modal', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal *ngIf=\"form\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        'dossierManagement.tabManagement.editModal.title'\n          | translate: {name: tab?.name ?? 'dossier.tabs.' + tab.key | translate}\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent>\n    <valtimo-tab-form\n      [configuredContentKeys]=\"configuredKeysForEdit\"\n      [tabType]=\"tab?.type\"\n    ></valtimo-tab-form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"editTab()\">\n      {{ 'dossierManagement.tabManagement.editModal.updateTab' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n" }]
-        }], ctorParameters: function () { return [{ type: i2$1.FormBuilder }, { type: TabService }]; }, propDecorators: { open: [{
+            args: [{ selector: 'valtimo-dossier-management-edit-tab-modal', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal valtimoCdsModal *ngIf=\"form\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        'dossierManagement.tabManagement.editModal.title'\n          | translate: {name: tab?.name ?? 'dossier.tabs.' + tab.key | translate}\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent>\n    <valtimo-tab-form\n      [configuredContentKeys]=\"configuredKeysForEdit\"\n      [tabType]=\"tab?.type\"\n    ></valtimo-tab-form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"editTab()\">\n      {{ 'dossierManagement.tabManagement.editModal.updateTab' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: TabService }], propDecorators: { open: [{
                 type: Input
             }], tab: [{
                 type: Input
@@ -1720,7 +2064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1854,13 +2198,13 @@ class DossierManagementTabsComponent {
         temp[index1] = temp.splice(index2, 1, temp[index1])[0];
         return temp;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i4.IconService }, { token: TabManagementService }, { token: TabService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementTabsComponent, selector: "valtimo-dossier-management-tabs", inputs: { documentDefinitionName: "documentDefinitionName" }, viewQueries: [{ propertyName: "tabContentColumnTemplate", first: true, predicate: ["tabContentColumn"], descendants: true }, { propertyName: "tabTypeColumnTemplate", first: true, predicate: ["tabTypeColumn"], descendants: true }, { propertyName: "moveButtonsTemplate", first: true, predicate: ["moveButtonsTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  *ngIf=\"{fields: fields$ | async, loading: loading$ | async, tabs: tabs$ | async} as obs\"\n  [actionItems]=\"actionItems\"\n  [items]=\"obs.tabs\"\n  [fields]=\"obs.fields\"\n  [header]=\"false\"\n  [loading]=\"obs.loading\"\n  [movingRowsEnabled]=\"true\"\n  (rowClicked)=\"onRowClicked($event)\"\n  (moveRow)=\"onMoveRowClick($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addTabButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addTabButton\"\n    [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n    [title]=\"'dossier.tabs.noResults' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #tabTypeColumn let-data=\"data\">\n  {{\n    isTranslated('dossierManagement.tabType.' + data.item.type)\n      ? ('dossierManagement.tabType.' + data.item.type | translate)\n      : data.item.type\n  }}\n</ng-template>\n\n<ng-template #tabContentColumn let-data=\"data\">\n  {{\n    isTranslated('dossier.tabs.' + data.item.contentKey)\n      ? ('dossier.tabs.' + data.item.contentKey | translate)\n      : data.item.contentKey\n  }}\n</ng-template>\n\n<ng-template #addTabButton>\n  <button cdsButton=\"primary\" (click)=\"openAddTabModal()\">\n    {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-dossier-management-add-tab-modal\n  *ngIf=\"openAddModal$ | async\"\n  [documentDefinitionName]=\"documentDefinitionName\"\n  [open]=\"openAddModal$ | async\"\n  (closeModalEvent)=\"onCloseAddModalEvent($event)\"\n></valtimo-dossier-management-add-tab-modal>\n\n<valtimo-dossier-management-edit-tab-modal\n  *ngIf=\"openEditModal$ | async\"\n  [tab]=\"tab$ | async\"\n  (closeModalEvent)=\"onCloseEditModalEvent($event)\"\n  [open]=\"openEditModal$ | async\"\n></valtimo-dossier-management-edit-tab-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.tabManagement.deleteModal.description\"\n  [outputOnConfirm]=\"deleteRowKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dossierManagement.tabManagement.deleteModal.title\"\n  (confirmEvent)=\"onConfirmEvent($event)\"\n></valtimo-confirmation-modal>\n", styles: [".valtimo-dossier-management-tabs__actions{width:1px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i7.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent", "cancelEvent"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DossierManagementAddTabModalComponent, selector: "valtimo-dossier-management-add-tab-modal", inputs: ["documentDefinitionName", "open"], outputs: ["closeModalEvent"] }, { kind: "component", type: DossierManagementEditTabModalComponent, selector: "valtimo-dossier-management-edit-tab-modal", inputs: ["open", "tab"], outputs: ["closeModalEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.IconService }, { token: TabManagementService }, { token: TabService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementTabsComponent, selector: "valtimo-dossier-management-tabs", inputs: { documentDefinitionName: "documentDefinitionName" }, viewQueries: [{ propertyName: "tabContentColumnTemplate", first: true, predicate: ["tabContentColumn"], descendants: true }, { propertyName: "tabTypeColumnTemplate", first: true, predicate: ["tabTypeColumn"], descendants: true }, { propertyName: "moveButtonsTemplate", first: true, predicate: ["moveButtonsTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  *ngIf=\"{fields: fields$ | async, loading: loading$ | async, tabs: tabs$ | async} as obs\"\n  [actionItems]=\"actionItems\"\n  [items]=\"obs.tabs\"\n  [fields]=\"obs.fields\"\n  [header]=\"false\"\n  [loading]=\"obs.loading\"\n  [movingRowsEnabled]=\"true\"\n  (rowClicked)=\"onRowClicked($event)\"\n  (moveRow)=\"onMoveRowClick($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addTabButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addTabButton\"\n    [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n    [title]=\"'dossier.tabs.noResults' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #tabTypeColumn let-data=\"data\">\n  {{\n    isTranslated('dossierManagement.tabType.' + data.item.type)\n      ? ('dossierManagement.tabType.' + data.item.type | translate)\n      : data.item.type\n  }}\n</ng-template>\n\n<ng-template #tabContentColumn let-data=\"data\">\n  {{\n    isTranslated('dossier.tabs.' + data.item.contentKey)\n      ? ('dossier.tabs.' + data.item.contentKey | translate)\n      : data.item.contentKey\n  }}\n</ng-template>\n\n<ng-template #addTabButton>\n  <button cdsButton=\"primary\" (click)=\"openAddTabModal()\">\n    {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-dossier-management-add-tab-modal\n  *ngIf=\"openAddModal$ | async\"\n  [documentDefinitionName]=\"documentDefinitionName\"\n  [open]=\"openAddModal$ | async\"\n  (closeModalEvent)=\"onCloseAddModalEvent($event)\"\n></valtimo-dossier-management-add-tab-modal>\n\n<valtimo-dossier-management-edit-tab-modal\n  *ngIf=\"openEditModal$ | async\"\n  [tab]=\"tab$ | async\"\n  (closeModalEvent)=\"onCloseEditModalEvent($event)\"\n  [open]=\"openEditModal$ | async\"\n></valtimo-dossier-management-edit-tab-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.tabManagement.deleteModal.description\"\n  [outputOnConfirm]=\"deleteRowKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dossierManagement.tabManagement.deleteModal.title\"\n  (confirmEvent)=\"onConfirmEvent($event)\"\n></valtimo-confirmation-modal>\n", styles: [".valtimo-dossier-management-tabs__actions{width:1px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i5.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i5.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: i5.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DossierManagementAddTabModalComponent, selector: "valtimo-dossier-management-add-tab-modal", inputs: ["documentDefinitionName", "open"], outputs: ["closeModalEvent"] }, { kind: "component", type: DossierManagementEditTabModalComponent, selector: "valtimo-dossier-management-edit-tab-modal", inputs: ["open", "tab"], outputs: ["closeModalEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  *ngIf=\"{fields: fields$ | async, loading: loading$ | async, tabs: tabs$ | async} as obs\"\n  [actionItems]=\"actionItems\"\n  [items]=\"obs.tabs\"\n  [fields]=\"obs.fields\"\n  [header]=\"false\"\n  [loading]=\"obs.loading\"\n  [movingRowsEnabled]=\"true\"\n  (rowClicked)=\"onRowClicked($event)\"\n  (moveRow)=\"onMoveRowClick($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addTabButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addTabButton\"\n    [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n    [title]=\"'dossier.tabs.noResults' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #tabTypeColumn let-data=\"data\">\n  {{\n    isTranslated('dossierManagement.tabType.' + data.item.type)\n      ? ('dossierManagement.tabType.' + data.item.type | translate)\n      : data.item.type\n  }}\n</ng-template>\n\n<ng-template #tabContentColumn let-data=\"data\">\n  {{\n    isTranslated('dossier.tabs.' + data.item.contentKey)\n      ? ('dossier.tabs.' + data.item.contentKey | translate)\n      : data.item.contentKey\n  }}\n</ng-template>\n\n<ng-template #addTabButton>\n  <button cdsButton=\"primary\" (click)=\"openAddTabModal()\">\n    {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-dossier-management-add-tab-modal\n  *ngIf=\"openAddModal$ | async\"\n  [documentDefinitionName]=\"documentDefinitionName\"\n  [open]=\"openAddModal$ | async\"\n  (closeModalEvent)=\"onCloseAddModalEvent($event)\"\n></valtimo-dossier-management-add-tab-modal>\n\n<valtimo-dossier-management-edit-tab-modal\n  *ngIf=\"openEditModal$ | async\"\n  [tab]=\"tab$ | async\"\n  (closeModalEvent)=\"onCloseEditModalEvent($event)\"\n  [open]=\"openEditModal$ | async\"\n></valtimo-dossier-management-edit-tab-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.tabManagement.deleteModal.description\"\n  [outputOnConfirm]=\"deleteRowKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dossierManagement.tabManagement.deleteModal.title\"\n  (confirmEvent)=\"onConfirmEvent($event)\"\n></valtimo-confirmation-modal>\n", styles: [".valtimo-dossier-management-tabs__actions{width:1px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i4.IconService }, { type: TabManagementService }, { type: TabService }, { type: i3.TranslateService }]; }, propDecorators: { tabContentColumnTemplate: [{
+            args: [{ selector: 'valtimo-dossier-management-tabs', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  *ngIf=\"{fields: fields$ | async, loading: loading$ | async, tabs: tabs$ | async} as obs\"\n  [actionItems]=\"actionItems\"\n  [items]=\"obs.tabs\"\n  [fields]=\"obs.fields\"\n  [header]=\"false\"\n  [loading]=\"obs.loading\"\n  [movingRowsEnabled]=\"true\"\n  (rowClicked)=\"onRowClicked($event)\"\n  (moveRow)=\"onMoveRowClick($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <ng-container [ngTemplateOutlet]=\"addTabButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addTabButton\"\n    [description]=\"'dossier.tabs.noResultsDescription' | translate\"\n    [title]=\"'dossier.tabs.noResults' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #tabTypeColumn let-data=\"data\">\n  {{\n    isTranslated('dossierManagement.tabType.' + data.item.type)\n      ? ('dossierManagement.tabType.' + data.item.type | translate)\n      : data.item.type\n  }}\n</ng-template>\n\n<ng-template #tabContentColumn let-data=\"data\">\n  {{\n    isTranslated('dossier.tabs.' + data.item.contentKey)\n      ? ('dossier.tabs.' + data.item.contentKey | translate)\n      : data.item.contentKey\n  }}\n</ng-template>\n\n<ng-template #addTabButton>\n  <button cdsButton=\"primary\" (click)=\"openAddTabModal()\">\n    {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-dossier-management-add-tab-modal\n  *ngIf=\"openAddModal$ | async\"\n  [documentDefinitionName]=\"documentDefinitionName\"\n  [open]=\"openAddModal$ | async\"\n  (closeModalEvent)=\"onCloseAddModalEvent($event)\"\n></valtimo-dossier-management-add-tab-modal>\n\n<valtimo-dossier-management-edit-tab-modal\n  *ngIf=\"openEditModal$ | async\"\n  [tab]=\"tab$ | async\"\n  (closeModalEvent)=\"onCloseEditModalEvent($event)\"\n  [open]=\"openEditModal$ | async\"\n></valtimo-dossier-management-edit-tab-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.tabManagement.deleteModal.description\"\n  [outputOnConfirm]=\"deleteRowKey$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"dossierManagement.tabManagement.deleteModal.title\"\n  (confirmEvent)=\"onConfirmEvent($event)\"\n></valtimo-confirmation-modal>\n", styles: [".valtimo-dossier-management-tabs__actions{width:1px}\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: i0.ChangeDetectorRef }, { type: i2$2.IconService }, { type: TabManagementService }, { type: TabService }, { type: i3.TranslateService }], propDecorators: { tabContentColumnTemplate: [{
                 type: ViewChild,
                 args: ['tabContentColumn']
             }], tabTypeColumnTemplate: [{
@@ -1874,7 +2218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1888,44 +2232,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierManagementRemoveModalComponent {
-    constructor(documentService, toasterService, router, translateService, menuService) {
+class DossierManagementProcessesComponent {
+    constructor(documentService, iconService, dossierDetailService, route, notificationService, translateService) {
         this.documentService = documentService;
-        this.toasterService = toasterService;
-        this.router = router;
+        this.iconService = iconService;
+        this.dossierDetailService = dossierDetailService;
+        this.route = route;
+        this.notificationService = notificationService;
         this.translateService = translateService;
-        this.menuService = menuService;
-        this.documentDefinition = null;
-        this.errors = [];
-    }
-    openModal(documentDefinition) {
-        this.documentDefinition = documentDefinition;
-        this.modal.show();
+        this._refresh$ = new BehaviorSubject(null);
+        this.processDocumentDefinitions$ = this._refresh$.pipe(switchMap(() => combineLatest([this.route.paramMap, this.dossierDetailService.selectedVersionNumber$])), switchMap(([params, version]) => this.documentService.findProcessDocumentDefinitionsByVersion(params.get('name') ?? '', version)));
+        this.documentDefinition$ = this.route.paramMap.pipe(switchMap((params) => this.documentService.getDocumentDefinitionForManagement(params.get('name') ?? '')));
+        this.actionItems = [
+            {
+                label: 'dossierManagement.unlinkProcess',
+                callback: this.deleteProcessDocumentDefinition.bind(this),
+                type: 'danger',
+            },
+        ];
+        this.fields = [
+            {
+                key: 'processName',
+                label: 'interface.name',
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'canInitializeDocument',
+                label: 'processCaseConnection.processCreatesCase',
+                viewType: ViewType.BOOLEAN,
+            },
+            {
+                key: 'startableByUser',
+                label: 'processCaseConnection.startableWithinCase',
+                viewType: ViewType.BOOLEAN,
+            },
+        ];
+        this.iconService.register(Link16);
     }
-    removeDocumentDefinition() {
+    deleteProcessDocumentDefinition(processDocumentDefinition) {
         this.documentService
-            .removeDocumentDefinitionForManagement(this.documentDefinition.id.name)
-            .subscribe(() => {
-            this.menuService.reload();
-            this.router.navigate(['/dossier-management']);
-            this.toasterService.success(this.translateService.instant('remove-document-definition-success'));
-        }, (result) => {
-            this.errors = result.errors;
+            .deleteProcessDocumentDefinition({
+            documentDefinitionName: processDocumentDefinition.id.documentDefinitionId.name,
+            processDefinitionKey: processDocumentDefinition.id.processDefinitionKey,
+            documentDefinitionVersion: processDocumentDefinition.id.documentDefinitionId.version,
+            canInitializeDocument: processDocumentDefinition.canInitializeDocument,
+            startableByUser: processDocumentDefinition.startableByUser,
+        })
+            .subscribe({
+            next: () => {
+                this.notificationService.showNotification({
+                    type: 'success',
+                    title: this.translateService.instant('dossierManagement.processLinkNotification.unlinkSuccess'),
+                    duration: 5000,
+                });
+                this.loadProcessDocumentDefinitions();
+            },
+            error: () => {
+                this.notificationService.showNotification({
+                    type: 'error',
+                    title: this.translateService.instant('dossierManagement.processLinkNotification.unlinkFailure'),
+                    duration: 5000,
+                });
+            },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRemoveModalComponent, deps: [{ token: i1.DocumentService }, { token: i2$2.ToastrService }, { token: i2.Router }, { token: i3.TranslateService }, { token: i7.MenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal", viewQueries: [{ propertyName: "modal", first: true, predicate: ["documentDefinitionRemoveModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #documentDefinitionRemoveModal\n  elementId=\"documentDefinitionRemoveModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"{{ 'Remove document definition' | translate }}\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <div class=\"alert alert-contrast alert-danger mt-2\" role=\"alert\">\n      <div class=\"icon\"><span class=\"mdi mdi-alert-triangle\"></span></div>\n      <div\n        class=\"message\"\n        [innerHTML]=\"'remove-document-definition-confirmation' | translate\"\n      ></div>\n    </div>\n    <div *ngIf=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n      <ol>\n        <li *ngFor=\"let error of errors\">\n          {{ error }}\n        </li>\n      </ol>\n    </div>\n  </div>\n  <div footer>\n    <button (click)=\"removeDocumentDefinition()\" class=\"btn btn-primary\" data-dismiss=\"modal\">\n      {{ 'remove-document-definition-confirmation-button' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\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: "component", type: i7.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    loadProcessDocumentDefinitions() {
+        this._refresh$.next(null);
+    }
+    openDossierConnectModal(documentDefinition) {
+        this._dossierConnectModal.openModal(documentDefinition);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementProcessesComponent, deps: [{ token: i1.DocumentService }, { token: i2$2.IconService }, { token: DossierDetailService }, { token: i2.ActivatedRoute }, { token: i2$2.NotificationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementProcessesComponent, selector: "valtimo-dossier-management-processes", providers: [NotificationService], viewQueries: [{ propertyName: "_dossierConnectModal", first: true, predicate: ["dossierConnectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    documentDefinition: documentDefinition$ | async,\n    processDocumentDefinitions: processDocumentDefinitions$ | async\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.processDocumentDefinitions\"\n    [loading]=\"!obs.processDocumentDefinitions\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n  >\n    <ng-container carbonToolbarContent [ngTemplateOutlet]=\"connectProcessButton\"></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'processCaseConnection.noProcessesTitle' | translate\"\n      [description]=\"'processCaseConnection.noProcessesDescription' | translate\"\n      [action]=\"connectProcessButton\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #connectProcessButton>\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"!obs.processDocumentDefinitions\"\n      (click)=\"openDossierConnectModal(obs.documentDefinition)\"\n    >\n      {{ 'dossierManagement.processLink' | translate }}\n\n      <svg cdsIcon=\"link\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-dossier-management-connect-modal\n  #dossierConnectModal\n  (reloadProcessDocumentDefinitions)=\"loadProcessDocumentDefinitions()\"\n></valtimo-dossier-management-connect-modal>\n", styles: ["::ng-deep .cds--tab-content{padding:0!important}::ng-deep .dossier-management-processes_actions{width:1px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i5.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: i5.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DossierManagementConnectModalComponent, selector: "valtimo-dossier-management-connect-modal", outputs: ["reloadProcessDocumentDefinitions"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRemoveModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementProcessesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-remove-modal', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal\n  #documentDefinitionRemoveModal\n  elementId=\"documentDefinitionRemoveModal\"\n  [title]=\"documentDefinition ? documentDefinition.schema.title : 'Document definition'\"\n  subtitle=\"{{ 'Remove document definition' | translate }}\"\n  showFooter=\"true\"\n>\n  <div body *ngIf=\"documentDefinition\">\n    <div class=\"alert alert-contrast alert-danger mt-2\" role=\"alert\">\n      <div class=\"icon\"><span class=\"mdi mdi-alert-triangle\"></span></div>\n      <div\n        class=\"message\"\n        [innerHTML]=\"'remove-document-definition-confirmation' | translate\"\n      ></div>\n    </div>\n    <div *ngIf=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n      <ol>\n        <li *ngFor=\"let error of errors\">\n          {{ error }}\n        </li>\n      </ol>\n    </div>\n  </div>\n  <div footer>\n    <button (click)=\"removeDocumentDefinition()\" class=\"btn btn-primary\" data-dismiss=\"modal\">\n      {{ 'remove-document-definition-confirmation-button' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2$2.ToastrService }, { type: i2.Router }, { type: i3.TranslateService }, { type: i7.MenuService }]; }, propDecorators: { modal: [{
+            args: [{ selector: 'valtimo-dossier-management-processes', providers: [NotificationService], 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    documentDefinition: documentDefinition$ | async,\n    processDocumentDefinitions: processDocumentDefinitions$ | async\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.processDocumentDefinitions\"\n    [loading]=\"!obs.processDocumentDefinitions\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n  >\n    <ng-container carbonToolbarContent [ngTemplateOutlet]=\"connectProcessButton\"></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'processCaseConnection.noProcessesTitle' | translate\"\n      [description]=\"'processCaseConnection.noProcessesDescription' | translate\"\n      [action]=\"connectProcessButton\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #connectProcessButton>\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"!obs.processDocumentDefinitions\"\n      (click)=\"openDossierConnectModal(obs.documentDefinition)\"\n    >\n      {{ 'dossierManagement.processLink' | translate }}\n\n      <svg cdsIcon=\"link\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-dossier-management-connect-modal\n  #dossierConnectModal\n  (reloadProcessDocumentDefinitions)=\"loadProcessDocumentDefinitions()\"\n></valtimo-dossier-management-connect-modal>\n", styles: ["::ng-deep .cds--tab-content{padding:0!important}::ng-deep .dossier-management-processes_actions{width:1px}\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.DocumentService }, { type: i2$2.IconService }, { type: DossierDetailService }, { type: i2.ActivatedRoute }, { type: i2$2.NotificationService }, { type: i3.TranslateService }], propDecorators: { _dossierConnectModal: [{
                 type: ViewChild,
-                args: ['documentDefinitionRemoveModal']
+                args: ['dossierConnectModal']
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1939,172 +2328,265 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierManagementDetailContainerActionsComponent {
-    set documentDefinitionName(value) {
-        this.dossierDetailService.setSelectedDocumentDefinitionName(value);
+class DossierManagementStatusModalComponent {
+    set type(value) {
+        this._type$.next(value);
+        if (value === 'closed') {
+            setTimeout(() => {
+                this._typeAnimationDelay$.next(value);
+            }, CARBON_CONSTANTS.modalAnimationMs);
+        }
+        else {
+            this._typeAnimationDelay$.next(value);
+        }
     }
-    constructor(document, notificationService, dossierExportService, translateService, documentService, dossierDetailService) {
-        this.document = document;
-        this.notificationService = notificationService;
-        this.dossierExportService = dossierExportService;
+    set prefill(value) {
+        this._prefillStatus.next(value);
+    }
+    get visibleInCaseListByDefault() {
+        return this.statusFormGroup?.get('visibleInCaseListByDefault');
+    }
+    get key() {
+        return this.statusFormGroup?.get('key');
+    }
+    get title() {
+        return this.statusFormGroup?.get('title');
+    }
+    get color() {
+        return this.statusFormGroup?.get('color');
+    }
+    get invalid() {
+        return !!this.statusFormGroup?.invalid;
+    }
+    get pristine() {
+        return !!this.statusFormGroup?.pristine;
+    }
+    constructor(fb, iconService, caseStatusService, translateService) {
+        this.fb = fb;
+        this.iconService = iconService;
+        this.caseStatusService = caseStatusService;
         this.translateService = translateService;
-        this.documentService = documentService;
-        this.dossierDetailService = dossierDetailService;
-        this.documentDefinitionTitle = '';
-        this.CARBON_THEME = 'g10';
-        this.exporting$ = new BehaviorSubject(false);
-        this.selectedVersionNumber$ = this.dossierDetailService.selectedVersionNumber$;
-        this._documentDefinitionName$ = this.dossierDetailService.selectedDocumentDefinitionName$;
-        this.loadingVersion$ = new BehaviorSubject(true);
-        this._documentDefinitionVersions$ = this._documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.documentService.getDocumentDefinitionVersions(documentDefinitionName)), tap$1(res => {
-            this.dossierDetailService.setSelectedVersionNumber(this.findLargestInArray(res.versions));
-            this.loadingVersion$.next(false);
+        this.closeModalEvent = new EventEmitter();
+        this._type$ = new BehaviorSubject(undefined);
+        this._typeAnimationDelay$ = new BehaviorSubject(undefined);
+        this._prefillStatus = new BehaviorSubject(undefined);
+        this.statusFormGroup = this.fb.group({
+            title: this.fb.control('', Validators.required),
+            key: this.fb.control('', [
+                Validators.required,
+                Validators.minLength(3),
+                this.uniqueKeyValidator,
+            ]),
+            visibleInCaseListByDefault: this.fb.control(true, Validators.required),
+            color: this.fb.control('', Validators.required),
+        });
+        this.isEdit$ = combineLatest([this._typeAnimationDelay$, this._prefillStatus]).pipe(tap$1(([type, prefillStatus]) => {
+            if (type === 'edit' && prefillStatus)
+                this.prefillForm(prefillStatus);
+        }), map(([type]) => type === 'edit'));
+        this.isAdd$ = this._typeAnimationDelay$.pipe(map(type => type === 'add'), tap$1(isAdd => {
+            if (isAdd)
+                this.resetForm();
         }));
-        this.versionListItems$ = combineLatest([
-            this._documentDefinitionVersions$,
-            this.selectedVersionNumber$,
+        this.isClosed$ = this._type$.pipe(map(type => type === 'closed'));
+        this.disabled$ = new BehaviorSubject(false);
+        this.COLORS = [
+            InternalCaseStatusColor.Red,
+            InternalCaseStatusColor.Magenta,
+            InternalCaseStatusColor.Purple,
+            InternalCaseStatusColor.Blue,
+            InternalCaseStatusColor.Teal,
+            InternalCaseStatusColor.Green,
+            InternalCaseStatusColor.Cyan,
+            InternalCaseStatusColor.Gray,
+            InternalCaseStatusColor.CoolGray,
+            InternalCaseStatusColor.WarmGray,
+            InternalCaseStatusColor.HighContrast,
+            InternalCaseStatusColor.Outline,
+        ];
+        this._selectedColor$ = new BehaviorSubject(undefined);
+        this.colorListItems$ = combineLatest([
+            this._selectedColor$,
             this.translateService.stream('key'),
-        ]).pipe(map(([versionsRes, selectVersionNumber]) => versionsRes?.versions?.map(version => ({
-            content: `${this.translateService.instant('dossierManagement.version')}${version}`,
-            selected: selectVersionNumber === version,
-            id: `${version}`,
-        })) || []));
-        this.selectedDocumentDefinition$ = this.dossierDetailService.documentDefinition$;
-        this.selectedDocumentDefinitionIsReadOnly$ = this.dossierDetailService.selectedDocumentDefinitionIsReadOnly$;
+        ]).pipe(map(([selectedColor]) => this.COLORS.map(color => ({
+            selected: color === selectedColor,
+            content: this.translateService.instant('interface.tagType.' +
+                InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(color)),
+            color,
+            tagType: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(color),
+        }))));
+        this.editingKey$ = new BehaviorSubject(false);
+        this._originalStatusKey$ = new BehaviorSubject('');
+        this._subscriptions = new Subscription();
+        this.iconService.registerAll([Edit16]);
     }
-    export() {
-        this.closeCurrentNotification();
-        this._currentNotification = this.notificationService.showNotification({
-            type: 'info',
-            title: '',
-            showClose: false,
-            template: this._exportMessageTemplateRef,
+    ngOnInit() {
+        this.openAutoKeySubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onClose() {
+        this.close();
+    }
+    toggleCheckedChange(checked) {
+        this.statusFormGroup.patchValue({
+            visibleInCaseListByDefault: checked,
         });
-        let selectedVersionNumber;
-        this.startExporting();
-        combineLatest([this.selectedVersionNumber$, this._documentDefinitionName$])
-            .pipe(take$1(1), tap$1(([selectedVersion]) => (selectedVersionNumber = selectedVersion)), switchMap(([selectedVersion, documentDefinitionName]) => this.dossierExportService.exportDocumentDefinition(documentDefinitionName, selectedVersion)))
+        this.statusFormGroup.markAsDirty();
+    }
+    addStatus() {
+        this.disable();
+        this.caseStatusService
+            .saveInternalCaseStatus(this.documentDefinitionName, this.getFormValue())
             .subscribe({
-            next: response => {
-                this.closeCurrentNotification();
-                this._currentNotification = this.notificationService.showNotification({
-                    type: 'success',
-                    title: this.translateService.instant('dossierManagement.exportSuccessTitle'),
-                    duration: 5000,
-                });
-                this.downloadZip(response, selectedVersionNumber);
-                this.stopExporting();
+            next: () => {
+                this.enable();
+                this.closeAndRefresh();
             },
             error: () => {
-                this.closeCurrentNotification();
-                this._currentNotification = this.notificationService.showNotification({
-                    type: 'error',
-                    title: this.translateService.instant('dossierManagement.exportErrorTitle'),
-                    message: this.translateService.instant('dossierManagement.exportErrorMessage'),
-                    duration: 5000,
-                });
-                this.stopExporting();
+                this.enable(false);
             },
         });
     }
-    setVersion(version) {
-        this.dossierDetailService.setSelectedVersionNumber(Number(version.item.id));
-    }
-    openDossierRemoveModal() {
-        this.selectedDocumentDefinition$.pipe(take$1(1)).subscribe(definition => {
-            this._dossierRemoveModal.openModal(definition);
+    editStatus() {
+        this.disable();
+        this._originalStatusKey$
+            .pipe(take(1), switchMap(originalStatusKey => this.caseStatusService.updateInternalCaseStatus(this.documentDefinitionName, originalStatusKey, this.getFormValue())))
+            .subscribe({
+            next: () => {
+                this.enable();
+                this.closeAndRefresh();
+            },
+            error: () => {
+                this.enable(false);
+            },
         });
     }
-    startExporting() {
-        this.exporting$.next(true);
+    editKeyButtonClick() {
+        this.editingKey$.next(true);
     }
-    stopExporting() {
-        this.exporting$.next(false);
+    colorDropdownChange(event) {
+        const newColor = event?.item?.color;
+        if (newColor) {
+            this._selectedColor$.next(newColor);
+            this.statusFormGroup.patchValue({ color: newColor });
+            this.statusFormGroup.markAsDirty();
+        }
     }
-    downloadZip(response, versionNumber) {
-        const link = document.createElement('a');
-        const contentDisposition = response.headers.get('content-disposition');
-        const splitContentDisposition = contentDisposition.split('filename=');
-        const fileName = splitContentDisposition.length > 1 && splitContentDisposition[1];
-        link.href = this.document.defaultView.URL.createObjectURL(response.body);
-        link.download = fileName || `${this.documentDefinitionName}_${versionNumber}.valtimo.zip`;
-        link.target = '_blank';
-        link.click();
-        link.remove();
+    prefillForm(prefillStatus) {
+        this._originalStatusKey$.next(prefillStatus.key);
+        this.statusFormGroup.patchValue({
+            key: prefillStatus.key,
+            title: prefillStatus.title,
+            visibleInCaseListByDefault: prefillStatus.visibleInCaseListByDefault,
+            color: prefillStatus.color,
+        });
+        this._selectedColor$.next(prefillStatus.color);
+        this.statusFormGroup.markAsPristine();
+        this.resetEditingKey();
     }
-    closeCurrentNotification() {
-        if (this._currentNotification) {
-            this.notificationService.close(this._currentNotification);
+    resetForm() {
+        this.statusFormGroup.patchValue({
+            key: '',
+            title: '',
+            visibleInCaseListByDefault: true,
+            color: InternalCaseStatusColor.Blue,
+        });
+        this._selectedColor$.next(InternalCaseStatusColor.Blue);
+        this.statusFormGroup.markAsPristine();
+        this.resetEditingKey();
+    }
+    resetEditingKey() {
+        this.editingKey$.next(false);
+    }
+    openAutoKeySubscription() {
+        this._subscriptions.add(combineLatest([this.isAdd$, this.title.valueChanges, this.editingKey$]).subscribe(([isAdd, titleValue, editingKey]) => {
+            if (isAdd && !editingKey) {
+                if (titleValue) {
+                    this.statusFormGroup.patchValue({ key: this.getUniqueKey(titleValue) });
+                }
+                else {
+                    this.clearKey();
+                }
+            }
+        }));
+    }
+    getUniqueKey(title) {
+        const dashCaseKey = `${title}`
+            .toLowerCase()
+            .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
+            .replace(/_[-_]+/g, '_')
+            .replace(/^[^a-z]+/g, '');
+        const usedKeys = this.usedKeys;
+        if (!usedKeys.includes(dashCaseKey)) {
+            return dashCaseKey;
         }
+        return this.getUniqueKeyWithNumber(dashCaseKey, usedKeys);
+    }
+    getUniqueKeyWithNumber(dashCaseKey, usedKeys) {
+        const numbersFromCurrentKey = (dashCaseKey.match(/^\d+|\d+\b|\d+(?=\w)/g) || []).map((numberValue) => +numberValue);
+        const lastNumberFromCurrentKey = numbersFromCurrentKey.length > 0 && numbersFromCurrentKey[numbersFromCurrentKey.length - 1];
+        const newKey = lastNumberFromCurrentKey
+            ? `${dashCaseKey.replace(`${lastNumberFromCurrentKey}`, `${lastNumberFromCurrentKey + 1}`)}`
+            : `${dashCaseKey}-1`;
+        if (usedKeys.includes(newKey)) {
+            return this.getUniqueKeyWithNumber(newKey, usedKeys);
+        }
+        return newKey;
     }
-    findLargestInArray(array) {
-        return array.reduce(function (a, b) {
-            return a > b ? a : b;
-        });
+    clearKey() {
+        this.statusFormGroup.patchValue({ key: '' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailContainerActionsComponent, deps: [{ token: DOCUMENT }, { token: i4.NotificationService }, { token: DossierExportService }, { token: i3.TranslateService }, { token: i1.DocumentService }, { token: DossierDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementDetailContainerActionsComponent, selector: "valtimo-dossier-management-detail-container-actions", inputs: { documentDefinitionTitle: "documentDefinitionTitle", documentDefinitionName: "documentDefinitionName" }, providers: [NotificationService], viewQueries: [{ propertyName: "_exportMessageTemplateRef", first: true, predicate: ["exportingMessage"], descendants: true }, { propertyName: "_dossierRemoveModal", first: true, predicate: ["dossierRemoveModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"dossier-actions\"\n  *ngIf=\"{\n  exporting: exporting$ | async,\n  loadingVersion: loadingVersion$ | async,\n  versionListItems: versionListItems$ | async,\n  selectedDocumentDefinition: selectedDocumentDefinition$ | async,\n  selectedDocumentDefinitionIsReadOnly: selectedDocumentDefinitionIsReadOnly$ | async\n  } as obs\"\n>\n  <div class=\"dossier-metadata\">\n    <ng-container *ngTemplateOutlet=\"versionSelection;context:{obs:obs}\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"readOnly;context:{obs:obs}\"></ng-container>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"exportMenu;context:{obs:obs}\"></ng-container>\n</div>\n\n<ng-template #versionSelection let-obs=\"obs\">\n  <cds-dropdown\n    class=\"version-selection\"\n    [disabled]=\"obs.loadingVersion || obs.versionListItems.length === 1\"\n    [attr.data-carbon-theme]=\"CARBON_THEME\"\n    [skeleton]=\"obs.loadingVersion\"\n    (selected)=\"setVersion($event)\"\n  >\n    <cds-dropdown-list [items]=\"obs.versionListItems\"></cds-dropdown-list>\n  </cds-dropdown>\n</ng-template>\n\n<ng-template #exportMenu let-obs=\"obs\">\n  <cds-overflow-menu\n    valtimoCdsOverflowButton\n    [width]=\"250\"\n    [customTrigger]=\"customTrigger\"\n    [offset]=\"{y: 48, x: 37}\"\n    class=\"overflow-button\"\n    [attr.data-carbon-theme]=\"CARBON_THEME\"\n  >\n    <cds-overflow-menu-option\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"export() \"\n      [attr.data-carbon-theme]=\"CARBON_THEME\"\n      >{{ 'dossierManagement.export' | translate: {value: documentDefinitionTitle}\n      }}</cds-overflow-menu-option\n    >\n\n    <cds-overflow-menu-option\n      *ngIf=\"obs.selectedDocumentDefinition && !obs.selectedDocumentDefinition.readOnly\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"openDossierRemoveModal() \"\n      [attr.data-carbon-theme]=\"CARBON_THEME\"\n      >{{ 'Remove document definition' | translate}}</cds-overflow-menu-option\n    >\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #customTrigger>\n  <button cdsButton=\"tertiary\" [attr.data-carbon-theme]=\"CARBON_THEME\">\n    {{ 'dossierManagement.more' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #exportingMessage>\n  <div class=\"exporting-message\">\n    <span class=\"cds--inline-notification__title\"\n      >{{'dossierManagement.preparingDownload' | translate}}</span\n    >\n\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #readOnly let-obs=\"obs\">\n  <cds-tag *ngIf=\"obs.selectedDocumentDefinitionIsReadOnly\" type=\"blue\"\n    >{{'dossierManagement.readonly' | translate}}</cds-tag\n  >\n</ng-template>\n\n<valtimo-dossier-management-remove-modal\n  #dossierRemoveModal\n></valtimo-dossier-management-remove-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.exporting-message{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}.dossier-metadata{display:flex;gap:24px;align-items:flex-end}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i4.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i4.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i4.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i7.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: i4.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailContainerActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-dossier-management-detail-container-actions', changeDetection: ChangeDetectionStrategy.OnPush, providers: [NotificationService], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"dossier-actions\"\n  *ngIf=\"{\n  exporting: exporting$ | async,\n  loadingVersion: loadingVersion$ | async,\n  versionListItems: versionListItems$ | async,\n  selectedDocumentDefinition: selectedDocumentDefinition$ | async,\n  selectedDocumentDefinitionIsReadOnly: selectedDocumentDefinitionIsReadOnly$ | async\n  } as obs\"\n>\n  <div class=\"dossier-metadata\">\n    <ng-container *ngTemplateOutlet=\"versionSelection;context:{obs:obs}\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"readOnly;context:{obs:obs}\"></ng-container>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"exportMenu;context:{obs:obs}\"></ng-container>\n</div>\n\n<ng-template #versionSelection let-obs=\"obs\">\n  <cds-dropdown\n    class=\"version-selection\"\n    [disabled]=\"obs.loadingVersion || obs.versionListItems.length === 1\"\n    [attr.data-carbon-theme]=\"CARBON_THEME\"\n    [skeleton]=\"obs.loadingVersion\"\n    (selected)=\"setVersion($event)\"\n  >\n    <cds-dropdown-list [items]=\"obs.versionListItems\"></cds-dropdown-list>\n  </cds-dropdown>\n</ng-template>\n\n<ng-template #exportMenu let-obs=\"obs\">\n  <cds-overflow-menu\n    valtimoCdsOverflowButton\n    [width]=\"250\"\n    [customTrigger]=\"customTrigger\"\n    [offset]=\"{y: 48, x: 37}\"\n    class=\"overflow-button\"\n    [attr.data-carbon-theme]=\"CARBON_THEME\"\n  >\n    <cds-overflow-menu-option\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"export() \"\n      [attr.data-carbon-theme]=\"CARBON_THEME\"\n      >{{ 'dossierManagement.export' | translate: {value: documentDefinitionTitle}\n      }}</cds-overflow-menu-option\n    >\n\n    <cds-overflow-menu-option\n      *ngIf=\"obs.selectedDocumentDefinition && !obs.selectedDocumentDefinition.readOnly\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"openDossierRemoveModal() \"\n      [attr.data-carbon-theme]=\"CARBON_THEME\"\n      >{{ 'Remove document definition' | translate}}</cds-overflow-menu-option\n    >\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #customTrigger>\n  <button cdsButton=\"tertiary\" [attr.data-carbon-theme]=\"CARBON_THEME\">\n    {{ 'dossierManagement.more' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #exportingMessage>\n  <div class=\"exporting-message\">\n    <span class=\"cds--inline-notification__title\"\n      >{{'dossierManagement.preparingDownload' | translate}}</span\n    >\n\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #readOnly let-obs=\"obs\">\n  <cds-tag *ngIf=\"obs.selectedDocumentDefinitionIsReadOnly\" type=\"blue\"\n    >{{'dossierManagement.readonly' | translate}}</cds-tag\n  >\n</ng-template>\n\n<valtimo-dossier-management-remove-modal\n  #dossierRemoveModal\n></valtimo-dossier-management-remove-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.exporting-message{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}.dossier-metadata{display:flex;gap:24px;align-items:flex-end}\n"] }]
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i4.NotificationService }, { type: DossierExportService }, { type: i3.TranslateService }, { type: i1.DocumentService }, { type: DossierDetailService }]; }, propDecorators: { _exportMessageTemplateRef: [{
-                type: ViewChild,
-                args: ['exportingMessage']
-            }], _dossierRemoveModal: [{
-                type: ViewChild,
-                args: ['dossierRemoveModal']
-            }], documentDefinitionTitle: [{
-                type: Input
-            }], documentDefinitionName: [{
-                type: Input
-            }] } });
-
-/*
- * Copyright 2015-2023 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 DossierManagementDocumentDefinitionComponent {
-    constructor(dossierDetailService) {
-        this.dossierDetailService = dossierDetailService;
-        this.loadingDocumentDefinition$ = this.dossierDetailService.loadingDocumentDefinition$;
-        this.documentDefinitionModel$ = this.dossierDetailService.documentDefinitionModel$;
-        this.selectedDocumentDefinition$ = this.dossierDetailService.documentDefinition$;
+    uniqueKeyValidator() {
+        return (control) => combineLatest([this.isEdit$, control.valueChanges]).pipe(map(([isEdit, keyValue]) => this.usedKeys?.every((key) => key !== keyValue) || isEdit
+            ? null
+            : { uniqueKey: { value: control.value } }));
     }
-    downloadDefinition() {
-        this.selectedDocumentDefinition$.pipe(take$1(1)).subscribe(definition => {
-            const dataString = 'data:text/json;charset=utf-8,' +
-                encodeURIComponent(JSON.stringify(definition.schema, null, 2));
-            const downloadAnchorElement = document.getElementById('downloadAnchorElement');
-            downloadAnchorElement.setAttribute('href', dataString);
-            downloadAnchorElement.setAttribute('download', `${definition.id.name}-v${definition.id.version}.json`);
-            downloadAnchorElement.click();
-        });
+    disable() {
+        this.disabled$.next(true);
+        this.statusFormGroup.disable();
+    }
+    enable(delay = true) {
+        setTimeout(() => {
+            this.disabled$.next(false);
+            this.statusFormGroup.enable();
+        }, delay ? CARBON_CONSTANTS.modalAnimationMs : 0);
+    }
+    close() {
+        this.closeModalEvent.emit('close');
+    }
+    closeAndRefresh() {
+        this.closeModalEvent.emit('closeAndRefresh');
+    }
+    getFormValue() {
+        return {
+            key: this.key.value,
+            title: this.title.value,
+            visibleInCaseListByDefault: this.visibleInCaseListByDefault.value,
+            color: this.color.value,
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDocumentDefinitionComponent, deps: [{ token: DossierDetailService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementDocumentDefinitionComponent, selector: "valtimo-dossier-management-document-definition", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{documentDefinitionModel: documentDefinitionModel$ | async, loadingDocumentDefinition: loadingDocumentDefinition$ | async, selectedDocumentDefinition:selectedDocumentDefinition$ | async} as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <button\n      cdsButton=\"primary\"\n      (click)=\"downloadDefinition()\"\n      [disabled]=\"obs.loadingDocumentDefinition || !obs.selectedDocumentDefinition\"\n    >\n      <svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n      {{ 'Download document definition'| translate }}\n    </button>\n  </div>\n\n  <valtimo-editor\n    *ngIf=\"!obs.loadingDocumentDefinition; else loading\"\n    [model]=\"obs.documentDefinitionModel\"\n    [disabled]=\"true\"\n    heightStyle=\"calc(100vh - 316px)\"\n  >\n  </valtimo-editor>\n\n  <a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.loading-container{display:flex;width:100%;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i7.EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementStatusModalComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2$2.IconService }, { token: i1.CaseStatusService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementStatusModalComponent, selector: "valtimo-dossier-management-status-modal", inputs: { type: "type", prefill: "prefill", usedKeys: "usedKeys", documentDefinitionName: "documentDefinitionName" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  valtimoCdsModal\n  *ngIf=\"{\n    isAdd: isAdd$ | async,\n    isEdit: isEdit$ | async,\n    isClosed: isClosed$ | async,\n    editingKey: editingKey$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n  [open]=\"!obs.isClosed\"\n  size=\"sm\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ obs.isAdd ? ('dossierManagement.statuses.add' | translate) : '' }}\n      {{ obs.isEdit ? ('dossierManagement.statuses.edit' | translate) : '' }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <ng-container *ngTemplateOutlet=\"statusForm; context: {obs: obs}\"></ng-container>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n  </cds-modal-footer>\n</cds-modal>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"dropdown-color-tag\">\n    <cds-tag *ngIf=\"item && item.content\" class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n      {{ 'interface.tagType.' + item?.tagType | translate }}\n    </cds-tag>\n  </div>\n</ng-template>\n\n<ng-template #statusForm let-obs=\"obs\">\n  <form [formGroup]=\"statusFormGroup\" class=\"status-form\">\n    <cds-label>\n      {{ 'dossierManagement.statuses.columns.title' | translate }}\n\n      <input cdsText formControlName=\"title\" [attr.modal-primary-focus]=\"true\" />\n    </cds-label>\n\n    <cds-label>\n      {{ 'dossierManagement.statuses.columns.key' | translate }}\n\n      <div class=\"edit-key-input\">\n        <input\n          cdsText\n          formControlName=\"key\"\n          [readOnly]=\"!obs.editingKey\"\n          [placeholder]=\"\n            obs.isAdd && !obs.editingKey\n              ? ('dossierManagement.statuses.keyAutoGenerated' | translate)\n              : ''\n          \"\n        />\n\n        <cds-icon-button\n          *ngIf=\"!obs.editingKey && obs.isAdd\"\n          [disabled]=\"obs.disabled\"\n          (click)=\"editKeyButtonClick()\"\n          kind=\"secondary\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </cds-label>\n\n    <div class=\"horizontal-inputs\">\n      <cds-label>\n        {{ 'dossierManagement.statuses.columns.color' | translate }}\n\n        <cds-dropdown\n          [id]=\"'status-color-dropdown'\"\n          [appendInline]=\"false\"\n          [placeholder]=\"'dossierManagement.statuses.colorPlaceholder' | translate\"\n          (selected)=\"colorDropdownChange($event)\"\n        >\n          <cds-dropdown-list [items]=\"colorListItems$\" [listTpl]=\"colorDropdownItemTemplate\">\n          </cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n\n      <cds-toggle\n        [label]=\"'dossierManagement.statuses.visibleTitle' | translate\"\n        [onText]=\"'dossierManagement.statuses.visible' | translate\"\n        [offText]=\"'dossierManagement.statuses.invisible' | translate\"\n        [disabled]=\"obs.disabled\"\n        [checked]=\"visibleInCaseListByDefault?.value\"\n        (checkedChange)=\"toggleCheckedChange($event)\"\n      ></cds-toggle>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"obs.isAdd\"\n    cdsButton=\"primary\"\n    [disabled]=\"invalid || pristine || obs.disabled\"\n    (click)=\"addStatus()\"\n  >\n    {{ 'interface.add' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"obs.isEdit\"\n    cdsButton=\"primary\"\n    [disabled]=\"invalid || pristine || obs.disabled\"\n    (click)=\"editStatus()\"\n  >\n    {{ 'interface.save' | translate }}\n  </button>\n</ng-template>\n", styles: [".status-form{display:flex;flex-direction:column;gap:16px}.edit-key-input{height:40px;display:flex;width:100%;flex-direction:row;gap:16px;align-items:flex-end}.edit-key-input input:read-only{color:var(--cds-text-disabled)}::ng-deep .horizontal-inputs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}::ng-deep .horizontal-inputs .cds--label{width:100%;display:flex;flex-direction:column;gap:8px}::ng-deep .dropdown-color-tag .cds--tag{margin-top:-4px;margin-left:2px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.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: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i5.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i2$2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDocumentDefinitionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementStatusModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-document-definition', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{documentDefinitionModel: documentDefinitionModel$ | async, loadingDocumentDefinition: loadingDocumentDefinition$ | async, selectedDocumentDefinition:selectedDocumentDefinition$ | async} as obs\"\n>\n  <div class=\"cds--toolbar-content\">\n    <button\n      cdsButton=\"primary\"\n      (click)=\"downloadDefinition()\"\n      [disabled]=\"obs.loadingDocumentDefinition || !obs.selectedDocumentDefinition\"\n    >\n      <svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n      {{ 'Download document definition'| translate }}\n    </button>\n  </div>\n\n  <valtimo-editor\n    *ngIf=\"!obs.loadingDocumentDefinition; else loading\"\n    [model]=\"obs.documentDefinitionModel\"\n    [disabled]=\"true\"\n    heightStyle=\"calc(100vh - 316px)\"\n  >\n  </valtimo-editor>\n\n  <a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.loading-container{display:flex;width:100%;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: DossierDetailService }]; } });
+            args: [{ selector: 'valtimo-dossier-management-status-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  valtimoCdsModal\n  *ngIf=\"{\n    isAdd: isAdd$ | async,\n    isEdit: isEdit$ | async,\n    isClosed: isClosed$ | async,\n    editingKey: editingKey$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n  [open]=\"!obs.isClosed\"\n  size=\"sm\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ obs.isAdd ? ('dossierManagement.statuses.add' | translate) : '' }}\n      {{ obs.isEdit ? ('dossierManagement.statuses.edit' | translate) : '' }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <ng-container *ngTemplateOutlet=\"statusForm; context: {obs: obs}\"></ng-container>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n  </cds-modal-footer>\n</cds-modal>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"dropdown-color-tag\">\n    <cds-tag *ngIf=\"item && item.content\" class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n      {{ 'interface.tagType.' + item?.tagType | translate }}\n    </cds-tag>\n  </div>\n</ng-template>\n\n<ng-template #statusForm let-obs=\"obs\">\n  <form [formGroup]=\"statusFormGroup\" class=\"status-form\">\n    <cds-label>\n      {{ 'dossierManagement.statuses.columns.title' | translate }}\n\n      <input cdsText formControlName=\"title\" [attr.modal-primary-focus]=\"true\" />\n    </cds-label>\n\n    <cds-label>\n      {{ 'dossierManagement.statuses.columns.key' | translate }}\n\n      <div class=\"edit-key-input\">\n        <input\n          cdsText\n          formControlName=\"key\"\n          [readOnly]=\"!obs.editingKey\"\n          [placeholder]=\"\n            obs.isAdd && !obs.editingKey\n              ? ('dossierManagement.statuses.keyAutoGenerated' | translate)\n              : ''\n          \"\n        />\n\n        <cds-icon-button\n          *ngIf=\"!obs.editingKey && obs.isAdd\"\n          [disabled]=\"obs.disabled\"\n          (click)=\"editKeyButtonClick()\"\n          kind=\"secondary\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </cds-label>\n\n    <div class=\"horizontal-inputs\">\n      <cds-label>\n        {{ 'dossierManagement.statuses.columns.color' | translate }}\n\n        <cds-dropdown\n          [id]=\"'status-color-dropdown'\"\n          [appendInline]=\"false\"\n          [placeholder]=\"'dossierManagement.statuses.colorPlaceholder' | translate\"\n          (selected)=\"colorDropdownChange($event)\"\n        >\n          <cds-dropdown-list [items]=\"colorListItems$\" [listTpl]=\"colorDropdownItemTemplate\">\n          </cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n\n      <cds-toggle\n        [label]=\"'dossierManagement.statuses.visibleTitle' | translate\"\n        [onText]=\"'dossierManagement.statuses.visible' | translate\"\n        [offText]=\"'dossierManagement.statuses.invisible' | translate\"\n        [disabled]=\"obs.disabled\"\n        [checked]=\"visibleInCaseListByDefault?.value\"\n        (checkedChange)=\"toggleCheckedChange($event)\"\n      ></cds-toggle>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"obs.isAdd\"\n    cdsButton=\"primary\"\n    [disabled]=\"invalid || pristine || obs.disabled\"\n    (click)=\"addStatus()\"\n  >\n    {{ 'interface.add' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"obs.isEdit\"\n    cdsButton=\"primary\"\n    [disabled]=\"invalid || pristine || obs.disabled\"\n    (click)=\"editStatus()\"\n  >\n    {{ 'interface.save' | translate }}\n  </button>\n</ng-template>\n", styles: [".status-form{display:flex;flex-direction:column;gap:16px}.edit-key-input{height:40px;display:flex;width:100%;flex-direction:row;gap:16px;align-items:flex-end}.edit-key-input input:read-only{color:var(--cds-text-disabled)}::ng-deep .horizontal-inputs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}::ng-deep .horizontal-inputs .cds--label{width:100%;display:flex;flex-direction:column;gap:8px}::ng-deep .dropdown-color-tag .cds--tag{margin-top:-4px;margin-left:2px}\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$3.FormBuilder }, { type: i2$2.IconService }, { type: i1.CaseStatusService }, { type: i3.TranslateService }], propDecorators: { type: [{
+                type: Input
+            }], prefill: [{
+                type: Input
+            }], usedKeys: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], closeModalEvent: [{
+                type: Output
+            }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2118,89 +2600,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierManagementProcessesComponent {
-    constructor(documentService, iconService, dossierDetailService, route, notificationService, translateService) {
-        this.documentService = documentService;
-        this.iconService = iconService;
-        this.dossierDetailService = dossierDetailService;
+class DossierManagementStatusesComponent {
+    get documentDefinitionName$() {
+        return this._documentDefinitionName$;
+    }
+    constructor(caseStatusService, route) {
+        this.caseStatusService = caseStatusService;
         this.route = route;
-        this.notificationService = notificationService;
-        this.translateService = translateService;
-        this._refresh$ = new BehaviorSubject(null);
-        this.processDocumentDefinitions$ = this._refresh$.pipe(switchMap(() => combineLatest([this.route.paramMap, this.dossierDetailService.selectedVersionNumber$])), switchMap(([params, version]) => this.documentService.findProcessDocumentDefinitionsByVersion(params.get('name') ?? '', version)));
-        this.documentDefinition$ = this.route.paramMap.pipe(switchMap((params) => this.documentService.getDocumentDefinitionForManagement(params.get('name') ?? '')));
-        this.actionItems = [
+        this._reload$ = new BehaviorSubject(null);
+        this._documentDefinitionName$ = this.route.params.pipe(map(params => params?.name), filter(docDefName => !!docDefName));
+        this.loading$ = new BehaviorSubject(true);
+        this.usedKeys$ = new BehaviorSubject([]);
+        this._documentStatuses = [];
+        this.documentStatuses$ = combineLatest([
+            this._documentDefinitionName$,
+            this._reload$,
+        ]).pipe(tap$1(([_, reload]) => {
+            if (reload === null) {
+                this.loading$.next(true);
+            }
+        }), switchMap(([documentDefinitionName]) => this.caseStatusService.getInternalCaseStatusesManagement(documentDefinitionName)), map(statuses => statuses.map(status => ({
+            ...status,
+            tagType: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(status.color),
+        }))), tap$1(statuses => {
+            this._documentStatuses = statuses;
+            this.usedKeys$.next(statuses.map(status => status.key));
+            this.loading$.next(false);
+        }));
+        this.fields$ = new BehaviorSubject([]);
+        this.ACTION_ITEMS = [
             {
-                label: 'dossierManagement.unlinkProcess',
-                callback: this.deleteProcessDocumentDefinition.bind(this),
+                label: 'interface.edit',
+                callback: this.openEditModal.bind(this),
+                type: 'normal',
+            },
+            {
+                label: 'interface.delete',
+                callback: this.openDeleteModal.bind(this),
                 type: 'danger',
             },
         ];
-        this.fields = [
+        this.statusModalType$ = new BehaviorSubject('closed');
+        this.prefillStatus$ = new BehaviorSubject(undefined);
+        this.statusToDelete$ = new BehaviorSubject(undefined);
+        this.showDeleteModal$ = new Subject();
+    }
+    ngAfterViewInit() {
+        this.initFields();
+    }
+    openDeleteModal(status) {
+        this.statusToDelete$.next(status);
+        this.showDeleteModal$.next(true);
+    }
+    openEditModal(status) {
+        this.prefillStatus$.next(status);
+        this.statusModalType$.next('edit');
+    }
+    openAddModal() {
+        this.statusModalType$.next('add');
+    }
+    closeModal(closeModalEvent) {
+        if (closeModalEvent === 'closeAndRefresh') {
+            this.reload();
+        }
+        this.statusModalType$.next('closed');
+    }
+    confirmDeleteStatus(status) {
+        this.documentDefinitionName$
+            .pipe(switchMap(documentDefinitionName => this.caseStatusService.deleteInternalCaseStatus(documentDefinitionName, status.key)))
+            .subscribe(() => {
+            this.reload();
+        });
+    }
+    onMoveRowClick(event) {
+        const { direction, index } = event;
+        const orderedStatuses = direction === MoveRowDirection.UP
+            ? this.swapStatuses(this._documentStatuses, index - 1, index)
+            : this.swapStatuses(this._documentStatuses, index, index + 1);
+        this.documentDefinitionName$
+            .pipe(switchMap(documentDefinitionName => this.caseStatusService.updateInternalCaseStatuses(documentDefinitionName, orderedStatuses)))
+            .subscribe(() => {
+            this.reload(true);
+        });
+    }
+    reload(noAnimation = false) {
+        this._reload$.next(noAnimation ? 'noAnimation' : null);
+    }
+    swapStatuses(statuses, index1, index2) {
+        const temp = [...statuses];
+        temp[index1] = temp.splice(index2, 1, temp[index1])[0];
+        return temp;
+    }
+    initFields() {
+        this.fields$.next([
             {
-                key: 'processName',
-                label: 'interface.name',
+                key: 'title',
+                label: 'dossierManagement.statuses.columns.title',
                 viewType: ViewType.TEXT,
             },
             {
-                key: 'canInitializeDocument',
-                label: 'processCaseConnection.processCreatesCase',
-                viewType: ViewType.BOOLEAN,
+                key: 'key',
+                label: 'dossierManagement.statuses.columns.key',
+                viewType: ViewType.TEXT,
             },
             {
-                key: 'startableByUser',
-                label: 'processCaseConnection.startableWithinCase',
+                key: 'visibleInCaseListByDefault',
+                label: 'dossierManagement.statuses.columns.visible',
                 viewType: ViewType.BOOLEAN,
             },
-        ];
-        this.iconService.register(Link16);
-    }
-    deleteProcessDocumentDefinition(processDocumentDefinition) {
-        this.documentService
-            .deleteProcessDocumentDefinition({
-            documentDefinitionName: processDocumentDefinition.id.documentDefinitionId.name,
-            processDefinitionKey: processDocumentDefinition.id.processDefinitionKey,
-            documentDefinitionVersion: processDocumentDefinition.id.documentDefinitionId.version,
-            canInitializeDocument: processDocumentDefinition.canInitializeDocument,
-            startableByUser: processDocumentDefinition.startableByUser,
-        })
-            .subscribe({
-            next: () => {
-                this.notificationService.showNotification({
-                    type: 'success',
-                    title: this.translateService.instant('dossierManagement.processLinkNotification.unlinkSuccess'),
-                    duration: 5000,
-                });
-                this.loadProcessDocumentDefinitions();
-            },
-            error: () => {
-                this.notificationService.showNotification({
-                    type: 'error',
-                    title: this.translateService.instant('dossierManagement.processLinkNotification.unlinkFailure'),
-                    duration: 5000,
-                });
+            {
+                viewType: ViewType.TEMPLATE,
+                template: this.colorColumnTemplate,
+                key: 'color',
+                label: 'dossierManagement.statuses.columns.color',
             },
-        });
-    }
-    loadProcessDocumentDefinitions() {
-        this._refresh$.next(null);
-    }
-    openDossierConnectModal(documentDefinition) {
-        this._dossierConnectModal.openModal(documentDefinition);
+        ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementProcessesComponent, deps: [{ token: i1.DocumentService }, { token: i4.IconService }, { token: DossierDetailService }, { token: i2.ActivatedRoute }, { token: i4.NotificationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementProcessesComponent, selector: "valtimo-dossier-management-processes", providers: [NotificationService], viewQueries: [{ propertyName: "_dossierConnectModal", first: true, predicate: ["dossierConnectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    documentDefinition: documentDefinition$ | async,\n    processDocumentDefinitions: processDocumentDefinitions$ | async\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.processDocumentDefinitions\"\n    [loading]=\"!obs.processDocumentDefinitions\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n  >\n    <ng-container carbonToolbarContent [ngTemplateOutlet]=\"connectProcessButton\"></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'processCaseConnection.noProcesses' | translate\"\n      [action]=\"connectProcessButton\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #connectProcessButton>\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"!obs.processDocumentDefinitions\"\n      (click)=\"openDossierConnectModal(obs.documentDefinition)\"\n    >\n      {{ 'dossierManagement.processLink' | translate }}\n\n      <svg cdsIcon=\"link\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-dossier-management-connect-modal\n  #dossierConnectModal\n  (reloadProcessDocumentDefinitions)=\"loadProcessDocumentDefinitions()\"\n></valtimo-dossier-management-connect-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */::ng-deep .cds--tab-content{padding:0!important}::ng-deep .dossier-management-processes_actions{width:1px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DossierManagementConnectModalComponent, selector: "valtimo-dossier-management-connect-modal", outputs: ["reloadProcessDocumentDefinitions"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementStatusesComponent, deps: [{ token: i1.CaseStatusService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementStatusesComponent, selector: "valtimo-dossier-management-statuses", viewQueries: [{ propertyName: "colorColumnTemplate", first: true, predicate: ["colorColumnTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentStatuses: documentStatuses$ | async\n  } as obs\"\n  [items]=\"obs.documentStatuses\"\n  [fields]=\"fields$ | async\"\n  [header]=\"false\"\n  [loading]=\"obs.loading\"\n  [movingRowsEnabled]=\"true\"\n  [actionItems]=\"ACTION_ITEMS\"\n  (rowClicked)=\"openEditModal($event)\"\n  (moveRow)=\"onMoveRowClick($event)\"\n>\n  <ng-container\n    carbonToolbarContent\n    *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n  ></ng-container>\n\n  <valtimo-no-results\n          [description]=\"'dossierManagement.statuses.noResults.description' | translate\"\n          [title]=\"'dossierManagement.statuses.noResults.title' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-dossier-management-status-modal\n  [type]=\"statusModalType$ | async\"\n  [prefill]=\"prefillStatus$ | async\"\n  [usedKeys]=\"usedKeys$ | async\"\n  [documentDefinitionName]=\"documentDefinitionName$ | async\"\n  (closeModalEvent)=\"closeModal($event)\"\n></valtimo-dossier-management-status-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"statusToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"confirmDeleteStatus($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"dossier-management-search-fields__buttons\">\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"openAddModal()\">\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n      {{ 'dossierManagement.statuses.add' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #colorColumnTemplate let-data=\"data\">\n  <cds-tag class=\"cds-tag--no-margin\" [type]=\"data?.item?.tagType\">\n    {{ 'interface.tagType.' + data?.item?.tagType | translate }}\n  </cds-tag>\n</ng-template>\n", styles: ["::ng-deep .cds-tag--no-margin{margin:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i5.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i5.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: i5.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: DossierManagementStatusModalComponent, selector: "valtimo-dossier-management-status-modal", inputs: ["type", "prefill", "usedKeys", "documentDefinitionName"], outputs: ["closeModalEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementProcessesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementStatusesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-processes', providers: [NotificationService], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    documentDefinition: documentDefinition$ | async,\n    processDocumentDefinitions: processDocumentDefinitions$ | async\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [items]=\"obs.processDocumentDefinitions\"\n    [loading]=\"!obs.processDocumentDefinitions\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n  >\n    <ng-container carbonToolbarContent [ngTemplateOutlet]=\"connectProcessButton\"></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'processCaseConnection.noProcesses' | translate\"\n      [action]=\"connectProcessButton\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #connectProcessButton>\n    <button\n      cdsButton=\"primary\"\n      [disabled]=\"!obs.processDocumentDefinitions\"\n      (click)=\"openDossierConnectModal(obs.documentDefinition)\"\n    >\n      {{ 'dossierManagement.processLink' | translate }}\n\n      <svg cdsIcon=\"link\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n\n<valtimo-dossier-management-connect-modal\n  #dossierConnectModal\n  (reloadProcessDocumentDefinitions)=\"loadProcessDocumentDefinitions()\"\n></valtimo-dossier-management-connect-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */::ng-deep .cds--tab-content{padding:0!important}::ng-deep .dossier-management-processes_actions{width:1px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i4.IconService }, { type: DossierDetailService }, { type: i2.ActivatedRoute }, { type: i4.NotificationService }, { type: i3.TranslateService }]; }, propDecorators: { _dossierConnectModal: [{
+            args: [{ selector: 'valtimo-dossier-management-statuses', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentStatuses: documentStatuses$ | async\n  } as obs\"\n  [items]=\"obs.documentStatuses\"\n  [fields]=\"fields$ | async\"\n  [header]=\"false\"\n  [loading]=\"obs.loading\"\n  [movingRowsEnabled]=\"true\"\n  [actionItems]=\"ACTION_ITEMS\"\n  (rowClicked)=\"openEditModal($event)\"\n  (moveRow)=\"onMoveRowClick($event)\"\n>\n  <ng-container\n    carbonToolbarContent\n    *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n  ></ng-container>\n\n  <valtimo-no-results\n          [description]=\"'dossierManagement.statuses.noResults.description' | translate\"\n          [title]=\"'dossierManagement.statuses.noResults.title' | translate\"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<valtimo-dossier-management-status-modal\n  [type]=\"statusModalType$ | async\"\n  [prefill]=\"prefillStatus$ | async\"\n  [usedKeys]=\"usedKeys$ | async\"\n  [documentDefinitionName]=\"documentDefinitionName$ | async\"\n  (closeModalEvent)=\"closeModal($event)\"\n></valtimo-dossier-management-status-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"statusToDelete$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"confirmDeleteStatus($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"dossier-management-search-fields__buttons\">\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"openAddModal()\">\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n      {{ 'dossierManagement.statuses.add' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #colorColumnTemplate let-data=\"data\">\n  <cds-tag class=\"cds-tag--no-margin\" [type]=\"data?.item?.tagType\">\n    {{ 'interface.tagType.' + data?.item?.tagType | translate }}\n  </cds-tag>\n</ng-template>\n", styles: ["::ng-deep .cds-tag--no-margin{margin:0}\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.CaseStatusService }, { type: i2.ActivatedRoute }], propDecorators: { colorColumnTemplate: [{
                 type: ViewChild,
-                args: ['dossierConnectModal']
+                args: ['colorColumnTemplate']
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2214,43 +2742,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierManagementDetailContainerComponent {
-    constructor(documentService, route, configService, tabService, pageTitleService) {
-        this.documentService = documentService;
+class DossierManagementDetailContainerComponent extends PendingChangesComponent {
+    constructor(dossierDetailService, route, configService, tabService, pageTitleService) {
+        super();
+        this.dossierDetailService = dossierDetailService;
         this.route = route;
         this.configService = configService;
         this.tabService = tabService;
         this.pageTitleService = pageTitleService;
+        this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''), filter(docDefName => !!docDefName));
+        this.currentTab$ = this.tabService.currentTab$.pipe(tap$1((currentTab) => {
+            this._activeTab = currentTab;
+        }));
+        this.injectedCaseManagementTabs$ = this.tabService.injectedCaseManagementTabs$;
         this.documentDefinitionTitle$ = this.pageTitleService.customPageTitle$;
         this.CARBON_THEME = 'g10';
+        this.DossierManagementTabs = Object.values(TabEnum);
         this.TabEnum = TabEnum;
-        this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''), filter(docDefName => !!docDefName));
-        this.documentDefinition$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.documentService.getDocumentDefinitionForManagement(documentDefinitionName)));
+        this._subscriptions = new Subscription();
         const featureToggles = this.configService.config.featureToggles;
-        this.caseListColumn = !!featureToggles?.caseListColumn;
-        this.tabManagementEnabled = !!featureToggles?.enableTabManagement;
+        this.caseListColumn = featureToggles?.caseListColumn ?? true;
+        this.tabManagementEnabled = featureToggles?.enableTabManagement ?? true;
     }
     ngOnInit() {
-        this.openCurrentTabSubscription();
-    }
-    displayBodyComponent(tab) {
-        this.tabService.currentTab = tab;
+        this.openActiveVersionSubscription();
     }
-    openCurrentTabSubscription() {
-        this.tabSubscription = this.tabService.currentTab$.subscribe(value => (this.currentTab = value));
+    ngAfterViewInit() {
+        this.customModal = this._documentDefinitionTab.cancelModal;
+        this.openInjectedTabSubscription();
     }
     ngOnDestroy() {
         this.tabService.currentTab = TabEnum.DOCUMENT;
-        this.tabSubscription?.unsubscribe();
+        this._subscriptions.unsubscribe();
+        this.pageTitleService.enableReset();
+    }
+    displayBodyComponent(tab, isInjectedTab = false) {
+        if (this.pendingChanges) {
+            this.onCanDeactivate();
+        }
+        this.tabService.currentTab = tab;
+    }
+    onCancelRedirectEvent() {
+        this.onCustomCancel();
+        if (this._activeVersion) {
+            this.dossierDetailService.setPreviousSelectedVersionNumber(this._activeVersion);
+            this._activeVersion = null;
+            return;
+        }
+        if (!this.pendingTab) {
+            return;
+        }
+        this.tabService.currentTab = this.pendingTab;
+    }
+    onConfirmRedirectEvent() {
+        this.pendingTab = null;
+        this._activeVersion = null;
+        if (this._pendingVersion) {
+            this.dossierDetailService.setSelectedVersionNumber(this._pendingVersion);
+            this._pendingVersion = null;
+            this.dossierDetailService.setPreviousSelectedVersionNumber(null);
+        }
+        this.onCustomConfirm();
+    }
+    onPendingChangesUpdate(pendingChanges) {
+        this.pendingChanges = pendingChanges;
+        this.pendingTab = pendingChanges ? this._activeTab : null;
+    }
+    onVersionSet(version) {
+        if (this.pendingChanges) {
+            this.onCanDeactivate();
+            this._pendingVersion = version;
+            return;
+        }
+        this.dossierDetailService.setSelectedVersionNumber(version);
+    }
+    openActiveVersionSubscription() {
+        this._subscriptions.add(this.dossierDetailService.selectedVersionNumber$.subscribe((versionNumber) => {
+            this._activeVersion = versionNumber;
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailContainerComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: i1$2.ConfigService }, { token: TabService }, { token: i7.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementDetailContainerComponent, selector: "valtimo-dossier-management-detail-container", providers: [DossierDetailService], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"dossier-management-detail-container\">\n  <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n</div>\n\n<ng-template #tabs>\n  <cds-tabs\n    class=\"dossier-management-tabs\"\n    type=\"contained\"\n    [attr.data-carbon-theme]=\"CARBON_THEME\"\n  >\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.DOCUMENT} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.document' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.DOCUMENT)\"\n    >\n      <valtimo-dossier-management-document-definition\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-document-definition>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.CASE} as vars\"\n      class=\"no-padding-left-right main-content\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.cases' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.CASE)\"\n    >\n      <valtimo-dossier-management-detail *ngIf=\"vars.active\"></valtimo-dossier-management-detail>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.PROCESSES} as vars\"\n      class=\"no-padding-left-right main-content\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.processes' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.PROCESSES)\"\n    >\n      <valtimo-dossier-management-processes\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-processes>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.SEARCH} as vars\"\n      class=\"main-content no-padding-left-right no-padding-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.searchFields' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.SEARCH)\"\n    >\n      <valtimo-dossier-management-search-fields\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-search-fields>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.LIST} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.listColumns' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.LIST)\"\n    >\n      <valtimo-dossier-management-list-columns\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-list-columns>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.TABS} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.tabManagement' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.TABS)\"\n    >\n      <valtimo-dossier-management-tabs\n        *ngIf=\"vars.active\"\n        [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      ></valtimo-dossier-management-tabs>\n    </cds-tab>\n  </cds-tabs>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <valtimo-dossier-management-detail-container-actions\n      [documentDefinitionTitle]=\"documentDefinitionTitle$ | async\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n    ></valtimo-dossier-management-detail-container-actions>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .dossier-management-tabs .cds--tab-content{background-color:var(--cds-layer)}::ng-deep .dossier-management-tabs .cds--tab-content:focus{outline:none}::ng-deep .dossier-management-tabs .no-padding-left-right .cds--tab-content{padding-left:0;padding-right:0}::ng-deep .dossier-management-tabs .no-padding-top-bottom .cds--tab-content{padding-top:0;padding-bottom:0}::ng-deep .dossier-management-tabs .no-padding-bottom .cds--tab-content{padding-bottom:0}.tab-container{min-height:300px}.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid rgba(0,0,0,.125)}.dossier-title{margin-top:0;margin-bottom:7px}.dossier-management-detail-container{display:flex;flex-direction:column;width:100%}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i4.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i4.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail" }, { kind: "component", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", outputs: ["searchField"] }, { kind: "component", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns" }, { kind: "component", type: DossierManagementTabsComponent, selector: "valtimo-dossier-management-tabs", inputs: ["documentDefinitionName"] }, { kind: "component", type: DossierManagementDetailContainerActionsComponent, selector: "valtimo-dossier-management-detail-container-actions", inputs: ["documentDefinitionTitle", "documentDefinitionName"] }, { kind: "component", type: DossierManagementDocumentDefinitionComponent, selector: "valtimo-dossier-management-document-definition" }, { kind: "component", type: DossierManagementProcessesComponent, selector: "valtimo-dossier-management-processes" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    openInjectedTabSubscription() {
+        this._subscriptions.add(combineLatest([
+            this.currentTab$.pipe(distinctUntilChanged()),
+            this.injectedCaseManagementTabs$,
+        ]).subscribe(([currentTab, injectedCaseManagementTabs]) => {
+            const findInjectedTab = injectedCaseManagementTabs.find(injectedTab => injectedTab.translationKey === currentTab);
+            if (findInjectedTab && this._contentContainer) {
+                this._contentContainer.createComponent(findInjectedTab.component);
+            }
+            else {
+                this._contentContainer.clear();
+            }
+        }));
+    }
+    onCanDeactivate() {
+        this._documentDefinitionTab.onCanDeactivate();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementDetailContainerComponent, deps: [{ token: DossierDetailService }, { token: i2.ActivatedRoute }, { token: i2$1.ConfigService }, { token: TabService }, { token: i5.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DossierManagementDetailContainerComponent, selector: "valtimo-dossier-management-detail-container", providers: [DossierDetailService], viewQueries: [{ propertyName: "_contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_documentDefinitionTab", first: true, predicate: DossierManagementDocumentDefinitionComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    currentTab: currentTab$ | async,\n    injectedTabs: injectedCaseManagementTabs$ | async\n  } as obs\"\n  class=\"dossier-management-detail-container\"\n>\n  <valtimo-documenten-api></valtimo-documenten-api>\n  <cds-tabs\n    class=\"dossier-management-tabs\"\n    type=\"contained\"\n    [attr.data-carbon-theme]=\"CARBON_THEME\"\n  >\n    <cds-tab\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.DOCUMENT\"\n      [heading]=\"'dossierManagement.tabs.document' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.DOCUMENT)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"no-padding-left-right main-content\"\n      [active]=\"obs.currentTab === TabEnum.CASE\"\n      [heading]=\"'dossierManagement.tabs.cases' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.CASE)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"no-padding-left-right main-content\"\n      [active]=\"obs.currentTab === TabEnum.PROCESSES\"\n      [heading]=\"'dossierManagement.tabs.processes' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.PROCESSES)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"main-content no-padding-left-right no-padding-bottom\"\n      [active]=\"obs.currentTab === TabEnum.SEARCH\"\n      [heading]=\"'dossierManagement.tabs.searchFields' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.SEARCH)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"caseListColumn\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.LIST\"\n      [heading]=\"'dossierManagement.tabs.listColumns' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.LIST)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"tabManagementEnabled\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.TABS\"\n      [heading]=\"'dossierManagement.tabs.tabManagement' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.TABS)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"{active: obs.currentTab === TabEnum.STATUSES} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.statuses' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.STATUSES)\"\n    >\n      <valtimo-dossier-management-statuses\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-statuses>\n    </cds-tab>\n\n    @for (injectedTab of obs.injectedTabs; track injectedTab.translationKey) {\n      <cds-tab\n        class=\"no-padding-left-right no-padding-top-bottom\"\n        [active]=\"obs.currentTab === injectedTab.translationKey\"\n        [heading]=\"injectedTab.translationKey | translate\"\n        (selected)=\"displayBodyComponent(injectedTab.translationKey, true)\"\n      >\n      </cds-tab>\n    }\n  </cds-tabs>\n\n  <div class=\"dossier-management-detail-container__content\">\n    <ng-template #contentContainer></ng-template>\n\n    <valtimo-dossier-management-document-definition\n      *ngIf=\"\n        (obs.currentTab === TabEnum.DOCUMENT && !pendingChanges) || pendingTab === TabEnum.DOCUMENT\n      \"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      (pendingChangesUpdate)=\"onPendingChangesUpdate($event)\"\n      (cancelRedirect)=\"onCancelRedirectEvent()\"\n      (confirmRedirect)=\"onConfirmRedirectEvent()\"\n    ></valtimo-dossier-management-document-definition>\n\n    <valtimo-dossier-management-detail\n      *ngIf=\"(obs.currentTab === TabEnum.CASE && !pendingChanges) || pendingTab === TabEnum.CASE\"\n    ></valtimo-dossier-management-detail>\n\n    <valtimo-dossier-management-processes\n      *ngIf=\"\n        (obs.currentTab === TabEnum.PROCESSES && !pendingChanges) ||\n        pendingTab === TabEnum.PROCESSES\n      \"\n    ></valtimo-dossier-management-processes>\n\n    <valtimo-dossier-management-search-fields\n      *ngIf=\"\n        (obs.currentTab === TabEnum.SEARCH && !pendingChanges) || pendingTab === TabEnum.SEARCH\n      \"\n    ></valtimo-dossier-management-search-fields>\n\n    <valtimo-dossier-management-list-columns\n      *ngIf=\"(obs.currentTab === TabEnum.LIST && !pendingChanges) || pendingTab === TabEnum.LIST\"\n    ></valtimo-dossier-management-list-columns>\n\n    <valtimo-dossier-management-tabs\n      *ngIf=\"(obs.currentTab === TabEnum.TABS && !pendingChanges) || pendingTab === TabEnum.TABS\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n    ></valtimo-dossier-management-tabs>\n  </div>\n</div>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <valtimo-dossier-management-detail-container-actions\n      [documentDefinitionTitle]=\"documentDefinitionTitle$ | async\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      (versionSet)=\"onVersionSet($event)\"\n    ></valtimo-dossier-management-detail-container-actions>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .dossier-management-tabs .cds--tab-content{background-color:var(--cds-layer)}::ng-deep .dossier-management-tabs .cds--tab-content:focus{outline:none}::ng-deep .dossier-management-tabs .no-padding-left-right .cds--tab-content{padding-left:0;padding-right:0}::ng-deep .dossier-management-tabs .no-padding-top-bottom .cds--tab-content{padding-top:0;padding-bottom:0}::ng-deep .dossier-management-tabs .no-padding-bottom .cds--tab-content{padding-bottom:0}.tab-container{min-height:300px}.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid rgba(0,0,0,.125)}.dossier-title{margin-top:0;margin-bottom:7px}.dossier-management-detail-container{display:flex;flex-direction:column;width:100%}.dossier-management-detail-container__content{background:var(--cds-layer)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i2$2.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$2.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail" }, { kind: "component", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", outputs: ["searchField"] }, { kind: "component", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns" }, { kind: "component", type: DossierManagementTabsComponent, selector: "valtimo-dossier-management-tabs", inputs: ["documentDefinitionName"] }, { kind: "component", type: DossierManagementDetailContainerActionsComponent, selector: "valtimo-dossier-management-detail-container-actions", inputs: ["documentDefinitionTitle", "documentDefinitionName"], outputs: ["versionSet"] }, { kind: "component", type: DossierManagementDocumentDefinitionComponent, selector: "valtimo-dossier-management-document-definition", inputs: ["documentDefinitionName"], outputs: ["cancelRedirect", "confirmRedirect", "pendingChangesUpdate"] }, { kind: "component", type: DossierManagementProcessesComponent, selector: "valtimo-dossier-management-processes" }, { kind: "component", type: DossierManagementStatusesComponent, selector: "valtimo-dossier-management-statuses" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementDetailContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-detail-container', providers: [DossierDetailService], template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"dossier-management-detail-container\">\n  <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n</div>\n\n<ng-template #tabs>\n  <cds-tabs\n    class=\"dossier-management-tabs\"\n    type=\"contained\"\n    [attr.data-carbon-theme]=\"CARBON_THEME\"\n  >\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.DOCUMENT} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.document' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.DOCUMENT)\"\n    >\n      <valtimo-dossier-management-document-definition\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-document-definition>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.CASE} as vars\"\n      class=\"no-padding-left-right main-content\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.cases' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.CASE)\"\n    >\n      <valtimo-dossier-management-detail *ngIf=\"vars.active\"></valtimo-dossier-management-detail>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.PROCESSES} as vars\"\n      class=\"no-padding-left-right main-content\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.processes' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.PROCESSES)\"\n    >\n      <valtimo-dossier-management-processes\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-processes>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.SEARCH} as vars\"\n      class=\"main-content no-padding-left-right no-padding-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.searchFields' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.SEARCH)\"\n    >\n      <valtimo-dossier-management-search-fields\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-search-fields>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.LIST} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.listColumns' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.LIST)\"\n    >\n      <valtimo-dossier-management-list-columns\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-list-columns>\n    </cds-tab>\n    <cds-tab\n      *ngIf=\"{active: currentTab === TabEnum.TABS} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.tabManagement' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.TABS)\"\n    >\n      <valtimo-dossier-management-tabs\n        *ngIf=\"vars.active\"\n        [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      ></valtimo-dossier-management-tabs>\n    </cds-tab>\n  </cds-tabs>\n</ng-template>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <valtimo-dossier-management-detail-container-actions\n      [documentDefinitionTitle]=\"documentDefinitionTitle$ | async\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n    ></valtimo-dossier-management-detail-container-actions>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .dossier-management-tabs .cds--tab-content{background-color:var(--cds-layer)}::ng-deep .dossier-management-tabs .cds--tab-content:focus{outline:none}::ng-deep .dossier-management-tabs .no-padding-left-right .cds--tab-content{padding-left:0;padding-right:0}::ng-deep .dossier-management-tabs .no-padding-top-bottom .cds--tab-content{padding-top:0;padding-bottom:0}::ng-deep .dossier-management-tabs .no-padding-bottom .cds--tab-content{padding-bottom:0}.tab-container{min-height:300px}.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid rgba(0,0,0,.125)}.dossier-title{margin-top:0;margin-bottom:7px}.dossier-management-detail-container{display:flex;flex-direction:column;width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i1$2.ConfigService }, { type: TabService }, { type: i7.PageTitleService }]; } });
+            args: [{ selector: 'valtimo-dossier-management-detail-container', providers: [DossierDetailService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  *ngIf=\"{\n    currentTab: currentTab$ | async,\n    injectedTabs: injectedCaseManagementTabs$ | async\n  } as obs\"\n  class=\"dossier-management-detail-container\"\n>\n  <valtimo-documenten-api></valtimo-documenten-api>\n  <cds-tabs\n    class=\"dossier-management-tabs\"\n    type=\"contained\"\n    [attr.data-carbon-theme]=\"CARBON_THEME\"\n  >\n    <cds-tab\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.DOCUMENT\"\n      [heading]=\"'dossierManagement.tabs.document' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.DOCUMENT)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"no-padding-left-right main-content\"\n      [active]=\"obs.currentTab === TabEnum.CASE\"\n      [heading]=\"'dossierManagement.tabs.cases' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.CASE)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"no-padding-left-right main-content\"\n      [active]=\"obs.currentTab === TabEnum.PROCESSES\"\n      [heading]=\"'dossierManagement.tabs.processes' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.PROCESSES)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"main-content no-padding-left-right no-padding-bottom\"\n      [active]=\"obs.currentTab === TabEnum.SEARCH\"\n      [heading]=\"'dossierManagement.tabs.searchFields' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.SEARCH)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"caseListColumn\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.LIST\"\n      [heading]=\"'dossierManagement.tabs.listColumns' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.LIST)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"tabManagementEnabled\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.TABS\"\n      [heading]=\"'dossierManagement.tabs.tabManagement' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.TABS)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"{active: obs.currentTab === TabEnum.STATUSES} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.statuses' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.STATUSES)\"\n    >\n      <valtimo-dossier-management-statuses\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-statuses>\n    </cds-tab>\n\n    @for (injectedTab of obs.injectedTabs; track injectedTab.translationKey) {\n      <cds-tab\n        class=\"no-padding-left-right no-padding-top-bottom\"\n        [active]=\"obs.currentTab === injectedTab.translationKey\"\n        [heading]=\"injectedTab.translationKey | translate\"\n        (selected)=\"displayBodyComponent(injectedTab.translationKey, true)\"\n      >\n      </cds-tab>\n    }\n  </cds-tabs>\n\n  <div class=\"dossier-management-detail-container__content\">\n    <ng-template #contentContainer></ng-template>\n\n    <valtimo-dossier-management-document-definition\n      *ngIf=\"\n        (obs.currentTab === TabEnum.DOCUMENT && !pendingChanges) || pendingTab === TabEnum.DOCUMENT\n      \"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      (pendingChangesUpdate)=\"onPendingChangesUpdate($event)\"\n      (cancelRedirect)=\"onCancelRedirectEvent()\"\n      (confirmRedirect)=\"onConfirmRedirectEvent()\"\n    ></valtimo-dossier-management-document-definition>\n\n    <valtimo-dossier-management-detail\n      *ngIf=\"(obs.currentTab === TabEnum.CASE && !pendingChanges) || pendingTab === TabEnum.CASE\"\n    ></valtimo-dossier-management-detail>\n\n    <valtimo-dossier-management-processes\n      *ngIf=\"\n        (obs.currentTab === TabEnum.PROCESSES && !pendingChanges) ||\n        pendingTab === TabEnum.PROCESSES\n      \"\n    ></valtimo-dossier-management-processes>\n\n    <valtimo-dossier-management-search-fields\n      *ngIf=\"\n        (obs.currentTab === TabEnum.SEARCH && !pendingChanges) || pendingTab === TabEnum.SEARCH\n      \"\n    ></valtimo-dossier-management-search-fields>\n\n    <valtimo-dossier-management-list-columns\n      *ngIf=\"(obs.currentTab === TabEnum.LIST && !pendingChanges) || pendingTab === TabEnum.LIST\"\n    ></valtimo-dossier-management-list-columns>\n\n    <valtimo-dossier-management-tabs\n      *ngIf=\"(obs.currentTab === TabEnum.TABS && !pendingChanges) || pendingTab === TabEnum.TABS\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n    ></valtimo-dossier-management-tabs>\n  </div>\n</div>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <valtimo-dossier-management-detail-container-actions\n      [documentDefinitionTitle]=\"documentDefinitionTitle$ | async\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      (versionSet)=\"onVersionSet($event)\"\n    ></valtimo-dossier-management-detail-container-actions>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .dossier-management-tabs .cds--tab-content{background-color:var(--cds-layer)}::ng-deep .dossier-management-tabs .cds--tab-content:focus{outline:none}::ng-deep .dossier-management-tabs .no-padding-left-right .cds--tab-content{padding-left:0;padding-right:0}::ng-deep .dossier-management-tabs .no-padding-top-bottom .cds--tab-content{padding-top:0;padding-bottom:0}::ng-deep .dossier-management-tabs .no-padding-bottom .cds--tab-content{padding-bottom:0}.tab-container{min-height:300px}.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid rgba(0,0,0,.125)}.dossier-title{margin-top:0;margin-bottom:7px}.dossier-management-detail-container{display:flex;flex-direction:column;width:100%}.dossier-management-detail-container__content{background:var(--cds-layer)}\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: DossierDetailService }, { type: i2.ActivatedRoute }, { type: i2$1.ConfigService }, { type: TabService }, { type: i5.PageTitleService }], propDecorators: { _contentContainer: [{
+                type: ViewChild,
+                args: ['contentContainer', { read: ViewContainerRef }]
+            }], _documentDefinitionTab: [{
+                type: ViewChild,
+                args: [DossierManagementDocumentDefinitionComponent]
+            }] } });
 
+/*
+ * 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 UPLOAD_STATUS;
 (function (UPLOAD_STATUS) {
     UPLOAD_STATUS["ACTIVE"] = "active";
@@ -2274,12 +2890,12 @@ const STEPS = [
 ];
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
- *
  * You may obtain a copy of the License at
+ *
  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
  *
  * Unless required by applicable law or agreed to in writing, software
@@ -2288,7 +2904,7 @@ const STEPS = [
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DossierImportService {
+class DossierManagementService {
     constructor(http, configService) {
         this.http = http;
         this.configService = configService;
@@ -2297,23 +2913,38 @@ class DossierImportService {
     importDocumentDefinitionZip(file) {
         return this.http.post(`${this.valtimoEndpointUri}management/v1/case/import`, file);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierImportService, deps: [{ token: i1$3.HttpClient }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierImportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementService, deps: [{ token: i1$2.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierImportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.HttpClient }, { type: i1$2.ConfigService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2$1.ConfigService }] });
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 class DossierManagementUploadStepComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementUploadStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementUploadStepComponent, selector: "valtimo-dossier-management-upload-step", inputs: { illustration: "illustration", message: "message", title: "title" }, ngImport: i0, template: "<div class=\"valtimo-upload-step__content\">\n  <div class=\"valtimo-upload-step__title\">{{ title }}</div>\n\n  <div class=\"valtimo-upload-step__message\">{{ message }}</div>\n</div>\n\n<img [src]=\"illustration\" alt=\"{{ illustration }}\" class=\"valtimo-upload-step__illustration\" />\n", styles: [":host{display:flex;justify-content:space-around;align-items:center;gap:32px;height:100%}:host label{color:unset}.valtimo-upload-step__content{display:flex;flex-direction:column;gap:16px}.valtimo-upload-step__title{font-weight:600;font-size:16px}.valtimo-upload-step__message{font-size:16px;line-height:28px}.valtimo-upload-step__illustration{max-width:200px}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementUploadStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementUploadStepComponent, selector: "valtimo-dossier-management-upload-step", inputs: { illustration: "illustration", message: "message", title: "title" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"valtimo-upload-step__content\">\n  <div class=\"valtimo-upload-step__title\">{{ title }}</div>\n\n  <div class=\"valtimo-upload-step__message\">{{ message }}</div>\n</div>\n\n<img [src]=\"illustration\" alt=\"{{ illustration }}\" class=\"valtimo-upload-step__illustration\" />\n", styles: [":host{display:flex;justify-content:space-around;align-items:center;gap:32px;height:100%}:host label{color:unset}.valtimo-upload-step__content{display:flex;flex-direction:column;gap:16px}.valtimo-upload-step__title{font-weight:600;font-size:16px}.valtimo-upload-step__message{font-size:16px;line-height:28px}.valtimo-upload-step__illustration{max-width:200px}\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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementUploadStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementUploadStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-upload-step', template: "<div class=\"valtimo-upload-step__content\">\n  <div class=\"valtimo-upload-step__title\">{{ title }}</div>\n\n  <div class=\"valtimo-upload-step__message\">{{ message }}</div>\n</div>\n\n<img [src]=\"illustration\" alt=\"{{ illustration }}\" class=\"valtimo-upload-step__illustration\" />\n", styles: [":host{display:flex;justify-content:space-around;align-items:center;gap:32px;height:100%}:host label{color:unset}.valtimo-upload-step__content{display:flex;flex-direction:column;gap:16px}.valtimo-upload-step__title{font-weight:600;font-size:16px}.valtimo-upload-step__message{font-size:16px;line-height:28px}.valtimo-upload-step__illustration{max-width:200px}\n"] }]
+            args: [{ selector: 'valtimo-dossier-management-upload-step', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"valtimo-upload-step__content\">\n  <div class=\"valtimo-upload-step__title\">{{ title }}</div>\n\n  <div class=\"valtimo-upload-step__message\">{{ message }}</div>\n</div>\n\n<img [src]=\"illustration\" alt=\"{{ illustration }}\" class=\"valtimo-upload-step__illustration\" />\n", styles: [":host{display:flex;justify-content:space-around;align-items:center;gap:32px;height:100%}:host label{color:unset}.valtimo-upload-step__content{display:flex;flex-direction:column;gap:16px}.valtimo-upload-step__title{font-weight:600;font-size:16px}.valtimo-upload-step__message{font-size:16px;line-height:28px}.valtimo-upload-step__illustration{max-width:200px}\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"] }]
         }], propDecorators: { illustration: [{
                 type: Input
             }], message: [{
@@ -2323,7 +2954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2338,9 +2969,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class DossierManagementUploadComponent {
-    constructor(documentService, dossierImportService, fb, iconService, translateService) {
+    constructor(documentService, dossierManagementService, fb, iconService, translateService) {
         this.documentService = documentService;
-        this.dossierImportService = dossierImportService;
+        this.dossierManagementService = dossierManagementService;
         this.fb = fb;
         this.iconService = iconService;
         this.translateService = translateService;
@@ -2383,7 +3014,7 @@ class DossierManagementUploadComponent {
         if (!control) {
             return;
         }
-        this._subscriptions.add(control.valueChanges.subscribe((fileSet) => {
+        this._subscriptions.add(this.form.get('file').valueChanges.subscribe((fileSet) => {
             const [fileItem] = fileSet;
             if (!fileItem) {
                 this._disabled$.next(true);
@@ -2399,6 +3030,7 @@ class DossierManagementUploadComponent {
         }));
     }
     ngOnDestroy() {
+        this._subscriptions.unsubscribe();
         this.resetModal();
     }
     onCloseModal(definitionUploaded) {
@@ -2469,7 +3101,7 @@ class DossierManagementUploadComponent {
         this._disabled$.next(true);
         this._importFile$
             .pipe(switchMap((file) => file instanceof FormData
-            ? this.dossierImportService.importDocumentDefinitionZip(file)
+            ? this.dossierManagementService.importDocumentDefinitionZip(file)
             : this.documentService.createDocumentDefinitionForManagement(new DocumentDefinitionCreateRequest(file))), take(1))
             .subscribe({
             next: () => {
@@ -2505,26 +3137,129 @@ class DossierManagementUploadComponent {
             this.activeStep$.next(UPLOAD_STEP.PLUGINS);
             this.uploadStatus$.next(UPLOAD_STATUS.ACTIVE);
             this.showCheckboxError$.next(false);
-            this._subscriptions.unsubscribe();
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementUploadComponent, deps: [{ token: i1.DocumentService }, { token: DossierImportService }, { token: i2$1.FormBuilder }, { token: i4.IconService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementUploadComponent, selector: "valtimo-dossier-management-upload", inputs: { open: "open" }, outputs: { closeModal: "closeModal" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["uploadDefinitionModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{\n    activeStep: activeStep$ | async,\n    backButtonEnabled: backButtonEnabled$ | async,\n    isStepAfterUpload: isStepAfterUpload$ | async,\n    nextButtonDisabled: nextButtonDisabled$ | async,\n    notificationObj: notificationObj$ | async,\n    showCheckboxError: showCheckboxError$ | async,\n    showCloseButton: showCloseButton$ | async,\n    uploadStatus: uploadStatus$ | async\n  } as obs\"\n  valtimoCdsModal\n  [open]=\"open\"\n  showFooter=\"true\"\n  class=\"valtimo-definition-uploader\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header\n    [showCloseButton]=\"obs.showCloseButton\"\n    (closeSelect)=\"onCloseModal(obs.isStepAfterUpload && obs.uploadStatus !== UPLOAD_STATUS.ERROR)\"\n  >\n    <h3 cdsModalHeaderHeading>\n      {{ 'dossierManagement.importDefinition.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section [ngSwitch]=\"obs.activeStep\" cdsModalContent class=\"valtimo-definition-uploader__content\">\n    <ng-template ngSwitchDefault>\n      <valtimo-dossier-management-upload-step\n        [message]=\"\n          'dossierManagement.importDefinition.steps.' + obs.activeStep + '.message' | translate\n        \"\n        [title]=\"\n          'dossierManagement.importDefinition.steps.' + obs.activeStep + '.title' | translate\n        \"\n        [illustration]=\"'valtimo-layout/img/' + obs.activeStep + '.svg'\"\n      >\n      </valtimo-dossier-management-upload-step>\n    </ng-template>\n\n    <form *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\" [formGroup]=\"form\">\n      <cds-file-uploader\n        [accept]=\"acceptedFiles\"\n        [buttonText]=\"'dossierManagement.importDefinition.upload.buttonText' | translate\"\n        [description]=\"'dossierManagement.importDefinition.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'dossierManagement.importDefinition.upload.title' | translate\"\n        buttonType=\"primary\"\n        data-carbon-theme=\"g10\"\n        formControlName=\"file\"\n        class=\"valtimo-definition-uploader__file-uploader\"\n      >\n      </cds-file-uploader>\n\n      <ng-container *ngIf=\"!obs.nextButtonDisabled\">\n        <cds-inline-notification [notificationObj]=\"obs.notificationObj\"></cds-inline-notification>\n\n        <div class=\"valtimo-uploader__checkbox\">\n          <cds-checkbox\n            [class.valtimo-definition-uploader__checkbox--invalid]=\"obs.showCheckboxError\"\n            (checkedChange)=\"onCheckedChange($event)\"\n          >\n            {{ 'dossierManagement.importDefinition.checkbox.message' | translate }}\n          </cds-checkbox>\n\n          <div *ngIf=\"obs.showCheckboxError\" class=\"valtimo-definition-uploader__error\">\n            <svg cdsIcon=\"warning--filled\" size=\"16\"></svg>\n\n            {{ 'dossierManagement.importDefinition.checkbox.error' | translate }}\n          </div>\n        </div>\n      </ng-container>\n    </form>\n\n    <cds-progress-bar\n      *ngSwitchCase=\"UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__progress-bar\"\n      [label]=\"'dossierManagement.importDefinition.progressBar.label' | translate\"\n      [status]=\"obs.uploadStatus\"\n      [helperText]=\"\n        'dossierManagement.importDefinition.progressBar.' + obs.uploadStatus | translate\n      \"\n    ></cds-progress-bar>\n  </section>\n\n  <cds-modal-footer\n    class=\"valtimo-definition-uploader__footer\"\n    [class.valtimo-definition-uploader__footer--double]=\"obs.activeStep === UPLOAD_STEP.PLUGINS\"\n  >\n    <button\n      *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onCloseModal(obs.isStepAfterUpload)\"\n    >\n      {{ (obs.isStepAfterUpload ? 'interface.skip' : 'interface.cancel') | translate }}\n    </button>\n\n    <div class=\"valtimo-definition-uploader__actions\">\n      <button\n        *ngIf=\"obs.backButtonEnabled\"\n        cdsButton=\"secondary\"\n        (click)=\"onBackClick(obs.activeStep)\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.DASHBOARD\"\n        cdsButton=\"primary\"\n        [disabled]=\"obs.nextButtonDisabled\"\n        (click)=\"onNextClick(obs.activeStep)\"\n      >\n        {{\n          (obs.activeStep === UPLOAD_STEP.FILE_SELECT\n            ? 'dossierManagement.importDefinition.startUpload'\n            : 'interface.next'\n          ) | translate\n        }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus === UPLOAD_STATUS.ERROR || obs.activeStep === UPLOAD_STEP.DASHBOARD\"\n        class=\"valtimo-definition-uploader__cancel\"\n        cdsButton=\"primary\"\n        (click)=\"onCloseModal(true)\"\n      >\n        {{ 'interface.finish' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.valtimo-definition-uploader__content,.valtimo-definition-uploader__content form{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__footer ::ng-deep .cds--modal-footer{justify-content:unset!important;display:grid!important;grid-template-columns:1fr 1fr 2fr!important;grid-template-areas:\"cancel . actions\"!important}.valtimo-definition-uploader__footer--double ::ng-deep .cds--modal-footer{grid-template-columns:1fr 1fr!important;grid-template-areas:\"cancel actions\"!important}.valtimo-definition-uploader__progress-bar{height:100%;display:flex;flex-direction:column;justify-content:center}.valtimo-definition-uploader__error{display:flex;align-items:center;gap:10px;color:#da1e28;fill:#da1e28;font-size:12px}.valtimo-definition-uploader__cancel{grid-area:cancel;width:100%}.valtimo-definition-uploader__actions{grid-area:actions;display:flex}.valtimo-definition-uploader__actions button{flex:unset;width:100%}.valtimo-definition-uploader__file-uploader ::ng-deep cds-file{max-width:unset}.valtimo-definition-uploader__checkbox{display:flex;flex-direction:column;gap:8px}.valtimo-definition-uploader__checkbox--invalid ::ng-deep label:before{border-color:#da1e28;margin-inline:0}.valtimo-definition-uploader ::ng-deep .cds--modal-container{height:550px}.valtimo-definition-uploader ::ng-deep .cds--checkbox-label-text{color:#000}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i4.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i4.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i4.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i4.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i4.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "directive", type: i7.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i4.FileUploader, selector: "cds-file-uploader, ibm-file-uploader", inputs: ["buttonText", "buttonType", "title", "description", "accept", "multiple", "skeleton", "size", "fileItemSize", "drop", "dropText", "fileUploaderId", "files", "disabled"], outputs: ["filesChange"] }, { kind: "component", type: i4.ProgressBar, selector: "cds-progress-bar, ibm-progress-bar", inputs: ["value", "id", "label", "helperText", "max", "type", "status", "size"] }, { kind: "component", type: DossierManagementUploadStepComponent, selector: "valtimo-dossier-management-upload-step", inputs: ["illustration", "message", "title"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementUploadComponent, deps: [{ token: i1.DocumentService }, { token: DossierManagementService }, { token: i1$3.FormBuilder }, { token: i2$2.IconService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementUploadComponent, selector: "valtimo-dossier-management-upload", inputs: { open: "open" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{\n    activeStep: activeStep$ | async,\n    backButtonEnabled: backButtonEnabled$ | async,\n    isStepAfterUpload: isStepAfterUpload$ | async,\n    nextButtonDisabled: nextButtonDisabled$ | async,\n    notificationObj: notificationObj$ | async,\n    showCheckboxError: showCheckboxError$ | async,\n    showCloseButton: showCloseButton$ | async,\n    uploadStatus: uploadStatus$ | async\n  } as obs\"\n  valtimoCdsModal\n  [open]=\"open\"\n  showFooter=\"true\"\n  class=\"valtimo-definition-uploader\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header\n    [showCloseButton]=\"obs.showCloseButton\"\n    (closeSelect)=\"onCloseModal(obs.isStepAfterUpload && obs.uploadStatus !== UPLOAD_STATUS.ERROR)\"\n  >\n    <h3 cdsModalHeaderHeading>\n      {{ 'dossierManagement.importDefinition.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section [ngSwitch]=\"obs.activeStep\" cdsModalContent class=\"valtimo-definition-uploader__content\">\n    <ng-template ngSwitchDefault>\n      <valtimo-dossier-management-upload-step\n        [message]=\"\n          'dossierManagement.importDefinition.steps.' + obs.activeStep + '.message' | translate\n        \"\n        [title]=\"\n          'dossierManagement.importDefinition.steps.' + obs.activeStep + '.title' | translate\n        \"\n        [illustration]=\"'valtimo-layout/img/' + obs.activeStep + '.svg'\"\n      >\n      </valtimo-dossier-management-upload-step>\n    </ng-template>\n\n    <form *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\" [formGroup]=\"form\">\n      <cds-file-uploader\n        [accept]=\"acceptedFiles\"\n        [buttonText]=\"'dossierManagement.importDefinition.upload.buttonText' | translate\"\n        [description]=\"'dossierManagement.importDefinition.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'dossierManagement.importDefinition.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        class=\"valtimo-definition-uploader__file-uploader\"\n      >\n      </cds-file-uploader>\n\n      <ng-container *ngIf=\"!obs.nextButtonDisabled\">\n        <cds-inline-notification [notificationObj]=\"obs.notificationObj\"></cds-inline-notification>\n\n        <div class=\"valtimo-uploader__checkbox\">\n          <cds-checkbox\n            [class.valtimo-definition-uploader__checkbox--invalid]=\"obs.showCheckboxError\"\n            (checkedChange)=\"onCheckedChange($event)\"\n          >\n            {{ 'dossierManagement.importDefinition.checkbox.message' | translate }}\n          </cds-checkbox>\n\n          <div *ngIf=\"obs.showCheckboxError\" class=\"valtimo-definition-uploader__error\">\n            <svg cdsIcon=\"warning--filled\" size=\"16\"></svg>\n\n            {{ 'dossierManagement.importDefinition.checkbox.error' | translate }}\n          </div>\n        </div>\n      </ng-container>\n    </form>\n\n    <cds-progress-bar\n      *ngSwitchCase=\"UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__progress-bar\"\n      [label]=\"'dossierManagement.importDefinition.progressBar.label' | translate\"\n      [status]=\"obs.uploadStatus\"\n      [helperText]=\"\n        'dossierManagement.importDefinition.progressBar.' + obs.uploadStatus | translate\n      \"\n    ></cds-progress-bar>\n  </section>\n\n  <cds-modal-footer\n    class=\"valtimo-definition-uploader__footer\"\n    [class.valtimo-definition-uploader__footer--double]=\"obs.activeStep === UPLOAD_STEP.PLUGINS\"\n  >\n    <button\n      *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onCloseModal(obs.isStepAfterUpload)\"\n    >\n      {{ (obs.isStepAfterUpload ? 'interface.skip' : 'interface.cancel') | translate }}\n    </button>\n\n    <div class=\"valtimo-definition-uploader__actions\">\n      <button\n        *ngIf=\"obs.backButtonEnabled\"\n        cdsButton=\"secondary\"\n        (click)=\"onBackClick(obs.activeStep)\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.DASHBOARD\"\n        cdsButton=\"primary\"\n        [disabled]=\"obs.nextButtonDisabled\"\n        (click)=\"onNextClick(obs.activeStep)\"\n      >\n        {{\n          (obs.activeStep === UPLOAD_STEP.FILE_SELECT\n            ? 'dossierManagement.importDefinition.startUpload'\n            : 'interface.next'\n          ) | translate\n        }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus === UPLOAD_STATUS.ERROR || obs.activeStep === UPLOAD_STEP.DASHBOARD\"\n        class=\"valtimo-definition-uploader__cancel\"\n        cdsButton=\"primary\"\n        (click)=\"onCloseModal(true)\"\n      >\n        {{ 'interface.finish' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-uploader__content,.valtimo-definition-uploader__content form{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__footer ::ng-deep .cds--modal-footer{justify-content:unset!important;display:grid!important;grid-template-columns:1fr 1fr 2fr!important;grid-template-areas:\"cancel . actions\"!important}.valtimo-definition-uploader__footer--double ::ng-deep .cds--modal-footer{grid-template-columns:1fr 1fr!important;grid-template-areas:\"cancel actions\"!important}.valtimo-definition-uploader__progress-bar{height:100%;display:flex;flex-direction:column;justify-content:center}.valtimo-definition-uploader__error{display:flex;align-items:center;gap:10px;color:#da1e28;fill:#da1e28;font-size:12px}.valtimo-definition-uploader__cancel{grid-area:cancel;width:100%}.valtimo-definition-uploader__actions{grid-area:actions;display:flex}.valtimo-definition-uploader__actions button{flex:unset;width:100%}.valtimo-definition-uploader__file-uploader ::ng-deep cds-file{max-width:unset}.valtimo-definition-uploader__checkbox{display:flex;flex-direction:column;gap:8px}.valtimo-definition-uploader__checkbox--invalid ::ng-deep label:before{border-color:#da1e28;margin-inline:0}.valtimo-definition-uploader ::ng-deep .cds--modal-container{height:550px}.valtimo-definition-uploader ::ng-deep .cds--checkbox-label-text{color:#000}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$2.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "directive", type: i5.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$2.FileUploader, selector: "cds-file-uploader, ibm-file-uploader", inputs: ["buttonText", "buttonType", "title", "description", "accept", "multiple", "skeleton", "size", "fileItemSize", "drop", "dropText", "fileUploaderId", "files", "disabled"], outputs: ["filesChange"] }, { kind: "component", type: i2$2.ProgressBar, selector: "cds-progress-bar, ibm-progress-bar", inputs: ["value", "id", "label", "helperText", "max", "type", "status", "size"] }, { kind: "component", type: DossierManagementUploadStepComponent, selector: "valtimo-dossier-management-upload-step", inputs: ["illustration", "message", "title"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-upload', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{\n    activeStep: activeStep$ | async,\n    backButtonEnabled: backButtonEnabled$ | async,\n    isStepAfterUpload: isStepAfterUpload$ | async,\n    nextButtonDisabled: nextButtonDisabled$ | async,\n    notificationObj: notificationObj$ | async,\n    showCheckboxError: showCheckboxError$ | async,\n    showCloseButton: showCloseButton$ | async,\n    uploadStatus: uploadStatus$ | async\n  } as obs\"\n  valtimoCdsModal\n  [open]=\"open\"\n  showFooter=\"true\"\n  class=\"valtimo-definition-uploader\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header\n    [showCloseButton]=\"obs.showCloseButton\"\n    (closeSelect)=\"onCloseModal(obs.isStepAfterUpload && obs.uploadStatus !== UPLOAD_STATUS.ERROR)\"\n  >\n    <h3 cdsModalHeaderHeading>\n      {{ 'dossierManagement.importDefinition.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section [ngSwitch]=\"obs.activeStep\" cdsModalContent class=\"valtimo-definition-uploader__content\">\n    <ng-template ngSwitchDefault>\n      <valtimo-dossier-management-upload-step\n        [message]=\"\n          'dossierManagement.importDefinition.steps.' + obs.activeStep + '.message' | translate\n        \"\n        [title]=\"\n          'dossierManagement.importDefinition.steps.' + obs.activeStep + '.title' | translate\n        \"\n        [illustration]=\"'valtimo-layout/img/' + obs.activeStep + '.svg'\"\n      >\n      </valtimo-dossier-management-upload-step>\n    </ng-template>\n\n    <form *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\" [formGroup]=\"form\">\n      <cds-file-uploader\n        [accept]=\"acceptedFiles\"\n        [buttonText]=\"'dossierManagement.importDefinition.upload.buttonText' | translate\"\n        [description]=\"'dossierManagement.importDefinition.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'dossierManagement.importDefinition.upload.title' | translate\"\n        buttonType=\"primary\"\n        data-carbon-theme=\"g10\"\n        formControlName=\"file\"\n        class=\"valtimo-definition-uploader__file-uploader\"\n      >\n      </cds-file-uploader>\n\n      <ng-container *ngIf=\"!obs.nextButtonDisabled\">\n        <cds-inline-notification [notificationObj]=\"obs.notificationObj\"></cds-inline-notification>\n\n        <div class=\"valtimo-uploader__checkbox\">\n          <cds-checkbox\n            [class.valtimo-definition-uploader__checkbox--invalid]=\"obs.showCheckboxError\"\n            (checkedChange)=\"onCheckedChange($event)\"\n          >\n            {{ 'dossierManagement.importDefinition.checkbox.message' | translate }}\n          </cds-checkbox>\n\n          <div *ngIf=\"obs.showCheckboxError\" class=\"valtimo-definition-uploader__error\">\n            <svg cdsIcon=\"warning--filled\" size=\"16\"></svg>\n\n            {{ 'dossierManagement.importDefinition.checkbox.error' | translate }}\n          </div>\n        </div>\n      </ng-container>\n    </form>\n\n    <cds-progress-bar\n      *ngSwitchCase=\"UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__progress-bar\"\n      [label]=\"'dossierManagement.importDefinition.progressBar.label' | translate\"\n      [status]=\"obs.uploadStatus\"\n      [helperText]=\"\n        'dossierManagement.importDefinition.progressBar.' + obs.uploadStatus | translate\n      \"\n    ></cds-progress-bar>\n  </section>\n\n  <cds-modal-footer\n    class=\"valtimo-definition-uploader__footer\"\n    [class.valtimo-definition-uploader__footer--double]=\"obs.activeStep === UPLOAD_STEP.PLUGINS\"\n  >\n    <button\n      *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onCloseModal(obs.isStepAfterUpload)\"\n    >\n      {{ (obs.isStepAfterUpload ? 'interface.skip' : 'interface.cancel') | translate }}\n    </button>\n\n    <div class=\"valtimo-definition-uploader__actions\">\n      <button\n        *ngIf=\"obs.backButtonEnabled\"\n        cdsButton=\"secondary\"\n        (click)=\"onBackClick(obs.activeStep)\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.DASHBOARD\"\n        cdsButton=\"primary\"\n        [disabled]=\"obs.nextButtonDisabled\"\n        (click)=\"onNextClick(obs.activeStep)\"\n      >\n        {{\n          (obs.activeStep === UPLOAD_STEP.FILE_SELECT\n            ? 'dossierManagement.importDefinition.startUpload'\n            : 'interface.next'\n          ) | translate\n        }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus === UPLOAD_STATUS.ERROR || obs.activeStep === UPLOAD_STEP.DASHBOARD\"\n        class=\"valtimo-definition-uploader__cancel\"\n        cdsButton=\"primary\"\n        (click)=\"onCloseModal(true)\"\n      >\n        {{ 'interface.finish' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.valtimo-definition-uploader__content,.valtimo-definition-uploader__content form{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__footer ::ng-deep .cds--modal-footer{justify-content:unset!important;display:grid!important;grid-template-columns:1fr 1fr 2fr!important;grid-template-areas:\"cancel . actions\"!important}.valtimo-definition-uploader__footer--double ::ng-deep .cds--modal-footer{grid-template-columns:1fr 1fr!important;grid-template-areas:\"cancel actions\"!important}.valtimo-definition-uploader__progress-bar{height:100%;display:flex;flex-direction:column;justify-content:center}.valtimo-definition-uploader__error{display:flex;align-items:center;gap:10px;color:#da1e28;fill:#da1e28;font-size:12px}.valtimo-definition-uploader__cancel{grid-area:cancel;width:100%}.valtimo-definition-uploader__actions{grid-area:actions;display:flex}.valtimo-definition-uploader__actions button{flex:unset;width:100%}.valtimo-definition-uploader__file-uploader ::ng-deep cds-file{max-width:unset}.valtimo-definition-uploader__checkbox{display:flex;flex-direction:column;gap:8px}.valtimo-definition-uploader__checkbox--invalid ::ng-deep label:before{border-color:#da1e28;margin-inline:0}.valtimo-definition-uploader ::ng-deep .cds--modal-container{height:550px}.valtimo-definition-uploader ::ng-deep .cds--checkbox-label-text{color:#000}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: DossierImportService }, { type: i2$1.FormBuilder }, { type: i4.IconService }, { type: i3.TranslateService }]; }, propDecorators: { modal: [{
-                type: ViewChild,
-                args: ['uploadDefinitionModal']
-            }], open: [{
+            args: [{ selector: 'valtimo-dossier-management-upload', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{\n    activeStep: activeStep$ | async,\n    backButtonEnabled: backButtonEnabled$ | async,\n    isStepAfterUpload: isStepAfterUpload$ | async,\n    nextButtonDisabled: nextButtonDisabled$ | async,\n    notificationObj: notificationObj$ | async,\n    showCheckboxError: showCheckboxError$ | async,\n    showCloseButton: showCloseButton$ | async,\n    uploadStatus: uploadStatus$ | async\n  } as obs\"\n  valtimoCdsModal\n  [open]=\"open\"\n  showFooter=\"true\"\n  class=\"valtimo-definition-uploader\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header\n    [showCloseButton]=\"obs.showCloseButton\"\n    (closeSelect)=\"onCloseModal(obs.isStepAfterUpload && obs.uploadStatus !== UPLOAD_STATUS.ERROR)\"\n  >\n    <h3 cdsModalHeaderHeading>\n      {{ 'dossierManagement.importDefinition.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section [ngSwitch]=\"obs.activeStep\" cdsModalContent class=\"valtimo-definition-uploader__content\">\n    <ng-template ngSwitchDefault>\n      <valtimo-dossier-management-upload-step\n        [message]=\"\n          'dossierManagement.importDefinition.steps.' + obs.activeStep + '.message' | translate\n        \"\n        [title]=\"\n          'dossierManagement.importDefinition.steps.' + obs.activeStep + '.title' | translate\n        \"\n        [illustration]=\"'valtimo-layout/img/' + obs.activeStep + '.svg'\"\n      >\n      </valtimo-dossier-management-upload-step>\n    </ng-template>\n\n    <form *ngSwitchCase=\"UPLOAD_STEP.FILE_SELECT\" [formGroup]=\"form\">\n      <cds-file-uploader\n        [accept]=\"acceptedFiles\"\n        [buttonText]=\"'dossierManagement.importDefinition.upload.buttonText' | translate\"\n        [description]=\"'dossierManagement.importDefinition.upload.description' | translate\"\n        [multiple]=\"false\"\n        [title]=\"'dossierManagement.importDefinition.upload.title' | translate\"\n        buttonType=\"primary\"\n        formControlName=\"file\"\n        class=\"valtimo-definition-uploader__file-uploader\"\n      >\n      </cds-file-uploader>\n\n      <ng-container *ngIf=\"!obs.nextButtonDisabled\">\n        <cds-inline-notification [notificationObj]=\"obs.notificationObj\"></cds-inline-notification>\n\n        <div class=\"valtimo-uploader__checkbox\">\n          <cds-checkbox\n            [class.valtimo-definition-uploader__checkbox--invalid]=\"obs.showCheckboxError\"\n            (checkedChange)=\"onCheckedChange($event)\"\n          >\n            {{ 'dossierManagement.importDefinition.checkbox.message' | translate }}\n          </cds-checkbox>\n\n          <div *ngIf=\"obs.showCheckboxError\" class=\"valtimo-definition-uploader__error\">\n            <svg cdsIcon=\"warning--filled\" size=\"16\"></svg>\n\n            {{ 'dossierManagement.importDefinition.checkbox.error' | translate }}\n          </div>\n        </div>\n      </ng-container>\n    </form>\n\n    <cds-progress-bar\n      *ngSwitchCase=\"UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__progress-bar\"\n      [label]=\"'dossierManagement.importDefinition.progressBar.label' | translate\"\n      [status]=\"obs.uploadStatus\"\n      [helperText]=\"\n        'dossierManagement.importDefinition.progressBar.' + obs.uploadStatus | translate\n      \"\n    ></cds-progress-bar>\n  </section>\n\n  <cds-modal-footer\n    class=\"valtimo-definition-uploader__footer\"\n    [class.valtimo-definition-uploader__footer--double]=\"obs.activeStep === UPLOAD_STEP.PLUGINS\"\n  >\n    <button\n      *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.FILE_UPLOAD\"\n      class=\"valtimo-definition-uploader__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onCloseModal(obs.isStepAfterUpload)\"\n    >\n      {{ (obs.isStepAfterUpload ? 'interface.skip' : 'interface.cancel') | translate }}\n    </button>\n\n    <div class=\"valtimo-definition-uploader__actions\">\n      <button\n        *ngIf=\"obs.backButtonEnabled\"\n        cdsButton=\"secondary\"\n        (click)=\"onBackClick(obs.activeStep)\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus !== UPLOAD_STATUS.ERROR && obs.activeStep !== UPLOAD_STEP.DASHBOARD\"\n        cdsButton=\"primary\"\n        [disabled]=\"obs.nextButtonDisabled\"\n        (click)=\"onNextClick(obs.activeStep)\"\n      >\n        {{\n          (obs.activeStep === UPLOAD_STEP.FILE_SELECT\n            ? 'dossierManagement.importDefinition.startUpload'\n            : 'interface.next'\n          ) | translate\n        }}\n      </button>\n\n      <button\n        *ngIf=\"obs.uploadStatus === UPLOAD_STATUS.ERROR || obs.activeStep === UPLOAD_STEP.DASHBOARD\"\n        class=\"valtimo-definition-uploader__cancel\"\n        cdsButton=\"primary\"\n        (click)=\"onCloseModal(true)\"\n      >\n        {{ 'interface.finish' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-uploader__content,.valtimo-definition-uploader__content form{display:flex;flex-direction:column;gap:16px}.valtimo-definition-uploader__footer ::ng-deep .cds--modal-footer{justify-content:unset!important;display:grid!important;grid-template-columns:1fr 1fr 2fr!important;grid-template-areas:\"cancel . actions\"!important}.valtimo-definition-uploader__footer--double ::ng-deep .cds--modal-footer{grid-template-columns:1fr 1fr!important;grid-template-areas:\"cancel actions\"!important}.valtimo-definition-uploader__progress-bar{height:100%;display:flex;flex-direction:column;justify-content:center}.valtimo-definition-uploader__error{display:flex;align-items:center;gap:10px;color:#da1e28;fill:#da1e28;font-size:12px}.valtimo-definition-uploader__cancel{grid-area:cancel;width:100%}.valtimo-definition-uploader__actions{grid-area:actions;display:flex}.valtimo-definition-uploader__actions button{flex:unset;width:100%}.valtimo-definition-uploader__file-uploader ::ng-deep cds-file{max-width:unset}.valtimo-definition-uploader__checkbox{display:flex;flex-direction:column;gap:8px}.valtimo-definition-uploader__checkbox--invalid ::ng-deep label:before{border-color:#da1e28;margin-inline:0}.valtimo-definition-uploader ::ng-deep .cds--modal-container{height:550px}.valtimo-definition-uploader ::ng-deep .cds--checkbox-label-text{color:#000}\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.DocumentService }, { type: DossierManagementService }, { type: i1$3.FormBuilder }, { type: i2$2.IconService }, { type: i3.TranslateService }], propDecorators: { open: [{
+                type: Input
+            }], closeModal: [{
+                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 DossierManagementCreateComponent {
+    constructor(documentService, fb, iconService) {
+        this.documentService = documentService;
+        this.fb = fb;
+        this.iconService = iconService;
+        this.open = false;
+        this.closeModal = new EventEmitter();
+        this.formGroup = this.fb.group({
+            title: this.fb.control('', Validators.required),
+            name: this.fb.control({ value: '', disabled: true }, [
+                Validators.required,
+                Validators.pattern('[A-Za-z0-9-]*'),
+            ]),
+        });
+        this._editActive$ = new BehaviorSubject(false);
+        this.editActive$ = this._editActive$.pipe(tap$1((editActive) => {
+            const name = this.formGroup.get('name');
+            if (!name) {
+                return;
+            }
+            if (editActive) {
+                name.enable();
+                return;
+            }
+            name.disable();
+        }));
+        this.editDisabled$ = new BehaviorSubject(true);
+        this.idError$ = new BehaviorSubject(null);
+        this.iconService.registerAll([Edit16, Information16]);
+    }
+    onCloseModal(definitionCreated) {
+        if (!definitionCreated) {
+            this.closeModal.emit(null);
+            this.resetForm();
+            return;
+        }
+        const { name, title } = this.formGroup.controls;
+        if (!name || !title) {
+            return;
+        }
+        this.documentService
+            .getDocumentDefinition(name.value, true)
+            .pipe(take(1))
+            .subscribe({
+            next: () => {
+                this.idError$.next('dossierManagement.createDefinition.idError');
+                this.editDisabled$.next(false);
+                this.enableEdit();
+            },
+            error: () => {
+                this.closeModal.emit({
+                    documentDefinitionId: name.value,
+                    documentDefinitionTitle: title.value,
+                });
+                this.resetForm();
+            },
+        });
+    }
+    enableEdit() {
+        this._editActive$.next(true);
+    }
+    onFocusOut() {
+        const { name, title } = this.formGroup.controls;
+        if (!name || !title) {
+            return;
+        }
+        if (!title.value) {
+            return;
+        }
+        name.patchValue(title.value.replace(/\W+/g, '-').replace(/\-$/, '').toLowerCase());
+        this.editDisabled$.next(false);
+    }
+    resetForm() {
+        setTimeout(() => {
+            this.formGroup.reset();
+            this.idError$.next(null);
+            this._editActive$.next(false);
+            this.editDisabled$.next(true);
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementCreateComponent, deps: [{ token: i1.DocumentService }, { token: i1$3.FormBuilder }, { token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementCreateComponent, selector: "valtimo-dossier-management-create", inputs: { open: "open" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{\n    editDisabled: editDisabled$ | async,\n    idError: idError$ | async,\n    editActive: editActive$ | async\n  } as obs\"\n  [open]=\"open\"\n  showFooter=\"true\"\n  valtimoCdsModal\n  class=\"valtimo-definition-create\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'dossierManagement.createDefinition.modalTitle' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form [formGroup]=\"formGroup\" cdsModalContent class=\"valtimo-definition-create__content\">\n    <cds-label>\n      {{ 'dossierManagement.createDefinition.title' | translate }}\n\n      <cds-tooltip\n        [caret]=\"true\"\n        [description]=\"'dossierManagement.createDefinition.titleTooltip' | translate\"\n      >\n        <svg class=\"tooltip-trigger\" cdsIcon=\"information\" size=\"16\"></svg>\n      </cds-tooltip>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{ 'dossierManagement.createDefinition.titlePlaceholder' | translate }}\"\n        [attr.modal-primary-focus]=\"true\"\n        (focusout)=\"onFocusOut()\"\n      />\n    </cds-label>\n\n    <cds-label [invalid]=\"!!obs.idError\" [invalidText]=\"obs.idError | translate\">\n      {{ 'dossierManagement.createDefinition.name' | translate }}\n\n      <cds-tooltip\n        [caret]=\"true\"\n        [description]=\"'dossierManagement.createDefinition.nameTooltip' | translate\"\n      >\n        <svg class=\"tooltip-trigger\" cdsIcon=\"information\" size=\"16\"></svg>\n      </cds-tooltip>\n\n      <div class=\"valtimo-definition-create__name\">\n        <input\n          cdsText\n          formControlName=\"name\"\n          [invalid]=\"!!obs.idError\"\n          [placeholder]=\"'dossierManagement.createDefinition.namePlaceholder' | translate\"\n          [attr.modal-primary-focus]=\"true\"\n        />\n\n        <button\n          *ngIf=\"!obs.editActive\"\n          cdsButton=\"secondary\"\n          [disabled]=\"obs.editDisabled\"\n          [iconOnly]=\"true\"\n          size=\"md\"\n          (click)=\"enableEdit()\"\n        >\n          <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    </cds-label>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"onCloseModal(true)\">\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-create__content{display:flex;flex-direction:column;gap:16px}.valtimo-definition-create__name{width:100%;display:flex;gap:8px}:host ::ng-deep .cds--label{display:flex;align-items:center;gap:12px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-management-create', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-modal\n  *ngIf=\"{\n    editDisabled: editDisabled$ | async,\n    idError: idError$ | async,\n    editActive: editActive$ | async\n  } as obs\"\n  [open]=\"open\"\n  showFooter=\"true\"\n  valtimoCdsModal\n  class=\"valtimo-definition-create\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'dossierManagement.createDefinition.modalTitle' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form [formGroup]=\"formGroup\" cdsModalContent class=\"valtimo-definition-create__content\">\n    <cds-label>\n      {{ 'dossierManagement.createDefinition.title' | translate }}\n\n      <cds-tooltip\n        [caret]=\"true\"\n        [description]=\"'dossierManagement.createDefinition.titleTooltip' | translate\"\n      >\n        <svg class=\"tooltip-trigger\" cdsIcon=\"information\" size=\"16\"></svg>\n      </cds-tooltip>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{ 'dossierManagement.createDefinition.titlePlaceholder' | translate }}\"\n        [attr.modal-primary-focus]=\"true\"\n        (focusout)=\"onFocusOut()\"\n      />\n    </cds-label>\n\n    <cds-label [invalid]=\"!!obs.idError\" [invalidText]=\"obs.idError | translate\">\n      {{ 'dossierManagement.createDefinition.name' | translate }}\n\n      <cds-tooltip\n        [caret]=\"true\"\n        [description]=\"'dossierManagement.createDefinition.nameTooltip' | translate\"\n      >\n        <svg class=\"tooltip-trigger\" cdsIcon=\"information\" size=\"16\"></svg>\n      </cds-tooltip>\n\n      <div class=\"valtimo-definition-create__name\">\n        <input\n          cdsText\n          formControlName=\"name\"\n          [invalid]=\"!!obs.idError\"\n          [placeholder]=\"'dossierManagement.createDefinition.namePlaceholder' | translate\"\n          [attr.modal-primary-focus]=\"true\"\n        />\n\n        <button\n          *ngIf=\"!obs.editActive\"\n          cdsButton=\"secondary\"\n          [disabled]=\"obs.editDisabled\"\n          [iconOnly]=\"true\"\n          size=\"md\"\n          (click)=\"enableEdit()\"\n        >\n          <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    </cds-label>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"onCloseModal(true)\">\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-create__content{display:flex;flex-direction:column;gap:16px}.valtimo-definition-create__name{width:100%;display:flex;gap:8px}:host ::ng-deep .cds--label{display:flex;align-items:center;gap:12px}\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.DocumentService }, { type: i1$3.FormBuilder }, { type: i2$2.IconService }], propDecorators: { open: [{
                 type: Input
             }], closeModal: [{
                 type: Output
             }] } });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2569,17 +3304,30 @@ class DossierManagementListComponent {
             { key: 'createdOn', label: 'fieldLabels.createdOn', viewType: ViewType.TEXT },
             { key: 'readOnly', label: 'fieldLabels.readOnly', viewType: ViewType.BOOLEAN },
         ];
-        this.showModal$ = new BehaviorSubject(false);
-        this.iconService.registerAll([Upload16]);
+        this.showCreateModal$ = new BehaviorSubject(false);
+        this.showUploadModal$ = new BehaviorSubject(false);
+        this.iconService.registerAll([Search20, TrashCan20, Upload16]);
     }
-    onCloseModal(definitionUploaded) {
-        this.showModal$.next(false);
+    onCloseUploadModal(definitionUploaded) {
+        this.showUploadModal$.next(false);
         if (!definitionUploaded) {
             return;
         }
         this._refreshData$.next(null);
         this.menuService.reload();
     }
+    onCloseCreateModal(templatePayload) {
+        this.showCreateModal$.next(false);
+        if (!templatePayload) {
+            return;
+        }
+        this.documentService
+            .createDocumentDefinitionTemplate(templatePayload)
+            .pipe(take(1))
+            .subscribe((response) => {
+            this.redirectToDetails(response.documentDefinition);
+        });
+    }
     paginationClicked(page) {
         this.pagination = { ...this.pagination, page };
         this._refreshData$.next(null);
@@ -2591,19 +3339,22 @@ class DossierManagementListComponent {
     redirectToDetails(documentDefinition) {
         this.router.navigate(['/dossier-management/dossier', documentDefinition.id.name]);
     }
-    showModal() {
-        this.showModal$.next(true);
+    showUploadModal() {
+        this.showUploadModal$.next(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementListComponent, deps: [{ token: i1.DocumentService }, { token: i4.IconService }, { token: i7.MenuService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementListComponent, selector: "valtimo-dossier-management-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-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>\n  <ng-container carbonToolbarContent [ngTemplateOutlet]=\"importCaseDefinitionButton\"></ng-container>\n\n  <valtimo-no-results\n    [action]=\"addCaseDefinitionButton\"\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\n<valtimo-dossier-management-upload\n  [open]=\"showModal$ | async\"\n  (closeModal)=\"onCloseModal($event)\"\n></valtimo-dossier-management-upload>\n\n<ng-template #importCaseDefinitionButton>\n  <button cdsButton=\"primary\" (click)=\"showModal()\">\n    <svg cdsIcon=\"upload\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'Import' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i4.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i7.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow"] }, { kind: "component", type: i7.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DossierManagementUploadComponent, selector: "valtimo-dossier-management-upload", inputs: ["open"], outputs: ["closeModal"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    showCreateModal() {
+        this.showCreateModal$.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementListComponent, deps: [{ token: i1.DocumentService }, { token: i2$2.IconService }, { token: i5.MenuService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementListComponent, selector: "valtimo-dossier-management-list", 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>\n  <ng-container carbonToolbarContent [ngTemplateOutlet]=\"importCaseDefinitionButton\"></ng-container>\n\n  <valtimo-no-results\n    [action]=\"addCaseDefinitionButton\"\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\n<valtimo-dossier-management-upload\n  [open]=\"showUploadModal$ | async\"\n  (closeModal)=\"onCloseUploadModal($event)\"\n></valtimo-dossier-management-upload>\n\n<valtimo-dossier-management-create\n  [open]=\"showCreateModal$ | async\"\n  (closeModal)=\"onCloseCreateModal($event)\"\n></valtimo-dossier-management-create>\n\n<ng-template #importCaseDefinitionButton>\n  <button cdsButton=\"ghost\" (click)=\"showUploadModal()\">\n    {{ 'Upload' | translate }}\n\n    <svg cdsIcon=\"upload\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n\n  <button cdsButton=\"primary\" (click)=\"showCreateModal()\">\n    {{ 'interface.create' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\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: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i5.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: i5.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DossierManagementUploadComponent, selector: "valtimo-dossier-management-upload", inputs: ["open"], outputs: ["closeModal"] }, { kind: "component", type: DossierManagementCreateComponent, selector: "valtimo-dossier-management-create", inputs: ["open"], outputs: ["closeModal"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-list', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-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>\n  <ng-container carbonToolbarContent [ngTemplateOutlet]=\"importCaseDefinitionButton\"></ng-container>\n\n  <valtimo-no-results\n    [action]=\"addCaseDefinitionButton\"\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\n<valtimo-dossier-management-upload\n  [open]=\"showModal$ | async\"\n  (closeModal)=\"onCloseModal($event)\"\n></valtimo-dossier-management-upload>\n\n<ng-template #importCaseDefinitionButton>\n  <button cdsButton=\"primary\" (click)=\"showModal()\">\n    <svg cdsIcon=\"upload\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'Import' | translate }}\n  </button>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i4.IconService }, { type: i7.MenuService }, { type: i2.Router }]; } });
+            args: [{ selector: 'valtimo-dossier-management-list', 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>\n  <ng-container carbonToolbarContent [ngTemplateOutlet]=\"importCaseDefinitionButton\"></ng-container>\n\n  <valtimo-no-results\n    [action]=\"addCaseDefinitionButton\"\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\n<valtimo-dossier-management-upload\n  [open]=\"showUploadModal$ | async\"\n  (closeModal)=\"onCloseUploadModal($event)\"\n></valtimo-dossier-management-upload>\n\n<valtimo-dossier-management-create\n  [open]=\"showCreateModal$ | async\"\n  (closeModal)=\"onCloseCreateModal($event)\"\n></valtimo-dossier-management-create>\n\n<ng-template #importCaseDefinitionButton>\n  <button cdsButton=\"ghost\" (click)=\"showUploadModal()\">\n    {{ 'Upload' | translate }}\n\n    <svg cdsIcon=\"upload\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\n\n  <button cdsButton=\"primary\" (click)=\"showCreateModal()\">\n    {{ 'interface.create' | translate }}\n\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n  </button>\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: i2$2.IconService }, { type: i5.MenuService }, { type: i2.Router }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2628,15 +3379,16 @@ const routes = [
         path: 'dossier-management/dossier/:name',
         component: DossierManagementDetailContainerComponent,
         canActivate: [AuthGuardService],
+        canDeactivate: [pendingChangesGuard],
         data: { title: 'Dossier details', roles: [ROLE_ADMIN], customPageTitle: true },
     },
 ];
 class DossierManagementRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRoutingModule, imports: [RouterModule.forRoot(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementRoutingModule, imports: [RouterModule.forRoot(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forRoot(routes)],
@@ -2646,7 +3398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2661,13 +3413,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * limitations under the License.
  */
 class DossierManagementModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementModule, declarations: [DossierManagementListComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementModule, declarations: [DossierManagementListComponent,
             DossierManagementDetailComponent,
             DossierManagementConnectModalComponent,
             DossierManagementRemoveModalComponent,
             DossierManagementUploadComponent,
-            DossierManagementLinkProcessComponent,
             DossierManagementSearchFieldsComponent,
             DossierManagementDetailContainerComponent,
             DossierManagementAssigneeComponent,
@@ -2679,7 +3430,10 @@ class DossierManagementModule {
             DossierManagementDetailContainerActionsComponent,
             DossierManagementDocumentDefinitionComponent,
             DossierManagementProcessesComponent,
-            DossierManagementUploadStepComponent], imports: [CommonModule,
+            DossierManagementUploadStepComponent,
+            DossierManagementStatusesComponent,
+            DossierManagementStatusModalComponent,
+            DossierManagementCreateComponent], imports: [CommonModule,
             WidgetModule,
             DropzoneModule,
             ListModule,
@@ -2722,8 +3476,11 @@ class DossierManagementModule {
             TabsModule,
             TagModule,
             FileUploaderModule,
-            ProgressBarModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementModule, providers: [TabManagementService], imports: [CommonModule,
+            ProgressBarModule,
+            ConfirmationModalModule,
+            ToggleModule,
+            TooltipModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementModule, providers: [TabManagementService], imports: [CommonModule,
             WidgetModule,
             DropzoneModule,
             ListModule,
@@ -2766,9 +3523,12 @@ class DossierManagementModule {
             TabsModule,
             TagModule,
             FileUploaderModule,
-            ProgressBarModule] }); }
+            ProgressBarModule,
+            ConfirmationModalModule,
+            ToggleModule,
+            TooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2777,7 +3537,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DossierManagementConnectModalComponent,
                         DossierManagementRemoveModalComponent,
                         DossierManagementUploadComponent,
-                        DossierManagementLinkProcessComponent,
                         DossierManagementSearchFieldsComponent,
                         DossierManagementDetailContainerComponent,
                         DossierManagementAssigneeComponent,
@@ -2790,6 +3549,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DossierManagementDocumentDefinitionComponent,
                         DossierManagementProcessesComponent,
                         DossierManagementUploadStepComponent,
+                        DossierManagementStatusesComponent,
+                        DossierManagementStatusModalComponent,
+                        DossierManagementCreateComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -2836,13 +3598,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TagModule,
                         FileUploaderModule,
                         ProgressBarModule,
+                        ConfirmationModalModule,
+                        ToggleModule,
+                        TooltipModule,
                     ],
                     providers: [TabManagementService],
                 }]
         }] });
 
 /*
- * Copyright 2015-2023 Ritense BV, the Netherlands.
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.