@valtimo/dossier 10.1.0 → 10.2.0

package/fesm2020/valtimo-dossier.mjs

@@ -35,7 +35,7 @@ import { switchMap as switchMap$1, map as map$1, take as take$1, tap as tap$1 }
 import * as i3$2 from 'ngx-toastr';
 import * as i4$1 from '@valtimo/resource';
 import * as i3$3 from '@valtimo/user-interface';
-import { SelectModule, InputLabelModule, ParagraphModule, TableModule, ModalModule as ModalModule$1, TitleModule, ButtonModule } from '@valtimo/user-interface';
+import { SelectModule, InputLabelModule, ParagraphModule, TableModule, ModalModule as ModalModule$1, TitleModule, ButtonModule, PageModule, InputModule, FormModule as FormModule$1 } from '@valtimo/user-interface';
 import * as i8$1 from 'keycloak-angular';
 import * as i1$2 from '@valtimo/contact-moment';
 
@@ -198,9 +198,15 @@ class DossierColumnService {
                 Array.isArray(caseListColumns) &&
                 caseListColumns.length > 0 &&
                 this.mapCaseListColumnsToDefinitionColumns(caseListColumns);
-            return customDefinitionTable || apiCaseListColumns || defaultDefinitionTable;
+            return {
+                columns: customDefinitionTable || apiCaseListColumns || defaultDefinitionTable,
+                hasApiConfig: !!apiCaseListColumns,
+            };
         }));
     }
