@valtimo/dossier-management 10.1.0 → 10.2.1

package/fesm2015/valtimo-dossier-management.mjs

@@ -1,13 +1,13 @@
-import * as i4 from '@angular/common';
+import * as i5 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 { FormsModule } from '@angular/forms';
-import * as i4$1 from '@ngx-translate/core';
+import * as i5$1 from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i3$1 from '@valtimo/components';
-import { WidgetModule, DropzoneModule, ListModule, ModalModule, MultiselectDropdownModule, SpinnerModule } from '@valtimo/components';
+import { WidgetModule, DropzoneModule, ListModule, ModalModule, MultiselectDropdownModule, SpinnerModule, CarbonMultiInputModule, ConfirmationModalModule } from '@valtimo/components';
 import * as i1$3 from '@valtimo/config';
 import { UploadProvider, ROLE_ADMIN, ConfigModule } from '@valtimo/config';
 import * as i1 from '@valtimo/process';
@@ -18,15 +18,17 @@ 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, filter, combineLatest, tap as tap$1, take as take$1 } from 'rxjs';
+import { BehaviorSubject, map, switchMap, Subject, Subscription, filter, combineLatest, tap as tap$1, take as take$1, delay, startWith } from 'rxjs';
 import { isEqual } from 'lodash';
 import * as i1$2 from '@valtimo/authority';
 import * as i7$1 from '@valtimo/user-interface';
-import { ParagraphModule, SelectModule, InputModule, FormModule } from '@valtimo/user-interface';
+import { ParagraphModule, SelectModule, InputModule, FormModule, TooltipIconModule } from '@valtimo/user-interface';
 import { tap, switchMap as switchMap$1, take } from 'rxjs/operators';
 import moment from 'moment';
 import { AuthGuardService } from '@valtimo/security';
-import * as i4$2 from '@angular/platform-browser';
+import * as i4$1 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-2020 Ritense BV, the Netherlands.
@@ -99,7 +101,7 @@ class DossierManagementConnectModalComponent {
     }
 }
 DossierManagementConnectModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementConnectModalComponent, deps: [{ token: i1.ProcessService }, { token: i1$1.DocumentService }, { token: i3.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementConnectModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2020 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-2020 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: 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: i3$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: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementConnectModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2020 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-2020 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$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: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementConnectModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-connect-modal', template: "<!--\n  ~ Copyright 2015-2020 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-2020 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"] }]
@@ -149,12 +151,12 @@ class DossierManagementRemoveModalComponent {
         });
     }
 }
-DossierManagementRemoveModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementRemoveModalComponent, deps: [{ token: i1$1.DocumentService }, { token: i3.ToastrService }, { token: i2.Router }, { token: i4$1.TranslateService }, { token: i3$1.MenuService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementRemoveModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2020 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-2020 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: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementRemoveModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementRemoveModalComponent, deps: [{ token: i1$1.DocumentService }, { token: i3.ToastrService }, { token: i2.Router }, { token: i4.TranslateService }, { token: i3$1.MenuService }], target: i0.ɵɵFactoryTarget.Component });
+DossierManagementRemoveModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2020 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-2020 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementRemoveModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-remove-modal', template: "<!--\n  ~ Copyright 2015-2020 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-2020 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: i4$1.TranslateService }, { type: i3$1.MenuService }]; }, propDecorators: { modal: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i3.ToastrService }, { type: i2.Router }, { type: i4.TranslateService }, { type: i3$1.MenuService }]; }, propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['documentDefinitionRemoveModal']
             }] } });
@@ -238,12 +240,12 @@ class DossierManagementRolesComponent {
         });
     }
 }
-DossierManagementRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementRolesComponent, deps: [{ token: i1$2.AuthorityService }, { token: i1$1.DocumentService }, { token: i3$1.AlertService }, { token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementRolesComponent, selector: "valtimo-dossier-management-roles", inputs: { documentDefinitionName: "documentDefinitionName" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 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\">{{ 'connectorManagement.extension.title' | translate }}</h2>-->\n<h2 class=\"mb-4 mt-6\">{{ 'dossierManagement.roles.rolesTitle' | translate }}</h2>\n<p class=\"card-text\">{{ 'dossierManagement.roles.rolesDescription' | translate }}</p>\n\n<valtimo-multiselect-dropdown\n  [items]=\"roles | async\"\n  [selectedItems]=\"preSelectedItems | async\"\n  [dropdownSettings]=\"dropdownSettings\"\n  [placeHolder]=\"'dossierManagement.roles.rolesPlaceHolder' | translate\"\n  (itemsSelected)=\"onSelectedItems($event)\"\n></valtimo-multiselect-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.MultiselectDropdownComponent, selector: "valtimo-multiselect-dropdown", inputs: ["selectedItems", "items", "placeHolder", "dropdownSettings"], outputs: ["itemsSelected"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementRolesComponent, deps: [{ token: i1$2.AuthorityService }, { token: i1$1.DocumentService }, { token: i3$1.AlertService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DossierManagementRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementRolesComponent, selector: "valtimo-dossier-management-roles", inputs: { documentDefinitionName: "documentDefinitionName" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 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\">{{ 'connectorManagement.extension.title' | translate }}</h2>-->\n<h2 class=\"mb-4 mt-6\">{{ 'dossierManagement.roles.rolesTitle' | translate }}</h2>\n<p class=\"card-text\">{{ 'dossierManagement.roles.rolesDescription' | translate }}</p>\n\n<valtimo-multiselect-dropdown\n  [items]=\"roles | async\"\n  [selectedItems]=\"preSelectedItems | async\"\n  [dropdownSettings]=\"dropdownSettings\"\n  [placeHolder]=\"'dossierManagement.roles.rolesPlaceHolder' | translate\"\n  (itemsSelected)=\"onSelectedItems($event)\"\n></valtimo-multiselect-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.MultiselectDropdownComponent, selector: "valtimo-multiselect-dropdown", inputs: ["selectedItems", "items", "placeHolder", "dropdownSettings"], outputs: ["itemsSelected"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementRolesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-roles', template: "<!--\n  ~ Copyright 2015-2022 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\">{{ 'connectorManagement.extension.title' | translate }}</h2>-->\n<h2 class=\"mb-4 mt-6\">{{ 'dossierManagement.roles.rolesTitle' | translate }}</h2>\n<p class=\"card-text\">{{ 'dossierManagement.roles.rolesDescription' | translate }}</p>\n\n<valtimo-multiselect-dropdown\n  [items]=\"roles | async\"\n  [selectedItems]=\"preSelectedItems | async\"\n  [dropdownSettings]=\"dropdownSettings\"\n  [placeHolder]=\"'dossierManagement.roles.rolesPlaceHolder' | translate\"\n  (itemsSelected)=\"onSelectedItems($event)\"\n></valtimo-multiselect-dropdown>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.AuthorityService }, { type: i1$1.DocumentService }, { type: i3$1.AlertService }, { type: i4$1.TranslateService }]; }, propDecorators: { documentDefinitionName: [{
+        }], ctorParameters: function () { return [{ type: i1$2.AuthorityService }, { type: i1$1.DocumentService }, { type: i3$1.AlertService }, { type: i4.TranslateService }]; }, propDecorators: { documentDefinitionName: [{
                 type: Input
             }] } });
 
@@ -314,7 +316,7 @@ class DossierManagementLinkProcessComponent {
     }
 }
 DossierManagementLinkProcessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementLinkProcessComponent, deps: [{ token: i1$3.ConfigService }, { token: i1.ProcessService }, { token: i2.ActivatedRoute }, { token: i1$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementLinkProcessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 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      (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: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i7$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementLinkProcessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 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      (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: [""], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i7$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementLinkProcessComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-link-process', template: "<!--\n  ~ Copyright 2015-2022 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      (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" }]
@@ -355,7 +357,7 @@ class DossierManagementAssigneeComponent {
     }
 }
 DossierManagementAssigneeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementAssigneeComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementAssigneeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee", ngImport: i0, template: "<h2 class=\"mb-4 mt-6\">{{ 'dossierManagement.handleAssignee.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.canHaveAssignee, obs.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.handleAssignee.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: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementAssigneeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee", ngImport: i0, template: "<h2 class=\"mb-4 mt-6\">{{ 'dossierManagement.handleAssignee.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.canHaveAssignee, obs.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.handleAssignee.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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementAssigneeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-assignee', template: "<h2 class=\"mb-4 mt-6\">{{ 'dossierManagement.handleAssignee.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.canHaveAssignee, obs.documentDefinitionName)\"\n      /><span class=\"custom-control-label custom-control-color\">{{\n        'dossierManagement.handleAssignee.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" }]
@@ -436,7 +438,7 @@ class DossierManagementDetailComponent {
     }
 }
 DossierManagementDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementDetailComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i3$1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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 }, { propertyName: "documentRoles", first: true, predicate: ["documentRoles"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 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-roles [documentDefinitionName]=\"documentDefinitionName\">\n        </valtimo-dossier-management-roles>\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-2020 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: i3$1.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: DossierManagementRolesComponent, selector: "valtimo-dossier-management-roles", inputs: ["documentDefinitionName"] }, { 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: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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 }, { propertyName: "documentRoles", first: true, predicate: ["documentRoles"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 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-roles [documentDefinitionName]=\"documentDefinitionName\">\n        </valtimo-dossier-management-roles>\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-2020 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.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: DossierManagementRolesComponent, selector: "valtimo-dossier-management-roles", inputs: ["documentDefinitionName"] }, { kind: "component", type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process" }, { kind: "component", type: DossierManagementAssigneeComponent, selector: "valtimo-dossier-management-assignee" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-detail', template: "<!--\n  ~ Copyright 2015-2020 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-roles [documentDefinitionName]=\"documentDefinitionName\">\n        </valtimo-dossier-management-roles>\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-2020 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"] }]
@@ -589,12 +591,12 @@ class DossierManagementUploadComponent {
         this.disabled$.next(false);
     }
 }
-DossierManagementUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementUploadComponent, deps: [{ token: i1$1.DocumentService }, { token: i4$1.TranslateService }, { token: i3$1.MenuService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2020 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-2020 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: i3$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementUploadComponent, deps: [{ token: i1$1.DocumentService }, { token: i4.TranslateService }, { token: i3$1.MenuService }], target: i0.ɵɵFactoryTarget.Component });
+DossierManagementUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2020 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-2020 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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-upload', template: "<!--\n  ~ Copyright 2015-2020 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-2020 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: i4$1.TranslateService }, { type: i3$1.MenuService }]; }, propDecorators: { show$: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i4.TranslateService }, { type: i3$1.MenuService }]; }, propDecorators: { show$: [{
                 type: Input
             }], definitionUploaded: [{
                 type: Output
@@ -664,7 +666,7 @@ class DossierManagementListComponent {
     }
 }
 DossierManagementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementListComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementListComponent, selector: "valtimo-dossier-management-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 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-2020 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: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i3$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: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementListComponent, selector: "valtimo-dossier-management-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 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-2020 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: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i3$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: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-list', template: "<!--\n  ~ Copyright 2015-2020 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-2020 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"] }]
@@ -960,12 +962,12 @@ class DossierManagementSearchFieldsComponent {
         this.refreshSearchFields$.next(null);
     }
 }
-DossierManagementSearchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementSearchFieldsComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i4$1.TranslateService }, { token: i4$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementSearchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2022 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]=\"{'disabled disabled-move-row-button': index === length - 1 || obs.disableInput}\"\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=\"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=\"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-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: ["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: i3$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: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i7$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i7$1.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "clear$"], outputs: ["valueChange"] }, { kind: "component", type: i7$1.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementSearchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementSearchFieldsComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i4.TranslateService }, { token: i4$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+DossierManagementSearchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2022 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]=\"{'disabled disabled-move-row-button': index === length - 1 || obs.disableInput}\"\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=\"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=\"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-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: ["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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$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: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i7$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i7$1.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$"], outputs: ["valueChange"] }, { kind: "component", type: i7$1.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementSearchFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-search-fields', template: "<!--\n  ~ Copyright 2015-2022 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]=\"{'disabled disabled-move-row-button': index === length - 1 || obs.disableInput}\"\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=\"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=\"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-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: ["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: i4$1.TranslateService }, { type: i4$2.DomSanitizer }]; }, propDecorators: { moveRowButtonsTemplateRef: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.ActivatedRoute }, { type: i4.TranslateService }, { type: i4$1.DomSanitizer }]; }, propDecorators: { moveRowButtonsTemplateRef: [{
                 type: ViewChild,
                 args: ['moveRowButtons']
             }], modal: [{
@@ -991,10 +993,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * limitations under the License.
  */
 class DossierManagementListColumnsComponent {
-    constructor(documentService, route, translateService) {
+    constructor(documentService, route, translateService, configService, sanitizer) {
         this.documentService = documentService;
         this.route = route;
         this.translateService = translateService;
+        this.configService = configService;
+        this.sanitizer = sanitizer;
+        this.downloadName$ = new BehaviorSubject('');
+        this.downloadUrl$ = new BehaviorSubject(undefined);
         this.COLUMNS = [
             {
                 viewType: 'string',
@@ -1039,11 +1045,31 @@ class DossierManagementListColumnsComponent {
                 translationKey: 'defaultSort',
             },
         ];
+        this.loadingCaseListColumns = true;
         this.fields$ = this.translateService.stream('key').pipe(map(() => this.COLUMNS.map(column => (Object.assign(Object.assign({ key: column.propertyName, label: this.translateService.instant(`listColumn.${column.translationKey}`), sortable: column.sortable }, (column.viewType && { viewType: column.viewType })), (column.enum && { enum: column.enum }))))));
         this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''), filter(docDefName => !!docDefName));
-        this.caseListColumns$ = this.translateService
-            .stream('key')
-            .pipe(switchMap(() => this.documentDefinitionName$), switchMap(documentDefinitionName => this.documentService.getCaseList(documentDefinitionName)), map(columns => columns.map(column => {
+        this.disableInput$ = new BehaviorSubject(false);
+        this.hasEnvironmentConfig$ = this.documentDefinitionName$.pipe(map(documentDefinitionName => { var _a, _b; return !!((_b = (_a = this.configService) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.customDefinitionTables[documentDefinitionName]); }));
+        this.cachedCaseListColumns = [];
+        this.refreshCaseListcolumns$ = new BehaviorSubject(null);
+        this.caseListColumns$ = combineLatest([
+            this.documentDefinitionName$,
+            this.refreshCaseListcolumns$,
+        ]).pipe(switchMap(([documentDefinitionName]) => this.documentService.getCaseList(documentDefinitionName)), tap$1(caseListColumns => {
+            this.documentDefinitionName$.pipe(take(1)).subscribe(documentDefinitionName => {
+                if (caseListColumns && Array.isArray(caseListColumns) && caseListColumns.length > 0) {
+                    this.setDownload(documentDefinitionName, caseListColumns);
+                }
+            });
+        }), tap$1(caseListColumns => {
+            this.cachedCaseListColumns = caseListColumns;
+            this.loadingCaseListColumns = false;
+            this.enableInput();
+        }));
+        this.translatedCaseListColumns$ = combineLatest([
+            this.caseListColumns$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([columns]) => columns.map(column => {
             var _a;
             return (Object.assign(Object.assign({}, column), { title: column.title || '-', sortable: column.sortable
                     ? this.translateService.instant('listColumn.sortableYes')
@@ -1053,6 +1079,226 @@ class DossierManagementListColumnsComponent {
                         this.translateService.instant('listColumn.sortableDesc')) ||
                     '-', displayType: this.translateService.instant(`listColumnDisplayType.${(_a = column === null || column === void 0 ? void 0 : column.displayType) === null || _a === void 0 ? void 0 : _a.type}`), displayTypeParameters: this.getDisplayTypeParametersView(column.displayType.displayTypeParameters) }));
         })));
+        this.currentModalType$ = new BehaviorSubject('create');
+        this.showModal$ = new BehaviorSubject(false);
+        this.modalShowing$ = this.showModal$.pipe(delay(250));
+        this.INVALID_KEY = 'invalid';
+        this.formGroup = new FormGroup({
+            title: new FormControl(''),
+            key: new FormControl('', Validators.required),
+            path: new FormControl('', Validators.required),
+            dateFormat: new FormControl(''),
+            displayType: new FormControl({
+                key: this.INVALID_KEY,
+            }),
+            sortable: new FormControl(false),
+            defaultSort: new FormControl({
+                key: this.INVALID_KEY,
+            }),
+            enum: new FormControl([]),
+        });
+        this.disableDefaultSort$ = combineLatest([
+            this.currentModalType$,
+            this.formGroup.valueChanges,
+        ]).pipe(map(([currentModalType]) => currentModalType === 'create' &&
+            this.cachedCaseListColumns.find(column => !!column.defaultSort)), startWith(false));
+        this.DISPLAY_TYPES = [
+            'string',
+            'date',
+            'boolean',
+            'enum',
+            'arrayCount',
+            'underscoresToSpaces',
+        ];
+        this.showDateFormat$ = this.formGroup.valueChanges.pipe(map(formValues => { var _a; return !!(((_a = formValues.displayType) === null || _a === void 0 ? void 0 : _a.key) === this.DISPLAY_TYPES[1]); }), tap$1(showDateFormat => {
+            if (showDateFormat === false && !!this.formGroup.value.dateFormat) {
+                this.formGroup.patchValue({ dateFormat: '' });
+            }
+        }), startWith(false));
+        this.showEnum$ = this.formGroup.valueChanges.pipe(map(formValues => {
+            var _a, _b;
+            return !!(((_a = formValues.displayType) === null || _a === void 0 ? void 0 : _a.key) === this.DISPLAY_TYPES[3] ||
+                ((_b = formValues.displayType) === null || _b === void 0 ? void 0 : _b.key) === this.DISPLAY_TYPES[2]);
+        }), tap$1(showEnum => {
+            const enumValue = this.formGroup.value.enum;
+            if (showEnum === false && Array.isArray(enumValue) && enumValue.length > 0) {
+                this.formGroup.patchValue({ enum: [] });
+            }
+        }), startWith(false));
+        this.isYesNo$ = this.formGroup.valueChanges.pipe(map(formValues => { var _a; return !!(((_a = formValues.displayType) === null || _a === void 0 ? void 0 : _a.key) === this.DISPLAY_TYPES[2]); }));
+        this.selectedViewTypeItemIndex$ = new BehaviorSubject(0);
+        this.viewTypeItems$ = combineLatest([
+            this.selectedViewTypeItemIndex$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([selectedViewTypeItemIndex]) => [
+            {
+                content: this.translateService.instant(`listColumnDisplayType.select`),
+                key: this.INVALID_KEY,
+            },
+            ...this.DISPLAY_TYPES.map(type => ({
+                content: this.translateService.instant(`listColumnDisplayType.${type}`),
+                key: type,
+            })),
+        ].map((item, index) => (Object.assign(Object.assign({}, item), { selected: index === selectedViewTypeItemIndex })))));
+        this.selectedSortItemIndex$ = new BehaviorSubject(0);
+        this.sortItems$ = combineLatest([
+            this.selectedSortItemIndex$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([selectedSortItemIndex]) => [
+            {
+                content: this.translateService.instant(`listColumn.selectDefaultSort`),
+                key: this.INVALID_KEY,
+            },
+            {
+                content: this.translateService.instant(`listColumn.sortableAsc`),
+                key: 'ASC',
+            },
+            {
+                content: this.translateService.instant(`listColumn.sortableDesc`),
+                key: 'DESC',
+            },
+        ].map((item, index) => (Object.assign(Object.assign({}, item), { selected: index === selectedSortItemIndex })))));
+        this.validKey$ = combineLatest([this.formGroup.valueChanges, this.currentModalType$]).pipe(map(([formValues, currentModalType]) => {
+            const existingKeys = this.cachedCaseListColumns.map(column => column.key);
+            return currentModalType === 'create' ? !existingKeys.includes(formValues.key) : true;
+        }), startWith(false));
+        this.valid$ = combineLatest([this.formGroup.valueChanges, this.validKey$]).pipe(map(([formValues, validKey]) => {
+            var _a, _b;
+            return !!(((_a = formValues.displayType) === null || _a === void 0 ? void 0 : _a.key) !== this.INVALID_KEY &&
+                formValues.path &&
+                validKey &&
+                (formValues.displayType.key === 'enum' ? ((_b = formValues.enum) === null || _b === void 0 ? void 0 : _b.length) > 0 : true));
+        }), startWith(false));
+        this.showDeleteModal$ = new Subject();
+        this.deleteRowIndex$ = new BehaviorSubject(0);
+        this.defaultEnumValues$ = new BehaviorSubject(undefined);
+    }
+    openModal(modalType) {
+        this.showModal$.next(true);
+        this.currentModalType$.next(modalType);
+        if (modalType === 'create') {
+            this.formGroup.controls['key'].enable();
+            this.resetFormGroup();
+        }
+        else if (modalType === 'edit') {
+            this.formGroup.controls['key'].disable();
+        }
+    }
+    closeModal() {
+        this.showModal$.next(false);
+    }
+    deleteRow(caseListColumnRowIndex, clickEvent) {
+        clickEvent.stopPropagation();
+        this.showDeleteModal$.next(true);
+        this.deleteRowIndex$.next(caseListColumnRowIndex);
+    }
+    deleteRowConfirmation(caseListColumnRowIndex) {
+        var _a;
+        const columnKey = (_a = this.cachedCaseListColumns[caseListColumnRowIndex]) === null || _a === void 0 ? void 0 : _a.key;
+        if (columnKey) {
+            this.disableInput();
+            this.documentDefinitionName$.pipe(take(1)).subscribe(docDefName => {
+                this.documentService.deleteCaseList(docDefName, columnKey).subscribe(() => {
+                    this.refreshCaseListColumns();
+                }, () => {
+                    this.enableInput();
+                });
+            });
+        }
+    }
+    moveRow(caseListColumnRowIndex, moveUp, clickEvent, documentDefinitionName) {
+        const caseListColumns = [...this.cachedCaseListColumns];
+        const caseListColumnRow = caseListColumns[caseListColumnRowIndex];
+        clickEvent.stopPropagation();
+        const caseListColumnIndex = caseListColumns.findIndex(field => field.key === caseListColumnRow.key);
+        const foundCaseListColumn = Object.assign({}, caseListColumns[caseListColumnIndex]);
+        const filteredCaseListColumns = caseListColumns.filter(field => field.key !== caseListColumnRow.key);
+        const multipleCaseListColumns = caseListColumns.length > 1;
+        if (multipleCaseListColumns && moveUp && caseListColumnIndex > 0) {
+            const caseListColumnBeforeKey = `${caseListColumns[caseListColumnIndex - 1].key}`;
+            const caseListColumnBeforeIndex = filteredCaseListColumns.findIndex(field => field.key === caseListColumnBeforeKey);
+            filteredCaseListColumns.splice(caseListColumnBeforeIndex, 0, foundCaseListColumn);
+            this.updateCaseListColumns(documentDefinitionName, filteredCaseListColumns);
+        }
+        else if (multipleCaseListColumns && !moveUp && caseListColumnIndex < caseListColumns.length) {
+            const caseListColumnAfterKey = `${caseListColumns[caseListColumnIndex + 1].key}`;
+            const caseListColumnAfterIndex = filteredCaseListColumns.findIndex(field => field.key === caseListColumnAfterKey);
+            filteredCaseListColumns.splice(caseListColumnAfterIndex + 1, 0, foundCaseListColumn);
+            this.updateCaseListColumns(documentDefinitionName, filteredCaseListColumns);
+        }
+    }
+    saveCasListColumns() {
+        this.disableInput();
+        this.currentModalType$.pipe(take(1)).subscribe(currentModalType => {
+            if (currentModalType === 'create') {
+                this.addColumn();
+            }
+            else {
+                this.updateColumn();
+            }
+        });
+    }
+    enumValueChange(value) {
+        this.formGroup.patchValue({ enum: value });
+    }
+    columnRowClicked(row) {
+        this.resetFormGroup();
+        combineLatest([this.viewTypeItems$, this.sortItems$])
+            .pipe(take(1))
+            .subscribe(([viewTypeItems, sortItems]) => {
+            var _a, _b, _c, _d;
+            const column = this.cachedCaseListColumns.find(cachedColumn => cachedColumn.key === row.key);
+            const viewTypeItem = viewTypeItems.find(item => item.key === column.displayType.type);
+            const viewTypeItemIndex = viewTypeItems.findIndex(item => item.key === column.displayType.type);
+            const sortItem = sortItems.find(item => item.key === column.defaultSort);
+            const sortItemIndex = sortItems.findIndex(item => item.key === column.defaultSort);
+            const enumValues = (_b = (_a = column === null || column === void 0 ? void 0 : column.displayType) === null || _a === void 0 ? void 0 : _a.displayTypeParameters) === null || _b === void 0 ? void 0 : _b.enum;
+            const mappedEnumValues = [];
+            const columnDateFormat = (_d = (_c = column === null || column === void 0 ? void 0 : column.displayType) === null || _c === void 0 ? void 0 : _c.displayTypeParameters) === null || _d === void 0 ? void 0 : _d.dateFormat;
+            this.selectedViewTypeItemIndex$.next(viewTypeItemIndex);
+            if (sortItem) {
+                this.selectedSortItemIndex$.next(sortItemIndex);
+            }
+            if (enumValues) {
+                Object.keys(enumValues).forEach(key => {
+                    mappedEnumValues.push({ key, value: enumValues[key] });
+                });
+                this.defaultEnumValues$.next(mappedEnumValues);
+            }
+            else {
+                this.defaultEnumValues$.next([{ key: '', value: '' }]);
+            }
+            this.formGroup.patchValue(Object.assign({ key: column.key, title: column.title, path: column.path, sortable: column.sortable, 
+                // @ts-ignore
+                displayType: Object.assign({}, viewTypeItem), 
+                // @ts-ignore
+                defaultSort: sortItem ? Object.assign({}, sortItem) : Object.assign({}, sortItems[0]) }, (columnDateFormat && {
+                dateFormat: columnDateFormat,
+            })));
+            this.openModal('edit');
+        });
+    }
+    updateCaseListColumns(documentDefinitionName, newCaseListColumns) {
+        this.disableInput();
+        this.documentService.putCaseList(documentDefinitionName, newCaseListColumns).subscribe(() => {
+            this.refreshCaseListColumns();
+            localStorage.setItem(`list-search-${documentDefinitionName}`, null);
+        }, () => {
+            this.enableInput();
+        });
+    }
+    addColumn() {
+        const formValue = this.formGroup.value;
+        this.documentDefinitionName$.pipe(take(1)).subscribe(docDefName => {
+            this.documentService
+                .postCaseList(docDefName, this.mapFormValuesToColumn(formValue))
+                .subscribe(() => {
+                this.closeModal();
+                this.refreshCaseListColumns();
+            }, () => {
+                this.enableInput();
+            });
+        });
     }
     getDisplayTypeParametersView(displayTypeParameters) {
         if (displayTypeParameters === null || displayTypeParameters === void 0 ? void 0 : displayTypeParameters.dateFormat) {
@@ -1073,13 +1319,85 @@ class DossierManagementListColumnsComponent {
             return '-';
         }
     }
+    updateColumn() {
+        const updatedColumnFormValue = this.formGroup.value;
+        const mappedUpdatedColumn = this.mapFormValuesToColumn(updatedColumnFormValue);
+        const currentColumns = this.cachedCaseListColumns;
+        const mappedCurrentColumns = currentColumns.map(column => {
+            const columnCopy = Object.assign({}, column);
+            if (columnCopy.key === updatedColumnFormValue.key) {
+                const changedColumn = Object.assign(Object.assign({}, columnCopy), mappedUpdatedColumn);
+                if (!mappedUpdatedColumn.defaultSort) {
+                    delete changedColumn.defaultSort;
+                }
+                return changedColumn;
+            }
+            if (mappedUpdatedColumn.defaultSort) {
+                delete columnCopy.defaultSort;
+            }
+            return columnCopy;
+        });
+        this.documentDefinitionName$.pipe(take(1)).subscribe(docDefName => {
+            this.documentService.putCaseList(docDefName, mappedCurrentColumns).subscribe(() => {
+                this.closeModal();
+                this.refreshCaseListColumns();
+            }, () => {
+                this.enableInput();
+            });
+        });
+    }
+    setDownload(documentDefinitionName, caseListColumns) {
+        this.downloadName$.next(`${documentDefinitionName}.json`);
+        this.downloadUrl$.next(this.sanitizer.bypassSecurityTrustUrl('data:text/json;charset=UTF-8,' +
+            encodeURIComponent(JSON.stringify(caseListColumns, null, 2))));
+    }
+    disableInput() {
+        this.disableInput$.next(true);
+        this.formGroup.disable();
+    }
+    enableInput() {
+        this.disableInput$.next(false);
+        this.formGroup.enable();
+    }
+    refreshCaseListColumns() {
+        this.refreshCaseListcolumns$.next(null);
+    }
+    resetFormGroup() {
+        this.formGroup.reset();
+        combineLatest([this.sortItems$, this.viewTypeItems$])
+            .pipe(take(1))
+            .subscribe(([sortItems, viewTypeItems]) => {
+            this.defaultEnumValues$.next([{ key: '', value: '' }]);
+            this.selectedViewTypeItemIndex$.next(0);
+            // @ts-ignore
+            this.formGroup.patchValue({ displayType: viewTypeItems[0] });
+            this.selectedSortItemIndex$.next(0);
+            // @ts-ignore
+            this.formGroup.patchValue({ defaultSort: sortItems[0] });
+        });
+    }
+    mapFormValuesToColumn(formValue) {
+        var _a, _b, _c;
+        return Object.assign(Object.assign({ key: formValue.key, sortable: formValue.sortable }, (((_a = formValue.defaultSort) === null || _a === void 0 ? void 0 : _a.key) !== this.INVALID_KEY && {
+            defaultSort: (_b = formValue.defaultSort) === null || _b === void 0 ? void 0 : _b.key,
+        })), { title: formValue.title || '', path: formValue.path, displayType: {
+                type: (_c = formValue.displayType) === null || _c === void 0 ? void 0 : _c.key,
+                displayTypeParameters: Object.assign(Object.assign({}, (formValue.dateFormat && { dateFormat: formValue.dateFormat })), (Array.isArray(formValue.enum) &&
+                    formValue.enum.length > 0 && {
+                    enum: formValue.enum.reduce((acc, curr) => (Object.assign(Object.assign({}, acc), { [curr.key]: curr.value })), {}),
+                })),
+            } });
+    }
 }
-DossierManagementListColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementListColumnsComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementListColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 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: caseListColumns$ | async,\n    fields: fields$ | async,\n    documentDefinitionName: documentDefinitionName$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n</ng-container>\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  >\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", styles: ["::ng-deep .tab-container{min-height:unset!important}\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: i3$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: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+DossierManagementListColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementListColumnsComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i4.TranslateService }, { token: i1$3.ConfigService }, { token: i4$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+DossierManagementListColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.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-2022 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    ibmLink\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    ibmButton=\"primary\"\n    size=\"md\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n    class=\"ml-3\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"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]=\"{'disabled disabled-move-row-button': index === length - 1 || obs.disableInput}\"\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    <ibm-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </ibm-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2\">\n    <ibm-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </ibm-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <ibm-modal\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    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-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      <ibm-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 ibmText formControlName=\"title\" />\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-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 ibmText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-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 ibmText formControlName=\"path\" />\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-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        <ibm-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <ibm-dropdown-list [items]=\"viewTypeItems$ | async\"></ibm-dropdown-list>\n        </ibm-dropdown>\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <ibm-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 ibmText formControlName=\"dateFormat\" />\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"modalObs.showEnum || modalObs.isYesNo\">\n      <ibm-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]=\"'listColumn.enumTooltip' | translate\"\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        ></valtimo-carbon-multi-input>\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </ibm-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-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        <ibm-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <ibm-dropdown-list [items]=\"sortItems$ | async\"></ibm-dropdown-list>\n        </ibm-dropdown>\n      </ibm-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"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  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><<ibm-loading></ibm-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: ["::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}.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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i9.Notification, selector: "ibm-notification,ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i9.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i9.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i9.Modal, selector: "ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[ibmModalHeaderHeading]" }, { kind: "component", type: i9.Label, selector: "ibm-label", inputs: ["labelInputID", "disabled", "labelState", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i9.TextInput, selector: "[ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.Dropdown, selector: "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: "ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i9.Checkbox, selector: "ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i7$1.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i3$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required"], outputs: ["valueChange"] }, { kind: "component", type: i9.Loading, selector: "ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i9.Link, selector: "[ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i3$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "cancelButtonText", "cancelButtonTextTranslationKey", "showModalSubject$", "outputOnConfirm"], outputs: ["confirmEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementListColumnsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-list-columns', template: "<!--\n  ~ Copyright 2015-2022 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: caseListColumns$ | async,\n    fields: fields$ | async,\n    documentDefinitionName: documentDefinitionName$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n</ng-container>\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  >\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", styles: ["::ng-deep .tab-container{min-height:unset!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.ActivatedRoute }, { type: i4$1.TranslateService }]; } });
+            args: [{ selector: 'valtimo-dossier-management-list-columns', template: "<!--\n  ~ Copyright 2015-2022 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    ibmLink\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    ibmButton=\"primary\"\n    size=\"md\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n    class=\"ml-3\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" ibmIcon=\"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]=\"{'disabled disabled-move-row-button': index === length - 1 || obs.disableInput}\"\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    <ibm-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </ibm-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2\">\n    <ibm-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </ibm-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <ibm-modal\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    <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 ibmModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </ibm-modal-header>\n    <section ibmModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </ibm-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      <ibm-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 ibmText formControlName=\"title\" />\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-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 ibmText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-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 ibmText formControlName=\"path\" />\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-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        <ibm-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <ibm-dropdown-list [items]=\"viewTypeItems$ | async\"></ibm-dropdown-list>\n        </ibm-dropdown>\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <ibm-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 ibmText formControlName=\"dateFormat\" />\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"modalObs.showEnum || modalObs.isYesNo\">\n      <ibm-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]=\"'listColumn.enumTooltip' | translate\"\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        ></valtimo-carbon-multi-input>\n      </ibm-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </ibm-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <ibm-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        <ibm-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <ibm-dropdown-list [items]=\"sortItems$ | async\"></ibm-dropdown-list>\n        </ibm-dropdown>\n      </ibm-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <ibm-modal-footer>\n    <ng-container>\n      <button\n        ibmButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        ibmButton=\"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  </ibm-modal-footer>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-icon\"><<ibm-loading></ibm-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: ["::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}.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: i4.TranslateService }, { type: i1$3.ConfigService }, { type: i4$1.DomSanitizer }]; }, propDecorators: { moveRowButtonsTemplateRef: [{
+                type: ViewChild,
+                args: ['moveRowButtons']
+            }] } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1123,7 +1441,7 @@ class DossierManagementDetailContainerComponent {
     }
 }
 DossierManagementDetailContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementDetailContainerComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i1$3.ConfigService }, { token: TabService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementDetailContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementDetailContainerComponent, selector: "valtimo-dossier-management-detail-container", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 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  <div class=\"bg-light dossier-header\" *ngIf=\"documentDefinition$ | async as documentDefinition\">\n    <h3 class=\"dossier-title\">\n      {{ documentDefinition.schema.title }}\n      <div *ngIf=\"documentDefinition.readOnly\" 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-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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
+DossierManagementDetailContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierManagementDetailContainerComponent, selector: "valtimo-dossier-management-detail-container", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 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  <div class=\"bg-light dossier-header\" *ngIf=\"documentDefinition$ | async as documentDefinition\">\n    <h3 class=\"dossier-title\">\n      {{ documentDefinition.schema.title }}\n      <div *ngIf=\"documentDefinition.readOnly\" 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-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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$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: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementDetailContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-detail-container', template: "<!--\n  ~ Copyright 2015-2022 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  <div class=\"bg-light dossier-header\" *ngIf=\"documentDefinition$ | async as documentDefinition\">\n    <h3 class=\"dossier-title\">\n      {{ documentDefinition.schema.title }}\n      <div *ngIf=\"documentDefinition.readOnly\" 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-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"] }]
@@ -1216,7 +1534,20 @@ DossierManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         SpinnerModule,
         InputModule,
         SelectModule,
-        FormModule] });
+        FormModule,
+        NotificationModule,
+        ButtonModule,
+        IconModule,
+        ModalModule$1,
+        InputModule$1,
+        ReactiveFormsModule,
+        DropdownModule,
+        CheckboxModule,
+        TooltipIconModule,
+        CarbonMultiInputModule,
+        LoadingModule,
+        LinkModule,
+        ConfirmationModalModule] });
 DossierManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementModule, imports: [CommonModule,
         WidgetModule,
         DropzoneModule,
@@ -1233,7 +1564,20 @@ DossierManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
         SpinnerModule,
         InputModule,
         SelectModule,
-        FormModule] });
+        FormModule,
+        NotificationModule,
+        ButtonModule,
+        IconModule,
+        ModalModule$1,
+        InputModule$1,
+        ReactiveFormsModule,
+        DropdownModule,
+        CheckboxModule,
+        TooltipIconModule,
+        CarbonMultiInputModule,
+        LoadingModule,
+        LinkModule,
+        ConfirmationModalModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierManagementModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1268,6 +1612,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         InputModule,
                         SelectModule,
                         FormModule,
+                        NotificationModule,
+                        ButtonModule,
+                        IconModule,
+                        ModalModule$1,
+                        InputModule$1,
+                        ReactiveFormsModule,
+                        DropdownModule,
+                        CheckboxModule,
+                        TooltipIconModule,
+                        CarbonMultiInputModule,
+                        LoadingModule,
+                        LinkModule,
+                        ConfirmationModalModule,
                     ],
                     exports: [],
                 }]