@valtimo/zgw 12.5.1 → 12.6.0

package/fesm2022/valtimo-zgw.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, signal, NgModule, ViewContainerRef } from '@angular/core';
-import * as i5$1 from 'carbon-components-angular';
-import { ModalModule, InputModule, ButtonModule, DropdownModule, RadioModule, NotificationModule, TagModule, IconModule, DatePickerInputModule, DatePickerModule, ComboBoxModule, TooltipModule, DialogModule, ToggleModule, LoadingModule, CheckboxModule, TabsModule } from 'carbon-components-angular';
-import * as i5 from '@ngx-translate/core';
+import * as i6 from 'carbon-components-angular';
+import { ModalModule, InputModule, ButtonModule, DropdownModule, RadioModule, NotificationModule, TagModule, IconModule, DatePickerInputModule, DatePickerModule, ComboBoxModule, TooltipModule, DialogModule, ToggleModule, CheckboxModule, LoadingModule, TabsModule } from 'carbon-components-angular';
+import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule, FormGroup, FormControl } from '@angular/forms';
-import { BehaviorSubject, combineLatest, map, Subscription, switchMap, filter, tap, startWith, debounceTime, Subject, take, from, of, ReplaySubject, distinctUntilChanged } from 'rxjs';
-import * as i3 from '@valtimo/components';
+import { BehaviorSubject, combineLatest, map, Subscription, switchMap, filter, tap, startWith, debounceTime, Subject, take, of, from, ReplaySubject, distinctUntilChanged } from 'rxjs';
+import * as i3$1 from '@valtimo/components';
 import { CARBON_CONSTANTS, ViewType, CarbonListModule, ConfirmationModalModule, InputLabelModule, InputModule as InputModule$1, SelectModule, VModalModule, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, ParagraphModule, CarbonListComponent, createCustomFormioComponent, registerCustomFormioComponentWithClass, TableModule, TitleModule, FormIoModule, TimelineItemImpl, ModalModule as ModalModule$1, SpinnerModule, TimelineModule, WidgetModule, ListModule, FilterSidebarModule, PageModule, FormModule, ValtimoCdsModalDirectiveModule, DropzoneModule, FileSizeModule } from '@valtimo/components';
 import * as i2 from '@valtimo/config';
 import { BaseApiService, UploadProvider, ROLE_USER, CASE_MANAGEMENT_TAB_TOKEN, ZGW_OBJECT_TYPE_COMPONENT_TOKEN, ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, ZGW_CASE_CONFIGURATION_EXTENSIONS_TOKEN } from '@valtimo/config';