+    hasEnvironmentConfig(documentDefinitionName) {
+        return !!this.configService.config?.customDefinitionTables[documentDefinitionName];
+    }
     mapCaseListColumnsToDefinitionColumns(caseListColumns) {
         return caseListColumns.map(caseListColumn => ({
             translationKey: caseListColumn.key,
@@ -305,6 +311,7 @@ var DefaultTabs;
     DefaultTabs["documents"] = "documents";
     DefaultTabs["contactMoments"] = "contact-moments";
     DefaultTabs["zaakobjecten"] = "zaakobjecten";
+    DefaultTabs["notes"] = "notes";
 })(DefaultTabs || (DefaultTabs = {}));
 
 /*
@@ -332,8 +339,8 @@ class DossierService {
     }
     getInitialSortState(columns) {
         const defaultColumn = columns.find(column => column.default);
-        const isSorting = defaultColumn.default === 'ASC' || defaultColumn.default === 'DESC';
-        const direction = typeof defaultColumn.default === 'boolean'
+        const isSorting = defaultColumn?.default === 'ASC' || defaultColumn?.default === 'DESC';
+        const direction = typeof !defaultColumn || defaultColumn.default === 'boolean'
             ? 'DESC'
             : defaultColumn.default;
         return {
@@ -501,6 +508,7 @@ class DossierListComponent {
         this.documentDefinitionName$ = this.route.params.pipe(map(params => params.documentDefinitionName || ''), tap(documentDefinitionName => {
             this.resetPagination(documentDefinitionName);
         }));
+        this.hasEnvColumnConfig$ = this.route.params.pipe(map(params => params.documentDefinitionName || ''), map(documentDefinitionName => this.dossierColumnService.hasEnvironmentConfig(documentDefinitionName)));
         this.canHaveAssignee$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.documentService.getCaseSettings(documentDefinitionName)), map(caseSettings => caseSettings?.canHaveAssignee));
         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
@@ -509,20 +517,26 @@ class DossierListComponent {
         this.schema$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.documentService.getDocumentDefinition(documentDefinitionName)), map(documentDefinition => documentDefinition?.schema));
         this.storedSearchRequestKey$ = this.documentDefinitionName$.pipe(map(documentDefinitionName => `list-search-${documentDefinitionName}`));
         this.hasStoredSearchRequest$ = this.storedSearchRequestKey$.pipe(map(storedSearchRequestKey => localStorage.getItem(storedSearchRequestKey) !== null));
-        this.columns$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.dossierColumnService.getDefinitionColumns(documentDefinitionName)));
+        this.hasApiColumnConfig$ = new BehaviorSubject(false);
+        this.columns$ = this.documentDefinitionName$.pipe(switchMap(documentDefinitionName => this.dossierColumnService.getDefinitionColumns(documentDefinitionName)), map(res => {
+            this.hasApiColumnConfig$.next(res.hasApiConfig);
+            return res.columns;
+        }));
         this.ASSIGNEE_KEY = 'assigneeFullName';
         this.fields$ = combineLatest([
             this.columns$,
             this.canHaveAssignee$,
+            this.hasEnvColumnConfig$,
             this.translateService.stream('key'),
-        ]).pipe(map(([columns, canHaveAssignee]) => [
+        ]).pipe(map(([columns, canHaveAssignee, hasEnvConfig]) => [
             ...columns
                 .map(column => {
                 const translationKey = `fieldLabels.${column.translationKey}`;
                 const translation = this.translateService.instant(translationKey);
                 const validTranslation = translation !== translationKey && translation;
+                console.log('column', column);
                 return {
-                    key: column.propertyName,
+                    key: hasEnvConfig ? column.propertyName : column.translationKey,
                     label: column.title || validTranslation || column.translationKey,
                     sortable: column.sortable,
                     ...(column.viewType && { viewType: column.viewType }),
@@ -564,27 +578,52 @@ class DossierListComponent {
             this.documentSearchRequest$,
             this.searchFieldValues$,
             this.assigneeFilter$,
+            this.hasEnvColumnConfig$,
+            this.hasApiColumnConfig$,
         ]).pipe(distinctUntilChanged(([prevSearchRequest, prevSearchValues, prevAssigneeFilter], [currSearchRequest, currSearchValues, currAssigneeFilter]) => JSON.stringify({ ...prevSearchRequest, ...prevSearchValues }) + prevAssigneeFilter ===
             JSON.stringify({ ...currSearchRequest, ...currSearchValues }) + currAssigneeFilter), tap(([documentSearchRequest]) => {
             this.storedSearchRequestKey$.pipe(take(1)).subscribe(storedSearchRequestKey => {
                 this.logger.debug(`store request in local storage: ${JSON.stringify(documentSearchRequest)}`);
                 localStorage.setItem(storedSearchRequestKey, JSON.stringify(documentSearchRequest));
             });
-        }), switchMap(([documentSearchRequest, searchValues, assigneeFilter]) => {
+        }), switchMap(([documentSearchRequest, searchValues, assigneeFilter, hasEnvColumnConfig, hasApiColumnConfig,]) => {
             if ((Object.keys(searchValues) || []).length > 0) {
-                return this.documentService.getDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, this.mapSearchValuesToFilters(searchValues));
+                return hasEnvColumnConfig || !hasApiColumnConfig
+                    ? this.documentService.getDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, this.mapSearchValuesToFilters(searchValues))
+                    : this.documentService.getSpecifiedDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter, this.mapSearchValuesToFilters(searchValues));
             }
             else {
-                return this.documentService.getDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter);
+                return hasEnvColumnConfig || !hasApiColumnConfig
+                    ? this.documentService.getDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter)
+                    : this.documentService.getSpecifiedDocumentsSearch(documentSearchRequest, 'AND', assigneeFilter);
             }
         }), tap(documents => {
             this.setCollectionSize(documents);
             this.checkPage(documents);
         }));
-        this.documentItems$ = this.documentsRequest$.pipe(map(documents => documents.content.map(document => {
-            const { content, ...others } = document;
-            return { ...content, ...others };
-        })), tap(() => this.loading$.next(false)));
+        this.documentItems$ = combineLatest([
+            this.documentsRequest$,
+            this.hasEnvColumnConfig$,
+            this.hasApiColumnConfig$,
+        ]).pipe(map(([documents, hasEnvColumnConfig, hasApiColumnConfig]) => {
+            if (hasEnvColumnConfig || !hasApiColumnConfig) {
+                const docsToMap = documents;
+                return documents.content.map(document => {
+                    const { content, ...others } = document;
+                    return { ...content, ...others };
+                });
+            }
+            else {
+                const docsToMap = documents;
+                return docsToMap.content.reduce((acc, curr) => {
+                    const propsObject = {};
+                    curr.items.forEach(item => {
+                        propsObject[item.key] = item.value;
+                    });
+                    return [...acc, propsObject];
+                }, []);
+            }
+        }), tap(returnValue => console.log(returnValue)), tap(() => this.loading$.next(false)));
         this.dossierVisibleTabs = this.configService.config?.visibleDossierListTabs || null;
     }
     ngOnInit() {
@@ -1651,7 +1690,11 @@ class DossierAssignUserComponent {
     mapUsersForDropdown(users) {
         return (users &&
             users
-                .sort((a, b) => a.lastName.localeCompare(b.lastName))
+                .sort((a, b) => {
+                if (a.lastName && b.lastName) {
+                    return a.lastName.localeCompare(b.lastName);
+                }
+            })
                 .map(user => ({ text: `${user.firstName} ${user.lastName}`, id: user.id })));
     }
     clear() {
@@ -1815,10 +1858,10 @@ class DossierDetailComponent {
     }
 }
 DossierDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierDetailComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i6$1.TranslateService }, { token: i2.DocumentService }, { token: i2$2.ProcessService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i5$1.Location }, { token: TabService }, { token: i1.ConfigService }, { token: i8$1.KeycloakService }, { token: i5.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-DossierDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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\" *ngIf=\"{canHaveAssignee: canHaveAssignee$ | async} as obs\">\n            <div class=\"col\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  caseDetailHeader;\n                  context: {canHaveAssignee: obs.canHaveAssignee}\n                \"\n              ></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\n                *ngTemplateOutlet=\"claimButton; context: {canHaveAssignee: obs.canHaveAssignee}\"\n              ></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?.id?.processDefinitionKey | translate) !== processDocumentDefinition?.id?.processDefinitionKey\n                    ? (processDocumentDefinition.id.processDefinitionKey | translate)\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 let-canHaveAssignee=\"canHaveAssignee\">\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\n    *ngTemplateOutlet=\"caseDetailAssignee; context: {canHaveAssignee: canHaveAssignee}\"\n  ></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 let-canHaveAssignee=\"canHaveAssignee\">\n  <div class=\"row ml-0 mr-0 mt-1 mb-1\" *ngIf=\"canHaveAssignee && (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 let-canHaveAssignee=\"canHaveAssignee\">\n  <div class=\"user-full-name\" *ngIf=\"canHaveAssignee\">\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"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i1.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { kind: "component", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: ["formSubmit"] }, { kind: "component", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: ["documentId", "assigneeId", "assigneeFullName"], outputs: ["assignmentOfDocumentChanged"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+DossierDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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\" *ngIf=\"{canHaveAssignee: canHaveAssignee$ | async, document: document$ | async} as obs\">\n            <div class=\"col\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  caseDetailHeader;\n                  context: {canHaveAssignee: obs.canHaveAssignee, document: obs.document}\n                \"\n              ></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\n                *ngTemplateOutlet=\"claimButton; context: {canHaveAssignee: obs.canHaveAssignee}\"\n              ></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?.id?.processDefinitionKey | translate) !== processDocumentDefinition?.id?.processDefinitionKey\n                    ? (processDocumentDefinition.id.processDefinitionKey | translate)\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 let-canHaveAssignee=\"canHaveAssignee\" let-document=\"document\">\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\n    *ngTemplateOutlet=\"caseDetailAssignee; context: {canHaveAssignee: canHaveAssignee, document: document}\"\n  ></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 let-canHaveAssignee=\"canHaveAssignee\" let-document=\"document\">\n  <div class=\"row ml-0 mr-0 mt-1 mb-1\" *ngIf=\"canHaveAssignee && 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 let-canHaveAssignee=\"canHaveAssignee\">\n  <div class=\"user-full-name\" *ngIf=\"canHaveAssignee\">\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"], dependencies: [{ kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i8.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i1.ExtensionComponent, selector: "valtimo-extension", inputs: ["module", "page", "section"] }, { kind: "component", type: DossierSupportingProcessStartModalComponent, selector: "valtimo-dossier-supporting-process-start-modal", outputs: ["formSubmit"] }, { kind: "component", type: DossierAssignUserComponent, selector: "valtimo-dossier-assign-user", inputs: ["documentId", "assigneeId", "assigneeFullName"], outputs: ["assignmentOfDocumentChanged"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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\" *ngIf=\"{canHaveAssignee: canHaveAssignee$ | async} as obs\">\n            <div class=\"col\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  caseDetailHeader;\n                  context: {canHaveAssignee: obs.canHaveAssignee}\n                \"\n              ></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\n                *ngTemplateOutlet=\"claimButton; context: {canHaveAssignee: obs.canHaveAssignee}\"\n              ></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?.id?.processDefinitionKey | translate) !== processDocumentDefinition?.id?.processDefinitionKey\n                    ? (processDocumentDefinition.id.processDefinitionKey | translate)\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 let-canHaveAssignee=\"canHaveAssignee\">\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\n    *ngTemplateOutlet=\"caseDetailAssignee; context: {canHaveAssignee: canHaveAssignee}\"\n  ></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 let-canHaveAssignee=\"canHaveAssignee\">\n  <div class=\"row ml-0 mr-0 mt-1 mb-1\" *ngIf=\"canHaveAssignee && (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 let-canHaveAssignee=\"canHaveAssignee\">\n  <div class=\"user-full-name\" *ngIf=\"canHaveAssignee\">\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"] }]
+            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\" *ngIf=\"{canHaveAssignee: canHaveAssignee$ | async, document: document$ | async} as obs\">\n            <div class=\"col\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  caseDetailHeader;\n                  context: {canHaveAssignee: obs.canHaveAssignee, document: obs.document}\n                \"\n              ></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\n                *ngTemplateOutlet=\"claimButton; context: {canHaveAssignee: obs.canHaveAssignee}\"\n              ></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?.id?.processDefinitionKey | translate) !== processDocumentDefinition?.id?.processDefinitionKey\n                    ? (processDocumentDefinition.id.processDefinitionKey | translate)\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 let-canHaveAssignee=\"canHaveAssignee\" let-document=\"document\">\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\n    *ngTemplateOutlet=\"caseDetailAssignee; context: {canHaveAssignee: canHaveAssignee, document: document}\"\n  ></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 let-canHaveAssignee=\"canHaveAssignee\" let-document=\"document\">\n  <div class=\"row ml-0 mr-0 mt-1 mb-1\" *ngIf=\"canHaveAssignee && 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 let-canHaveAssignee=\"canHaveAssignee\">\n  <div class=\"user-full-name\" *ngIf=\"canHaveAssignee\">\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.DocumentService }, { type: i2$2.ProcessService }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i5$1.Location }, { type: TabService }, { type: i1.ConfigService }, { type: i8$1.KeycloakService }, { type: i5.NGXLogger }]; }, propDecorators: { viewContainerRef: [{
                 type: ViewChild,
                 args: ['tabContainer', { read: ViewContainerRef, static: true }]
@@ -2005,6 +2048,245 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['viewZaakobjectModal']
             }] } });
 
+/*
+ * 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 NotesService {
+    constructor(configService, http) {
+        this.configService = configService;
+        this.http = http;
+        this.VALTIMO_API_ENDPOINT_URI = this.configService.config.valtimoApi.endpointUri;
+        this._showModal$ = new Subject();
+        this._hideModal$ = new Subject();
+        this._refresh$ = new BehaviorSubject(null);
+        this._modalType$ = new BehaviorSubject('add');
+    }
+    getDocumentNotes(documentId, params) {
+        return this.http.get(`${this.VALTIMO_API_ENDPOINT_URI}v1/document/${documentId}/note`, { params });
+    }
+    createDocumentNote(documentId, request) {
+        return this.http.post(`${this.VALTIMO_API_ENDPOINT_URI}v1/document/${documentId}/note`, request);
+    }
+    get showModal$() {
+        return this._showModal$.asObservable();
+    }
+    get hideModal$() {
+        return this._hideModal$.asObservable();
+    }
+    get refresh$() {
+        return this._refresh$.asObservable();
+    }
+    get modalType$() {
+        return this._modalType$.asObservable();
+    }
+    showModal() {
+        this._showModal$.next(null);
+    }
+    hideModal() {
+        this._hideModal$.next(null);
+    }
+    refresh() {
+        this._refresh$.next(null);
+    }
+    setModalType(type) {
+        this._modalType$.next(type);
+    }
+}
+NotesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NotesService, deps: [{ token: i1.ConfigService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+NotesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NotesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NotesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ConfigService }, { type: i2$1.HttpClient }]; } });
+
+/*
+ * 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 NoteModalComponent {
+    constructor(notesService, modalService) {
+        this.notesService = notesService;
+        this.modalService = modalService;
+        this.createNoteEvent = new EventEmitter();
+        this.valid$ = new BehaviorSubject(false);
+        this.showForm$ = this.modalService.modalVisible$;
+        this.formData$ = new BehaviorSubject(null);
+        this.returnToFirstStepSubject$ = new Subject();
+    }
+    ngAfterViewInit() {
+        this.openShowSubscription();
+        this.openHideSubscription();
+    }
+    ngOnDestroy() {
+        this.showSubscription?.unsubscribe();
+        this.hideSubscription?.unsubscribe();
+    }
+    hide() {
+        this.formData$.next(null);
+        this.valid$.next(false);
+        this.modalService.closeModal();
+    }
+    cancel() {
+        this.hide();
+    }
+    save() {
+        combineLatest([this.valid$, this.formData$])
+            .pipe(take$1(1))
+            .subscribe(([valid, formData]) => {
+            if (valid) {
+                this.createNoteEvent.emit(formData);
+            }
+        });
+    }
+    openShowSubscription() {
+        this.showSubscription = this.notesService.showModal$.subscribe(() => {
+            this.show();
+        });
+    }
+    openHideSubscription() {
+        this.hideSubscription = this.notesService.hideModal$.subscribe(() => {
+            this.hide();
+        });
+    }
+    show() {
+        this.notesService.modalType$.pipe(take$1(1)).subscribe(modalType => {
+            if (modalType === 'add') {
+                this.modalService.openModal(this.addNoteModal);
+            }
+        });
+    }
+    formValueChange(data) {
+        this.formData$.next(data);
+        this.setValid(data);
+    }
+    setValid(data) {
+        this.valid$.next(!!data.content);
+    }
+}
+NoteModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NoteModalComponent, deps: [{ token: NotesService }, { token: i3$3.ModalService }], target: i0.ɵɵFactoryTarget.Component });
+NoteModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: NoteModalComponent, selector: "valtimo-note-modal", outputs: { createNoteEvent: "createNoteEvent" }, viewQueries: [{ propertyName: "addNoteModal", first: true, predicate: ["addNoteModal"], 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<v-modal #addNoteModal  *ngIf=\"{ disabled: disabled$ | async, valid: valid$ | async} as obs\">\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{ 'dossier.notes.addNote' | translate }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"addForm\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <v-button (clickEvent)=\"save()\" [disabled]=\"obs.disabled || !obs.valid\" mdiIcon=\"plus\" type=\"success\">\n        {{ 'dossier.notes.addNote' | translate }}\n      </v-button>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addForm>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n              type=\"textarea\"\n              [margin]=\"true\"\n              [required]=\"true\"\n              [title]=\"'dossier.notes.input.content' | translate\"\n              name=\"content\"\n              [fullWidth]=\"true\"\n              [rows]=\"10\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\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 */.buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i3$3.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i3$3.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i3$3.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$"], outputs: ["valueChange"] }, { kind: "component", type: i3$3.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: NoteModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-note-modal', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<v-modal #addNoteModal  *ngIf=\"{ disabled: disabled$ | async, valid: valid$ | async} as obs\">\n  <div role=\"header\">\n    <div class=\"add-note-title\">\n      <v-title [margin]=\"false\">{{ 'dossier.notes.addNote' | translate }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"addForm\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">\n        {{ 'document.cancel' | translate }}\n      </v-button>\n      <v-button (clickEvent)=\"save()\" [disabled]=\"obs.disabled || !obs.valid\" mdiIcon=\"plus\" type=\"success\">\n        {{ 'dossier.notes.addNote' | translate }}\n      </v-button>\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #addForm>\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form (valueChange)=\"formValueChange($event)\">\n      <v-input\n              type=\"textarea\"\n              [margin]=\"true\"\n              [required]=\"true\"\n              [title]=\"'dossier.notes.input.content' | translate\"\n              name=\"content\"\n              [fullWidth]=\"true\"\n              [rows]=\"10\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\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 */.buttons,.add-note-title{width:100%;display:flex;flex-direction:row;justify-content:space-between}.add-note-title{justify-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: NotesService }, { type: i3$3.ModalService }]; }, propDecorators: { addNoteModal: [{
+                type: ViewChild,
+                args: ['addNoteModal']
+            }], createNoteEvent: [{
+                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 DossierDetailTabNotesComponent {
+    constructor(route, notesService, translateService) {
+        this.route = route;
+        this.notesService = notesService;
+        this.translateService = translateService;
+        this.timelineItems = [];
+        this.loading$ = new BehaviorSubject(true);
+        this.fields$ = new BehaviorSubject([]);
+        this.documentId$ = this.route.params.pipe(map(params => params.documentId));
+        this.currentPageAndSize$ = new BehaviorSubject({
+            page: 0,
+            size: 10,
+        });
+        this.pageSizes$ = new BehaviorSubject({
+            collectionSize: 0,
+            maxPaginationItemSize: 5,
+        });
+        this.pagination$ = combineLatest([
+            this.currentPageAndSize$,
+            this.pageSizes$,
+        ]).pipe(map(([currentPage, sizes]) => ({ ...currentPage, ...sizes, page: currentPage.page + 1 })));
+        this.notes$ = combineLatest([
+            this.documentId$,
+            this.currentPageAndSize$,
+            this.notesService.refresh$
+        ]).pipe(tap$1(() => this.timelineItems = []), switchMap$1(([documentId, currentPage]) => this.notesService.getDocumentNotes(documentId, { page: currentPage.page, size: currentPage.size })), tap$1((res) => {
+            this.timelineItems = [];
+            this.pageSizes$.pipe(take$1(1)).subscribe(sizes => {
+                this.pageSizes$.next({ ...sizes, collectionSize: res.totalElements });
+            });
+        }), map((res) => res.content.map((note) => {
+            const noteCreatedDate = moment(note.createdDate).locale(this.translateService.currentLang);
+            this.timelineItems.push(new TimelineItemImpl(noteCreatedDate.format('DD MMM YYYY'), noteCreatedDate.format('HH:mm'), note.createdByUserFullName, noteCreatedDate.fromNow(), note.content, {}));
+            return ({
+                ...note
+            });
+        })), tap$1(() => this.loading$.next(false)));
+    }
+    ngOnInit() {
+        this.translateService.onLangChange.subscribe(() => {
+            this.notesService.refresh();
+        });
+    }
+    paginationClicked(newPageNumber) {
+        this.currentPageAndSize$.pipe(take$1(1)).subscribe(currentPage => {
+            this.currentPageAndSize$.next({ ...currentPage, page: newPageNumber - 1 });
+        });
+    }
+    showAddModal() {
+        this.notesService.setModalType('add');
+        this.notesService.showModal();
+    }
+    createNewNote(content) {
+        this.documentId$
+            .pipe(take$1(1))
+            .pipe(tap$1(documentId => {
+            this.notesService.createDocumentNote(documentId, content)
+                .subscribe(() => {
+                this.notesService.refresh();
+                this.notesService.hideModal();
+            });
+        }))
+            .subscribe();
+    }
+}
+DossierDetailTabNotesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierDetailTabNotesComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: NotesService }, { token: i6$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DossierDetailTabNotesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DossierDetailTabNotesComponent, selector: "valtimo-dossier-detail-tab-notes", 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<div class=\"notes\" *ngIf=\"{\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\">\n\n  <button\n          class=\"btn btn-space btn-primary mr-1 add-note\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n          (click)=\"showAddModal()\"\n          [disabled]=\"obs.loading\"\n  >\n    <span>{{ 'dossier.notes.addNote' | translate }}</span>\n    <i class=\"ml-1 icon mdi mdi-plus\"></i>\n  </button>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n  </div>\n\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\n  <div class=\"d-flex justify-content-end row mr-0 ml-0\" *ngIf=\"obs.pagination\">\n      <ngb-pagination\n              *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n              [collectionSize]=\"obs.pagination.collectionSize\"\n              [(page)]=\"obs.pagination.page\"\n              [pageSize]=\"obs.pagination.size\"\n              [maxSize]=\"obs.pagination.size\"\n              [rotate]=\"true\"\n              (pageChange)=\"paginationClicked($event)\"\n      ></ngb-pagination>\n  </div>\n\n</div>\n\n<valtimo-note-modal (createNoteEvent)=\"createNewNote($event)\"></valtimo-note-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 */.notes{position:relative}.add-note{position:absolute;right:0}\n"], dependencies: [{ kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.TimelineComponent, selector: "valtimo-timeline", inputs: ["items"] }, { kind: "component", type: i8.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i10.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "component", type: NoteModalComponent, selector: "valtimo-note-modal", outputs: ["createNoteEvent"] }, { kind: "pipe", type: i5$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierDetailTabNotesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-dossier-detail-tab-notes', 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<div class=\"notes\" *ngIf=\"{\n    notes: notes$ | async,\n    pagination: pagination$ | async,\n    loading: loading$ | async\n  } as obs\">\n\n  <button\n          class=\"btn btn-space btn-primary mr-1 add-note\"\n          type=\"button\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n          (click)=\"showAddModal()\"\n          [disabled]=\"obs.loading\"\n  >\n    <span>{{ 'dossier.notes.addNote' | translate }}</span>\n    <i class=\"ml-1 icon mdi mdi-plus\"></i>\n  </button>\n\n  <div *ngIf=\"timelineItems\">\n    <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n  </div>\n\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\n  <div class=\"d-flex justify-content-end row mr-0 ml-0\" *ngIf=\"obs.pagination\">\n      <ngb-pagination\n              *ngIf=\"obs.pagination.collectionSize > obs.pagination.size\"\n              [collectionSize]=\"obs.pagination.collectionSize\"\n              [(page)]=\"obs.pagination.page\"\n              [pageSize]=\"obs.pagination.size\"\n              [maxSize]=\"obs.pagination.size\"\n              [rotate]=\"true\"\n              (pageChange)=\"paginationClicked($event)\"\n      ></ngb-pagination>\n  </div>\n\n</div>\n\n<valtimo-note-modal (createNoteEvent)=\"createNewNote($event)\"></valtimo-note-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 */.notes{position:relative}.add-note{position:absolute;right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: NotesService }, { type: i6$1.TranslateService }]; } });
+
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -2204,13 +2486,15 @@ DossierModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         DossierDetailTabDocumentsComponent,
         DossierDetailTabContactMomentsComponent,
         DossierDetailTabZaakobjectenComponent,
+        DossierDetailTabNotesComponent,
         DossierUpdateComponent,
         DossierProcessStartModalComponent,
         DossierSupportingProcessStartModalComponent,
         DossierDetailTabObjectTypeComponent,
         DossierDetailTabDocumentenApiDocumentsComponent,
         DossierDetailTabS3DocumentsComponent,
-        DossierAssignUserComponent], imports: [CommonModule,
+        DossierAssignUserComponent,
+        NoteModalComponent], imports: [CommonModule,
         DossierRoutingModule,
         ListModule,
         WidgetModule,
@@ -2242,6 +2526,10 @@ DossierModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         DocumentenApiMetadataModalModule,
         SearchableDropdownSelectModule,
         SearchFieldsModule,
+        PageModule,
+        FormModule,
+        InputModule,
+        FormModule$1,
         NgbModule], exports: [DossierListComponent, DossierDetailComponent] });
 DossierModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierModule, imports: [CommonModule,
         DossierRoutingModule,
@@ -2283,6 +2571,10 @@ DossierModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         DocumentenApiMetadataModalModule,
         SearchableDropdownSelectModule,
         SearchFieldsModule,
+        PageModule,
+        FormModule,
+        InputModule,
+        FormModule$1,
         NgbModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DossierModule, decorators: [{
             type: NgModule,
@@ -2296,6 +2588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         DossierDetailTabDocumentsComponent,
                         DossierDetailTabContactMomentsComponent,
                         DossierDetailTabZaakobjectenComponent,
+                        DossierDetailTabNotesComponent,
                         DossierUpdateComponent,
                         DossierProcessStartModalComponent,
                         DossierSupportingProcessStartModalComponent,
@@ -2303,6 +2596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         DossierDetailTabDocumentenApiDocumentsComponent,
                         DossierDetailTabS3DocumentsComponent,
                         DossierAssignUserComponent,
+                        NoteModalComponent
                     ],
                     imports: [
                         CommonModule,
@@ -2345,7 +2639,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         DocumentenApiMetadataModalModule,
                         SearchableDropdownSelectModule,
                         SearchFieldsModule,
-                        NgbModule,
+                        PageModule,
+                        FormModule,
+                        InputModule,
+                        FormModule$1,
+                        NgbModule
                     ],
                     exports: [DossierListComponent, DossierDetailComponent],
                 }]
@@ -2371,5 +2669,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_TABS, DefaultTabs, DossierColumnService, DossierDetailComponent, DossierDetailTabAuditComponent, DossierDetailTabContactMomentsComponent, DossierDetailTabDocumentsComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierDetailTabZaakobjectenComponent, DossierListComponent, DossierModule, DossierService, TAB_MAP, TabImpl, TabLoaderImpl, TabService, ZaakobjectenService };
+export { DEFAULT_TABS, DefaultTabs, DossierColumnService, DossierDetailComponent, DossierDetailTabAuditComponent, DossierDetailTabContactMomentsComponent, DossierDetailTabDocumentsComponent, DossierDetailTabNotesComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierDetailTabZaakobjectenComponent, DossierListComponent, DossierModule, DossierService, TAB_MAP, TabImpl, TabLoaderImpl, TabService, ZaakobjectenService };
 //# sourceMappingURL=valtimo-dossier.mjs.map