@valtimo/dossier 5.5.0 → 5.6.0

package/fesm2020/valtimo-dossier.mjs

@@ -16,18 +16,18 @@ import { FormioOptionsImpl, TimelineItemImpl, ListModule, WidgetModule, BpmnJsDi
 import * as i2 from '@valtimo/process';
 import { ProcessModule } from '@valtimo/process';
 import * as i4 from '@valtimo/form-link';
-import * as i5 from '@valtimo/security';
+import * as i6 from '@valtimo/security';
 import { AuthGuardService } from '@valtimo/security';
-import * as i6 from 'ngx-logger';
-import * as i5$1 from '@angular/common';
+import * as i6$1 from 'ngx-logger';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i8 from '@ng-bootstrap/ng-bootstrap';
 import { NgbButtonsModule, NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i5$2 from '@angular/forms';
+import * as i5$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@valtimo/task';
 import { TaskModule } from '@valtimo/task';
-import * as i5$3 from '@valtimo/form';
+import * as i5$2 from '@valtimo/form';
 import { FormModule } from '@valtimo/form';
 import * as i3$2 from 'ngx-spinner';
 import { switchMap, map, take } from 'rxjs/operators';
@@ -210,11 +210,15 @@ class DossierService {
     }
     getInitialSortState(columns) {
         const defaultColumn = columns.find(column => column.default);
+        const isSorting = defaultColumn.default === 'ASC' || defaultColumn.default === 'DESC';
+        const direction = typeof defaultColumn.default === 'boolean'
+            ? 'DESC'
+            : defaultColumn.default;
         return {
-            isSorting: false,
+            isSorting,
             state: {
                 name: defaultColumn ? defaultColumn.propertyName : columns[0].propertyName,
-                direction: 'DESC',
+                direction,
             },
         };
     }
@@ -328,12 +332,12 @@ class DossierProcessStartModalComponent {
         });
     }
 }
-DossierProcessStartModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierProcessStartModalComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.ProcessService }, { token: i2$1.DocumentService }, { token: i4.FormLinkService }, { token: i5.UserProviderService }, { token: i6.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-DossierProcessStartModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["processStartModal"], 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 #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\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 */#processStartModal .formio-component-submit{text-align:right}\n"], components: [{ type: i7$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { type: i7$1.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DossierProcessStartModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierProcessStartModalComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.ProcessService }, { token: i2$1.DocumentService }, { token: i4.FormLinkService }, { token: i6.UserProviderService }, { token: i6$1.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
+DossierProcessStartModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal", viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["processStartModal"], 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 #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\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 */#processStartModal .formio-component-submit{text-align:right}\n"], components: [{ type: i7$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { type: i7$1.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierProcessStartModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-process-start-modal', encapsulation: ViewEncapsulation.None, 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 #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\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 */#processStartModal .formio-component-submit{text-align:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.ProcessService }, { type: i2$1.DocumentService }, { type: i4.FormLinkService }, { type: i5.UserProviderService }, { type: i6.NGXLogger }]; }, propDecorators: { form: [{
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.ProcessService }, { type: i2$1.DocumentService }, { type: i4.FormLinkService }, { type: i6.UserProviderService }, { type: i6$1.NGXLogger }]; }, propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], modal: [{
@@ -534,7 +538,7 @@ class DossierListComponent {
     }
 }
 DossierListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierListComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2$1.DocumentService }, { token: i3.TranslateService }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component });
-DossierListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierListComponent, selector: "valtimo-dossier-list", viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], 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<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div>\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"processDocumentDefinitions.length === 0\"\n          >\n            <i class=\"icon mdi mdi-plus mr-1\"></i>\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <valtimo-list\n          [items]=\"items\"\n          [fields]=\"fields\"\n          (rowClicked)=\"rowClick($event)\"\n          [pagination]=\"pagination\"\n          [viewMode]=\"true\"\n          [header]=\"true\"\n          paginationIdentifier=\"dossierList\"\n          (paginationClicked)=\"paginationClicked($event)\"\n          (paginationSet)=\"paginationSet()\"\n          [initialSortState]=\"getInitialSortState()\"\n          (sortChanged)=\"sortChanged($event)\"\n        >\n          <div header>\n            <h3 class=\"list-header-title\">\n              {{ schema?.title }}\n              <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n                documents?.content.length || 0\n              }}</sup>\n            </h3>\n          </div>\n        </valtimo-list>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [(ngModel)]=\"globalSearchFilter\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [(ngModel)]=\"sequence\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""], components: [{ type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal" }, { type: i7$1.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }], directives: [{ type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i3.TranslatePipe } });
+DossierListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierListComponent, selector: "valtimo-dossier-list", viewQueries: [{ propertyName: "processStart", first: true, predicate: ["processStartModal"], 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<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div>\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"processDocumentDefinitions.length === 0\"\n          >\n            <i class=\"icon mdi mdi-plus mr-1\"></i>\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <valtimo-list\n          [items]=\"items\"\n          [fields]=\"fields\"\n          (rowClicked)=\"rowClick($event)\"\n          [pagination]=\"pagination\"\n          [viewMode]=\"true\"\n          [header]=\"true\"\n          paginationIdentifier=\"dossierList\"\n          (paginationClicked)=\"paginationClicked($event)\"\n          (paginationSet)=\"paginationSet()\"\n          [initialSortState]=\"getInitialSortState()\"\n          (sortChanged)=\"sortChanged($event)\"\n        >\n          <div header>\n            <h3 class=\"list-header-title\">\n              {{ schema?.title }}\n              <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n                documents?.content.length || 0\n              }}</sup>\n            </h3>\n          </div>\n        </valtimo-list>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [(ngModel)]=\"globalSearchFilter\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [(ngModel)]=\"sequence\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""], components: [{ type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal" }, { type: i7$1.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-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<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div>\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"processDocumentDefinitions.length === 0\"\n          >\n            <i class=\"icon mdi mdi-plus mr-1\"></i>\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <valtimo-list\n          [items]=\"items\"\n          [fields]=\"fields\"\n          (rowClicked)=\"rowClick($event)\"\n          [pagination]=\"pagination\"\n          [viewMode]=\"true\"\n          [header]=\"true\"\n          paginationIdentifier=\"dossierList\"\n          (paginationClicked)=\"paginationClicked($event)\"\n          (paginationSet)=\"paginationSet()\"\n          [initialSortState]=\"getInitialSortState()\"\n          (sortChanged)=\"sortChanged($event)\"\n        >\n          <div header>\n            <h3 class=\"list-header-title\">\n              {{ schema?.title }}\n              <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n                documents?.content.length || 0\n              }}</sup>\n            </h3>\n          </div>\n        </valtimo-list>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [(ngModel)]=\"globalSearchFilter\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [(ngModel)]=\"sequence\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""] }]
@@ -636,12 +640,12 @@ class DossierDetailTabSummaryComponent {
         this.taskDetail.openTaskDetails(task);
     }
 }
-DossierDetailTabSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabSummaryComponent, deps: [{ token: i1.Router }, { token: i2$1.DocumentService }, { token: i3$1.TaskService }, { token: i2.ProcessService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ActivatedRoute }, { token: i5$3.FormService }, { token: i5.UserProviderService }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailTabSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabSummaryComponent, selector: "valtimo-dossier-detail-tab-summary", viewQueries: [{ propertyName: "taskDetail", first: true, predicate: ["taskDetail"], 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=\"container-fluid\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">User tasks</h4>\n      <ng-container *ngIf=\"!tasks.length\">\n        <valtimo-widget>\n          <div class=\"p-3\">\n            <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n            <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n            <div class=\"clearfix\"></div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <ng-container *ngFor=\"let task of tasks\">\n        <valtimo-widget>\n          <div\n            class=\"p-3 clickable hoverable\"\n            (click)=\"rowTaskClick(task)\"\n            *ngIf=\"!task.isLocked()\"\n          >\n            <span class=\"float-right badge badge-pill badge-primary\">Open</span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n          <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked()\">\n            <span\n              class=\"float-right badge badge-pill badge-secondary bg-grey\"\n              ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n            >\n              <i class=\"icon mdi mdi-lock\"></i>\n            </span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\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 */.hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}\n"], components: [{ type: i7$1.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }, { type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i3$1.TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DossierDetailTabSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabSummaryComponent, deps: [{ token: i1.Router }, { token: i2$1.DocumentService }, { token: i3$1.TaskService }, { token: i2.ProcessService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ActivatedRoute }, { token: i5$2.FormService }, { token: i6.UserProviderService }], target: i0.ɵɵFactoryTarget.Component });
+DossierDetailTabSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabSummaryComponent, selector: "valtimo-dossier-detail-tab-summary", viewQueries: [{ propertyName: "taskDetail", first: true, predicate: ["taskDetail"], 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=\"container-fluid\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">User tasks</h4>\n      <ng-container *ngIf=\"!tasks.length\">\n        <valtimo-widget>\n          <div class=\"p-3\">\n            <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n            <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n            <div class=\"clearfix\"></div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <ng-container *ngFor=\"let task of tasks\">\n        <valtimo-widget>\n          <div\n            class=\"p-3 clickable hoverable\"\n            (click)=\"rowTaskClick(task)\"\n            *ngIf=\"!task.isLocked()\"\n          >\n            <span class=\"float-right badge badge-pill badge-primary\">Open</span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n          <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked()\">\n            <span\n              class=\"float-right badge badge-pill badge-secondary bg-grey\"\n              ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n            >\n              <i class=\"icon mdi mdi-lock\"></i>\n            </span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\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 */.hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}\n"], components: [{ type: i7$1.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }, { type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i3$1.TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-summary', encapsulation: ViewEncapsulation.None, 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=\"container-fluid\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">User tasks</h4>\n      <ng-container *ngIf=\"!tasks.length\">\n        <valtimo-widget>\n          <div class=\"p-3\">\n            <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n            <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n            <div class=\"clearfix\"></div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <ng-container *ngFor=\"let task of tasks\">\n        <valtimo-widget>\n          <div\n            class=\"p-3 clickable hoverable\"\n            (click)=\"rowTaskClick(task)\"\n            *ngIf=\"!task.isLocked()\"\n          >\n            <span class=\"float-right badge badge-pill badge-primary\">Open</span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n          <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked()\">\n            <span\n              class=\"float-right badge badge-pill badge-secondary bg-grey\"\n              ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n            >\n              <i class=\"icon mdi mdi-lock\"></i>\n            </span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\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 */.hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{height:24px!important;background-color:#fff;border:0px;margin:0;padding:0!important;font-size:13px}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{margin-top:0;margin-bottom:12px;font-weight:400;color:#000;height:20px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2$1.DocumentService }, { type: i3$1.TaskService }, { type: i2.ProcessService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ActivatedRoute }, { type: i5$3.FormService }, { type: i5.UserProviderService }]; }, propDecorators: { taskDetail: [{
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2$1.DocumentService }, { type: i3$1.TaskService }, { type: i2.ProcessService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ActivatedRoute }, { type: i5$2.FormService }, { type: i6.UserProviderService }]; }, propDecorators: { taskDetail: [{
                 type: ViewChild,
                 args: ['taskDetail']
             }] } });
@@ -681,7 +685,7 @@ class DossierDetailTabProgressComponent {
     }
 }
 DossierDetailTabProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabProgressComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailTabProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabProgressComponent, selector: "valtimo-dossier-detail-tab-progress", 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=\"full-height-tab-content\" *ngIf=\"processDocumentInstances\">\n  <div class=\"col-3\">\n    <label><strong>Process</strong></label\n    ><br />\n    <select class=\"form-control\" (change)=\"loadProcessInstance($event.target.value)\">\n      <option\n        *ngFor=\"let processDocumentInstance of processDocumentInstances\"\n        [value]=\"processDocumentInstance.id.processInstanceId\"\n        [selected]=\"selectedProcessInstanceId === processDocumentInstance.id.processInstanceId\"\n      >\n        {{ processDocumentInstance.processName }}\n      </option>\n    </select>\n  </div>\n  <valtimo-process-diagram\n    [processInstanceId]=\"selectedProcessInstanceId\"\n  ></valtimo-process-diagram>\n</div>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}\n"], components: [{ type: i2.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+DossierDetailTabProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabProgressComponent, selector: "valtimo-dossier-detail-tab-progress", 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=\"full-height-tab-content\" *ngIf=\"processDocumentInstances\">\n  <div class=\"col-3\">\n    <label><strong>Process</strong></label\n    ><br />\n    <select class=\"form-control\" (change)=\"loadProcessInstance($event.target.value)\">\n      <option\n        *ngFor=\"let processDocumentInstance of processDocumentInstances\"\n        [value]=\"processDocumentInstance.id.processInstanceId\"\n        [selected]=\"selectedProcessInstanceId === processDocumentInstance.id.processInstanceId\"\n      >\n        {{ processDocumentInstance.processName }}\n      </option>\n    </select>\n  </div>\n  <valtimo-process-diagram\n    [processInstanceId]=\"selectedProcessInstanceId\"\n  ></valtimo-process-diagram>\n</div>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}\n"], components: [{ type: i2.ProcessDiagramComponent, selector: "valtimo-process-diagram", inputs: ["processDefinitionKey", "processInstanceId"], outputs: ["importDone"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-progress', 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=\"full-height-tab-content\" *ngIf=\"processDocumentInstances\">\n  <div class=\"col-3\">\n    <label><strong>Process</strong></label\n    ><br />\n    <select class=\"form-control\" (change)=\"loadProcessInstance($event.target.value)\">\n      <option\n        *ngFor=\"let processDocumentInstance of processDocumentInstances\"\n        [value]=\"processDocumentInstance.id.processInstanceId\"\n        [selected]=\"selectedProcessInstanceId === processDocumentInstance.id.processInstanceId\"\n      >\n        {{ processDocumentInstance.processName }}\n      </option>\n    </select>\n  </div>\n  <valtimo-process-diagram\n    [processInstanceId]=\"selectedProcessInstanceId\"\n  ></valtimo-process-diagram>\n</div>\n", styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}\n"] }]
@@ -744,7 +748,7 @@ class DossierDetailTabAuditComponent {
     }
 }
 DossierDetailTabAuditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabAuditComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$2.NgxSpinnerService }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailTabAuditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabAuditComponent, selector: "valtimo-dossier-detail-tab-audit", outputs: { paginationClicked: "paginationClicked" }, 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 *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"], components: [{ type: i7$1.TimelineComponent, selector: "valtimo-timeline", inputs: ["items"] }, { type: i7$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: i8.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe } });
+DossierDetailTabAuditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabAuditComponent, selector: "valtimo-dossier-detail-tab-audit", outputs: { paginationClicked: "paginationClicked" }, 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 *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"], components: [{ type: i7$1.TimelineComponent, selector: "valtimo-timeline", inputs: ["items"] }, { type: i7$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: i8.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabAuditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-audit', 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 *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n", styles: [".audit-pagination{margin:0 -1.923rem -1.923rem!important;border-top:1px solid #dee2e6}\n"] }]
@@ -849,7 +853,7 @@ class DossierDetailTabDocumentsComponent {
     }
 }
 DossierDetailTabDocumentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabDocumentsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$3.ToastrService }, { token: i4$1.UploadProviderService }, { token: i4$1.DownloadService }, { token: i3.TranslateService }, { token: i7.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailTabDocumentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabDocumentsComponent, selector: "valtimo-dossier-detail-tab-documents", 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-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: [""], components: [{ type: i7$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera"], outputs: ["fileSelected"] }, { type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i3.TranslatePipe } });
+DossierDetailTabDocumentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabDocumentsComponent, selector: "valtimo-dossier-detail-tab-documents", 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-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: [""], components: [{ type: i7$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera"], outputs: ["fileSelected"] }, { type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }], pipes: { "async": i5.AsyncPipe, "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabDocumentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-documents', 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-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n", styles: [""] }]
@@ -935,13 +939,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * limitations under the License.
  */
 class DossierSupportingProcessStartModalComponent {
-    constructor(route, router, processService, documentService, formLinkService, logger) {
+    constructor(route, router, processService, documentService, formLinkService, logger, userProviderService) {
         this.route = route;
         this.router = router;
         this.processService = processService;
         this.documentService = documentService;
         this.formLinkService = formLinkService;
         this.logger = logger;
+        this.userProviderService = userProviderService;
+        this.isAdmin$ = this.userProviderService
+            .getUserSubject()
+            .pipe(map(userIdentity => userIdentity?.roles?.includes('ROLE_ADMIN')));
         this.formSubmit = new EventEmitter();
     }
     loadFormDefinition() {
@@ -1013,12 +1021,12 @@ class DossierSupportingProcessStartModalComponent {
         this.router.navigate(['form-links'], { queryParams: { process: this.processDefinitionKey } });
     }
 }
-DossierSupportingProcessStartModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierSupportingProcessStartModalComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.ProcessService }, { token: i2$1.DocumentService }, { token: i4.FormLinkService }, { token: i6.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-DossierSupportingProcessStartModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["supportingProcessStartModal"], 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  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"modalTitle\"\n>\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission\"\n      [form]=\"formDefinition\"\n      [options]=\"options\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFound'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\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 */#supportingProcessStartModal .formio-component-submit{text-align:right}\n"], components: [{ type: i7$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { type: i7$1.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+DossierSupportingProcessStartModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierSupportingProcessStartModalComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.ProcessService }, { token: i2$1.DocumentService }, { token: i4.FormLinkService }, { token: i6$1.NGXLogger }, { token: i6.UserProviderService }], target: i0.ɵɵFactoryTarget.Component });
+DossierSupportingProcessStartModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["supportingProcessStartModal"], 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  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"modalTitle\"\n>\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission\"\n      [form]=\"formDefinition\"\n      [options]=\"options\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n      {{\n        (isAdmin$ | async)\n          ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n          : ('formManagement.noFormDefinitionFoundUser' | translate)\n      }}\n    </div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\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 */#supportingProcessStartModal .formio-component-submit{text-align:right}\n"], components: [{ type: i7$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { type: i7$1.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe, "translate": i3.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierSupportingProcessStartModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-supporting-process-start-modal', encapsulation: ViewEncapsulation.None, 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  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"modalTitle\"\n>\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission\"\n      [form]=\"formDefinition\"\n      [options]=\"options\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFound'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\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 */#supportingProcessStartModal .formio-component-submit{text-align:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.ProcessService }, { type: i2$1.DocumentService }, { type: i4.FormLinkService }, { type: i6.NGXLogger }]; }, propDecorators: { form: [{
+            args: [{ selector: 'valtimo-dossier-supporting-process-start-modal', encapsulation: ViewEncapsulation.None, 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  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"modalTitle\"\n>\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission\"\n      [form]=\"formDefinition\"\n      [options]=\"options\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n      {{\n        (isAdmin$ | async)\n          ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n          : ('formManagement.noFormDefinitionFoundUser' | translate)\n      }}\n    </div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\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 */#supportingProcessStartModal .formio-component-submit{text-align:right}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.ProcessService }, { type: i2$1.DocumentService }, { type: i4.FormLinkService }, { type: i6$1.NGXLogger }, { type: i6.UserProviderService }]; }, propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form', { static: false }]
             }], modal: [{
@@ -1116,12 +1124,12 @@ class DossierDetailComponent {
         return prefix + formattedString;
     }
 }
-DossierDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i3.TranslateService }, { token: i2$1.DocumentService }, { token: i2.ProcessService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i5$1.Location }, { token: TabService }, { token: i7.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailComponent, selector: "valtimo-dossier-detail", viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], 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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-2\">\n          <div class=\"row\">\n            <div class=\"col\">\n              <div class=\"row\" *ngIf=\"customDossierHeaderItems.length > 0; else defaultTitle\">\n                <span\n                  class=\"mb-0 mt-0 pb-2 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n                    item.columnSize * 2\n                  }} {{ item.customClass }}\"\n                  [ngClass]=\"{\n                    h1: item.textSize === 'xl',\n                    h2: item.textSize === 'lg',\n                    h3: item.textSize === 'md',\n                    h4: item.textSize === 'sm',\n                    h5: item.textSize === 'xs'\n                  }\"\n                  *ngFor=\"let item of customDossierHeaderItems\"\n                >\n                  <span *ngIf=\"item.label !== ''\">{{ item.label | translate }}</span>\n                  <span *ngIf=\"item.label !== '' && item.value !== '' && item.value !== null\"\n                    >:\n                  </span>\n                  <strong>{{ item.value }}</strong>\n                </span>\n              </div>\n              <ng-template #defaultTitle>\n                {{ documentDefinitionNameTitle }}\n              </ng-template>\n            </div>\n            <div class=\"btn-group mt-m3px mb-3 col-auto\">\n              <valtimo-extension\n                module=\"dossier\"\n                page=\"dossier-detail\"\n                section=\"card-header\"\n              ></valtimo-extension>\n              <div class=\"dropdown\">\n                <button\n                  class=\"btn btn-primary dropdown-toggle\"\n                  type=\"button\"\n                  id=\"startProcessDropdown\"\n                  placement=\"bottom\"\n                  [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                  [disabled]=\"processDocumentDefinitions.length === 0\"\n                  data-toggle=\"dropdown\"\n                  aria-haspopup=\"true\"\n                  aria-expanded=\"false\"\n                >\n                  <span>Start</span>\n                  <i class=\"ml-1 mdi mdi-chevron-down\"></i>\n                </button>\n                <div\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  aria-labelledby=\"startProcessDropdown\"\n                >\n                  <button\n                    *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                    class=\"dropdown-item p\"\n                    href=\"#\"\n                    (click)=\"startProcess(processDocumentDefinition)\"\n                  >\n                    {{ processDocumentDefinition.processName }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a\n              id=\"{{ tab.name }}-tab\"\n              class=\"nav-link clickable\"\n              [ngClass]=\"{active: tab.isActive()}\"\n              data-toggle=\"tab\"\n              (click)=\"tabLoader.load(tab)\"\n            >\n              {{ tabLoader.translateTabName(tab) }}\n            </a>\n          </li>\n        </ul>\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <ng-template #tabContainer>Loading...</ng-template>\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n", styles: [".tab-container{min-height:300px}\n"], components: [{ type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: ["formSubmit"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i3.TranslatePipe } });
+DossierDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i3.TranslateService }, { token: i2$1.DocumentService }, { token: i2.ProcessService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i5.Location }, { token: TabService }, { token: i7.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+DossierDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailComponent, selector: "valtimo-dossier-detail", viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["tabContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "supportingProcessStart", first: true, predicate: ["supportingProcessStartModal"], 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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-2\">\n          <div class=\"row\">\n            <div class=\"col\">\n              <div class=\"row\" *ngIf=\"customDossierHeaderItems.length > 0; else defaultTitle\">\n                <span\n                  class=\"mb-0 mt-0 pb-2 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n                    item.columnSize * 2\n                  }} {{ item.customClass }}\"\n                  [ngClass]=\"{\n                    h1: item.textSize === 'xl',\n                    h2: item.textSize === 'lg',\n                    h3: item.textSize === 'md',\n                    h4: item.textSize === 'sm',\n                    h5: item.textSize === 'xs'\n                  }\"\n                  *ngFor=\"let item of customDossierHeaderItems\"\n                >\n                  <span *ngIf=\"item.label !== ''\">{{ item.label | translate }}</span>\n                  <span *ngIf=\"item.label !== '' && item.value !== '' && item.value !== null\"\n                    >:\n                  </span>\n                  <strong>{{ item.value }}</strong>\n                </span>\n              </div>\n              <ng-template #defaultTitle>\n                {{ documentDefinitionNameTitle }}\n              </ng-template>\n            </div>\n            <div class=\"btn-group mt-m3px mb-3 col-auto\">\n              <valtimo-extension\n                module=\"dossier\"\n                page=\"dossier-detail\"\n                section=\"card-header\"\n              ></valtimo-extension>\n              <div class=\"dropdown\">\n                <button\n                  class=\"btn btn-primary dropdown-toggle\"\n                  type=\"button\"\n                  id=\"startProcessDropdown\"\n                  placement=\"bottom\"\n                  [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                  [disabled]=\"processDocumentDefinitions.length === 0\"\n                  data-toggle=\"dropdown\"\n                  aria-haspopup=\"true\"\n                  aria-expanded=\"false\"\n                >\n                  <span>Start</span>\n                  <i class=\"ml-1 mdi mdi-chevron-down\"></i>\n                </button>\n                <div\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  aria-labelledby=\"startProcessDropdown\"\n                >\n                  <button\n                    *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                    class=\"dropdown-item p\"\n                    href=\"#\"\n                    (click)=\"startProcess(processDocumentDefinition)\"\n                  >\n                    {{ processDocumentDefinition.processName }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a\n              id=\"{{ tab.name }}-tab\"\n              class=\"nav-link clickable\"\n              [ngClass]=\"{active: tab.isActive()}\"\n              data-toggle=\"tab\"\n              (click)=\"tabLoader.load(tab)\"\n            >\n              {{ tabLoader.translateTabName(tab) }}\n            </a>\n          </li>\n        </ul>\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <ng-template #tabContainer>Loading...</ng-template>\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n", styles: [".tab-container{min-height:300px}\n"], components: [{ type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: ["formSubmit"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i3.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-2\">\n          <div class=\"row\">\n            <div class=\"col\">\n              <div class=\"row\" *ngIf=\"customDossierHeaderItems.length > 0; else defaultTitle\">\n                <span\n                  class=\"mb-0 mt-0 pb-2 align-self-end col-xl-{{ item.columnSize }} col-lg-{{\n                    item.columnSize * 2\n                  }} {{ item.customClass }}\"\n                  [ngClass]=\"{\n                    h1: item.textSize === 'xl',\n                    h2: item.textSize === 'lg',\n                    h3: item.textSize === 'md',\n                    h4: item.textSize === 'sm',\n                    h5: item.textSize === 'xs'\n                  }\"\n                  *ngFor=\"let item of customDossierHeaderItems\"\n                >\n                  <span *ngIf=\"item.label !== ''\">{{ item.label | translate }}</span>\n                  <span *ngIf=\"item.label !== '' && item.value !== '' && item.value !== null\"\n                    >:\n                  </span>\n                  <strong>{{ item.value }}</strong>\n                </span>\n              </div>\n              <ng-template #defaultTitle>\n                {{ documentDefinitionNameTitle }}\n              </ng-template>\n            </div>\n            <div class=\"btn-group mt-m3px mb-3 col-auto\">\n              <valtimo-extension\n                module=\"dossier\"\n                page=\"dossier-detail\"\n                section=\"card-header\"\n              ></valtimo-extension>\n              <div class=\"dropdown\">\n                <button\n                  class=\"btn btn-primary dropdown-toggle\"\n                  type=\"button\"\n                  id=\"startProcessDropdown\"\n                  placement=\"bottom\"\n                  [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                  [disabled]=\"processDocumentDefinitions.length === 0\"\n                  data-toggle=\"dropdown\"\n                  aria-haspopup=\"true\"\n                  aria-expanded=\"false\"\n                >\n                  <span>Start</span>\n                  <i class=\"ml-1 mdi mdi-chevron-down\"></i>\n                </button>\n                <div\n                  class=\"dropdown-menu dropdown-menu-right\"\n                  aria-labelledby=\"startProcessDropdown\"\n                >\n                  <button\n                    *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                    class=\"dropdown-item p\"\n                    href=\"#\"\n                    (click)=\"startProcess(processDocumentDefinition)\"\n                  >\n                    {{ processDocumentDefinition.processName }}\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a\n              id=\"{{ tab.name }}-tab\"\n              class=\"nav-link clickable\"\n              [ngClass]=\"{active: tab.isActive()}\"\n              data-toggle=\"tab\"\n              (click)=\"tabLoader.load(tab)\"\n            >\n              {{ tabLoader.translateTabName(tab) }}\n            </a>\n          </li>\n        </ul>\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <ng-template #tabContainer>Loading...</ng-template>\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n", styles: [".tab-container{min-height:300px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i3.TranslateService }, { type: i2$1.DocumentService }, { type: i2.ProcessService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i5$1.Location }, { type: TabService }, { type: i7.ConfigService }]; }, propDecorators: { viewContainerRef: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i3.TranslateService }, { type: i2$1.DocumentService }, { type: i2.ProcessService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i5.Location }, { type: TabService }, { type: i7.ConfigService }]; }, propDecorators: { viewContainerRef: [{
                 type: ViewChild,
                 args: ['tabContainer', { read: ViewContainerRef, static: true }]
             }], supportingProcessStart: [{
@@ -1195,7 +1203,7 @@ class DossierDetailTabContactMomentsComponent {
     }
 }
 DossierDetailTabContactMomentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabContactMomentsComponent, deps: [{ token: i1$1.ContactMomentService }, { token: i7$1.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailTabContactMomentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabContactMomentsComponent, selector: "valtimo-dossier-detail-tab-contact-moments", viewQueries: [{ propertyName: "modal", first: true, predicate: ["contactMomentsNoteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2021 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-note-plus\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2021 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.contact-moments-container{display:flex;flex-direction:column}.button-container{display:inline;align-self:flex-end}\n"], components: [{ type: i7$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { type: i7$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: i7$1.TimelineComponent, selector: "valtimo-timeline", inputs: ["items"] }], directives: [{ type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe, "async": i5$1.AsyncPipe } });
+DossierDetailTabContactMomentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabContactMomentsComponent, selector: "valtimo-dossier-detail-tab-contact-moments", viewQueries: [{ propertyName: "modal", first: true, predicate: ["contactMomentsNoteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2021 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-note-plus\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2021 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.contact-moments-container{display:flex;flex-direction:column}.button-container{display:inline;align-self:flex-end}\n"], components: [{ type: i7$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { type: i7$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: i7$1.TimelineComponent, selector: "valtimo-timeline", inputs: ["items"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i3.TranslatePipe, "async": i5.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabContactMomentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-contact-moments', template: "<!--\n  ~ Copyright 2015-2021 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-note-plus\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2021 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.contact-moments-container{display:flex;flex-direction:column}.button-container{display:inline;align-self:flex-end}\n"] }]
@@ -1300,12 +1308,12 @@ class DossierUpdateComponent {
         return 0;
     }
 }
-DossierUpdateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierUpdateComponent, deps: [{ token: i3$1.TaskService }, { token: i2$1.DocumentService }, { token: i1.ActivatedRoute }, { token: i3$3.ToastrService }, { token: i5$1.Location }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component });
-DossierUpdateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierUpdateComponent, selector: "valtimo-dossier-update", 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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7$1.CamundaFormComponent, selector: "valtimo-camunda-form", inputs: ["componentName", "formFields"], outputs: ["submitted"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i5$1.KeyValuePipe } });
+DossierUpdateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierUpdateComponent, deps: [{ token: i3$1.TaskService }, { token: i2$1.DocumentService }, { token: i1.ActivatedRoute }, { token: i3$3.ToastrService }, { token: i5.Location }, { token: DossierService }], target: i0.ɵɵFactoryTarget.Component });
+DossierUpdateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierUpdateComponent, selector: "valtimo-dossier-update", 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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i7$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7$1.CamundaFormComponent, selector: "valtimo-camunda-form", inputs: ["componentName", "formFields"], outputs: ["submitted"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i5.KeyValuePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierUpdateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-update', 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\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\n            <div class=\"row pt-3 mt-1\">\n              <div class=\"col-sm-12\">\n                <div class=\"text-right\">\n                  <button\n                    class=\"btn btn-space btn-default float-left\"\n                    type=\"button\"\n                    (click)=\"back()\"\n                    id=\"back-button\"\n                  >\n                    Back\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-secondary\"\n                    type=\"button\"\n                    (click)=\"reset()\"\n                    id=\"reset-button\"\n                  >\n                    Reset\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i3$1.TaskService }, { type: i2$1.DocumentService }, { type: i1.ActivatedRoute }, { type: i3$3.ToastrService }, { type: i5$1.Location }, { type: DossierService }]; } });
+        }], ctorParameters: function () { return [{ type: i3$1.TaskService }, { type: i2$1.DocumentService }, { type: i1.ActivatedRoute }, { type: i3$3.ToastrService }, { type: i5.Location }, { type: DossierService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.