@@ -22,12 +22,12 @@ import { tap as tap$1, map as map$1, filter as filter$1, switchMap as switchMap$
 import flatpickr from 'flatpickr';
 import * as i1$3 from '@valtimo/document';
 import { DocumentModule } from '@valtimo/document';
-import * as i5$2 from 'keycloak-angular';
+import moment from 'moment';
+import * as i5 from 'keycloak-angular';
 import * as i2$1 from '@valtimo/resource';
 import { ResourceModule } from '@valtimo/resource';
-import * as i5$3 from '@valtimo/security';
+import * as i5$1 from '@valtimo/security';
 import { AuthGuardService } from '@valtimo/security';
-import moment from 'moment';
 import * as i4$1 from 'ngx-toastr';
 import { FormioModule } from '@formio/angular';
 
@@ -50,6 +50,7 @@ var ZgwTabEnum;
 (function (ZgwTabEnum) {
     ZgwTabEnum["DOCUMENTEN_API_COLUMNS"] = "documentenApiColumns";
     ZgwTabEnum["DOCUMENTEN_API_TAGS"] = "documentenApiTags";
+    ZgwTabEnum["DOCUMENTEN_API_UPLOAD_FIELDS"] = "documentenApiUploadFields";
 })(ZgwTabEnum || (ZgwTabEnum = {}));
 
 /*
@@ -134,6 +135,15 @@ class DocumentenApiDocumentService extends BaseApiService {
     deleteDocument(file) {
         return this.httpClient.delete(this.getApiUrl(`/v1/documenten-api/${file.pluginConfigurationId}/files/${file.fileId}`));
     }
+    getPrefilledUploadFields(documentId) {
+        return this.httpClient.get(this.getApiUrl(`/v1/document/${documentId}/zgw-document/upload-field`));
+    }
+    getUploadFields(caseDefinitionName) {
+        return this.httpClient.get(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document/upload-field`));
+    }
+    updateUploadField(caseDefinitionName, uploadField) {
+        return this.httpClient.put(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document/upload-field`), uploadField);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiDocumentService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiDocumentService, providedIn: 'root' }); }
 }
@@ -412,8 +422,8 @@ class DocumentenApiColumnModalComponent {
             this._notificationMessage$.next(this.showRadioButtons ? 'zgw.columns.defaultWarning' : 'zgw.columns.notSortable');
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiColumnModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i5.TranslateService }, { token: DocumentenApiColumnService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiColumnModalComponent, isStandalone: true, selector: "valtimo-documenten-api-column-modal", inputs: { definitionName: "definitionName", prefillColumn: "prefillColumn", type: "type", availableColumns: "availableColumns", configuredColumns: "configuredColumns" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal valtimoCdsModal [open]=\"type !== 'closed'\" size=\"sm\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ (type === 'add' ? 'zgw.columns.add' : 'zgw.columns.edit') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form\n    class=\"valtimo-documenten-api-column-modal__content\"\n    cdsModalContent\n    [formGroup]=\"formGroup\"\n  >\n    <cds-dropdown\n      formControlName=\"column\"\n      [label]=\"'zgw.columns.column' | translate\"\n      [dropUp]=\"false\"\n    >\n      <cds-dropdown-list\n        [items]=\"!prefillColumn ? (availableColumns$ | async) : prefillColumn\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-radio-group *ngIf=\"showRadioButtons\" legend=\"Default sort\" formControlName=\"defaultSort\">\n      <cds-radio value=\"noDefault\"> {{ 'interface.sorting.noDefault' | translate }} </cds-radio>\n\n      <cds-radio value=\"DESC\"> {{ 'interface.sorting.descending' | translate }} </cds-radio>\n\n      <cds-radio value=\"ASC\"> {{ 'interface.sorting.ascending' | translate }} </cds-radio>\n    </cds-radio-group>\n\n    <cds-inline-notification [notificationObj]=\"notificationObj$ | async\"></cds-inline-notification>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"updateColumn()\">\n      {{ (type === 'add' ? 'interface.add' : 'interface.save') | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-documenten-api-column-modal__content{display:flex;flex-direction:column;gap:16px}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i5$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i5$1.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i5$1.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i5$1.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiColumnModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i3.TranslateService }, { token: DocumentenApiColumnService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiColumnModalComponent, isStandalone: true, selector: "valtimo-documenten-api-column-modal", inputs: { definitionName: "definitionName", prefillColumn: "prefillColumn", type: "type", availableColumns: "availableColumns", configuredColumns: "configuredColumns" }, outputs: { closeModal: "closeModal" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal valtimoCdsModal [open]=\"type !== 'closed'\" size=\"sm\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ (type === 'add' ? 'zgw.columns.add' : 'zgw.columns.edit') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form\n    class=\"valtimo-documenten-api-column-modal__content\"\n    cdsModalContent\n    [formGroup]=\"formGroup\"\n  >\n    <cds-dropdown\n      formControlName=\"column\"\n      [label]=\"'zgw.columns.column' | translate\"\n      [dropUp]=\"false\"\n    >\n      <cds-dropdown-list\n        [items]=\"!prefillColumn ? (availableColumns$ | async) : prefillColumn\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-radio-group *ngIf=\"showRadioButtons\" legend=\"Default sort\" formControlName=\"defaultSort\">\n      <cds-radio value=\"noDefault\"> {{ 'interface.sorting.noDefault' | translate }} </cds-radio>\n\n      <cds-radio value=\"DESC\"> {{ 'interface.sorting.descending' | translate }} </cds-radio>\n\n      <cds-radio value=\"ASC\"> {{ 'interface.sorting.ascending' | translate }} </cds-radio>\n    </cds-radio-group>\n\n    <cds-inline-notification [notificationObj]=\"notificationObj$ | async\"></cds-inline-notification>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"updateColumn()\">\n      {{ (type === 'add' ? 'interface.add' : 'interface.save') | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-documenten-api-column-modal__content{display:flex;flex-direction:column;gap:16px}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i6.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i6.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i6.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i6.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i6.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i6.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i6.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i6.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i6.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiColumnModalComponent, decorators: [{
             type: Component,
@@ -428,7 +438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         RadioModule,
                         NotificationModule,
                     ], template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal valtimoCdsModal [open]=\"type !== 'closed'\" size=\"sm\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ (type === 'add' ? 'zgw.columns.add' : 'zgw.columns.edit') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form\n    class=\"valtimo-documenten-api-column-modal__content\"\n    cdsModalContent\n    [formGroup]=\"formGroup\"\n  >\n    <cds-dropdown\n      formControlName=\"column\"\n      [label]=\"'zgw.columns.column' | translate\"\n      [dropUp]=\"false\"\n    >\n      <cds-dropdown-list\n        [items]=\"!prefillColumn ? (availableColumns$ | async) : prefillColumn\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-radio-group *ngIf=\"showRadioButtons\" legend=\"Default sort\" formControlName=\"defaultSort\">\n      <cds-radio value=\"noDefault\"> {{ 'interface.sorting.noDefault' | translate }} </cds-radio>\n\n      <cds-radio value=\"DESC\"> {{ 'interface.sorting.descending' | translate }} </cds-radio>\n\n      <cds-radio value=\"ASC\"> {{ 'interface.sorting.ascending' | translate }} </cds-radio>\n    </cds-radio-group>\n\n    <cds-inline-notification [notificationObj]=\"notificationObj$ | async\"></cds-inline-notification>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"updateColumn()\">\n      {{ (type === 'add' ? 'interface.add' : 'interface.save') | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-documenten-api-column-modal__content{display:flex;flex-direction:column;gap:16px}\n/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i5.TranslateService }, { type: DocumentenApiColumnService }], propDecorators: { definitionName: [{
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i3.TranslateService }, { type: DocumentenApiColumnService }], propDecorators: { definitionName: [{
                 type: Input
             }], prefillColumn: [{
                 type: Input
@@ -548,7 +558,7 @@ class DocumentenApiColumnsComponent {
         this._reload$.next(noAnimation ? 'noAnimation' : null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiColumnsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: DocumentenApiColumnService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiColumnsComponent, isStandalone: true, selector: "valtimo-documenten-api-columns", viewQueries: [{ propertyName: "columnKeyTemplate", first: true, predicate: ["columnKeyTemplate"], descendants: true }, { propertyName: "defaultSortTemplate", first: true, predicate: ["defaultSortTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    columnModalType: columnModalType$ | async,\n    columnToUpdate: columnToUpdate$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    configuredColumns: configuredColumns$ | async,\n    configurableColumns: configurableColumns$ | async,\n    loading: loading$ | async,\n    prefillColumn: prefillColumn$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"ACTION_ITEMS\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.configuredColumns\"\n    [loading]=\"obs.loading || !fields\"\n    [movingRowsEnabled]=\"true\"\n    (itemsReordered)=\"onItemsReordered(obs.documentDefinitionName, $event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"addButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addButton\"\n      [description]=\"'zgw.documents.noColumns.description' | translate\"\n      [title]=\"'zgw.documents.noColumns.title' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <valtimo-documenten-api-column-modal\n    [availableColumns]=\"obs.configurableColumns\"\n    [configuredColumns]=\"obs.configuredColumns\"\n    [definitionName]=\"obs.documentDefinitionName\"\n    [prefillColumn]=\"obs.prefillColumn\"\n    [type]=\"obs.columnModalType\"\n    (closeModal)=\"onCloseModal($event)\"\n  ></valtimo-documenten-api-column-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"zgw.columns.deleteText\"\n    [outputOnConfirm]=\"columnToUpdate$ | async\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"interface.delete\"\n    (confirmEvent)=\"confirmDeleteStatus($event, obs.documentDefinitionName)\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n\n<ng-template #addButton>\n  <button cdsButton=\"primary\" [disabled]=\"loading$ | async\" (click)=\"openAddModal()\">\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'zgw.columns.add' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #columnKeyTemplate let-data=\"data\">\n  {{ 'zgw.documentColumns.' + data.item.key | translate }}\n</ng-template>\n\n<ng-template #defaultSortTemplate let-data=\"data\">\n  {{\n    data.item.defaultSort === null\n      ? '-'\n      : ('interface.sorting.' + (data.item.defaultSort === 'ASC' ? 'ascending' : 'descending')\n        | translate)\n  }}\n</ng-template>\n", styles: ["::ng-deep .cds-tag--no-margin{margin:0}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: DocumentenApiColumnModalComponent, selector: "valtimo-documenten-api-column-modal", inputs: ["definitionName", "prefillColumn", "type", "availableColumns", "configuredColumns"], outputs: ["closeModal"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i3.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i3.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i5$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiColumnsComponent, isStandalone: true, selector: "valtimo-documenten-api-columns", viewQueries: [{ propertyName: "columnKeyTemplate", first: true, predicate: ["columnKeyTemplate"], descendants: true }, { propertyName: "defaultSortTemplate", first: true, predicate: ["defaultSortTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    columnModalType: columnModalType$ | async,\n    columnToUpdate: columnToUpdate$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    configuredColumns: configuredColumns$ | async,\n    configurableColumns: configurableColumns$ | async,\n    loading: loading$ | async,\n    prefillColumn: prefillColumn$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [actionItems]=\"ACTION_ITEMS\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.configuredColumns\"\n    [loading]=\"obs.loading || !fields\"\n    [movingRowsEnabled]=\"true\"\n    (itemsReordered)=\"onItemsReordered(obs.documentDefinitionName, $event)\"\n  >\n    <ng-container carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"addButton\"></ng-container>\n    </ng-container>\n\n    <valtimo-no-results\n      [action]=\"addButton\"\n      [description]=\"'zgw.documents.noColumns.description' | translate\"\n      [title]=\"'zgw.documents.noColumns.title' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <valtimo-documenten-api-column-modal\n    [availableColumns]=\"obs.configurableColumns\"\n    [configuredColumns]=\"obs.configuredColumns\"\n    [definitionName]=\"obs.documentDefinitionName\"\n    [prefillColumn]=\"obs.prefillColumn\"\n    [type]=\"obs.columnModalType\"\n    (closeModal)=\"onCloseModal($event)\"\n  ></valtimo-documenten-api-column-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"zgw.columns.deleteText\"\n    [outputOnConfirm]=\"columnToUpdate$ | async\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"interface.delete\"\n    (confirmEvent)=\"confirmDeleteStatus($event, obs.documentDefinitionName)\"\n  ></valtimo-confirmation-modal>\n</ng-container>\n\n<ng-template #addButton>\n  <button cdsButton=\"primary\" [disabled]=\"loading$ | async\" (click)=\"openAddModal()\">\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'zgw.columns.add' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #columnKeyTemplate let-data=\"data\">\n  {{ 'zgw.documentColumns.' + data.item.key | translate }}\n</ng-template>\n\n<ng-template #defaultSortTemplate let-data=\"data\">\n  {{\n    data.item.defaultSort === null\n      ? '-'\n      : ('interface.sorting.' + (data.item.defaultSort === 'ASC' ? 'ascending' : 'descending')\n        | translate)\n  }}\n</ng-template>\n", styles: ["::ng-deep .cds-tag--no-margin{margin:0}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "component", type: DocumentenApiColumnModalComponent, selector: "valtimo-documenten-api-column-modal", inputs: ["definitionName", "prefillColumn", "type", "availableColumns", "configuredColumns"], outputs: ["closeModal"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i3$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i3$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiColumnsComponent, decorators: [{
             type: Component,
@@ -585,6 +595,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const CONFIDENTIALITY_LEVELS = [
+    'openbaar',
+    'beperkt_openbaar',
+    'intern',
+    'zaakvertrouwelijk',
+    'vertrouwelijk',
+    'confidentieel',
+    'geheim',
+    'zeer_geheim',
+];
+const STATUS_ITEMS = [
+    'in_bewerking',
+    'ter_vaststelling',
+    'definitief',
+    'gearchiveerd',
+];
+const LANGUAGE_ITEMS = ['nld', 'eng', 'deu'];
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -858,8 +885,8 @@ class DocumentenApiFilterComponent {
             selected: true,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiFilterComponent, deps: [{ token: i1$3.DocumentService }, { token: i1$1.FormBuilder }, { token: i5$1.IconService }, { token: i1$2.ActivatedRoute }, { token: i5.TranslateService }, { token: DocumentenApiTagService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiFilterComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-documenten-api-filter", outputs: { filterEvent: "filterEvent" }, viewQueries: [{ propertyName: "creationDateFromPicker", first: true, predicate: ["creationDateFrom"], descendants: true }, { propertyName: "creationDateToPicker", first: true, predicate: ["creationDateTo"], descendants: true }], ngImport: i0, template: "<div class=\"valtimo-documenten-api-filter\" (click)=\"$event.stopImmediatePropagation()\">\n  <form\n    *ngIf=\"{\n      confidentialityLevels: confidentialityLevels$ | async,\n      informationObjectTypes: informationObjectTypes$ | async,\n      tags: tags$ | async,\n    } as obs\"\n    class=\"valtimo-documenten-api-filter__form\"\n    [formGroup]=\"formGroup\"\n  >\n    <cds-text-label>\n      {{ 'zgw.documentColumns.titel' | translate }}\n\n      <input cdsText formControlName=\"titel\" />\n    </cds-text-label>\n\n    <cds-dropdown\n      [disabled]=\"!obs.informationObjectTypes?.length\"\n      [dropUp]=\"false\"\n      [label]=\"'zgw.documentColumns.informatieobjecttype' | translate\"\n      formControlName=\"informatieObjectType\"\n    >\n      <cds-dropdown-list [items]=\"obs.informationObjectTypes\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div class=\"valtimo-documenten-api-filter__dates\">\n      <cds-date-picker\n        #creationDateFrom\n        [label]=\"'interface.labels.dateCreationFrom' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('createdFrom', $event)\"\n      ></cds-date-picker>\n\n      <cds-date-picker\n        #creationDateTo\n        [label]=\"'interface.labels.dateCreationTo' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('createdTo', $event)\"\n      ></cds-date-picker>\n    </div>\n\n    <cds-text-label>\n      {{ 'zgw.documentColumns.auteur' | translate }}\n\n      <input cdsText formControlName=\"auteur\" />\n    </cds-text-label>\n\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'zgw.documentColumns.vertrouwelijkheidaanduiding' | translate\"\n      formControlName=\"vertrouwelijkHeidaanduiding\"\n    >\n      <cds-dropdown-list [items]=\"obs.confidentialityLevels\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'zgw.documentColumns.trefwoorden' | translate\"\n      formControlName=\"trefwoorden\"\n      type=\"multi\"\n    >\n      <cds-dropdown-list [items]=\"obs.tags\"></cds-dropdown-list>\n    </cds-dropdown>\n  </form>\n\n  <footer class=\"valtimo-documenten-api-filter__footer\">\n    <button cdsButton=\"tertiary\" (click)=\"resetFilter()\">\n      {{ 'Reset filter' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </footer>\n</div>\n", styles: [":host .valtimo-documenten-api-filter{display:flex;flex-direction:column;max-width:880px}:host .valtimo-documenten-api-filter__form{display:grid;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;gap:16px}:host .valtimo-documenten-api-filter__dates{display:flex;gap:16px}:host .valtimo-documenten-api-filter__footer{display:flex;padding:0 16px 16px}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important;padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DatePickerInputModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i5$1.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i5$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i5$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i5$1.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiFilterComponent, deps: [{ token: i1$3.DocumentService }, { token: i1$1.FormBuilder }, { token: i6.IconService }, { token: i1$2.ActivatedRoute }, { token: i3.TranslateService }, { token: DocumentenApiTagService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiFilterComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-documenten-api-filter", outputs: { filterEvent: "filterEvent" }, viewQueries: [{ propertyName: "creationDateFromPicker", first: true, predicate: ["creationDateFrom"], descendants: true }, { propertyName: "creationDateToPicker", first: true, predicate: ["creationDateTo"], descendants: true }], ngImport: i0, template: "<div class=\"valtimo-documenten-api-filter\" (click)=\"$event.stopImmediatePropagation()\">\n  <form\n    *ngIf=\"{\n      confidentialityLevels: confidentialityLevels$ | async,\n      informationObjectTypes: informationObjectTypes$ | async,\n      tags: tags$ | async,\n    } as obs\"\n    class=\"valtimo-documenten-api-filter__form\"\n    [formGroup]=\"formGroup\"\n  >\n    <cds-text-label>\n      {{ 'zgw.documentColumns.titel' | translate }}\n\n      <input cdsText formControlName=\"titel\" />\n    </cds-text-label>\n\n    <cds-dropdown\n      [disabled]=\"!obs.informationObjectTypes?.length\"\n      [dropUp]=\"false\"\n      [label]=\"'zgw.documentColumns.informatieobjecttype' | translate\"\n      formControlName=\"informatieObjectType\"\n    >\n      <cds-dropdown-list [items]=\"obs.informationObjectTypes\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div class=\"valtimo-documenten-api-filter__dates\">\n      <cds-date-picker\n        #creationDateFrom\n        [label]=\"'interface.labels.dateCreationFrom' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('createdFrom', $event)\"\n      ></cds-date-picker>\n\n      <cds-date-picker\n        #creationDateTo\n        [label]=\"'interface.labels.dateCreationTo' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('createdTo', $event)\"\n      ></cds-date-picker>\n    </div>\n\n    <cds-text-label>\n      {{ 'zgw.documentColumns.auteur' | translate }}\n\n      <input cdsText formControlName=\"auteur\" />\n    </cds-text-label>\n\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'zgw.documentColumns.vertrouwelijkheidaanduiding' | translate\"\n      formControlName=\"vertrouwelijkHeidaanduiding\"\n    >\n      <cds-dropdown-list [items]=\"obs.confidentialityLevels\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'zgw.documentColumns.trefwoorden' | translate\"\n      formControlName=\"trefwoorden\"\n      type=\"multi\"\n    >\n      <cds-dropdown-list [items]=\"obs.tags\"></cds-dropdown-list>\n    </cds-dropdown>\n  </form>\n\n  <footer class=\"valtimo-documenten-api-filter__footer\">\n    <button cdsButton=\"tertiary\" (click)=\"resetFilter()\">\n      {{ 'Reset filter' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </footer>\n</div>\n", styles: [":host .valtimo-documenten-api-filter{display:flex;flex-direction:column;max-width:880px}:host .valtimo-documenten-api-filter__form{display:grid;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;gap:16px}:host .valtimo-documenten-api-filter__dates{display:flex;gap:16px}:host .valtimo-documenten-api-filter__footer{display:flex;padding:0 16px 16px}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important;padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DatePickerInputModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i6.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i6.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i6.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i6.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiFilterComponent, decorators: [{
             type: Component,
@@ -874,7 +901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TranslateModule,
                         ReactiveFormsModule,
                     ], template: "<div class=\"valtimo-documenten-api-filter\" (click)=\"$event.stopImmediatePropagation()\">\n  <form\n    *ngIf=\"{\n      confidentialityLevels: confidentialityLevels$ | async,\n      informationObjectTypes: informationObjectTypes$ | async,\n      tags: tags$ | async,\n    } as obs\"\n    class=\"valtimo-documenten-api-filter__form\"\n    [formGroup]=\"formGroup\"\n  >\n    <cds-text-label>\n      {{ 'zgw.documentColumns.titel' | translate }}\n\n      <input cdsText formControlName=\"titel\" />\n    </cds-text-label>\n\n    <cds-dropdown\n      [disabled]=\"!obs.informationObjectTypes?.length\"\n      [dropUp]=\"false\"\n      [label]=\"'zgw.documentColumns.informatieobjecttype' | translate\"\n      formControlName=\"informatieObjectType\"\n    >\n      <cds-dropdown-list [items]=\"obs.informationObjectTypes\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <div class=\"valtimo-documenten-api-filter__dates\">\n      <cds-date-picker\n        #creationDateFrom\n        [label]=\"'interface.labels.dateCreationFrom' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('createdFrom', $event)\"\n      ></cds-date-picker>\n\n      <cds-date-picker\n        #creationDateTo\n        [label]=\"'interface.labels.dateCreationTo' | translate\"\n        placeholder=\"DD-MM-YYYY\"\n        [dateFormat]=\"'d-m-Y'\"\n        (valueChange)=\"onDateSelected('createdTo', $event)\"\n      ></cds-date-picker>\n    </div>\n\n    <cds-text-label>\n      {{ 'zgw.documentColumns.auteur' | translate }}\n\n      <input cdsText formControlName=\"auteur\" />\n    </cds-text-label>\n\n    <cds-dropdown\n      [dropUp]=\"false\"\n      [label]=\"'zgw.documentColumns.vertrouwelijkheidaanduiding' | translate\"\n      formControlName=\"vertrouwelijkHeidaanduiding\"\n    >\n      <cds-dropdown-list [items]=\"obs.confidentialityLevels\"></cds-dropdown-list>\n    </cds-dropdown>\n\n    <cds-dropdown\n      [label]=\"'zgw.documentColumns.trefwoorden' | translate\"\n      formControlName=\"trefwoorden\"\n      type=\"multi\"\n    >\n      <cds-dropdown-list [items]=\"obs.tags\"></cds-dropdown-list>\n    </cds-dropdown>\n  </form>\n\n  <footer class=\"valtimo-documenten-api-filter__footer\">\n    <button cdsButton=\"tertiary\" (click)=\"resetFilter()\">\n      {{ 'Reset filter' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </footer>\n</div>\n", styles: [":host .valtimo-documenten-api-filter{display:flex;flex-direction:column;max-width:880px}:host .valtimo-documenten-api-filter__form{display:grid;grid-template-columns:repeat(3,1fr);align-items:flex-end;padding:16px;gap:16px}:host .valtimo-documenten-api-filter__dates{display:flex;gap:16px}:host .valtimo-documenten-api-filter__footer{display:flex;padding:0 16px 16px}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important;padding:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.DocumentService }, { type: i1$1.FormBuilder }, { type: i5$1.IconService }, { type: i1$2.ActivatedRoute }, { type: i5.TranslateService }, { type: DocumentenApiTagService }], propDecorators: { creationDateFromPicker: [{
+        }], ctorParameters: () => [{ type: i1$3.DocumentService }, { type: i1$1.FormBuilder }, { type: i6.IconService }, { type: i1$2.ActivatedRoute }, { type: i3.TranslateService }, { type: DocumentenApiTagService }], propDecorators: { creationDateFromPicker: [{
                 type: ViewChild,
                 args: ['creationDateFrom']
             }], creationDateToPicker: [{
@@ -964,12 +991,12 @@ class DocumentenApiMetadataModalComponent {
             this.statusFormControl.enable();
         }
     }
-    set disableTrefwoorden(value) {
+    set disableCreationDate(value) {
         if (value) {
-            this.tagFormControl.disable();
+            this.creatiedatum.disable();
         }
         else {
-            this.tagFormControl.enable();
+            this.creatiedatum.enable();
         }
     }
     set open(value) {
@@ -1008,6 +1035,9 @@ class DocumentenApiMetadataModalComponent {
     get tagFormControl() {
         return this.documentenApiMetadataForm.get('trefwoorden');
     }
+    get creatiedatum() {
+        return this.documentenApiMetadataForm.get('creatiedatum');
+    }
     get titel() {
         return this.documentenApiMetadataForm.get('titel');
     }
@@ -1029,20 +1059,22 @@ class DocumentenApiMetadataModalComponent {
         this.modalService = modalService;
         this.translateService = translateService;
         this.valtimoModalService = valtimoModalService;
-        this.documentTitle = '';
-        this.open$ = new BehaviorSubject(false);
+        this.hideFields = [];
+        this.defaultValues = {};
         this.supportsTrefwoorden = false;
+        this.open$ = new BehaviorSubject(false);
         this.metadata = new EventEmitter();
         this.modalClose = new EventEmitter();
+        this.filenameExtension = '';
         this.documentenApiMetadataForm = this.fb.group({
-            bestandsnaam: this.fb.control('', Validators.required),
+            bestandsnaam: this.fb.control(''),
             titel: this.fb.control('', Validators.required),
             auteur: this.fb.control('', Validators.required),
-            beschrijving: this.fb.control('', Validators.required),
+            beschrijving: this.fb.control(''),
             taal: this.fb.control('', Validators.required),
             informatieobjecttype: this.fb.control('', Validators.required),
-            status: this.fb.control('', Validators.required),
-            vertrouwelijkheidaanduiding: this.fb.control('', Validators.required),
+            status: this.fb.control(''),
+            vertrouwelijkheidaanduiding: this.fb.control(''),
             creatiedatum: this.fb.control('', Validators.required),
             ontvangstdatum: this.fb.control(''),
             verzenddatum: this.fb.control(''),
@@ -1107,9 +1139,8 @@ class DocumentenApiMetadataModalComponent {
             content: this.translateService.instant(`document.${status}`),
             selected: currentStatus === status,
         }))));
-        this.documentDefinitionName$ = from(this.route.params.pipe(map(params => params?.documentDefinitionName)));
         this.tagItems$ = combineLatest([
-            this.documentDefinitionName$,
+            this.valtimoModalService.documentDefinitionName$,
             this.tagFormControl.valueChanges.pipe(startWith(this.tagFormControl.value)),
         ]).pipe(filter(([documentDefinitionName]) => !!documentDefinitionName), switchMap(([documentDefinitionName, tagFormControlValue]) => combineLatest([
             this.documentenApiTagService.getTags(documentDefinitionName),
@@ -1153,12 +1184,12 @@ class DocumentenApiMetadataModalComponent {
     ngOnInit() {
         this.openFileSubscription();
         this.openDisabledSubscription();
-    }
-    ngOnChanges() {
-        this.openFileSubscription();
+        this.openFilenameSubscription();
+        this.openDocumentDefinitionSubscription();
     }
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
+        this._fileSubscription?.unsubscribe();
         this.isDefinitiveStatus$.next(false);
     }
     languageSelected(event) {
@@ -1172,16 +1203,16 @@ class DocumentenApiMetadataModalComponent {
         this.tagFormControl.patchValue(event.filter(tag => tag.selected).map(tag => tag.id));
     }
     confidentialityLevelSelected(event) {
-        if (event.item.id) {
+        if (event.id) {
             this.documentenApiMetadataForm.patchValue({
-                vertrouwelijkheidaanduiding: event.item.id,
+                vertrouwelijkheidaanduiding: event.id,
             });
         }
     }
     statusSelected(event) {
-        if (event.item.id) {
+        if (event.id) {
             this.documentenApiMetadataForm.patchValue({
-                status: event.item.id,
+                status: event.id,
             });
         }
     }
@@ -1195,28 +1226,24 @@ class DocumentenApiMetadataModalComponent {
     prefillForm(file) {
         this.prefillFilenameAndAuthor();
         if (file) {
-            const { bestandsnaam, titel, auteur, beschrijving, taal, informatieobjecttype, status, vertrouwelijkheidaanduiding, creatiedatum, ontvangstdatum, verzenddatum, trefwoorden, } = file;
+            const { beschrijving, taal, informatieobjecttype, status, vertrouwelijkheidaanduiding, ontvangstdatum, verzenddatum, trefwoorden, } = file;
             if (verzenddatum)
                 this.additionalDocumentDate$.next('sent');
             else if (ontvangstdatum)
                 this.additionalDocumentDate$.next('received');
             else
                 this.additionalDocumentDate$.next('neither');
-            const prefillStatus = this.status || status;
+            const prefillStatus = this.defaultValues.status || status;
             const validPrefillStatus = this.STATUSES.includes(prefillStatus) ? prefillStatus : '';
             this.documentenApiMetadataForm.patchValue({
-                bestandsnaam: this.filename || bestandsnaam,
-                titel: this.documentTitle || titel,
-                auteur: this.author || auteur,
-                beschrijving: this.description || beschrijving,
-                taal: this.language || taal,
-                informatieobjecttype: this.documentType || informatieobjecttype,
+                beschrijving: beschrijving || this.defaultValues.beschrijving,
+                taal: taal || this.defaultValues.taal,
+                informatieobjecttype: informatieobjecttype || this.defaultValues.informatieobjecttype,
                 status: validPrefillStatus,
-                vertrouwelijkheidaanduiding: this.confidentialityLevel || vertrouwelijkheidaanduiding,
-                creatiedatum,
+                vertrouwelijkheidaanduiding: vertrouwelijkheidaanduiding || this.defaultValues.vertrouwelijkheidaanduiding,
                 ontvangstdatum,
                 verzenddatum,
-                trefwoorden,
+                trefwoorden: trefwoorden || this.defaultValues.trefwoorden,
             });
         }
     }
@@ -1243,22 +1270,43 @@ class DocumentenApiMetadataModalComponent {
     prefillFilenameAndAuthor() {
         this._subscriptions.add(combineLatest([this.file$, this.userEmail$])
             .pipe(tap$1(([file, userEmail]) => {
+            const filename = file?.bestandsnaam || this.defaultValues.bestandsnaam || file?.name;
+            this.filenameExtension = filename?.split('.')?.pop() || '';
+            if (this.filenameExtension.length === filename?.length) {
+                this.filenameExtension = '';
+            }
             this.documentenApiMetadataForm.patchValue({
-                bestandsnaam: this.filename || file?.name || file?.bestandsnaam,
-                auteur: this.author || userEmail,
+                bestandsnaam: filename,
+                auteur: file?.auteur || this.defaultValues.auteur || userEmail,
+                creatiedatum: file?.creatiedatum || new Date(Date.now()),
+                titel: file?.titel ||
+                    this.defaultValues.titel ||
+                    this.filenameToTitle(file?.name || this.defaultValues.bestandsnaam),
             });
+            if (this.areAllFieldsHidden()) {
+                this.save();
+            }
         }))
             .subscribe());
     }
+    filenameToTitle(filename) {
+        if (!filename) {
+            return null;
+        }
+        filename = filename.replace(/\.[^/.]+$/, '').replace(/[^a-zA-Z0-9]+/g, ' ');
+        return filename.charAt(0).toUpperCase() + filename.slice(1);
+    }
     formatDate(controlName) {
         const control = this.documentenApiMetadataForm.controls[controlName];
         if (control.value) {
-            const date = new Date(control.value);
             this.documentenApiMetadataForm.patchValue({
-                [controlName]: `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`,
+                [controlName]: this.toFormattedDate(control.value),
             });
         }
     }
+    toFormattedDate(date) {
+        return moment(new Date(date)).format('YYYY-MM-DD');
+    }
     openFileSubscription() {
         this._fileSubscription?.unsubscribe();
         if (this.file$) {
@@ -1280,11 +1328,43 @@ class DocumentenApiMetadataModalComponent {
             }
         }));
     }
+    openFilenameSubscription() {
+        this._subscriptions.add(this.bestandsnaam.valueChanges.subscribe(bestandsnaam => {
+            if (bestandsnaam && this.filenameExtension) {
+                let correctBestandsnaam = bestandsnaam.replace(/\.[^/.]+$/, '') + '.' + this.filenameExtension;
+                if (correctBestandsnaam != bestandsnaam) {
+                    this.documentenApiMetadataForm.patchValue({
+                        bestandsnaam: correctBestandsnaam,
+                    });
+                }
+            }
+        }));
+    }
+    openDocumentDefinitionSubscription() {
+        this._subscriptions.add(this.route?.params
+            .pipe(map(params => params?.documentDefinitionName), filter(documentDefinitionName => documentDefinitionName))
+            .subscribe(documentDefinitionName => {
+            this.valtimoModalService.setDocumentDefinitionName(documentDefinitionName);
+        }));
+    }
     setAdditionalDate(value) {
         this.additionalDocumentDate$.next(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiMetadataModalComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$3.DocumentService }, { token: DocumentenApiTagService }, { token: i1$1.FormBuilder }, { token: i5$2.KeycloakService }, { token: i3.ModalService }, { token: i5.TranslateService }, { token: i3.ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DocumentenApiMetadataModalComponent, isStandalone: true, selector: "valtimo-documenten-api-metadata-modal", inputs: { disabled$: "disabled$", file$: "file$", author: "author", confidentialityLevel: "confidentialityLevel", description: "description", disableAuthor: "disableAuthor", disableConfidentialityLevel: "disableConfidentialityLevel", disableDescription: "disableDescription", disableDocumentTitle: "disableDocumentTitle", disableDocumentType: "disableDocumentType", disableFilename: "disableFilename", disableLanguage: "disableLanguage", disableStatus: "disableStatus", disableTrefwoorden: "disableTrefwoorden", documentTitle: "documentTitle", documentType: "documentType", filename: "filename", isEditMode: "isEditMode", language: "language", open: "open", status: "status", supportsTrefwoorden: "supportsTrefwoorden" }, outputs: { metadata: "metadata", modalClose: "modalClose" }, viewQueries: [{ propertyName: "metadataModal", first: true, predicate: ["metadataModal"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  #metadataModal\n  *ngIf=\"{\n    file: file$ | async,\n    disabled: disabled$ | async,\n    isDefinitiveStatus: isDefinitiveStatus$ | async,\n    languageItems: languageItems$ | async,\n    statusItems: statusItems$ | async,\n    tagItems: tagItems$ | async,\n    userEmail: userEmail$ | async,\n    open: open$ | async,\n    additionalDate: additionalDocumentDate$ | async,\n  } as obs\"\n  [maxWidthPx]=\"1280\"\n  (closeEvent)=\"closeModal()\"\n>\n  <div role=\"header\">\n    @if (isEditMode) {\n      <h3 cdsModalHeaderHeading>\n        {{ 'document.editMetadata' | translate }}\n      </h3>\n    } @else {\n      <h3 cdsModalHeaderHeading>\n        {{ 'document.fillInMetadata' | translate }}\n      </h3>\n    }\n  </div>\n\n  <div role=\"content\">\n    @if (obs.open) {\n      <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n    }\n  </div>\n\n  <div role=\"footer\" class=\"metadata-modal-footer\">\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n      {{ 'document.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      type=\"submit\"\n      [disabled]=\"obs.disabled || !documentenApiMetadataForm.valid || obs.isDefinitiveStatus\"\n      (click)=\"save()\"\n    >\n      {{ 'document.save' | translate }}\n    </button>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <form [formGroup]=\"documentenApiMetadataForm\">\n    <div class=\"documenten-metadata-form-columns-container\">\n      <div class=\"documenten-metadata-form-column\">\n        <cds-text-label class=\"documenten-metada-form-input\">\n          {{ 'document.filename' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.filenameTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n          <input\n            [value]=\"filename\"\n            [placeholder]=\"'document.filenamePlaceholder' | translate\"\n            [required]=\"true\"\n            cdsText\n            type=\"text\"\n            id=\"bestandsnaam\"\n            formControlName=\"bestandsnaam\"\n          />\n        </cds-text-label>\n        <cds-text-label class=\"documenten-metada-form-input\">\n          {{ 'document.author' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.authorTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n          <input\n            [value]=\"author\"\n            [placeholder]=\"'document.authorPlaceholder' | translate\"\n            [required]=\"true\"\n            cdsText\n            id=\"auteur\"\n            formControlName=\"auteur\"\n          />\n        </cds-text-label>\n        <cds-text-label>\n          {{ 'document.language' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.languageTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-text-label>\n        <div class=\"documenten-metada-form-input\">\n          <cds-dropdown\n            *ngIf=\"obs.languageItems\"\n            [disabled]=\"obs.disabled || (languageDisabled$ | async)\"\n            [appendInline]=\"true\"\n            [placeholder]=\"'document.languagePlaceholder' | translate\"\n            id=\"language\"\n            (selected)=\"languageSelected($event)\"\n          >\n            <cds-dropdown-list [items]=\"obs.languageItems || []\"></cds-dropdown-list>\n          </cds-dropdown>\n        </div>\n        <cds-label>\n          {{ 'document.confidentialityLevel' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.confidentialityLevelTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-label>\n        <div class=\"documenten-metada-form-input\">\n          <cds-dropdown\n            [placeholder]=\"'document.confidentialityPlaceholder' | translate\"\n            id=\"vertrouwelijkheidaanduiding\"\n            [appendInline]=\"true\"\n            [disabled]=\"obs.disabled || (confidentialityLevelDisabled$ | async)\"\n            (selected)=\"confidentialityLevelSelected($event)\"\n          >\n            <cds-dropdown-list [items]=\"confidentialityLevelItems$ | async\"></cds-dropdown-list>\n          </cds-dropdown>\n        </div>\n        <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n          <cds-label>\n            {{ 'document.informatieobjecttype' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.informatieobjecttypeTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-dropdown\n              [placeholder]=\"'document.informatieobjecttypePlaceholder' | translate\"\n              [disabled]=\"obs.disabled || (informatieobjecttypeDisabled$ | async)\"\n              id=\"informatieobjecttype\"\n              [appendInline]=\"true\"\n              (selected)=\"informatieobjecttypeSelected($event)\"\n            >\n              <cds-dropdown-list [items]=\"obs.documentTypeItems || []\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        </ng-container>\n        <cds-text-label name=\"'additionalDate'\">\n          {{ 'document.additionalDate' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.additionalDateTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-text-label>\n        <cds-radio-group [orientation]=\"'horizontal'\" class=\"documenten-metada-form-input\">\n          <cds-radio\n            *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n            [value]=\"option.value\"\n            [checked]=\"obs.additionalDate === option.value\"\n            [required]=\"true\"\n            (click)=\"setAdditionalDate(option.value)\"\n            name=\"radio-inline\"\n          >\n            {{ option.translationKey | translate }}\n          </cds-radio>\n        </cds-radio-group>\n        @if (supportsTrefwoorden) {\n          <cds-text-label>\n            {{ 'document.tags' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.tagsTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-combo-box\n              [type]=\"'multi'\"\n              [placeholder]=\"'document.tagsPlaceholder' | translate\"\n              [disabled]=\"obs.disabled || obs.tagItems.length === 0\"\n              [appendInline]=\"true\"\n              (selected)=\"tagsSelected($event)\"\n            >\n              >\n              <cds-dropdown-list [items]=\"obs.tagItems || []\"></cds-dropdown-list>\n            </cds-combo-box>\n          </div>\n        }\n      </div>\n\n      <div class=\"documenten-metadata-form-column\">\n        <cds-text-label>\n          {{ 'document.inputTitle' | translate }}\n          <input\n            [placeholder]=\"'document.inputTitlePlaceholder' | translate\"\n            [required]=\"true\"\n            cdsText\n            class=\"documenten-metada-form-input\"\n            id=\"titel\"\n            formControlName=\"titel\"\n          />\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.inputTitleTooltip' | translate\"\n            [align]=\"'bottom'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-text-label>\n        <cds-textarea-label>\n          {{ 'document.inputDescription' | translate }}\n          <textarea\n            [placeholder]=\"'document.inputDescriptionPlaceholder' | translate\"\n            [required]=\"true\"\n            [rows]=\"5\"\n            cdsTextArea\n            class=\"documenten-metada-form-description-input documenten-metada-form-input\"\n            id=\"beschrijving\"\n            formControlName=\"beschrijving\"\n          ></textarea>\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.inputDescriptionTooltip' | translate\"\n            [align]=\"'bottom'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-textarea-label>\n        <cds-label>\n          {{ 'document.creationDate' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.creationDateTooltip' | translate\"\n            [align]=\"'bottom'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n          <div class=\"documenten-metada-form-input\">\n            <cds-date-picker\n              [placeholder]=\"'DD-MM-YYYY'\"\n              [dateFormat]=\"'d-m-Y'\"\n              id=\"creatiedatum\"\n              formControlName=\"creatiedatum\"\n            >\n            </cds-date-picker>\n          </div>\n        </cds-label>\n        <cds-label>\n          {{ 'document.status' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.statusTooltip' | translate\"\n            [align]=\"'bottom'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-label>\n        <div class=\"documenten-metada-form-input\">\n          <cds-dropdown\n            [placeholder]=\"'document.statusPlaceholder' | translate\"\n            [disabled]=\"obs.disabled || (statusDisabled$ | async)\"\n            id=\"status\"\n            [appendInline]=\"true\"\n            (selected)=\"statusSelected($event)\"\n          >\n            <cds-dropdown-list [items]=\"obs.statusItems || []\"></cds-dropdown-list>\n          </cds-dropdown>\n        </div>\n        <cds-date-picker\n          *ngIf=\"obs.additionalDate === 'received'\"\n          [label]=\"'document.additionalDate' | translate\"\n          [placeholder]=\"'DD-MM-YYYY'\"\n          [dateFormat]=\"'d-m-Y'\"\n          id=\"ontvangstdatum\"\n          formControlName=\"ontvangstdatum\"\n        ></cds-date-picker>\n        <cds-date-picker\n          *ngIf=\"obs.additionalDate === 'sent'\"\n          [label]=\"'document.additionalDate' | translate\"\n          [placeholder]=\"'DD-MM-YYYY'\"\n          [dateFormat]=\"'d-m-Y'\"\n          id=\"verzenddatum\"\n          formControlName=\"verzenddatum\"\n        ></cds-date-picker>\n      </div>\n    </div>\n  </form>\n</ng-template>\n", styles: [".documenten-metadata-form-columns-container{display:flex;justify-content:space-between}.documenten-metadata-form-column{flex:1;margin-right:1rem}.documenten-metada-form-input{margin-bottom:18px!important;width:100%!important}.documenten-metada-form-description-input{width:100%}::ng-deep .cds--date-picker,::ng-deep .cds--date-picker-container,::ng-deep .cds--date-picker__input,::ng-deep .cds--date-picker-input__wrapper,::ng-deep .cds--date-picker-input__wrapper>span{width:100%}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:100%}.metadata-modal-footer{display:flex;justify-content:flex-end}.metadata-modal-footer button{width:100%}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i5$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i5$1.TextareaLabelComponent, selector: "cds-textarea-label, ibm-textarea-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textAreaTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i5$1.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i5$1.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i5$1.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i5$1.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "ngmodule", type: ModalModule }, { kind: "directive", type: i5$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i5$1.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i5$1.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i5$1.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter", "parentId"], outputs: ["closeEvent"] }] }); }
+    areAllFieldsHidden() {
+        return (this.hideFields.includes('aanvullendeDatum') &&
+            this.hideFields.includes('auteur') &&
+            this.hideFields.includes('vertrouwelijkheidaanduiding') &&
+            this.hideFields.includes('creatiedatum') &&
+            this.hideFields.includes('beschrijving') &&
+            this.hideFields.includes('titel') &&
+            this.hideFields.includes('informatieobjecttype') &&
+            this.hideFields.includes('bestandsnaam') &&
+            this.hideFields.includes('taal') &&
+            this.hideFields.includes('status') &&
+            this.hideFields.includes('trefwoorden'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiMetadataModalComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$3.DocumentService }, { token: DocumentenApiTagService }, { token: i1$1.FormBuilder }, { token: i5.KeycloakService }, { token: i3$1.ModalService }, { token: i3.TranslateService }, { token: i3$1.ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DocumentenApiMetadataModalComponent, isStandalone: true, selector: "valtimo-documenten-api-metadata-modal", inputs: { disabled$: "disabled$", file$: "file$", hideFields: "hideFields", defaultValues: "defaultValues", disableAuthor: "disableAuthor", disableConfidentialityLevel: "disableConfidentialityLevel", disableDescription: "disableDescription", disableDocumentTitle: "disableDocumentTitle", disableDocumentType: "disableDocumentType", disableFilename: "disableFilename", disableLanguage: "disableLanguage", disableStatus: "disableStatus", supportsTrefwoorden: "supportsTrefwoorden", disableCreationDate: "disableCreationDate", isEditMode: "isEditMode", open: "open" }, outputs: { metadata: "metadata", modalClose: "modalClose" }, viewQueries: [{ propertyName: "metadataModal", first: true, predicate: ["metadataModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  #metadataModal\n  *ngIf=\"{\n    file: file$ | async,\n    disabled: disabled$ | async,\n    isDefinitiveStatus: isDefinitiveStatus$ | async,\n    languageItems: languageItems$ | async,\n    confidentialityLevelItems: confidentialityLevelItems$ | async,\n    documentTypeItems: documentTypeItems$ | async,\n    statusItems: statusItems$ | async,\n    tagItems: tagItems$ | async,\n    userEmail: userEmail$ | async,\n    open: open$ | async,\n    additionalDate: additionalDocumentDate$ | async,\n  } as obs\"\n  [maxWidthPx]=\"1280\"\n  (closeEvent)=\"closeModal()\"\n>\n  <div role=\"header\">\n    @if (isEditMode) {\n      <h3 cdsModalHeaderHeading>\n        {{ 'document.editMetadata' | translate }}\n      </h3>\n    } @else {\n      <h3 cdsModalHeaderHeading>\n        {{ 'document.fillInMetadata' | translate }}\n      </h3>\n    }\n  </div>\n\n  <div role=\"content\">\n    @if (obs.open) {\n      <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n    }\n  </div>\n\n  <div role=\"footer\" class=\"metadata-modal-footer\">\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n      {{ 'document.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      type=\"submit\"\n      [disabled]=\"obs.disabled || !documentenApiMetadataForm.valid || obs.isDefinitiveStatus\"\n      (click)=\"save()\"\n    >\n      {{ 'document.save' | translate }}\n    </button>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <form [formGroup]=\"documentenApiMetadataForm\">\n    <div class=\"documenten-metadata-form-columns-container\">\n      <div class=\"documenten-metadata-form-column\">\n        @if (!hideFields.includes('bestandsnaam')) {\n          <cds-text-label class=\"documenten-metada-form-input\">\n            {{ 'document.filename' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.filenameTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n            <input\n              [value]=\"defaultValues.bestandsnaam\"\n              [placeholder]=\"'document.filenamePlaceholder' | translate\"\n              cdsText\n              type=\"text\"\n              id=\"bestandsnaam\"\n              formControlName=\"bestandsnaam\"\n            />\n          </cds-text-label>\n        }\n        @if (!hideFields.includes('auteur')) {\n          <cds-text-label class=\"documenten-metada-form-input\">\n            {{ 'document.author' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.authorTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n            <input\n              [value]=\"defaultValues.auteur\"\n              [placeholder]=\"'document.authorPlaceholder' | translate\"\n              [required]=\"true\"\n              cdsText\n              id=\"auteur\"\n              formControlName=\"auteur\"\n            />\n          </cds-text-label>\n        }\n        @if (!hideFields.includes('taal')) {\n          <cds-text-label>\n            {{ 'document.language' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.languageTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-dropdown\n              [disabled]=\"obs.disabled || (languageDisabled$ | async)\"\n              [appendInline]=\"true\"\n              [placeholder]=\"'document.languagePlaceholder' | translate\"\n              id=\"language\"\n              (selected)=\"languageSelected($event)\"\n            >\n              <cds-dropdown-list [items]=\"obs.languageItems || []\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        }\n        @if (!hideFields.includes('vertrouwelijkheidaanduiding')) {\n          <cds-label>\n            {{ 'document.confidentialityLevel' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.confidentialityLevelTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-combo-box\n              [placeholder]=\"'document.confidentialityPlaceholder' | translate\"\n              id=\"vertrouwelijkheidaanduiding\"\n              [appendInline]=\"true\"\n              [disabled]=\"obs.disabled || (confidentialityLevelDisabled$ | async)\"\n              (selected)=\"confidentialityLevelSelected($event)\"\n              (clear)=\"confidentialityLevelFormControl.setValue(null)\"\n            >\n              <cds-dropdown-list [items]=\"obs.confidentialityLevelItems || []\"></cds-dropdown-list>\n            </cds-combo-box>\n          </div>\n        }\n        @if (!hideFields.includes('informatieobjecttype')) {\n          <cds-label>\n            {{ 'document.informatieobjecttype' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.informatieobjecttypeTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-dropdown\n              [placeholder]=\"'document.informatieobjecttypePlaceholder' | translate\"\n              [disabled]=\"obs.disabled || (informatieobjecttypeDisabled$ | async)\"\n              id=\"informatieobjecttype\"\n              [appendInline]=\"true\"\n              (selected)=\"informatieobjecttypeSelected($event)\"\n            >\n              <cds-dropdown-list [items]=\"obs.documentTypeItems || []\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        }\n        @if (!hideFields.includes('aanvullendeDatum')) {\n          <cds-text-label name=\"'additionalDate'\">\n            {{ 'document.additionalDate' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.additionalDateTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n          <cds-radio-group [orientation]=\"'horizontal'\" class=\"documenten-metada-form-input\">\n            <cds-radio\n              *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n              [value]=\"option.value\"\n              [checked]=\"obs.additionalDate === option.value\"\n              [required]=\"true\"\n              (click)=\"setAdditionalDate(option.value)\"\n              name=\"radio-inline\"\n            >\n              {{ option.translationKey | translate }}\n            </cds-radio>\n          </cds-radio-group>\n        }\n        @if (supportsTrefwoorden && !hideFields.includes('trefwoorden')) {\n          <cds-text-label>\n            {{ 'document.tags' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.tagsTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-combo-box\n              [type]=\"'multi'\"\n              [placeholder]=\"'document.tagsPlaceholder' | translate\"\n              [disabled]=\"obs.disabled || obs.tagItems?.length === 0\"\n              [appendInline]=\"true\"\n              (selected)=\"tagsSelected($event)\"\n            >\n              >\n              <cds-dropdown-list [items]=\"obs.tagItems || []\"></cds-dropdown-list>\n            </cds-combo-box>\n          </div>\n        }\n      </div>\n\n      <div class=\"documenten-metadata-form-column\">\n        @if (!hideFields.includes('titel')) {\n          <cds-text-label>\n            {{ 'document.inputTitle' | translate }}\n            <input\n              [placeholder]=\"'document.inputTitlePlaceholder' | translate\"\n              [required]=\"true\"\n              cdsText\n              class=\"documenten-metada-form-input\"\n              id=\"titel\"\n              formControlName=\"titel\"\n            />\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.inputTitleTooltip' | translate\"\n              [align]=\"'bottom'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n        }\n        @if (!hideFields.includes('beschrijving')) {\n          <cds-textarea-label>\n            {{ 'document.inputDescription' | translate }}\n            <textarea\n              [placeholder]=\"'document.inputDescriptionPlaceholder' | translate\"\n              [required]=\"false\"\n              [rows]=\"5\"\n              cdsTextArea\n              class=\"documenten-metada-form-description-input documenten-metada-form-input\"\n              id=\"beschrijving\"\n              formControlName=\"beschrijving\"\n            ></textarea>\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.inputDescriptionTooltip' | translate\"\n              [align]=\"'bottom'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-textarea-label>\n        }\n        @if (!hideFields.includes('creatiedatum')) {\n          <cds-label>\n            {{ 'document.creationDate' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.creationDateTooltip' | translate\"\n              [align]=\"'bottom'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n            <div class=\"documenten-metada-form-input\">\n              <cds-date-picker\n                [placeholder]=\"'DD-MM-YYYY'\"\n                [dateFormat]=\"'d-m-Y'\"\n                id=\"creatiedatum\"\n                formControlName=\"creatiedatum\"\n              >\n              </cds-date-picker>\n            </div>\n          </cds-label>\n        }\n        @if (!hideFields.includes('status')) {\n          <cds-label>\n            {{ 'document.status' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.statusTooltip' | translate\"\n              [align]=\"'bottom'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-combo-box\n              [placeholder]=\"'document.statusPlaceholder' | translate\"\n              [disabled]=\"obs.disabled || (statusDisabled$ | async)\"\n              id=\"status\"\n              [appendInline]=\"true\"\n              (selected)=\"statusSelected($event)\"\n              (clear)=\"statusFormControl.setValue(null)\"\n            >\n              <cds-dropdown-list [items]=\"obs.statusItems || []\"></cds-dropdown-list>\n            </cds-combo-box>\n          </div>\n        }\n        @if (!hideFields.includes('aanvullendeDatum')) {\n          <cds-date-picker\n            *ngIf=\"obs.additionalDate === 'received'\"\n            [label]=\"'document.additionalDate' | translate\"\n            [placeholder]=\"'DD-MM-YYYY'\"\n            [dateFormat]=\"'d-m-Y'\"\n            id=\"ontvangstdatum\"\n            formControlName=\"ontvangstdatum\"\n          ></cds-date-picker>\n          <cds-date-picker\n            *ngIf=\"obs.additionalDate === 'sent'\"\n            [label]=\"'document.additionalDate' | translate\"\n            [placeholder]=\"'DD-MM-YYYY'\"\n            [dateFormat]=\"'d-m-Y'\"\n            id=\"verzenddatum\"\n            formControlName=\"verzenddatum\"\n          ></cds-date-picker>\n        }\n      </div>\n    </div>\n  </form>\n</ng-template>\n", styles: [".documenten-metadata-form-columns-container{display:flex;justify-content:space-between}.documenten-metadata-form-column{flex:1;margin-right:1rem}.documenten-metada-form-input{margin-bottom:18px!important;width:100%!important}.documenten-metada-form-description-input{width:100%}::ng-deep .cds--date-picker,::ng-deep .cds--date-picker-container,::ng-deep .cds--date-picker__input,::ng-deep .cds--date-picker-input__wrapper,::ng-deep .cds--date-picker-input__wrapper>span{width:100%}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:100%}.metadata-modal-footer{display:flex;justify-content:flex-end}.metadata-modal-footer button{width:100%}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i6.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i6.TextareaLabelComponent, selector: "cds-textarea-label, ibm-textarea-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textAreaTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i6.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i6.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i6.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i6.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i6.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i6.DatePicker, selector: "cds-date-picker, ibm-date-picker", inputs: ["range", "dateFormat", "language", "label", "helperText", "rangeHelperText", "rangeLabel", "placeholder", "ariaLabel", "inputPattern", "id", "value", "theme", "disabled", "invalid", "invalidText", "warn", "warnText", "size", "rangeInvalid", "rangeInvalidText", "rangeWarn", "rangeWarnText", "skeleton", "plugins", "flatpickrOptions"], outputs: ["valueChange", "onClose"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "ngmodule", type: ModalModule }, { kind: "directive", type: i6.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i6.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i6.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i6.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3$1.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter", "parentId"], outputs: ["closeEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiMetadataModalComponent, decorators: [{
             type: Component,
@@ -1306,19 +1386,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TooltipModule,
                         TranslateModule,
                         VModalModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2024 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  #metadataModal\n  *ngIf=\"{\n    file: file$ | async,\n    disabled: disabled$ | async,\n    isDefinitiveStatus: isDefinitiveStatus$ | async,\n    languageItems: languageItems$ | async,\n    statusItems: statusItems$ | async,\n    tagItems: tagItems$ | async,\n    userEmail: userEmail$ | async,\n    open: open$ | async,\n    additionalDate: additionalDocumentDate$ | async,\n  } as obs\"\n  [maxWidthPx]=\"1280\"\n  (closeEvent)=\"closeModal()\"\n>\n  <div role=\"header\">\n    @if (isEditMode) {\n      <h3 cdsModalHeaderHeading>\n        {{ 'document.editMetadata' | translate }}\n      </h3>\n    } @else {\n      <h3 cdsModalHeaderHeading>\n        {{ 'document.fillInMetadata' | translate }}\n      </h3>\n    }\n  </div>\n\n  <div role=\"content\">\n    @if (obs.open) {\n      <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n    }\n  </div>\n\n  <div role=\"footer\" class=\"metadata-modal-footer\">\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n      {{ 'document.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      type=\"submit\"\n      [disabled]=\"obs.disabled || !documentenApiMetadataForm.valid || obs.isDefinitiveStatus\"\n      (click)=\"save()\"\n    >\n      {{ 'document.save' | translate }}\n    </button>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <form [formGroup]=\"documentenApiMetadataForm\">\n    <div class=\"documenten-metadata-form-columns-container\">\n      <div class=\"documenten-metadata-form-column\">\n        <cds-text-label class=\"documenten-metada-form-input\">\n          {{ 'document.filename' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.filenameTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n          <input\n            [value]=\"filename\"\n            [placeholder]=\"'document.filenamePlaceholder' | translate\"\n            [required]=\"true\"\n            cdsText\n            type=\"text\"\n            id=\"bestandsnaam\"\n            formControlName=\"bestandsnaam\"\n          />\n        </cds-text-label>\n        <cds-text-label class=\"documenten-metada-form-input\">\n          {{ 'document.author' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.authorTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n          <input\n            [value]=\"author\"\n            [placeholder]=\"'document.authorPlaceholder' | translate\"\n            [required]=\"true\"\n            cdsText\n            id=\"auteur\"\n            formControlName=\"auteur\"\n          />\n        </cds-text-label>\n        <cds-text-label>\n          {{ 'document.language' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.languageTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-text-label>\n        <div class=\"documenten-metada-form-input\">\n          <cds-dropdown\n            *ngIf=\"obs.languageItems\"\n            [disabled]=\"obs.disabled || (languageDisabled$ | async)\"\n            [appendInline]=\"true\"\n            [placeholder]=\"'document.languagePlaceholder' | translate\"\n            id=\"language\"\n            (selected)=\"languageSelected($event)\"\n          >\n            <cds-dropdown-list [items]=\"obs.languageItems || []\"></cds-dropdown-list>\n          </cds-dropdown>\n        </div>\n        <cds-label>\n          {{ 'document.confidentialityLevel' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.confidentialityLevelTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-label>\n        <div class=\"documenten-metada-form-input\">\n          <cds-dropdown\n            [placeholder]=\"'document.confidentialityPlaceholder' | translate\"\n            id=\"vertrouwelijkheidaanduiding\"\n            [appendInline]=\"true\"\n            [disabled]=\"obs.disabled || (confidentialityLevelDisabled$ | async)\"\n            (selected)=\"confidentialityLevelSelected($event)\"\n          >\n            <cds-dropdown-list [items]=\"confidentialityLevelItems$ | async\"></cds-dropdown-list>\n          </cds-dropdown>\n        </div>\n        <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n          <cds-label>\n            {{ 'document.informatieobjecttype' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.informatieobjecttypeTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-dropdown\n              [placeholder]=\"'document.informatieobjecttypePlaceholder' | translate\"\n              [disabled]=\"obs.disabled || (informatieobjecttypeDisabled$ | async)\"\n              id=\"informatieobjecttype\"\n              [appendInline]=\"true\"\n              (selected)=\"informatieobjecttypeSelected($event)\"\n            >\n              <cds-dropdown-list [items]=\"obs.documentTypeItems || []\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        </ng-container>\n        <cds-text-label name=\"'additionalDate'\">\n          {{ 'document.additionalDate' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.additionalDateTooltip' | translate\"\n            [align]=\"'bottom-left'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-text-label>\n        <cds-radio-group [orientation]=\"'horizontal'\" class=\"documenten-metada-form-input\">\n          <cds-radio\n            *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n            [value]=\"option.value\"\n            [checked]=\"obs.additionalDate === option.value\"\n            [required]=\"true\"\n            (click)=\"setAdditionalDate(option.value)\"\n            name=\"radio-inline\"\n          >\n            {{ option.translationKey | translate }}\n          </cds-radio>\n        </cds-radio-group>\n        @if (supportsTrefwoorden) {\n          <cds-text-label>\n            {{ 'document.tags' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.tagsTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-combo-box\n              [type]=\"'multi'\"\n              [placeholder]=\"'document.tagsPlaceholder' | translate\"\n              [disabled]=\"obs.disabled || obs.tagItems.length === 0\"\n              [appendInline]=\"true\"\n              (selected)=\"tagsSelected($event)\"\n            >\n              >\n              <cds-dropdown-list [items]=\"obs.tagItems || []\"></cds-dropdown-list>\n            </cds-combo-box>\n          </div>\n        }\n      </div>\n\n      <div class=\"documenten-metadata-form-column\">\n        <cds-text-label>\n          {{ 'document.inputTitle' | translate }}\n          <input\n            [placeholder]=\"'document.inputTitlePlaceholder' | translate\"\n            [required]=\"true\"\n            cdsText\n            class=\"documenten-metada-form-input\"\n            id=\"titel\"\n            formControlName=\"titel\"\n          />\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.inputTitleTooltip' | translate\"\n            [align]=\"'bottom'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-text-label>\n        <cds-textarea-label>\n          {{ 'document.inputDescription' | translate }}\n          <textarea\n            [placeholder]=\"'document.inputDescriptionPlaceholder' | translate\"\n            [required]=\"true\"\n            [rows]=\"5\"\n            cdsTextArea\n            class=\"documenten-metada-form-description-input documenten-metada-form-input\"\n            id=\"beschrijving\"\n            formControlName=\"beschrijving\"\n          ></textarea>\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.inputDescriptionTooltip' | translate\"\n            [align]=\"'bottom'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-textarea-label>\n        <cds-label>\n          {{ 'document.creationDate' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.creationDateTooltip' | translate\"\n            [align]=\"'bottom'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n          <div class=\"documenten-metada-form-input\">\n            <cds-date-picker\n              [placeholder]=\"'DD-MM-YYYY'\"\n              [dateFormat]=\"'d-m-Y'\"\n              id=\"creatiedatum\"\n              formControlName=\"creatiedatum\"\n            >\n            </cds-date-picker>\n          </div>\n        </cds-label>\n        <cds-label>\n          {{ 'document.status' | translate }}\n          <cds-tooltip\n            [isOpen]=\"false\"\n            [description]=\"'document.statusTooltip' | translate\"\n            [align]=\"'bottom'\"\n          >\n            <i class=\"mdi mdi-help-circle-outline\"></i>\n          </cds-tooltip>\n        </cds-label>\n        <div class=\"documenten-metada-form-input\">\n          <cds-dropdown\n            [placeholder]=\"'document.statusPlaceholder' | translate\"\n            [disabled]=\"obs.disabled || (statusDisabled$ | async)\"\n            id=\"status\"\n            [appendInline]=\"true\"\n            (selected)=\"statusSelected($event)\"\n          >\n            <cds-dropdown-list [items]=\"obs.statusItems || []\"></cds-dropdown-list>\n          </cds-dropdown>\n        </div>\n        <cds-date-picker\n          *ngIf=\"obs.additionalDate === 'received'\"\n          [label]=\"'document.additionalDate' | translate\"\n          [placeholder]=\"'DD-MM-YYYY'\"\n          [dateFormat]=\"'d-m-Y'\"\n          id=\"ontvangstdatum\"\n          formControlName=\"ontvangstdatum\"\n        ></cds-date-picker>\n        <cds-date-picker\n          *ngIf=\"obs.additionalDate === 'sent'\"\n          [label]=\"'document.additionalDate' | translate\"\n          [placeholder]=\"'DD-MM-YYYY'\"\n          [dateFormat]=\"'d-m-Y'\"\n          id=\"verzenddatum\"\n          formControlName=\"verzenddatum\"\n        ></cds-date-picker>\n      </div>\n    </div>\n  </form>\n</ng-template>\n", styles: [".documenten-metadata-form-columns-container{display:flex;justify-content:space-between}.documenten-metadata-form-column{flex:1;margin-right:1rem}.documenten-metada-form-input{margin-bottom:18px!important;width:100%!important}.documenten-metada-form-description-input{width:100%}::ng-deep .cds--date-picker,::ng-deep .cds--date-picker-container,::ng-deep .cds--date-picker__input,::ng-deep .cds--date-picker-input__wrapper,::ng-deep .cds--date-picker-input__wrapper>span{width:100%}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:100%}.metadata-modal-footer{display:flex;justify-content:flex-end}.metadata-modal-footer button{width:100%}\n/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$3.DocumentService }, { type: DocumentenApiTagService }, { type: i1$1.FormBuilder }, { type: i5$2.KeycloakService }, { type: i3.ModalService }, { type: i5.TranslateService }, { type: i3.ValtimoModalService }], propDecorators: { metadataModal: [{
+                    ], template: "<!--\n  ~ Copyright 2015-2024 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  #metadataModal\n  *ngIf=\"{\n    file: file$ | async,\n    disabled: disabled$ | async,\n    isDefinitiveStatus: isDefinitiveStatus$ | async,\n    languageItems: languageItems$ | async,\n    confidentialityLevelItems: confidentialityLevelItems$ | async,\n    documentTypeItems: documentTypeItems$ | async,\n    statusItems: statusItems$ | async,\n    tagItems: tagItems$ | async,\n    userEmail: userEmail$ | async,\n    open: open$ | async,\n    additionalDate: additionalDocumentDate$ | async,\n  } as obs\"\n  [maxWidthPx]=\"1280\"\n  (closeEvent)=\"closeModal()\"\n>\n  <div role=\"header\">\n    @if (isEditMode) {\n      <h3 cdsModalHeaderHeading>\n        {{ 'document.editMetadata' | translate }}\n      </h3>\n    } @else {\n      <h3 cdsModalHeaderHeading>\n        {{ 'document.fillInMetadata' | translate }}\n      </h3>\n    }\n  </div>\n\n  <div role=\"content\">\n    @if (obs.open) {\n      <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n    }\n  </div>\n\n  <div role=\"footer\" class=\"metadata-modal-footer\">\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n      {{ 'document.cancel' | translate }}\n    </button>\n\n    <button\n      cdsButton=\"primary\"\n      type=\"submit\"\n      [disabled]=\"obs.disabled || !documentenApiMetadataForm.valid || obs.isDefinitiveStatus\"\n      (click)=\"save()\"\n    >\n      {{ 'document.save' | translate }}\n    </button>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <form [formGroup]=\"documentenApiMetadataForm\">\n    <div class=\"documenten-metadata-form-columns-container\">\n      <div class=\"documenten-metadata-form-column\">\n        @if (!hideFields.includes('bestandsnaam')) {\n          <cds-text-label class=\"documenten-metada-form-input\">\n            {{ 'document.filename' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.filenameTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n            <input\n              [value]=\"defaultValues.bestandsnaam\"\n              [placeholder]=\"'document.filenamePlaceholder' | translate\"\n              cdsText\n              type=\"text\"\n              id=\"bestandsnaam\"\n              formControlName=\"bestandsnaam\"\n            />\n          </cds-text-label>\n        }\n        @if (!hideFields.includes('auteur')) {\n          <cds-text-label class=\"documenten-metada-form-input\">\n            {{ 'document.author' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.authorTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n            <input\n              [value]=\"defaultValues.auteur\"\n              [placeholder]=\"'document.authorPlaceholder' | translate\"\n              [required]=\"true\"\n              cdsText\n              id=\"auteur\"\n              formControlName=\"auteur\"\n            />\n          </cds-text-label>\n        }\n        @if (!hideFields.includes('taal')) {\n          <cds-text-label>\n            {{ 'document.language' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.languageTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-dropdown\n              [disabled]=\"obs.disabled || (languageDisabled$ | async)\"\n              [appendInline]=\"true\"\n              [placeholder]=\"'document.languagePlaceholder' | translate\"\n              id=\"language\"\n              (selected)=\"languageSelected($event)\"\n            >\n              <cds-dropdown-list [items]=\"obs.languageItems || []\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        }\n        @if (!hideFields.includes('vertrouwelijkheidaanduiding')) {\n          <cds-label>\n            {{ 'document.confidentialityLevel' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.confidentialityLevelTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-combo-box\n              [placeholder]=\"'document.confidentialityPlaceholder' | translate\"\n              id=\"vertrouwelijkheidaanduiding\"\n              [appendInline]=\"true\"\n              [disabled]=\"obs.disabled || (confidentialityLevelDisabled$ | async)\"\n              (selected)=\"confidentialityLevelSelected($event)\"\n              (clear)=\"confidentialityLevelFormControl.setValue(null)\"\n            >\n              <cds-dropdown-list [items]=\"obs.confidentialityLevelItems || []\"></cds-dropdown-list>\n            </cds-combo-box>\n          </div>\n        }\n        @if (!hideFields.includes('informatieobjecttype')) {\n          <cds-label>\n            {{ 'document.informatieobjecttype' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.informatieobjecttypeTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-dropdown\n              [placeholder]=\"'document.informatieobjecttypePlaceholder' | translate\"\n              [disabled]=\"obs.disabled || (informatieobjecttypeDisabled$ | async)\"\n              id=\"informatieobjecttype\"\n              [appendInline]=\"true\"\n              (selected)=\"informatieobjecttypeSelected($event)\"\n            >\n              <cds-dropdown-list [items]=\"obs.documentTypeItems || []\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        }\n        @if (!hideFields.includes('aanvullendeDatum')) {\n          <cds-text-label name=\"'additionalDate'\">\n            {{ 'document.additionalDate' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.additionalDateTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n          <cds-radio-group [orientation]=\"'horizontal'\" class=\"documenten-metada-form-input\">\n            <cds-radio\n              *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n              [value]=\"option.value\"\n              [checked]=\"obs.additionalDate === option.value\"\n              [required]=\"true\"\n              (click)=\"setAdditionalDate(option.value)\"\n              name=\"radio-inline\"\n            >\n              {{ option.translationKey | translate }}\n            </cds-radio>\n          </cds-radio-group>\n        }\n        @if (supportsTrefwoorden && !hideFields.includes('trefwoorden')) {\n          <cds-text-label>\n            {{ 'document.tags' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.tagsTooltip' | translate\"\n              [align]=\"'bottom-left'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-combo-box\n              [type]=\"'multi'\"\n              [placeholder]=\"'document.tagsPlaceholder' | translate\"\n              [disabled]=\"obs.disabled || obs.tagItems?.length === 0\"\n              [appendInline]=\"true\"\n              (selected)=\"tagsSelected($event)\"\n            >\n              >\n              <cds-dropdown-list [items]=\"obs.tagItems || []\"></cds-dropdown-list>\n            </cds-combo-box>\n          </div>\n        }\n      </div>\n\n      <div class=\"documenten-metadata-form-column\">\n        @if (!hideFields.includes('titel')) {\n          <cds-text-label>\n            {{ 'document.inputTitle' | translate }}\n            <input\n              [placeholder]=\"'document.inputTitlePlaceholder' | translate\"\n              [required]=\"true\"\n              cdsText\n              class=\"documenten-metada-form-input\"\n              id=\"titel\"\n              formControlName=\"titel\"\n            />\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.inputTitleTooltip' | translate\"\n              [align]=\"'bottom'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-text-label>\n        }\n        @if (!hideFields.includes('beschrijving')) {\n          <cds-textarea-label>\n            {{ 'document.inputDescription' | translate }}\n            <textarea\n              [placeholder]=\"'document.inputDescriptionPlaceholder' | translate\"\n              [required]=\"false\"\n              [rows]=\"5\"\n              cdsTextArea\n              class=\"documenten-metada-form-description-input documenten-metada-form-input\"\n              id=\"beschrijving\"\n              formControlName=\"beschrijving\"\n            ></textarea>\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.inputDescriptionTooltip' | translate\"\n              [align]=\"'bottom'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-textarea-label>\n        }\n        @if (!hideFields.includes('creatiedatum')) {\n          <cds-label>\n            {{ 'document.creationDate' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.creationDateTooltip' | translate\"\n              [align]=\"'bottom'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n            <div class=\"documenten-metada-form-input\">\n              <cds-date-picker\n                [placeholder]=\"'DD-MM-YYYY'\"\n                [dateFormat]=\"'d-m-Y'\"\n                id=\"creatiedatum\"\n                formControlName=\"creatiedatum\"\n              >\n              </cds-date-picker>\n            </div>\n          </cds-label>\n        }\n        @if (!hideFields.includes('status')) {\n          <cds-label>\n            {{ 'document.status' | translate }}\n            <cds-tooltip\n              [isOpen]=\"false\"\n              [description]=\"'document.statusTooltip' | translate\"\n              [align]=\"'bottom'\"\n            >\n              <i class=\"mdi mdi-help-circle-outline\"></i>\n            </cds-tooltip>\n          </cds-label>\n          <div class=\"documenten-metada-form-input\">\n            <cds-combo-box\n              [placeholder]=\"'document.statusPlaceholder' | translate\"\n              [disabled]=\"obs.disabled || (statusDisabled$ | async)\"\n              id=\"status\"\n              [appendInline]=\"true\"\n              (selected)=\"statusSelected($event)\"\n              (clear)=\"statusFormControl.setValue(null)\"\n            >\n              <cds-dropdown-list [items]=\"obs.statusItems || []\"></cds-dropdown-list>\n            </cds-combo-box>\n          </div>\n        }\n        @if (!hideFields.includes('aanvullendeDatum')) {\n          <cds-date-picker\n            *ngIf=\"obs.additionalDate === 'received'\"\n            [label]=\"'document.additionalDate' | translate\"\n            [placeholder]=\"'DD-MM-YYYY'\"\n            [dateFormat]=\"'d-m-Y'\"\n            id=\"ontvangstdatum\"\n            formControlName=\"ontvangstdatum\"\n          ></cds-date-picker>\n          <cds-date-picker\n            *ngIf=\"obs.additionalDate === 'sent'\"\n            [label]=\"'document.additionalDate' | translate\"\n            [placeholder]=\"'DD-MM-YYYY'\"\n            [dateFormat]=\"'d-m-Y'\"\n            id=\"verzenddatum\"\n            formControlName=\"verzenddatum\"\n          ></cds-date-picker>\n        }\n      </div>\n    </div>\n  </form>\n</ng-template>\n", styles: [".documenten-metadata-form-columns-container{display:flex;justify-content:space-between}.documenten-metadata-form-column{flex:1;margin-right:1rem}.documenten-metada-form-input{margin-bottom:18px!important;width:100%!important}.documenten-metada-form-description-input{width:100%}::ng-deep .cds--date-picker,::ng-deep .cds--date-picker-container,::ng-deep .cds--date-picker__input,::ng-deep .cds--date-picker-input__wrapper,::ng-deep .cds--date-picker-input__wrapper>span{width:100%}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:100%}.metadata-modal-footer{display:flex;justify-content:flex-end}.metadata-modal-footer button{width:100%}\n/*!\n * Copyright 2015-2024 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"] }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$3.DocumentService }, { type: DocumentenApiTagService }, { type: i1$1.FormBuilder }, { type: i5.KeycloakService }, { type: i3$1.ModalService }, { type: i3.TranslateService }, { type: i3$1.ValtimoModalService }], propDecorators: { metadataModal: [{
                 type: ViewChild,
                 args: ['metadataModal']
             }], disabled$: [{
                 type: Input
             }], file$: [{
                 type: Input
-            }], author: [{
-                type: Input
-            }], confidentialityLevel: [{
+            }], hideFields: [{
                 type: Input
-            }], description: [{
+            }], defaultValues: [{
                 type: Input
             }], disableAuthor: [{
                 type: Input
@@ -1336,24 +1414,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], disableStatus: [{
                 type: Input
-            }], disableTrefwoorden: [{
-                type: Input
-            }], documentTitle: [{
-                type: Input
-            }], documentType: [{
+            }], supportsTrefwoorden: [{
                 type: Input
-            }], filename: [{
+            }], disableCreationDate: [{
                 type: Input
             }], isEditMode: [{
                 type: Input
-            }], language: [{
-                type: Input
             }], open: [{
                 type: Input
-            }], status: [{
-                type: Input
-            }], supportsTrefwoorden: [{
-                type: Input
             }], metadata: [{
                 type: Output
             }], modalClose: [{
@@ -1458,6 +1526,35 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
             ...DEFAULT_PAGINATOR_CONFIG,
             itemsPerPageOptions: [5, 10, 20, 50, 100],
         };
+        this.uploadFields$ = this.documentId$.pipe(switchMap$1(documentId => this.documentenApiDocumentService.getPrefilledUploadFields(documentId)), map$1(uploadFields => uploadFields.reduce((acc, curr) => ({
+            ...acc,
+            [curr.key]: {
+                key: curr.key,
+                defaultValue: curr.defaultValue,
+                visible: curr.visible,
+                readonly: curr.readonly,
+            },
+        }), {})));
+        this.defaultValues$ = this.uploadFields$.pipe(map$1(formFields => ({
+            auteur: formFields?.auteur?.defaultValue,
+            vertrouwelijkheidaanduiding: formFields?.vertrouwelijkheidaanduiding?.defaultValue,
+            beschrijving: formFields?.beschrijving?.defaultValue,
+            titel: formFields?.titel?.defaultValue,
+            informatieobjecttype: formFields?.informatieobjecttype?.defaultValue,
+            bestandsnaam: formFields?.bestandsnaam?.defaultValue,
+            taal: formFields?.taal?.defaultValue,
+            status: formFields?.status?.defaultValue,
+            trefwoorden: formFields?.trefwoorden?.defaultValue
+                ?.split(',')
+                ?.map(tag => tag.trim())
+                ?.filter(tag => !!tag),
+        })));
+        this.hideFields$ = this.uploadFields$.pipe(map$1(formFields => {
+            if (formFields) {
+                return Object.keys(formFields).filter(field => !formFields[field]?.visible);
+            }
+            return [];
+        }));
         this.relatedFiles$ = combineLatest([
             this.documentId$,
             this.route.queryParamMap,
@@ -1680,8 +1777,8 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$1.UploadProviderService }, { token: i2$1.DownloadService }, { token: i5.TranslateService }, { token: i2.ConfigService }, { token: i5$3.UserProviderService }, { token: i5$1.IconService }, { token: DocumentenApiDocumentService }, { token: DocumentenApiColumnService }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierDetailTabDocumentenApiDocumentsComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-documenten-api-documents", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "translationTemplate", first: true, predicate: ["translationTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div\n  class=\"carbon-document-table-wrapper\"\n  *ngIf=\"{\n    loading: loading$ | async,\n    fieldsLoading: fieldsLoading$ | async,\n    uploading: uploading$ | async,\n    relatedFiles: relatedFiles$ | async,\n    fields: fields$ | async,\n    supportedDocumentenApiFeatures: supportedDocumentenApiFeatures$ | async,\n    pagination: pagination$ | async,\n    sortState: sortState$ | async,\n  } as obs\"\n>\n  @if ((!obs.fieldsLoading && obs.fields.length) || obs.fieldsLoading) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [items]=\"obs.relatedFiles\"\n      [fields]=\"obs.fields\"\n      [initialSortState]=\"obs.sortState\"\n      [loading]=\"obs.loading\"\n      [pagination]=\"obs.pagination\"\n      [paginatorConfig]=\"paginatorConfig\"\n      paginationIdentifier=\"documentenApi\"\n      (rowClicked)=\"onRowClick($event)\"\n      (sortChanged)=\"\n        obs?.supportedDocumentenApiFeatures?.supportsSortableColumns && onSortChanged($event)\n      \"\n      (paginationClicked)=\"onPaginationClicked($event)\"\n      (paginationSet)=\"onPaginationSet($event)\"\n      hideColumnHeader\n    >\n      <div carbonToolbarContent>\n        <input\n          [accept]=\"acceptedFiles\"\n          (change)=\"onFileSelected($event)\"\n          hidden\n          type=\"file\"\n          #fileInput\n        />\n\n        <button\n          *ngIf=\"obs?.supportedDocumentenApiFeatures?.supportsFilterableColumns\"\n          [cdsOverflowMenu]=\"overflowFilter\"\n          [customPane]=\"true\"\n          [iconOnly]=\"true\"\n          [flip]=\"true\"\n          [offset]=\"{x: 0, y: 47}\"\n          cdsButton=\"ghost\"\n          placement=\"bottom\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"filter\" size=\"16\"></svg>\n        </button>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"noResults\"></ng-container>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-no-results\n      [action]=\"navigateToCaseAdminButton\"\n      [description]=\"'zgw.documents.noColumns.description' | translate\"\n      [title]=\"'zgw.documents.noColumns.title' | translate\"\n    ></valtimo-no-results>\n  }\n\n  <valtimo-documenten-api-metadata-modal\n    [open]=\"showUploadModal$ | async\"\n    [disabled$]=\"modalDisabled$\"\n    [file$]=\"fileToBeUploaded$\"\n    [isEditMode]=\"isEditMode$ | async\"\n    [supportsTrefwoorden]=\"obs?.supportedDocumentenApiFeatures?.supportsTrefwoorden\"\n    (modalClose)=\"closeMetadataModal()\"\n    (metadata)=\"metadataSet($event)\"\n  ></valtimo-documenten-api-metadata-modal>\n</div>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dashboardManagement.deleteModal.confirm\"\n  contentTranslationKey=\"dossier.documenten.deleteConfirmationModal.content\"\n  confirmButtonType=\"danger\"\n  titleTranslationKey=\"dossier.documenten.deleteConfirmationModal.title\"\n  [showModalSubject$]=\"showDeleteConfirmationModal$\"\n  (confirmEvent)=\"deleteDocument()\"\n>\n</valtimo-confirmation-modal>\n\n<ng-template #downloadButton let-index=\"index\" let-item=\"item\">\n  <div\n    *ngIf=\"{isDownloading: indexesIncludeIndex(downloadingFileIndexes$ | async, index)} as vars\"\n    class=\"download-button-container\"\n  >\n    <button\n      *ngIf=\"!vars.isDownloading\"\n      cdsButton=\"primary\"\n      size=\"sm\"\n      (click)=\"downloadDocument(item, index)\"\n    >\n      {{ 'interface.download' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n\n    <cds-loading size=\"sm\" *ngIf=\"vars.isDownloading\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #noResults>\n  @if ((filter$ | async | keyvalue)?.length) {\n    <valtimo-no-results\n      [action]=\"resetFilterButton\"\n      [description]=\"'zgw.documents.noResults.filterDescription' | translate\"\n      [title]=\"'zgw.documents.noResults.filterTitle' | translate\"\n    ></valtimo-no-results>\n  } @else if (showZaakLinkWarning && isAdmin) {\n    <valtimo-no-results\n      [action]=\"navigateToCaseAdminButton\"\n      [description]=\"'dossier.documenten.noZaakFound' | translate\"\n      [title]=\"'dossier.documenten.noZaakFoundTitle' | translate\"\n    ></valtimo-no-results>\n  } @else {\n    <valtimo-no-results\n      [action]=\"uploadButton\"\n      [description]=\"'dossier.documenten.noFiles' | translate\"\n      [title]=\"'dossier.documenten.noFilesTitle' | translate\"\n    ></valtimo-no-results>\n  }\n</ng-template>\n\n<ng-template #overflowFilter>\n  <valtimo-dossier-detail-tab-documenten-api-filter\n    [prefillFilter]=\"filter$ | async\"\n    (filterEvent)=\"onFilterEvent($event)\"\n  ></valtimo-dossier-detail-tab-documenten-api-filter>\n</ng-template>\n\n<ng-template #resetFilterButton>\n  <button cdsButton=\"primary\" (click)=\"onFilterEvent(null)\">\n    {{ 'Reset filter' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #uploadButton let-disabled=\"disabled\">\n  <button\n    [disabled]=\"(uploadProcessLinkedSet && !uploadProcessLinked) || showZaakLinkWarning || disabled\"\n    [vTooltip]=\"getUploadButtonTooltip() | translate\"\n    (click)=\"onUploadButtonClick()\"\n    cdsButton=\"primary\"\n  >\n    {{ 'Upload' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #translationTemplate let-data=\"data\">\n  {{ 'document.' + data.item[data.key] | translate }}\n</ng-template>\n\n<ng-template #navigateToCaseAdminButton>\n  <button (click)=\"onNavigateToCaseAdminClick()\" cdsButton=\"primary\">\n    {{ 'dossier.documenten.navigateToCaseAdmin' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"settings\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: [".hidden{display:none}.loading-container{padding:var(--cds-grid-margin);display:flex;align-items:center;justify-content:center}.carbon-document-table-wrapper{margin:0}.documenten-api-documents-filesize-template{text-align:right}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i3.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["disabled$", "file$", "author", "confidentialityLevel", "description", "disableAuthor", "disableConfidentialityLevel", "disableDescription", "disableDocumentTitle", "disableDocumentType", "disableFilename", "disableLanguage", "disableStatus", "disableTrefwoorden", "documentTitle", "documentType", "filename", "isEditMode", "language", "open", "status", "supportsTrefwoorden"], outputs: ["metadata", "modalClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i5$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: DocumentenApiFilterComponent, selector: "valtimo-dossier-detail-tab-documenten-api-filter", outputs: ["filterEvent"] }, { kind: "ngmodule", type: DialogModule }, { kind: "directive", type: i5$1.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i3.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i1$2.Router }, { token: i2$1.UploadProviderService }, { token: i2$1.DownloadService }, { token: i3.TranslateService }, { token: i2.ConfigService }, { token: i5$1.UserProviderService }, { token: i6.IconService }, { token: DocumentenApiDocumentService }, { token: DocumentenApiColumnService }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierDetailTabDocumentenApiDocumentsComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-documenten-api-documents", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "translationTemplate", first: true, predicate: ["translationTemplate"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div\n  class=\"carbon-document-table-wrapper\"\n  *ngIf=\"{\n    loading: loading$ | async,\n    fieldsLoading: fieldsLoading$ | async,\n    uploading: uploading$ | async,\n    relatedFiles: relatedFiles$ | async,\n    fields: fields$ | async,\n    supportedDocumentenApiFeatures: supportedDocumentenApiFeatures$ | async,\n    pagination: pagination$ | async,\n    sortState: sortState$ | async,\n    uploadFields: uploadFields$ | async,\n    defaultValues: defaultValues$ | async,\n    hideFields: hideFields$ | async,\n  } as obs\"\n>\n  @if ((!obs.fieldsLoading && obs.fields.length) || obs.fieldsLoading) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [items]=\"obs.relatedFiles\"\n      [fields]=\"obs.fields\"\n      [initialSortState]=\"obs.sortState\"\n      [loading]=\"obs.loading\"\n      [pagination]=\"obs.pagination\"\n      [paginatorConfig]=\"paginatorConfig\"\n      paginationIdentifier=\"documentenApi\"\n      (rowClicked)=\"onRowClick($event)\"\n      (sortChanged)=\"\n        obs?.supportedDocumentenApiFeatures?.supportsSortableColumns && onSortChanged($event)\n      \"\n      (paginationClicked)=\"onPaginationClicked($event)\"\n      (paginationSet)=\"onPaginationSet($event)\"\n      hideColumnHeader\n    >\n      <div carbonToolbarContent>\n        <input\n          [accept]=\"acceptedFiles\"\n          (change)=\"onFileSelected($event)\"\n          hidden\n          type=\"file\"\n          #fileInput\n        />\n\n        <button\n          *ngIf=\"obs?.supportedDocumentenApiFeatures?.supportsFilterableColumns\"\n          [cdsOverflowMenu]=\"overflowFilter\"\n          [customPane]=\"true\"\n          [iconOnly]=\"true\"\n          [flip]=\"true\"\n          [offset]=\"{x: 0, y: 47}\"\n          cdsButton=\"ghost\"\n          placement=\"bottom\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"filter\" size=\"16\"></svg>\n        </button>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"noResults\"></ng-container>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-no-results\n      [action]=\"navigateToCaseAdminButton\"\n      [description]=\"'zgw.documents.noColumns.description' | translate\"\n      [title]=\"'zgw.documents.noColumns.title' | translate\"\n    ></valtimo-no-results>\n  }\n\n  <valtimo-documenten-api-metadata-modal\n    [defaultValues]=\"obs.defaultValues\"\n    [disableAuthor]=\"obs.uploadFields?.auteur?.readonly\"\n    [disableConfidentialityLevel]=\"obs.uploadFields?.vertrouwelijkheidaanduiding?.readonly\"\n    [disableCreationDate]=\"obs.uploadFields?.creatiedatum?.readonly\"\n    [disableDescription]=\"obs.uploadFields?.beschrijving?.readonly\"\n    [disableDocumentTitle]=\"obs.uploadFields?.titel?.readonly\"\n    [disableDocumentType]=\"obs.uploadFields?.informatieobjecttype?.readonly\"\n    [disableFilename]=\"obs.uploadFields?.bestandsnaam?.readonly\"\n    [disableLanguage]=\"obs.uploadFields?.taal?.readonly\"\n    [disableStatus]=\"obs.uploadFields?.status?.readonly\"\n    [hideFields]=\"obs.hideFields\"\n    [open]=\"showUploadModal$ | async\"\n    [disabled$]=\"modalDisabled$\"\n    [file$]=\"fileToBeUploaded$\"\n    [isEditMode]=\"isEditMode$ | async\"\n    [supportsTrefwoorden]=\"obs?.supportedDocumentenApiFeatures?.supportsTrefwoorden\"\n    (modalClose)=\"closeMetadataModal()\"\n    (metadata)=\"metadataSet($event)\"\n  ></valtimo-documenten-api-metadata-modal>\n</div>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dashboardManagement.deleteModal.confirm\"\n  contentTranslationKey=\"dossier.documenten.deleteConfirmationModal.content\"\n  confirmButtonType=\"danger\"\n  titleTranslationKey=\"dossier.documenten.deleteConfirmationModal.title\"\n  [showModalSubject$]=\"showDeleteConfirmationModal$\"\n  (confirmEvent)=\"deleteDocument()\"\n>\n</valtimo-confirmation-modal>\n\n<ng-template #downloadButton let-index=\"index\" let-item=\"item\">\n  <div\n    *ngIf=\"{isDownloading: indexesIncludeIndex(downloadingFileIndexes$ | async, index)} as vars\"\n    class=\"download-button-container\"\n  >\n    <button\n      *ngIf=\"!vars.isDownloading\"\n      cdsButton=\"primary\"\n      size=\"sm\"\n      (click)=\"downloadDocument(item, index)\"\n    >\n      {{ 'interface.download' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n\n    <cds-loading size=\"sm\" *ngIf=\"vars.isDownloading\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #noResults>\n  @if ((filter$ | async | keyvalue)?.length) {\n    <valtimo-no-results\n      [action]=\"resetFilterButton\"\n      [description]=\"'zgw.documents.noResults.filterDescription' | translate\"\n      [title]=\"'zgw.documents.noResults.filterTitle' | translate\"\n    ></valtimo-no-results>\n  } @else if (showZaakLinkWarning && isAdmin) {\n    <valtimo-no-results\n      [action]=\"navigateToCaseAdminButton\"\n      [description]=\"'dossier.documenten.noZaakFound' | translate\"\n      [title]=\"'dossier.documenten.noZaakFoundTitle' | translate\"\n    ></valtimo-no-results>\n  } @else {\n    <valtimo-no-results\n      [action]=\"uploadButton\"\n      [description]=\"'dossier.documenten.noFiles' | translate\"\n      [title]=\"'dossier.documenten.noFilesTitle' | translate\"\n    ></valtimo-no-results>\n  }\n</ng-template>\n\n<ng-template #overflowFilter>\n  <valtimo-dossier-detail-tab-documenten-api-filter\n    [prefillFilter]=\"filter$ | async\"\n    (filterEvent)=\"onFilterEvent($event)\"\n  ></valtimo-dossier-detail-tab-documenten-api-filter>\n</ng-template>\n\n<ng-template #resetFilterButton>\n  <button cdsButton=\"primary\" (click)=\"onFilterEvent(null)\">\n    {{ 'Reset filter' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #uploadButton let-disabled=\"disabled\">\n  <button\n    [disabled]=\"(uploadProcessLinkedSet && !uploadProcessLinked) || showZaakLinkWarning || disabled\"\n    [vTooltip]=\"getUploadButtonTooltip() | translate\"\n    (click)=\"onUploadButtonClick()\"\n    cdsButton=\"primary\"\n  >\n    {{ 'Upload' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #translationTemplate let-data=\"data\">\n  @if (data.item[data.key]) {\n    {{ 'document.' + data.item[data.key] | translate }}\n  } @else {\n    -\n  }\n</ng-template>\n\n<ng-template #navigateToCaseAdminButton>\n  <button (click)=\"onNavigateToCaseAdminClick()\" cdsButton=\"primary\">\n    {{ 'dossier.documenten.navigateToCaseAdmin' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"settings\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: [".hidden{display:none}.loading-container{padding:var(--cds-grid-margin);display:flex;align-items:center;justify-content:center}.carbon-document-table-wrapper{margin:0}.documenten-api-documents-filesize-template{text-align:right}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i3$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["disabled$", "file$", "hideFields", "defaultValues", "disableAuthor", "disableConfidentialityLevel", "disableDescription", "disableDocumentTitle", "disableDocumentType", "disableFilename", "disableLanguage", "disableStatus", "supportsTrefwoorden", "disableCreationDate", "isEditMode", "open"], outputs: ["metadata", "modalClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: DocumentenApiFilterComponent, selector: "valtimo-dossier-detail-tab-documenten-api-filter", outputs: ["filterEvent"] }, { kind: "ngmodule", type: DialogModule }, { kind: "directive", type: i6.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i3$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, decorators: [{
             type: Component,
@@ -1695,8 +1792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         DocumentenApiFilterComponent,
                         DialogModule,
                         ConfirmationModalModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div\n  class=\"carbon-document-table-wrapper\"\n  *ngIf=\"{\n    loading: loading$ | async,\n    fieldsLoading: fieldsLoading$ | async,\n    uploading: uploading$ | async,\n    relatedFiles: relatedFiles$ | async,\n    fields: fields$ | async,\n    supportedDocumentenApiFeatures: supportedDocumentenApiFeatures$ | async,\n    pagination: pagination$ | async,\n    sortState: sortState$ | async,\n  } as obs\"\n>\n  @if ((!obs.fieldsLoading && obs.fields.length) || obs.fieldsLoading) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [items]=\"obs.relatedFiles\"\n      [fields]=\"obs.fields\"\n      [initialSortState]=\"obs.sortState\"\n      [loading]=\"obs.loading\"\n      [pagination]=\"obs.pagination\"\n      [paginatorConfig]=\"paginatorConfig\"\n      paginationIdentifier=\"documentenApi\"\n      (rowClicked)=\"onRowClick($event)\"\n      (sortChanged)=\"\n        obs?.supportedDocumentenApiFeatures?.supportsSortableColumns && onSortChanged($event)\n      \"\n      (paginationClicked)=\"onPaginationClicked($event)\"\n      (paginationSet)=\"onPaginationSet($event)\"\n      hideColumnHeader\n    >\n      <div carbonToolbarContent>\n        <input\n          [accept]=\"acceptedFiles\"\n          (change)=\"onFileSelected($event)\"\n          hidden\n          type=\"file\"\n          #fileInput\n        />\n\n        <button\n          *ngIf=\"obs?.supportedDocumentenApiFeatures?.supportsFilterableColumns\"\n          [cdsOverflowMenu]=\"overflowFilter\"\n          [customPane]=\"true\"\n          [iconOnly]=\"true\"\n          [flip]=\"true\"\n          [offset]=\"{x: 0, y: 47}\"\n          cdsButton=\"ghost\"\n          placement=\"bottom\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"filter\" size=\"16\"></svg>\n        </button>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"noResults\"></ng-container>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-no-results\n      [action]=\"navigateToCaseAdminButton\"\n      [description]=\"'zgw.documents.noColumns.description' | translate\"\n      [title]=\"'zgw.documents.noColumns.title' | translate\"\n    ></valtimo-no-results>\n  }\n\n  <valtimo-documenten-api-metadata-modal\n    [open]=\"showUploadModal$ | async\"\n    [disabled$]=\"modalDisabled$\"\n    [file$]=\"fileToBeUploaded$\"\n    [isEditMode]=\"isEditMode$ | async\"\n    [supportsTrefwoorden]=\"obs?.supportedDocumentenApiFeatures?.supportsTrefwoorden\"\n    (modalClose)=\"closeMetadataModal()\"\n    (metadata)=\"metadataSet($event)\"\n  ></valtimo-documenten-api-metadata-modal>\n</div>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dashboardManagement.deleteModal.confirm\"\n  contentTranslationKey=\"dossier.documenten.deleteConfirmationModal.content\"\n  confirmButtonType=\"danger\"\n  titleTranslationKey=\"dossier.documenten.deleteConfirmationModal.title\"\n  [showModalSubject$]=\"showDeleteConfirmationModal$\"\n  (confirmEvent)=\"deleteDocument()\"\n>\n</valtimo-confirmation-modal>\n\n<ng-template #downloadButton let-index=\"index\" let-item=\"item\">\n  <div\n    *ngIf=\"{isDownloading: indexesIncludeIndex(downloadingFileIndexes$ | async, index)} as vars\"\n    class=\"download-button-container\"\n  >\n    <button\n      *ngIf=\"!vars.isDownloading\"\n      cdsButton=\"primary\"\n      size=\"sm\"\n      (click)=\"downloadDocument(item, index)\"\n    >\n      {{ 'interface.download' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n\n    <cds-loading size=\"sm\" *ngIf=\"vars.isDownloading\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #noResults>\n  @if ((filter$ | async | keyvalue)?.length) {\n    <valtimo-no-results\n      [action]=\"resetFilterButton\"\n      [description]=\"'zgw.documents.noResults.filterDescription' | translate\"\n      [title]=\"'zgw.documents.noResults.filterTitle' | translate\"\n    ></valtimo-no-results>\n  } @else if (showZaakLinkWarning && isAdmin) {\n    <valtimo-no-results\n      [action]=\"navigateToCaseAdminButton\"\n      [description]=\"'dossier.documenten.noZaakFound' | translate\"\n      [title]=\"'dossier.documenten.noZaakFoundTitle' | translate\"\n    ></valtimo-no-results>\n  } @else {\n    <valtimo-no-results\n      [action]=\"uploadButton\"\n      [description]=\"'dossier.documenten.noFiles' | translate\"\n      [title]=\"'dossier.documenten.noFilesTitle' | translate\"\n    ></valtimo-no-results>\n  }\n</ng-template>\n\n<ng-template #overflowFilter>\n  <valtimo-dossier-detail-tab-documenten-api-filter\n    [prefillFilter]=\"filter$ | async\"\n    (filterEvent)=\"onFilterEvent($event)\"\n  ></valtimo-dossier-detail-tab-documenten-api-filter>\n</ng-template>\n\n<ng-template #resetFilterButton>\n  <button cdsButton=\"primary\" (click)=\"onFilterEvent(null)\">\n    {{ 'Reset filter' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #uploadButton let-disabled=\"disabled\">\n  <button\n    [disabled]=\"(uploadProcessLinkedSet && !uploadProcessLinked) || showZaakLinkWarning || disabled\"\n    [vTooltip]=\"getUploadButtonTooltip() | translate\"\n    (click)=\"onUploadButtonClick()\"\n    cdsButton=\"primary\"\n  >\n    {{ 'Upload' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #translationTemplate let-data=\"data\">\n  {{ 'document.' + data.item[data.key] | translate }}\n</ng-template>\n\n<ng-template #navigateToCaseAdminButton>\n  <button (click)=\"onNavigateToCaseAdminClick()\" cdsButton=\"primary\">\n    {{ 'dossier.documenten.navigateToCaseAdmin' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"settings\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: [".hidden{display:none}.loading-container{padding:var(--cds-grid-margin);display:flex;align-items:center;justify-content:center}.carbon-document-table-wrapper{margin:0}.documenten-api-documents-filesize-template{text-align:right}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$1.UploadProviderService }, { type: i2$1.DownloadService }, { type: i5.TranslateService }, { type: i2.ConfigService }, { type: i5$3.UserProviderService }, { type: i5$1.IconService }, { type: DocumentenApiDocumentService }, { type: DocumentenApiColumnService }, { type: DocumentenApiVersionService }], propDecorators: { fileInput: [{
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div\n  class=\"carbon-document-table-wrapper\"\n  *ngIf=\"{\n    loading: loading$ | async,\n    fieldsLoading: fieldsLoading$ | async,\n    uploading: uploading$ | async,\n    relatedFiles: relatedFiles$ | async,\n    fields: fields$ | async,\n    supportedDocumentenApiFeatures: supportedDocumentenApiFeatures$ | async,\n    pagination: pagination$ | async,\n    sortState: sortState$ | async,\n    uploadFields: uploadFields$ | async,\n    defaultValues: defaultValues$ | async,\n    hideFields: hideFields$ | async,\n  } as obs\"\n>\n  @if ((!obs.fieldsLoading && obs.fields.length) || obs.fieldsLoading) {\n    <valtimo-carbon-list\n      [actionItems]=\"actionItems\"\n      [items]=\"obs.relatedFiles\"\n      [fields]=\"obs.fields\"\n      [initialSortState]=\"obs.sortState\"\n      [loading]=\"obs.loading\"\n      [pagination]=\"obs.pagination\"\n      [paginatorConfig]=\"paginatorConfig\"\n      paginationIdentifier=\"documentenApi\"\n      (rowClicked)=\"onRowClick($event)\"\n      (sortChanged)=\"\n        obs?.supportedDocumentenApiFeatures?.supportsSortableColumns && onSortChanged($event)\n      \"\n      (paginationClicked)=\"onPaginationClicked($event)\"\n      (paginationSet)=\"onPaginationSet($event)\"\n      hideColumnHeader\n    >\n      <div carbonToolbarContent>\n        <input\n          [accept]=\"acceptedFiles\"\n          (change)=\"onFileSelected($event)\"\n          hidden\n          type=\"file\"\n          #fileInput\n        />\n\n        <button\n          *ngIf=\"obs?.supportedDocumentenApiFeatures?.supportsFilterableColumns\"\n          [cdsOverflowMenu]=\"overflowFilter\"\n          [customPane]=\"true\"\n          [iconOnly]=\"true\"\n          [flip]=\"true\"\n          [offset]=\"{x: 0, y: 47}\"\n          cdsButton=\"ghost\"\n          placement=\"bottom\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"filter\" size=\"16\"></svg>\n        </button>\n\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n      </div>\n\n      <ng-container *ngTemplateOutlet=\"noResults\"></ng-container>\n    </valtimo-carbon-list>\n  } @else {\n    <valtimo-no-results\n      [action]=\"navigateToCaseAdminButton\"\n      [description]=\"'zgw.documents.noColumns.description' | translate\"\n      [title]=\"'zgw.documents.noColumns.title' | translate\"\n    ></valtimo-no-results>\n  }\n\n  <valtimo-documenten-api-metadata-modal\n    [defaultValues]=\"obs.defaultValues\"\n    [disableAuthor]=\"obs.uploadFields?.auteur?.readonly\"\n    [disableConfidentialityLevel]=\"obs.uploadFields?.vertrouwelijkheidaanduiding?.readonly\"\n    [disableCreationDate]=\"obs.uploadFields?.creatiedatum?.readonly\"\n    [disableDescription]=\"obs.uploadFields?.beschrijving?.readonly\"\n    [disableDocumentTitle]=\"obs.uploadFields?.titel?.readonly\"\n    [disableDocumentType]=\"obs.uploadFields?.informatieobjecttype?.readonly\"\n    [disableFilename]=\"obs.uploadFields?.bestandsnaam?.readonly\"\n    [disableLanguage]=\"obs.uploadFields?.taal?.readonly\"\n    [disableStatus]=\"obs.uploadFields?.status?.readonly\"\n    [hideFields]=\"obs.hideFields\"\n    [open]=\"showUploadModal$ | async\"\n    [disabled$]=\"modalDisabled$\"\n    [file$]=\"fileToBeUploaded$\"\n    [isEditMode]=\"isEditMode$ | async\"\n    [supportsTrefwoorden]=\"obs?.supportedDocumentenApiFeatures?.supportsTrefwoorden\"\n    (modalClose)=\"closeMetadataModal()\"\n    (metadata)=\"metadataSet($event)\"\n  ></valtimo-documenten-api-metadata-modal>\n</div>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"dashboardManagement.deleteModal.confirm\"\n  contentTranslationKey=\"dossier.documenten.deleteConfirmationModal.content\"\n  confirmButtonType=\"danger\"\n  titleTranslationKey=\"dossier.documenten.deleteConfirmationModal.title\"\n  [showModalSubject$]=\"showDeleteConfirmationModal$\"\n  (confirmEvent)=\"deleteDocument()\"\n>\n</valtimo-confirmation-modal>\n\n<ng-template #downloadButton let-index=\"index\" let-item=\"item\">\n  <div\n    *ngIf=\"{isDownloading: indexesIncludeIndex(downloadingFileIndexes$ | async, index)} as vars\"\n    class=\"download-button-container\"\n  >\n    <button\n      *ngIf=\"!vars.isDownloading\"\n      cdsButton=\"primary\"\n      size=\"sm\"\n      (click)=\"downloadDocument(item, index)\"\n    >\n      {{ 'interface.download' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n    </button>\n\n    <cds-loading size=\"sm\" *ngIf=\"vars.isDownloading\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #noResults>\n  @if ((filter$ | async | keyvalue)?.length) {\n    <valtimo-no-results\n      [action]=\"resetFilterButton\"\n      [description]=\"'zgw.documents.noResults.filterDescription' | translate\"\n      [title]=\"'zgw.documents.noResults.filterTitle' | translate\"\n    ></valtimo-no-results>\n  } @else if (showZaakLinkWarning && isAdmin) {\n    <valtimo-no-results\n      [action]=\"navigateToCaseAdminButton\"\n      [description]=\"'dossier.documenten.noZaakFound' | translate\"\n      [title]=\"'dossier.documenten.noZaakFoundTitle' | translate\"\n    ></valtimo-no-results>\n  } @else {\n    <valtimo-no-results\n      [action]=\"uploadButton\"\n      [description]=\"'dossier.documenten.noFiles' | translate\"\n      [title]=\"'dossier.documenten.noFilesTitle' | translate\"\n    ></valtimo-no-results>\n  }\n</ng-template>\n\n<ng-template #overflowFilter>\n  <valtimo-dossier-detail-tab-documenten-api-filter\n    [prefillFilter]=\"filter$ | async\"\n    (filterEvent)=\"onFilterEvent($event)\"\n  ></valtimo-dossier-detail-tab-documenten-api-filter>\n</ng-template>\n\n<ng-template #resetFilterButton>\n  <button cdsButton=\"primary\" (click)=\"onFilterEvent(null)\">\n    {{ 'Reset filter' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #uploadButton let-disabled=\"disabled\">\n  <button\n    [disabled]=\"(uploadProcessLinkedSet && !uploadProcessLinked) || showZaakLinkWarning || disabled\"\n    [vTooltip]=\"getUploadButtonTooltip() | translate\"\n    (click)=\"onUploadButtonClick()\"\n    cdsButton=\"primary\"\n  >\n    {{ 'Upload' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"upload\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #translationTemplate let-data=\"data\">\n  @if (data.item[data.key]) {\n    {{ 'document.' + data.item[data.key] | translate }}\n  } @else {\n    -\n  }\n</ng-template>\n\n<ng-template #navigateToCaseAdminButton>\n  <button (click)=\"onNavigateToCaseAdminClick()\" cdsButton=\"primary\">\n    {{ 'dossier.documenten.navigateToCaseAdmin' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"settings\" size=\"16\"></svg>\n  </button>\n</ng-template>\n", styles: [".hidden{display:none}.loading-container{padding:var(--cds-grid-margin);display:flex;align-items:center;justify-content:center}.carbon-document-table-wrapper{margin:0}.documenten-api-documents-filesize-template{text-align:right}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2024 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"] }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i1$2.Router }, { type: i2$1.UploadProviderService }, { type: i2$1.DownloadService }, { type: i3.TranslateService }, { type: i2.ConfigService }, { type: i5$1.UserProviderService }, { type: i6.IconService }, { type: DocumentenApiDocumentService }, { type: DocumentenApiColumnService }, { type: DocumentenApiVersionService }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
             }], translationTemplate: [{
@@ -1781,7 +1878,7 @@ class DossierManagementLinkProcessComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementLinkProcessComponent, deps: [{ token: i2.ConfigService }, { token: i1$2.ActivatedRoute }, { token: DocumentenApiLinkProcessService }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementLinkProcessComponent, isStandalone: true, selector: "valtimo-dossier-management-link-process", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"documentenApiUploadProviders$ | async\">\n  <h2 class=\"mb-4\">{{ 'dossierManagement.linkProcess.title' | translate }}</h2>\n\n  <v-paragraph [margin]=\"true\">{{\n    'dossierManagement.linkProcess.description' | translate\n  }}</v-paragraph>\n\n  <ng-container\n    *ngIf=\"{\n      processItems: processItems$ | async,\n      disabled: disabled$ | async,\n    } as obs\"\n  >\n    <cds-combo-box\n      [appendInline]=\"true\"\n      (selected)=\"selectProcess($event)\"\n      [disabled]=\"obs.disabled || !obs.processItems\"\n    >\n      <cds-dropdown-list [items]=\"obs.processItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i3.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i5$1.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i5$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementLinkProcessComponent, isStandalone: true, selector: "valtimo-dossier-management-link-process", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"documentenApiUploadProviders$ | async\">\n  <h2 class=\"mb-4\">{{ 'dossierManagement.linkProcess.title' | translate }}</h2>\n\n  <v-paragraph [margin]=\"true\">{{\n    'dossierManagement.linkProcess.description' | translate\n  }}</v-paragraph>\n\n  <ng-container\n    *ngIf=\"{\n      processItems: processItems$ | async,\n      disabled: disabled$ | async,\n    } as obs\"\n  >\n    <cds-combo-box\n      [appendInline]=\"true\"\n      (selected)=\"selectProcess($event)\"\n      [disabled]=\"obs.disabled || !obs.processItems\"\n    >\n      <cds-dropdown-list [items]=\"obs.processItems || []\"></cds-dropdown-list>\n    </cds-combo-box>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i3$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i6.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementLinkProcessComponent, decorators: [{
             type: Component,
@@ -1867,7 +1964,7 @@ class DocumentenApiTagModalComponent {
         this.resetForm();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiTagModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: DocumentenApiTagService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiTagModalComponent, isStandalone: true, selector: "valtimo-documenten-api-tag-modal", inputs: { documentDefinitionName: "documentDefinitionName", open: "open" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal\n  valtimoCdsModal\n  *ngIf=\"{\n    disabled: disabled$ | async,\n  } as obs\"\n  [open]=\"open\"\n  size=\"sm\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'zgw.tags.addModal.header' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"tagFormGroup\" class=\"tag-form\">\n      <cds-label\n        [invalidText]=\"\n          (value?.errors?.['required']\n            ? 'zgw.tags.fields.valueRequired'\n            : 'zgw.tags.fields.valueMaxLength'\n          ) | translate: {maxlength: value?.errors?.maxlength?.requiredLength}\n        \"\n        [invalid]=\"value.dirty && value.invalid\"\n      >\n        {{ 'zgw.tags.fields.value' | translate }}\n\n        <input\n          cdsText\n          formControlName=\"value\"\n          [attr.modal-primary-focus]=\"true\"\n          [invalid]=\"value.dirty && value.invalid\"\n        />\n      </cds-label>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"invalid || pristine || obs.disabled\" (click)=\"addTag()\">\n      {{ 'interface.add' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i5$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i5$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ToggleModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiTagModalComponent, isStandalone: true, selector: "valtimo-documenten-api-tag-modal", inputs: { documentDefinitionName: "documentDefinitionName", open: "open" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal\n  valtimoCdsModal\n  *ngIf=\"{\n    disabled: disabled$ | async,\n  } as obs\"\n  [open]=\"open\"\n  size=\"sm\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'zgw.tags.addModal.header' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"tagFormGroup\" class=\"tag-form\">\n      <cds-label\n        [invalidText]=\"\n          (value?.errors?.['required']\n            ? 'zgw.tags.fields.valueRequired'\n            : 'zgw.tags.fields.valueMaxLength'\n          ) | translate: {maxlength: value?.errors?.maxlength?.requiredLength}\n        \"\n        [invalid]=\"value.dirty && value.invalid\"\n      >\n        {{ 'zgw.tags.fields.value' | translate }}\n\n        <input\n          cdsText\n          formControlName=\"value\"\n          [attr.modal-primary-focus]=\"true\"\n          [invalid]=\"value.dirty && value.invalid\"\n        />\n      </cds-label>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"invalid || pristine || obs.disabled\" (click)=\"addTag()\">\n      {{ 'interface.add' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i6.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i6.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i6.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i6.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i6.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i6.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i6.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "ngmodule", type: ToggleModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiTagModalComponent, decorators: [{
             type: Component,
@@ -2019,13 +2116,12 @@ class DocumentenApiTagsComponent {
         this._reload$.next(noAnimation ? 'noAnimation' : null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiTagsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: DocumentenApiTagService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiTagsComponent, isStandalone: true, selector: "valtimo-documenten-api-tags", viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentTags: documentTags$ | async,\n    addModalClosed: addModalClosed$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    selectedRowKeys: selectedRowKeys$ | async,\n    searchTerm: searchTerm$ | async,\n    showDeleteModal: showDeleteModal$ | async,\n    tagToDelete: tagToDelete$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [items]=\"obs.documentTags\"\n    [fields]=\"FIELDS\"\n    [header]=\"false\"\n    [loading]=\"obs.loading\"\n    [actionItems]=\"ACTION_ITEMS\"\n    [showSelectionColumn]=\"true\"\n    [isSearchable]=\"true\"\n    [pagination]=\"pagination\"\n    (paginationClicked)=\"paginationClicked($event)\"\n    (paginationSet)=\"paginationSet($event)\"\n    (search)=\"searchTermEntered($event)\"\n  >\n    <ng-container carbonToolbarContent *ngTemplateOutlet=\"addButtton\"></ng-container>\n\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showDeleteMultipleModal()\">\n        {{ 'interface.delete' | translate }}\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"obs.searchTerm === ''\"\n      [action]=\"addButtton\"\n      title=\"{{ 'zgw.tags.list.noResultsTitle' | translate }}\"\n      description=\"{{ 'zgw.tags.list.noResultsDescription' | translate }}\"\n    ></valtimo-no-results>\n\n    <valtimo-no-results\n      *ngIf=\"obs.searchTerm !== ''\"\n      title=\"{{ 'zgw.tags.search.noResultsTitle' | translate }}\"\n      description=\"{{ 'zgw.tags.search.noResultsDescription' | translate }}\"\n      illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <valtimo-documenten-api-tag-modal\n    [open]=\"!obs.addModalClosed\"\n    [documentDefinitionName]=\"obs.documentDefinitionName\"\n    (closeModalEvent)=\"closeModal($event)\"\n  ></valtimo-documenten-api-tag-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"zgw.tags.deleteText\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"interface.delete\"\n    [outputOnConfirm]=\"obs.tagToDelete\"\n    (confirmEvent)=\"confirmDeleteTag($event)\"\n  ></valtimo-confirmation-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    [contentTranslationKey]=\"\n      obs.selectedRowKeys.length > 1 ? 'zgw.tags.deleteMultipleText' : 'zgw.tags.deleteText'\n    \"\n    [showModalSubject$]=\"showDeleteMultipleModal$\"\n    titleTranslationKey=\"interface.delete\"\n    [outputOnConfirm]=\"{\n      documentDefinitionName: obs.documentDefinitionName,\n      tagIds: obs.selectedRowKeys,\n      itemsOnCurrentPage: obs.documentTags.length,\n    }\"\n    (confirmEvent)=\"confirmDeleteMultipleTag($event)\"\n  ></valtimo-confirmation-modal>\n\n  <ng-template #addButtton>\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"openAddModal()\">\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n      {{ 'zgw.tags.add' | translate }}\n    </button>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .cds-tag--no-margin{margin:0}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i3.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i3.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: DocumentenApiTagModalComponent, selector: "valtimo-documenten-api-tag-modal", inputs: ["documentDefinitionName", "open"], outputs: ["closeModalEvent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i5$1.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiTagsComponent, isStandalone: true, selector: "valtimo-documenten-api-tags", viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentTags: documentTags$ | async,\n    addModalClosed: addModalClosed$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    selectedRowKeys: selectedRowKeys$ | async,\n    searchTerm: searchTerm$ | async,\n    showDeleteModal: showDeleteModal$ | async,\n    tagToDelete: tagToDelete$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [items]=\"obs.documentTags\"\n    [fields]=\"FIELDS\"\n    [header]=\"false\"\n    [loading]=\"obs.loading\"\n    [actionItems]=\"ACTION_ITEMS\"\n    [showSelectionColumn]=\"true\"\n    [isSearchable]=\"true\"\n    [pagination]=\"pagination\"\n    (paginationClicked)=\"paginationClicked($event)\"\n    (paginationSet)=\"paginationSet($event)\"\n    (search)=\"searchTermEntered($event)\"\n  >\n    <ng-container carbonToolbarContent *ngTemplateOutlet=\"addButtton\"></ng-container>\n\n    <ng-container carbonToolbarActions>\n      <button cdsButton=\"primary\" (click)=\"showDeleteMultipleModal()\">\n        {{ 'interface.delete' | translate }}\n        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"obs.searchTerm === ''\"\n      [action]=\"addButtton\"\n      title=\"{{ 'zgw.tags.list.noResultsTitle' | translate }}\"\n      description=\"{{ 'zgw.tags.list.noResultsDescription' | translate }}\"\n    ></valtimo-no-results>\n\n    <valtimo-no-results\n      *ngIf=\"obs.searchTerm !== ''\"\n      title=\"{{ 'zgw.tags.search.noResultsTitle' | translate }}\"\n      description=\"{{ 'zgw.tags.search.noResultsDescription' | translate }}\"\n      illustration=\"valtimo-layout/img/emptystate-no-result.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <valtimo-documenten-api-tag-modal\n    [open]=\"!obs.addModalClosed\"\n    [documentDefinitionName]=\"obs.documentDefinitionName\"\n    (closeModalEvent)=\"closeModal($event)\"\n  ></valtimo-documenten-api-tag-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"zgw.tags.deleteText\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"interface.delete\"\n    [outputOnConfirm]=\"obs.tagToDelete\"\n    (confirmEvent)=\"confirmDeleteTag($event)\"\n  ></valtimo-confirmation-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    [contentTranslationKey]=\"\n      obs.selectedRowKeys.length > 1 ? 'zgw.tags.deleteMultipleText' : 'zgw.tags.deleteText'\n    \"\n    [showModalSubject$]=\"showDeleteMultipleModal$\"\n    titleTranslationKey=\"interface.delete\"\n    [outputOnConfirm]=\"{\n      documentDefinitionName: obs.documentDefinitionName,\n      tagIds: obs.selectedRowKeys,\n      itemsOnCurrentPage: obs.documentTags.length,\n    }\"\n    (confirmEvent)=\"confirmDeleteMultipleTag($event)\"\n  ></valtimo-confirmation-modal>\n\n  <ng-template #addButtton>\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"openAddModal()\">\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n      {{ 'zgw.tags.add' | translate }}\n    </button>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .cds-tag--no-margin{margin:0}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i3$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i3$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: DocumentenApiTagModalComponent, selector: "valtimo-documenten-api-tag-modal", inputs: ["documentDefinitionName", "open"], outputs: ["closeModalEvent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i6.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiTagsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-documenten-api-tags', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
-                        DocumentenApiColumnModalComponent,
                         CarbonListModule,
                         TranslateModule,
                         ConfirmationModalModule,
@@ -2039,6 +2135,278 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: [CarbonListComponent]
             }] } });
 
+/*
+ * Copyright 2015-2024 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 DocumentenApiUploadFieldModalComponent {
+    set prefill(field) {
+        if (field) {
+            this.key = field.key;
+            this.defaultValue.setValue(field.defaultValue);
+            this.visible.setValue(field.visible);
+            this.readonly.setValue(field.readonly);
+        }
+    }
+    get defaultValue() {
+        return this.formGroup?.get('defaultValue');
+    }
+    get selectedDefaultValue() {
+        return this.formGroup?.get('selectedDefaultValue');
+    }
+    get visible() {
+        return this.formGroup?.get('visible');
+    }
+    get readonly() {
+        return this.formGroup?.get('readonly');
+    }
+    get invalid() {
+        return !!this.formGroup?.invalid;
+    }
+    constructor(fb, documentenApiDocumentService, translateService, documentService) {
+        this.fb = fb;
+        this.documentenApiDocumentService = documentenApiDocumentService;
+        this.translateService = translateService;
+        this.documentService = documentService;
+        this.closeModalEvent = new EventEmitter();
+        this.formGroup = this.fb.group({
+            defaultValue: this.fb.control('', [Validators.maxLength(256)]),
+            selectedDefaultValue: this.fb.control(null),
+            visible: this.fb.control(true, [Validators.required]),
+            readonly: this.fb.control(false, [Validators.required]),
+        });
+        this.disabled$ = new BehaviorSubject(false);
+        this.confidentialityLevelItems$ = combineLatest([
+            this.defaultValue.valueChanges,
+            this.translateService.stream('key'),
+        ]).pipe(map(([selectedItem]) => CONFIDENTIALITY_LEVELS.map(item => ({
+            id: item,
+            content: this.translateService.instant(`document.${item}`),
+            selected: selectedItem === item,
+        }))));
+        this.languageItems$ = combineLatest([
+            this.defaultValue.valueChanges,
+            this.translateService.stream('key'),
+        ]).pipe(map(([selectedItem]) => LANGUAGE_ITEMS.map(item => ({
+            id: item,
+            content: this.translateService.instant(`document.${item}`),
+            selected: selectedItem === item,
+        }))));
+        this.statusItems$ = combineLatest([
+            this.defaultValue.valueChanges,
+            this.translateService.stream('key'),
+        ]).pipe(map(([selectedItem]) => STATUS_ITEMS.map(item => ({
+            id: item,
+            content: this.translateService.instant(`document.${item}`),
+            selected: selectedItem === item,
+        }))));
+        this.documentTypeItems$ = combineLatest([
+            this.defaultValue.valueChanges,
+            this.translateService.stream('key'),
+        ]).pipe(switchMap(([selectedItem]) => combineLatest([
+            this.documentService.getDocumentTypes(this.documentDefinitionName),
+            of(selectedItem),
+        ])), map(([documentTypes, selectedItem]) => documentTypes.map(item => ({
+            id: item.url,
+            content: item.name,
+            selected: selectedItem === item.url,
+        }))));
+        this._subscriptions = new Subscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onClose() {
+        this.close();
+    }
+    clear() {
+        this.selectedDefaultValue.setValue(null);
+        this.defaultValue.setValue(null);
+    }
+    saveUploadField() {
+        this.disable();
+        const formField = {
+            key: this.key,
+            defaultValue: this.selectedDefaultValue?.value?.id || this.defaultValue.value,
+            visible: this.visible.value,
+            readonly: this.readonly.value,
+        };
+        this.documentenApiDocumentService
+            .updateUploadField(this.documentDefinitionName, formField)
+            .subscribe({
+            next: () => {
+                this.enable();
+                this.closeAndRefresh();
+                this.resetForm();
+            },
+            error: () => {
+                this.enable(false);
+            },
+        });
+    }
+    resetForm() {
+        this.formGroup.reset();
+    }
+    disable() {
+        this.disabled$.next(true);
+        this.formGroup.disable();
+    }
+    enable(delay = true) {
+        setTimeout(() => {
+            this.disabled$.next(false);
+            this.formGroup.enable();
+        }, delay ? CARBON_CONSTANTS.modalAnimationMs : 0);
+    }
+    close() {
+        this.closeModalEvent.emit('close');
+        this.resetForm();
+    }
+    closeAndRefresh() {
+        this.closeModalEvent.emit('closeAndRefresh');
+        this.resetForm();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiUploadFieldModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: DocumentenApiDocumentService }, { token: i3.TranslateService }, { token: i1$3.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DocumentenApiUploadFieldModalComponent, isStandalone: true, selector: "valtimo-documenten-api-upload-field-modal", inputs: { documentDefinitionName: "documentDefinitionName", type: "type", prefill: "prefill" }, outputs: { closeModalEvent: "closeModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal\n  valtimoCdsModal\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    languageItems: languageItems$ | async,\n    confidentialityLevelItems: confidentialityLevelItems$ | async,\n    statusItems: statusItems$ | async,\n    documentTypeItems: documentTypeItems$ | async,\n  } as obs\"\n  [open]=\"type !== 'closed'\"\n  size=\"sm\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        ('zgw.uploadFields.editModal.header' | translate) +\n          ' - ' +\n          ('zgw.uploadFields.keys.' + key | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"formGroup\" class=\"uploadField-form\">\n      @if (key === 'taal') {\n        <cds-combo-box\n          formControlName=\"selectedDefaultValue\"\n          [label]=\"'zgw.uploadFields.fields.defaultValue' | translate\"\n          [dropUp]=\"false\"\n          (clear)=\"clear()\"\n        >\n          <cds-dropdown-list [items]=\"obs.languageItems\"></cds-dropdown-list>\n        </cds-combo-box>\n      } @else if (key === 'vertrouwelijkheidaanduiding') {\n        <cds-combo-box\n          formControlName=\"selectedDefaultValue\"\n          [label]=\"'zgw.uploadFields.fields.defaultValue' | translate\"\n          [dropUp]=\"false\"\n          (clear)=\"clear()\"\n        >\n          <cds-dropdown-list [items]=\"obs.confidentialityLevelItems\"></cds-dropdown-list>\n        </cds-combo-box>\n      } @else if (key === 'status') {\n        <cds-combo-box\n          formControlName=\"selectedDefaultValue\"\n          [label]=\"'zgw.uploadFields.fields.defaultValue' | translate\"\n          [dropUp]=\"false\"\n          (clear)=\"clear()\"\n        >\n          <cds-dropdown-list [items]=\"obs.statusItems\"></cds-dropdown-list>\n        </cds-combo-box>\n      } @else if (key === 'informatieobjecttype') {\n        <cds-combo-box\n          formControlName=\"selectedDefaultValue\"\n          [label]=\"'zgw.uploadFields.fields.defaultValue' | translate\"\n          [dropUp]=\"false\"\n          (clear)=\"clear()\"\n        >\n          <cds-dropdown-list [items]=\"obs.documentTypeItems\"></cds-dropdown-list>\n        </cds-combo-box>\n      } @else if (\n        key === 'filename' ||\n        key === 'bestandsnaam' ||\n        key === 'titel' ||\n        key === 'beschrijving' ||\n        key === 'trefwoorden'\n      ) {\n        <cds-label>\n          {{ 'zgw.uploadFields.fields.defaultValue' | translate }}\n          <input cdsText formControlName=\"defaultValue\" />\n        </cds-label>\n      }\n      <div class=\"toggle-group\">\n        <cds-toggle\n          formControlName=\"visible\"\n          [label]=\"'zgw.uploadFields.fields.visible' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n        ></cds-toggle>\n        <cds-toggle\n          formControlName=\"readonly\"\n          [label]=\"'zgw.uploadFields.fields.readonly' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n        ></cds-toggle>\n      </div>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"invalid || obs.disabled\" (click)=\"saveUploadField()\">\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".toggle-group{display:flex;flex-direction:column;margin-top:16px}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i6.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i6.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i6.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i6.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i6.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i6.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i6.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i6.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i6.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i6.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiUploadFieldModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-documenten-api-upload-field-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ModalModule,
+                        TranslateModule,
+                        InputModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                        ToggleModule,
+                        CheckboxModule,
+                        ComboBoxModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal\n  valtimoCdsModal\n  *ngIf=\"{\n    disabled: disabled$ | async,\n    languageItems: languageItems$ | async,\n    confidentialityLevelItems: confidentialityLevelItems$ | async,\n    statusItems: statusItems$ | async,\n    documentTypeItems: documentTypeItems$ | async,\n  } as obs\"\n  [open]=\"type !== 'closed'\"\n  size=\"sm\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        ('zgw.uploadFields.editModal.header' | translate) +\n          ' - ' +\n          ('zgw.uploadFields.keys.' + key | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <form [formGroup]=\"formGroup\" class=\"uploadField-form\">\n      @if (key === 'taal') {\n        <cds-combo-box\n          formControlName=\"selectedDefaultValue\"\n          [label]=\"'zgw.uploadFields.fields.defaultValue' | translate\"\n          [dropUp]=\"false\"\n          (clear)=\"clear()\"\n        >\n          <cds-dropdown-list [items]=\"obs.languageItems\"></cds-dropdown-list>\n        </cds-combo-box>\n      } @else if (key === 'vertrouwelijkheidaanduiding') {\n        <cds-combo-box\n          formControlName=\"selectedDefaultValue\"\n          [label]=\"'zgw.uploadFields.fields.defaultValue' | translate\"\n          [dropUp]=\"false\"\n          (clear)=\"clear()\"\n        >\n          <cds-dropdown-list [items]=\"obs.confidentialityLevelItems\"></cds-dropdown-list>\n        </cds-combo-box>\n      } @else if (key === 'status') {\n        <cds-combo-box\n          formControlName=\"selectedDefaultValue\"\n          [label]=\"'zgw.uploadFields.fields.defaultValue' | translate\"\n          [dropUp]=\"false\"\n          (clear)=\"clear()\"\n        >\n          <cds-dropdown-list [items]=\"obs.statusItems\"></cds-dropdown-list>\n        </cds-combo-box>\n      } @else if (key === 'informatieobjecttype') {\n        <cds-combo-box\n          formControlName=\"selectedDefaultValue\"\n          [label]=\"'zgw.uploadFields.fields.defaultValue' | translate\"\n          [dropUp]=\"false\"\n          (clear)=\"clear()\"\n        >\n          <cds-dropdown-list [items]=\"obs.documentTypeItems\"></cds-dropdown-list>\n        </cds-combo-box>\n      } @else if (\n        key === 'filename' ||\n        key === 'bestandsnaam' ||\n        key === 'titel' ||\n        key === 'beschrijving' ||\n        key === 'trefwoorden'\n      ) {\n        <cds-label>\n          {{ 'zgw.uploadFields.fields.defaultValue' | translate }}\n          <input cdsText formControlName=\"defaultValue\" />\n        </cds-label>\n      }\n      <div class=\"toggle-group\">\n        <cds-toggle\n          formControlName=\"visible\"\n          [label]=\"'zgw.uploadFields.fields.visible' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n        ></cds-toggle>\n        <cds-toggle\n          formControlName=\"readonly\"\n          [label]=\"'zgw.uploadFields.fields.readonly' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n        ></cds-toggle>\n      </div>\n    </form>\n  </section>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"invalid || obs.disabled\" (click)=\"saveUploadField()\">\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".toggle-group{display:flex;flex-direction:column;margin-top:16px}\n/*!\n * Copyright 2015-2024 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"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: DocumentenApiDocumentService }, { type: i3.TranslateService }, { type: i1$3.DocumentService }], propDecorators: { documentDefinitionName: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], prefill: [{
+                type: Input
+            }], closeModalEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 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 DocumentenApiUploadFieldsComponent {
+    get documentDefinitionName$() {
+        return this._documentDefinitionName$;
+    }
+    constructor(route, documentenApiDocumentService, translateService) {
+        this.route = route;
+        this.documentenApiDocumentService = documentenApiDocumentService;
+        this.translateService = translateService;
+        this._reload$ = new BehaviorSubject(null);
+        this._documentDefinitionName$ = this.route.params.pipe(map(params => params?.name), filter(docDefName => !!docDefName));
+        this.loading$ = new BehaviorSubject(true);
+        this.fields$ = new BehaviorSubject([]);
+        this.uploadFieldModalType$ = new BehaviorSubject('closed');
+        this.prefill$ = new BehaviorSubject(undefined);
+        this.documentUploadFields$ = combineLatest([
+            this._documentDefinitionName$,
+            this._reload$,
+            this.translateService.stream('key'),
+        ]).pipe(tap(([_, reload]) => {
+            if (reload === null) {
+                this.loading$.next(true);
+            }
+        }), switchMap(([documentDefinitionName]) => this.documentenApiDocumentService.getUploadFields(documentDefinitionName)), map(fields => fields.map(field => ({
+            ...field,
+            field: this.translateService.instant(`zgw.uploadFields.keys.${field.key}`),
+        }))), startWith([]), tap(() => {
+            this.loading$.next(false);
+        }));
+        this.ACTION_ITEMS = [
+            {
+                label: 'interface.edit',
+                callback: this.openEditModal.bind(this),
+                type: 'normal',
+            },
+        ];
+        this.FIELDS = [
+            {
+                key: 'field',
+                label: 'zgw.uploadFields.fields.field',
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'defaultValue',
+                label: 'zgw.uploadFields.fields.defaultValue',
+                viewType: ViewType.TEXT,
+            },
+            {
+                key: 'visible',
+                label: 'zgw.uploadFields.fields.visible',
+                viewType: ViewType.BOOLEAN,
+            },
+            {
+                key: 'readonly',
+                label: 'zgw.uploadFields.fields.readonly',
+                viewType: ViewType.BOOLEAN,
+            },
+        ];
+    }
+    openEditModal(uploadField) {
+        this.prefill$.next(uploadField);
+        this.uploadFieldModalType$.next('edit');
+    }
+    closeModal(closeModalEvent) {
+        if (closeModalEvent === 'closeAndRefresh') {
+            this.reload();
+        }
+        this.uploadFieldModalType$.next('closed');
+    }
+    reload(noAnimation = false) {
+        this._reload$.next(noAnimation ? 'noAnimation' : null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiUploadFieldsComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: DocumentenApiDocumentService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiUploadFieldsComponent, isStandalone: true, selector: "valtimo-documenten-api-upload-fields", viewQueries: [{ propertyName: "carbonList", first: true, predicate: CarbonListComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentUploadFields: documentUploadFields$ | async,\n    uploadFieldModalType: uploadFieldModalType$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    prefill: prefill$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [items]=\"obs.documentUploadFields\"\n    [fields]=\"FIELDS\"\n    [header]=\"false\"\n    [loading]=\"obs.loading\"\n    [actionItems]=\"ACTION_ITEMS\"\n  >\n    <valtimo-no-results\n      title=\"{{ 'zgw.uploadFields.list.noResultsTitle' | translate }}\"\n      description=\"{{ 'zgw.uploadFields.list.noResultsDescription' | translate }}\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <valtimo-documenten-api-upload-field-modal\n    [prefill]=\"obs.prefill\"\n    [documentDefinitionName]=\"obs.documentDefinitionName\"\n    [type]=\"obs.uploadFieldModalType\"\n    (closeModalEvent)=\"closeModal($event)\"\n  ></valtimo-documenten-api-upload-field-modal>\n</ng-container>\n", styles: ["::ng-deep .cds-upload-field--no-margin{margin:0}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i3$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: DocumentenApiUploadFieldModalComponent, selector: "valtimo-documenten-api-upload-field-modal", inputs: ["documentDefinitionName", "type", "prefill"], outputs: ["closeModalEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiUploadFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-documenten-api-upload-fields', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        CarbonListModule,
+                        TranslateModule,
+                        ConfirmationModalModule,
+                        ButtonModule,
+                        IconModule,
+                        DocumentenApiUploadFieldModalComponent,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentUploadFields: documentUploadFields$ | async,\n    uploadFieldModalType: uploadFieldModalType$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    prefill: prefill$ | async,\n  } as obs\"\n>\n  <valtimo-carbon-list\n    [items]=\"obs.documentUploadFields\"\n    [fields]=\"FIELDS\"\n    [header]=\"false\"\n    [loading]=\"obs.loading\"\n    [actionItems]=\"ACTION_ITEMS\"\n  >\n    <valtimo-no-results\n      title=\"{{ 'zgw.uploadFields.list.noResultsTitle' | translate }}\"\n      description=\"{{ 'zgw.uploadFields.list.noResultsDescription' | translate }}\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <valtimo-documenten-api-upload-field-modal\n    [prefill]=\"obs.prefill\"\n    [documentDefinitionName]=\"obs.documentDefinitionName\"\n    [type]=\"obs.uploadFieldModalType\"\n    (closeModalEvent)=\"closeModal($event)\"\n  ></valtimo-documenten-api-upload-field-modal>\n</ng-container>\n", styles: ["::ng-deep .cds-upload-field--no-margin{margin:0}\n/*!\n * Copyright 2015-2024 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"] }]
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: DocumentenApiDocumentService }, { type: i3.TranslateService }], propDecorators: { carbonList: [{
+                type: ViewChild,
+                args: [CarbonListComponent]
+            }] } });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -2063,7 +2431,7 @@ class DocumentenApiVersionComponent {
         this.documentenApiVersion$ = combineLatest([this.documentDefinitionName$, this.documentenApiVersionService.refresh$]).pipe(tap(() => this.loading$.next(true)), switchMap(([documentDefinitionName]) => this.documentenApiVersionService.getManagementApiVersion(documentDefinitionName)), tap(() => this.loading$.next(false)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiVersionComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiVersionComponent, isStandalone: true, selector: "valtimo-documenten-api-version", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div class=\"input-group mt-4 mb-2 align-items-center\">\n  <div>\n    <h2>{{ 'openZaak.documentenApi.title' | translate }}</h2>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentenApiVersion: documentenApiVersion$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container\n      *ngIf=\"obs.documentenApiVersion.selectedVersion; else noDocumentenApiVersionWarning\"\n    >\n      <ng-container\n        *ngIf=\"\n          obs.documentenApiVersion.detectedVersions.length === 1;\n          else multipleDocumentenApiVersionsWarning\n        \"\n      >\n        {{ 'openZaak.documentenApi.documentenApiVersion' | translate }}\n        <strong> {{ obs.documentenApiVersion.selectedVersion }} </strong>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #noDocumentenApiVersionWarning>\n  <div class=\"pb-2\">\n    <cds-notification\n      class=\"full-width-notification\"\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'openZaak.documentenApi.noVersionWarningTitle' | translate,\n        message: 'openZaak.documentenApi.noVersionWarningMessage' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #multipleDocumentenApiVersionsWarning>\n  <div class=\"pb-2\">\n    <cds-notification\n      class=\"full-width-notification\"\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'openZaak.documentenApi.multipleVersionsWarningTitle' | translate,\n        message: 'openZaak.documentenApi.multipleVersionsWarningMessage' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-container pb-2\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i5$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i5$1.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentenApiVersionComponent, isStandalone: true, selector: "valtimo-documenten-api-version", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<div class=\"input-group mt-4 mb-2 align-items-center\">\n  <div>\n    <h2>{{ 'openZaak.documentenApi.title' | translate }}</h2>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentenApiVersion: documentenApiVersion$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container\n      *ngIf=\"obs.documentenApiVersion.selectedVersion; else noDocumentenApiVersionWarning\"\n    >\n      <ng-container\n        *ngIf=\"\n          obs.documentenApiVersion.detectedVersions.length === 1;\n          else multipleDocumentenApiVersionsWarning\n        \"\n      >\n        {{ 'openZaak.documentenApi.documentenApiVersion' | translate }}\n        <strong> {{ obs.documentenApiVersion.selectedVersion }} </strong>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #noDocumentenApiVersionWarning>\n  <div class=\"pb-2\">\n    <cds-notification\n      class=\"full-width-notification\"\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'openZaak.documentenApi.noVersionWarningTitle' | translate,\n        message: 'openZaak.documentenApi.noVersionWarningMessage' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #multipleDocumentenApiVersionsWarning>\n  <div class=\"pb-2\">\n    <cds-notification\n      class=\"full-width-notification\"\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'openZaak.documentenApi.multipleVersionsWarningTitle' | translate,\n        message: 'openZaak.documentenApi.multipleVersionsWarningMessage' | translate,\n        showClose: false,\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"loading-container pb-2\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: [".loading-container{display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i6.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i6.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiVersionComponent, decorators: [{
             type: Component,
@@ -2198,12 +2566,30 @@ const documentenApiUploaderEditForm = () => ({
                 required: false,
             },
         },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h3>Documenten API metadata</h3>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Filename</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
         {
             type: 'textfield',
             input: true,
-            key: 'customOptions.documentTitle',
-            label: 'Default document title',
-            tooltip: 'Leave empty to let the user input their own title',
+            key: 'customOptions.filename',
+            label: 'Default filename',
+            tooltip: 'Leave empty to let the user input their own filename',
             validate: {
                 required: false,
             },
@@ -2212,18 +2598,37 @@ const documentenApiUploaderEditForm = () => ({
             type: 'checkbox',
             input: true,
             inputType: 'checkbox',
-            key: 'customOptions.disableDocumentTitle',
-            label: 'Disable document title input',
+            key: 'customOptions.disableFilename',
+            label: 'Disable filename input',
             validate: {
                 required: false,
             },
         },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideFilename',
+            label: 'Hide filename input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Title</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
         {
             type: 'textfield',
             input: true,
-            key: 'customOptions.filename',
-            label: 'Default filename',
-            tooltip: 'Leave empty to let the user input their own filename',
+            key: 'customOptions.documentTitle',
+            label: 'Default document title',
+            tooltip: 'Leave empty to let the user input their own title',
             validate: {
                 required: false,
             },
@@ -2232,12 +2637,31 @@ const documentenApiUploaderEditForm = () => ({
             type: 'checkbox',
             input: true,
             inputType: 'checkbox',
-            key: 'customOptions.disableFilename',
-            label: 'Disable filename input',
+            key: 'customOptions.disableDocumentTitle',
+            label: 'Disable document title input',
             validate: {
                 required: false,
             },
         },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideDocumentTitle',
+            label: 'Hide document title input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Author</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
         {
             type: 'textfield',
             input: true,
@@ -2259,20 +2683,30 @@ const documentenApiUploaderEditForm = () => ({
             },
         },
         {
-            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' },
-                ],
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideAuthor',
+            label: 'Hide author input',
+            validate: {
+                required: false,
             },
-            dataSrc: 'values',
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Description</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: 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,
             },
@@ -2281,12 +2715,31 @@ const documentenApiUploaderEditForm = () => ({
             type: 'checkbox',
             input: true,
             inputType: 'checkbox',
-            key: 'customOptions.disableStatus',
-            label: 'Disable status input',
+            key: 'customOptions.disableDescription',
+            label: 'Disable description input',
             validate: {
                 required: false,
             },
         },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideDescription',
+            label: 'Hide description input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Language</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
         {
             type: 'select',
             label: 'Default language',
@@ -2316,11 +2769,43 @@ const documentenApiUploaderEditForm = () => ({
             },
         },
         {
-            type: 'textfield',
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideLanguage',
+            label: 'Hide language input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Confidentiality level</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: 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,
-            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,
             },
@@ -2329,18 +2814,66 @@ const documentenApiUploaderEditForm = () => ({
             type: 'checkbox',
             input: true,
             inputType: 'checkbox',
-            key: 'customOptions.disableDocumentType',
-            label: 'Disable document type input',
+            key: 'customOptions.disableConfidentialityLevel',
+            label: 'Disable confidentiality level input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideConfidentialityLevel',
+            label: 'Hide confidentiality level input',
             validate: {
                 required: false,
             },
         },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Creation date</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.disableCreationDate',
+            label: 'Disable creation date input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideCreationDate',
+            label: 'Hide creation date input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Informatieobjecttype</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
         {
             type: 'textfield',
             input: true,
-            key: 'customOptions.description',
-            label: 'Default description',
-            tooltip: 'Leave empty to let the user input their own description',
+            key: 'customOptions.documentType',
+            label: 'Default informatieobjecttype url',
+            tooltip: "Sometimes referred to as the 'document-type'. Must match the informatieobjecttype url exactly. Leave empty to let the user input their own informatieobjecttype",
             validate: {
                 required: false,
             },
@@ -2349,27 +2882,42 @@ const documentenApiUploaderEditForm = () => ({
             type: 'checkbox',
             input: true,
             inputType: 'checkbox',
-            key: 'customOptions.disableDescription',
-            label: 'Disable description input',
+            key: 'customOptions.disableDocumentType',
+            label: 'Disable informatieobjecttype input',
             validate: {
                 required: false,
             },
         },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideDocumentType',
+            label: 'Hide informatieobjecttype input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Status</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
         {
             type: 'select',
-            label: 'Default confidentiality level',
-            key: 'customOptions.confidentialityLevel',
-            placeholder: 'Select a default confidentiality level',
+            label: 'Default status',
+            key: 'customOptions.status',
+            placeholder: 'Select a default status',
             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' },
+                    { value: 'in_bewerking', label: 'In editing' },
+                    { value: 'ter_vaststelling', label: 'To be confirmed' },
+                    { value: 'definitief', label: 'Definitive' },
+                    { value: 'gearchiveerd', label: 'Archived' },
                 ],
             },
             dataSrc: 'values',
@@ -2382,8 +2930,66 @@ const documentenApiUploaderEditForm = () => ({
             type: 'checkbox',
             input: true,
             inputType: 'checkbox',
-            key: 'customOptions.disableConfidentialityLevel',
-            label: 'Disable confidentiality level input',
+            key: 'customOptions.disableStatus',
+            label: 'Disable status input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideStatus',
+            label: 'Hide status input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Additional date</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideAdditionalDate',
+            label: 'Hide additional date input',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            label: 'HTML',
+            tag: 'div',
+            content: '<h4>Tags</h4>',
+            refreshOnChange: false,
+            type: 'htmlelement',
+            input: false,
+            tableView: false,
+        },
+        {
+            type: 'textfield',
+            input: true,
+            key: 'customOptions.tags',
+            label: 'Default tags',
+            tooltip: 'A comma separated list of tags. Leave empty to let the user input their own tags',
+            validate: {
+                required: false,
+            },
+        },
+        {
+            type: 'checkbox',
+            input: true,
+            inputType: 'checkbox',
+            key: 'customOptions.hideTags',
+            label: 'Hide tags input',
             validate: {
                 required: false,
             },
@@ -2407,6 +3013,73 @@ const documentenApiUploaderEditForm = () => ({
  * limitations under the License.
  */
 class DocumentenApiUploaderComponent {
+    set documentTitle(defaultValue) {
+        this.defaultValues['titel'] = defaultValue;
+    }
+    set hideDocumentTitle(hide) {
+        this.hideField(hide, 'titel');
+    }
+    set filename(defaultValue) {
+        this.defaultValues['bestandsnaam'] = defaultValue;
+    }
+    set hideFilename(hide) {
+        this.hideField(hide, 'bestandsnaam');
+    }
+    set author(defaultValue) {
+        this.defaultValues['auteur'] = defaultValue;
+    }
+    set hideAuthor(hide) {
+        this.hideField(hide, 'auteur');
+    }
+    set status(defaultValue) {
+        this.defaultValues['status'] = defaultValue;
+    }
+    set hideStatus(hide) {
+        this.hideField(hide, 'status');
+    }
+    set language(defaultValue) {
+        this.defaultValues['taal'] = defaultValue;
+    }
+    set hideLanguage(hide) {
+        this.hideField(hide, 'taal');
+    }
+    set documentType(defaultValue) {
+        this.defaultValues['informatieobjecttype'] = defaultValue;
+    }
+    set hideDocumentType(hide) {
+        this.hideField(hide, 'informatieobjecttype');
+    }
+    set description(defaultValue) {
+        this.defaultValues['beschrijving'] = defaultValue;
+    }
+    set hideDescription(hide) {
+        this.hideField(hide, 'beschrijving');
+    }
+    set confidentialityLevel(defaultValue) {
+        this.defaultValues['vertrouwelijkheidaanduiding'] = defaultValue;
+    }
+    set hideConfidentialityLevel(hide) {
+        this.hideField(hide, 'vertrouwelijkheidaanduiding');
+    }
+    set hideCreationDate(hide) {
+        this.hideField(hide, 'creatiedatum');
+    }
+    set hideAdditionalDate(hide) {
+        this.hideField(hide, 'aanvullendeDatum');
+    }
+    set tags(tags) {
+        let _tags = tags
+            ?.split(',')
+            ?.map(tag => tag.trim())
+            ?.filter(tag => !!tag);
+        if (_tags?.length === 0) {
+            _tags = null;
+        }
+        this.defaultValues['trefwoorden'] = tags;
+    }
+    set hideTags(hide) {
+        this.hideField(hide, 'trefwoorden');
+    }
     constructor(uploadProviderService, stateService, domService, downloadService, modalService, userProviderService, route, documentenApiVersionService) {
         this.uploadProviderService = uploadProviderService;
         this.stateService = stateService;
@@ -2433,8 +3106,9 @@ class DocumentenApiUploaderComponent {
         this.isAdmin$ = this.userProviderService
             .getUserSubject()
             .pipe(map$1(userIdentity => userIdentity?.roles.includes('ROLE_ADMIN')));
-        this._documentDefinitionName$ = this.route.params.pipe(map$1(params => params?.documentDefinitionName), filter$1(caseDefinitionName => !!caseDefinitionName));
-        this.supportedDocumentenApiFeatures$ = this._documentDefinitionName$.pipe(switchMap(caseDefinitionName => this.documentenApiVersionService.getSupportedApiFeatures(caseDefinitionName)));
+        this.supportedDocumentenApiFeatures$ = this.modalService.documentDefinitionName$.pipe(switchMap(caseDefinitionName => this.documentenApiVersionService.getSupportedApiFeatures(caseDefinitionName)));
+        this.defaultValues = {};
+        this.hideFields = [];
         this._value = [];
     }
     get value() {
@@ -2470,13 +3144,22 @@ class DocumentenApiUploaderComponent {
         }))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiUploaderComponent, deps: [{ token: i2$1.UploadProviderService }, { token: i3.FormIoStateService }, { token: i3.FormIoDomService }, { token: i2$1.DownloadService }, { token: i3.ValtimoModalService }, { token: i5$3.UserProviderService }, { token: i1$2.ActivatedRoute }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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-2024 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  class=\"documenten-api-uploader-metadata-modal\"\n  (metadata)=\"metadataSet($event)\"\n  (modalClose)=\"closeMetadataModal()\"\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  [language]=\"language\"\n  [status]=\"status\"\n  [supportsTrefwoorden]=\"(supportedDocumentenApiFeatures$ | async)?.supportsTrefwoorden\"\n  [open]=\"showModal()\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [".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/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "directive", type: i5.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["disabled$", "file$", "author", "confidentialityLevel", "description", "disableAuthor", "disableConfidentialityLevel", "disableDescription", "disableDocumentTitle", "disableDocumentType", "disableFilename", "disableLanguage", "disableStatus", "disableTrefwoorden", "documentTitle", "documentType", "filename", "isEditMode", "language", "open", "status", "supportsTrefwoorden"], outputs: ["metadata", "modalClose"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.FileSizePipe, name: "filesize" }] }); }
