@valtimo/dossier-management 5.12.0 → 5.13.0

package/fesm2015/valtimo-dossier-management.mjs

@@ -1,8 +1,8 @@
-import * as i6 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, NgModule } from '@angular/core';
-import * as i6$1 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -16,12 +16,12 @@ import { DocumentDefinitionCreateRequest } from '@valtimo/document';
 import * as i3 from 'ngx-toastr';
 import * as i7 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i3$2 from '@angular/router';
+import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { BehaviorSubject, map, Subject } from 'rxjs';
+import { BehaviorSubject, map, Subject, filter, switchMap as switchMap$1, combineLatest } from 'rxjs';
 import { isEqual } from 'lodash';
 import * as i1$2 from '@valtimo/authority';
-import * as i5 from '@valtimo/user-interface';
+import * as i5$1 from '@valtimo/user-interface';
 import { ParagraphModule, SelectModule } from '@valtimo/user-interface';
 import moment from 'moment';
 import { switchMap, tap, take } from 'rxjs/operators';
@@ -98,7 +98,7 @@ class DossierManagementConnectModalComponent {
     }
 }
 DossierManagementConnectModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementConnectModalComponent, deps: [{ token: i1.ProcessService }, { token: i1$1.DocumentService }, { token: i3.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementConnectModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "translate": i4.TranslatePipe } });
+DossierManagementConnectModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "translate": i4.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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"] }]
@@ -189,7 +189,7 @@ class DossierManagementRolesComponent {
     }
 }
 DossierManagementRolesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", 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: [""], components: [{ type: i3$1.MultiselectDropdownComponent, selector: "valtimo-multiselect-dropdown", inputs: ["selectedItems", "items", "placeHolder", "dropdownSettings"], outputs: ["itemsSelected"] }], pipes: { "translate": i4.TranslatePipe, "async": i6.AsyncPipe } });
+DossierManagementRolesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: [""], components: [{ type: i3$1.MultiselectDropdownComponent, selector: "valtimo-multiselect-dropdown", inputs: ["selectedItems", "items", "placeHolder", "dropdownSettings"], outputs: ["itemsSelected"] }], pipes: { "translate": i4.TranslatePipe, "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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", styles: [""] }]
@@ -263,12 +263,12 @@ class DossierManagementLinkProcessComponent {
         });
     }
 }
-DossierManagementLinkProcessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementLinkProcessComponent, deps: [{ token: i1$3.ConfigService }, { token: i1.ProcessService }, { token: i3$2.ActivatedRoute }, { token: i1$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementLinkProcessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: [""], components: [{ type: i5.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { type: i5.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"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe, "async": i6.AsyncPipe } });
+DossierManagementLinkProcessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", 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: [""], components: [{ type: i5$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { type: i5$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"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe, "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$3.ConfigService }, { type: i1.ProcessService }, { type: i3$2.ActivatedRoute }, { type: i1$1.DocumentService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.ConfigService }, { type: i1.ProcessService }, { type: i2.ActivatedRoute }, { type: i1$1.DocumentService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -309,12 +309,12 @@ class DossierManagementRemoveModalComponent {
         });
     }
 }
-DossierManagementRemoveModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementRemoveModalComponent, deps: [{ token: i1$1.DocumentService }, { token: i3.ToastrService }, { token: i3$2.Router }, { token: i4.TranslateService }, { token: i3$1.MenuService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementRemoveModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i4.TranslatePipe } });
+DossierManagementRemoveModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", 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"], components: [{ type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i4.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: i3$2.Router }, { type: i4.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']
             }] } });
@@ -393,12 +393,12 @@ class DossierManagementDetailComponent {
         downloadAnchorElement.click();
     }
 }
-DossierManagementDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementDetailComponent, deps: [{ token: i1$1.DocumentService }, { token: i3$2.ActivatedRoute }, { token: i3$1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-DossierManagementDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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 class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div *ngIf=\"documentDefinition\" class=\"btn-group mt-m3px mb-3 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    <div class=\"clearfix\"></div>\n    <valtimo-widget *ngIf=\"documentDefinition\">\n      <div class=\"bg-light dossier-header\">\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      <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        </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        </div>\n      </div>\n    </valtimo-widget>\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  </div>\n</div>\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 */.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid #dee2e6}.dossier-title{margin-top:0;margin-bottom:7px}.row{margin:0}.dossier-schema{resize:none}\n"], components: [{ type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: DossierManagementRolesComponent, selector: "valtimo-dossier-management-roles", inputs: ["documentDefinitionName"] }, { type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process" }, { type: i1$3.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { type: DossierManagementConnectModalComponent, selector: "valtimo-dossier-management-connect-modal", outputs: ["reloadProcessDocumentDefinitions"] }, { type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i4.TranslatePipe, "json": i6.JsonPipe } });
+DossierManagementDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", 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 class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div *ngIf=\"documentDefinition\" class=\"btn-group mt-m3px mb-3 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    <div class=\"clearfix\"></div>\n    <valtimo-widget *ngIf=\"documentDefinition\">\n      <div class=\"bg-light dossier-header\">\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      <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        </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        </div>\n      </div>\n    </valtimo-widget>\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  </div>\n</div>\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 */.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid #dee2e6}.dossier-title{margin-top:0;margin-bottom:7px}.row{margin:0}.dossier-schema{resize:none}\n"], components: [{ type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: DossierManagementRolesComponent, selector: "valtimo-dossier-management-roles", inputs: ["documentDefinitionName"] }, { type: DossierManagementLinkProcessComponent, selector: "valtimo-dossier-management-link-process" }, { type: i1$3.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { type: DossierManagementConnectModalComponent, selector: "valtimo-dossier-management-connect-modal", outputs: ["reloadProcessDocumentDefinitions"] }, { type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i4.TranslatePipe, "json": i5.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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 class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div *ngIf=\"documentDefinition\" class=\"btn-group mt-m3px mb-3 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    <div class=\"clearfix\"></div>\n    <valtimo-widget *ngIf=\"documentDefinition\">\n      <div class=\"bg-light dossier-header\">\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      <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        </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        </div>\n      </div>\n    </valtimo-widget>\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  </div>\n</div>\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 */.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid #dee2e6}.dossier-title{margin-top:0;margin-bottom:7px}.row{margin:0}.dossier-schema{resize:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i3$2.ActivatedRoute }, { type: i3$1.AlertService }]; }, propDecorators: { dossierConnectModal: [{
+            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 class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div *ngIf=\"documentDefinition\" class=\"btn-group mt-m3px mb-3 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    <div class=\"clearfix\"></div>\n    <valtimo-widget *ngIf=\"documentDefinition\">\n      <div class=\"bg-light dossier-header\">\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      <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        </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        </div>\n      </div>\n    </valtimo-widget>\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  </div>\n</div>\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 */.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid #dee2e6}.dossier-title{margin-top:0;margin-bottom:7px}.row{margin:0}.dossier-schema{resize:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.ActivatedRoute }, { type: i3$1.AlertService }]; }, propDecorators: { dossierConnectModal: [{
                 type: ViewChild,
                 args: ['dossierConnectModal']
             }], dossierRemoveModal: [{
@@ -544,7 +544,7 @@ class DossierManagementUploadComponent {
     }
 }
 DossierManagementUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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: "12.0.0", version: "13.3.11", 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    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else pleaseSelect\">\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 #pleaseSelect>\n  <button class=\"btn btn-primary\" [disabled]=\"true\">\n    {{ 'Select a document definition' | 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"], components: [{ type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { type: i3$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe, "async": i6.AsyncPipe } });
+DossierManagementUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else pleaseSelect\">\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 #pleaseSelect>\n  <button class=\"btn btn-primary\" [disabled]=\"true\">\n    {{ 'Select a document definition' | 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"], components: [{ type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { type: i3$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe, "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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    ></valtimo-dropzone>\n  </div>\n  <div footer>\n    <ng-container *ngIf=\"(jsonString$ | async) && (error$ | async) === ''; else pleaseSelect\">\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 #pleaseSelect>\n  <button class=\"btn btn-primary\" [disabled]=\"true\">\n    {{ 'Select a document definition' | 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"] }]
@@ -617,12 +617,106 @@ class DossierManagementListComponent {
         this.showModal$.next(true);
     }
 }
-DossierManagementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementListComponent, deps: [{ token: i1$1.DocumentService }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+DossierManagementListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementListComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
 DossierManagementListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i3$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: DossierManagementUploadComponent, selector: "valtimo-dossier-management-upload", inputs: ["show$"], outputs: ["definitionUploaded"] }], pipes: { "translate": i4.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i3$2.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.Router }]; } });
