@valtimo/components 5.9.1 → 5.10.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, from, switchMap, map, BehaviorSubject, Observable, combineLatest, fromEvent, Subscription, timer, take as take$1 } 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 } 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';
@@ -224,6 +224,22 @@ 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();
@@ -4066,6 +4082,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 +4109,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 +4140,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 +4205,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"] }]
@@ -5139,6 +5158,193 @@ 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) {
+        this.modalService = modalService;
+        this.translateService = translateService;
+        this.route = route;
+        this.documentService = documentService;
+        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.STATUSES = [
+            'in_bewerking',
+            'ter_vaststelling',
+            'definitief',
+            'gearchiveerd',
+        ];
+        this.statusItems$ = this.translateService.stream('key').pipe(map(() => 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$ = this.route.params.pipe(switchMap(params => this.documentService.getDocumentTypes(params.documentDefinitionName)), map(documentTypes => documentTypes.map(type => ({ id: type.url, text: type.name }))));
+        this.showForm$ = this.modalService.modalVisible$;
+        this.valid$ = new BehaviorSubject(false);
+        this.formData$ = new BehaviorSubject(null);
+    }
+    ngOnInit() {
+        this.openShowSubscription();
+        this.openHideSubscription();
+    }
+    ngOnDestroy() {
+        this.showSubscription?.unsubscribe();
+        this.hideSubscription?.unsubscribe();
+    }
+    hide() {
+        this.formData$.next(null);
+        this.valid$.next(false);
+        this.modalService.closeModal();
+    }
+    cancel() {
+        this.hide();
+    }
+    save() {
+        combineLatest([this.valid$, this.formData$])
+            .pipe(take$1(1))
+            .subscribe(([valid, formData]) => {
+            if (valid) {
+                this.metadata.emit(formData);
+            }
+        });
+    }
+    formValueChange(data) {
+        this.formData$.next(data);
+        this.setValid(data);
+    }
+    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 }], 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$" }, 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 (valueChange)=\"formValueChange($event)\">\n      <v-input\n        [defaultValue]=\"obs.file?.name\"\n        [disabled]=\"obs.disabled\"\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        [disabled]=\"obs.disabled\"\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        [disabled]=\"obs.disabled\"\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        [disabled]=\"obs.disabled\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"status\"\n      ></v-select>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelection]=\"languageItems[0]\"\n        [disabled]=\"obs.disabled\"\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          [disabled]=\"obs.disabled\"\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      <v-date-picker\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        [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-input\n        [disabled]=\"obs.disabled\"\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        [disabled]=\"obs.disabled\"\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", 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}\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"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], 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 (valueChange)=\"formValueChange($event)\">\n      <v-input\n        [defaultValue]=\"obs.file?.name\"\n        [disabled]=\"obs.disabled\"\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        [disabled]=\"obs.disabled\"\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        [disabled]=\"obs.disabled\"\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        [disabled]=\"obs.disabled\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"status\"\n      ></v-select>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelection]=\"languageItems[0]\"\n        [disabled]=\"obs.disabled\"\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          [disabled]=\"obs.disabled\"\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      <v-date-picker\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        [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-input\n        [disabled]=\"obs.disabled\"\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        [disabled]=\"obs.disabled\"\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", 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.ModalService }, { type: i1$8.TranslateService }, { type: i1$5.ActivatedRoute }, { type: i2.DocumentService }]; }, propDecorators: { documentenApiMetadataModal: [{
+                type: ViewChild,
+                args: ['documentenApiMetadataModal']
+            }], show$: [{
+                type: Input
+            }], hide$: [{
+                type: Input
+            }], disabled$: [{
+                type: Input
+            }], file$: [{
+                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 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], 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,
+        ]] });
+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,
+                    ],
+                }]
+        }] });
+
 /*
  * Copyright 2015-2022 Ritense BV, the Netherlands.
  *
@@ -5159,5 +5365,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, 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 };
 //# sourceMappingURL=valtimo-components.mjs.map