+    hideField(hide, field) {
+        const exists = this.hideFields.includes(field);
+        if (!exists && hide) {
+            this.hideFields.push(field);
+        }
+        else if (exists && !hide) {
+            delete this.hideFields[field];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiUploaderComponent, deps: [{ token: i2$1.UploadProviderService }, { token: i3$1.FormIoStateService }, { token: i3$1.FormIoDomService }, { token: i2$1.DownloadService }, { token: i3$1.ValtimoModalService }, { token: i5$1.UserProviderService }, { token: i1$2.ActivatedRoute }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", hideDocumentTitle: "hideDocumentTitle", disableDocumentTitle: "disableDocumentTitle", filename: "filename", hideFilename: "hideFilename", disableFilename: "disableFilename", author: "author", hideAuthor: "hideAuthor", disableAuthor: "disableAuthor", status: "status", hideStatus: "hideStatus", disableStatus: "disableStatus", language: "language", hideLanguage: "hideLanguage", disableLanguage: "disableLanguage", documentType: "documentType", hideDocumentType: "hideDocumentType", disableDocumentType: "disableDocumentType", description: "description", hideDescription: "hideDescription", disableDescription: "disableDescription", confidentialityLevel: "confidentialityLevel", hideConfidentialityLevel: "hideConfidentialityLevel", disableConfidentialityLevel: "disableConfidentialityLevel", hideCreationDate: "hideCreationDate", disableCreationDate: "disableCreationDate", hideAdditionalDate: "hideAdditionalDate", tags: "tags", hideTags: "hideTags", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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  class=\"documenten-api-uploader-metadata-modal\"\n  (metadata)=\"metadataSet($event)\"\n  (modalClose)=\"closeMetadataModal()\"\n  [defaultValues]=\"defaultValues\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableCreationDate]=\"disableCreationDate\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hideFields]=\"hideFields\"\n  [supportsTrefwoorden]=\"(supportedDocumentenApiFeatures$ | async)?.supportsTrefwoorden\"\n  [open]=\"showModal()\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [".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/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["disabled$", "file$", "hideFields", "defaultValues", "disableAuthor", "disableConfidentialityLevel", "disableDescription", "disableDocumentTitle", "disableDocumentType", "disableFilename", "disableLanguage", "disableStatus", "supportsTrefwoorden", "disableCreationDate", "isEditMode", "open"], outputs: ["metadata", "modalClose"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.FileSizePipe, name: "filesize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentenApiUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-documenten-api-formio-uploader', template: "<!--\n  ~ Copyright 2015-2024 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  class=\"documenten-api-uploader-metadata-modal\"\n  (metadata)=\"metadataSet($event)\"\n  (modalClose)=\"closeMetadataModal()\"\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  [language]=\"language\"\n  [status]=\"status\"\n  [supportsTrefwoorden]=\"(supportedDocumentenApiFeatures$ | async)?.supportsTrefwoorden\"\n  [open]=\"showModal()\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [".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/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: i2$1.UploadProviderService }, { type: i3.FormIoStateService }, { type: i3.FormIoDomService }, { type: i2$1.DownloadService }, { type: i3.ValtimoModalService }, { type: i5$3.UserProviderService }, { type: i1$2.ActivatedRoute }, { type: DocumentenApiVersionService }], propDecorators: { disabled: [{
+            args: [{ selector: 'valtimo-documenten-api-formio-uploader', template: "<!--\n  ~ Copyright 2015-2024 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  class=\"documenten-api-uploader-metadata-modal\"\n  (metadata)=\"metadataSet($event)\"\n  (modalClose)=\"closeMetadataModal()\"\n  [defaultValues]=\"defaultValues\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableCreationDate]=\"disableCreationDate\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hideFields]=\"hideFields\"\n  [supportsTrefwoorden]=\"(supportedDocumentenApiFeatures$ | async)?.supportsTrefwoorden\"\n  [open]=\"showModal()\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [".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/*!\n * Copyright 2015-2024 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"] }]
+        }], ctorParameters: () => [{ type: i2$1.UploadProviderService }, { type: i3$1.FormIoStateService }, { type: i3$1.FormIoDomService }, { type: i2$1.DownloadService }, { type: i3$1.ValtimoModalService }, { type: i5$1.UserProviderService }, { type: i1$2.ActivatedRoute }, { type: DocumentenApiVersionService }], propDecorators: { disabled: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -2492,36 +3175,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], documentTitle: [{
                 type: Input
+            }], hideDocumentTitle: [{
+                type: Input
             }], disableDocumentTitle: [{
                 type: Input
             }], filename: [{
                 type: Input
+            }], hideFilename: [{
+                type: Input
             }], disableFilename: [{
                 type: Input
             }], author: [{
                 type: Input
+            }], hideAuthor: [{
+                type: Input
             }], disableAuthor: [{
                 type: Input
             }], status: [{
                 type: Input
+            }], hideStatus: [{
+                type: Input
             }], disableStatus: [{
                 type: Input
             }], language: [{
                 type: Input
+            }], hideLanguage: [{
+                type: Input
             }], disableLanguage: [{
                 type: Input
             }], documentType: [{
                 type: Input
+            }], hideDocumentType: [{
+                type: Input
             }], disableDocumentType: [{
                 type: Input
             }], description: [{
                 type: Input
+            }], hideDescription: [{
+                type: Input
             }], disableDescription: [{
                 type: Input
             }], confidentialityLevel: [{
                 type: Input
+            }], hideConfidentialityLevel: [{
+                type: Input
             }], disableConfidentialityLevel: [{
                 type: Input
+            }], hideCreationDate: [{
+                type: Input
+            }], disableCreationDate: [{
+                type: Input
+            }], hideAdditionalDate: [{
+                type: Input
+            }], tags: [{
+                type: Input
+            }], hideTags: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], value: [{
@@ -2799,8 +3508,8 @@ class DossierDetailTabZaakobjectenComponent {
         this.objectName$.next(this.getObjectTypeName(objectTypeSelectItems));
         this.show();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierDetailTabZaakobjectenComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-zaakobjecten", viewQueries: [{ propertyName: "viewZaakobjectModal", first: true, predicate: ["viewZaakobjectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objecttypeSelectItems: objecttypeSelectItems$ | async,\n    objects: objects$ | async,\n    columns: columns$ | async,\n    selectedObjectTypeUrl: selectedObjecttypeUrl$ | async,\n  } as obs\"\n>\n  <v-select\n    [items]=\"obs.objecttypeSelectItems\"\n    [margin]=\"true\"\n    [widthInPx]=\"350\"\n    name=\"objecttypes\"\n    [title]=\"'dossier.zaakobjecten.objecttype' | translate\"\n    [placeholder]=\"'dossier.zaakobjecten.objecttypePlaceholder' | translate\"\n    [loading]=\"!obs.objecttypeSelectItems\"\n    (selectedChange)=\"selectObjectType($event)\"\n  ></v-select>\n  <v-input-label\n    titleTranslationKey=\"dossier.zaakobjecten.objecten\"\n    [largeMargin]=\"!!obs.selectedObjectTypeUrl\"\n  ></v-input-label>\n  <v-paragraph *ngIf=\"!obs.selectedObjectTypeUrl\">{{\n    'dossier.zaakobjecten.objectenPlaceholder' | translate\n  }}</v-paragraph>\n  <v-table\n    *ngIf=\"obs.selectedObjectTypeUrl\"\n    [loading]=\"!obs.objects\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    (editButtonClicked)=\"rowClicked($event, obs.objecttypeSelectItems)\"\n  ></v-table>\n</ng-container>\n\n<v-modal #viewZaakobjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i3.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i3.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter", "parentId"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: TitleModule }, { kind: "component", type: i3.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3$1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierDetailTabZaakobjectenComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-zaakobjecten", viewQueries: [{ propertyName: "viewZaakobjectModal", first: true, predicate: ["viewZaakobjectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objecttypeSelectItems: objecttypeSelectItems$ | async,\n    objects: objects$ | async,\n    columns: columns$ | async,\n    selectedObjectTypeUrl: selectedObjecttypeUrl$ | async,\n  } as obs\"\n>\n  <v-select\n    [items]=\"obs.objecttypeSelectItems\"\n    [margin]=\"true\"\n    [widthInPx]=\"350\"\n    name=\"objecttypes\"\n    [title]=\"'dossier.zaakobjecten.objecttype' | translate\"\n    [placeholder]=\"'dossier.zaakobjecten.objecttypePlaceholder' | translate\"\n    [loading]=\"!obs.objecttypeSelectItems\"\n    (selectedChange)=\"selectObjectType($event)\"\n  ></v-select>\n  <v-input-label\n    titleTranslationKey=\"dossier.zaakobjecten.objecten\"\n    [largeMargin]=\"!!obs.selectedObjectTypeUrl\"\n  ></v-input-label>\n  <v-paragraph *ngIf=\"!obs.selectedObjectTypeUrl\">{{\n    'dossier.zaakobjecten.objectenPlaceholder' | translate\n  }}</v-paragraph>\n  <v-table\n    *ngIf=\"obs.selectedObjectTypeUrl\"\n    [loading]=\"!obs.objects\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    (editButtonClicked)=\"rowClicked($event, obs.objecttypeSelectItems)\"\n  ></v-table>\n</ng-container>\n\n<v-modal #viewZaakobjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i3$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i3$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3$1.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter", "parentId"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: TitleModule }, { kind: "component", type: i3$1.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i3$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, decorators: [{
             type: Component,
@@ -2815,7 +3524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FormIoModule,
                         TranslateModule,
                     ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objecttypeSelectItems: objecttypeSelectItems$ | async,\n    objects: objects$ | async,\n    columns: columns$ | async,\n    selectedObjectTypeUrl: selectedObjecttypeUrl$ | async,\n  } as obs\"\n>\n  <v-select\n    [items]=\"obs.objecttypeSelectItems\"\n    [margin]=\"true\"\n    [widthInPx]=\"350\"\n    name=\"objecttypes\"\n    [title]=\"'dossier.zaakobjecten.objecttype' | translate\"\n    [placeholder]=\"'dossier.zaakobjecten.objecttypePlaceholder' | translate\"\n    [loading]=\"!obs.objecttypeSelectItems\"\n    (selectedChange)=\"selectObjectType($event)\"\n  ></v-select>\n  <v-input-label\n    titleTranslationKey=\"dossier.zaakobjecten.objecten\"\n    [largeMargin]=\"!!obs.selectedObjectTypeUrl\"\n  ></v-input-label>\n  <v-paragraph *ngIf=\"!obs.selectedObjectTypeUrl\">{{\n    'dossier.zaakobjecten.objectenPlaceholder' | translate\n  }}</v-paragraph>\n  <v-table\n    *ngIf=\"obs.selectedObjectTypeUrl\"\n    [loading]=\"!obs.objects\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    (editButtonClicked)=\"rowClicked($event, obs.objecttypeSelectItems)\"\n  ></v-table>\n</ng-container>\n\n<v-modal #viewZaakobjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3.ModalService }], propDecorators: { viewZaakobjectModal: [{
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3$1.ModalService }], propDecorators: { viewZaakobjectModal: [{
                 type: ViewChild,
                 args: ['viewZaakobjectModal']
             }] } });
@@ -2921,13 +3630,13 @@ class DossierDetailTabObjectTypeComponent {
         }
         this.show();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabObjectTypeComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierDetailTabObjectTypeComponent, isStandalone: true, selector: "valtimo-object-type", viewQueries: [{ propertyName: "viewObjectModal", first: true, predicate: ["viewObjectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objects: objects$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async,\n    hasData: hasData$ | async,\n  } as obs\"\n>\n  <v-table\n    *ngIf=\"obs.hasData || obs.loading\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    (editButtonClicked)=\"rowClicked($event)\"\n  ></v-table>\n\n  <v-paragraph *ngIf=\"!obs.hasData && !obs.loading\" [center]=\"true\">{{\n    'dossier.zaakobjecten.noObjectType' | translate\n  }}</v-paragraph>\n</ng-container>\n\n<v-modal #viewObjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i3.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter", "parentId"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: TitleModule }, { kind: "component", type: i3.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i3.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabObjectTypeComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3$1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierDetailTabObjectTypeComponent, isStandalone: true, selector: "valtimo-object-type", viewQueries: [{ propertyName: "viewObjectModal", first: true, predicate: ["viewObjectModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objects: objects$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async,\n    hasData: hasData$ | async,\n  } as obs\"\n>\n  <v-table\n    *ngIf=\"obs.hasData || obs.loading\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    (editButtonClicked)=\"rowClicked($event)\"\n  ></v-table>\n\n  <v-paragraph *ngIf=\"!obs.hasData && !obs.loading\" [center]=\"true\">{{\n    'dossier.zaakobjecten.noObjectType' | translate\n  }}</v-paragraph>\n</ng-container>\n\n<v-modal #viewObjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i3$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3$1.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter", "parentId"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: TitleModule }, { kind: "component", type: i3$1.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i3$1.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabObjectTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-object-type', standalone: true, imports: [CommonModule, TableModule, ParagraphModule, VModalModule, TitleModule, FormIoModule], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    objects: objects$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async,\n    hasData: hasData$ | async,\n  } as obs\"\n>\n  <v-table\n    *ngIf=\"obs.hasData || obs.loading\"\n    [loading]=\"obs.loading\"\n    [items]=\"obs.objects\"\n    [columns]=\"obs.columns\"\n    [showEditButtons]=\"true\"\n    editButtonTranslationKey=\"dossier.zaakobjecten.objectType.viewObject\"\n    [amountOfLoadingRows]=\"2\"\n    [itemsTranslationKey]=\"'pluginManagement.tableItemsText'\"\n    [showPagination]=\"false\"\n    (editButtonClicked)=\"rowClicked($event)\"\n  ></v-table>\n\n  <v-paragraph *ngIf=\"!obs.hasData && !obs.loading\" [center]=\"true\">{{\n    'dossier.zaakobjecten.noObjectType' | translate\n  }}</v-paragraph>\n</ng-container>\n\n<v-modal #viewObjectModal (closeEvent)=\"hide()\" [hideFooter]=\"true\" [maxWidthPx]=\"750\">\n  <div role=\"header\">\n    <v-title [margin]=\"false\" type=\"h2\" [fullWidth]=\"true\" [center]=\"true\">{{\n      objectName$ | async\n    }}</v-title>\n  </div>\n\n  <div role=\"content\">\n    <valtimo-form-io\n      *ngIf=\"(noFormDefinitionComponent$ | async) === false\"\n      [form]=\"objectForm$ | async\"\n    ></valtimo-form-io>\n    <v-paragraph *ngIf=\"noFormDefinitionComponent$ | async\" [center]=\"true\">{{\n      'dossier.zaakobjecten.noFormDefinitionComponent' | translate\n    }}</v-paragraph>\n  </div>\n</v-modal>\n", styles: ["/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3.ModalService }], propDecorators: { viewObjectModal: [{
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3$1.ModalService }], propDecorators: { viewObjectModal: [{
                 type: ViewChild,
                 args: ['viewObjectModal']
             }] } });
@@ -3115,13 +3824,13 @@ class DossierDetailTabContactMomentsComponent {
     refetchContactMoments() {
         this.refetchContactMoments$.next('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabContactMomentsComponent, deps: [{ token: ContactMomentService }, { token: i3.AlertService }, { token: i5.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierDetailTabContactMomentsComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-contact-moments", viewQueries: [{ propertyName: "modal", first: true, predicate: ["contactMomentsNoteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-note-plus\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n", styles: [".contact-moments-container{display:flex;flex-direction:column}.button-container{display:inline;align-self:flex-end}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule$1 }, { kind: "component", type: i3.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SpinnerModule }, { kind: "component", type: i3.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i3.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabContactMomentsComponent, deps: [{ token: ContactMomentService }, { token: i3$1.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierDetailTabContactMomentsComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-contact-moments", viewQueries: [{ propertyName: "modal", first: true, predicate: ["contactMomentsNoteModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-note-plus\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n", styles: [".contact-moments-container{display:flex;flex-direction:column}.button-container{display:inline;align-self:flex-end}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ModalModule$1 }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SpinnerModule }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i3$1.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierDetailTabContactMomentsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-detail-tab-contact-moments', standalone: true, imports: [CommonModule, ModalModule$1, TranslateModule, FormsModule, SpinnerModule, TimelineModule], template: "<!--\n  ~ Copyright 2015-2024 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=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-note-plus\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n", styles: [".contact-moments-container{display:flex;flex-direction:column}.button-container{display:inline;align-self:flex-end}\n/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: ContactMomentService }, { type: i3.AlertService }, { type: i5.TranslateService }], propDecorators: { modal: [{
+        }], ctorParameters: () => [{ type: ContactMomentService }, { type: i3$1.AlertService }, { type: i3.TranslateService }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['contactMomentsNoteModal']
             }] } });
@@ -3375,13 +4084,13 @@ class CustomerListComponent {
     clearFamilyName() {
         this.familyName$.next('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerListComponent, deps: [{ token: CustomerService }, { token: i5.TranslateService }, { token: i2.ConfigService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerListComponent, selector: "valtimo-customer-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div\n  class=\"main-content pt-0\"\n  *ngIf=\"{customers: customers$ | async, fields: fields$ | async} as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngIf=\"(loading$ | async) === false; else loading\">\n        <ng-container\n          *ngTemplateOutlet=\"list; context: {customers: obs.customers, fields: obs.fields}\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #list let-customers=\"customers\" let-fields=\"fields\">\n  <valtimo-widget>\n    <valtimo-list\n      [items]=\"customers\"\n      [fields]=\"fields\"\n      [header]=\"true\"\n      (rowClicked)=\"rowClick($event)\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">{{ 'customers.title' | translate }}</h3>\n        <h5 class=\"list-header-description\">{{ 'customers.subtitle' | translate }}</h5>\n      </div>\n    </valtimo-list>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">{{ 'customers.searchBasedOn' | translate }}</h4>\n    <div class=\"tab-container\">\n      <ul class=\"nav nav-tabs nav-tabs-classic\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link active\"\n            href=\"#search_bsn\"\n            data-toggle=\"tab\"\n            role=\"tab\"\n            aria-selected=\"true\"\n            ><b>{{ 'customers.citizenServiceNumber' | translate }}</b></a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            href=\"#search_birth_data\"\n            data-toggle=\"tab\"\n            role=\"tab\"\n            aria-selected=\"false\"\n            ><b>{{ 'customers.lastNameAndDateOfBirth' | translate }}</b></a\n          >\n        </li>\n      </ul>\n      <div class=\"tab-content\">\n        <div class=\"tab-pane active\" id=\"search_bsn\" role=\"tabpanel\">\n          <ng-container *ngTemplateOutlet=\"bsnTab\"></ng-container>\n        </div>\n        <div class=\"tab-pane\" id=\"search_birth_data\" role=\"tabpanel\">\n          <ng-container *ngTemplateOutlet=\"birthDataTab\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n\n<ng-template #bsnTab>\n  <form>\n    <div class=\"form-group pt-2\">\n      <label for=\"inputBsn\">{{ 'customers.citizenServiceNumber' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputBsn\"\n        type=\"text\"\n        name=\"bsn\"\n        [placeholder]=\"'customers.citizenServiceNumberPlaceholder' | translate\"\n        [ngModel]=\"bsn$ | async\"\n        (ngModelChange)=\"bsnChange($event)\"\n        [ngClass]=\"{'is-valid': bsnValid$ | async}\"\n      />\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #birthDataTab>\n  <form>\n    <div class=\"form-group pt-2\">\n      <label for=\"inputDateOfBirth\">{{ 'customers.dateOfBirth' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputDateOfBirth\"\n        type=\"text\"\n        name=\"dateOfBirth\"\n        [placeholder]=\"'customers.dateOfBirthPlaceholder' | translate\"\n        [ngModel]=\"dateOfBirth$ | async\"\n        (ngModelChange)=\"dateOfBirthChange($event)\"\n        [ngClass]=\"{'is-valid': dateOfBirthValid$ | async}\"\n      />\n    </div>\n    <div class=\"form-group\">\n      <label for=\"inputFamilyName\">{{ 'customers.familyName' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputFamilyName\"\n        type=\"text\"\n        name=\"familyName\"\n        [placeholder]=\"'customers.familyNamePlaceholder' | translate\"\n        [ngModel]=\"familyName$ | async\"\n        (ngModelChange)=\"familyNameChange($event)\"\n        [ngClass]=\"{'is-valid': familyName$ | async}\"\n      />\n    </div>\n  </form>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i3.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i3.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i3.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerListComponent, deps: [{ token: CustomerService }, { token: i3.TranslateService }, { token: i2.ConfigService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CustomerListComponent, selector: "valtimo-customer-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div\n  class=\"main-content pt-0\"\n  *ngIf=\"{customers: customers$ | async, fields: fields$ | async} as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngIf=\"(loading$ | async) === false; else loading\">\n        <ng-container\n          *ngTemplateOutlet=\"list; context: {customers: obs.customers, fields: obs.fields}\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #list let-customers=\"customers\" let-fields=\"fields\">\n  <valtimo-widget>\n    <valtimo-list\n      [items]=\"customers\"\n      [fields]=\"fields\"\n      [header]=\"true\"\n      (rowClicked)=\"rowClick($event)\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">{{ 'customers.title' | translate }}</h3>\n        <h5 class=\"list-header-description\">{{ 'customers.subtitle' | translate }}</h5>\n      </div>\n    </valtimo-list>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">{{ 'customers.searchBasedOn' | translate }}</h4>\n    <div class=\"tab-container\">\n      <ul class=\"nav nav-tabs nav-tabs-classic\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link active\"\n            href=\"#search_bsn\"\n            data-toggle=\"tab\"\n            role=\"tab\"\n            aria-selected=\"true\"\n            ><b>{{ 'customers.citizenServiceNumber' | translate }}</b></a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            href=\"#search_birth_data\"\n            data-toggle=\"tab\"\n            role=\"tab\"\n            aria-selected=\"false\"\n            ><b>{{ 'customers.lastNameAndDateOfBirth' | translate }}</b></a\n          >\n        </li>\n      </ul>\n      <div class=\"tab-content\">\n        <div class=\"tab-pane active\" id=\"search_bsn\" role=\"tabpanel\">\n          <ng-container *ngTemplateOutlet=\"bsnTab\"></ng-container>\n        </div>\n        <div class=\"tab-pane\" id=\"search_birth_data\" role=\"tabpanel\">\n          <ng-container *ngTemplateOutlet=\"birthDataTab\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n\n<ng-template #bsnTab>\n  <form>\n    <div class=\"form-group pt-2\">\n      <label for=\"inputBsn\">{{ 'customers.citizenServiceNumber' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputBsn\"\n        type=\"text\"\n        name=\"bsn\"\n        [placeholder]=\"'customers.citizenServiceNumberPlaceholder' | translate\"\n        [ngModel]=\"bsn$ | async\"\n        (ngModelChange)=\"bsnChange($event)\"\n        [ngClass]=\"{'is-valid': bsnValid$ | async}\"\n      />\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #birthDataTab>\n  <form>\n    <div class=\"form-group pt-2\">\n      <label for=\"inputDateOfBirth\">{{ 'customers.dateOfBirth' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputDateOfBirth\"\n        type=\"text\"\n        name=\"dateOfBirth\"\n        [placeholder]=\"'customers.dateOfBirthPlaceholder' | translate\"\n        [ngModel]=\"dateOfBirth$ | async\"\n        (ngModelChange)=\"dateOfBirthChange($event)\"\n        [ngClass]=\"{'is-valid': dateOfBirthValid$ | async}\"\n      />\n    </div>\n    <div class=\"form-group\">\n      <label for=\"inputFamilyName\">{{ 'customers.familyName' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputFamilyName\"\n        type=\"text\"\n        name=\"familyName\"\n        [placeholder]=\"'customers.familyNamePlaceholder' | translate\"\n        [ngModel]=\"familyName$ | async\"\n        (ngModelChange)=\"familyNameChange($event)\"\n        [ngClass]=\"{'is-valid': familyName$ | async}\"\n      />\n    </div>\n  </form>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i3$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i3$1.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CustomerListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-customer-list', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div\n  class=\"main-content pt-0\"\n  *ngIf=\"{customers: customers$ | async, fields: fields$ | async} as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <ng-container *ngIf=\"(loading$ | async) === false; else loading\">\n        <ng-container\n          *ngTemplateOutlet=\"list; context: {customers: obs.customers, fields: obs.fields}\"\n        ></ng-container>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #list let-customers=\"customers\" let-fields=\"fields\">\n  <valtimo-widget>\n    <valtimo-list\n      [items]=\"customers\"\n      [fields]=\"fields\"\n      [header]=\"true\"\n      (rowClicked)=\"rowClick($event)\"\n    >\n      <div header>\n        <h3 class=\"list-header-title\">{{ 'customers.title' | translate }}</h3>\n        <h5 class=\"list-header-description\">{{ 'customers.subtitle' | translate }}</h5>\n      </div>\n    </valtimo-list>\n  </valtimo-widget>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">{{ 'customers.searchBasedOn' | translate }}</h4>\n    <div class=\"tab-container\">\n      <ul class=\"nav nav-tabs nav-tabs-classic\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link active\"\n            href=\"#search_bsn\"\n            data-toggle=\"tab\"\n            role=\"tab\"\n            aria-selected=\"true\"\n            ><b>{{ 'customers.citizenServiceNumber' | translate }}</b></a\n          >\n        </li>\n        <li class=\"nav-item\">\n          <a\n            class=\"nav-link\"\n            href=\"#search_birth_data\"\n            data-toggle=\"tab\"\n            role=\"tab\"\n            aria-selected=\"false\"\n            ><b>{{ 'customers.lastNameAndDateOfBirth' | translate }}</b></a\n          >\n        </li>\n      </ul>\n      <div class=\"tab-content\">\n        <div class=\"tab-pane active\" id=\"search_bsn\" role=\"tabpanel\">\n          <ng-container *ngTemplateOutlet=\"bsnTab\"></ng-container>\n        </div>\n        <div class=\"tab-pane\" id=\"search_birth_data\" role=\"tabpanel\">\n          <ng-container *ngTemplateOutlet=\"birthDataTab\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n\n<ng-template #bsnTab>\n  <form>\n    <div class=\"form-group pt-2\">\n      <label for=\"inputBsn\">{{ 'customers.citizenServiceNumber' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputBsn\"\n        type=\"text\"\n        name=\"bsn\"\n        [placeholder]=\"'customers.citizenServiceNumberPlaceholder' | translate\"\n        [ngModel]=\"bsn$ | async\"\n        (ngModelChange)=\"bsnChange($event)\"\n        [ngClass]=\"{'is-valid': bsnValid$ | async}\"\n      />\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #birthDataTab>\n  <form>\n    <div class=\"form-group pt-2\">\n      <label for=\"inputDateOfBirth\">{{ 'customers.dateOfBirth' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputDateOfBirth\"\n        type=\"text\"\n        name=\"dateOfBirth\"\n        [placeholder]=\"'customers.dateOfBirthPlaceholder' | translate\"\n        [ngModel]=\"dateOfBirth$ | async\"\n        (ngModelChange)=\"dateOfBirthChange($event)\"\n        [ngClass]=\"{'is-valid': dateOfBirthValid$ | async}\"\n      />\n    </div>\n    <div class=\"form-group\">\n      <label for=\"inputFamilyName\">{{ 'customers.familyName' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"inputFamilyName\"\n        type=\"text\"\n        name=\"familyName\"\n        [placeholder]=\"'customers.familyNamePlaceholder' | translate\"\n        [ngModel]=\"familyName$ | async\"\n        (ngModelChange)=\"familyNameChange($event)\"\n        [ngClass]=\"{'is-valid': familyName$ | async}\"\n      />\n    </div>\n  </form>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: CustomerService }, { type: i5.TranslateService }, { type: i2.ConfigService }, { type: i1$2.Router }] });
+        }], ctorParameters: () => [{ type: CustomerService }, { type: i3.TranslateService }, { type: i2.ConfigService }, { type: i1$2.Router }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3423,7 +4132,7 @@ class CasesListComponent {
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CasesListComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: CustomerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CasesListComponent, selector: "valtimo-cases-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-page-container\n  *ngIf=\"{\n    customerCases: customerCases$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async,\n  } as obs\"\n>\n  <v-page-header>\n    <v-page-header-introduction>\n      <v-title>{{ 'pages.customercases.title' | translate }}</v-title>\n      <v-paragraph>{{ 'pages.customercases.description' | translate }}</v-paragraph>\n    </v-page-header-introduction>\n  </v-page-header>\n  <v-page-content>\n    <v-table\n      [loading]=\"obs.loading\"\n      [items]=\"obs.customerCases\"\n      [columns]=\"obs.columns\"\n      [showEditButtons]=\"false\"\n      [amountOfLoadingRows]=\"2\"\n      [itemsTranslationKey]=\"'customerCases.tableItemsText'\"\n      [showPagination]=\"false\"\n    ></v-table>\n  </v-page-content>\n</v-page-container>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PageContainerComponent, selector: "v-page-container" }, { kind: "component", type: i3.PageContentComponent, selector: "v-page-content" }, { kind: "component", type: i3.VPageHeaderComponent, selector: "v-page-header" }, { kind: "component", type: i3.PageHeaderIntroductionComponent, selector: "v-page-header-introduction" }, { kind: "component", type: i3.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i3.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "component", type: i3.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CasesListComponent, selector: "valtimo-cases-list", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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-page-container\n  *ngIf=\"{\n    customerCases: customerCases$ | async,\n    columns: columns$ | async,\n    loading: loading$ | async,\n  } as obs\"\n>\n  <v-page-header>\n    <v-page-header-introduction>\n      <v-title>{{ 'pages.customercases.title' | translate }}</v-title>\n      <v-paragraph>{{ 'pages.customercases.description' | translate }}</v-paragraph>\n    </v-page-header-introduction>\n  </v-page-header>\n  <v-page-content>\n    <v-table\n      [loading]=\"obs.loading\"\n      [items]=\"obs.customerCases\"\n      [columns]=\"obs.columns\"\n      [showEditButtons]=\"false\"\n      [amountOfLoadingRows]=\"2\"\n      [itemsTranslationKey]=\"'customerCases.tableItemsText'\"\n      [showPagination]=\"false\"\n    ></v-table>\n  </v-page-content>\n</v-page-container>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.PageContainerComponent, selector: "v-page-container" }, { kind: "component", type: i3$1.PageContentComponent, selector: "v-page-content" }, { kind: "component", type: i3$1.VPageHeaderComponent, selector: "v-page-header" }, { kind: "component", type: i3$1.PageHeaderIntroductionComponent, selector: "v-page-header-introduction" }, { kind: "component", type: i3$1.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i3$1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "component", type: i3$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CasesListComponent, decorators: [{
             type: Component,
@@ -3708,8 +4417,8 @@ class DocumentObjectenApiSyncComponent {
     hideModal() {
         this.modalShowing$.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentObjectenApiSyncComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: DocumentObjectenApiSyncService }, { token: i3.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentObjectenApiSyncComponent, isStandalone: true, selector: "valtimo-document-objecten-api-sync", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"input-group mt-4 mb-2 align-items-center\">\n  <div>\n    <h2>{{ 'zaakdetails.title' | translate }}</h2>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentObjectenApiSync: documentObjectenApiSync$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container *ngIf=\"obs.documentObjectenApiSync; else addSync\">\n      <div class=\"card card-border card-contrast\">\n        <div class=\"card-header card-header-contrast card-header-featured\">\n          <div>\n            {{ obs.documentObjectenApiSync.objectManagementConfigurationTitle || '-' }}\n          </div>\n          <div class=\"controls\">\n            <button class=\"btn btn-danger ml-3\" (click)=\"showModal()\">\n              <i class=\"icon mdi mdi-pencil\"></i>\n            </button>\n            <button class=\"btn btn-danger ml-3\" (click)=\"remove()\">\n              <i class=\"icon mdi mdi-delete\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'zaakdetails.enabled' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{\n                obs.documentObjectenApiSync?.enabled\n                  ? ('zaakdetails.yes' | translate)\n                  : ('zaakdetails.no' | translate)\n              }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'zaakdetails.objectManagementConfigurationTitle' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ obs.documentObjectenApiSync.objectManagementConfigurationTitle || '-' }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<ng-template #addSync>\n  <div class=\"text-right mt-5\">\n    <button class=\"btn btn-primary\" (click)=\"showModal()\">\n      <i class=\"icon mdi mdi-plus mr-1\"></i>{{ 'zaakdetails.submitButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"'zaakdetails.editModal.title' | translate\"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{ 'zaakdetails.editModal.title' | translate }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <form [formGroup]=\"formGroup\">\n        <v-select\n          *ngIf=\"objectManagementConfigurationItems$ | async as objectManagementConfigurations\"\n          [appendInline]=\"false\"\n          [dropUp]=\"false\"\n          [items]=\"objectManagementConfigurations\"\n          [defaultSelectionId]=\"objectManagementConfigurationId.getRawValue()\"\n          [placeholder]=\"\n            'zaakdetails.editModal.objectManagementConfigurationPlaceholder' | translate\n          \"\n          [title]=\"'zaakdetails.editModal.objectManagementConfiguration' | translate\"\n          [disabled]=\"false\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"objectManagementConfigurationId\"\n          [carbonTheme]=\"currentTheme$ | async\"\n          (selectedChange)=\"configSelected($event)\"\n        ></v-select>\n\n        <cds-checkbox formControlName=\"enabled\"\n          >{{ 'zaakdetails.editModal.enabled' | translate }}\n        </cds-checkbox>\n      </form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onModalClose()\" [disabled]=\"false\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button cdsButton=\"primary\" [disabled]=\"!formGroup.valid\" (click)=\"submit()\">\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"mb-8\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #noConfigAvailable>\n  <div class=\"mb-8\">\n    <h4>{{ 'zaakdetails.error.configNotFound' | translate }}</h4>\n  </div>\n</ng-template>\n", styles: [".card-header,.setting-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.controls{display:flex;align-items:center}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SpinnerModule }, { kind: "component", type: i3.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "ngmodule", type: FormModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: ValtimoCdsModalDirectiveModule }, { kind: "directive", type: i3.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5$1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i5$1.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i5$1.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i5$1.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i5$1.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i5$1.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentObjectenApiSyncComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: DocumentObjectenApiSyncService }, { token: i3$1.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DocumentObjectenApiSyncComponent, isStandalone: true, selector: "valtimo-document-objecten-api-sync", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"input-group mt-4 mb-2 align-items-center\">\n  <div>\n    <h2>{{ 'zaakdetails.title' | translate }}</h2>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentObjectenApiSync: documentObjectenApiSync$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container *ngIf=\"obs.documentObjectenApiSync; else addSync\">\n      <div class=\"card card-border card-contrast\">\n        <div class=\"card-header card-header-contrast card-header-featured\">\n          <div>\n            {{ obs.documentObjectenApiSync.objectManagementConfigurationTitle || '-' }}\n          </div>\n          <div class=\"controls\">\n            <button class=\"btn btn-danger ml-3\" (click)=\"showModal()\">\n              <i class=\"icon mdi mdi-pencil\"></i>\n            </button>\n            <button class=\"btn btn-danger ml-3\" (click)=\"remove()\">\n              <i class=\"icon mdi mdi-delete\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'zaakdetails.enabled' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{\n                obs.documentObjectenApiSync?.enabled\n                  ? ('zaakdetails.yes' | translate)\n                  : ('zaakdetails.no' | translate)\n              }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'zaakdetails.objectManagementConfigurationTitle' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ obs.documentObjectenApiSync.objectManagementConfigurationTitle || '-' }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<ng-template #addSync>\n  <div class=\"text-right mt-5\">\n    <button class=\"btn btn-primary\" (click)=\"showModal()\">\n      <i class=\"icon mdi mdi-plus mr-1\"></i>{{ 'zaakdetails.submitButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"'zaakdetails.editModal.title' | translate\"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{ 'zaakdetails.editModal.title' | translate }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <form [formGroup]=\"formGroup\">\n        <v-select\n          *ngIf=\"objectManagementConfigurationItems$ | async as objectManagementConfigurations\"\n          [appendInline]=\"false\"\n          [dropUp]=\"false\"\n          [items]=\"objectManagementConfigurations\"\n          [defaultSelectionId]=\"objectManagementConfigurationId.getRawValue()\"\n          [placeholder]=\"\n            'zaakdetails.editModal.objectManagementConfigurationPlaceholder' | translate\n          \"\n          [title]=\"'zaakdetails.editModal.objectManagementConfiguration' | translate\"\n          [disabled]=\"false\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"objectManagementConfigurationId\"\n          [carbonTheme]=\"currentTheme$ | async\"\n          (selectedChange)=\"configSelected($event)\"\n        ></v-select>\n\n        <cds-checkbox formControlName=\"enabled\"\n          >{{ 'zaakdetails.editModal.enabled' | translate }}\n        </cds-checkbox>\n      </form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onModalClose()\" [disabled]=\"false\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button cdsButton=\"primary\" [disabled]=\"!formGroup.valid\" (click)=\"submit()\">\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"mb-8\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #noConfigAvailable>\n  <div class=\"mb-8\">\n    <h4>{{ 'zaakdetails.error.configNotFound' | translate }}</h4>\n  </div>\n</ng-template>\n", styles: [".card-header,.setting-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.controls{display:flex;align-items:center}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SpinnerModule }, { kind: "component", type: i3$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "ngmodule", type: FormModule }, { kind: "ngmodule", type: InputModule$1 }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: ValtimoCdsModalDirectiveModule }, { kind: "directive", type: i3$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i6.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i6.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i6.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i6.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i6.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i6.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DocumentObjectenApiSyncComponent, decorators: [{
             type: Component,
@@ -3727,7 +4436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ButtonModule,
                         ModalModule,
                     ], template: "<!--\n  ~ Copyright 2015-2024 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=\"input-group mt-4 mb-2 align-items-center\">\n  <div>\n    <h2>{{ 'zaakdetails.title' | translate }}</h2>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentObjectenApiSync: documentObjectenApiSync$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container *ngIf=\"obs.documentObjectenApiSync; else addSync\">\n      <div class=\"card card-border card-contrast\">\n        <div class=\"card-header card-header-contrast card-header-featured\">\n          <div>\n            {{ obs.documentObjectenApiSync.objectManagementConfigurationTitle || '-' }}\n          </div>\n          <div class=\"controls\">\n            <button class=\"btn btn-danger ml-3\" (click)=\"showModal()\">\n              <i class=\"icon mdi mdi-pencil\"></i>\n            </button>\n            <button class=\"btn btn-danger ml-3\" (click)=\"remove()\">\n              <i class=\"icon mdi mdi-delete\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'zaakdetails.enabled' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{\n                obs.documentObjectenApiSync?.enabled\n                  ? ('zaakdetails.yes' | translate)\n                  : ('zaakdetails.no' | translate)\n              }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'zaakdetails.objectManagementConfigurationTitle' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ obs.documentObjectenApiSync.objectManagementConfigurationTitle || '-' }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<ng-template #addSync>\n  <div class=\"text-right mt-5\">\n    <button class=\"btn btn-primary\" (click)=\"showModal()\">\n      <i class=\"icon mdi mdi-plus mr-1\"></i>{{ 'zaakdetails.submitButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"'zaakdetails.editModal.title' | translate\"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{ 'zaakdetails.editModal.title' | translate }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <form [formGroup]=\"formGroup\">\n        <v-select\n          *ngIf=\"objectManagementConfigurationItems$ | async as objectManagementConfigurations\"\n          [appendInline]=\"false\"\n          [dropUp]=\"false\"\n          [items]=\"objectManagementConfigurations\"\n          [defaultSelectionId]=\"objectManagementConfigurationId.getRawValue()\"\n          [placeholder]=\"\n            'zaakdetails.editModal.objectManagementConfigurationPlaceholder' | translate\n          \"\n          [title]=\"'zaakdetails.editModal.objectManagementConfiguration' | translate\"\n          [disabled]=\"false\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"objectManagementConfigurationId\"\n          [carbonTheme]=\"currentTheme$ | async\"\n          (selectedChange)=\"configSelected($event)\"\n        ></v-select>\n\n        <cds-checkbox formControlName=\"enabled\"\n          >{{ 'zaakdetails.editModal.enabled' | translate }}\n        </cds-checkbox>\n      </form>\n    </section>\n\n    <cds-modal-footer>\n      <ng-container *ngTemplateOutlet=\"buttonsFooterModal; context: {obs: obs}\"></ng-container>\n    </cds-modal-footer>\n  </cds-modal>\n</ng-template>\n\n<ng-template #buttonsFooterModal let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onModalClose()\" [disabled]=\"false\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button cdsButton=\"primary\" [disabled]=\"!formGroup.valid\" (click)=\"submit()\">\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <div class=\"mb-8\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #noConfigAvailable>\n  <div class=\"mb-8\">\n    <h4>{{ 'zaakdetails.error.configNotFound' | translate }}</h4>\n  </div>\n</ng-template>\n", styles: [".card-header,.setting-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.controls{display:flex;align-items:center}\n/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: DocumentObjectenApiSyncService }, { type: i3.CdsThemeService }] });
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: DocumentObjectenApiSyncService }, { type: i3$1.CdsThemeService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3981,13 +4690,13 @@ class ZakenApiZaaktypeLinkComponent {
             this.toasterService.error('Failed to link zaaktype to dossier');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZakenApiZaaktypeLinkComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.OpenZaakService }, { token: i3.AlertService }, { token: i4$1.ToastrService }, { token: i5.TranslateService }, { token: ZakenApiZaaktypeLinkService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZakenApiZaaktypeLinkComponent, isStandalone: true, selector: "valtimo-zaken-api-zaaktype-link", viewQueries: [{ propertyName: "modal", first: true, predicate: ["openZaakTypeLinkModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"input-group mt-4 mb-2 align-items-center\">\n  <div>\n    <h2>{{ 'openZaak.links' | translate }}</h2>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    zaakTypeLink: zaakTypeLink$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container *ngIf=\"obs.zaakTypeLink; else addSync\">\n      <div class=\"card card-border card-contrast\">\n        <div class=\"card-header card-header-contrast card-header-featured\">\n          <div>\n            {{ this.selectedZaakType?.omschrijving || '-' }}\n          </div>\n          <div class=\"controls\">\n            <button class=\"btn btn-danger ml-3\" (click)=\"openModal(obs.zaakTypeLink)\">\n              <i class=\"icon mdi mdi-pencil\"></i>\n            </button>\n            <button class=\"btn btn-danger ml-3\" (click)=\"removeZaakTypeLink()\">\n              <i class=\"icon mdi mdi-delete\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.autoCreateForCase' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{\n                obs.zaakTypeLink?.createWithDossier\n                  ? ('viewTypeConverter.Yes' | translate)\n                  : ('viewTypeConverter.No' | translate)\n              }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.zakenApiPlugin' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ this.selectedPluginConfiguration?.title || '-' }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.rsin' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ obs.zaakTypeLink?.rsin || '-' }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #addSync>\n  <div class=\"text-right mt-5\">\n    <button class=\"btn btn-primary\" (click)=\"openModal(null)\">\n      <i class=\"icon mdi mdi-plus mr-1\"></i>{{ 'openZaak.linkZaakType' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<valtimo-modal\n  #openZaakTypeLinkModal\n  elementId=\"openZaakTypeLinkModal\"\n  [title]=\"'Zaak types'\"\n  subtitle=\"Connect Zaak type to Dossier\"\n  showFooter=\"true\"\n>\n  <div body>\n    <p>{{ 'openZaak.selectZaakTypeForCase' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"this.zaakTypeLinkRequest.zaakTypeUrl\">\n        <option [ngValue]=\"null\">{{ 'openZaak.selectZaakType' | translate }}</option>\n        <option *ngFor=\"let zaakType of zaakTypes\" [ngValue]=\"zaakType.url\">\n          {{ zaakType?.omschrijving || '-' }}\n        </option>\n      </select>\n    </div>\n\n    <p>{{ 'openZaak.selectZakenApiPluginForCase' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <select\n        class=\"form-control\"\n        [(ngModel)]=\"this.zaakTypeLinkRequest.zakenApiPluginConfigurationId\"\n      >\n        <option [ngValue]=\"null\">{{ 'openZaak.selectZakenApiPlugin' | translate }}</option>\n        <option\n          *ngFor=\"let pluginConfiguration of pluginConfigurations\"\n          [ngValue]=\"pluginConfiguration.id\"\n        >\n          {{ pluginConfiguration?.title || '-' }}\n        </option>\n      </select>\n    </div>\n\n    <p>{{ 'openZaak.rsin' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <input\n        type=\"text\"\n        id=\"name\"\n        class=\"form-control\"\n        placeholder=\"RSIN\"\n        [(ngModel)]=\"this.zaakTypeLinkRequest.rsin\"\n      />\n    </div>\n\n    <div class=\"setting-row\">\n      <p>{{ 'openZaak.autoCreateForCase' | translate }}</p>\n      <div class=\"controls\">\n        <div class=\"switch-button switch-button-success\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"this.zaakTypeLinkRequest.createWithDossier\"\n            name=\"createWithDossier\"\n            id=\"createWithDossier\"\n            (change)=\"\n              this.zaakTypeLinkRequest.createWithDossier =\n                !this.zaakTypeLinkRequest.createWithDossier\n            \"\n          />\n          <span><label for=\"createWithDossier\"></label></span>\n        </div>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"informatieObjectTypeSelectionEnabled && selectedZaakType\"\n      class=\"input-group mb-3 align-items-center\"\n    >\n      <select class=\"form-control\" [(ngModel)]=\"selectedInformatieObjectTypeUrl\">\n        <option [ngValue]=\"null\" selected>{{ 'openZaak.selectInfoObjectType' | translate }}</option>\n        <option\n          *ngFor=\"let informatieObjectType of informatieObjectTypes\"\n          [ngValue]=\"informatieObjectType.url\"\n        >\n          {{ informatieObjectType?.omschrijving || '-' }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!this.zaakTypeLinkRequest.zaakTypeUrl\"\n    >\n      <i class=\"icon mdi mdi-save\"></i>\n      {{ 'openZaak.save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n\n<ng-template #loading>\n  <div class=\"mb-8\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #noConfigAvailable>\n  <div class=\"mb-8\">\n    <h4>{{ 'openZaak.error.configNotFound' | translate }}</h4>\n  </div>\n</ng-template>\n", styles: [".card-header,.setting-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.controls{display:flex;align-items:center}.full-width-notification{max-inline-size:100%;min-inline-size:100%}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ModalModule$1 }, { kind: "component", type: i3.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZakenApiZaaktypeLinkComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i2$1.OpenZaakService }, { token: i3$1.AlertService }, { token: i4$1.ToastrService }, { token: i3.TranslateService }, { token: ZakenApiZaaktypeLinkService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZakenApiZaaktypeLinkComponent, isStandalone: true, selector: "valtimo-zaken-api-zaaktype-link", viewQueries: [{ propertyName: "modal", first: true, predicate: ["openZaakTypeLinkModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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=\"input-group mt-4 mb-2 align-items-center\">\n  <div>\n    <h2>{{ 'openZaak.links' | translate }}</h2>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    zaakTypeLink: zaakTypeLink$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container *ngIf=\"obs.zaakTypeLink; else addSync\">\n      <div class=\"card card-border card-contrast\">\n        <div class=\"card-header card-header-contrast card-header-featured\">\n          <div>\n            {{ this.selectedZaakType?.omschrijving || '-' }}\n          </div>\n          <div class=\"controls\">\n            <button class=\"btn btn-danger ml-3\" (click)=\"openModal(obs.zaakTypeLink)\">\n              <i class=\"icon mdi mdi-pencil\"></i>\n            </button>\n            <button class=\"btn btn-danger ml-3\" (click)=\"removeZaakTypeLink()\">\n              <i class=\"icon mdi mdi-delete\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.autoCreateForCase' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{\n                obs.zaakTypeLink?.createWithDossier\n                  ? ('viewTypeConverter.Yes' | translate)\n                  : ('viewTypeConverter.No' | translate)\n              }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.zakenApiPlugin' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ this.selectedPluginConfiguration?.title || '-' }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.rsin' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ obs.zaakTypeLink?.rsin || '-' }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #addSync>\n  <div class=\"text-right mt-5\">\n    <button class=\"btn btn-primary\" (click)=\"openModal(null)\">\n      <i class=\"icon mdi mdi-plus mr-1\"></i>{{ 'openZaak.linkZaakType' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<valtimo-modal\n  #openZaakTypeLinkModal\n  elementId=\"openZaakTypeLinkModal\"\n  [title]=\"'Zaak types'\"\n  subtitle=\"Connect Zaak type to Dossier\"\n  showFooter=\"true\"\n>\n  <div body>\n    <p>{{ 'openZaak.selectZaakTypeForCase' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"this.zaakTypeLinkRequest.zaakTypeUrl\">\n        <option [ngValue]=\"null\">{{ 'openZaak.selectZaakType' | translate }}</option>\n        <option *ngFor=\"let zaakType of zaakTypes\" [ngValue]=\"zaakType.url\">\n          {{ zaakType?.omschrijving || '-' }}\n        </option>\n      </select>\n    </div>\n\n    <p>{{ 'openZaak.selectZakenApiPluginForCase' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <select\n        class=\"form-control\"\n        [(ngModel)]=\"this.zaakTypeLinkRequest.zakenApiPluginConfigurationId\"\n      >\n        <option [ngValue]=\"null\">{{ 'openZaak.selectZakenApiPlugin' | translate }}</option>\n        <option\n          *ngFor=\"let pluginConfiguration of pluginConfigurations\"\n          [ngValue]=\"pluginConfiguration.id\"\n        >\n          {{ pluginConfiguration?.title || '-' }}\n        </option>\n      </select>\n    </div>\n\n    <p>{{ 'openZaak.rsin' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <input\n        type=\"text\"\n        id=\"name\"\n        class=\"form-control\"\n        placeholder=\"RSIN\"\n        [(ngModel)]=\"this.zaakTypeLinkRequest.rsin\"\n      />\n    </div>\n\n    <div class=\"setting-row\">\n      <p>{{ 'openZaak.autoCreateForCase' | translate }}</p>\n      <div class=\"controls\">\n        <div class=\"switch-button switch-button-success\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"this.zaakTypeLinkRequest.createWithDossier\"\n            name=\"createWithDossier\"\n            id=\"createWithDossier\"\n            (change)=\"\n              this.zaakTypeLinkRequest.createWithDossier =\n                !this.zaakTypeLinkRequest.createWithDossier\n            \"\n          />\n          <span><label for=\"createWithDossier\"></label></span>\n        </div>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"informatieObjectTypeSelectionEnabled && selectedZaakType\"\n      class=\"input-group mb-3 align-items-center\"\n    >\n      <select class=\"form-control\" [(ngModel)]=\"selectedInformatieObjectTypeUrl\">\n        <option [ngValue]=\"null\" selected>{{ 'openZaak.selectInfoObjectType' | translate }}</option>\n        <option\n          *ngFor=\"let informatieObjectType of informatieObjectTypes\"\n          [ngValue]=\"informatieObjectType.url\"\n        >\n          {{ informatieObjectType?.omschrijving || '-' }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!this.zaakTypeLinkRequest.zaakTypeUrl\"\n    >\n      <i class=\"icon mdi mdi-save\"></i>\n      {{ 'openZaak.save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n\n<ng-template #loading>\n  <div class=\"mb-8\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #noConfigAvailable>\n  <div class=\"mb-8\">\n    <h4>{{ 'openZaak.error.configNotFound' | translate }}</h4>\n  </div>\n</ng-template>\n", styles: [".card-header,.setting-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.controls{display:flex;align-items:center}.full-width-notification{max-inline-size:100%;min-inline-size:100%}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ModalModule$1 }, { kind: "component", type: i3$1.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZakenApiZaaktypeLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-zaken-api-zaaktype-link', standalone: true, imports: [CommonModule, FormsModule, ModalModule$1, NotificationModule, TranslateModule], template: "<!--\n  ~ Copyright 2015-2024 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=\"input-group mt-4 mb-2 align-items-center\">\n  <div>\n    <h2>{{ 'openZaak.links' | translate }}</h2>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"{\n    loading: loading$ | async,\n    zaakTypeLink: zaakTypeLink$ | async,\n  } as obs\"\n>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <ng-container *ngIf=\"obs.zaakTypeLink; else addSync\">\n      <div class=\"card card-border card-contrast\">\n        <div class=\"card-header card-header-contrast card-header-featured\">\n          <div>\n            {{ this.selectedZaakType?.omschrijving || '-' }}\n          </div>\n          <div class=\"controls\">\n            <button class=\"btn btn-danger ml-3\" (click)=\"openModal(obs.zaakTypeLink)\">\n              <i class=\"icon mdi mdi-pencil\"></i>\n            </button>\n            <button class=\"btn btn-danger ml-3\" (click)=\"removeZaakTypeLink()\">\n              <i class=\"icon mdi mdi-delete\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.autoCreateForCase' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{\n                obs.zaakTypeLink?.createWithDossier\n                  ? ('viewTypeConverter.Yes' | translate)\n                  : ('viewTypeConverter.No' | translate)\n              }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.zakenApiPlugin' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ this.selectedPluginConfiguration?.title || '-' }}\n            </div>\n          </div>\n          <div class=\"row pt-3 mt-1\">\n            <div class=\"col-3\">\n              <strong>{{ 'openZaak.rsin' | translate }}</strong>\n            </div>\n            <div class=\"col-3\">\n              {{ obs.zaakTypeLink?.rsin || '-' }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #addSync>\n  <div class=\"text-right mt-5\">\n    <button class=\"btn btn-primary\" (click)=\"openModal(null)\">\n      <i class=\"icon mdi mdi-plus mr-1\"></i>{{ 'openZaak.linkZaakType' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<valtimo-modal\n  #openZaakTypeLinkModal\n  elementId=\"openZaakTypeLinkModal\"\n  [title]=\"'Zaak types'\"\n  subtitle=\"Connect Zaak type to Dossier\"\n  showFooter=\"true\"\n>\n  <div body>\n    <p>{{ 'openZaak.selectZaakTypeForCase' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <select class=\"form-control\" [(ngModel)]=\"this.zaakTypeLinkRequest.zaakTypeUrl\">\n        <option [ngValue]=\"null\">{{ 'openZaak.selectZaakType' | translate }}</option>\n        <option *ngFor=\"let zaakType of zaakTypes\" [ngValue]=\"zaakType.url\">\n          {{ zaakType?.omschrijving || '-' }}\n        </option>\n      </select>\n    </div>\n\n    <p>{{ 'openZaak.selectZakenApiPluginForCase' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <select\n        class=\"form-control\"\n        [(ngModel)]=\"this.zaakTypeLinkRequest.zakenApiPluginConfigurationId\"\n      >\n        <option [ngValue]=\"null\">{{ 'openZaak.selectZakenApiPlugin' | translate }}</option>\n        <option\n          *ngFor=\"let pluginConfiguration of pluginConfigurations\"\n          [ngValue]=\"pluginConfiguration.id\"\n        >\n          {{ pluginConfiguration?.title || '-' }}\n        </option>\n      </select>\n    </div>\n\n    <p>{{ 'openZaak.rsin' | translate }}</p>\n    <div class=\"input-group mb-3 mr-3 align-items-center\">\n      <input\n        type=\"text\"\n        id=\"name\"\n        class=\"form-control\"\n        placeholder=\"RSIN\"\n        [(ngModel)]=\"this.zaakTypeLinkRequest.rsin\"\n      />\n    </div>\n\n    <div class=\"setting-row\">\n      <p>{{ 'openZaak.autoCreateForCase' | translate }}</p>\n      <div class=\"controls\">\n        <div class=\"switch-button switch-button-success\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"this.zaakTypeLinkRequest.createWithDossier\"\n            name=\"createWithDossier\"\n            id=\"createWithDossier\"\n            (change)=\"\n              this.zaakTypeLinkRequest.createWithDossier =\n                !this.zaakTypeLinkRequest.createWithDossier\n            \"\n          />\n          <span><label for=\"createWithDossier\"></label></span>\n        </div>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"informatieObjectTypeSelectionEnabled && selectedZaakType\"\n      class=\"input-group mb-3 align-items-center\"\n    >\n      <select class=\"form-control\" [(ngModel)]=\"selectedInformatieObjectTypeUrl\">\n        <option [ngValue]=\"null\" selected>{{ 'openZaak.selectInfoObjectType' | translate }}</option>\n        <option\n          *ngFor=\"let informatieObjectType of informatieObjectTypes\"\n          [ngValue]=\"informatieObjectType.url\"\n        >\n          {{ informatieObjectType?.omschrijving || '-' }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <div footer>\n    <button\n      (click)=\"submit()\"\n      class=\"btn btn-primary\"\n      data-dismiss=\"modal\"\n      [disabled]=\"!this.zaakTypeLinkRequest.zaakTypeUrl\"\n    >\n      <i class=\"icon mdi mdi-save\"></i>\n      {{ 'openZaak.save' | translate }}\n    </button>\n  </div>\n</valtimo-modal>\n\n<ng-template #loading>\n  <div class=\"mb-8\">\n    <valtimo-spinner></valtimo-spinner>\n  </div>\n</ng-template>\n\n<ng-template #noConfigAvailable>\n  <div class=\"mb-8\">\n    <h4>{{ 'openZaak.error.configNotFound' | translate }}</h4>\n  </div>\n</ng-template>\n", styles: [".card-header,.setting-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.controls{display:flex;align-items:center}.full-width-notification{max-inline-size:100%;min-inline-size:100%}\n/*!\n * Copyright 2015-2024 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"] }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2$1.OpenZaakService }, { type: i3.AlertService }, { type: i4$1.ToastrService }, { type: i5.TranslateService }, { type: ZakenApiZaaktypeLinkService }, { type: i2.ConfigService }], propDecorators: { modal: [{
+        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i2$1.OpenZaakService }, { type: i3$1.AlertService }, { type: i4$1.ToastrService }, { type: i3.TranslateService }, { type: ZakenApiZaaktypeLinkService }, { type: i2.ConfigService }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['openZaakTypeLinkModal']
             }] } });
@@ -4145,6 +4854,12 @@ class DossierManagementZgwComponent {
                 tab: ZgwTabEnum.DOCUMENTEN_API_COLUMNS,
                 component: DocumentenApiColumnsComponent,
             },
+            {
+                class: 'no-padding-left-right no-padding-top-bottom',
+                headingTranslationKey: 'zgw.tabs.documentUploadFields',
+                tab: ZgwTabEnum.DOCUMENTEN_API_UPLOAD_FIELDS,
+                component: DocumentenApiUploadFieldsComponent,
+            },
             ...(supportedDocumentenApiFeatures.supportsTrefwoorden
                 ? [
                     {
@@ -4172,17 +4887,11 @@ class DossierManagementZgwComponent {
         this.dossierManagementZgwService.currentTab = tab;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementZgwComponent, deps: [{ token: DossierManagementZgwService }, { token: i0.ChangeDetectorRef }, { token: DocumentenApiVersionService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementZgwComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "_zgwTabContent", first: true, predicate: ["zgwTabContent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-tabs class=\"dossier-management-tabs\">\n  @for (zgwTab of (zgwTabs$ | async) || []; track zgwTab.tab) {\n    <cds-tab\n      [class]=\"zgwTab.class\"\n      [active]=\"zgwTab.active\"\n      [heading]=\"zgwTab.headingTranslationKey | translate\"\n      (selected)=\"displayTab(zgwTab.tab)\"\n    ></cds-tab>\n  }\n</cds-tabs>\n\n<div class=\"dossier-management-zgw__content\">\n  <ng-template #zgwTabContent></ng-template>\n</div>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementZgwComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "_zgwTabContent", first: true, predicate: ["zgwTabContent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-tabs class=\"dossier-management-tabs\">\n  @for (zgwTab of (zgwTabs$ | async) || []; track zgwTab.tab) {\n    <cds-tab\n      [class]=\"zgwTab.class\"\n      [active]=\"zgwTab.active\"\n      [heading]=\"zgwTab.headingTranslationKey | translate\"\n      (selected)=\"displayTab(zgwTab.tab)\"\n    ></cds-tab>\n  }\n</cds-tabs>\n\n<div class=\"dossier-management-zgw__content\">\n  <ng-template #zgwTabContent></ng-template>\n</div>\n", styles: ["/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i6.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i6.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementZgwComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
-                        TabsModule,
-                        TranslateModule,
-                        DocumentenApiTagsComponent,
-                        DocumentenApiColumnsComponent,
-                    ], template: "<!--\n  ~ Copyright 2015-2024 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<cds-tabs class=\"dossier-management-tabs\">\n  @for (zgwTab of (zgwTabs$ | async) || []; track zgwTab.tab) {\n    <cds-tab\n      [class]=\"zgwTab.class\"\n      [active]=\"zgwTab.active\"\n      [heading]=\"zgwTab.headingTranslationKey | translate\"\n      (selected)=\"displayTab(zgwTab.tab)\"\n    ></cds-tab>\n  }\n</cds-tabs>\n\n<div class=\"dossier-management-zgw__content\">\n  <ng-template #zgwTabContent></ng-template>\n</div>\n", styles: ["/*!\n * Copyright 2015-2024 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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TabsModule, TranslateModule], template: "<!--\n  ~ Copyright 2015-2024 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<cds-tabs class=\"dossier-management-tabs\">\n  @for (zgwTab of (zgwTabs$ | async) || []; track zgwTab.tab) {\n    <cds-tab\n      [class]=\"zgwTab.class\"\n      [active]=\"zgwTab.active\"\n      [heading]=\"zgwTab.headingTranslationKey | translate\"\n      (selected)=\"displayTab(zgwTab.tab)\"\n    ></cds-tab>\n  }\n</cds-tabs>\n\n<div class=\"dossier-management-zgw__content\">\n  <ng-template #zgwTabContent></ng-template>\n</div>\n", styles: ["/*!\n * Copyright 2015-2024 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"] }]
         }], ctorParameters: () => [{ type: DossierManagementZgwService }, { type: i0.ChangeDetectorRef }, { type: DocumentenApiVersionService }, { type: i1$2.ActivatedRoute }], propDecorators: { _zgwTabContent: [{
                 type: ViewChild,
                 args: ['zgwTabContent', { read: ViewContainerRef }]
@@ -4338,5 +5047,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { COLUMN_VIEW_TYPES, CasesListComponent, ContactMomentService, CustomerListComponent, CustomerModule, CustomerService, DOCUMENTEN_COLUMN_KEYS, DocumentObjectenApiSyncComponent, DocumentObjectenApiSyncService, DocumentenApiColumnModalComponent, DocumentenApiColumnService, DocumentenApiColumnsComponent, DocumentenApiDocumentService, DocumentenApiFilterComponent, DocumentenApiLinkProcessService, DocumentenApiMetadataModalComponent, DocumentenApiTagModalComponent, DocumentenApiTagService, DocumentenApiTagsComponent, DocumentenApiUploaderComponent, DocumentenApiVersionComponent, DocumentenApiVersionService, DossierDetailTabContactMomentsComponent, DossierDetailTabDocumentenApiDocumentsComponent, DossierDetailTabObjectTypeComponent, DossierDetailTabZaakobjectenComponent, DossierManagementLinkProcessComponent, DossierManagementZgwComponent, DossierManagementZgwService, ZaakobjectenService, ZakenApiZaaktypeLinkComponent, ZakenApiZaaktypeLinkService, ZgwModule, ZgwTabEnum, customDocumentApiUploaderType, documentenApiUploaderEditForm, registerDocumentenApiFormioUploadComponent };
+export { COLUMN_VIEW_TYPES, CONFIDENTIALITY_LEVELS, CasesListComponent, ContactMomentService, CustomerListComponent, CustomerModule, CustomerService, DOCUMENTEN_COLUMN_KEYS, DocumentObjectenApiSyncComponent, DocumentObjectenApiSyncService, DocumentenApiColumnModalComponent, DocumentenApiColumnService, DocumentenApiColumnsComponent, DocumentenApiDocumentService, DocumentenApiFilterComponent, DocumentenApiLinkProcessService, DocumentenApiMetadataModalComponent, DocumentenApiTagModalComponent, DocumentenApiTagService, DocumentenApiTagsComponent, DocumentenApiUploadFieldModalComponent, DocumentenApiUploadFieldsComponent, DocumentenApiUploaderComponent, DocumentenApiVersionComponent, DocumentenApiVersionService, DossierDetailTabContactMomentsComponent, DossierDetailTabDocumentenApiDocumentsComponent, DossierDetailTabObjectTypeComponent, DossierDetailTabZaakobjectenComponent, DossierManagementLinkProcessComponent, DossierManagementZgwComponent, DossierManagementZgwService, LANGUAGE_ITEMS, STATUS_ITEMS, ZaakobjectenService, ZakenApiZaaktypeLinkComponent, ZakenApiZaaktypeLinkService, ZgwModule, ZgwTabEnum, customDocumentApiUploaderType, documentenApiUploaderEditForm, registerDocumentenApiFormioUploadComponent };
 //# sourceMappingURL=valtimo-zgw.mjs.map