@valtimo/components 5.10.0 → 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, take as take$1 } 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, ModalModule as ModalModule$1, TitleModule, ButtonModule, FormModule, InputModule, SelectModule, DatePickerModule } 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';
@@ -243,13 +243,20 @@ class TimelineItemImpl {
 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' });
@@ -1896,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');
     }
 }
 
@@ -2028,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);
         }
@@ -2044,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' });
@@ -4331,45 +4348,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class FormIoModule {
+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();
+        });
+    }
 }
-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,
-        DropzoneModule,
-        TranslateModule,
-        DocumentModule,
-        FileSizeModule,
-        ResourceModule,
-        RouterModule], exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent] });
-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,
-            DropzoneModule,
-            TranslateModule,
-            DocumentModule,
-            FileSizeModule,
-            ResourceModule,
-            RouterModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormioModule,
-                        DropzoneModule,
-                        TranslateModule,
-                        DocumentModule,
-                        FileSizeModule,
-                        ResourceModule,
-                        RouterModule,
-                    ],
-                    declarations: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
-                    exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
-                    providers: [FormIoDomService, { provide: FormioAppConfig, useValue: AppConfig }],
-                }]
-        }] });
+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.
@@ -4386,54 +4550,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class ModalComponent {
-    constructor(modalService) {
+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.title = '';
-        this.subtitle = '';
-        this.showFooter = false;
-    }
-    ngOnInit() {
-        this.openScrollSubscription();
+        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 = [];
     }
-    ngAfterViewInit() {
-        $(`#${this.elementId}`).modal({ show: false });
+    get value() {
+        return this._value;
     }
-    show() {
-        $(`#${this.elementId}`).modal('show');
+    set value(value) {
+        if (Array.isArray(value)) {
+            this._value = value;
+        }
     }
-    hide() {
-        $(`#${this.elementId}`).modal('hide');
+    fileSelected(file) {
+        this.fileToBeUploaded$.next(file);
+        this.showModal$.next(null);
     }
-    ngOnDestroy() {
-        this.scrollSubscription.unsubscribe();
+    deleteFile(id) {
+        this.domService.toggleSubmitButton(true);
+        this._value = this._value.filter((file) => file?.id ? file?.id !== id : true);
+        this.valueChange.emit(this._value);
     }
-    openScrollSubscription() {
-        this.scrollSubscription = this.modalService.scrollToTop$.subscribe(() => {
-            const element = this.scrollModal.nativeElement;
-            if (element)
-                element.scrollTo(0, 0);
-        });
+    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();
     }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalComponent, deps: [{ token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ModalComponent, selector: "valtimo-modal", inputs: { elementId: "elementId", title: "title", subtitle: "subtitle", templateBelowSubtitle: "templateBelowSubtitle", showFooter: "showFooter" }, viewQueries: [{ propertyName: "scrollModal", first: true, predicate: ["scrollModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <img src=\"assets/modal/header-image.png\" class=\"modal-header-image\" />\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalComponent, decorators: [{
+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-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<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <img src=\"assets/modal/header-image.png\" class=\"modal-header-image\" />\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\n"] }]
-        }], ctorParameters: function () { return [{ type: ValtimoModalService }]; }, propDecorators: { elementId: [{
+            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
-            }], templateBelowSubtitle: [{
+            }], maxFileSize: [{
                 type: Input
-            }], showFooter: [{
+            }], 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
-            }], scrollModal: [{
-                type: ViewChild,
-                args: ['scrollModal']
             }] } });
 
 /*
@@ -4451,14 +4682,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class ModalModule {
+class DocumentenApiMetadataModalModule {
 }
-ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule], exports: [ModalComponent] });
-ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, decorators: [{
-            type: NgModule,
-            args: [{
+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.
+ *
+ * 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 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,
+        DocumentenApiUploaderComponent], imports: [CommonModule,
+        FormioModule,
+        DropzoneModule,
+        TranslateModule,
+        DocumentModule,
+        FileSizeModule,
+        ResourceModule,
+        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,
+            DropzoneModule,
+            TranslateModule,
+            DocumentModule,
+            FileSizeModule,
+            ResourceModule,
+            RouterModule,
+            DocumentenApiMetadataModalModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormioModule,
+                        DropzoneModule,
+                        TranslateModule,
+                        DocumentModule,
+                        FileSizeModule,
+                        ResourceModule,
+                        RouterModule,
+                        DocumentenApiMetadataModalModule,
+                    ],
+                    declarations: [
+                        FormioComponent,
+                        FormioBuilderComponent,
+                        FormIoUploaderComponent,
+                        DocumentenApiUploaderComponent,
+                    ],
+                    exports: [
+                        FormioComponent,
+                        FormioBuilderComponent,
+                        FormIoUploaderComponent,
+                        DocumentenApiUploaderComponent,
+                    ],
+                    providers: [FormIoDomService, { provide: FormioAppConfig, useValue: AppConfig }],
+                }]
+        }] });
+
+/*
+ * 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 ModalComponent {
+    constructor(modalService) {
+        this.modalService = modalService;
+        this.title = '';
+        this.subtitle = '';
+        this.showFooter = false;
+    }
+    ngOnInit() {
+        this.openScrollSubscription();
+    }
+    ngAfterViewInit() {
+        $(`#${this.elementId}`).modal({ show: false });
+    }
+    show() {
+        $(`#${this.elementId}`).modal('show');
+    }
+    hide() {
+        $(`#${this.elementId}`).modal('hide');
+    }
+    ngOnDestroy() {
+        this.scrollSubscription.unsubscribe();
+    }
+    openScrollSubscription() {
+        this.scrollSubscription = this.modalService.scrollToTop$.subscribe(() => {
+            const element = this.scrollModal.nativeElement;
+            if (element)
+                element.scrollTo(0, 0);
+        });
+    }
+}
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalComponent, deps: [{ token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ModalComponent, selector: "valtimo-modal", inputs: { elementId: "elementId", title: "title", subtitle: "subtitle", templateBelowSubtitle: "templateBelowSubtitle", showFooter: "showFooter" }, viewQueries: [{ propertyName: "scrollModal", first: true, predicate: ["scrollModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <img src=\"assets/modal/header-image.png\" class=\"modal-header-image\" />\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-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<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <img src=\"assets/modal/header-image.png\" class=\"modal-header-image\" />\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\n"] }]
+        }], ctorParameters: function () { return [{ type: ValtimoModalService }]; }, propDecorators: { elementId: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], templateBelowSubtitle: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], scrollModal: [{
+                type: ViewChild,
+                args: ['scrollModal']
+            }] } });
+
+/*
+ * 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 ModalModule {
+}
+ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule], exports: [ModalComponent] });
+ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, decorators: [{
+            type: NgModule,
+            args: [{
                     declarations: [ModalComponent],
                     imports: [CommonModule],
                     exports: [ModalComponent],
@@ -4887,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',
@@ -4898,7 +5331,7 @@ const COMPONENT_OPTIONS = {
     editForm: formIoUploaderEditForm,
 };
 function registerFormioUploadComponent(injector) {
-    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS);
+    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$1);
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
         setValue(value) {
@@ -4906,8 +5339,8 @@ function registerFormioUploadComponent(injector) {
             return true;
         }
     }
-    if (!customElements.get(COMPONENT_OPTIONS.selector)) {
-        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS, FormIoUploaderComponent, UploaderComponent, injector);
+    if (!customElements.get(COMPONENT_OPTIONS$1.selector)) {
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$1, FormIoUploaderComponent, UploaderComponent, injector);
     }
 }
 
@@ -4926,75 +5359,410 @@ function registerFormioUploadComponent(injector) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const SelectComponent = Components.components.select;
-function registerFormioFileSelectorComponent(injector) {
-    const documentService = injector.get(DocumentService);
-    const stateService = injector.get(FormIoStateService);
-    const unavailableMessage = {
-        label: 'could not retrieve documents',
-        value: null,
-    };
-    function getDocumentResources(documentId) {
-        if (!documentId) {
-            return new Promise(resolve => {
-                resolve([unavailableMessage]);
-            });
-        }
-        return documentService
-            .getDocument(documentId)
-            .toPromise()
-            .then(document => document.relatedFiles.map(relatedFile => ({
-            label: relatedFile.fileName,
-            value: relatedFile.fileId,
-        })))
-            .catch(() => new Promise(resolve => {
-            resolve([unavailableMessage]);
-        }));
-    }
-    class ResourceSelectorComponent extends SelectComponent {
-        static schema(...extend) {
-            return SelectComponent.schema({
-                type: 'resource-selector',
-                label: 'Resource selector',
-                key: 'resource-selector',
-                dataSrc: 'custom',
-                dataType: 'string',
-                valueProperty: 'value',
-                asyncValues: true,
-                data: {
-                    custom: 'values = instance.getResources()',
-                },
-                ...extend,
-            });
-        }
-        getResources() {
-            return stateService.documentId$
-                .pipe(take(1))
-                .toPromise()
-                .then(documentId => getDocumentResources(documentId));
-        }
-        static get builderInfo() {
-            return {
-                title: 'Document picker',
-                icon: 'th-list',
-                group: 'basic',
-                documentation: '/userguide/#textfield',
-                weight: 0,
-                schema: ResourceSelectorComponent.schema(),
-            };
-        }
-    }
-    Formio.use({
-        components: {
-            'resource-selector': ResourceSelectorComponent,
-        },
-    });
-}
-
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (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 {
+        setValue(value) {
+            this._customAngularElement.value = value;
+            return true;
+        }
+    }
+    if (!customElements.get(COMPONENT_OPTIONS.selector)) {
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS, DocumentenApiUploaderComponent, 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 SelectComponent = Components.components.select;
+function registerFormioFileSelectorComponent(injector) {
+    const documentService = injector.get(DocumentService);
+    const stateService = injector.get(FormIoStateService);
+    const unavailableMessage = {
+        label: 'could not retrieve documents',
+        value: null,
+    };
+    function getDocumentResources(documentId) {
+        if (!documentId) {
+            return new Promise(resolve => {
+                resolve([unavailableMessage]);
+            });
+        }
+        return documentService
+            .getDocument(documentId)
+            .toPromise()
+            .then(document => document.relatedFiles.map(relatedFile => ({
+            label: relatedFile.fileName,
+            value: relatedFile.fileId,
+        })))
+            .catch(() => new Promise(resolve => {
+            resolve([unavailableMessage]);
+        }));
+    }
+    class ResourceSelectorComponent extends SelectComponent {
+        static schema(...extend) {
+            return SelectComponent.schema({
+                type: 'resource-selector',
+                label: 'Resource selector',
+                key: 'resource-selector',
+                dataSrc: 'custom',
+                dataType: 'string',
+                valueProperty: 'value',
+                asyncValues: true,
+                data: {
+                    custom: 'values = instance.getResources()',
+                },
+                ...extend,
+            });
+        }
+        getResources() {
+            return stateService.documentId$
+                .pipe(take(1))
+                .toPromise()
+                .then(documentId => getDocumentResources(documentId));
+        }
+        static get builderInfo() {
+            return {
+                title: 'Document picker',
+                icon: 'th-list',
+                group: 'basic',
+                documentation: '/userguide/#textfield',
+                weight: 0,
+                schema: ResourceSelectorComponent.schema(),
+            };
+        }
+    }
+    Formio.use({
+        components: {
+            'resource-selector': ResourceSelectorComponent,
+        },
+    });
+}
+
+/*
+ * 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
  *
@@ -5158,193 +5926,6 @@ 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.
  *
@@ -5365,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, 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 };
+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