@valtimo/dossier-management 11.0.0 → 11.1.2

package/fesm2022/valtimo-dossier-management.mjs

@@ -1,30 +1,100 @@
-import * as i6 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Output, ViewChild, Input, Injectable, NgModule } from '@angular/core';
-import * as i5 from '@angular/forms';
+import { Component, EventEmitter, Output, ViewChild, Injectable, Optional, Inject, ChangeDetectionStrategy, Input, ViewEncapsulation, NgModule } from '@angular/core';
+import * as i2$1 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3$1 from '@ngx-translate/core';
+import * as i7 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 i6$1 from '@valtimo/components';
-import { ViewType, WidgetModule, DropzoneModule, ListModule, ModalModule, MultiselectDropdownModule, ParagraphModule, SelectModule, SpinnerModule, InputModule, FormModule, TooltipIconModule, CarbonMultiInputModule, ConfirmationModalModule, TableModule, ValtimoCdsModalDirectiveModule } from '@valtimo/components';
-import * as i1$2 from '@valtimo/config';
+import * as i6 from '@valtimo/components';
+import { ViewType, WidgetModule, DropzoneModule, ListModule, ModalModule, MultiselectDropdownModule, ParagraphModule, SelectModule, SpinnerModule, InputModule, FormModule, TooltipIconModule, CarbonMultiInputModule, ConfirmationModalModule, TableModule, ValtimoCdsModalDirectiveModule, CarbonListModule } from '@valtimo/components';
+import * as i1$3 from '@valtimo/config';
 import { UploadProvider, ROLE_ADMIN, ConfigModule } from '@valtimo/config';
-import * as i1 from '@valtimo/process';
-import * as i1$1 from '@valtimo/document';
+import * as i9 from 'carbon-components-angular';
+import { NotificationModule, ButtonModule, IconModule, ModalModule as ModalModule$1, InputModule as InputModule$1, DropdownModule, CheckboxModule, LoadingModule, LinkModule, ComboBoxModule } from 'carbon-components-angular';
+import { BehaviorSubject, map, switchMap, combineLatest, take, tap as tap$1, of, catchError, Subscription, filter, distinctUntilChanged, delay, startWith, Subject } from 'rxjs';
+import { tap, take as take$1, switchMap as switchMap$1 } from 'rxjs/operators';
+import * as i1 from '@valtimo/document';
 import { DocumentDefinitionCreateRequest } from '@valtimo/document';
-import * as i3 from 'ngx-toastr';
-import * as i7 from '@ng-bootstrap/ng-bootstrap';
-import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { BehaviorSubject, map, switchMap, Subject, Subscription, combineLatest, filter, tap as tap$1, take as take$1, distinctUntilChanged, of, delay, startWith } from 'rxjs';
-import { tap, switchMap as switchMap$1, take } from 'rxjs/operators';
+import * as i1$1 from '@valtimo/process';
+import * as i3$1 from 'ngx-toastr';
+import { DefaultTabs, CASE_TAB_TOKEN, ApiTabType } from '@valtimo/dossier';
+import * as i1$2 from '@valtimo/form';
+import * as i2$2 from '@angular/common/http';
+import * as i4$1 from '@angular/platform-browser';
+import { Code16, Development16, WatsonHealthPageScroll16, ArrowDown16, ArrowUp16 } from '@carbon/icons';
 import moment from 'moment';
 import { AuthGuardService } from '@valtimo/security';
-import * as i4 from '@angular/platform-browser';
-import * as i9 from 'carbon-components-angular';
-import { NotificationModule, ButtonModule, IconModule, ModalModule as ModalModule$1, InputModule as InputModule$1, DropdownModule, CheckboxModule, LoadingModule, LinkModule } from 'carbon-components-angular';
+
+/*
+ * 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 DossierManagementAssigneeComponent {
+    constructor(documentService, route) {
+        this.documentService = documentService;
+        this.route = route;
+        this.disabled$ = new BehaviorSubject(false);
+        this._refresh$ = new BehaviorSubject(null);
+        this.loading$ = new BehaviorSubject(true);
+        this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''));
+        this.currentValue$ = this._refresh$.pipe(switchMap(() => this.documentDefinitionName$), switchMap(documentDefinitionName => this.documentService.getCaseSettingsForManagement(documentDefinitionName)), tap(() => this.loading$.next(false)));
+        this.disabled$ = new BehaviorSubject(false);
+    }
+    updateCaseSettings(caseSettings, documentDefinitionName) {
+        this.disableInput();
+        this.documentService
+            .patchCaseSettingsForManagement(documentDefinitionName, caseSettings)
+            .subscribe(() => {
+            this.enableInput();
+            this.refreshSettings();
+        }, () => {
+            this.enableInput();
+        });
+    }
+    disableInput() {
+        this.disabled$.next(true);
+    }
+    enableInput() {
+        this.disabled$.next(false);
+    }
+    refreshSettings() {
+        this._refresh$.next(null);
+    }
+    toggleAssignee(currentSettings, documentDefinitionName) {
+        this.updateCaseSettings({
+            canHaveAssignee: !currentSettings.canHaveAssignee,
+            autoAssignTasks: currentSettings.autoAssignTasks,
+        }, documentDefinitionName);
+    }
+    toggleTaskAssignment(currentSettings, documentDefinitionName) {
+        this.updateCaseSettings({
+            canHaveAssignee: currentSettings.canHaveAssignee,
+            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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i4.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: [{
+            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 }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -95,19 +165,240 @@ class DossierManagementConnectModalComponent {
             this.toasterService.error('Failed to add new process document definition');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementConnectModalComponent, deps: [{ token: i1.ProcessService }, { token: i1$1.DocumentService }, { token: i3.ToastrService }], 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" }, 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "directive", type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementConnectModalComponent, deps: [{ token: i1$1.ProcessService }, { token: i1.DocumentService }, { token: i3$1.ToastrService }], 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" }, 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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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: i6.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "directive", type: i7.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: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-connect-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  #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.ProcessService }, { type: i1$1.DocumentService }, { type: i3.ToastrService }]; }, propDecorators: { reloadProcessDocumentDefinitions: [{
+        }], ctorParameters: function () { return [{ type: i1$1.ProcessService }, { type: i1.DocumentService }, { type: i3$1.ToastrService }]; }, propDecorators: { reloadProcessDocumentDefinitions: [{
                 type: Output
             }], modal: [{
                 type: ViewChild,
                 args: ['dossierConnectModal']
             }] } });
 
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+var TabEnum;
+(function (TabEnum) {
+    TabEnum["CASE"] = "case";
+    TabEnum["SEARCH"] = "search";
+    TabEnum["LIST"] = "list";
+    TabEnum["TABS"] = "tabs";
+})(TabEnum || (TabEnum = {}));
+
+/*
+ * 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.
+ */
+
+/*
+ * 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 TabService {
+    get currentTab$() {
+        return this._currentTab$.asObservable();
+    }
+    set currentTab(tab) {
+        this._currentTab$.next(tab);
+    }
+    get configuredContentKeys$() {
+        return this._configuredContentKeys$.asObservable();
+    }
+    set configuredContentKeys(value) {
+        this._configuredContentKeys$.next(value);
+    }
+    constructor(caseTabConfig, formService, translateService) {
+        this.caseTabConfig = caseTabConfig;
+        this.formService = formService;
+        this.translateService = translateService;
+        this._currentTab$ = new BehaviorSubject(TabEnum.CASE);
+        this._configuredContentKeys$ = new BehaviorSubject([]);
+        this.formDefinitions$ = this.formService
+            .getAllFormDefinitions()
+            .pipe(map((formDefinitions) => formDefinitions.map((formDefinition) => ({
+            contentKey: formDefinition.name,
+            content: formDefinition.name,
+            selected: false,
+        }))));
+        this.customComponentKeys$ = new BehaviorSubject(!this.caseTabConfig
+            ? []
+            : Object.keys(this.caseTabConfig).map((contentKey) => ({
+                contentKey,
+                content: contentKey,
+                selected: false,
+            })));
+        this.defaultTabs$ = this.translateService.stream('key').pipe(map(() => Object.values(DefaultTabs).map((key) => ({
+            contentKey: key,
+            content: this.translateService.instant(`dossier.tabs.${key}`),
+            selected: false,
+        }))));
+        this.disableAddTabs$ = combineLatest([
+            this.configuredContentKeys$,
+            this.formDefinitions$,
+            this.defaultTabs$,
+            this.customComponentKeys$,
+        ]).pipe(map(([tabKeys, formDefinitions, defaultTabs, customComponentKeys]) => ({
+            standard: defaultTabs.every((tabItem) => tabKeys.includes(tabItem.contentKey)),
+            custom: !customComponentKeys.length ||
+                customComponentKeys.every((tabItem) => tabKeys.includes(tabItem.contentKey)),
+            formIO: !formDefinitions.length ||
+                formDefinitions.every((tabItem) => tabKeys.includes(tabItem.contentKey)),
+        })));
+    }
+    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$2.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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CASE_TAB_TOKEN]
+                }] }, { type: i1$2.FormService }, { type: i3.TranslateService }]; } });
+
+class TabManagementService {
+    constructor(configService, http) {
+        this.configService = configService;
+        this.http = http;
+        this.tabs$ = new BehaviorSubject([]);
+        this.loading$ = new BehaviorSubject(false);
+        this._valtimoEndpointUri = `${this.configService.config.valtimoApi.endpointUri}management/v1/case-definition`;
+    }
+    loadTabs() {
+        this.loading$.next(true);
+        this.getTabList()
+            .pipe(take(1))
+            .subscribe({
+            next: (items) => {
+                this.tabs$.next(items);
+                this.loading$.next(false);
+            },
+            error: error => {
+                console.error(error);
+            },
+        });
+    }
+    dispatchAction(actionResult) {
+        actionResult
+            .pipe(tap$1(() => {
+            this.loading$.next(true);
+            this.tabs$.next([]);
+        }), switchMap((result) => Array.isArray(result) ? of(result) : this.getTabList()), take(1), catchError(error => of(error)))
+            .subscribe({
+            next: (tabs) => {
+                this.loading$.next(false);
+                this.tabs$.next(tabs);
+            },
+            error: error => {
+                console.log(error);
+            },
+        });
+    }
+    addTab(tab) {
+        return this.http.post(`${this._valtimoEndpointUri}/${this._caseDefinitionId}/tab`, this.getTabDto(tab));
+    }
+    deleteTab(tabKey) {
+        return this.http.delete(`${this._valtimoEndpointUri}/${this._caseDefinitionId}/tab/${tabKey}`);
+    }
+    editTab(tab, tabKey) {
+        return this.http.put(`${this._valtimoEndpointUri}/${this._caseDefinitionId}/tab/${tabKey}`, this.getTabDto(tab));
+    }
+    editTabsOrder(tabList) {
+        return this.http.put(`${this._valtimoEndpointUri}/${this._caseDefinitionId}/tab`, tabList);
+    }
+    setCaseDefinitionId(caseDefinitionId) {
+        this._caseDefinitionId = caseDefinitionId;
+    }
+    getTabList() {
+        return this.http.get(`${this._valtimoEndpointUri}/${this._caseDefinitionId}/tab`);
+    }
+    getTabDto(tab) {
+        if (tab.name === '') {
+            delete tab.name;
+        }
+        return tab;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabManagementService, deps: [{ token: i1$3.ConfigService }, { token: i2$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabManagementService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabManagementService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$3.ConfigService }, { type: i2$2.HttpClient }]; } });
+
+/*
+ * 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.
+ */
+
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
  *
@@ -148,13 +439,13 @@ class DossierManagementRemoveModalComponent {
             this.errors = result.errors;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRemoveModalComponent, deps: [{ token: i1$1.DocumentService }, { token: i3.ToastrService }, { token: i2.Router }, { token: i3$1.TranslateService }, { token: i6$1.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: i6$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRemoveModalComponent, deps: [{ token: i1.DocumentService }, { token: i3$1.ToastrService }, { token: i2.Router }, { token: i3.TranslateService }, { token: i6.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementRemoveModalComponent, 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$1.DocumentService }, { type: i3.ToastrService }, { type: i2.Router }, { type: i3$1.TranslateService }, { type: i6$1.MenuService }]; }, propDecorators: { modal: [{
+        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i3$1.ToastrService }, { type: i2.Router }, { type: i3.TranslateService }, { type: i6.MenuService }]; }, propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['documentDefinitionRemoveModal']
             }] } });
@@ -205,425 +496,32 @@ class DossierManagementLinkProcessComponent {
                 this.selectionId$.next(processLink.processDefinitionKey);
                 this.disabled$.next(false);
             });
