@valtimo/dossier 5.11.0 → 5.13.0

package/fesm2020/valtimo-dossier.mjs

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewEncapsulation, ViewChild, EventEmitter, Output, InjectionToken, Inject, ViewContainerRef, NgModule, ANALYZE_FOR_ENTRY_COMPONENTS } from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, ViewChild, EventEmitter, Output, InjectionToken, Inject, Input, ViewContainerRef, NgModule, ANALYZE_FOR_ENTRY_COMPONENTS } from '@angular/core';
 import * as i2$1 from '@valtimo/document';
 import { DocumentSearchRequestImpl } from '@valtimo/document';
-import * as moment from 'moment';
-import moment__default from 'moment';
-import { BehaviorSubject, map, tap, switchMap, of, combineLatest, filter, distinctUntilChanged, take, Subject, noop } from 'rxjs';
+import moment from 'moment';
+import { BehaviorSubject, map, tap, distinctUntilChanged, switchMap, of, combineLatest, filter, take, Subscription, Subject, noop, from, startWith } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import * as i6$1 from '@ngx-translate/core';
@@ -13,7 +12,7 @@ import * as i1 from '@valtimo/config';
 import { UploadProvider, ROLE_USER, ConfigModule, HttpLoaderFactory } from '@valtimo/config';
 import * as i5 from 'ngx-logger';
 import * as i7 from '@valtimo/components';
-import { FormioOptionsImpl, TimelineItemImpl, ListModule, WidgetModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, FormIoModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule, DocumentenApiMetadataModalModule } from '@valtimo/components';
+import { FormioOptionsImpl, TimelineItemImpl, ListModule, WidgetModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, FormIoModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule, DocumentenApiMetadataModalModule, SearchableDropdownSelectModule, SearchFieldsModule } from '@valtimo/components';
 import * as i2 from '@valtimo/process';
 import { ProcessModule } from '@valtimo/process';
 import * as i4 from '@valtimo/form-link';
@@ -21,7 +20,7 @@ import * as i6 from '@valtimo/security';
 import { AuthGuardService } from '@valtimo/security';
 import * as i5$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i9 from '@ng-bootstrap/ng-bootstrap';
