@valtimo/components 5.9.1 → 5.11.0

package/fesm2020/valtimo-components.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, NgModule, Pipe, HostListener, ViewChildren } from '@angular/core';
-import { Subject, from, switchMap, map, BehaviorSubject, Observable, combineLatest, fromEvent, Subscription, timer } from 'rxjs';
+import { Subject, BehaviorSubject, from, switchMap, map, Observable, combineLatest, fromEvent, Subscription, timer, take as take$1, of, filter as filter$1, startWith } from 'rxjs';
 import * as i3 from '@angular/forms';
 import { Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import moment from 'moment';
@@ -11,7 +11,7 @@ import * as i1$2 from 'keycloak-angular';
 import * as i1$3 from '@valtimo/config';
 import { HttpLoaderFactory } from '@valtimo/config';
 import * as i1$4 from '@valtimo/user-interface';
-import { ParagraphModule } from '@valtimo/user-interface';
+import { ParagraphModule, ModalModule as ModalModule$1, TitleModule, ButtonModule, FormModule, InputModule, SelectModule, DatePickerModule, InputLabelModule } from '@valtimo/user-interface';
 import * as i1$5 from '@angular/router';
 import { RouterModule, NavigationEnd, PRIMARY_OUTLET, NavigationStart } from '@angular/router';
 import * as i2 from '@valtimo/document';
@@ -25,7 +25,7 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import * as i1$9 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i5 from '@valtimo/context';
-import { map as map$1, debounceTime, take, filter, switchMap as switchMap$1 } from 'rxjs/operators';
+import { map as map$1, debounceTime, take, filter, switchMap as switchMap$1, tap } from 'rxjs/operators';
 import * as i2$1 from '@angular/platform-browser';
 import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import heatmap from 'heatmap.js-fixed/build/heatmap.js';
@@ -224,16 +224,39 @@ class TimelineItemImpl {
  * limitations under the License.
  */
 
+/*
+ * 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 ValtimoModalService {
     constructor() {
         this._scrollToTop$ = new Subject();
+        this._documentDefinitionName$ = new BehaviorSubject('');
     }
     get scrollToTop$() {
         return this._scrollToTop$.asObservable();
     }
+    get documentDefinitionName$() {
+        return this._documentDefinitionName$.asObservable();
+    }
     scrollToTop() {
         this._scrollToTop$.next(null);
     }
+    setDocumentDefinitionName(documentDefinitionName) {
+        this._documentDefinitionName$.next(documentDefinitionName);
+    }
 }
 ValtimoModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ValtimoModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 ValtimoModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ValtimoModalService, providedIn: 'root' });
@@ -1880,7 +1903,7 @@ class DateTypeConverter {
         if (!value) {
             return '-';
         }
-        return moment(value).format('DD-MM-YYYY, hh:mm A');
+        return moment(value).format(definition?.format || 'DD-MM-YYYY, hh:mm A');
     }
 }
 
@@ -2012,9 +2035,16 @@ class ViewContentService {
         TYPE_CONVERTERS.forEach(converter => this.addConverter(converter));
     }
     get(value, definition) {
+        const separator = ':';
         if (!definition.viewType) {
             definition.viewType = typeof value;
         }
+        if (definition.viewType.includes(separator)) {
+            // Get the substring of the string after the separator (:) and assign it to a new key
+            definition.format = definition.viewType.slice(this.getSeparatorIndex(definition, separator) + 1);
+            // Remove the substring after the separator and the separator from the string and assign it back to the viewType
+            definition.viewType = definition.viewType.slice(0, this.getSeparatorIndex(definition, separator));
+        }
         if (typeof this.converters[definition.viewType] !== 'undefined') {
             return this.converters[definition.viewType].convert(value, definition);
         }
@@ -2028,6 +2058,9 @@ class ViewContentService {
         }
         this.converters[converter.getTypeString()] = converter;
     }
+    getSeparatorIndex(definition, separator) {
+        return definition.viewType.indexOf(separator);
+    }
 }
 ViewContentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 ViewContentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewContentService, providedIn: 'root' });
@@ -4066,6 +4099,7 @@ class DropzoneComponent {
             createImageThumbnails: false,
             acceptedFiles: this.acceptedFiles,
             previewTemplate: `<p style='display:none'></p>`,
+            ...(this.maxFiles && { maxFiles: this.maxFiles }),
             accept: file => {
                 this.dropzone.removeAllFiles();
                 this.setFile(file);
@@ -4092,7 +4126,7 @@ class DropzoneComponent {
     }
 }
 DropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropzoneComponent, deps: [{ token: i1$8.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: { title: "title", hideTitle: "hideTitle", subtitle: "subtitle", externalError$: "externalError$", maxFileSize: "maxFileSize", showMaxFileSize: "showMaxFileSize", acceptedFiles: "acceptedFiles", clear$: "clear$", disabled: "disabled", hideFilePreview: "hideFilePreview", uploading: "uploading", camera: "camera" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:2rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon{line-height:4.615rem}\n"], components: [{ type: ProgressBarComponent, selector: "valtimo-progress-bar" }, { type: WebcamComponent, selector: "valtimo-webcam", outputs: ["imageSaved"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$8.TranslatePipe, "filesize": FileSizePipe } });
+DropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: { title: "title", hideTitle: "hideTitle", subtitle: "subtitle", externalError$: "externalError$", maxFileSize: "maxFileSize", showMaxFileSize: "showMaxFileSize", acceptedFiles: "acceptedFiles", clear$: "clear$", disabled: "disabled", hideFilePreview: "hideFilePreview", uploading: "uploading", camera: "camera", maxFiles: "maxFiles" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:2rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon{line-height:4.615rem}\n"], components: [{ type: ProgressBarComponent, selector: "valtimo-progress-bar" }, { type: WebcamComponent, selector: "valtimo-webcam", outputs: ["imageSaved"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$8.TranslatePipe, "filesize": FileSizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropzoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dropzone', 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:2rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon{line-height:4.615rem}\n"] }]
@@ -4123,6 +4157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], camera: [{
                 type: Input
+            }], maxFiles: [{
+                type: Input
             }], fileSelected: [{
                 type: Output
             }] } });
@@ -4186,7 +4222,7 @@ class FormIoUploaderComponent {
     }
 }
 FormIoUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoUploaderComponent, deps: [{ token: i1$a.UploadProviderService }, { token: FormIoStateService }, { token: FormIoDomService }, { token: i1$a.DownloadService }], target: i0.ɵɵFactoryTarget.Component });
-FormIoUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FormIoUploaderComponent, selector: "valtimo-formio-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [disabled]=\"disabled\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"hideTitle\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"!hideMaxFileSize\"\n  [subtitle]=\"subtitle\"\n  [title]=\"title\"\n  [camera]=\"camera\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{ resource.originalName }}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.size | filesize }}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"], components: [{ type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera"], outputs: ["fileSelected"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "filesize": FileSizePipe } });
+FormIoUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FormIoUploaderComponent, selector: "valtimo-formio-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [disabled]=\"disabled\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"hideTitle\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"!hideMaxFileSize\"\n  [subtitle]=\"subtitle\"\n  [title]=\"title\"\n  [camera]=\"camera\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{ resource.originalName }}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.size | filesize }}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"], components: [{ type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "filesize": FileSizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-formio-uploader', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [disabled]=\"disabled\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"hideTitle\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"!hideMaxFileSize\"\n  [subtitle]=\"subtitle\"\n  [title]=\"title\"\n  [camera]=\"camera\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{ resource.originalName }}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.size | filesize }}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"] }]
@@ -4297,6 +4333,403 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+/*
+ * 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 DocumentenApiMetadataModalComponent {
+    constructor(modalService, translateService, route, documentService, keycloakService, valtimoModalService) {
+        this.modalService = modalService;
+        this.translateService = translateService;
+        this.route = route;
+        this.documentService = documentService;
+        this.keycloakService = keycloakService;
+        this.valtimoModalService = valtimoModalService;
+        this.documentTitle = '';
+        this.metadata = new EventEmitter();
+        this.CONFIDENTIALITY_LEVELS = [
+            'openbaar',
+            'beperkt_openbaar',
+            'intern',
+            'zaakvertrouwelijk',
+            'vertrouwelijk',
+            'confidentieel',
+            'geheim',
+            'zeer_geheim',
+        ];
+        this.confidentialityLevelItems$ = this.translateService
+            .stream('key')
+            .pipe(map(() => this.CONFIDENTIALITY_LEVELS.map(confidentialityLevel => ({
+            id: confidentialityLevel,
+            text: this.translateService.instant(`document.${confidentialityLevel}`),
+        }))));
+        this.ADDITONAL_DOCUMENT_DATE_OPTIONS = [
+            {
+                value: 'neither',
+                translationKey: 'document.noAdditionalDate',
+            },
+            {
+                value: 'sent',
+                translationKey: 'document.sendDate',
+            },
+            {
+                value: 'received',
+                translationKey: 'document.receiptDate',
+            },
+        ];
+        this.clearStatusSelection$ = new Subject();
+        this.additionalDocumentDate$ = new BehaviorSubject('neither');
+        this.STATUSES = [
+            'in_bewerking',
+            'ter_vaststelling',
+            'definitief',
+            'gearchiveerd',
+        ];
+        this.RECEIPT_STATUSES = ['definitief', 'gearchiveerd'];
+        this.formData$ = new BehaviorSubject(null);
+        this.statusItems$ = combineLatest([
+            this.additionalDocumentDate$,
+            this.translateService.stream('key'),
+        ]).pipe(tap(([additionalDocumentDate]) => {
+            this.formData$.pipe(take$1(1)).subscribe(formData => {
+                if (additionalDocumentDate === 'received' &&
+                    (formData.status === 'in_bewerking' || formData.status === 'ter_vaststelling')) {
+                    this.clearStatusSelection$.next(null);
+                }
+            });
+        }), map(([additionalDocumentDate]) => (additionalDocumentDate === 'received' ? this.RECEIPT_STATUSES : this.STATUSES).map(status => ({
+            id: status,
+            text: this.translateService.instant(`document.${status}`),
+        }))));
+        this.LANGUAGES = ['nld', 'eng', 'deu'];
+        this.languageItems$ = this.translateService.stream('key').pipe(map(() => this.LANGUAGES.map(language => ({
+            id: language,
+            text: this.translateService.instant(`document.${language}`),
+        }))));
+        this.documentTypeItems$ = combineLatest([
+            this.route?.params || of(null),
+            this.route?.firstChild?.params || of(null),
+            this.valtimoModalService.documentDefinitionName$,
+        ]).pipe(filter$1(([params, firstChildParams, documentDefinitionName]) => !!(params?.documentDefinitionName ||
+            firstChildParams?.documentDefinitionName ||
+            documentDefinitionName)), switchMap(([params, firstChildParams, documentDefinitionName]) => this.documentService.getDocumentTypes(params?.documentDefinitionName ||
+            firstChildParams?.documentDefinitionName ||
+            documentDefinitionName)), map(documentTypes => documentTypes.map(type => ({ id: type.url, text: type.name }))));
+        this.showForm$ = this.modalService.modalVisible$;
+        this.valid$ = new BehaviorSubject(false);
+        this.userEmail$ = from(this.keycloakService.loadUserProfile()).pipe(map(userProfile => userProfile?.email || ''));
+    }
+    ngOnInit() {
+        this.openShowSubscription();
+        this.openHideSubscription();
+    }
+    ngOnDestroy() {
+        this.showSubscription?.unsubscribe();
+        this.hideSubscription?.unsubscribe();
+    }
+    hide() {
+        this.formData$.next(null);
+        this.valid$.next(false);
+        this.additionalDocumentDate$.next('neither');
+        this.modalService.closeModal();
+    }
+    cancel() {
+        this.hide();
+    }
+    save() {
+        combineLatest([this.valid$, this.formData$])
+            .pipe(take$1(1))
+            .subscribe(([valid, formData]) => {
+            if (valid) {
+                this.metadata.emit(formData);
+            }
+        });
+    }
+    formValueChange(data) {
+        this.formData$.next(data);
+        this.setValid(data);
+    }
+    setAdditionalDate(value) {
+        this.additionalDocumentDate$.next(value);
+    }
+    setValid(data) {
+        this.valid$.next(!!(data.filename &&
+            data.title &&
+            data.author &&
+            data.creationDate &&
+            data.status &&
+            data.language &&
+            data.informatieobjecttype));
+    }
+    openShowSubscription() {
+        this.showSubscription = this.show$.subscribe(() => {
+            this.modalService.openModal(this.documentenApiMetadataModal);
+        });
+    }
+    openHideSubscription() {
+        this.hideSubscription = this.hide$.subscribe(() => {
+            this.hide();
+        });
+    }
+}
+DocumentenApiMetadataModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalComponent, deps: [{ token: i1$4.ModalService }, { token: i1$8.TranslateService }, { token: i1$5.ActivatedRoute }, { token: i2.DocumentService }, { token: i1$2.KeycloakService }, { token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
+DocumentenApiMetadataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: { show$: "show$", hide$: "hide$", disabled$: "disabled$", file$: "file$", documentTitle: "documentTitle", disableDocumentTitle: "disableDocumentTitle", filename: "filename", disableFilename: "disableFilename", author: "author", disableAuthor: "disableAuthor", status: "status", disableStatus: "disableStatus", language: "language", disableLanguage: "disableLanguage", documentType: "documentType", disableDocumentType: "disableDocumentType", description: "description", disableDescription: "disableDescription", confidentialityLevel: "confidentialityLevel", disableConfidentialityLevel: "disableConfidentialityLevel" }, outputs: { metadata: "metadata" }, viewQueries: [{ propertyName: "documentenApiMetadataModal", first: true, predicate: ["documentenApiMetadataModal"], 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\n  #documentenApiMetadataModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{file: file$ | async, disabled: disabled$ | async, valid: valid$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [center]=\"true\" [fullWidth]=\"true\" [margin]=\"false\" type=\"h2\">{{\n        'document.fillInMetadata' | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></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\n        (clickEvent)=\"save()\"\n        [disabled]=\"obs.disabled || !obs.valid\"\n        mdiIcon=\"upload\"\n        type=\"success\"\n        >{{ 'document.upload' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form\n      (valueChange)=\"formValueChange($event)\"\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n    >\n      <v-input\n        [defaultValue]=\"filename || obs.file?.name\"\n        [disabled]=\"obs.disabled || disableFilename\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.filename' | translate\"\n        [tooltip]=\"'document.filenameTooltip' | translate\"\n        name=\"filename\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"documentTitle\"\n        [disabled]=\"obs.disabled || disableDocumentTitle\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.inputTitle' | translate\"\n        [tooltip]=\"'document.inputTitleTooltip' | translate\"\n        [widthPx]=\"400\"\n        name=\"title\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"author || (userEmail$ | async)\"\n        [disabled]=\"obs.disabled || disableAuthor\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.author' | translate\"\n        [tooltip]=\"'document.authorTooltip' | translate\"\n        [widthPx]=\"300\"\n        name=\"author\"\n      >\n      </v-input>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelectionId]=\"language || languageItems[0].id\"\n        [disabled]=\"obs.disabled || disableLanguage\"\n        [items]=\"languageItems\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.language' | translate\"\n        [tooltip]=\"'document.languageTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"language\"\n      ></v-select>\n      <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n        <v-select\n          [defaultSelectionId]=\"documentType\"\n          [disabled]=\"obs.disabled || disableDocumentType\"\n          [items]=\"obs.documentTypeItems\"\n          [loading]=\"!obs.documentTypeItems\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          [title]=\"'document.informatieobjecttype' | translate\"\n          [tooltip]=\"'document.informatieobjecttypeTooltip' | translate\"\n          [widthInPx]=\"200\"\n          name=\"informatieobjecttype\"\n        ></v-select>\n      </ng-container>\n      <v-date-picker\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.creationDate' | translate\"\n        [tooltip]=\"'document.creationDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"creationDate\"\n      ></v-date-picker>\n      <ng-container\n        *ngTemplateOutlet=\"additionalDatePicker; context: {additionalDate: additionalDate}\"\n      ></ng-container>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'received'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.receiptDate' | translate\"\n        [tooltip]=\"'document.receiptDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"receiptDate\"\n      ></v-date-picker>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'sent'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.sendDate' | translate\"\n        [tooltip]=\"'document.sendDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"sendDate\"\n      ></v-date-picker>\n      <v-select\n        [defaultSelectionId]=\"status\"\n        [disabled]=\"obs.disabled || disableStatus\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [clearSelectionSubject$]=\"clearStatusSelection$\"\n        name=\"status\"\n      ></v-select>\n      <v-input\n        [defaultValue]=\"description\"\n        [disabled]=\"obs.disabled || disableDescription\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [title]=\"'document.inputDescription' | translate\"\n        [tooltip]=\"'document.inputDescriptionTooltip' | translate\"\n        name=\"description\"\n      >\n      </v-input>\n      <v-select\n        [defaultSelectionId]=\"confidentialityLevel\"\n        [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n        [items]=\"confidentialityLevelItems$ | async\"\n        [margin]=\"true\"\n        [title]=\"'document.confidentialityLevel' | translate\"\n        [tooltip]=\"'document.confidentialityLevelTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"confidentialityLevel\"\n      ></v-select>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #additionalDatePicker let-additionalDate=\"additionalDate\">\n  <v-input-label\n    [title]=\"'document.additionalDate' | translate\"\n    [name]=\"'additionalDate'\"\n    [tooltip]=\"'document.additionalDateTooltip' | translate\"\n    [required]=\"true\"\n  >\n  </v-input-label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1 additional-date\">\n    <label\n      class=\"custom-control custom-radio custom-control-inline\"\n      *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n      (click)=\"setAdditionalDate(option.value)\"\n    >\n      <input\n        class=\"custom-control-input\"\n        type=\"radio\"\n        name=\"radio-inline\"\n        [checked]=\"additionalDate === option.value\"\n      /><span class=\"custom-control-label\">{{ option.translationKey | translate }}</span>\n    </label>\n  </div>\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{display:flex;flex-direction:row;width:100%;justify-content:space-between}.additional-date{padding:0;width:100%;max-width:100%;margin:0;margin-block-end:var(--v-input-margin)}.additional-date .custom-control{margin-bottom:0}\n"], components: [{ type: i1$4.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { type: i1$4.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { type: i1$4.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { type: i1$4.FormComponent, selector: "v-form", outputs: ["valueChange"] }, { type: i1$4.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox"], outputs: ["valueChange"] }, { type: i1$4.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: i1$4.DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday"] }, { type: i1$4.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$8.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-documenten-api-metadata-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\n  #documentenApiMetadataModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{file: file$ | async, disabled: disabled$ | async, valid: valid$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [center]=\"true\" [fullWidth]=\"true\" [margin]=\"false\" type=\"h2\">{{\n        'document.fillInMetadata' | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></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\n        (clickEvent)=\"save()\"\n        [disabled]=\"obs.disabled || !obs.valid\"\n        mdiIcon=\"upload\"\n        type=\"success\"\n        >{{ 'document.upload' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form\n      (valueChange)=\"formValueChange($event)\"\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n    >\n      <v-input\n        [defaultValue]=\"filename || obs.file?.name\"\n        [disabled]=\"obs.disabled || disableFilename\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.filename' | translate\"\n        [tooltip]=\"'document.filenameTooltip' | translate\"\n        name=\"filename\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"documentTitle\"\n        [disabled]=\"obs.disabled || disableDocumentTitle\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.inputTitle' | translate\"\n        [tooltip]=\"'document.inputTitleTooltip' | translate\"\n        [widthPx]=\"400\"\n        name=\"title\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"author || (userEmail$ | async)\"\n        [disabled]=\"obs.disabled || disableAuthor\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.author' | translate\"\n        [tooltip]=\"'document.authorTooltip' | translate\"\n        [widthPx]=\"300\"\n        name=\"author\"\n      >\n      </v-input>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelectionId]=\"language || languageItems[0].id\"\n        [disabled]=\"obs.disabled || disableLanguage\"\n        [items]=\"languageItems\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.language' | translate\"\n        [tooltip]=\"'document.languageTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"language\"\n      ></v-select>\n      <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n        <v-select\n          [defaultSelectionId]=\"documentType\"\n          [disabled]=\"obs.disabled || disableDocumentType\"\n          [items]=\"obs.documentTypeItems\"\n          [loading]=\"!obs.documentTypeItems\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          [title]=\"'document.informatieobjecttype' | translate\"\n          [tooltip]=\"'document.informatieobjecttypeTooltip' | translate\"\n          [widthInPx]=\"200\"\n          name=\"informatieobjecttype\"\n        ></v-select>\n      </ng-container>\n      <v-date-picker\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.creationDate' | translate\"\n        [tooltip]=\"'document.creationDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"creationDate\"\n      ></v-date-picker>\n      <ng-container\n        *ngTemplateOutlet=\"additionalDatePicker; context: {additionalDate: additionalDate}\"\n      ></ng-container>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'received'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.receiptDate' | translate\"\n        [tooltip]=\"'document.receiptDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"receiptDate\"\n      ></v-date-picker>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'sent'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.sendDate' | translate\"\n        [tooltip]=\"'document.sendDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"sendDate\"\n      ></v-date-picker>\n      <v-select\n        [defaultSelectionId]=\"status\"\n        [disabled]=\"obs.disabled || disableStatus\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [clearSelectionSubject$]=\"clearStatusSelection$\"\n        name=\"status\"\n      ></v-select>\n      <v-input\n        [defaultValue]=\"description\"\n        [disabled]=\"obs.disabled || disableDescription\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [title]=\"'document.inputDescription' | translate\"\n        [tooltip]=\"'document.inputDescriptionTooltip' | translate\"\n        name=\"description\"\n      >\n      </v-input>\n      <v-select\n        [defaultSelectionId]=\"confidentialityLevel\"\n        [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n        [items]=\"confidentialityLevelItems$ | async\"\n        [margin]=\"true\"\n        [title]=\"'document.confidentialityLevel' | translate\"\n        [tooltip]=\"'document.confidentialityLevelTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"confidentialityLevel\"\n      ></v-select>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #additionalDatePicker let-additionalDate=\"additionalDate\">\n  <v-input-label\n    [title]=\"'document.additionalDate' | translate\"\n    [name]=\"'additionalDate'\"\n    [tooltip]=\"'document.additionalDateTooltip' | translate\"\n    [required]=\"true\"\n  >\n  </v-input-label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1 additional-date\">\n    <label\n      class=\"custom-control custom-radio custom-control-inline\"\n      *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n      (click)=\"setAdditionalDate(option.value)\"\n    >\n      <input\n        class=\"custom-control-input\"\n        type=\"radio\"\n        name=\"radio-inline\"\n        [checked]=\"additionalDate === option.value\"\n      /><span class=\"custom-control-label\">{{ option.translationKey | translate }}</span>\n    </label>\n  </div>\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{display:flex;flex-direction:row;width:100%;justify-content:space-between}.additional-date{padding:0;width:100%;max-width:100%;margin:0;margin-block-end:var(--v-input-margin)}.additional-date .custom-control{margin-bottom:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.ModalService }, { type: i1$8.TranslateService }, { type: i1$5.ActivatedRoute }, { type: i2.DocumentService }, { type: i1$2.KeycloakService }, { type: ValtimoModalService }]; }, propDecorators: { documentenApiMetadataModal: [{
+                type: ViewChild,
+                args: ['documentenApiMetadataModal']
+            }], show$: [{
+                type: Input
+            }], hide$: [{
+                type: Input
+            }], disabled$: [{
+                type: Input
+            }], file$: [{
+                type: Input
+            }], documentTitle: [{
+                type: Input
+            }], disableDocumentTitle: [{
+                type: Input
+            }], filename: [{
+                type: Input
+            }], disableFilename: [{
+                type: Input
+            }], author: [{
+                type: Input
+            }], disableAuthor: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], disableStatus: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], disableLanguage: [{
+                type: Input
+            }], documentType: [{
+                type: Input
+            }], disableDocumentType: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], disableDescription: [{
+                type: Input
+            }], confidentialityLevel: [{
+                type: Input
+            }], disableConfidentialityLevel: [{
+                type: Input
+            }], metadata: [{
+                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 DocumentenApiUploaderComponent {
+    constructor(uploadProviderService, stateService, domService, downloadService, modalService, userProviderService, route) {
+        this.uploadProviderService = uploadProviderService;
+        this.stateService = stateService;
+        this.domService = domService;
+        this.downloadService = downloadService;
+        this.modalService = modalService;
+        this.userProviderService = userProviderService;
+        this.route = route;
+        this.valueChange = new EventEmitter();
+        this.uploading$ = new BehaviorSubject(false);
+        this.fileToBeUploaded$ = new BehaviorSubject(null);
+        this.modalDisabled$ = new BehaviorSubject(false);
+        this.showModal$ = new Subject();
+        this.hideModal$ = new Subject();
+        this.uploadProcessLinked$ = combineLatest([
+            this.route?.params || of(null),
+            this.route?.firstChild?.params || of(null),
+            this.modalService.documentDefinitionName$,
+        ]).pipe(filter(([params, firstChildParams, documentDefinitionName]) => !!(params?.documentDefinitionName ||
+            firstChildParams?.documentDefinitionName ||
+            documentDefinitionName)), switchMap(([params, firstChildParams, documentDefinitionName]) => this.uploadProviderService.checkUploadProcessLink(params?.documentDefinitionName ||
+            firstChildParams?.documentDefinitionName ||
+            documentDefinitionName)), startWith('loading'));
+        this.isAdmin$ = this.userProviderService
+            .getUserSubject()
+            .pipe(map$1(userIdentity => userIdentity?.roles.includes('ROLE_ADMIN')));
+        this._value = [];
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (Array.isArray(value)) {
+            this._value = value;
+        }
+    }
+    fileSelected(file) {
+        this.fileToBeUploaded$.next(file);
+        this.showModal$.next(null);
+    }
+    deleteFile(id) {
+        this.domService.toggleSubmitButton(true);
+        this._value = this._value.filter((file) => file?.id ? file?.id !== id : true);
+        this.valueChange.emit(this._value);
+    }
+    metadataSet(metadata) {
+        this.uploading$.next(true);
+        this.hideModal$.next(null);
+        this.domService.toggleSubmitButton(true);
+        this.fileToBeUploaded$
+            .pipe(take(1), switchMap(file => this.uploadProviderService.uploadTempFileWithMetadata(file, metadata)), tap(result => {
+            this.domService.toggleSubmitButton(false);
+            this.uploading$.next(false);
+            this._value.push(result);
+            this.valueChange.emit(this._value);
+        }))
+            .subscribe();
+    }
+}
+DocumentenApiUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiUploaderComponent, deps: [{ token: i1$a.UploadProviderService }, { token: FormIoStateService }, { token: FormIoDomService }, { token: i1$a.DownloadService }, { token: ValtimoModalService }, { token: i1$6.UserProviderService }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+DocumentenApiUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DocumentenApiUploaderComponent, selector: "valtimo-documenten-api-formio-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", documentTitle: "documentTitle", disableDocumentTitle: "disableDocumentTitle", filename: "filename", disableFilename: "disableFilename", author: "author", disableAuthor: "disableAuthor", status: "status", disableStatus: "disableStatus", language: "language", disableLanguage: "disableLanguage", documentType: "documentType", disableDocumentType: "disableDocumentType", description: "description", disableDescription: "disableDescription", confidentialityLevel: "confidentialityLevel", disableConfidentialityLevel: "disableConfidentialityLevel", value: "value" }, outputs: { valueChange: "valueChange" }, 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 *ngIf=\"{linked: uploadProcessLinked$ | async, isAdmin: isAdmin$ | async} as obs\">\n  <div *ngIf=\"obs.linked === false\">\n    <div\n      *ngIf=\"obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n    <div\n      *ngIf=\"!obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n  <valtimo-dropzone\n    (fileSelected)=\"fileSelected($event)\"\n    [acceptedFiles]=\"null\"\n    [camera]=\"camera\"\n    [disabled]=\"disabled || obs.linked === false || obs.linked === 'loading'\"\n    [hideFilePreview]=\"true\"\n    [hideTitle]=\"hideTitle\"\n    [maxFileSize]=\"maxFileSize\"\n    [maxFiles]=\"1\"\n    [showMaxFileSize]=\"!hideMaxFileSize\"\n    [subtitle]=\"subtitle\"\n    [title]=\"title\"\n    [uploading]=\"uploading$ | async\"\n  ></valtimo-dropzone>\n</ng-container>\n\n<div *ngFor=\"let resource of _value\" class=\"file-preview\">\n  <div class=\"file-preview-name\">\n    <span>\n      {{ resource.filename }}\n    </span>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.sizeInBytes | filesize }}\n    </span>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"file-preview-delete\">\n    <a (click)=\"deleteFile(resource.id)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [hide$]=\"hideModal$\"\n  [language]=\"language\"\n  [show$]=\"showModal$\"\n  [status]=\"status\"\n></valtimo-documenten-api-metadata-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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"], components: [{ type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["show$", "hide$", "disabled$", "file$", "documentTitle", "disableDocumentTitle", "filename", "disableFilename", "author", "disableAuthor", "status", "disableStatus", "language", "disableLanguage", "documentType", "disableDocumentType", "description", "disableDescription", "confidentialityLevel", "disableConfidentialityLevel"], outputs: ["metadata"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "filesize": FileSizePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-documenten-api-formio-uploader', 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 *ngIf=\"{linked: uploadProcessLinked$ | async, isAdmin: isAdmin$ | async} as obs\">\n  <div *ngIf=\"obs.linked === false\">\n    <div\n      *ngIf=\"obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n    <div\n      *ngIf=\"!obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n  <valtimo-dropzone\n    (fileSelected)=\"fileSelected($event)\"\n    [acceptedFiles]=\"null\"\n    [camera]=\"camera\"\n    [disabled]=\"disabled || obs.linked === false || obs.linked === 'loading'\"\n    [hideFilePreview]=\"true\"\n    [hideTitle]=\"hideTitle\"\n    [maxFileSize]=\"maxFileSize\"\n    [maxFiles]=\"1\"\n    [showMaxFileSize]=\"!hideMaxFileSize\"\n    [subtitle]=\"subtitle\"\n    [title]=\"title\"\n    [uploading]=\"uploading$ | async\"\n  ></valtimo-dropzone>\n</ng-container>\n\n<div *ngFor=\"let resource of _value\" class=\"file-preview\">\n  <div class=\"file-preview-name\">\n    <span>\n      {{ resource.filename }}\n    </span>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.sizeInBytes | filesize }}\n    </span>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"file-preview-delete\">\n    <a (click)=\"deleteFile(resource.id)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [hide$]=\"hideModal$\"\n  [language]=\"language\"\n  [show$]=\"showModal$\"\n  [status]=\"status\"\n></valtimo-documenten-api-metadata-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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$a.UploadProviderService }, { type: FormIoStateService }, { type: FormIoDomService }, { type: i1$a.DownloadService }, { type: ValtimoModalService }, { type: i1$6.UserProviderService }, { type: i1$5.ActivatedRoute }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], hideTitle: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], maxFileSize: [{
+                type: Input
+            }], hideMaxFileSize: [{
+                type: Input
+            }], camera: [{
+                type: Input
+            }], documentTitle: [{
+                type: Input
+            }], disableDocumentTitle: [{
+                type: Input
+            }], filename: [{
+                type: Input
+            }], disableFilename: [{
+                type: Input
+            }], author: [{
+                type: Input
+            }], disableAuthor: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], disableStatus: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], disableLanguage: [{
+                type: Input
+            }], documentType: [{
+                type: Input
+            }], disableDocumentType: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], disableDescription: [{
+                type: Input
+            }], confidentialityLevel: [{
+                type: Input
+            }], disableConfidentialityLevel: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
+
+/*
+ * 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 DocumentenApiMetadataModalModule {
+}
+DocumentenApiMetadataModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DocumentenApiMetadataModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalModule, declarations: [DocumentenApiMetadataModalComponent], imports: [CommonModule,
+        TranslateModule,
+        ModalModule$1,
+        TitleModule,
+        ButtonModule,
+        TranslateModule,
+        FormModule,
+        InputModule,
+        SelectModule,
+        DatePickerModule,
+        InputLabelModule], exports: [DocumentenApiMetadataModalComponent] });
+DocumentenApiMetadataModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalModule, imports: [[
+            CommonModule,
+            TranslateModule,
+            ModalModule$1,
+            TitleModule,
+            ButtonModule,
+            TranslateModule,
+            FormModule,
+            InputModule,
+            SelectModule,
+            DatePickerModule,
+            InputLabelModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DocumentenApiMetadataModalComponent],
+                    exports: [DocumentenApiMetadataModalComponent],
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ModalModule$1,
+                        TitleModule,
+                        ButtonModule,
+                        TranslateModule,
+                        FormModule,
+                        InputModule,
+                        SelectModule,
+                        DatePickerModule,
+                        InputLabelModule,
+                    ],
+                }]
+        }] });
+
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -4315,14 +4748,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class FormIoModule {
 }
 FormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, declarations: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent], imports: [CommonModule,
+FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, declarations: [FormioComponent,
+        FormioBuilderComponent,
+        FormIoUploaderComponent,
+        DocumentenApiUploaderComponent], imports: [CommonModule,
         FormioModule,
         DropzoneModule,
         TranslateModule,
         DocumentModule,
         FileSizeModule,
         ResourceModule,
-        RouterModule], exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent] });
+        RouterModule,
+        DocumentenApiMetadataModalModule], exports: [FormioComponent,
+        FormioBuilderComponent,
+        FormIoUploaderComponent,
+        DocumentenApiUploaderComponent] });
 FormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, providers: [FormIoDomService, { provide: FormioAppConfig, useValue: AppConfig }], imports: [[
             CommonModule,
             FormioModule,
@@ -4332,6 +4772,7 @@ FormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             FileSizeModule,
             ResourceModule,
             RouterModule,
+            DocumentenApiMetadataModalModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, decorators: [{
             type: NgModule,
@@ -4345,9 +4786,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         FileSizeModule,
                         ResourceModule,
                         RouterModule,
+                        DocumentenApiMetadataModalModule,
+                    ],
+                    declarations: [
+                        FormioComponent,
+                        FormioBuilderComponent,
+                        FormIoUploaderComponent,
+                        DocumentenApiUploaderComponent,
+                    ],
+                    exports: [
+                        FormioComponent,
+                        FormioBuilderComponent,
+                        FormIoUploaderComponent,
+                        DocumentenApiUploaderComponent,
                     ],
-                    declarations: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
-                    exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
                     providers: [FormIoDomService, { provide: FormioAppConfig, useValue: AppConfig }],
                 }]
         }] });
@@ -4868,7 +5320,7 @@ const formIoUploaderEditForm = () => ({
  * limitations under the License.
  */
 const customUploaderType = 'valtimo-file';
-const COMPONENT_OPTIONS = {
+const COMPONENT_OPTIONS$1 = {
     type: customUploaderType,
     selector: 'valtimo-form-io-uploader',
     title: 'Valtimo File Upload',
@@ -4879,6 +5331,341 @@ const COMPONENT_OPTIONS = {
     editForm: formIoUploaderEditForm,
 };
 function registerFormioUploadComponent(injector) {
+    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$1);
+    // override setValue function to allow for setting an array value
+    class UploaderComponent extends originalUploadComponent {
+        setValue(value) {
+            this._customAngularElement.value = value;
+            return true;
+        }
+    }
+    if (!customElements.get(COMPONENT_OPTIONS$1.selector)) {
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$1, FormIoUploaderComponent, UploaderComponent, injector);
+    }
+}
+
+/*
+ * 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.
+ */
+const documentenApiUploaderEditForm = () => ({
+    components: [
+        { key: 'type', type: 'hidden' },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'label',
+            label: 'Label',
+            placeholder: 'Label',
+            validate: {
+                required: true,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'key',
+            label: 'Property Name',
+            placeholder: 'Property Name',
+            tooltip: 'The name of this field in the API endpoint.',
+            validate: {
+                required: true,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.title',
+            label: 'Title',
+            placeholder: 'Title',
+            tooltip: 'Leave empty to use the default title',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideTitle',
+            label: 'Hide title',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.subtitle',
+            label: 'Subtitle',
+            placeholder: 'Title',
+            tooltip: 'Leave empty to hide subtitle',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'number',
+            input: true,
+            key: 'customOptions.maxFileSize',
+            label: 'Maximum file size',
+            placeholder: 'Maximum file size',
+            defaultValue: 5,
+            validate: {
+                required: true,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideMaxFileSize',
+            label: 'Hide maximum file size',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.camera',
+            label: 'Allow camera uploads',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.documentTitle',
+            label: 'Default document title',
+            tooltip: 'Leave empty to let the user input their own title',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableDocumentTitle',
+            label: 'Disable document title input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.filename',
+            label: 'Default filename',
+            tooltip: 'Leave empty to let the user input their own filename',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableFilename',
+            label: 'Disable filename input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.author',
+            label: 'Default author',
+            tooltip: 'Leave empty to let the user input their own author',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableAuthor',
+            label: 'Disable author input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'select',
+            label: 'Default status',
+            key: 'customOptions.status',
+            placeholder: 'Select a default status',
+            data: {
+                values: [
+                    { value: 'in_bewerking', label: 'In editing' },
+                    { value: 'ter_vaststelling', label: 'To be confirmed' },
+                    { value: 'definitief', label: 'Definitive' },
+                    { value: 'gearchiveerd', label: 'Archived' },
+                ],
+            },
+            dataSrc: 'values',
+            input: true,
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableStatus',
+            label: 'Disable status input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'select',
+            label: 'Default language',
+            key: 'customOptions.language',
+            placeholder: 'Select a default language',
+            data: {
+                values: [
+                    { value: 'nld', label: 'Dutch' },
+                    { value: 'eng', label: 'English' },
+                    { value: 'deu', label: 'German' },
+                ],
+            },
+            dataSrc: 'values',
+            input: true,
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableLanguage',
+            label: 'Disable language input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.documentType',
+            label: 'Default document type url',
+            tooltip: 'Must match the document type url exactly. Leave empty to let the user input their own document type',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableDocumentType',
+            label: 'Disable document type input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.description',
+            label: 'Default description',
+            tooltip: 'Leave empty to let the user input their own description',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableDescription',
+            label: 'Disable description input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'select',
+            label: 'Default confidentiality level',
+            key: 'customOptions.confidentialityLevel',
+            placeholder: 'Select a default confidentiality level',
+            data: {
+                values: [
+                    { value: 'openbaar', label: 'Public' },
+                    { value: 'beperkt_openbaar', label: 'Restricted public' },
+                    { value: 'intern', label: 'Internal' },
+                    { value: 'zaakvertrouwelijk', label: 'Case confidential' },
+                    { value: 'vertrouwelijk', label: 'Private' },
+                    { value: 'confidentieel', label: 'Confidential' },
+                    { value: 'geheim', label: 'Secret' },
+                    { value: 'zeer_geheim', label: 'Very secret' },
+                ],
+            },
+            dataSrc: 'values',
+            input: true,
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableConfidentialityLevel',
+            label: 'Disable confidentiality level input',
+            validate: {
+                required: false,
+            },
+        },
+    ],
+});
+
+/*
+ * 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.
+ */
+const customDocumentApiUploaderType = 'documenten-api-file';
+const COMPONENT_OPTIONS = {
+    type: customDocumentApiUploaderType,
+    selector: 'documenten-api-form-io-uploader',
+    title: 'Documenten API File Upload',
+    group: 'advanced',
+    icon: 'upload',
+    // set empty value to force formio to accept arrays as valid input value for this field type
+    emptyValue: [],
+    editForm: documentenApiUploaderEditForm,
+};
+function registerDocumentenApiFormioUploadComponent(injector) {
     const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS);
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
@@ -4888,7 +5675,7 @@ function registerFormioUploadComponent(injector) {
         }
     }
     if (!customElements.get(COMPONENT_OPTIONS.selector)) {
-        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS, FormIoUploaderComponent, UploaderComponent, injector);
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS, DocumentenApiUploaderComponent, UploaderComponent, injector);
     }
 }
 
@@ -5159,5 +5946,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CardComponent, CardModule, ComponentsModule, DataListComponent, DataListModule, DropzoneComponent, DropzoneModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuComponent, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageHeaderComponent, PageHeaderModule, PageTitleComponent, PageTitleModule, ProgressBarComponent, ProgressBarModule, RightSidebarComponent, RightSidebarModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SpinnerComponent, SpinnerModule, TimelineComponent, TimelineItemImpl, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ValtimoModalService, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customUploaderType, menuInitializer, registerFormioFileSelectorComponent, registerFormioUploadComponent };
+export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CardComponent, CardModule, ComponentsModule, DataListComponent, DataListModule, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuComponent, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageHeaderComponent, PageHeaderModule, PageTitleComponent, PageTitleModule, ProgressBarComponent, ProgressBarModule, RightSidebarComponent, RightSidebarModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SpinnerComponent, SpinnerModule, TimelineComponent, TimelineItemImpl, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ValtimoModalService, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customDocumentApiUploaderType, customUploaderType, menuInitializer, registerDocumentenApiFormioUploadComponent, registerFormioFileSelectorComponent, registerFormioUploadComponent };
 //# sourceMappingURL=valtimo-components.mjs.map