-        }
-        else if (!processDefinitionKey) {
-            this.documentService.deleteLinkedUploadProcess(this.documentDefinitionName).subscribe(() => {
-                this.disabled$.next(false);
-            });
-        }
-    }
-    setDocumentenApiUploaderProvider(config) {
-        this.documentenApiUploadProvider = config.uploadProvider === UploadProvider.DOCUMENTEN_API;
-    }
-    getDefaultSelection() {
-        this.documentService
-            .getLinkedUploadProcess(this.documentDefinitionName)
-            .subscribe(linkedUploadProcess => {
-            if (linkedUploadProcess) {
-                this.selectionId$.next(linkedUploadProcess.processDefinitionKey);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementLinkProcessComponent, deps: [{ token: i1$2.ConfigService }, { token: i1.ProcessService }, { token: i2.ActivatedRoute }, { token: i1$1.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 mt-6\">{{ '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: i6$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i6$1.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$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementLinkProcessComponent, 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 mt-6\">{{ '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: i1.ProcessService }, { type: i2.ActivatedRoute }, { type: i1$1.DocumentService }]; } });
-
-/*
- * 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 DossierManagementAssigneeComponent {
-    constructor(documentService, route) {
-        this.documentService = documentService;
-        this.route = route;
-        this.disabled$ = new BehaviorSubject(false);
-        this._refresh$ = new BehaviorSubject(null);
-        this.loading$ = new BehaviorSubject(true);
-        this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''));
-        this.currentValue$ = this._refresh$.pipe(switchMap(() => this.documentDefinitionName$), switchMap(documentDefinitionName => this.documentService.getCaseSettingsForManagement(documentDefinitionName)), tap(() => this.loading$.next(false)));
-        this.disabled$ = new BehaviorSubject(false);
-    }
-    updateCaseSettings(caseSettings, documentDefinitionName) {
-        this.disableInput();
-        this.documentService
-            .patchCaseSettingsForManagement(documentDefinitionName, caseSettings)
-            .subscribe(() => {
-            this.enableInput();
-            this.refreshSettings();
-        }, () => {
-            this.enableInput();
-        });
-    }
-    disableInput() {
-        this.disabled$.next(true);
-    }
-    enableInput() {
-        this.disabled$.next(false);
-    }
-    refreshSettings() {
-        this._refresh$.next(null);
-    }
-    toggleAssignee(currentSettings, documentDefinitionName) {
-        this.updateCaseSettings({
-            canHaveAssignee: !currentSettings.canHaveAssignee,
-            autoAssignTasks: currentSettings.autoAssignTasks,
-        }, documentDefinitionName);
-    }
-    toggleTaskAssignment(currentSettings, documentDefinitionName) {
-        this.updateCaseSettings({
-            canHaveAssignee: currentSettings.canHaveAssignee,
-            autoAssignTasks: !currentSettings.autoAssignTasks,
-        }, documentDefinitionName);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementAssigneeComponent, deps: [{ token: i1$1.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: i6$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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$1.DocumentService }, { type: i2.ActivatedRoute }]; } });
-
-/*
- * 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 DossierManagementDetailComponent {
-    constructor(documentService, route, alertService) {
-        this.documentService = documentService;
-        this.route = route;
-        this.alertService = alertService;
-        this.documentDefinitionName = null;
-        this.documentDefinition = null;
-        this.processDocumentDefinitions = [];
-        this.documentDefinitionName = this.route.snapshot.paramMap.get('name');
-    }
-    ngOnInit() {
-        this.loadDocumentDefinition();
-        this.loadProcessDocumentDefinitions();
-    }
-    loadProcessDocumentDefinitions() {
-        this.documentService
-            .findProcessDocumentDefinitions(this.documentDefinitionName)
-            .subscribe((processDocumentDefinitions) => {
-            this.processDocumentDefinitions = processDocumentDefinitions;
-        });
-    }
-    loadDocumentDefinition() {
-        this.documentService
-            .getDocumentDefinitionForManagement(this.documentDefinitionName)
-            .subscribe((documentDefinition) => {
-            this.documentDefinition = documentDefinition;
-        });
-    }
-    openDossierConnectModal() {
-        this.dossierConnectModal.openModal(this.documentDefinition);
-    }
-    openDossierRemoveModal() {
-        this.dossierRemoveModal.openModal(this.documentDefinition);
-    }
-    deleteProcessDocumentDefinition(processDocumentDefinition) {
-        this.documentService
-            .deleteProcessDocumentDefinition({
-            documentDefinitionName: processDocumentDefinition.id.documentDefinitionId.name,
-            processDefinitionKey: processDocumentDefinition.id.processDefinitionKey,
-            canInitializeDocument: processDocumentDefinition.canInitializeDocument,
-            startableByUser: processDocumentDefinition.startableByUser,
-        })
-            .subscribe(() => {
-            this.alertService.success('Successfully deleted process document definition');
-            this.loadProcessDocumentDefinitions();
-        }, () => {
-            this.alertService.error('Failed to delete process document definition');
-        });
-    }
-    downloadDefinition() {
-        const definition = this.documentDefinition;
-        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();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i6$1.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail", viewQueries: [{ propertyName: "dossierConnectModal", first: true, predicate: ["dossierConnectModal"], 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 id=\"management-datail-content\" class=\"pt-0\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <div class=\"clearfix\"></div>\n  <ng-container *ngTemplateOutlet=\"widget\"></ng-container>\n</div>\n\n<ng-template #widget>\n  <valtimo-widget *ngIf=\"documentDefinition\">\n    <div class=\"row bg-white mt-5 mb-2 pl-2 pr-2\">\n      <div class=\"col-5\">\n        <h2>{{ 'document definition' | translate }}</h2>\n      </div>\n      <div class=\"col-5 offset-2\">\n        <h2>{{ 'dossierManagement.connectedProcesses' | translate }}</h2>\n      </div>\n    </div>\n    <div class=\"row bg-white mb-5 pb-4 pl-2 pr-2\">\n      <div class=\"col-5 bg-red\">\n        <textarea class=\"w-100 dossier-schema\" disabled rows=\"25\"\n          >{{ documentDefinition | json }}\n          </textarea\n        >\n      </div>\n      <div class=\"col-5 offset-2 bg-blue\">\n        <div\n          *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n          class=\"input-group mb-5\"\n        >\n          <div class=\"input-group-prepend w-75\">\n            <button\n              (click)=\"deleteProcessDocumentDefinition(processDocumentDefinition)\"\n              class=\"btn btn-danger\"\n              data-placement=\"left\"\n              data-toggle=\"tooltip\"\n              title=\"Delete this connected process\"\n            >\n              <i class=\"icon mdi mdi-delete mr-1\"></i>\n            </button>\n            <input\n              [value]=\"\n                processDocumentDefinition.processName\n                  ? processDocumentDefinition.processName\n                  : '' + ' (' + processDocumentDefinition.id.processDefinitionKey + ')'\n              \"\n              class=\"form-control\"\n              disabled\n              type=\"text\"\n            />\n          </div>\n          <div class=\"row mb-2 mt-2\">\n            <label\n              class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n              ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n              placement=\"bottom\"\n            >\n              <input\n                [checked]=\"processDocumentDefinition.canInitializeDocument\"\n                class=\"custom-control-input\"\n                disabled\n                type=\"checkbox\"\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 pl-6\"\n              ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n              placement=\"bottom\"\n            >\n              <input\n                [checked]=\"processDocumentDefinition.startableByUser\"\n                class=\"custom-control-input\"\n                disabled\n                type=\"checkbox\"\n              /><span class=\"custom-control-label custom-control-color\">{{\n                'processCaseConnection.startableWithinCase' | translate\n              }}</span>\n            </label>\n          </div>\n        </div>\n        <div class=\"text-right mt-5 mb-5\">\n          <button (click)=\"openDossierConnectModal()\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-plus mr-1\"></i\n            >{{ 'dossierManagement.connectProcess' | translate }}\n          </button>\n        </div>\n        <valtimo-dossier-management-link-process></valtimo-dossier-management-link-process\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</ng-template>\n\n<ng-template #buttons>\n  <div *ngIf=\"documentDefinition\" class=\"btn-group mt-m3px mb-3 pr-2 float-right\">\n    <button (click)=\"downloadDefinition()\" class=\"btn btn-primary btn-space\">\n      <i class=\"icon mdi mdi-download mr-1\"></i>\n      {{ 'Download document definition' | translate }}\n    </button>\n    <a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n    <button\n      (click)=\"openDossierRemoveModal()\"\n      *ngIf=\"!this.documentDefinition.readOnly\"\n      class=\"btn btn-secondary btn-space mr-0\"\n    >\n      <i class=\"icon mdi mdi-delete mr-1\"></i>\n      {{ 'Remove document definition' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<valtimo-dossier-management-connect-modal\n  #dossierConnectModal\n  (reloadProcessDocumentDefinitions)=\"loadProcessDocumentDefinitions()\"\n></valtimo-dossier-management-connect-modal>\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 */.row{margin:0}.dossier-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{border:none}\n"], dependencies: [{ kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$1.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: "directive", type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: DossierManagementConnectModalComponent, selector: "valtimo-dossier-management-connect-modal", outputs: ["reloadProcessDocumentDefinitions"] }, { kind: "component", type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal" }, { kind: "component", type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process" }, { kind: "component", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee" }, { kind: "pipe", type: i6.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 id=\"management-datail-content\" class=\"pt-0\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <div class=\"clearfix\"></div>\n  <ng-container *ngTemplateOutlet=\"widget\"></ng-container>\n</div>\n\n<ng-template #widget>\n  <valtimo-widget *ngIf=\"documentDefinition\">\n    <div class=\"row bg-white mt-5 mb-2 pl-2 pr-2\">\n      <div class=\"col-5\">\n        <h2>{{ 'document definition' | translate }}</h2>\n      </div>\n      <div class=\"col-5 offset-2\">\n        <h2>{{ 'dossierManagement.connectedProcesses' | translate }}</h2>\n      </div>\n    </div>\n    <div class=\"row bg-white mb-5 pb-4 pl-2 pr-2\">\n      <div class=\"col-5 bg-red\">\n        <textarea class=\"w-100 dossier-schema\" disabled rows=\"25\"\n          >{{ documentDefinition | json }}\n          </textarea\n        >\n      </div>\n      <div class=\"col-5 offset-2 bg-blue\">\n        <div\n          *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n          class=\"input-group mb-5\"\n        >\n          <div class=\"input-group-prepend w-75\">\n            <button\n              (click)=\"deleteProcessDocumentDefinition(processDocumentDefinition)\"\n              class=\"btn btn-danger\"\n              data-placement=\"left\"\n              data-toggle=\"tooltip\"\n              title=\"Delete this connected process\"\n            >\n              <i class=\"icon mdi mdi-delete mr-1\"></i>\n            </button>\n            <input\n              [value]=\"\n                processDocumentDefinition.processName\n                  ? processDocumentDefinition.processName\n                  : '' + ' (' + processDocumentDefinition.id.processDefinitionKey + ')'\n              \"\n              class=\"form-control\"\n              disabled\n              type=\"text\"\n            />\n          </div>\n          <div class=\"row mb-2 mt-2\">\n            <label\n              class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n              ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n              placement=\"bottom\"\n            >\n              <input\n                [checked]=\"processDocumentDefinition.canInitializeDocument\"\n                class=\"custom-control-input\"\n                disabled\n                type=\"checkbox\"\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 pl-6\"\n              ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n              placement=\"bottom\"\n            >\n              <input\n                [checked]=\"processDocumentDefinition.startableByUser\"\n                class=\"custom-control-input\"\n                disabled\n                type=\"checkbox\"\n              /><span class=\"custom-control-label custom-control-color\">{{\n                'processCaseConnection.startableWithinCase' | translate\n              }}</span>\n            </label>\n          </div>\n        </div>\n        <div class=\"text-right mt-5 mb-5\">\n          <button (click)=\"openDossierConnectModal()\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-plus mr-1\"></i\n            >{{ 'dossierManagement.connectProcess' | translate }}\n          </button>\n        </div>\n        <valtimo-dossier-management-link-process></valtimo-dossier-management-link-process\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</ng-template>\n\n<ng-template #buttons>\n  <div *ngIf=\"documentDefinition\" class=\"btn-group mt-m3px mb-3 pr-2 float-right\">\n    <button (click)=\"downloadDefinition()\" class=\"btn btn-primary btn-space\">\n      <i class=\"icon mdi mdi-download mr-1\"></i>\n      {{ 'Download document definition' | translate }}\n    </button>\n    <a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n    <button\n      (click)=\"openDossierRemoveModal()\"\n      *ngIf=\"!this.documentDefinition.readOnly\"\n      class=\"btn btn-secondary btn-space mr-0\"\n    >\n      <i class=\"icon mdi mdi-delete mr-1\"></i>\n      {{ 'Remove document definition' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<valtimo-dossier-management-connect-modal\n  #dossierConnectModal\n  (reloadProcessDocumentDefinitions)=\"loadProcessDocumentDefinitions()\"\n></valtimo-dossier-management-connect-modal>\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 */.row{margin:0}.dossier-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{border:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.ActivatedRoute }, { type: i6$1.AlertService }]; }, propDecorators: { dossierConnectModal: [{
-                type: ViewChild,
-                args: ['dossierConnectModal']
-            }], dossierRemoveModal: [{
-                type: ViewChild,
-                args: ['dossierRemoveModal']
-            }] } });
-
-/*
- * 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 DossierManagementUploadComponent {
-    constructor(documentService, translateService, menuService) {
-        this.documentService = documentService;
-        this.translateService = translateService;
-        this.menuService = menuService;
-        this.definitionUploaded = new EventEmitter();
-        this.clear$ = new Subject();
-        this.jsonString$ = new BehaviorSubject('');
-        this.error$ = new BehaviorSubject('');
-        this.disabled$ = new BehaviorSubject(false);
-        this.file$ = new BehaviorSubject(undefined);
-    }
-    ngAfterViewInit() {
-        this.openShowSubscription();
-        this.openFileSubscription();
-    }
-    ngOnDestroy() {
-        this.showSubscription.unsubscribe();
-        this.fileSubscription.unsubscribe();
-        this.closeErrorSubscription();
-    }
-    setFile(file) {
-        this.clearError();
-        this.file$.next(file);
-    }
-    uploadDefinition() {
-        this.disable();
-        this.jsonString$
-            .pipe(switchMap$1(jsonString => this.documentService
-            .createDocumentDefinitionForManagement(new DocumentDefinitionCreateRequest(jsonString))
-            .pipe(tap(
-        // success
-        () => {
-            this.closeErrorSubscription();
-            this.clearError();
-            this.enable();
-            this.hideModal();
-            this.menuService.reload();
-            this.definitionUploaded.emit();
-        }, 
-        // error
-        () => {
-            this.openErrorSubscription('dropzone.error.invalidDocDef');
-            this.enable();
-        }))), take(1))
-            .subscribe();
-    }
-    openErrorSubscription(errorCode) {
-        this.closeErrorSubscription();
-        this.errorSubscription = this.translateService.stream(errorCode).subscribe(error => {
-            this.error$.next(error);
-        });
-    }
-    closeErrorSubscription() {
-        if (this.errorSubscription) {
-            this.errorSubscription.unsubscribe();
-        }
-    }
-    clearError() {
-        this.error$.next('');
-    }
-    openFileSubscription() {
-        this.fileSubscription = this.file$.subscribe(file => {
-            if (file) {
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                    const result = reader.result.toString();
-                    if (this.stringIsValidJson(result)) {
-                        this.jsonString$.next(result);
-                    }
-                    else {
-                        this.clearJsonString();
-                        this.error$.next(this.translateService.instant('dropzone.error.invalidJson'));
-                    }
-                };
-                reader.readAsText(file);
-            }
-            else {
-                this.clearJsonString();
-            }
-        });
-    }
-    openShowSubscription() {
-        this.showSubscription = this.show$.subscribe(show => {
-            if (show) {
-                this.showModal();
-            }
-            else {
-                this.hideModal();
-            }
-            this.clearJsonString();
-            this.clearError();
-            this.clearDropzone();
-        });
-    }
-    clearJsonString() {
-        this.jsonString$.next('');
-    }
-    clearDropzone() {
-        this.clear$.next(null);
-    }
-    showModal() {
-        this.modal.show();
-    }
-    hideModal() {
-        this.modal.hide();
-    }
-    stringIsValidJson(string) {
-        try {
-            JSON.parse(string);
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    }
-    disable() {
-        this.disabled$.next(true);
-    }
-    enable() {
-        this.disabled$.next(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementUploadComponent, deps: [{ token: i1$1.DocumentService }, { token: i3$1.TranslateService }, { token: i6$1.MenuService }], 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: { show$: "show$" }, outputs: { definitionUploaded: "definitionUploaded" }, 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<valtimo-modal\n  #uploadDefinitionModal\n  [title]=\"'Upload document definition' | translate\"\n  showFooter=\"true\"\n>\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n      [clear$]=\"clear$\"\n      (fileSelected)=\"setFile($event)\"\n      [disabled]=\"disabled$ | async\"\n      [subtitle]=\"'dropzone.jsonDocDef' | translate\"\n      [externalError$]=\"error$\"\n      [maxFiles]=\"1\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else disabledUpload\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #disabledUpload>\n  <button [disabled]=\"true\" class=\"btn btn-primary\">\n    <i class=\"icon mdi mdi-upload mr-1\"></i>\n    {{ 'Upload' | 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: "component", type: i6$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i6$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementUploadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-dossier-management-upload', 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  #uploadDefinitionModal\n  [title]=\"'Upload document definition' | translate\"\n  showFooter=\"true\"\n>\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n      [clear$]=\"clear$\"\n      (fileSelected)=\"setFile($event)\"\n      [disabled]=\"disabled$ | async\"\n      [subtitle]=\"'dropzone.jsonDocDef' | translate\"\n      [externalError$]=\"error$\"\n      [maxFiles]=\"1\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else disabledUpload\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #disabledUpload>\n  <button [disabled]=\"true\" class=\"btn btn-primary\">\n    <i class=\"icon mdi mdi-upload mr-1\"></i>\n    {{ 'Upload' | 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$1.DocumentService }, { type: i3$1.TranslateService }, { type: i6$1.MenuService }]; }, propDecorators: { show$: [{
-                type: Input
-            }], definitionUploaded: [{
-                type: Output
-            }], modal: [{
-                type: ViewChild,
-                args: ['uploadDefinitionModal']
-            }] } });
-
-/*
- * 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.
- */
-moment.locale(localStorage.getItem('langKey') || '');
-class DossierManagementListComponent {
-    constructor(documentService, router) {
-        this.documentService = documentService;
-        this.router = router;
-        this.dossiers = [];
-        this.pagination = {
-            collectionSize: 0,
-            page: 1,
-            size: 10,
-        };
-        this.pageParam = 0;
-        this.dossierFields = [
-            { key: 'schema.title', label: 'Title' },
-            { key: 'createdOn', label: 'Created On' },
-            { key: 'readOnly', label: 'Read-only' },
-        ];
-        this.showModal$ = new BehaviorSubject(false);
-    }
-    paginationClicked(page) {
-        this.pageParam = page - 1;
-        this.getDocumentDefinitions();
-    }
-    paginationSet() {
-        this.getDocumentDefinitions();
-    }
-    redirectToDetails(documentDefinition) {
-        this.router.navigate(['/dossier-management/dossier', documentDefinition.id.name]);
-    }
-    getDocumentDefinitions() {
-        this.documentService
-            .queryDefinitionsForManagement({ page: this.pageParam, size: this.pagination.size })
-            .subscribe((documentDefinitionPage) => {
-            this.pagination.collectionSize = documentDefinitionPage.totalElements;
-            this.dossiers = documentDefinitionPage.content;
-            this.dossiers.map((dossier) => {
-                dossier.createdOn = moment(dossier.createdOn).format('DD MMM YYYY HH:mm');
-            });
-        });
-    }
-    showModal() {
-        this.showModal$.next(true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementListComponent, deps: [{ token: i1$1.DocumentService }, { 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<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-secondary btn-space mr-0\" (click)=\"showModal()\">\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload document definition' | translate }}\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"dossiers\"\n        [fields]=\"dossierFields\"\n        [header]=\"true\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"true\"\n        [pagination]=\"pagination\"\n        paginationIdentifier=\"dossierManagementList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        (paginationSet)=\"paginationSet()\"\n        (rowClicked)=\"redirectToDetails($event)\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'Dossiers' | translate }}</h3>\n          <h5 class=\"list-header-description\">{{ 'Overview of all Dossiers' | translate }}</h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n\n<valtimo-dossier-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"paginationSet()\"\n></valtimo-dossier-management-upload>\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: "component", type: i6$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i6$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: DossierManagementUploadComponent, selector: "valtimo-dossier-management-upload", inputs: ["show$"], outputs: ["definitionUploaded"] }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-secondary btn-space mr-0\" (click)=\"showModal()\">\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload document definition' | translate }}\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"dossiers\"\n        [fields]=\"dossierFields\"\n        [header]=\"true\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"true\"\n        [pagination]=\"pagination\"\n        paginationIdentifier=\"dossierManagementList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        (paginationSet)=\"paginationSet()\"\n        (rowClicked)=\"redirectToDetails($event)\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'Dossiers' | translate }}</h3>\n          <h5 class=\"list-header-description\">{{ 'Overview of all Dossiers' | translate }}</h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n\n<valtimo-dossier-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"paginationSet()\"\n></valtimo-dossier-management-upload>\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$1.DocumentService }, { type: i2.Router }]; } });
-
-/*
- * 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.
- */
-var TabEnum;
-(function (TabEnum) {
-    TabEnum["CASE"] = "case";
-    TabEnum["SEARCH"] = "search";
-    TabEnum["LIST"] = "list";
-})(TabEnum || (TabEnum = {}));
+        }
+        else if (!processDefinitionKey) {
+            this.documentService.deleteLinkedUploadProcess(this.documentDefinitionName).subscribe(() => {
+                this.disabled$.next(false);
+            });
+        }
+    }
+    setDocumentenApiUploaderProvider(config) {
+        this.documentenApiUploadProvider = config.uploadProvider === UploadProvider.DOCUMENTEN_API;
+    }
+    getDefaultSelection() {
+        this.documentService
+            .getLinkedUploadProcess(this.documentDefinitionName)
+            .subscribe(linkedUploadProcess => {
+            if (linkedUploadProcess) {
+                this.selectionId$.next(linkedUploadProcess.processDefinitionKey);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementLinkProcessComponent, deps: [{ token: i1$3.ConfigService }, { token: i1$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 mt-6\">{{ '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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i6.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementLinkProcessComponent, 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 mt-6\">{{ '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$3.ConfigService }, { type: i1$1.ProcessService }, { type: i2.ActivatedRoute }, { type: i1.DocumentService }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -640,25 +538,77 @@ var TabEnum;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class TabService {
-    constructor() {
-        this._currentTab$ = new BehaviorSubject(TabEnum.CASE);
+class DossierManagementDetailComponent {
+    constructor(documentService, route, alertService) {
+        this.documentService = documentService;
+        this.route = route;
+        this.alertService = alertService;
+        this.documentDefinitionName = null;
+        this.documentDefinition = null;
+        this.processDocumentDefinitions = [];
+        this.documentDefinitionName = this.route.snapshot.paramMap.get('name');
     }
-    get currentTab$() {
-        return this._currentTab$.asObservable();
+    ngOnInit() {
+        this.loadDocumentDefinition();
+        this.loadProcessDocumentDefinitions();
     }
-    set currentTab(tab) {
-        this._currentTab$.next(tab);
+    loadProcessDocumentDefinitions() {
+        this.documentService
+            .findProcessDocumentDefinitions(this.documentDefinitionName)
+            .subscribe((processDocumentDefinitions) => {
+            this.processDocumentDefinitions = processDocumentDefinitions;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabService, providedIn: 'root' }); }
+    loadDocumentDefinition() {
+        this.documentService
+            .getDocumentDefinitionForManagement(this.documentDefinitionName)
+            .subscribe((documentDefinition) => {
+            this.documentDefinition = documentDefinition;
+        });
+    }
+    openDossierConnectModal() {
+        this.dossierConnectModal.openModal(this.documentDefinition);
+    }
+    openDossierRemoveModal() {
+        this.dossierRemoveModal.openModal(this.documentDefinition);
+    }
+    deleteProcessDocumentDefinition(processDocumentDefinition) {
+        this.documentService
+            .deleteProcessDocumentDefinition({
+            documentDefinitionName: processDocumentDefinition.id.documentDefinitionId.name,
+            processDefinitionKey: processDocumentDefinition.id.processDefinitionKey,
+            canInitializeDocument: processDocumentDefinition.canInitializeDocument,
+            startableByUser: processDocumentDefinition.startableByUser,
+        })
+            .subscribe(() => {
+            this.alertService.success('Successfully deleted process document definition');
+            this.loadProcessDocumentDefinitions();
+        }, () => {
+            this.alertService.error('Failed to delete process document definition');
+        });
+    }
+    downloadDefinition() {
+        const definition = this.documentDefinition;
+        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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: i6.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail", viewQueries: [{ propertyName: "dossierConnectModal", first: true, predicate: ["dossierConnectModal"], 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 id=\"management-datail-content\" class=\"pt-0\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <div class=\"clearfix\"></div>\n  <ng-container *ngTemplateOutlet=\"widget\"></ng-container>\n</div>\n\n<ng-template #widget>\n  <valtimo-widget *ngIf=\"documentDefinition\">\n    <div class=\"row bg-white mt-5 mb-2 pl-2 pr-2\">\n      <div class=\"col-5\">\n        <h2>{{ 'document definition' | translate }}</h2>\n      </div>\n      <div class=\"col-5 offset-2\">\n        <h2>{{ 'dossierManagement.connectedProcesses' | translate }}</h2>\n      </div>\n    </div>\n    <div class=\"row bg-white mb-5 pb-4 pl-2 pr-2\">\n      <div class=\"col-5 bg-red\">\n        <textarea class=\"w-100 dossier-schema\" disabled rows=\"25\"\n          >{{ documentDefinition | json }}\n          </textarea\n        >\n      </div>\n      <div class=\"col-5 offset-2 bg-blue\">\n        <div\n          *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n          class=\"input-group mb-5\"\n        >\n          <div class=\"input-group-prepend w-75\">\n            <button\n              (click)=\"deleteProcessDocumentDefinition(processDocumentDefinition)\"\n              class=\"btn btn-danger\"\n              data-placement=\"left\"\n              data-toggle=\"tooltip\"\n              title=\"Delete this connected process\"\n            >\n              <i class=\"icon mdi mdi-delete mr-1\"></i>\n            </button>\n            <input\n              [value]=\"\n                processDocumentDefinition.processName\n                  ? processDocumentDefinition.processName\n                  : '' + ' (' + processDocumentDefinition.id.processDefinitionKey + ')'\n              \"\n              class=\"form-control\"\n              disabled\n              type=\"text\"\n            />\n          </div>\n          <div class=\"row mb-2 mt-2\">\n            <label\n              class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n              ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n              placement=\"bottom\"\n            >\n              <input\n                [checked]=\"processDocumentDefinition.canInitializeDocument\"\n                class=\"custom-control-input\"\n                disabled\n                type=\"checkbox\"\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 pl-6\"\n              ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n              placement=\"bottom\"\n            >\n              <input\n                [checked]=\"processDocumentDefinition.startableByUser\"\n                class=\"custom-control-input\"\n                disabled\n                type=\"checkbox\"\n              /><span class=\"custom-control-label custom-control-color\">{{\n                'processCaseConnection.startableWithinCase' | translate\n              }}</span>\n            </label>\n          </div>\n        </div>\n        <div class=\"text-right mt-5 mb-5\">\n          <button (click)=\"openDossierConnectModal()\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-plus mr-1\"></i\n            >{{ 'dossierManagement.connectProcess' | translate }}\n          </button>\n        </div>\n        <valtimo-dossier-management-link-process></valtimo-dossier-management-link-process\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</ng-template>\n\n<ng-template #buttons>\n  <div *ngIf=\"documentDefinition\" class=\"btn-group mt-m3px mb-3 pr-2 float-right\">\n    <button (click)=\"downloadDefinition()\" class=\"btn btn-primary btn-space\">\n      <i class=\"icon mdi mdi-download mr-1\"></i>\n      {{ 'Download document definition' | translate }}\n    </button>\n    <a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n    <button\n      (click)=\"openDossierRemoveModal()\"\n      *ngIf=\"!this.documentDefinition.readOnly\"\n      class=\"btn btn-secondary btn-space mr-0\"\n    >\n      <i class=\"icon mdi mdi-delete mr-1\"></i>\n      {{ 'Remove document definition' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<valtimo-dossier-management-connect-modal\n  #dossierConnectModal\n  (reloadProcessDocumentDefinitions)=\"loadProcessDocumentDefinitions()\"\n></valtimo-dossier-management-connect-modal>\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 */.row{margin:0}.dossier-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{border:none}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i1$3.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { kind: "directive", type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: DossierManagementConnectModalComponent, selector: "valtimo-dossier-management-connect-modal", outputs: ["reloadProcessDocumentDefinitions"] }, { kind: "component", type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal" }, { kind: "component", type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process" }, { kind: "component", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee" }, { kind: "pipe", type: i4.JsonPipe, name: "json" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 id=\"management-datail-content\" class=\"pt-0\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <div class=\"clearfix\"></div>\n  <ng-container *ngTemplateOutlet=\"widget\"></ng-container>\n</div>\n\n<ng-template #widget>\n  <valtimo-widget *ngIf=\"documentDefinition\">\n    <div class=\"row bg-white mt-5 mb-2 pl-2 pr-2\">\n      <div class=\"col-5\">\n        <h2>{{ 'document definition' | translate }}</h2>\n      </div>\n      <div class=\"col-5 offset-2\">\n        <h2>{{ 'dossierManagement.connectedProcesses' | translate }}</h2>\n      </div>\n    </div>\n    <div class=\"row bg-white mb-5 pb-4 pl-2 pr-2\">\n      <div class=\"col-5 bg-red\">\n        <textarea class=\"w-100 dossier-schema\" disabled rows=\"25\"\n          >{{ documentDefinition | json }}\n          </textarea\n        >\n      </div>\n      <div class=\"col-5 offset-2 bg-blue\">\n        <div\n          *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n          class=\"input-group mb-5\"\n        >\n          <div class=\"input-group-prepend w-75\">\n            <button\n              (click)=\"deleteProcessDocumentDefinition(processDocumentDefinition)\"\n              class=\"btn btn-danger\"\n              data-placement=\"left\"\n              data-toggle=\"tooltip\"\n              title=\"Delete this connected process\"\n            >\n              <i class=\"icon mdi mdi-delete mr-1\"></i>\n            </button>\n            <input\n              [value]=\"\n                processDocumentDefinition.processName\n                  ? processDocumentDefinition.processName\n                  : '' + ' (' + processDocumentDefinition.id.processDefinitionKey + ')'\n              \"\n              class=\"form-control\"\n              disabled\n              type=\"text\"\n            />\n          </div>\n          <div class=\"row mb-2 mt-2\">\n            <label\n              class=\"custom-control custom-checkbox custom-control-inline pl-6 mr-5\"\n              ngbTooltip=\"{{ 'processCaseConnection.processCreatesCaseTooltip' | translate }}\"\n              placement=\"bottom\"\n            >\n              <input\n                [checked]=\"processDocumentDefinition.canInitializeDocument\"\n                class=\"custom-control-input\"\n                disabled\n                type=\"checkbox\"\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 pl-6\"\n              ngbTooltip=\"{{ 'processCaseConnection.startableWithinCaseTooltip' | translate }}\"\n              placement=\"bottom\"\n            >\n              <input\n                [checked]=\"processDocumentDefinition.startableByUser\"\n                class=\"custom-control-input\"\n                disabled\n                type=\"checkbox\"\n              /><span class=\"custom-control-label custom-control-color\">{{\n                'processCaseConnection.startableWithinCase' | translate\n              }}</span>\n            </label>\n          </div>\n        </div>\n        <div class=\"text-right mt-5 mb-5\">\n          <button (click)=\"openDossierConnectModal()\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-plus mr-1\"></i\n            >{{ 'dossierManagement.connectProcess' | translate }}\n          </button>\n        </div>\n        <valtimo-dossier-management-link-process></valtimo-dossier-management-link-process\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</ng-template>\n\n<ng-template #buttons>\n  <div *ngIf=\"documentDefinition\" class=\"btn-group mt-m3px mb-3 pr-2 float-right\">\n    <button (click)=\"downloadDefinition()\" class=\"btn btn-primary btn-space\">\n      <i class=\"icon mdi mdi-download mr-1\"></i>\n      {{ 'Download document definition' | translate }}\n    </button>\n    <a id=\"downloadAnchorElement\" style=\"display: none\"></a>\n    <button\n      (click)=\"openDossierRemoveModal()\"\n      *ngIf=\"!this.documentDefinition.readOnly\"\n      class=\"btn btn-secondary btn-space mr-0\"\n    >\n      <i class=\"icon mdi mdi-delete mr-1\"></i>\n      {{ 'Remove document definition' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<valtimo-dossier-management-connect-modal\n  #dossierConnectModal\n  (reloadProcessDocumentDefinitions)=\"loadProcessDocumentDefinitions()\"\n></valtimo-dossier-management-connect-modal>\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 */.row{margin:0}.dossier-schema{resize:none}valtimo-widget::ng-deep .card-border.card-full-default{border:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i6.AlertService }]; }, propDecorators: { dossierConnectModal: [{
+                type: ViewChild,
+                args: ['dossierConnectModal']
+            }], dossierRemoveModal: [{
+                type: ViewChild,
+                args: ['dossierRemoveModal']
+            }] } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -796,7 +746,7 @@ class DossierManagementSearchFieldsComponent {
             this.documentDefinitionName$,
             this.refreshSearchFields$,
         ]).pipe(switchMap(([documentDefinitionName]) => this.documentService.getDocumentSearchFields(documentDefinitionName)), tap$1(searchFields => {
-            this.documentDefinitionName$.pipe(take$1(1)).subscribe(documentDefinitionName => {
+            this.documentDefinitionName$.pipe(take(1)).subscribe(documentDefinitionName => {
                 if (searchFields && Array.isArray(searchFields) && searchFields.length > 0) {
                     this.setDownload(documentDefinitionName, searchFields);
                 }
@@ -876,7 +826,7 @@ class DossierManagementSearchFieldsComponent {
         this.subscriptions.unsubscribe();
     }
     searchFieldClicked(searchField, searchFieldActionTypeIsAdd) {
-        this.disableInput$.pipe(take$1(1)).subscribe(inputDisabled => {
+        this.disableInput$.pipe(take(1)).subscribe(inputDisabled => {
             if (!inputDisabled) {
                 this.searchFieldActionTypeIsAdd = searchFieldActionTypeIsAdd;
                 const searchFieldToSelect = this.cachedSearchFields.find(field => field.key === searchField.key);
@@ -936,7 +886,7 @@ class DossierManagementSearchFieldsComponent {
     }
     saveSearchField(documentDefinitionName) {
         this.disableInput();
-        this.formData$.pipe(take$1(1)).subscribe(formData => {
+        this.formData$.pipe(take(1)).subscribe(formData => {
             const mappedFormData = {
                 ...formData,
                 matchType: !this.isFieldTypeDropdown(formData.fieldType) && formData.dataType === 'text'
@@ -952,7 +902,7 @@ class DossierManagementSearchFieldsComponent {
                     .subscribe();
             }
             if (this.dropdownDataProviderSupportsUpdates(mappedFormData.dropdownDataProvider)) {
-                this.modifiedDropdownValues$.pipe(take$1(1)).subscribe(dropdownValues => {
+                this.modifiedDropdownValues$.pipe(take(1)).subscribe(dropdownValues => {
                     const request = dropdownValues.reduce((acc, keyValue) => ({ ...acc, [keyValue.key]: keyValue.value }), {});
                     this.documentService
                         .postDropdownData(mappedFormData.dropdownDataProvider, documentDefinitionName, mappedFormData.key, request)
@@ -1051,13 +1001,13 @@ class DossierManagementSearchFieldsComponent {
     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$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i3$1.TranslateService }, { token: i4.DomSanitizer }], 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: "moveRowButtonsTemplateRef", first: true, predicate: ["moveRowButtons"], descendants: true }, { 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    fields: fields$ | 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=\"buttons; context: {obs: obs}\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"btn-group mt-m3px mb-3 pr-2 float-right\">\n    <a\n      class=\"btn btn-secondary btn-space\"\n      [href]=\"obs.downloadUrl\"\n      [download]=\"obs.downloadName\"\n      [ngClass]=\"{\n        disabled:\n          !obs.downloadUrl || !obs.downloadName || obs.searchFields.length <= 0 || obs.disableInput\n      }\"\n    >\n      <i class=\"icon mdi mdi-download mr-1\"></i>\n      {{ 'searchFields.downloadButtonText' | translate }}\n    </a>\n    <button\n      (click)=\"searchFieldClicked($event, true)\"\n      class=\"btn btn-primary btn-space\"\n      [ngClass]=\"{disabled: loadingSearchFields || obs.disableInput}\"\n    >\n      <i class=\"icon mdi mdi-plus mr-1\"></i>\n      {{ 'searchFieldsOverview.addRow' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-list\n    [items]=\"obs.searchFields\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    *ngIf=\"obs.searchFields; else loading\"\n    [lastColumnTemplate]=\"moveRowButtonsTemplateRef\"\n  >\n  </valtimo-list>\n</ng-template>\n\n<ng-template #moveRowButtons let-index=\"index\" let-length=\"length\">\n  <div\n    class=\"move-row-buttons\"\n    *ngIf=\"{\n      disableInput: disableInput$ | async,\n      documentDefinitionName: documentDefinitionName$ | async\n    } as obs\"\n  >\n    <i\n      class=\"mdi mdi-arrow-up-bold btn btn-outline-primary mr-1\"\n      (click)=\"moveRow(index, true, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': index === 0 || obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-down-bold btn btn-outline-secondary\"\n      (click)=\"moveRow(index, false, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{\n        'disabled disabled-move-row-button': index === length - 1 || obs.disableInput\n      }\"\n    ></i>\n  </div>\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(obs.documentDefinitionName, 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\n<ng-template #loading>\n  <div class=\"mb-3\">\n    <valtimo-spinner></valtimo-spinner>\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)}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .disabled-move-row-button{cursor:default!important;filter:grayscale(1);opacity:.5}::ng-deep .move-row-buttons{display:flex;flex-direction:row;justify-content:flex-end;padding-right:13px}::ng-deep .tab-container{min-height:unset!important}\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: "component", type: i6$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i6$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i6$1.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: i6$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i6$1.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: i6$1.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: i6$1.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: "component", type: i6$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    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$1.DomSanitizer }], 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: "moveRowButtonsTemplateRef", first: true, predicate: ["moveRowButtons"], descendants: true }, { 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    fields: fields$ | 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=\"buttons; context: {obs: obs}\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"btn-group mt-m3px mb-3 pr-2 float-right\">\n    <a\n      class=\"btn btn-secondary btn-space\"\n      [href]=\"obs.downloadUrl\"\n      [download]=\"obs.downloadName\"\n      [ngClass]=\"{\n        disabled:\n          !obs.downloadUrl || !obs.downloadName || obs.searchFields.length <= 0 || obs.disableInput\n      }\"\n    >\n      <i class=\"icon mdi mdi-download mr-1\"></i>\n      {{ 'searchFields.downloadButtonText' | translate }}\n    </a>\n    <button\n      (click)=\"searchFieldClicked($event, true)\"\n      class=\"btn btn-primary btn-space\"\n      [ngClass]=\"{disabled: loadingSearchFields || obs.disableInput}\"\n    >\n      <i class=\"icon mdi mdi-plus mr-1\"></i>\n      {{ 'searchFieldsOverview.addRow' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-list\n    [items]=\"obs.searchFields\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    *ngIf=\"obs.searchFields; else loading\"\n    [lastColumnTemplate]=\"moveRowButtonsTemplateRef\"\n  >\n  </valtimo-list>\n</ng-template>\n\n<ng-template #moveRowButtons let-index=\"index\" let-length=\"length\">\n  <div\n    class=\"move-row-buttons\"\n    *ngIf=\"{\n      disableInput: disableInput$ | async,\n      documentDefinitionName: documentDefinitionName$ | async\n    } as obs\"\n  >\n    <i\n      class=\"mdi mdi-arrow-up-bold btn btn-outline-primary mr-1\"\n      (click)=\"moveRow(index, true, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': index === 0 || obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-down-bold btn btn-outline-secondary\"\n      (click)=\"moveRow(index, false, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{\n        'disabled disabled-move-row-button': index === length - 1 || obs.disableInput\n      }\"\n    ></i>\n  </div>\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(obs.documentDefinitionName, 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\n<ng-template #loading>\n  <div class=\"mb-3\">\n    <valtimo-spinner></valtimo-spinner>\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)}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .disabled-move-row-button{cursor:default!important;filter:grayscale(1);opacity:.5}::ng-deep .move-row-buttons{display:flex;flex-direction:row;justify-content:flex-end;padding-right:13px}::ng-deep .tab-container{min-height:unset!important}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i6.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i6.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: i6.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i6.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: i6.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: i6.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: "component", type: i6.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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    fields: fields$ | 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=\"buttons; context: {obs: obs}\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"btn-group mt-m3px mb-3 pr-2 float-right\">\n    <a\n      class=\"btn btn-secondary btn-space\"\n      [href]=\"obs.downloadUrl\"\n      [download]=\"obs.downloadName\"\n      [ngClass]=\"{\n        disabled:\n          !obs.downloadUrl || !obs.downloadName || obs.searchFields.length <= 0 || obs.disableInput\n      }\"\n    >\n      <i class=\"icon mdi mdi-download mr-1\"></i>\n      {{ 'searchFields.downloadButtonText' | translate }}\n    </a>\n    <button\n      (click)=\"searchFieldClicked($event, true)\"\n      class=\"btn btn-primary btn-space\"\n      [ngClass]=\"{disabled: loadingSearchFields || obs.disableInput}\"\n    >\n      <i class=\"icon mdi mdi-plus mr-1\"></i>\n      {{ 'searchFieldsOverview.addRow' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-list\n    [items]=\"obs.searchFields\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    *ngIf=\"obs.searchFields; else loading\"\n    [lastColumnTemplate]=\"moveRowButtonsTemplateRef\"\n  >\n  </valtimo-list>\n</ng-template>\n\n<ng-template #moveRowButtons let-index=\"index\" let-length=\"length\">\n  <div\n    class=\"move-row-buttons\"\n    *ngIf=\"{\n      disableInput: disableInput$ | async,\n      documentDefinitionName: documentDefinitionName$ | async\n    } as obs\"\n  >\n    <i\n      class=\"mdi mdi-arrow-up-bold btn btn-outline-primary mr-1\"\n      (click)=\"moveRow(index, true, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': index === 0 || obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-down-bold btn btn-outline-secondary\"\n      (click)=\"moveRow(index, false, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{\n        'disabled disabled-move-row-button': index === length - 1 || obs.disableInput\n      }\"\n    ></i>\n  </div>\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(obs.documentDefinitionName, 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\n<ng-template #loading>\n  <div class=\"mb-3\">\n    <valtimo-spinner></valtimo-spinner>\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)}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .disabled-move-row-button{cursor:default!important;filter:grayscale(1);opacity:.5}::ng-deep .move-row-buttons{display:flex;flex-direction:row;justify-content:flex-end;padding-right:13px}::ng-deep .tab-container{min-height:unset!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.ActivatedRoute }, { type: i3$1.TranslateService }, { type: i4.DomSanitizer }]; }, propDecorators: { moveRowButtonsTemplateRef: [{
+        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i3.TranslateService }, { type: i4$1.DomSanitizer }]; }, propDecorators: { moveRowButtonsTemplateRef: [{
                 type: ViewChild,
                 args: ['moveRowButtons']
             }], modal: [{
@@ -1152,7 +1102,7 @@ class DossierManagementListColumnsComponent {
             this.documentDefinitionName$,
             this.refreshCaseListcolumns$,
         ]).pipe(switchMap(([documentDefinitionName]) => this.documentService.getCaseListForManagement(documentDefinitionName)), tap$1(caseListColumns => {
-            this.documentDefinitionName$.pipe(take(1)).subscribe(documentDefinitionName => {
+            this.documentDefinitionName$.pipe(take$1(1)).subscribe(documentDefinitionName => {
                 if (caseListColumns && Array.isArray(caseListColumns) && caseListColumns.length > 0) {
                     this.setDownload(documentDefinitionName, caseListColumns);
                 }
@@ -1296,7 +1246,7 @@ class DossierManagementListColumnsComponent {
         const columnKey = this.cachedCaseListColumns[caseListColumnRowIndex]?.key;
         if (columnKey) {
             this.disableInput();
-            this.documentDefinitionName$.pipe(take(1)).subscribe(docDefName => {
+            this.documentDefinitionName$.pipe(take$1(1)).subscribe(docDefName => {
                 this.documentService.deleteCaseListForManagement(docDefName, columnKey).subscribe(() => {
                     this.refreshCaseListColumns();
                 }, () => {
@@ -1328,7 +1278,7 @@ class DossierManagementListColumnsComponent {
     }
     saveCasListColumns() {
         this.disableInput();
-        this.currentModalType$.pipe(take(1)).subscribe(currentModalType => {
+        this.currentModalType$.pipe(take$1(1)).subscribe(currentModalType => {
             if (currentModalType === 'create') {
                 this.addColumn();
             }
@@ -1343,7 +1293,7 @@ class DossierManagementListColumnsComponent {
     columnRowClicked(row) {
         this.resetFormGroup();
         combineLatest([this.viewTypeItems$, this.sortItems$])
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(([viewTypeItems, sortItems]) => {
             const column = this.cachedCaseListColumns.find(cachedColumn => cachedColumn.key === row.key);
             const viewTypeItem = viewTypeItems.find(item => item.key === column.displayType.type);
@@ -1395,7 +1345,7 @@ class DossierManagementListColumnsComponent {
     }
     addColumn() {
         const formValue = this.formGroup.value;
-        this.documentDefinitionName$.pipe(take(1)).subscribe(docDefName => {
+        this.documentDefinitionName$.pipe(take$1(1)).subscribe(docDefName => {
             this.documentService
                 .postCaseListForManagement(docDefName, this.mapFormValuesToColumn(formValue))
                 .subscribe(() => {
@@ -1439,7 +1389,7 @@ class DossierManagementListColumnsComponent {
             }
             return columnCopy;
         });
-        this.documentDefinitionName$.pipe(take(1)).subscribe(docDefName => {
+        this.documentDefinitionName$.pipe(take$1(1)).subscribe(docDefName => {
             this.documentService.putCaseListForManagement(docDefName, mappedCurrentColumns).subscribe(() => {
                 this.closeModal();
                 this.refreshCaseListColumns();
@@ -1467,7 +1417,7 @@ class DossierManagementListColumnsComponent {
     resetFormGroup() {
         this.formGroup.reset();
         combineLatest([this.sortItems$, this.viewTypeItems$])
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(([sortItems, viewTypeItems]) => {
             this.defaultEnumValues$.next([{ key: '', value: '' }]);
             this.selectedViewTypeItemIndex$.next(0);
@@ -1499,15 +1449,402 @@ class DossierManagementListColumnsComponent {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementListColumnsComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i3$1.TranslateService }, { token: i1$2.ConfigService }, { token: i4.DomSanitizer }], 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", viewQueries: [{ propertyName: "moveRowButtonsTemplateRef", first: true, predicate: ["moveRowButtons"], 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    caseListColumn: translatedCaseListColumns$ | async,\n    fields: fields$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid pr-0 pl-0\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3 mr-2\">\n        <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngIf=\"!obs.hasEnvironmentConfig; else environmentConfigWarning\">\n      <ng-container *ngIf=\"!loadingCaseListColumns; else loading\">\n        <ng-container *ngIf=\"obs.caseListColumn?.length > 0; else noConfigWarning\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\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  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    size=\"md\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n    class=\"ml-3\"\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 #moveRowButtons let-index=\"index\" let-length=\"length\">\n  <div\n    class=\"move-row-buttons\"\n    *ngIf=\"{\n      disableInput: disableInput$ | async,\n      documentDefinitionName: documentDefinitionName$ | async\n    } as obs\"\n  >\n    <i\n      class=\"mdi mdi-delete btn btn-outline-danger mr-1\"\n      (click)=\"deleteRow(index, $event)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-up-bold btn btn-outline-primary mr-1\"\n      (click)=\"moveRow(index, true, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': index === 0 || obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-down-bold btn btn-outline-secondary\"\n      (click)=\"moveRow(index, false, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{\n        'disabled disabled-move-row-button': index === length - 1 || obs.disableInput\n      }\"\n    ></i>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-list\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    *ngIf=\"obs.caseListColumn; else loading\"\n    [lastColumnTemplate]=\"moveRowButtonsTemplateRef\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n  </valtimo-list>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"mb-3\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-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\">\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 #loading>\n  <div class=\"loading-icon\"><<cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowIndex$ | 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}.loading-icon{width:100%;display:flex;align-items:center;justify-content:center}.center-link{display:flex;align-items:center}::ng-deep .move-row-buttons{display:flex;flex-direction:row;justify-content:flex-end;padding-right:13px}\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: "component", type: i6$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i6$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i9.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i9.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i9.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i9.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.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: i9.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i9.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: i6$1.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i6$1.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: "component", type: i9.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i9.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i6$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent", "cancelEvent"] }, { kind: "directive", type: i6$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    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$3.ConfigService }, { token: i4$1.DomSanitizer }], 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", viewQueries: [{ propertyName: "moveRowButtonsTemplateRef", first: true, predicate: ["moveRowButtons"], 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    caseListColumn: translatedCaseListColumns$ | async,\n    fields: fields$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid pr-0 pl-0\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3 mr-2\">\n        <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngIf=\"!obs.hasEnvironmentConfig; else environmentConfigWarning\">\n      <ng-container *ngIf=\"!loadingCaseListColumns; else loading\">\n        <ng-container *ngIf=\"obs.caseListColumn?.length > 0; else noConfigWarning\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\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  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    size=\"md\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n    class=\"ml-3\"\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 #moveRowButtons let-index=\"index\" let-length=\"length\">\n  <div\n    class=\"move-row-buttons\"\n    *ngIf=\"{\n      disableInput: disableInput$ | async,\n      documentDefinitionName: documentDefinitionName$ | async\n    } as obs\"\n  >\n    <i\n      class=\"mdi mdi-delete btn btn-outline-danger mr-1\"\n      (click)=\"deleteRow(index, $event)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-up-bold btn btn-outline-primary mr-1\"\n      (click)=\"moveRow(index, true, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': index === 0 || obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-down-bold btn btn-outline-secondary\"\n      (click)=\"moveRow(index, false, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{\n        'disabled disabled-move-row-button': index === length - 1 || obs.disableInput\n      }\"\n    ></i>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-list\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    *ngIf=\"obs.caseListColumn; else loading\"\n    [lastColumnTemplate]=\"moveRowButtonsTemplateRef\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n  </valtimo-list>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"mb-3\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-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\">\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 #loading>\n  <div class=\"loading-icon\"><<cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowIndex$ | 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}.loading-icon{width:100%;display:flex;align-items:center;justify-content:center}.center-link{display:flex;align-items:center}::ng-deep .move-row-buttons{display:flex;flex-direction:row;justify-content:flex-end;padding-right:13px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { 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: i6.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i9.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i9.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i9.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i9.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: i9.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: i9.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i9.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: i6.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i6.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: "component", type: i9.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i9.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i6.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent", "cancelEvent"] }, { kind: "directive", type: i6.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i4.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: [{
+            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    fields: fields$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid pr-0 pl-0\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3 mr-2\">\n        <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngIf=\"!obs.hasEnvironmentConfig; else environmentConfigWarning\">\n      <ng-container *ngIf=\"!loadingCaseListColumns; else loading\">\n        <ng-container *ngIf=\"obs.caseListColumn?.length > 0; else noConfigWarning\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\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  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    size=\"md\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n    class=\"ml-3\"\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 #moveRowButtons let-index=\"index\" let-length=\"length\">\n  <div\n    class=\"move-row-buttons\"\n    *ngIf=\"{\n      disableInput: disableInput$ | async,\n      documentDefinitionName: documentDefinitionName$ | async\n    } as obs\"\n  >\n    <i\n      class=\"mdi mdi-delete btn btn-outline-danger mr-1\"\n      (click)=\"deleteRow(index, $event)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-up-bold btn btn-outline-primary mr-1\"\n      (click)=\"moveRow(index, true, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': index === 0 || obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-down-bold btn btn-outline-secondary\"\n      (click)=\"moveRow(index, false, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{\n        'disabled disabled-move-row-button': index === length - 1 || obs.disableInput\n      }\"\n    ></i>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-list\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    *ngIf=\"obs.caseListColumn; else loading\"\n    [lastColumnTemplate]=\"moveRowButtonsTemplateRef\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n  </valtimo-list>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"mb-3\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-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\">\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 #loading>\n  <div class=\"loading-icon\"><<cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowIndex$ | 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}.loading-icon{width:100%;display:flex;align-items:center;justify-content:center}.center-link{display:flex;align-items:center}::ng-deep .move-row-buttons{display:flex;flex-direction:row;justify-content:flex-end;padding-right:13px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i3.TranslateService }, { type: i1$3.ConfigService }, { type: i4$1.DomSanitizer }]; }, propDecorators: { moveRowButtonsTemplateRef: [{
+                type: ViewChild,
+                args: ['moveRowButtons']
+            }] } });
+
+/*
+ * 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 TabFormComponent {
+    constructor(tabService, formGroupDirective) {
+        this.tabService = tabService;
+        this.formGroupDirective = formGroupDirective;
+        this.listItems$ = combineLatest([
+            this.tabService.configuredContentKeys$,
+            this.tabService.formDefinitions$,
+            this.tabService.defaultTabs$,
+            this.tabService.customComponentKeys$,
+        ]).pipe(map(([tabKeys, formDefinitions, defaultTabs, customComponentKeys]) => {
+            switch (this.tabType) {
+                case ApiTabType.STANDARD:
+                    return this.getListItems(defaultTabs, tabKeys);
+                case ApiTabType.CUSTOM:
+                    return this.getListItems(customComponentKeys, tabKeys);
+                case ApiTabType.FORMIO:
+                    return this.getListItems(formDefinitions, tabKeys);
+            }
+        }), startWith([]));
+    }
+    ngOnInit() {
+        this.form = this.formGroupDirective.control;
+    }
+    onSearch() {
+        if (this._searchActive) {
+            return;
+        }
+        this._searchActive = true;
+        this.form.get('contentKey')?.reset('');
+    }
+    onSelected() {
+        this._searchActive = false;
+    }
+    getListItems(tabItems, configuredContentKeys) {
+        return tabItems
+            .filter((tabItem) => !configuredContentKeys.includes(tabItem.contentKey) ||
+            this.form?.get('contentKey')?.value === tabItem.contentKey)
+            .map((tabItem) => ({
+            ...tabItem,
+            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: i4.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: i9.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i9.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: i9.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i9.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: i4.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: [{
+            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: [{
+                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 DossierManagementAddTabModalComponent {
+    constructor(fb, iconService, tabService) {
+        this.fb = fb;
+        this.iconService = iconService;
+        this.tabService = tabService;
+        this.open = false;
+        this.closeModalEvent = new EventEmitter();
+        this.ApiTabType = ApiTabType;
+        this.tabTypes$ = this.tabService.disableAddTabs$.pipe(map(disabled => [
+            {
+                icon: 'development',
+                title: 'dossierManagement.tabManagement.addModal.standardTab',
+                type: ApiTabType.STANDARD,
+                disabled: disabled.standard,
+            },
+            {
+                icon: 'page-scroll',
+                title: 'dossierManagement.tabManagement.addModal.formIOComponent',
+                type: ApiTabType.FORMIO,
+                disabled: disabled.formIO,
+            },
+            {
+                icon: 'code',
+                title: 'dossierManagement.tabManagement.addModal.customComponent',
+                type: ApiTabType.CUSTOM,
+                disabled: disabled.custom,
+            },
+        ]));
+        this.form = this.fb.group({
+            name: this.fb.control(null),
+            key: this.fb.control('', [Validators.required, this.uniqueKeyValidator()]),
+            contentKey: this.fb.control('', Validators.required),
+        });
+        this.selectedTabType$ = new BehaviorSubject(null);
+        this.iconService.registerAll([Code16, Development16, WatsonHealthPageScroll16]);
+    }
+    addTab(type) {
+        const { contentKey, key, name } = this.form.getRawValue();
+        if (!contentKey || !key) {
+            return;
+        }
+        this.closeModalEvent.emit({ name, key, contentKey, type });
+    }
+    backClick() {
+        this.resetModal();
+    }
+    onCloseModal() {
+        this.closeModalEvent.emit(null);
+        this.resetModal();
+    }
+    onTabTypeSelect(type) {
+        this.selectedTabType$.next(type);
+    }
+    resetModal() {
+        this.selectedTabType$.next(null);
+        this.form.reset();
+    }
+    uniqueKeyValidator() {
+        return (control) => this.tabService.configuredTabKeys.every((key) => key !== control.value)
+            ? 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: i9.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.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: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i9.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.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: [{
+            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: i9.IconService }, { type: TabService }]; }, propDecorators: { documentDefinitionName: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], closeModalEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * 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 DossierManagementEditTabModalComponent {
+    set tab(value) {
+        if (!value) {
+            return;
+        }
+        if (!!this.tabService.configuredContentKeys) {
+            this.configuredKeysForEdit = this.tabService.configuredContentKeys.filter((tabKey) => tabKey !== value.contentKey);
+        }
+        this._tab = value;
+        this.form = this.fb.group({
+            name: this.fb.control(value.name),
+            key: this.fb.control({ value: value.key, disabled: true }, Validators.required),
+            contentKey: this.fb.control(value.contentKey, Validators.required),
+        });
+    }
+    get tab() {
+        return this._tab;
+    }
+    constructor(fb, tabService) {
+        this.fb = fb;
+        this.tabService = tabService;
+        this.closeModalEvent = new EventEmitter();
+    }
+    onCloseModal() {
+        this.closeModalEvent.emit(null);
+    }
+    editTab() {
+        const { contentKey, name } = this.form.getRawValue();
+        if (!contentKey) {
+            return;
+        }
+        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: i4.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: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i9.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
+                type: Input
+            }], tab: [{
+                type: Input
+            }], closeModalEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * 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 DossierManagementTabsComponent {
+    set documentDefinitionName(value) {
+        if (!value) {
+            return;
+        }
+        this._documentDefinitionName = value;
+        this.tabManagementService.setCaseDefinitionId(value);
+        this.tabManagementService.loadTabs();
+    }
+    get documentDefinitionName() {
+        return this._documentDefinitionName;
+    }
+    constructor(cd, iconService, tabManagementService, tabService, translateService) {
+        this.cd = cd;
+        this.iconService = iconService;
+        this.tabManagementService = tabManagementService;
+        this.tabService = tabService;
+        this.translateService = translateService;
+        this.deleteRowKey$ = new BehaviorSubject(null);
+        this.showDeleteModal$ = this.deleteRowKey$.pipe(map((key) => !!key));
+        this.openEditModal$ = new BehaviorSubject(false);
+        this.fields$ = new BehaviorSubject([]);
+        this.loading$ = this.tabManagementService.loading$;
+        this.openAddModal$ = new BehaviorSubject(false);
+        this.lastItemIndex$ = new BehaviorSubject(-1);
+        this.tabs$ = this.tabManagementService.tabs$.pipe(tap$1((tabs) => {
+            this._tabs = tabs;
+            this.tabService.configuredContentKeys = tabs.map((tab) => tab.contentKey);
+            this.tabService.configuredTabKeys = tabs.map((tab) => tab.key);
+            this.lastItemIndex$.next(tabs.length - 1);
+        }));
+        this.tab$ = new BehaviorSubject(null);
+    }
+    ngAfterViewInit() {
+        this.iconService.registerAll([ArrowDown16, ArrowUp16]);
+        this.fields$.next([
+            {
+                key: 'name',
+                label: 'dossierManagement.tabManagement.columns.name',
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'key',
+                label: 'dossierManagement.tabManagement.columns.key',
+                viewType: ViewType.TEXT,
+            },
+            {
+                viewType: ViewType.TEMPLATE,
+                template: this.tabTypeColumnTemplate,
+                key: '',
+                label: 'dossierManagement.tabManagement.columns.type',
+            },
+            {
+                viewType: ViewType.TEMPLATE,
+                template: this.tabContentColumnTemplate,
+                key: '',
+                label: 'dossierManagement.tabManagement.columns.content',
+            },
+            {
+                className: 'valtimo-dossier-management-tabs__actions',
+                key: '',
+                label: '',
+                template: this.moveButtonsTemplate,
+                viewType: ViewType.TEMPLATE,
+            },
+            {
+                actions: [
+                    {
+                        label: 'interface.delete',
+                        callback: this.openDeleteConfirmationModal.bind(this),
+                        type: 'danger',
+                    },
+                ],
+                className: 'valtimo-dossier-management-tabs__actions',
+                key: '',
+                label: '',
+                viewType: ViewType.ACTION,
+            },
+        ]);
+        this.cd.detectChanges();
+    }
+    isTranslated(key) {
+        return this.translateService.instant(key) !== key;
+    }
+    onArrowClick(direction, index, event) {
+        event.stopImmediatePropagation();
+        const orderedTabs = direction === 'UP'
+            ? this.swapTabs(this._tabs, index - 1, index)
+            : this.swapTabs(this._tabs, index, index + 1);
+        this.tabManagementService.dispatchAction(this.tabManagementService.editTabsOrder(orderedTabs));
+    }
+    openAddTabModal() {
+        this.openAddModal$.next(true);
+    }
+    onRowClicked(tab) {
+        this.tab$.next(tab);
+        this.openEditModal$.next(true);
+    }
+    onCloseAddModalEvent(tab) {
+        this.openAddModal$.next(false);
+        if (!tab) {
+            return;
+        }
+        this.addTab(tab);
+    }
+    onCloseEditModalEvent(tab) {
+        this.openEditModal$.next(false);
+        this.tab$.next(null);
+        if (!tab) {
+            return;
+        }
+        this.editTab(tab);
+    }
+    openDeleteConfirmationModal(tab) {
+        this.deleteRowKey$.next(tab.key);
+    }
+    onConfirmEvent(tabKey) {
+        this.deleteTab(tabKey);
+    }
+    addTab(tab) {
+        this.tabManagementService.dispatchAction(this.tabManagementService.addTab(tab));
+    }
+    deleteTab(tabKey) {
+        this.tabManagementService.dispatchAction(this.tabManagementService.deleteTab(tabKey));
+    }
+    editTab(tab) {
+        this.tabManagementService.dispatchAction(this.tabManagementService.editTab(tab, tab.key));
+    }
+    swapTabs(tabItems, index1, index2) {
+        const temp = [...tabItems];
+        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: i9.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  [items]=\"obs.tabs\"\n  [fields]=\"obs.fields\"\n  header=\"false\"\n  [loading]=\"obs.loading\"\n  (rowClicked)=\"onRowClicked($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<ng-template #moveButtonsTemplate let-data=\"data\">\n  <div class=\"move-buttons-container\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      (click)=\"onArrowClick('UP', data.index, $event)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"(lastItemIndex$ | async) === data.index\"\n      [iconOnly]=\"true\"\n      (click)=\"onArrowClick('DOWN', data.index, $event)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\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}.valtimo-dossier-management-tabs__actions .move-buttons-container{display:flex;gap:8px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i6.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent", "cancelEvent"] }, { kind: "component", type: i6.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "header", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i6.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: i4.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: DossierManagementListColumnsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementTabsComponent, 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    fields: fields$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid pr-0 pl-0\">\n    <div class=\"text-right\">\n      <div class=\"btn-group mt-m3px mb-3 mr-2\">\n        <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n      </div>\n    </div>\n    <ng-container *ngIf=\"!obs.hasEnvironmentConfig; else environmentConfigWarning\">\n      <ng-container *ngIf=\"!loadingCaseListColumns; else loading\">\n        <ng-container *ngIf=\"obs.caseListColumn?.length > 0; else noConfigWarning\">\n          <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\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  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    size=\"md\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n    class=\"ml-3\"\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 #moveRowButtons let-index=\"index\" let-length=\"length\">\n  <div\n    class=\"move-row-buttons\"\n    *ngIf=\"{\n      disableInput: disableInput$ | async,\n      documentDefinitionName: documentDefinitionName$ | async\n    } as obs\"\n  >\n    <i\n      class=\"mdi mdi-delete btn btn-outline-danger mr-1\"\n      (click)=\"deleteRow(index, $event)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-up-bold btn btn-outline-primary mr-1\"\n      (click)=\"moveRow(index, true, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{'disabled disabled-move-row-button': index === 0 || obs.disableInput}\"\n    ></i>\n    <i\n      class=\"mdi mdi-arrow-down-bold btn btn-outline-secondary\"\n      (click)=\"moveRow(index, false, $event, obs.documentDefinitionName)\"\n      [ngClass]=\"{\n        'disabled disabled-move-row-button': index === length - 1 || obs.disableInput\n      }\"\n    ></i>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-list\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    *ngIf=\"obs.caseListColumn; else loading\"\n    [lastColumnTemplate]=\"moveRowButtonsTemplateRef\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n  </valtimo-list>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"mb-3\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-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\">\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 #loading>\n  <div class=\"loading-icon\"><<cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowIndex$ | 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}.loading-icon{width:100%;display:flex;align-items:center;justify-content:center}.center-link{display:flex;align-items:center}::ng-deep .move-row-buttons{display:flex;flex-direction:row;justify-content:flex-end;padding-right:13px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.ActivatedRoute }, { type: i3$1.TranslateService }, { type: i1$2.ConfigService }, { type: i4.DomSanitizer }]; }, propDecorators: { moveRowButtonsTemplateRef: [{
+            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  [items]=\"obs.tabs\"\n  [fields]=\"obs.fields\"\n  header=\"false\"\n  [loading]=\"obs.loading\"\n  (rowClicked)=\"onRowClicked($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<ng-template #moveButtonsTemplate let-data=\"data\">\n  <div class=\"move-buttons-container\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      (click)=\"onArrowClick('UP', data.index, $event)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"(lastItemIndex$ | async) === data.index\"\n      [iconOnly]=\"true\"\n      (click)=\"onArrowClick('DOWN', data.index, $event)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\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}.valtimo-dossier-management-tabs__actions .move-buttons-container{display:flex;gap:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i9.IconService }, { type: TabManagementService }, { type: TabService }, { type: i3.TranslateService }]; }, propDecorators: { tabContentColumnTemplate: [{
                 type: ViewChild,
-                args: ['moveRowButtons']
+                args: ['tabContentColumn']
+            }], tabTypeColumnTemplate: [{
+                type: ViewChild,
+                args: ['tabTypeColumn']
+            }], moveButtonsTemplate: [{
+                type: ViewChild,
+                args: ['moveButtonsTemplate']
+            }], documentDefinitionName: [{
+                type: Input
             }] } });
 
 /*
@@ -1537,7 +1874,9 @@ class DossierManagementDetailContainerComponent {
         this.documentDefinition$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.documentService.getDocumentDefinitionForManagement(documentDefinitionName)), tap(documentDefinition => {
             this.pageTitleService.setCustomPageTitle(documentDefinition.schema.title);
         }));
-        this.caseListColumn = this.configService.config.featureToggles.caseListColumn;
+        const featureToggles = this.configService.config.featureToggles;
+        this.caseListColumn = !!featureToggles?.caseListColumn;
+        this.tabManagementEnabled = !!featureToggles?.enableTabManagement;
     }
     ngOnInit() {
         this.openCurrentTabSubscription();
@@ -1552,13 +1891,231 @@ class DossierManagementDetailContainerComponent {
         this.tabService.currentTab = TabEnum.CASE;
         this.tabSubscription?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailContainerComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i1$2.ConfigService }, { token: TabService }, { token: i6$1.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", 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=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"tabContent\"></ng-container>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n\n<ng-template #title>\n  <ng-container *ngIf=\"documentDefinition$ | async as documentDefinition\">\n    <div class=\"bg-light dossier-header\" *ngIf=\"documentDefinition.readOnly\">\n      <h3 class=\"dossier-title\">\n        <div class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">{{\n            'dossierManagement.readonly' | translate\n          }}</span>\n        </div>\n      </h3>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #tabs>\n  <ul class=\"nav nav-tabs\">\n    <li class=\"nav-item\">\n      <a\n        id=\"case-tab\"\n        class=\"nav-link clickable active\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.CASE)\"\n      >\n        {{ 'dossierManagement.tabs.cases' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\">\n      <a\n        id=\"search-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.SEARCH)\"\n      >\n        {{ 'dossierManagement.tabs.searchFields' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\" *ngIf=\"caseListColumn\">\n      <a\n        id=\"list-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.LIST)\"\n      >\n        {{ 'dossierManagement.tabs.listColumns' | translate }}\n      </a>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #tabContent>\n  <div class=\"pt-3 bg-white position-relative tab-container\">\n    <div *ngIf=\"currentTab && currentTab === TabEnum.CASE\">\n      <valtimo-dossier-management-detail></valtimo-dossier-management-detail>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.SEARCH\">\n      <valtimo-dossier-management-search-fields></valtimo-dossier-management-search-fields>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.LIST\">\n      <valtimo-dossier-management-list-columns></valtimo-dossier-management-list-columns>\n    </div>\n  </div>\n</ng-template>\n", styles: [".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}\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: i6$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { 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: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    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$3.ConfigService }, { token: TabService }, { token: i6.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", 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=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"tabContent\"></ng-container>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n\n<ng-template #title>\n  <ng-container *ngIf=\"documentDefinition$ | async as documentDefinition\">\n    <div class=\"bg-light dossier-header\" *ngIf=\"documentDefinition.readOnly\">\n      <h3 class=\"dossier-title\">\n        <div class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">{{\n            'dossierManagement.readonly' | translate\n          }}</span>\n        </div>\n      </h3>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #tabs>\n  <ul class=\"nav nav-tabs\">\n    <li class=\"nav-item\">\n      <a\n        id=\"case-tab\"\n        class=\"nav-link clickable active\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.CASE)\"\n      >\n        {{ 'dossierManagement.tabs.cases' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\">\n      <a\n        id=\"search-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.SEARCH)\"\n      >\n        {{ 'dossierManagement.tabs.searchFields' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\" *ngIf=\"caseListColumn\">\n      <a\n        id=\"list-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.LIST)\"\n      >\n        {{ 'dossierManagement.tabs.listColumns' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\" *ngIf=\"tabManagementEnabled\">\n      <a\n        id=\"list-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.TABS)\"\n      >\n        {{ 'dossierManagement.tabs.tabManagement' | translate }}\n      </a>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #tabContent>\n  <div class=\"pt-3 bg-white position-relative tab-container\">\n    <div *ngIf=\"currentTab && currentTab === TabEnum.CASE\">\n      <valtimo-dossier-management-detail></valtimo-dossier-management-detail>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.SEARCH\">\n      <valtimo-dossier-management-search-fields></valtimo-dossier-management-search-fields>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.LIST\">\n      <valtimo-dossier-management-list-columns></valtimo-dossier-management-list-columns>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.TABS\">\n      <valtimo-dossier-management-tabs\n        [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      ></valtimo-dossier-management-tabs>\n    </div>\n  </div>\n</ng-template>\n", styles: [".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}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { 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: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementDetailContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-detail-container', 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=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"tabContent\"></ng-container>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n\n<ng-template #title>\n  <ng-container *ngIf=\"documentDefinition$ | async as documentDefinition\">\n    <div class=\"bg-light dossier-header\" *ngIf=\"documentDefinition.readOnly\">\n      <h3 class=\"dossier-title\">\n        <div class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">{{\n            'dossierManagement.readonly' | translate\n          }}</span>\n        </div>\n      </h3>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #tabs>\n  <ul class=\"nav nav-tabs\">\n    <li class=\"nav-item\">\n      <a\n        id=\"case-tab\"\n        class=\"nav-link clickable active\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.CASE)\"\n      >\n        {{ 'dossierManagement.tabs.cases' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\">\n      <a\n        id=\"search-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.SEARCH)\"\n      >\n        {{ 'dossierManagement.tabs.searchFields' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\" *ngIf=\"caseListColumn\">\n      <a\n        id=\"list-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.LIST)\"\n      >\n        {{ 'dossierManagement.tabs.listColumns' | translate }}\n      </a>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #tabContent>\n  <div class=\"pt-3 bg-white position-relative tab-container\">\n    <div *ngIf=\"currentTab && currentTab === TabEnum.CASE\">\n      <valtimo-dossier-management-detail></valtimo-dossier-management-detail>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.SEARCH\">\n      <valtimo-dossier-management-search-fields></valtimo-dossier-management-search-fields>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.LIST\">\n      <valtimo-dossier-management-list-columns></valtimo-dossier-management-list-columns>\n    </div>\n  </div>\n</ng-template>\n", styles: [".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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.ActivatedRoute }, { type: i1$2.ConfigService }, { type: TabService }, { type: i6$1.PageTitleService }]; } });
+            args: [{ selector: 'valtimo-dossier-management-detail-container', 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=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <ng-container *ngTemplateOutlet=\"title\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"tabs\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"tabContent\"></ng-container>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n\n<ng-template #title>\n  <ng-container *ngIf=\"documentDefinition$ | async as documentDefinition\">\n    <div class=\"bg-light dossier-header\" *ngIf=\"documentDefinition.readOnly\">\n      <h3 class=\"dossier-title\">\n        <div class=\"pull-right\">\n          <span class=\"badge badge-pill badge-info increase-size\">{{\n            'dossierManagement.readonly' | translate\n          }}</span>\n        </div>\n      </h3>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #tabs>\n  <ul class=\"nav nav-tabs\">\n    <li class=\"nav-item\">\n      <a\n        id=\"case-tab\"\n        class=\"nav-link clickable active\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.CASE)\"\n      >\n        {{ 'dossierManagement.tabs.cases' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\">\n      <a\n        id=\"search-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.SEARCH)\"\n      >\n        {{ 'dossierManagement.tabs.searchFields' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\" *ngIf=\"caseListColumn\">\n      <a\n        id=\"list-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.LIST)\"\n      >\n        {{ 'dossierManagement.tabs.listColumns' | translate }}\n      </a>\n    </li>\n    <li class=\"nav-item\" *ngIf=\"tabManagementEnabled\">\n      <a\n        id=\"list-tab\"\n        class=\"nav-link clickable\"\n        data-toggle=\"tab\"\n        (click)=\"displayBodyComponent(TabEnum.TABS)\"\n      >\n        {{ 'dossierManagement.tabs.tabManagement' | translate }}\n      </a>\n    </li>\n  </ul>\n</ng-template>\n\n<ng-template #tabContent>\n  <div class=\"pt-3 bg-white position-relative tab-container\">\n    <div *ngIf=\"currentTab && currentTab === TabEnum.CASE\">\n      <valtimo-dossier-management-detail></valtimo-dossier-management-detail>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.SEARCH\">\n      <valtimo-dossier-management-search-fields></valtimo-dossier-management-search-fields>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.LIST\">\n      <valtimo-dossier-management-list-columns></valtimo-dossier-management-list-columns>\n    </div>\n    <div *ngIf=\"currentTab && currentTab === TabEnum.TABS\">\n      <valtimo-dossier-management-tabs\n        [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      ></valtimo-dossier-management-tabs>\n    </div>\n  </div>\n</ng-template>\n", styles: [".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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i1$3.ConfigService }, { type: TabService }, { type: i6.PageTitleService }]; } });
+
+/*
+ * 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 DossierManagementUploadComponent {
+    constructor(documentService, translateService, menuService) {
+        this.documentService = documentService;
+        this.translateService = translateService;
+        this.menuService = menuService;
+        this.definitionUploaded = new EventEmitter();
+        this.clear$ = new Subject();
+        this.jsonString$ = new BehaviorSubject('');
+        this.error$ = new BehaviorSubject('');
+        this.disabled$ = new BehaviorSubject(false);
+        this.file$ = new BehaviorSubject(undefined);
+    }
+    ngAfterViewInit() {
+        this.openShowSubscription();
+        this.openFileSubscription();
+    }
+    ngOnDestroy() {
+        this.showSubscription.unsubscribe();
+        this.fileSubscription.unsubscribe();
+        this.closeErrorSubscription();
+    }
+    setFile(file) {
+        this.clearError();
+        this.file$.next(file);
+    }
+    uploadDefinition() {
+        this.disable();
+        this.jsonString$
+            .pipe(switchMap$1(jsonString => this.documentService
+            .createDocumentDefinitionForManagement(new DocumentDefinitionCreateRequest(jsonString))
+            .pipe(tap(
+        // success
+        () => {
+            this.closeErrorSubscription();
+            this.clearError();
+            this.enable();
+            this.hideModal();
+            this.menuService.reload();
+            this.definitionUploaded.emit();
+        }, 
+        // error
+        () => {
+            this.openErrorSubscription('dropzone.error.invalidDocDef');
+            this.enable();
+        }))), take$1(1))
+            .subscribe();
+    }
+    openErrorSubscription(errorCode) {
+        this.closeErrorSubscription();
+        this.errorSubscription = this.translateService.stream(errorCode).subscribe(error => {
+            this.error$.next(error);
+        });
+    }
+    closeErrorSubscription() {
+        if (this.errorSubscription) {
+            this.errorSubscription.unsubscribe();
+        }
+    }
+    clearError() {
+        this.error$.next('');
+    }
+    openFileSubscription() {
+        this.fileSubscription = this.file$.subscribe(file => {
+            if (file) {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    const result = reader.result.toString();
+                    if (this.stringIsValidJson(result)) {
+                        this.jsonString$.next(result);
+                    }
+                    else {
+                        this.clearJsonString();
+                        this.error$.next(this.translateService.instant('dropzone.error.invalidJson'));
+                    }
+                };
+                reader.readAsText(file);
+            }
+            else {
+                this.clearJsonString();
+            }
+        });
+    }
+    openShowSubscription() {
+        this.showSubscription = this.show$.subscribe(show => {
+            if (show) {
+                this.showModal();
+            }
+            else {
+                this.hideModal();
+            }
+            this.clearJsonString();
+            this.clearError();
+            this.clearDropzone();
+        });
+    }
+    clearJsonString() {
+        this.jsonString$.next('');
+    }
+    clearDropzone() {
+        this.clear$.next(null);
+    }
+    showModal() {
+        this.modal.show();
+    }
+    hideModal() {
+        this.modal.hide();
+    }
+    stringIsValidJson(string) {
+        try {
+            JSON.parse(string);
+        }
+        catch (e) {
+            return false;
+        }
+        return true;
+    }
+    disable() {
+        this.disabled$.next(true);
+    }
+    enable() {
+        this.disabled$.next(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementUploadComponent, deps: [{ token: i1.DocumentService }, { token: i3.TranslateService }, { token: i6.MenuService }], 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: { show$: "show$" }, outputs: { definitionUploaded: "definitionUploaded" }, 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<valtimo-modal\n  #uploadDefinitionModal\n  [title]=\"'Upload document definition' | translate\"\n  showFooter=\"true\"\n>\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n      [clear$]=\"clear$\"\n      (fileSelected)=\"setFile($event)\"\n      [disabled]=\"disabled$ | async\"\n      [subtitle]=\"'dropzone.jsonDocDef' | translate\"\n      [externalError$]=\"error$\"\n      [maxFiles]=\"1\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else disabledUpload\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #disabledUpload>\n  <button [disabled]=\"true\" class=\"btn btn-primary\">\n    <i class=\"icon mdi mdi-upload mr-1\"></i>\n    {{ 'Upload' | 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i6.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-management-upload', 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  #uploadDefinitionModal\n  [title]=\"'Upload document definition' | translate\"\n  showFooter=\"true\"\n>\n  <div class=\"mt-2\" body>\n    <valtimo-dropzone\n      [clear$]=\"clear$\"\n      (fileSelected)=\"setFile($event)\"\n      [disabled]=\"disabled$ | async\"\n      [subtitle]=\"'dropzone.jsonDocDef' | translate\"\n      [externalError$]=\"error$\"\n      [maxFiles]=\"1\"\n    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else disabledUpload\">\n      <button [disabled]=\"disabled$ | async\" class=\"btn btn-primary\" (click)=\"uploadDefinition()\">\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload' | translate }}\n      </button>\n    </ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #disabledUpload>\n  <button [disabled]=\"true\" class=\"btn btn-primary\">\n    <i class=\"icon mdi mdi-upload mr-1\"></i>\n    {{ 'Upload' | 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: i3.TranslateService }, { type: i6.MenuService }]; }, propDecorators: { show$: [{
+                type: Input
+            }], definitionUploaded: [{
+                type: Output
+            }], modal: [{
+                type: ViewChild,
+                args: ['uploadDefinitionModal']
+            }] } });
+
+/*
+ * 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.
+ */
+moment.locale(localStorage.getItem('langKey') || '');
+class DossierManagementListComponent {
+    constructor(documentService, router) {
+        this.documentService = documentService;
+        this.router = router;
+        this.dossiers = [];
+        this.pagination = {
+            collectionSize: 0,
+            page: 1,
+            size: 10,
+        };
+        this.pageParam = 0;
+        this.dossierFields = [
+            { key: 'schema.title', label: 'Title' },
+            { key: 'createdOn', label: 'Created On' },
+            { key: 'readOnly', label: 'Read-only' },
+        ];
+        this.showModal$ = new BehaviorSubject(false);
+    }
+    paginationClicked(page) {
+        this.pageParam = page - 1;
+        this.getDocumentDefinitions();
+    }
+    paginationSet() {
+        this.getDocumentDefinitions();
+    }
+    redirectToDetails(documentDefinition) {
+        this.router.navigate(['/dossier-management/dossier', documentDefinition.id.name]);
+    }
+    getDocumentDefinitions() {
+        this.documentService
+            .queryDefinitionsForManagement({ page: this.pageParam, size: this.pagination.size })
+            .subscribe((documentDefinitionPage) => {
+            this.pagination.collectionSize = documentDefinitionPage.totalElements;
+            this.dossiers = documentDefinitionPage.content;
+            this.dossiers.map((dossier) => {
+                dossier.createdOn = moment(dossier.createdOn).format('DD MMM YYYY HH:mm');
+            });
+        });
+    }
+    showModal() {
+        this.showModal$.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementListComponent, deps: [{ token: i1.DocumentService }, { 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<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-secondary btn-space mr-0\" (click)=\"showModal()\">\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload document definition' | translate }}\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"dossiers\"\n        [fields]=\"dossierFields\"\n        [header]=\"true\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"true\"\n        [pagination]=\"pagination\"\n        paginationIdentifier=\"dossierManagementList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        (paginationSet)=\"paginationSet()\"\n        (rowClicked)=\"redirectToDetails($event)\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'Dossiers' | translate }}</h3>\n          <h5 class=\"list-header-description\">{{ 'Overview of all Dossiers' | translate }}</h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n\n<valtimo-dossier-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"paginationSet()\"\n></valtimo-dossier-management-upload>\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: "component", type: i6.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i6.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: DossierManagementUploadComponent, selector: "valtimo-dossier-management-upload", inputs: ["show$"], outputs: ["definitionUploaded"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"btn-group mt-m3px mb-3 float-right\">\n      <button class=\"btn btn-secondary btn-space mr-0\" (click)=\"showModal()\">\n        <i class=\"icon mdi mdi-upload mr-1\"></i>\n        {{ 'Upload document definition' | translate }}\n      </button>\n    </div>\n    <div class=\"clearfix\"></div>\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"dossiers\"\n        [fields]=\"dossierFields\"\n        [header]=\"true\"\n        [viewMode]=\"true\"\n        [isSearchable]=\"true\"\n        [pagination]=\"pagination\"\n        paginationIdentifier=\"dossierManagementList\"\n        (paginationClicked)=\"paginationClicked($event)\"\n        (paginationSet)=\"paginationSet()\"\n        (rowClicked)=\"redirectToDetails($event)\"\n      >\n        <div header>\n          <h3 class=\"list-header-title\">{{ 'Dossiers' | translate }}</h3>\n          <h5 class=\"list-header-description\">{{ 'Overview of all Dossiers' | translate }}</h5>\n        </div>\n      </valtimo-list>\n    </valtimo-widget>\n  </div>\n</div>\n\n<valtimo-dossier-management-upload\n  [show$]=\"showModal$\"\n  (definitionUploaded)=\"paginationSet()\"\n></valtimo-dossier-management-upload>\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.Router }]; } });
 
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
@@ -1629,7 +2186,11 @@ class DossierManagementModule {
             DossierManagementSearchFieldsComponent,
             DossierManagementDetailContainerComponent,
             DossierManagementAssigneeComponent,
-            DossierManagementListColumnsComponent], imports: [CommonModule,
+            DossierManagementListColumnsComponent,
+            DossierManagementTabsComponent,
+            DossierManagementAddTabModalComponent,
+            TabFormComponent,
+            DossierManagementEditTabModalComponent], imports: [CommonModule,
             WidgetModule,
             DropzoneModule,
             ListModule,
@@ -1661,8 +2222,10 @@ class DossierManagementModule {
             ConfirmationModalModule,
             CarbonMultiInputModule,
             TableModule,
-            ValtimoCdsModalDirectiveModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementModule, imports: [CommonModule,
+            ValtimoCdsModalDirectiveModule,
+            CarbonListModule,
+            ComboBoxModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementModule, providers: [TabManagementService], imports: [CommonModule,
             WidgetModule,
             DropzoneModule,
             ListModule,
@@ -1694,7 +2257,9 @@ class DossierManagementModule {
             ConfirmationModalModule,
             CarbonMultiInputModule,
             TableModule,
-            ValtimoCdsModalDirectiveModule] }); }
+            ValtimoCdsModalDirectiveModule,
+            CarbonListModule,
+            ComboBoxModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DossierManagementModule, decorators: [{
             type: NgModule,
@@ -1710,6 +2275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DossierManagementDetailContainerComponent,
                         DossierManagementAssigneeComponent,
                         DossierManagementListColumnsComponent,
+                        DossierManagementTabsComponent,
+                        DossierManagementAddTabModalComponent,
+                        TabFormComponent,
+                        DossierManagementEditTabModalComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -1745,43 +2314,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         CarbonMultiInputModule,
                         TableModule,
                         ValtimoCdsModalDirectiveModule,
+                        CarbonListModule,
+                        ComboBoxModule,
                     ],
-                    exports: [],
+                    providers: [TabManagementService],
                 }]
         }] });
 
-/*
- * 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.
- */
-
-/*
- * 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.
- */
-
 /*
  * Copyright 2015-2023 Ritense BV, the Netherlands.
  *
@@ -1805,5 +2344,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DossierManagementListComponent, DossierManagementModule };
+export { DossierManagementListComponent, DossierManagementModule, TabEnum };
 //# sourceMappingURL=valtimo-dossier-management.mjs.map