+import * as i10 from '@ng-bootstrap/ng-bootstrap';
 import { NgbButtonsModule, NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i5$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -37,6 +36,7 @@ import * as i3$3 from '@valtimo/user-interface';
 import { SelectModule, InputLabelModule, ParagraphModule, TableModule, ModalModule as ModalModule$1, TitleModule, ButtonModule } from '@valtimo/user-interface';
 import * as i2$2 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
+import * as i8 from 'keycloak-angular';
 import * as i1$2 from '@valtimo/contact-moment';
 
 /*
@@ -381,22 +381,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-moment__default.locale(localStorage.getItem('langKey') || '');
+moment.locale(localStorage.getItem('langKey') || '');
 class DossierListComponent {
-    constructor(route, router, documentService, translateService, dossierService, logger) {
+    constructor(route, router, documentService, translateService, dossierService, logger, configService) {
         this.route = route;
         this.router = router;
         this.documentService = documentService;
         this.translateService = translateService;
         this.dossierService = dossierService;
         this.logger = logger;
+        this.configService = configService;
         this.selectedProcessDocumentDefinition = null;
         this.modalListenerAdded = false;
         this.loading$ = new BehaviorSubject(true);
         this.settingPaginationForDocName$ = new BehaviorSubject(undefined);
+        this.loadingDocumentSearchFields$ = new BehaviorSubject(true);
         this.documentDefinitionName$ = this.route.params.pipe(map(params => params.documentDefinitionName || ''), tap(documentDefinitionName => {
             this.resetPagination(documentDefinitionName);
         }));
+        this.documentSearchFields$ = this.documentDefinitionName$.pipe(distinctUntilChanged(), tap(() => this.loadingDocumentSearchFields$.next(true)), switchMap(documentDefinitionName => this.documentService.getDocumentSearchFields(documentDefinitionName)), tap(() => this.loadingDocumentSearchFields$.next(false)));
         this.associatedProcessDocumentDefinitions$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => documentDefinitionName
             ? this.documentService.findProcessDocumentDefinitions(documentDefinitionName)
             : of([])), map(processDocumentDefinitions => processDocumentDefinitions.filter(definition => definition.canInitializeDocument)));
@@ -432,7 +435,7 @@ class DossierListComponent {
             this.createdBy$,
             this.globalSearchFilter$,
         ]).pipe(filter(([pagination]) => !!pagination), map(([pagination, documentDefinitionName, sequence, createdBy, globalSearchFilter]) => new DocumentSearchRequestImpl(documentDefinitionName, pagination.page - 1, pagination.size, sequence, createdBy, globalSearchFilter, pagination.sort)));
-        this.documentsRequest$ = this.documentSearchRequest$.pipe(distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), tap(request => {
+        this.documentsRequest$ = this.documentSearchRequest$.pipe(distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), tap(() => this.loading$.next(true)), tap(request => {
             this.storedSearchRequestKey$.pipe(take(1)).subscribe(storedSearchRequestKey => {
                 this.logger.debug(`store request in local storage: ${JSON.stringify(request)}`);
                 localStorage.setItem(storedSearchRequestKey, JSON.stringify(request));
@@ -444,6 +447,7 @@ class DossierListComponent {
             const { content, ...others } = document;
             return { ...content, ...others };
         })), tap(() => this.loading$.next(false)));
+        this.enableCaseSearchFields = configService.config.featureToggles.caseSearchFields;
     }
     ngOnInit() {
         this.modalListenerAdded = false;
@@ -561,12 +565,12 @@ class DossierListComponent {
         }
     }
 }
-DossierListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$1.DocumentService }, { token: i6$1.TranslateService }, { token: DossierService }, { token: i5.NGXLogger }], 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\" *ngIf=\"{loading: loading$ | async} as obs\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div\n        *ngIf=\"\n          associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\n        \"\n      >\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]=\"associatedProcessDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"associatedProcessDocumentDefinitions.length === 0 || obs.loading\"\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 associatedProcessDocumentDefinitions\"\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-spinner *ngIf=\"obs.loading\"></valtimo-spinner>\n      <ng-container *ngTemplateOutlet=\"list; context:{obs: obs}\"></ng-container>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #list let-obs=\"obs\">\n    <ng-container *ngIf=\"paginationCopy$ | async as pagination\">\n    <ng-container *ngIf=\"fields$ | async as fields\">\n      <ng-container *ngIf=\"documentItems$ | async as documentItems\">\n        <valtimo-widget *ngIf=\"obs.loading === false\">\n          <valtimo-list\n            [items]=\"documentItems\"\n            [fields]=\"fields\"\n            (rowClicked)=\"rowClick($event)\"\n            [pagination]=\"pagination\"\n            [viewMode]=\"true\"\n            [header]=\"true\"\n            paginationIdentifier=\"dossierList\"\n            (paginationClicked)=\"pageChange($event)\"\n            (paginationSet)=\"pageSizeChange($event)\"\n            [initialSortState]=\"pagination.sort\"\n            (sortChanged)=\"sortChanged($event)\"\n          >\n            <div header>\n              <h3 class=\"list-header-title\">\n                {{ (schema$ | async)?.title }}\n                <sup class=\"ml-1 badge badge-pill badge-primary\">{{ documentItems?.length || 0 }}</sup>\n              </h3>\n            </div>\n          </valtimo-list>\n        </valtimo-widget>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n</ng-template>\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$ | async\"\n        (ngModelChange)=\"globalSearchFilterChange($event)\"\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$ | async\"\n        (ngModelChange)=\"sequenceChange($event)\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""], components: [{ type: i7.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal" }, { type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: i7.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }], directives: [{ type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.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: { "async": i5$1.AsyncPipe, "translate": i6$1.TranslatePipe } });
+DossierListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$1.DocumentService }, { token: i6$1.TranslateService }, { token: DossierService }, { token: i5.NGXLogger }, { token: i1.ConfigService }], 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\" *ngIf=\"{loading: loading$ | async} as obs\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div\n        *ngIf=\"\n          associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\n        \"\n      >\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]=\"associatedProcessDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"associatedProcessDocumentDefinitions.length === 0 || obs.loading\"\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 associatedProcessDocumentDefinitions\"\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-spinner *ngIf=\"obs.loading\"></valtimo-spinner>\n      <ng-container *ngTemplateOutlet=\"searchFields\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #searchFields>\n  <div class=\"mb-3\" *ngIf=\"enableCaseSearchFields\">\n    <valtimo-search-fields\n      [loading]=\"loadingDocumentSearchFields$ | async\"\n      [searchFields]=\"documentSearchFields$ | async\"\n    ></valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <ng-container *ngIf=\"paginationCopy$ | async as pagination\">\n    <ng-container *ngIf=\"fields$ | async as fields\">\n      <ng-container *ngIf=\"documentItems$ | async as documentItems\">\n        <valtimo-widget *ngIf=\"obs.loading === false\">\n          <valtimo-list\n            [items]=\"documentItems\"\n            [fields]=\"fields\"\n            (rowClicked)=\"rowClick($event)\"\n            [pagination]=\"pagination\"\n            [viewMode]=\"true\"\n            [header]=\"true\"\n            paginationIdentifier=\"dossierList\"\n            (paginationClicked)=\"pageChange($event)\"\n            (paginationSet)=\"pageSizeChange($event)\"\n            [initialSortState]=\"pagination.sort\"\n            (sortChanged)=\"sortChanged($event)\"\n          >\n            <div header>\n              <h3 class=\"list-header-title\">\n                {{ (schema$ | async)?.title }}\n                <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n                  documentItems?.length || 0\n                }}</sup>\n              </h3>\n            </div>\n          </valtimo-list>\n        </valtimo-widget>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar *ngIf=\"!enableCaseSearchFields\">\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$ | async\"\n        (ngModelChange)=\"globalSearchFilterChange($event)\"\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$ | async\"\n        (ngModelChange)=\"sequenceChange($event)\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""], components: [{ type: i7.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: DossierProcessStartModalComponent, selector: "valtimo-dossier-process-start-modal" }, { type: i7.SearchFieldsComponent, selector: "valtimo-search-fields", inputs: ["loading", "searchFields"], outputs: ["valueChange", "doSearch"] }, { type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i7.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { type: i7.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }], directives: [{ type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.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: { "async": i5$1.AsyncPipe, "translate": i6$1.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\" *ngIf=\"{loading: loading$ | async} as obs\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div\n        *ngIf=\"\n          associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\n        \"\n      >\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]=\"associatedProcessDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"associatedProcessDocumentDefinitions.length === 0 || obs.loading\"\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 associatedProcessDocumentDefinitions\"\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-spinner *ngIf=\"obs.loading\"></valtimo-spinner>\n      <ng-container *ngTemplateOutlet=\"list; context:{obs: obs}\"></ng-container>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #list let-obs=\"obs\">\n    <ng-container *ngIf=\"paginationCopy$ | async as pagination\">\n    <ng-container *ngIf=\"fields$ | async as fields\">\n      <ng-container *ngIf=\"documentItems$ | async as documentItems\">\n        <valtimo-widget *ngIf=\"obs.loading === false\">\n          <valtimo-list\n            [items]=\"documentItems\"\n            [fields]=\"fields\"\n            (rowClicked)=\"rowClick($event)\"\n            [pagination]=\"pagination\"\n            [viewMode]=\"true\"\n            [header]=\"true\"\n            paginationIdentifier=\"dossierList\"\n            (paginationClicked)=\"pageChange($event)\"\n            (paginationSet)=\"pageSizeChange($event)\"\n            [initialSortState]=\"pagination.sort\"\n            (sortChanged)=\"sortChanged($event)\"\n          >\n            <div header>\n              <h3 class=\"list-header-title\">\n                {{ (schema$ | async)?.title }}\n                <sup class=\"ml-1 badge badge-pill badge-primary\">{{ documentItems?.length || 0 }}</sup>\n              </h3>\n            </div>\n          </valtimo-list>\n        </valtimo-widget>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n\n</ng-template>\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$ | async\"\n        (ngModelChange)=\"globalSearchFilterChange($event)\"\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$ | async\"\n        (ngModelChange)=\"sequenceChange($event)\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2$1.DocumentService }, { type: i6$1.TranslateService }, { type: DossierService }, { type: i5.NGXLogger }]; }, propDecorators: { processStart: [{
+            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\" *ngIf=\"{loading: loading$ | async} as obs\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div\n        *ngIf=\"\n          associatedProcessDocumentDefinitions$ | async as associatedProcessDocumentDefinitions\n        \"\n      >\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]=\"associatedProcessDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"associatedProcessDocumentDefinitions.length === 0 || obs.loading\"\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 associatedProcessDocumentDefinitions\"\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-spinner *ngIf=\"obs.loading\"></valtimo-spinner>\n      <ng-container *ngTemplateOutlet=\"searchFields\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #searchFields>\n  <div class=\"mb-3\" *ngIf=\"enableCaseSearchFields\">\n    <valtimo-search-fields\n      [loading]=\"loadingDocumentSearchFields$ | async\"\n      [searchFields]=\"documentSearchFields$ | async\"\n    ></valtimo-search-fields>\n  </div>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <ng-container *ngIf=\"paginationCopy$ | async as pagination\">\n    <ng-container *ngIf=\"fields$ | async as fields\">\n      <ng-container *ngIf=\"documentItems$ | async as documentItems\">\n        <valtimo-widget *ngIf=\"obs.loading === false\">\n          <valtimo-list\n            [items]=\"documentItems\"\n            [fields]=\"fields\"\n            (rowClicked)=\"rowClick($event)\"\n            [pagination]=\"pagination\"\n            [viewMode]=\"true\"\n            [header]=\"true\"\n            paginationIdentifier=\"dossierList\"\n            (paginationClicked)=\"pageChange($event)\"\n            (paginationSet)=\"pageSizeChange($event)\"\n            [initialSortState]=\"pagination.sort\"\n            (sortChanged)=\"sortChanged($event)\"\n          >\n            <div header>\n              <h3 class=\"list-header-title\">\n                {{ (schema$ | async)?.title }}\n                <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n                  documentItems?.length || 0\n                }}</sup>\n              </h3>\n            </div>\n          </valtimo-list>\n        </valtimo-widget>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar *ngIf=\"!enableCaseSearchFields\">\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$ | async\"\n        (ngModelChange)=\"globalSearchFilterChange($event)\"\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$ | async\"\n        (ngModelChange)=\"sequenceChange($event)\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2$1.DocumentService }, { type: i6$1.TranslateService }, { type: DossierService }, { type: i5.NGXLogger }, { type: i1.ConfigService }]; }, propDecorators: { processStart: [{
                 type: ViewChild,
                 args: ['processStartModal']
             }] } });
@@ -586,8 +590,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-moment__default.locale(localStorage.getItem('langKey') || '');
-moment__default.defaultFormat = 'DD MMM YYYY HH:mm';
+moment.locale(localStorage.getItem('langKey') || '');
+moment.defaultFormat = 'DD MMM YYYY HH:mm';
 class DossierDetailTabSummaryComponent {
     constructor(router, documentService, taskService, processService, el, renderer, route, formService, userProviderService) {
         this.router = router;
@@ -603,6 +607,7 @@ class DossierDetailTabSummaryComponent {
         this.tasks = [];
         this.formDefinition = null;
         this.roles = [];
+        this._subscriptions = new Subscription();
         this.snapshot = this.route.snapshot.paramMap;
         this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
         this.documentId = this.snapshot.get('documentId') || '';
@@ -610,65 +615,70 @@ class DossierDetailTabSummaryComponent {
         this.options.disableAlerts = true;
     }
     ngOnInit() {
-        this.moment = moment__default;
+        this.moment = moment;
         this.init();
     }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
     init() {
-        this.documentService.getDocument(this.documentId).subscribe(document => {
+        this._subscriptions.add(this.documentService.getDocument(this.documentId).subscribe(document => {
             this.document = document;
-        });
-        this.formService
+        }));
+        this._subscriptions.add(this.formService
             .getFormDefinitionByNamePreFilled(`${this.documentDefinitionName}.summary`, this.documentId)
             .subscribe(formDefinition => {
             this.formDefinition = formDefinition;
-        });
-        this.userProviderService.getUserSubject().subscribe(user => {
+        }));
+        this._subscriptions.add(this.userProviderService.getUserSubject().subscribe(user => {
             this.roles = user.roles;
             this.tasks = [];
             this.loadProcessDocumentInstances(this.documentId);
-        });
+        }));
     }
     loadProcessDocumentInstances(documentId) {
-        this.documentService
+        this._subscriptions.add(this.documentService
             .findProcessDocumentInstances(documentId)
             .subscribe(processDocumentInstances => {
             this.processDocumentInstances = processDocumentInstances;
             this.processDocumentInstances.forEach(instance => {
                 this.loadProcessInstanceTasks(instance.id.processInstanceId);
             });
-        });
+        }));
     }
     loadProcessInstanceTasks(processInstanceId) {
-        this.processService.getProcessInstanceTasks(processInstanceId).subscribe(tasks => {
-            tasks.forEach(task => {
-                task.createdUnix = this.moment(task.created).unix();
-                task.created = this.moment(task.created).format('DD MMM YYYY HH:mm');
-                task.isLocked = () => {
-                    let locked = true;
-                    for (const link of task.identityLinks) {
-                        if (link.type === 'candidate' && link.groupId) {
-                            if (this.roles.includes(link.groupId)) {
-                                locked = false;
-                                break;
+        this._subscriptions.add(this.processService.getProcessInstanceTasks(processInstanceId).subscribe(tasks => {
+            if (tasks != null) {
+                tasks.forEach(task => {
+                    task.createdUnix = this.moment(task.created).unix();
+                    task.created = this.moment(task.created).format('DD MMM YYYY HH:mm');
+                    task.isLocked = () => {
+                        let locked = true;
+                        for (const link of task.identityLinks) {
+                            if (link.type === 'candidate' && link.groupId) {
+                                if (this.roles.includes(link.groupId)) {
+                                    locked = false;
+                                    break;
+                                }
                             }
                         }
-                    }
-                    return locked;
-                };
-            });
-            this.tasks = this.tasks.concat(tasks);
-            this.tasks.sort((t1, t2) => t2.createdUnix - t1.createdUnix);
-        });
+                        return locked;
+                    };
+                });
+                this.tasks = this.tasks.concat(tasks);
+                this.tasks.sort((t1, t2) => t2.createdUnix - t1.createdUnix);
+            }
+        }));
     }
     rowTaskClick(task) {
         this.taskDetail.openTaskDetails(task);
     }
 }
 DossierDetailTabSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabSummaryComponent, deps: [{ token: i1$1.Router }, { token: i2$1.DocumentService }, { token: i3.TaskService }, { token: i2.ProcessService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.ActivatedRoute }, { token: i5$3.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.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }, { type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i3.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: i9.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i6$1.TranslatePipe }, encapsulation: i0.ViewEncapsulation.None });
+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\">{{ 'summary.userTasks' | translate }}</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\">{{\n              'summary.taskOpen' | translate\n            }}</span>\n            <strong>{{ task.name }}</strong>\n            <div>{{ 'summary.taskCreated' | translate }} {{ 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>{{ 'summary.taskCreated' | translate }} {{ 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.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }, { type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i3.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: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i6$1.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"] }]
+            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\">{{ 'summary.userTasks' | translate }}</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\">{{\n              'summary.taskOpen' | translate\n            }}</span>\n            <strong>{{ task.name }}</strong>\n            <div>{{ 'summary.taskCreated' | translate }} {{ 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>{{ 'summary.taskCreated' | translate }} {{ 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$1.Router }, { type: i2$1.DocumentService }, { type: i3.TaskService }, { type: i2.ProcessService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.ActivatedRoute }, { type: i5$3.FormService }, { type: i6.UserProviderService }]; }, propDecorators: { taskDetail: [{
                 type: ViewChild,
                 args: ['taskDetail']
@@ -700,8 +710,7 @@ class DossierDetailTabProgressComponent {
         this.documentService
             .findProcessDocumentInstances(this.documentId)
             .subscribe(processDocumentInstances => {
-            this.processDocumentInstances = processDocumentInstances
-                .sort((a, b) => (a.isActive === b.isActive) ? 0 : a.isActive ? -1 : 1);
+            this.processDocumentInstances = processDocumentInstances.sort((a, b) => a.isActive === b.isActive ? 0 : a.isActive ? -1 : 1);
             if (processDocumentInstances.length > 0) {
                 this.selectedProcessInstanceId = processDocumentInstances[0].id.processInstanceId;
             }
@@ -733,8 +742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-moment__default.locale(localStorage.getItem('langKey') || '');
-moment__default.defaultFormat = 'DD MMM YYYY HH:mm';
+moment.locale(localStorage.getItem('langKey') || '');
+moment.defaultFormat = 'DD MMM YYYY HH:mm';
 class DossierDetailTabAuditComponent {
     constructor(route, documentService, spinnerService) {
         this.route = route;
@@ -758,7 +767,7 @@ class DossierDetailTabAuditComponent {
         this.documentService.getAuditLog(this.documentId, pageNumber).subscribe(page => {
             const timelineItems = [];
             page.content.forEach(auditRecord => {
-                const occurredOn = moment__default(auditRecord.metaData.occurredOn);
+                const occurredOn = moment(auditRecord.metaData.occurredOn);
                 const fromNow = occurredOn.fromNow();
                 timelineItems.push(new TimelineItemImpl(occurredOn.format('DD MMM YYYY'), occurredOn.format('HH:mm'), auditRecord.metaData.user, fromNow, DossierDetailTabAuditComponent.getTranslationKey(auditRecord.auditEvent), auditRecord.auditEvent));
             });
@@ -775,7 +784,7 @@ class DossierDetailTabAuditComponent {
     }
 }
 DossierDetailTabAuditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabAuditComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.DocumentService }, { token: i3$1.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.TimelineComponent, selector: "valtimo-timeline", inputs: ["items"] }, { type: i7.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: i9.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": i6$1.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.TimelineComponent, selector: "valtimo-timeline", inputs: ["items"] }, { type: i7.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: i10.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": i6$1.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"] }]
@@ -888,7 +897,7 @@ class DossierDetailTabS3DocumentsComponent {
                 }, () => {
                     this.toastrService.error('Failed to remove document from dossier');
                 });
-            }
+            },
         });
     }
     refetchDocuments() {
@@ -1005,7 +1014,7 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
                 }, () => {
                     this.toastrService.error('Failed to remove document from dossier');
                 });
-            }
+            },
         });
     }
     metadataSet(metadata) {
@@ -1444,6 +1453,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierAssignUserComponent {
+    constructor(documentService) {
+        this.documentService = documentService;
+        this.assignmentOfDocumentChanged = new EventEmitter();
+        this.userIdToAssign = null;
+        this.candidateUsersForDocument$ = new BehaviorSubject(undefined);
+        this.disabled$ = new BehaviorSubject(true);
+        this.assignedIdOnServer$ = new BehaviorSubject(null);
+        this.assignedUserFullName$ = new BehaviorSubject(null);
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this._subscriptions.add(this.documentService.getCandidateUsers(this.documentId).subscribe(candidateUsers => {
+            this.candidateUsersForDocument$.next(candidateUsers);
+            if (this.assigneeId) {
+                this.assignedIdOnServer$.next(this.assigneeId);
+                this.userIdToAssign = this.assigneeId;
+                this.assignedUserFullName$.next(this.assigneeFullName);
+            }
+            this.enable();
+        }));
+    }
+    ngOnChanges(changes) {
+        const assigneeId = changes?.assigneeId?.currentValue;
+        const assigneeFullName = changes?.assigneeFullName?.currentValue;
+        if (assigneeId && assigneeFullName) {
+            this.assignedIdOnServer$.next(assigneeId || null);
+            this.userIdToAssign = assigneeId || null;
+            this.assignedUserFullName$.next(assigneeFullName);
+        }
+        else {
+            this.clear();
+        }
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    assignDocument(userId) {
+        this.disable();
+        this.documentService
+            .assignHandlerToDocument(this.documentId, userId)
+            .pipe(tap$1(() => {
+            this.userIdToAssign = userId;
+            this.assignedIdOnServer$.next(userId);
+            this.assignedUserFullName$.next(this.assigneeFullName);
+            this.emitChange();
+            this.enable();
+        }))
+            .subscribe();
+    }
+    unassignDocument() {
+        this.disable();
+        this.documentService
+            .unassignHandlerFromDocument(this.documentId)
+            .pipe(tap$1(() => {
+            this.clear();
+            this.emitChange();
+            this.enable();
+        }))
+            .subscribe();
+    }
+    mapUsersForDropdown(users) {
+        return (users &&
+            users
+                .sort((a, b) => a.lastName.localeCompare(b.lastName))
+                .map(user => ({ text: `${user.firstName} ${user.lastName}`, id: user.id })));
+    }
+    clear() {
+        this.assignedIdOnServer$.next(null);
+        this.userIdToAssign = null;
+    }
+    emitChange() {
+        this.assignmentOfDocumentChanged.emit();
+    }
+    enable() {
+        this.disabled$.next(false);
+    }
+    disable() {
+        this.disabled$.next(true);
+    }
+}
+DossierAssignUserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierAssignUserComponent, deps: [{ token: i2$1.DocumentService }], target: i0.ɵɵFactoryTarget.Component });
+DossierAssignUserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: { documentId: "documentId", assigneeId: "assigneeId", assigneeFullName: "assigneeFullName" }, outputs: { assignmentOfDocumentChanged: "assignmentOfDocumentChanged" }, usesOnChanges: 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\n  *ngIf=\"{\n    candidateUsers: candidateUsersForDocument$ | async,\n    idOnServer: assignedIdOnServer$ | async,\n    fullName: assignedUserFullName$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"row mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <ng-container *ngIf=\"obs.candidateUsers; else loading\">\n          <valtimo-searchable-dropdown-select\n            [disabled]=\"obs.disabled\"\n            id=\"dossier-candidates-dropdown\"\n            [style]=\"'underlinedText'\"\n            [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n            [buttonText]=\"'assignDocument.header' | translate\"\n            [searchText]=\"'interface.typeToSearch' | translate\"\n            [noResultsText]=\"'interface.noSearchResults' | translate\"\n            [selectedText]=\"'assignDocument.assignedTo' | translate\"\n            [selectedTextValue]=\"assignedUserFullName$ | async\"\n            [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n            [hasSelection]=\"\n              userIdToAssign === obs.idOnServer && obs.idOnServer !== null && obs.fullName\n            \"\n            [width]=\"250\"\n            (itemSelected)=\"assignDocument($event)\"\n            (clearSelection)=\"unassignDocument()\"\n          >\n          </valtimo-searchable-dropdown-select>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignDocument.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.container-fluid{color:#959595}valtimo-searchable-dropdown-select{font-size:13px}:host::ng-deep #dossier-candidates-dropdown h5{margin-block:0}\n"], components: [{ type: i7.SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "selectedText", "selectedTextValue", "clearSelectionButtonTitle", "hasSelection", "width"], outputs: ["itemSelected", "clearSelection"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i6$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierAssignUserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-assign-user', 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\n  *ngIf=\"{\n    candidateUsers: candidateUsersForDocument$ | async,\n    idOnServer: assignedIdOnServer$ | async,\n    fullName: assignedUserFullName$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"row mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <ng-container *ngIf=\"obs.candidateUsers; else loading\">\n          <valtimo-searchable-dropdown-select\n            [disabled]=\"obs.disabled\"\n            id=\"dossier-candidates-dropdown\"\n            [style]=\"'underlinedText'\"\n            [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n            [buttonText]=\"'assignDocument.header' | translate\"\n            [searchText]=\"'interface.typeToSearch' | translate\"\n            [noResultsText]=\"'interface.noSearchResults' | translate\"\n            [selectedText]=\"'assignDocument.assignedTo' | translate\"\n            [selectedTextValue]=\"assignedUserFullName$ | async\"\n            [clearSelectionButtonTitle]=\"'assignDocument.remove' | translate\"\n            [hasSelection]=\"\n              userIdToAssign === obs.idOnServer && obs.idOnServer !== null && obs.fullName\n            \"\n            [width]=\"250\"\n            (itemSelected)=\"assignDocument($event)\"\n            (clearSelection)=\"unassignDocument()\"\n          >\n          </valtimo-searchable-dropdown-select>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignDocument.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.container-fluid{color:#959595}valtimo-searchable-dropdown-select{font-size:13px}:host::ng-deep #dossier-candidates-dropdown h5{margin-block:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$1.DocumentService }]; }, propDecorators: { documentId: [{
+                type: Input
+            }], assigneeId: [{
+                type: Input
+            }], assigneeFullName: [{
+                type: Input
+            }], assignmentOfDocumentChanged: [{
+                type: Output
+            }] } });
+
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -1460,7 +1580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * limitations under the License.
  */
 class DossierDetailComponent {
-    constructor(componentFactoryResolver, translateService, documentService, processService, route, router, location, tabService, configService) {
+    constructor(componentFactoryResolver, translateService, documentService, processService, route, router, location, tabService, configService, keyCloakService, logger) {
         this.componentFactoryResolver = componentFactoryResolver;
         this.translateService = translateService;
         this.documentService = documentService;
@@ -1470,11 +1590,31 @@ class DossierDetailComponent {
         this.location = location;
         this.tabService = tabService;
         this.configService = configService;
+        this.keyCloakService = keyCloakService;
+        this.logger = logger;
         this.document = null;
         this.tabLoader = null;
         this.processDefinitionListFields = [];
         this.processDocumentDefinitions = [];
         this.customDossierHeaderItems = [];
+        this.refreshDocument$ = new BehaviorSubject(null);
+        this.assigneeId$ = new BehaviorSubject('');
+        this.document$ = this.refreshDocument$.pipe(switchMap(() => this.route.params), map(params => params?.documentId), switchMap(documentId => documentId ? this.documentService.getDocument(this.documentId) : of(null)), tap(document => {
+            if (document) {
+                this.assigneeId$.next(document.assigneeId);
+                this.document = document;
+                if (this.configService.config.customDossierHeader?.hasOwnProperty(this.documentDefinitionName.toLowerCase()) &&
+                    this.customDossierHeaderItems.length === 0) {
+                    this.configService.config.customDossierHeader[this.documentDefinitionName.toLowerCase()]?.forEach(item => this.getCustomDossierHeaderItem(item));
+                }
+            }
+        }));
+        this.userId$ = from(this.keyCloakService.isLoggedIn()).pipe(switchMap(() => this.keyCloakService.loadUserProfile()), map(profile => profile?.id));
+        this.isAssigning$ = new BehaviorSubject(false);
+        this.isAssignedToCurrentUser$ = combineLatest([
+            this.assigneeId$,
+            this.userId$,
+        ]).pipe(map(([assigneeId, userId]) => assigneeId && userId && assigneeId === userId), startWith(true));
         this.snapshot = this.route.snapshot.paramMap;
         this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
         this.documentId = this.snapshot.get('documentId') || '';
@@ -1487,7 +1627,6 @@ class DossierDetailComponent {
             .subscribe(definition => {
             this.documentDefinitionNameTitle = definition.schema.title;
         });
-        this.getCustomDossierHeader();
         this.initialTabName = this.snapshot.get('tab');
         this.tabLoader.initial(this.initialTabName);
         this.getAllAssociatedProcessDefinitions();
@@ -1508,13 +1647,20 @@ class DossierDetailComponent {
     startProcess(processDocumentDefinition) {
         this.supportingProcessStart.openModal(processDocumentDefinition, this.documentId);
     }
-    getCustomDossierHeader() {
-        if (this.configService.config.customDossierHeader?.hasOwnProperty(this.documentDefinitionName.toLowerCase())) {
-            this.documentService.getDocument(this.documentId).subscribe(document => {
-                this.document = document;
-                this.configService.config.customDossierHeader[this.documentDefinitionName.toLowerCase()]?.forEach(item => this.getCustomDossierHeaderItem(item));
-            });
-        }
+    claimAssignee() {
+        this.isAssigning$.next(true);
+        this.userId$
+            .pipe(take(1), switchMap(userId => this.documentService.assignHandlerToDocument(this.documentId, userId)))
+            .subscribe(() => {
+            this.isAssigning$.next(false);
+            this.refreshDocument$.next(null);
+        }, () => {
+            this.isAssigning$.next(false);
+            this.logger.debug('Something went wrong while assigning user to case');
+        });
+    }
+    assignmentOfDocumentChanged() {
+        this.refreshDocument$.next(null);
     }
     getCustomDossierHeaderItem(item) {
         this.customDossierHeaderItems.push({
@@ -1522,23 +1668,36 @@ class DossierDetailComponent {
             columnSize: item['columnSize'] || 3,
             textSize: item['textSize'] || 'md',
             customClass: item['customClass'] || '',
+            modifier: item['modifier'] || '',
             value: item['propertyPaths']?.reduce((prev, curr) => prev + this.getStringFromDocumentPath(item, curr), ''),
         });
     }
     getStringFromDocumentPath(item, path) {
         const prefix = item['propertyPaths'].indexOf(path) > 0 ? ' ' : '';
-        const string = path.split('.').reduce((o, i) => o[i], this.document.content) || item['noValueText'] || '';
-        const regex = new RegExp('(T\\d\\d:\\d\\d:\\d\\d[+-])');
-        const formattedString = regex.test(string) ? moment(string).format('DD-MM-YYYY') : string;
-        return prefix + formattedString;
+        let string = path.split('.').reduce((o, i) => o[i], this.document.content) || item['noValueText'] || '';
+        const dateFormats = [moment.ISO_8601, 'MM-DD-YYYY', 'DD-MM-YYYY', 'YYYY-MM-DD'];
+        switch (item['modifier']) {
+            case 'age': {
+                if (moment(string, dateFormats, true).isValid()) {
+                    string = moment().diff(string, 'years');
+                }
+                break;
+            }
+            default: {
+                if (moment(string, dateFormats, true).isValid()) {
+                    string = moment(string).format('DD-MM-YYYY');
+                }
+            }
+        }
+        return prefix + string;
     }
 }
-DossierDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i6$1.TranslateService }, { token: i2$1.DocumentService }, { token: i2.ProcessService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i5$1.Location }, { token: TabService }, { token: i1.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>{{ 'dossier.startSubProcess' | translate }}</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.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i1.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: i9.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], pipes: { "translate": i6$1.TranslatePipe } });
+DossierDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i6$1.TranslateService }, { token: i2$1.DocumentService }, { token: i2.ProcessService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i5$1.Location }, { token: TabService }, { token: i1.ConfigService }, { token: i8.KeycloakService }, { token: i5.NGXLogger }], 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              <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\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              <ng-container *ngTemplateOutlet=\"claimButton\"></ng-container>\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>{{ 'dossier.startSubProcess' | translate }}</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\n<ng-template #caseDetailHeader>\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\">: </span>\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n  <ng-container *ngTemplateOutlet=\"caseDetailAssignee\"></ng-container>\n</ng-template>\n\n<ng-template #defaultTitle>\n  <div class=\"row ml-0 mr-0\">{{ documentDefinitionNameTitle?.trim() }}</div>\n</ng-template>\n\n<ng-template #caseDetailAssignee>\n  <div class=\"row ml-0 mr-0 mt-1 mb-1\" *ngIf=\"document$ | async as document\">\n    <valtimo-dossier-assign-user\n      [documentId]=\"document.id\"\n      [assigneeId]=\"document.assigneeId\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton>\n  <div class=\"user-full-name\">\n    <button\n      class=\"btn btn-space btn-primary mr-1\"\n      type=\"button\"\n      id=\"\"\n      placement=\"bottom\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n      (click)=\"claimAssignee()\"\n      [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    >\n      <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n    </button>\n  </div>\n</ng-template>\n", styles: [".tab-container{min-height:300px}\n"], components: [{ type: i7.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i1.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: ["formSubmit"] }, { type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: ["documentId", "assigneeId", "assigneeFullName"], outputs: ["assignmentOfDocumentChanged"] }], directives: [{ type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6$1.TranslatePipe, "async": i5$1.AsyncPipe } });
 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>{{ 'dossier.startSubProcess' | translate }}</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: i6$1.TranslateService }, { type: i2$1.DocumentService }, { type: i2.ProcessService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i5$1.Location }, { type: TabService }, { type: i1.ConfigService }]; }, propDecorators: { viewContainerRef: [{
+            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              <ng-container *ngTemplateOutlet=\"caseDetailHeader\"></ng-container>\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              <ng-container *ngTemplateOutlet=\"claimButton\"></ng-container>\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>{{ 'dossier.startSubProcess' | translate }}</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\n<ng-template #caseDetailHeader>\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\">: </span>\n      <strong>{{ item.value }}</strong>\n    </span>\n  </div>\n  <ng-container *ngTemplateOutlet=\"caseDetailAssignee\"></ng-container>\n</ng-template>\n\n<ng-template #defaultTitle>\n  <div class=\"row ml-0 mr-0\">{{ documentDefinitionNameTitle?.trim() }}</div>\n</ng-template>\n\n<ng-template #caseDetailAssignee>\n  <div class=\"row ml-0 mr-0 mt-1 mb-1\" *ngIf=\"document$ | async as document\">\n    <valtimo-dossier-assign-user\n      [documentId]=\"document.id\"\n      [assigneeId]=\"document.assigneeId\"\n      [assigneeFullName]=\"document?.assigneeFullName\"\n      (assignmentOfDocumentChanged)=\"assignmentOfDocumentChanged()\"\n    ></valtimo-dossier-assign-user>\n  </div>\n</ng-template>\n\n<ng-template #claimButton>\n  <div class=\"user-full-name\">\n    <button\n      class=\"btn btn-space btn-primary mr-1\"\n      type=\"button\"\n      id=\"\"\n      placement=\"bottom\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n      (click)=\"claimAssignee()\"\n      [disabled]=\"(isAssigning$ | async) || (isAssignedToCurrentUser$ | async)\"\n    >\n      <span>{{ 'dossier.claimAssigneeCase' | translate }}</span>\n    </button>\n  </div>\n</ng-template>\n", styles: [".tab-container{min-height:300px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i6$1.TranslateService }, { type: i2$1.DocumentService }, { type: i2.ProcessService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i5$1.Location }, { type: TabService }, { type: i1.ConfigService }, { type: i8.KeycloakService }, { type: i5.NGXLogger }]; }, propDecorators: { viewContainerRef: [{
                 type: ViewChild,
                 args: ['tabContainer', { read: ViewContainerRef, static: true }]
             }], supportingProcessStart: [{
@@ -1561,7 +1720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-moment__default.locale(localStorage.getItem('langKey') || '');
+moment.locale(localStorage.getItem('langKey') || '');
 class DossierDetailTabContactMomentsComponent {
     constructor(contactMomentService, alertService, translateService) {
         this.contactMomentService = contactMomentService;
@@ -1569,7 +1728,7 @@ class DossierDetailTabContactMomentsComponent {
         this.translateService = translateService;
         this.refetchContactMoments$ = new BehaviorSubject('');
         this.contactMoments$ = this.refetchContactMoments$.pipe(switchMap$1(() => this.contactMomentService.getContactMoments()), map$1(contactMoments => contactMoments.map(contactMoment => {
-            const registratieDatum = moment__default(contactMoment.registratiedatum);
+            const registratieDatum = moment(contactMoment.registratiedatum);
             return new TimelineItemImpl(registratieDatum.format('DD MMM YYYY'), registratieDatum.format('HH:mm'), contactMoment.medewerkerIdentificatie.achternaam, contactMoment.kanaal, contactMoment.tekst, null);
         })));
         this.text$ = new BehaviorSubject('');
@@ -1715,7 +1874,7 @@ class DossierDetailTabZaakobjectenComponent {
     }
 }
 DossierDetailTabZaakobjectenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3$3.ModalService }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailTabZaakobjectenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabZaakobjectenComponent, selector: "valtimo-dossier-detail-tab-zaakobjecten", viewQueries: [{ propertyName: "viewZaakobjectModal", first: true, predicate: ["viewZaakobjectModal"], 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\n  *ngIf=\"{\n    objecttypeSelectItems: objecttypeSelectItems$ | async,\n    objects: objects$ | async,\n    columns: columns$ | async,\n    selectedObjectTypeUrl: selectedObjecttypeUrl$ | async\n  } as obs\"\n>\n  <v-select\n    [items]=\"obs.objecttypeSelectItems\"\n    [margin]=\"true\"\n    [widthInPx]=\"350\"\n    name=\"objecttypes\"\n    [title]=\"'dossier.zaakobjecten.objecttype' | translate\"\n    [placeholder]=\"'dossier.zaakobjecten.objecttypePlaceholder' | translate\"\n    [loading]=\"!obs.objecttypeSelectItems\"\n    (selectedChange)=\"selectObjectType($event)\"\n  ></v-select>\n  <v-input-label\n    titleTranslationKey=\"dossier.zaakobjecten.objecten\"\n    [largeMargin]=\"!!obs.selectedObjectTypeUrl\"\n  ></v-input-label>\n  <v-paragraph *ngIf=\"!obs.selectedObjectTypeUrl\">{{\n    'dossier.zaakobjecten.objectenPlaceholder' | translate\n  }}</v-paragraph>\n  <v-table\n    *ngIf=\"obs.selectedObjectTypeUrl\"\n    [loading]=\"!obs.objects\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    (editButtonClicked)=\"rowClicked($event, obs.objecttypeSelectItems)\"\n  ></v-table>\n</ng-container>\n\n<v-modal #viewZaakobjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i3$3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { type: i3$3.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin"] }, { type: i3$3.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { type: i3$3.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "maxPaginationItemSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { type: i3$3.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { type: i3$3.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { type: i7.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i6$1.TranslatePipe } });
+DossierDetailTabZaakobjectenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DossierDetailTabZaakobjectenComponent, selector: "valtimo-dossier-detail-tab-zaakobjecten", viewQueries: [{ propertyName: "viewZaakobjectModal", first: true, predicate: ["viewZaakobjectModal"], 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\n  *ngIf=\"{\n    objecttypeSelectItems: objecttypeSelectItems$ | async,\n    objects: objects$ | async,\n    columns: columns$ | async,\n    selectedObjectTypeUrl: selectedObjecttypeUrl$ | async\n  } as obs\"\n>\n  <v-select\n    [items]=\"obs.objecttypeSelectItems\"\n    [margin]=\"true\"\n    [widthInPx]=\"350\"\n    name=\"objecttypes\"\n    [title]=\"'dossier.zaakobjecten.objecttype' | translate\"\n    [placeholder]=\"'dossier.zaakobjecten.objecttypePlaceholder' | translate\"\n    [loading]=\"!obs.objecttypeSelectItems\"\n    (selectedChange)=\"selectObjectType($event)\"\n  ></v-select>\n  <v-input-label\n    titleTranslationKey=\"dossier.zaakobjecten.objecten\"\n    [largeMargin]=\"!!obs.selectedObjectTypeUrl\"\n  ></v-input-label>\n  <v-paragraph *ngIf=\"!obs.selectedObjectTypeUrl\">{{\n    'dossier.zaakobjecten.objectenPlaceholder' | translate\n  }}</v-paragraph>\n  <v-table\n    *ngIf=\"obs.selectedObjectTypeUrl\"\n    [loading]=\"!obs.objects\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    (editButtonClicked)=\"rowClicked($event, obs.objecttypeSelectItems)\"\n  ></v-table>\n</ng-container>\n\n<v-modal #viewZaakobjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], components: [{ type: i3$3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { type: i3$3.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }, { type: i3$3.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { type: i3$3.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "maxPaginationItemSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { type: i3$3.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { type: i3$3.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { type: i7.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "formRefresh$"], outputs: ["submit", "change"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i6$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-zaakobjecten', 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\n  *ngIf=\"{\n    objecttypeSelectItems: objecttypeSelectItems$ | async,\n    objects: objects$ | async,\n    columns: columns$ | async,\n    selectedObjectTypeUrl: selectedObjecttypeUrl$ | async\n  } as obs\"\n>\n  <v-select\n    [items]=\"obs.objecttypeSelectItems\"\n    [margin]=\"true\"\n    [widthInPx]=\"350\"\n    name=\"objecttypes\"\n    [title]=\"'dossier.zaakobjecten.objecttype' | translate\"\n    [placeholder]=\"'dossier.zaakobjecten.objecttypePlaceholder' | translate\"\n    [loading]=\"!obs.objecttypeSelectItems\"\n    (selectedChange)=\"selectObjectType($event)\"\n  ></v-select>\n  <v-input-label\n    titleTranslationKey=\"dossier.zaakobjecten.objecten\"\n    [largeMargin]=\"!!obs.selectedObjectTypeUrl\"\n  ></v-input-label>\n  <v-paragraph *ngIf=\"!obs.selectedObjectTypeUrl\">{{\n    'dossier.zaakobjecten.objectenPlaceholder' | translate\n  }}</v-paragraph>\n  <v-table\n    *ngIf=\"obs.selectedObjectTypeUrl\"\n    [loading]=\"!obs.objects\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    (editButtonClicked)=\"rowClicked($event, obs.objecttypeSelectItems)\"\n  ></v-table>\n</ng-container>\n\n<v-modal #viewZaakobjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
@@ -1739,7 +1898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-moment__default.locale(localStorage.getItem('langKey') || '');
+moment.locale(localStorage.getItem('langKey') || '');
 class DossierUpdateComponent {
     constructor(taskService, documentService, route, toastr, location, dossierService) {
         this.taskService = taskService;
@@ -1775,10 +1934,10 @@ class DossierUpdateComponent {
     getTask(id) {
         this.taskService.getTask(id).subscribe(task => {
             this.task = task;
-            this.task.task.created = moment__default(this.task.task.created).format('DD MMM YYYY HH:mm');
+            this.task.task.created = moment(this.task.task.created).format('DD MMM YYYY HH:mm');
             this.page = {
                 title: this.task.task.name,
-                subtitle: `Created ${moment__default(this.task.task.created).fromNow()}`,
+                subtitle: `Created ${moment(this.task.task.created).fromNow()}`,
             };
         });
     }
@@ -1928,7 +2087,8 @@ DossierModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         DossierSupportingProcessStartModalComponent,
         DossierDetailTabObjectTypeComponent,
         DossierDetailTabDocumentenApiDocumentsComponent,
-        DossierDetailTabS3DocumentsComponent], imports: [CommonModule,
+        DossierDetailTabS3DocumentsComponent,
+        DossierAssignUserComponent], imports: [CommonModule,
         DossierRoutingModule,
         ListModule,
         WidgetModule,
@@ -1957,7 +2117,9 @@ DossierModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ModalModule$1,
         TitleModule,
         ButtonModule,
-        DocumentenApiMetadataModalModule], exports: [DossierListComponent, DossierDetailComponent] });
+        DocumentenApiMetadataModalModule,
+        SearchableDropdownSelectModule,
+        SearchFieldsModule], exports: [DossierListComponent, DossierDetailComponent] });
 DossierModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierModule, imports: [[
             CommonModule,
             DossierRoutingModule,
@@ -1997,6 +2159,8 @@ DossierModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             TitleModule,
             ButtonModule,
             DocumentenApiMetadataModalModule,
+            SearchableDropdownSelectModule,
+            SearchFieldsModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DossierModule, decorators: [{
             type: NgModule,
@@ -2016,6 +2180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DossierDetailTabObjectTypeComponent,
                         DossierDetailTabDocumentenApiDocumentsComponent,
                         DossierDetailTabS3DocumentsComponent,
+                        DossierAssignUserComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -2056,6 +2221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         TitleModule,
                         ButtonModule,
                         DocumentenApiMetadataModalModule,
+                        SearchableDropdownSelectModule,
+                        SearchFieldsModule,
                     ],
                     exports: [DossierListComponent, DossierDetailComponent],
                 }]