+
+/*
+ * Copyright 2015-2022 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierManagementSearchFieldsComponent {
+    constructor(documentService, route, translateService) {
+        this.documentService = documentService;
+        this.route = route;
+        this.translateService = translateService;
+        this.COLUMNS = [
+            {
+                viewType: 'string',
+                sortable: false,
+                propertyName: 'path',
+                translationKey: 'path',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                propertyName: 'datatype',
+                translationKey: 'datatype',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                propertyName: 'fieldtype',
+                translationKey: 'fieldtype',
+            },
+            {
+                viewType: 'string',
+                sortable: false,
+                propertyName: 'matchtype',
+                translationKey: 'matchtype',
+            },
+        ];
+        this.fields$ = this.translateService.stream('key').pipe(map(() => this.COLUMNS.map(column => (Object.assign({ key: column.propertyName, label: this.translateService.instant(`searchFieldsOverview.${column.translationKey}`), sortable: column.sortable }, (column.viewType && { viewType: column.viewType }))))));
+        this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''), filter(docDefName => !!docDefName));
+        this.searchFields$ = this.documentDefinitionName$.pipe(switchMap$1(documentDefinitionName => this.documentService.getDocumentSearchFields(documentDefinitionName)));
+        this.translatedSearchFields$ = combineLatest([
+            this.searchFields$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([searchFields]) => searchFields.map(searchField => (Object.assign(Object.assign({}, searchField), { datatype: this.translateService.instant(`searchFields.${searchField.datatype}`), matchtype: this.translateService.instant(`searchFieldsOverview.${searchField.matchtype}`), fieldtype: this.translateService.instant(`searchFieldsOverview.${searchField.fieldtype}`) })))));
+    }
+}
+DossierManagementSearchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementSearchFieldsComponent, deps: [{ token: i1$1.DocumentService }, { token: i2.ActivatedRoute }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DossierManagementSearchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", 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=\"{searchFields: translatedSearchFields$ | async, fields: fields$ | async} as obs\"\n>\n  <valtimo-list\n    [items]=\"obs.searchFields\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n  >\n  </valtimo-list>\n</ng-container>\n", styles: [""], components: [{ type: i3$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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=\"{searchFields: translatedSearchFields$ | async, fields: fields$ | async} as obs\"\n>\n  <valtimo-list\n    [items]=\"obs.searchFields\"\n    [fields]=\"obs.fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n  >\n  </valtimo-list>\n</ng-container>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DocumentService }, { type: i2.ActivatedRoute }, { type: i4.TranslateService }]; } });
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierManagementDetailContainerComponent {
+    constructor(configService) {
+        this.configService = configService;
+        this.isCase = true;
+        this.showCaseSearchFields = configService.config.featureToggles.caseSearchFields;
+    }
+    displayBodyComponent(tab) {
+        this.isCase = (tab === 'case');
+    }
+}
+DossierManagementDetailContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementDetailContainerComponent, deps: [{ token: i1$3.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+DossierManagementDetailContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\">\n            <a\n                    id=\"test-tab\"\n                    class=\"nav-link clickable active\"\n                    data-toggle=\"tab\"\n                    (click)=\"displayBodyComponent('case')\"\n            >\n              {{ \"dossierManagement.tabs.cases\" | translate }}\n            </a>\n          </li>\n          <li class=\"nav-item\" *ngIf=\"showCaseSearchFields\">\n            <a\n                    id=\"test-tab-1\"\n                    class=\"nav-link clickable\"\n                    data-toggle=\"tab\"\n                    (click)=\"displayBodyComponent('search')\"\n            >\n              {{ \"dossierManagement.tabs.searchFields\" | translate }}\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"pt-3 bg-white position-relative tab-container\">\n          <div *ngIf=\"isCase\">\n            <valtimo-dossier-management-detail></valtimo-dossier-management-detail>\n          </div>\n\n          <div *ngIf=\"!isCase\">\n            <valtimo-dossier-management-search-fields></valtimo-dossier-management-search-fields>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [".tab-container{min-height:300px}\n"], components: [{ type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail" }, { type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\">\n            <a\n                    id=\"test-tab\"\n                    class=\"nav-link clickable active\"\n                    data-toggle=\"tab\"\n                    (click)=\"displayBodyComponent('case')\"\n            >\n              {{ \"dossierManagement.tabs.cases\" | translate }}\n            </a>\n          </li>\n          <li class=\"nav-item\" *ngIf=\"showCaseSearchFields\">\n            <a\n                    id=\"test-tab-1\"\n                    class=\"nav-link clickable\"\n                    data-toggle=\"tab\"\n                    (click)=\"displayBodyComponent('search')\"\n            >\n              {{ \"dossierManagement.tabs.searchFields\" | translate }}\n            </a>\n          </li>\n        </ul>\n\n        <div class=\"pt-3 bg-white position-relative tab-container\">\n          <div *ngIf=\"isCase\">\n            <valtimo-dossier-management-detail></valtimo-dossier-management-detail>\n          </div>\n\n          <div *ngIf=\"!isCase\">\n            <valtimo-dossier-management-search-fields></valtimo-dossier-management-search-fields>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [".tab-container{min-height:300px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.ConfigService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -648,7 +742,7 @@ const routes = [
     },
     {
         path: 'dossier-management/dossier/:name',
-        component: DossierManagementDetailComponent,
+        component: DossierManagementDetailContainerComponent,
         canActivate: [AuthGuardService],
         data: { title: 'Dossier details', roles: [ROLE_ADMIN] },
     },
@@ -656,7 +750,7 @@ const routes = [
 class DossierManagementRoutingModule {
 }
 DossierManagementRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DossierManagementRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementRoutingModule, imports: [i3$2.RouterModule], exports: [RouterModule] });
+DossierManagementRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
 DossierManagementRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementRoutingModule, imports: [[RouterModule.forRoot(routes)], RouterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierManagementRoutingModule, decorators: [{
             type: NgModule,
@@ -691,7 +785,9 @@ DossierManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         DossierManagementRemoveModalComponent,
         DossierManagementUploadComponent,
         DossierManagementRolesComponent,
-        DossierManagementLinkProcessComponent], imports: [CommonModule,
+        DossierManagementLinkProcessComponent,
+        DossierManagementSearchFieldsComponent,
+        DossierManagementDetailContainerComponent], imports: [CommonModule,
         WidgetModule,
         DropzoneModule,
         ListModule,
@@ -730,6 +826,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DossierManagementUploadComponent,
                         DossierManagementRolesComponent,
                         DossierManagementLinkProcessComponent,
+                        DossierManagementSearchFieldsComponent,
+                        DossierManagementDetailContainerComponent
                     ],
                     imports: [
                         CommonModule,