@valtimo/zgw 12.0.0 → 12.1.1

package/fesm2022/valtimo-zgw.mjs

@@ -1,31 +1,33 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, Injectable, ViewChild, NgModule } from '@angular/core';
-import * as i2 from 'carbon-components-angular';
-import { ModalModule, TagModule, InputModule, ButtonModule, DropdownModule, ToggleModule, IconModule, ComboBoxModule, LoadingModule, NotificationModule, CheckboxModule, TabsModule } from 'carbon-components-angular';
-import * as i3$1 from '@ngx-translate/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule, ViewContainerRef } from '@angular/core';
+import * as i9 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$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { BehaviorSubject, map, combineLatest, tap, Subscription, take, switchMap, of, filter, Subject, from, startWith } from 'rxjs';
-import * as i3$2 from '@valtimo/components';
-import { CARBON_CONSTANTS, PendingChangesComponent, MoveRowDirection, ViewType, CarbonListModule, ConfirmationModalModule, VModalModule, TitleModule, ButtonModule as ButtonModule$1, FormModule, InputModule as InputModule$1, SelectModule, DatePickerModule, InputLabelModule, ParagraphModule, createCustomFormioComponent, registerCustomFormioComponentWithClass, TableModule, FormIoModule, TimelineItemImpl, ModalModule as ModalModule$1, SpinnerModule, TimelineModule, WidgetModule, ListModule, FilterSidebarModule, PageModule, ValtimoCdsModalDirectiveModule, DropzoneModule, FileSizeModule } from '@valtimo/components';
 import * as i5 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule, FormGroup, FormControl } from '@angular/forms';
-import * as i3 from '@valtimo/document';
-import { InternalCaseStatusColor, InternalCaseStatusUtils, DocumentModule } from '@valtimo/document';
-import { Edit16, Filter16, TagGroup16, Upload16 } from '@carbon/icons';
+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 { CARBON_CONSTANTS, ViewType, CarbonListModule, ConfirmationModalModule, InputLabelModule, InputModule as InputModule$1, SelectModule, ParagraphModule, CarbonListComponent, createCustomFormioComponent, registerCustomFormioComponentWithClass, TableModule, VModalModule, 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';
+import * as i1 from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
 import * as i1$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i2$1 from '@valtimo/config';
-import { BaseApiService, UploadProvider, ROLE_USER, ZGW_OBJECT_TYPE_COMPONENT_TOKEN, ZGW_DOCUMENTEN_API_DOCUMENTS_COMPONENT_TOKEN, ZGW_CASE_CONFIGURATION_EXTENSIONS_TOKEN } from '@valtimo/config';
-import * as i1 from '@angular/common/http';
-import { tap as tap$1, map as map$1, filter as filter$1, switchMap as switchMap$1, catchError, take as take$1, debounceTime } from 'rxjs/operators';
-import * as i5$1 from 'keycloak-angular';
-import moment from 'moment';
-import * as i2$2 from '@valtimo/resource';
+import { TrashCan16, Filter16, TagGroup16, Upload16 } from '@carbon/icons';
+import { tap as tap$1, map as map$1, filter as filter$1, switchMap as switchMap$1, catchError, take as take$1, debounceTime as debounceTime$1 } from 'rxjs/operators';
+import flatpickr from 'flatpickr';
+import * as i1$2 from '@valtimo/document';
+import { DocumentModule } from '@valtimo/document';
+import * as i6 from 'keycloak-angular';
+import * as i2$1 from '@valtimo/resource';
 import { ResourceModule } from '@valtimo/resource';
 import * as i5$2 from '@valtimo/security';
 import { AuthGuardService } from '@valtimo/security';
+import moment from 'moment';
 import * as i4$1 from 'ngx-toastr';
 import { FormioModule } from '@formio/angular';
 
@@ -46,7 +48,8 @@ import { FormioModule } from '@formio/angular';
  */
 var ZgwTabEnum;
 (function (ZgwTabEnum) {
-    ZgwTabEnum[ZgwTabEnum["DOCUMENTEN_API_COLUMNS"] = 0] = "DOCUMENTEN_API_COLUMNS";
+    ZgwTabEnum["DOCUMENTEN_API_COLUMNS"] = "documentenApiColumns";
+    ZgwTabEnum["DOCUMENTEN_API_TAGS"] = "documentenApiTags";
 })(ZgwTabEnum || (ZgwTabEnum = {}));
 
 /*
@@ -65,314 +68,30 @@ var ZgwTabEnum;
  * limitations under the License.
  */
 
-/*
- * 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 DocumentenApiColumnModalComponent {
-    set type(value) {
-        this._type.next(value);
-        if (value === 'closed') {
-            setTimeout(() => {
-                this._typeAnimationDelay$.next(value);
-            }, CARBON_CONSTANTS.modalAnimationMs);
-        }
-        else {
-            this._typeAnimationDelay$.next(value);
-        }
-    }
-    set prefill(value) {
-        this._prefillStatus.next(value);
-    }
-    get visibleInCaseListByDefault() {
-        return this.statusFormGroup?.get('visibleInCaseListByDefault');
-    }
-    get key() {
-        return this.statusFormGroup?.get('key');
-    }
-    get title() {
-        return this.statusFormGroup?.get('title');
-    }
-    get color() {
-        return this.statusFormGroup?.get('color');
-    }
-    get invalid() {
-        return !!this.statusFormGroup?.invalid;
-    }
-    get pristine() {
-        return !!this.statusFormGroup?.pristine;
-    }
-    constructor(fb, iconService, caseStatusService, translateService) {
-        this.fb = fb;
-        this.iconService = iconService;
-        this.caseStatusService = caseStatusService;
-        this.translateService = translateService;
-        this.closeModalEvent = new EventEmitter();
-        this._type = new BehaviorSubject(undefined);
-        this._typeAnimationDelay$ = new BehaviorSubject(undefined);
-        this._prefillStatus = new BehaviorSubject(undefined);
-        this.isClosed$ = this._type.pipe(map(type => type === 'closed'));
-        this.statusFormGroup = this.fb.group({
-            title: this.fb.control('', Validators.required),
-            key: this.fb.control('', [Validators.required, this.uniqueKeyValidator()]),
-            visibleInCaseListByDefault: this.fb.control(true, Validators.required),
-            color: this.fb.control('', Validators.required),
-        });
-        this.isEdit$ = combineLatest([this._typeAnimationDelay$, this._prefillStatus]).pipe(tap(([type, prefillStatus]) => {
-            if (type === 'edit' && prefillStatus)
-                this.prefillForm(prefillStatus);
-        }), map(([type]) => type === 'edit'));
-        this.isAdd$ = this._typeAnimationDelay$.pipe(map(type => type === 'add'), tap(isAdd => {
-            if (isAdd)
-                this.resetForm();
-        }));
-        this.disabled$ = new BehaviorSubject(false);
-        this.COLORS = [
-            InternalCaseStatusColor.Red,
-            InternalCaseStatusColor.Magenta,
-            InternalCaseStatusColor.Purple,
-            InternalCaseStatusColor.Blue,
-            InternalCaseStatusColor.Teal,
-            InternalCaseStatusColor.Green,
-            InternalCaseStatusColor.Cyan,
-            InternalCaseStatusColor.Gray,
-            InternalCaseStatusColor.CoolGray,
-            InternalCaseStatusColor.WarmGray,
-            InternalCaseStatusColor.HighContrast,
-            InternalCaseStatusColor.Outline,
-        ];
-        this._selectedColor$ = new BehaviorSubject(undefined);
-        this.colorListItems$ = combineLatest([
-            this._selectedColor$,
-            this.translateService.stream('key'),
-        ]).pipe(map(([selectedColor]) => this.COLORS.map(color => ({
-            selected: color === selectedColor,
-            content: this.translateService.instant('interface.tagType.' +
-                InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(color)),
-            color,
-            tagType: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(color),
-        }))));
-        this._editingKey$ = new BehaviorSubject(false);
-        this.editingKey$ = this._editingKey$.pipe(tap(editing => {
-            if (editing) {
-                this.key?.enable();
-            }
-            else {
-                this.key?.disable();
-            }
-        }));
-        this._originalStatusKey$ = new BehaviorSubject('');
-        this._subscriptions = new Subscription();
-        this.iconService.registerAll([Edit16]);
-    }
-    ngOnInit() {
-        this.openAutoKeySubscription();
-    }
-    ngOnDestroy() {
-        this._subscriptions.unsubscribe();
-    }
-    onClose() {
-        this.close();
-    }
-    toggleCheckedChange(checked) {
-        this.statusFormGroup.patchValue({
-            visibleInCaseListByDefault: checked,
-        });
-        this.statusFormGroup.markAsDirty();
-    }
-    addStatus() {
-        this.disable();
-        this.caseStatusService
-            .saveInternalCaseStatus(this.documentDefinitionName, this.getFormValue())
-            .subscribe({
-            next: () => {
-                this.enable();
-                this.closeAndRefresh();
-            },
-            error: () => {
-                this.enable(false);
-            },
-        });
-    }
-    editStatus() {
-        this.disable();
-        this._originalStatusKey$
-            .pipe(take(1), switchMap(originalStatusKey => this.caseStatusService.updateInternalCaseStatus(this.documentDefinitionName, originalStatusKey, this.getFormValue())))
-            .subscribe({
-            next: () => {
-                this.enable();
-                this.closeAndRefresh();
-            },
-            error: () => {
-                this.enable(false);
-            },
-        });
-    }
-    editKeyButtonClick() {
-        this._editingKey$.next(true);
-    }
-    colorDropdownChange(event) {
-        const newColor = event?.item?.color;
-        if (newColor) {
-            this._selectedColor$.next(newColor);
-            this.statusFormGroup.patchValue({ color: newColor });
-            this.statusFormGroup.markAsDirty();
-        }
-    }
-    prefillForm(prefillStatus) {
-        this._originalStatusKey$.next(prefillStatus.key);
-        this.statusFormGroup.patchValue({
-            key: prefillStatus.key,
-            title: prefillStatus.title,
-            visibleInCaseListByDefault: prefillStatus.visibleInCaseListByDefault,
-            color: prefillStatus.color,
-        });
-        this._selectedColor$.next(prefillStatus.color);
-        this.statusFormGroup.markAsPristine();
-        this.resetEditingKey();
-    }
-    resetForm() {
-        this.statusFormGroup.patchValue({
-            key: '',
-            title: '',
-            visibleInCaseListByDefault: true,
-            color: InternalCaseStatusColor.Blue,
-        });
-        this._selectedColor$.next(InternalCaseStatusColor.Blue);
-        this.statusFormGroup.markAsPristine();
-        this.resetEditingKey();
-    }
-    resetEditingKey() {
-        this._editingKey$.next(false);
-    }
-    openAutoKeySubscription() {
-        this._subscriptions.add(combineLatest([this.isAdd$, this.title.valueChanges, this.editingKey$]).subscribe(([isAdd, titleValue, editingKey]) => {
-            if (isAdd && !editingKey) {
-                if (titleValue) {
-                    this.statusFormGroup.patchValue({ key: this.getUniqueKey(titleValue) });
-                }
-                else {
-                    this.clearKey();
-                }
-            }
-        }));
-    }
-    getUniqueKey(title) {
-        const dashCaseKey = `${title}`
-            .toLowerCase()
-            .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
-            .replace(/_[-_]+/g, '_')
-            .replace(/^[^a-z]+/g, '');
-        const usedKeys = this.usedKeys;
-        if (!usedKeys.includes(dashCaseKey)) {
-            return dashCaseKey;
-        }
-        return this.getUniqueKeyWithNumber(dashCaseKey, usedKeys);
-    }
-    getUniqueKeyWithNumber(dashCaseKey, usedKeys) {
-        const numbersFromCurrentKey = (dashCaseKey.match(/^\d+|\d+\b|\d+(?=\w)/g) || []).map((numberValue) => +numberValue);
-        const lastNumberFromCurrentKey = numbersFromCurrentKey.length > 0 && numbersFromCurrentKey[numbersFromCurrentKey.length - 1];
-        const newKey = lastNumberFromCurrentKey
-            ? `${dashCaseKey.replace(`${lastNumberFromCurrentKey}`, `${lastNumberFromCurrentKey + 1}`)}`
-            : `${dashCaseKey}-1`;
-        if (usedKeys.includes(newKey)) {
-            return this.getUniqueKeyWithNumber(newKey, usedKeys);
-        }
-        return newKey;
-    }
-    clearKey() {
-        this.statusFormGroup.patchValue({ key: '' });
-    }
-    uniqueKeyValidator() {
-        return (control) => this.usedKeys?.every((key) => key !== control.value)
-            ? null
-            : { uniqueKey: { value: control.value } };
-    }
-    disable() {
-        this.disabled$.next(true);
-        this.statusFormGroup.disable();
-    }
-    enable(delay = true) {
-        setTimeout(() => {
-            this.disabled$.next(false);
-            this.statusFormGroup.enable();
-        }, delay ? CARBON_CONSTANTS.modalAnimationMs : 0);
-    }
-    close() {
-        this.closeModalEvent.emit('close');
-    }
-    closeAndRefresh() {
-        this.closeModalEvent.emit('closeAndRefresh');
-    }
-    getFormValue() {
-        return {
-            key: this.key.value,
-            title: this.title.value,
-            visibleInCaseListByDefault: this.visibleInCaseListByDefault.value,
-            color: this.color.value,
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnModalComponent, deps: [{ token: i5.FormBuilder }, { token: i2.IconService }, { token: i3.CaseStatusService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DocumentenApiColumnModalComponent, isStandalone: true, selector: "valtimo-documenten-api-column-modal", inputs: { type: "type", prefill: "prefill", usedKeys: "usedKeys", documentDefinitionName: "documentDefinitionName" }, 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    isAdd: isAdd$ | async,\n    isEdit: isEdit$ | async,\n    isClosed: isClosed$ | async,\n    editingKey: editingKey$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n  [open]=\"!obs.isClosed\"\n  size=\"sm\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ obs.isAdd ? ('dossierManagement.statuses.add' | translate) : '' }}\n      {{ obs.isEdit ? ('dossierManagement.statuses.edit' | translate) : '' }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <ng-container *ngTemplateOutlet=\"statusForm; context: {obs: obs}\"></ng-container>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n  </cds-modal-footer>\n</cds-modal>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"dropdown-color-tag\">\n    <cds-tag *ngIf=\"item && item.content\" class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n      {{ 'interface.tagType.' + item?.tagType | translate }}\n    </cds-tag>\n  </div>\n</ng-template>\n\n<ng-template #statusForm let-obs=\"obs\">\n  <form [formGroup]=\"statusFormGroup\" class=\"status-form\">\n    <cds-label>\n      {{ 'dossierManagement.statuses.columns.title' | translate }}\n\n      <input cdsText formControlName=\"title\" [attr.modal-primary-focus]=\"true\" />\n    </cds-label>\n\n    <cds-label>\n      {{ 'dossierManagement.statuses.columns.key' | translate }}\n\n      <div class=\"edit-key-input\">\n        <input\n          cdsText\n          formControlName=\"key\"\n          [disabled]=\"!obs.editingKey\"\n          [placeholder]=\"\n            obs.isAdd && !obs.editingKey\n              ? ('dossierManagement.statuses.keyAutoGenerated' | translate)\n              : ''\n          \"\n        />\n\n        <cds-icon-button\n          *ngIf=\"!obs.editingKey && obs.isAdd\"\n          [disabled]=\"obs.disabled\"\n          (click)=\"editKeyButtonClick()\"\n          kind=\"secondary\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </cds-label>\n\n    <div class=\"horizontal-inputs\">\n      <cds-label>\n        {{ 'dossierManagement.statuses.columns.color' | translate }}\n\n        <cds-dropdown\n          [appendInline]=\"false\"\n          [placeholder]=\"'dossierManagement.statuses.colorPlaceholder' | translate\"\n          (selected)=\"colorDropdownChange($event)\"\n        >\n          <cds-dropdown-list [items]=\"colorListItems$\" [listTpl]=\"colorDropdownItemTemplate\">\n          </cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n\n      <cds-toggle\n        [label]=\"'dossierManagement.statuses.visibleTitle' | translate\"\n        [onText]=\"'dossierManagement.statuses.visible' | translate\"\n        [offText]=\"'dossierManagement.statuses.invisible' | translate\"\n        [disabled]=\"obs.disabled\"\n        [checked]=\"visibleInCaseListByDefault?.value\"\n        (checkedChange)=\"toggleCheckedChange($event)\"\n      ></cds-toggle>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"obs.isAdd\"\n    cdsButton=\"primary\"\n    [disabled]=\"invalid || pristine || obs.disabled\"\n    (click)=\"addStatus()\"\n  >\n    {{ 'interface.add' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"obs.isEdit\"\n    cdsButton=\"primary\"\n    [disabled]=\"invalid || pristine || obs.disabled\"\n    (click)=\"editStatus()\"\n  >\n    {{ 'interface.save' | translate }}\n  </button>\n</ng-template>\n", styles: [".status-form{display:flex;flex-direction:column;gap:16px}.edit-key-input{height:40px;display:flex;width:100%;flex-direction:row;gap:16px;align-items:flex-end}::ng-deep .horizontal-inputs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}::ng-deep .horizontal-inputs .cds--label{width:100%;display:flex;flex-direction:column;gap:8px}::ng-deep .dropdown-color-tag .cds--tag{margin-top:-4px;margin-left:2px}\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 }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "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: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-documenten-api-column-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
-                        ModalModule,
-                        TagModule,
-                        TranslateModule,
-                        InputModule,
-                        ReactiveFormsModule,
-                        ButtonModule,
-                        DropdownModule,
-                        ToggleModule,
-                    ], 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    isAdd: isAdd$ | async,\n    isEdit: isEdit$ | async,\n    isClosed: isClosed$ | async,\n    editingKey: editingKey$ | async,\n    disabled: disabled$ | async\n  } as obs\"\n  [open]=\"!obs.isClosed\"\n  size=\"sm\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ obs.isAdd ? ('dossierManagement.statuses.add' | translate) : '' }}\n      {{ obs.isEdit ? ('dossierManagement.statuses.edit' | translate) : '' }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    <ng-container *ngTemplateOutlet=\"statusForm; context: {obs: obs}\"></ng-container>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container *ngTemplateOutlet=\"buttons; context: {obs: obs}\"></ng-container>\n  </cds-modal-footer>\n</cds-modal>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"dropdown-color-tag\">\n    <cds-tag *ngIf=\"item && item.content\" class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n      {{ 'interface.tagType.' + item?.tagType | translate }}\n    </cds-tag>\n  </div>\n</ng-template>\n\n<ng-template #statusForm let-obs=\"obs\">\n  <form [formGroup]=\"statusFormGroup\" class=\"status-form\">\n    <cds-label>\n      {{ 'dossierManagement.statuses.columns.title' | translate }}\n\n      <input cdsText formControlName=\"title\" [attr.modal-primary-focus]=\"true\" />\n    </cds-label>\n\n    <cds-label>\n      {{ 'dossierManagement.statuses.columns.key' | translate }}\n\n      <div class=\"edit-key-input\">\n        <input\n          cdsText\n          formControlName=\"key\"\n          [disabled]=\"!obs.editingKey\"\n          [placeholder]=\"\n            obs.isAdd && !obs.editingKey\n              ? ('dossierManagement.statuses.keyAutoGenerated' | translate)\n              : ''\n          \"\n        />\n\n        <cds-icon-button\n          *ngIf=\"!obs.editingKey && obs.isAdd\"\n          [disabled]=\"obs.disabled\"\n          (click)=\"editKeyButtonClick()\"\n          kind=\"secondary\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </cds-label>\n\n    <div class=\"horizontal-inputs\">\n      <cds-label>\n        {{ 'dossierManagement.statuses.columns.color' | translate }}\n\n        <cds-dropdown\n          [appendInline]=\"false\"\n          [placeholder]=\"'dossierManagement.statuses.colorPlaceholder' | translate\"\n          (selected)=\"colorDropdownChange($event)\"\n        >\n          <cds-dropdown-list [items]=\"colorListItems$\" [listTpl]=\"colorDropdownItemTemplate\">\n          </cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n\n      <cds-toggle\n        [label]=\"'dossierManagement.statuses.visibleTitle' | translate\"\n        [onText]=\"'dossierManagement.statuses.visible' | translate\"\n        [offText]=\"'dossierManagement.statuses.invisible' | translate\"\n        [disabled]=\"obs.disabled\"\n        [checked]=\"visibleInCaseListByDefault?.value\"\n        (checkedChange)=\"toggleCheckedChange($event)\"\n      ></cds-toggle>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button cdsButton=\"secondary\" (click)=\"onClose()\" [disabled]=\"obs.disabled\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"obs.isAdd\"\n    cdsButton=\"primary\"\n    [disabled]=\"invalid || pristine || obs.disabled\"\n    (click)=\"addStatus()\"\n  >\n    {{ 'interface.add' | translate }}\n  </button>\n\n  <button\n    *ngIf=\"obs.isEdit\"\n    cdsButton=\"primary\"\n    [disabled]=\"invalid || pristine || obs.disabled\"\n    (click)=\"editStatus()\"\n  >\n    {{ 'interface.save' | translate }}\n  </button>\n</ng-template>\n", styles: [".status-form{display:flex;flex-direction:column;gap:16px}.edit-key-input{height:40px;display:flex;width:100%;flex-direction:row;gap:16px;align-items:flex-end}::ng-deep .horizontal-inputs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}::ng-deep .horizontal-inputs .cds--label{width:100%;display:flex;flex-direction:column;gap:8px}::ng-deep .dropdown-color-tag .cds--tag{margin-top:-4px;margin-left:2px}\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: i5.FormBuilder }, { type: i2.IconService }, { type: i3.CaseStatusService }, { type: i3$1.TranslateService }], propDecorators: { type: [{
-                type: Input
-            }], prefill: [{
-                type: Input
-            }], usedKeys: [{
-                type: Input
-            }], documentDefinitionName: [{
-                type: Input
-            }], closeModalEvent: [{
-                type: Output
-            }] } });
-
 class DocumentenApiColumnService extends BaseApiService {
     constructor(http, configService) {
         super(http, configService);
         this.http = http;
     }
     getConfiguredColumns(caseDefinitionName) {
+        return this.http.get(this.getApiUrl(`/v1/case-definition/${caseDefinitionName}/zgw-document-column`));
+    }
+    getAdminConfiguredColumns(caseDefinitionName) {
         return this.http.get(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document-column`));
     }
-    updateColumnOrder(caseDefinitionName, columns) {
-        return this.http.put(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document-column`), columns);
+    getAdminConfigurableColumns(caseDefinition) {
+        return this.http.get(this.getApiUrl(`/management/v1/case-definition/${caseDefinition}/zgw-document-column-key`));
+    }
+    deleteColumn(caseDefinitionName, columnKey) {
+        return this.http.delete(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document-column/${columnKey}`));
     }
     updateColumn(caseDefinitionName, column) {
-        delete column.key;
         return this.http.put(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document-column/${column.key}`), column);
     }
-    deleteConfiguredColumn(caseDefinitionKey, statusKey) {
-        return of(null);
-    }
     updateConfiguredColumns(caseDefinitionKey, orderColumns) {
-        return of(null);
+        return this.http.put(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionKey}/zgw-document-column`), orderColumns);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnService, decorators: [{
@@ -380,7 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -397,6 +116,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class DocumentenApiDocumentService extends BaseApiService {
+    constructor(httpClient, configService) {
+        super(httpClient, configService);
+        this.httpClient = httpClient;
+        this.configService = configService;
+    }
+    getFilteredZakenApiDocuments(documentId, paramsMap) {
+        const params = new HttpParams({ fromObject: paramsMap });
+        return !!paramsMap
+            ? this.httpClient.get(this.getApiUrl(`/v2/zaken-api/document/${documentId}/files`), { params })
+            : this.httpClient.get(this.getApiUrl(`/v2/zaken-api/document/${documentId}/files`));
+    }
+    updateDocument(file, metadata) {
+        return this.httpClient.put(this.getApiUrl(`/v1/documenten-api/${file.pluginConfigurationId}/files/${file.fileId}`), metadata);
+    }
+    deleteDocument(file) {
+        return this.httpClient.delete(this.getApiUrl(`/v1/documenten-api/${file.pluginConfigurationId}/files/${file.fileId}`));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", 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.3", ngImport: i0, type: DocumentenApiDocumentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiDocumentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -433,7 +180,7 @@ class DocumentenApiLinkProcessService extends BaseApiService {
     deleteLinkedUploadProcess(documentDefinitionName) {
         return this.httpClient.delete(this.getApiUrl(`/v1/process-document/demo/${documentDefinitionName}/process`));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiLinkProcessService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiLinkProcessService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiLinkProcessService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiLinkProcessService, decorators: [{
@@ -441,44 +188,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
-/*
- * 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 DocumentenApiDocumentService extends BaseApiService {
-    constructor(httpClient, configService) {
-        super(httpClient, configService);
-        this.httpClient = httpClient;
-        this.configService = configService;
+class DocumentenApiTagService extends BaseApiService {
+    constructor(http, configService) {
+        super(http, configService);
+        this.http = http;
     }
-    getZakenApiDocuments(documentId) {
-        return this.httpClient.get(this.getApiUrl(`/v1/zaken-api/document/${documentId}/files`));
+    getTags(caseDefinitionName) {
+        return this.http.get(this.getApiUrl(`/v1/case-definition/${caseDefinitionName}/zgw-document/trefwoord`));
     }
-    deleteDocument(file) {
-        return this.httpClient.delete(this.getApiUrl(`/v1/documenten-api/${file.pluginConfigurationId}/files/${file.fileId}`));
+    getTagsForAdmin(caseDefinitionName, params) {
+        return this.http.get(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document/trefwoord`), { params });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiDocumentService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiDocumentService, providedIn: 'root' }); }
+    createTag(caseDefinitionName, tagKey) {
+        return this.http.post(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document/trefwoord/${tagKey}`), {} //empty body because all data exists in path
+        );
+    }
+    deleteTag(caseDefinitionName, tagKey) {
+        return this.http.delete(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document/trefwoord/${tagKey}`));
+    }
+    deleteTags(caseDefinitionName, tagKeys) {
+        return this.http.delete(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/zgw-document/trefwoord`), { body: tagKeys });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiTagService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiTagService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiDocumentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiTagService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -508,10 +249,13 @@ class DocumentenApiVersionService extends BaseApiService {
     getManagementApiVersion(caseDefinitionName) {
         return this.httpClient.get(this.getApiUrl(`/management/v1/case-definition/${caseDefinitionName}/documenten-api/version`));
     }
+    getSupportedApiFeatures(caseDefinitionName) {
+        return this.httpClient.get(this.getApiUrl(`/v1/case-definition/${caseDefinitionName}/documenten-api/version`));
+    }
     refresh() {
         this._refresh$.next(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiVersionService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiVersionService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiVersionService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiVersionService, decorators: [{
@@ -519,7 +263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -552,145 +296,592 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DocumentenApiColumnsComponent extends PendingChangesComponent {
+class DocumentenApiColumnModalComponent {
+    set prefillColumn(value) {
+        if (!value)
+            return;
+        const column = { content: value.key, selected: true, column: value };
+        const defaultSort = value.defaultSort ?? 'noDefault';
+        this.formGroup.patchValue({ column, defaultSort });
+        this.formGroup.get('column')?.disable();
+        this._prefillColumn = [column];
+    }
+    get prefillColumn() {
+        return this._prefillColumn;
+    }
+    set type(value) {
+        this._type = value;
+        if (value === 'edit') {
+            this.formGroup.get('column')?.disable;
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    set availableColumns(value) {
+        if (!value)
+            return;
+        this._availableColumns$.next(value);
+    }
+    set configuredColumns(value) {
+        if (!value)
+            return;
+        this._defaultSortedColumn = value.find((column) => !!column.defaultSort);
+    }
+    constructor(fb, translateService, zgwDocumentenApiColumnService) {
+        this.fb = fb;
+        this.translateService = translateService;
+        this.zgwDocumentenApiColumnService = zgwDocumentenApiColumnService;
+        this._availableColumns$ = new BehaviorSubject([]);
+        this.availableColumns$ = combineLatest([
+            this._availableColumns$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([columns]) => columns.map((column) => ({
+            content: this.translateService.instant(`zgw.documentColumns.${column.key}`),
+            selected: false,
+            column,
+        }))));
+        this.closeModal = new EventEmitter();
+        this.formGroup = this.fb.group({
+            column: this.fb.control({ content: '', selected: false, column: {} }, Validators.required),
+            defaultSort: this.fb.control('noDefault'),
+        });
+        this._notificationMessage$ = new BehaviorSubject('zgw.columns.defaultWarning');
+        this.notificationObj$ = combineLatest([
+            this._notificationMessage$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([message]) => ({
+            type: 'warning',
+            lowContrast: true,
+            title: this.translateService.instant('interface.warning'),
+            message: this.translateService.instant(message),
+            showClose: false,
+        })));
+        this.showRadioButtons = true;
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.openDisableRadioSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onClose(refresh = false) {
+        this.closeModal.emit(refresh ? 'closeAndRefresh' : 'close');
+        setTimeout(() => {
+            this.formGroup.reset();
+            this.formGroup.enable();
+            this.showRadioButtons = true;
+            this._notificationMessage$.next('zgw.columns.defaultWarning');
+            this._prefillColumn = null;
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    updateColumn() {
+        const columnValue = this.formGroup.get('column')?.value;
+        if (!columnValue || !this.definitionName) {
+            return;
+        }
+        const defaultSortValue = this.formGroup.get('defaultSort')?.value;
+        const defaultSort = !defaultSortValue
+            ? null
+            : defaultSortValue === 'noDefault'
+                ? null
+                : defaultSortValue;
+        const column = { ...columnValue.column, defaultSort };
+        if (!!this._defaultSortedColumn &&
+            this._defaultSortedColumn.key !== column.key &&
+            !!column.defaultSort) {
+            this.zgwDocumentenApiColumnService
+                .updateColumn(this.definitionName, {
+                ...this._defaultSortedColumn,
+                defaultSort: null,
+            })
+                .pipe(switchMap(() => this.zgwDocumentenApiColumnService.updateColumn(this.definitionName, column)))
+                .subscribe(() => {
+                this.onClose(true);
+            });
+            return;
+        }
+        this.zgwDocumentenApiColumnService.updateColumn(this.definitionName, column).subscribe(() => {
+            this.onClose(true);
+        });
+    }
+    openDisableRadioSubscription() {
+        this._subscriptions.add(this.formGroup.get('column')?.valueChanges.subscribe(columnValue => {
+            this.showRadioButtons = !!columnValue?.column.sortable;
+            this._notificationMessage$.next(this.showRadioButtons ? 'zgw.columns.defaultWarning' : 'zgw.columns.notSortable');
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnModalComponent, deps: [{ token: i5.FormBuilder }, { token: i5$1.TranslateService }, { token: DocumentenApiColumnService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: i9.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i9.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "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: i9.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: i9.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i9.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: i9.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.3", ngImport: i0, type: DocumentenApiColumnModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-documenten-api-column-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ModalModule,
+                        TranslateModule,
+                        InputModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                        DropdownModule,
+                        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: i5.FormBuilder }, { type: i5$1.TranslateService }, { type: DocumentenApiColumnService }], propDecorators: { definitionName: [{
+                type: Input
+            }], prefillColumn: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], availableColumns: [{
+                type: Input
+            }], configuredColumns: [{
+                type: Input
+            }], closeModal: [{
+                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 DocumentenApiColumnsComponent {
     get documentDefinitionName$() {
         return this._documentDefinitionName$;
     }
     constructor(route, zgwDocumentColumnService) {
-        super();
         this.route = route;
         this.zgwDocumentColumnService = zgwDocumentColumnService;
         this._reload$ = new BehaviorSubject(null);
         this._documentDefinitionName$ = this.route.params.pipe(map(params => params?.name), filter(docDefName => !!docDefName));
         this.loading$ = new BehaviorSubject(true);
-        this.usedKeys$ = new BehaviorSubject([]);
-        this._documentStatuses = [];
-        this.documentStatuses$ = combineLatest([
+        this.configuredColumns$ = combineLatest([
             this._documentDefinitionName$,
             this._reload$,
         ]).pipe(tap(([_, reload]) => {
-            if (reload === null) {
+            if (reload === null)
                 this.loading$.next(true);
+        }), switchMap(([documentDefinitionName]) => this.zgwDocumentColumnService.getAdminConfiguredColumns(documentDefinitionName)), tap(() => {
+            this.loading$.next(false);
+        }));
+        this.configurableColumns$ = this.documentDefinitionName$.pipe(switchMap((documentDefinitionName) => combineLatest([
+            this.zgwDocumentColumnService.getAdminConfigurableColumns(documentDefinitionName),
+            this.configuredColumns$,
+        ])), map(([configurableColumns, configuredColumns]) => {
+            const configuredKeys = configuredColumns.map((column) => column.key);
+            return configurableColumns.filter((column) => !configuredKeys.includes(column.key));
+        }));
+        this.ACTION_ITEMS = [
+            {
+                label: 'interface.edit',
+                callback: this.openEditModal.bind(this),
+                type: 'normal',
+            },
+            {
+                label: 'interface.delete',
+                callback: this.openDeleteModal.bind(this),
+                type: 'danger',
+            },
+        ];
+        this.CARBON_THEME = 'g10';
+        this.columnModalType$ = new BehaviorSubject('closed');
+        this.prefillColumn$ = new BehaviorSubject(undefined);
+        this.columnToUpdate$ = new BehaviorSubject(undefined);
+        this.showDeleteModal$ = new BehaviorSubject(false);
+    }
+    ngAfterViewInit() {
+        this.fields = [
+            {
+                key: 'key',
+                label: 'zgw.columns.column',
+                viewType: ViewType.TEMPLATE,
+                template: this.columnKeyTemplate,
+            },
+            {
+                key: 'defaultSort',
+                label: 'listColumn.defaultSort',
+                viewType: ViewType.TEMPLATE,
+                template: this.defaultSortTemplate,
+            },
+        ];
+    }
+    openDeleteModal(column) {
+        this.columnToUpdate$.next(column);
+        this.showDeleteModal$.next(true);
+    }
+    openEditModal(column) {
+        this.prefillColumn$.next(column);
+        this.columnModalType$.next('edit');
+    }
+    openAddModal() {
+        this.columnModalType$.next('add');
+        this.prefillColumn$.next(undefined);
+    }
+    onCloseModal(closeModalEvent) {
+        if (closeModalEvent === 'closeAndRefresh')
+            this.reload();
+        this.columnModalType$.next('closed');
+    }
+    confirmDeleteStatus(column, definitionName) {
+        this.zgwDocumentColumnService.deleteColumn(definitionName, column.key).subscribe(() => {
+            this.reload();
+        });
+    }
+    onItemsReordered(definitionName, columns) {
+        this.zgwDocumentColumnService.updateConfiguredColumns(definitionName, columns).subscribe(() => {
+            this.reload(true);
+        });
+    }
+    reload(noAnimation = false) {
+        this._reload$.next(noAnimation ? 'noAnimation' : null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentenApiColumnService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$1.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: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i9.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.3", ngImport: i0, type: DocumentenApiColumnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-documenten-api-columns', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        DocumentenApiColumnModalComponent,
+                        CarbonListModule,
+                        TranslateModule,
+                        ConfirmationModalModule,
+                        TagModule,
+                        ButtonModule,
+                        IconModule,
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentenApiColumnService }], propDecorators: { columnKeyTemplate: [{
+                type: ViewChild,
+                args: ['columnKeyTemplate']
+            }], defaultSortTemplate: [{
+                type: ViewChild,
+                args: ['defaultSortTemplate']
+            }] } });
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+var DOCUMENTEN_COLUMN_KEYS;
+(function (DOCUMENTEN_COLUMN_KEYS) {
+    DOCUMENTEN_COLUMN_KEYS["AUTEUR"] = "auteur";
+    DOCUMENTEN_COLUMN_KEYS["BESCHRIJVING"] = "beschrijving";
+    DOCUMENTEN_COLUMN_KEYS["BESTANDSNAAM"] = "bestandsnaam";
+    DOCUMENTEN_COLUMN_KEYS["BESTANDSOMVANG"] = "bestandsomvang";
+    DOCUMENTEN_COLUMN_KEYS["BRONORGANISATIE"] = "bronorganisatie";
+    DOCUMENTEN_COLUMN_KEYS["CREATIEDATUM"] = "creatiedatum";
+    DOCUMENTEN_COLUMN_KEYS["FORMAAT"] = "formaat";
+    DOCUMENTEN_COLUMN_KEYS["IDENTIFICATIE"] = "identificatie";
+    DOCUMENTEN_COLUMN_KEYS["INFORMATIEOBJECTTYPE"] = "informatieobjecttype";
+    DOCUMENTEN_COLUMN_KEYS["LOCKED"] = "locked";
+    DOCUMENTEN_COLUMN_KEYS["STATUS"] = "status";
+    DOCUMENTEN_COLUMN_KEYS["TAAL"] = "taal";
+    DOCUMENTEN_COLUMN_KEYS["TITEL"] = "titel";
+    DOCUMENTEN_COLUMN_KEYS["TREFWOORDEN"] = "trefwoorden";
+    DOCUMENTEN_COLUMN_KEYS["VERSIE"] = "versie";
+    DOCUMENTEN_COLUMN_KEYS["VERTROUWELIJKHEIDAANDUIDING"] = "vertrouwelijkheidaanduiding";
+    DOCUMENTEN_COLUMN_KEYS["TAGS"] = "tags";
+})(DOCUMENTEN_COLUMN_KEYS || (DOCUMENTEN_COLUMN_KEYS = {}));
+
+/*
+ * 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.
+ */
+const COLUMN_VIEW_TYPES = {
+    [DOCUMENTEN_COLUMN_KEYS.CREATIEDATUM]: ViewType.DATE,
+    [DOCUMENTEN_COLUMN_KEYS.LOCKED]: ViewType.BOOLEAN,
+    [DOCUMENTEN_COLUMN_KEYS.TREFWOORDEN]: ViewType.TAGS,
+    [DOCUMENTEN_COLUMN_KEYS.STATUS]: ViewType.TEMPLATE,
+    [DOCUMENTEN_COLUMN_KEYS.TAAL]: ViewType.TEMPLATE,
+    [DOCUMENTEN_COLUMN_KEYS.VERTROUWELIJKHEIDAANDUIDING]: ViewType.TEMPLATE,
+};
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
+/*
+ * 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 DocumentenApiFilterComponent {
+    constructor(documentService, fb, iconService, route, translateService, documentenApiTagService) {
+        this.documentService = documentService;
+        this.fb = fb;
+        this.iconService = iconService;
+        this.route = route;
+        this.translateService = translateService;
+        this.documentenApiTagService = documentenApiTagService;
+        this.filterEvent = new EventEmitter();
+        this._subscriptions = new Subscription();
+        this._confidentialityLevels = [
+            'openbaar',
+            'beperkt_openbaar',
+            'intern',
+            'zaakvertrouwelijk',
+            'vertrouwelijk',
+            'confidentieel',
+            'geheim',
+            'zeer_geheim',
+        ];
+        this._filter$ = this.route.queryParamMap.pipe(map(queryParams => {
+            let { sort, ...filter } = queryParams['params'];
+            if (this.formGroup) {
+                if (!!filter.trefwoorden) {
+                    filter = { ...filter, trefwoorden: this.convertTrefwoordenParam(filter.trefwoorden) };
+                }
+                this.formGroup.patchValue(filter, { emitEvent: false });
             }
-        }), switchMap(([documentDefinitionName]) => this.zgwDocumentColumnService.getConfiguredColumns(documentDefinitionName)), tap(statuses => {
-            this._documentStatuses = statuses;
-            this.usedKeys$.next(statuses.map(status => status.key));
-            this.loading$.next(false);
+            return filter;
         }));
-        this.fields$ = new BehaviorSubject([]);
-        this.ACTION_ITEMS = [
-            {
-                label: 'interface.edit',
-                callback: this.openEditModal.bind(this),
-                type: 'normal',
-            },
-            {
-                label: 'interface.delete',
-                callback: this.openDeleteModal.bind(this),
-                type: 'danger',
-            },
-        ];
-        this.CARBON_THEME = 'g10';
-        this.statusModalType$ = new BehaviorSubject('closed');
-        this.prefillStatus$ = new BehaviorSubject(undefined);
-        this.columnToUpdate$ = new BehaviorSubject(undefined);
-        this.showDisableModal$ = new Subject();
-        this._documentDefinitionName$.subscribe(documentDefinitionName => {
-            zgwDocumentColumnService.getConfiguredColumns(documentDefinitionName).subscribe(configuredColumns => {
-                console.log(configuredColumns);
-            }, error => {
-                console.error(error);
-            });
+        this.confidentialityLevels$ = combineLatest([
+            this._filter$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([filter]) => this._confidentialityLevels.map((confidentialityLevel) => ({
+            content: this.translateService.instant(`document.${confidentialityLevel}`),
+            selected: filter?.vertrouwelijkheidaanduiding === confidentialityLevel,
+            id: confidentialityLevel,
+        }))), startWith([]));
+        this.informationObjectTypes$ = this.route.paramMap.pipe(filter((paramMap) => !!paramMap.get('documentDefinitionName')), switchMap((paramMap) => combineLatest([
+            this.documentService.getDocumentTypes(paramMap.get('documentDefinitionName') ?? ''),
+            this._filter$,
+        ])), map(([types, filter]) => types.map((type) => ({
+            content: type.name,
+            selected: filter?.informatieobjecttype === type.url,
+            id: type.url,
+        }))), startWith([]));
+        this.tags$ = this.route.paramMap.pipe(filter((paramMap) => !!paramMap.get('documentDefinitionName')), switchMap((paramMap) => combineLatest([
+            this.documentenApiTagService.getTags(paramMap.get('documentDefinitionName') ?? ''),
+            this.route.queryParamMap,
+        ])), map(([tags, queryParamMap]) => {
+            const selectedTags = this.convertTrefwoordenParam(queryParamMap['params']?.trefwoorden).map((item) => item.content);
+            return tags.map((tag) => ({
+                content: tag.value,
+                selected: selectedTags.includes(tag.value),
+            }));
+        }), startWith([]));
+        this.formGroup = this.fb.group({
+            auteur: this.fb.control(''),
+            vertrouwelijkHeidaanduiding: this.fb.control({}),
+            creatiedatumFrom: this.fb.control(''),
+            creatiedatumTo: this.fb.control(''),
+            informatieObjectType: this.fb.control({}),
+            trefwoorden: this.fb.control([]),
+            titel: this.fb.control(''),
         });
+        this.iconService.register(TrashCan16);
     }
-    ngAfterViewInit() {
-        this.initFields();
-    }
-    openDeleteModal(status) {
-        this.columnToUpdate$.next(status);
-        this.showDisableModal$.next(true);
-    }
-    openEditModal(status) {
-        this.prefillStatus$.next(status);
-        this.statusModalType$.next('edit');
+    ngOnInit() {
+        this.openFormValueSubscription();
     }
-    openAddModal() {
-        this.statusModalType$.next('add');
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
     }
-    closeModal(closeModalEvent) {
-        if (closeModalEvent === 'closeAndRefresh') {
-            this.reload();
+    ngAfterViewInit() {
+        const creationDateFromControlValue = this.formGroup.get('creatiedatumFrom')?.value;
+        const creationDateToControlValue = this.formGroup.get('creatiedatumTo')?.value;
+        if (!!creationDateFromControlValue) {
+            this.creationDateFromPicker.writeValue([
+                flatpickr.formatDate(new Date(creationDateFromControlValue), 'd-m-Y'),
+            ]);
+        }
+        if (!!creationDateToControlValue) {
+            this.creationDateToPicker.writeValue([
+                flatpickr.formatDate(new Date(creationDateToControlValue), 'd-m-Y'),
+            ]);
         }
-        this.statusModalType$.next('closed');
-    }
-    confirmDeleteStatus(status) {
-        this.documentDefinitionName$
-            .pipe(switchMap(documentDefinitionName => this.zgwDocumentColumnService.deleteConfiguredColumn(documentDefinitionName, status.key)))
-            .subscribe(() => {
-            this.reload();
-        });
-    }
-    onMoveRowClick(event) {
-        const { direction, index } = event;
-        const orderedStatuses = direction === MoveRowDirection.UP
-            ? this.swapStatuses(this._documentStatuses, index - 1, index)
-            : this.swapStatuses(this._documentStatuses, index, index + 1);
-        this.documentDefinitionName$
-            .pipe(switchMap(documentDefinitionName => this.zgwDocumentColumnService.updateConfiguredColumns(documentDefinitionName, orderedStatuses)))
-            .subscribe(() => {
-            this.reload(true);
-        });
     }
-    reload(noAnimation = false) {
-        this._reload$.next(noAnimation ? 'noAnimation' : null);
+    resetFilter() {
+        this.creationDateFromPicker.writeValue([]);
+        this.creationDateToPicker.writeValue([]);
+        this.formGroup.reset();
     }
-    swapStatuses(statuses, index1, index2) {
-        const temp = [...statuses];
-        temp[index1] = temp.splice(index2, 1, temp[index1])[0];
-        return temp;
+    onDateSelected(control, event) {
+        if (control === 'createdFrom') {
+            this.formGroup.get('creatiedatumFrom')?.patchValue(event);
+            return;
+        }
+        this.formGroup.get('creatiedatumTo')?.patchValue(event);
+    }
+    openFormValueSubscription() {
+        this._subscriptions.add(this.formGroup.valueChanges.pipe(debounceTime(500)).subscribe(formValue => {
+            this.filterEvent.emit({
+                ...(!!formValue.auteur && { auteur: formValue.auteur }),
+                ...(!!formValue.titel && { titel: formValue.titel }),
+                ...(!!formValue.creatiedatumFrom && {
+                    creatiedatumFrom: flatpickr.formatDate(new Date(formValue.creatiedatumFrom), 'Y-m-d'),
+                }),
+                ...(!!formValue.creatiedatumTo && {
+                    creatiedatumTo: flatpickr.formatDate(new Date(formValue.creatiedatumTo), 'Y-m-d'),
+                }),
+                ...(!!formValue.vertrouwelijkHeidaanduiding?.id && {
+                    vertrouwelijkheidaanduiding: formValue.vertrouwelijkHeidaanduiding.id,
+                }),
+                ...(!!formValue.informatieObjectType?.id && {
+                    informatieobjecttype: formValue.informatieObjectType.id,
+                }),
+                ...(!!formValue.trefwoorden &&
+                    formValue.trefwoorden.length > 0 && {
+                    trefwoorden: formValue.trefwoorden.reduce((acc, curr, index) => (index === 0 ? curr.content : `${acc},${curr.content}`), ''),
+                }),
+            });
+        }));
     }
-    initFields() {
-        this.fields$.next([
-            {
-                key: 'title',
-                label: 'dossierManagement.statuses.columns.title',
-                viewType: ViewType.TEXT,
-            },
-            {
-                key: 'key',
-                label: 'dossierManagement.statuses.columns.key',
-                viewType: ViewType.TEXT,
-            },
-            {
-                key: 'visibleInCaseListByDefault',
-                label: 'dossierManagement.statuses.columns.visible',
-                viewType: ViewType.BOOLEAN,
-            },
-            {
-                viewType: ViewType.TEMPLATE,
-                template: this.colorColumnTemplate,
-                key: 'color',
-                label: 'dossierManagement.statuses.columns.color',
-            },
-        ]);
+    convertTrefwoordenParam(stringArray) {
+        if (!stringArray)
+            return [];
+        const array = stringArray.split(',');
+        return array.map((content) => ({
+            content,
+            selected: true,
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentenApiColumnService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DocumentenApiColumnsComponent, isStandalone: true, selector: "valtimo-documenten-api-columns", viewQueries: [{ propertyName: "colorColumnTemplate", first: true, predicate: ["colorColumnTemplate"], descendants: true }], usesInheritance: 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<valtimo-carbon-list\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentStatuses: documentStatuses$ | async\n  } as obs\"\n  [fields]=\"fields$ | async\"\n  [header]=\"false\"\n  [loading]=\"obs.loading\"\n  [movingRowsEnabled]=\"true\"\n  [actionItems]=\"ACTION_ITEMS\"\n  (rowClicked)=\"openEditModal($event)\"\n  (moveRow)=\"onMoveRowClick($event)\"\n>\n  <ng-container\n    carbonToolbarContent\n    *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n  ></ng-container>\n</valtimo-carbon-list>\n\n<valtimo-documenten-api-column-modal\n  [type]=\"statusModalType$ | async\"\n  [usedKeys]=\"usedKeys$ | async\"\n  [documentDefinitionName]=\"documentDefinitionName$ | async\"\n  (closeModalEvent)=\"closeModal($event)\"\n></valtimo-documenten-api-column-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"columnToUpdate$ | async\"\n  [showModalSubject$]=\"showDisableModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"confirmDeleteStatus($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"dossier-management-search-fields__buttons\">\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"openAddModal()\">\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n      {{ 'dossierManagement.statuses.add' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #colorColumnTemplate let-data=\"data\">\n  <cds-tag class=\"cds-tag--no-margin\" [type]=\"data?.item?.tagType\">\n    {{ 'interface.tagType.' + data?.item?.tagType | translate }}\n  </cds-tag>\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: ["type", "prefill", "usedKeys", "documentDefinitionName"], outputs: ["closeModalEvent"] }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i3$2.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i3$2.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: "component", type: i2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiFilterComponent, deps: [{ token: i1$2.DocumentService }, { token: i5.FormBuilder }, { token: i9.IconService }, { token: i1$1.ActivatedRoute }, { token: i5$1.TranslateService }, { token: DocumentenApiTagService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DatePickerInputModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i9.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: i9.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "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: i9.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: i9.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i9.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i9.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiColumnsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-documenten-api-columns', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'valtimo-dossier-detail-tab-documenten-api-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
-                        DocumentenApiColumnModalComponent,
-                        CarbonListModule,
-                        TranslateModule,
-                        ConfirmationModalModule,
-                        TagModule,
                         ButtonModule,
-                    ], 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<valtimo-carbon-list\n  *ngIf=\"{\n    loading: loading$ | async,\n    documentStatuses: documentStatuses$ | async\n  } as obs\"\n  [fields]=\"fields$ | async\"\n  [header]=\"false\"\n  [loading]=\"obs.loading\"\n  [movingRowsEnabled]=\"true\"\n  [actionItems]=\"ACTION_ITEMS\"\n  (rowClicked)=\"openEditModal($event)\"\n  (moveRow)=\"onMoveRowClick($event)\"\n>\n  <ng-container\n    carbonToolbarContent\n    *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n  ></ng-container>\n</valtimo-carbon-list>\n\n<valtimo-documenten-api-column-modal\n  [type]=\"statusModalType$ | async\"\n  [usedKeys]=\"usedKeys$ | async\"\n  [documentDefinitionName]=\"documentDefinitionName$ | async\"\n  (closeModalEvent)=\"closeModal($event)\"\n></valtimo-documenten-api-column-modal>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"columnToUpdate$ | async\"\n  [showModalSubject$]=\"showDisableModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"confirmDeleteStatus($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <div class=\"dossier-management-search-fields__buttons\">\n    <button cdsButton=\"primary\" [disabled]=\"obs.loading\" (click)=\"openAddModal()\">\n      <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n      {{ 'dossierManagement.statuses.add' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #colorColumnTemplate let-data=\"data\">\n  <cds-tag class=\"cds-tag--no-margin\" [type]=\"data?.item?.tagType\">\n    {{ 'interface.tagType.' + data?.item?.tagType | translate }}\n  </cds-tag>\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"] }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentenApiColumnService }], propDecorators: { colorColumnTemplate: [{
+                        DatePickerInputModule,
+                        DatePickerModule,
+                        DropdownModule,
+                        IconModule,
+                        InputModule,
+                        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$2.DocumentService }, { type: i5.FormBuilder }, { type: i9.IconService }, { type: i1$1.ActivatedRoute }, { type: i5$1.TranslateService }, { type: DocumentenApiTagService }], propDecorators: { creationDateFromPicker: [{
+                type: ViewChild,
+                args: ['creationDateFrom']
+            }], creationDateToPicker: [{
                 type: ViewChild,
-                args: ['colorColumnTemplate']
+                args: ['creationDateTo']
+            }], filterEvent: [{
+                type: Output
             }] } });
 
 /*
@@ -709,15 +900,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class DocumentenApiMetadataModalComponent {
-    constructor(modalService, translateService, route, documentService, keycloakService, valtimoModalService) {
-        this.modalService = modalService;
-        this.translateService = translateService;
+    get confidentialityLevelFormControl() {
+        return this.documentenApiMetadataForm.get('vertrouwelijkheidaanduiding');
+    }
+    get informatieobjecttypeFormControl() {
+        return this.documentenApiMetadataForm.get('informatieobjecttype');
+    }
+    get languageFormControl() {
+        return this.documentenApiMetadataForm.get('taal');
+    }
+    get statusFormControl() {
+        return this.documentenApiMetadataForm.get('status');
+    }
+    get tagFormControl() {
+        return this.documentenApiMetadataForm.get('trefwoorden');
+    }
+    constructor(route, documentService, documentenApiDocumentService, documentenApiTagService, fb, keycloakService, modalService, translateService, valtimoModalService) {
         this.route = route;
         this.documentService = documentService;
+        this.documentenApiDocumentService = documentenApiDocumentService;
+        this.documentenApiTagService = documentenApiTagService;
+        this.fb = fb;
         this.keycloakService = keycloakService;
+        this.modalService = modalService;
+        this.translateService = translateService;
         this.valtimoModalService = valtimoModalService;
         this.documentTitle = '';
+        this.open = false;
+        this.supportsTrefwoorden = false;
         this.metadata = new EventEmitter();
+        this.modalClose = new EventEmitter();
+        this.documentenApiMetadataForm = this.fb.group({
+            bestandsnaam: this.fb.control('', Validators.required),
+            titel: this.fb.control('', Validators.required),
+            auteur: this.fb.control('', Validators.required),
+            beschrijving: this.fb.control('', Validators.required),
+            taal: this.fb.control('', Validators.required),
+            informatieobjecttype: this.fb.control('', Validators.required),
+            status: this.fb.control('', Validators.required),
+            vertrouwelijkheidaanduiding: this.fb.control('', Validators.required),
+            creatiedatum: this.fb.control('', Validators.required),
+            ontvangstdatum: this.fb.control(''),
+            verzenddatum: this.fb.control(''),
+            trefwoorden: this.fb.control([]),
+        });
+        this.isDefinitiveStatus$ = new BehaviorSubject(false);
         this.CONFIDENTIALITY_LEVELS = [
             'openbaar',
             'beperkt_openbaar',
@@ -728,11 +955,13 @@ class DocumentenApiMetadataModalComponent {
             'geheim',
             'zeer_geheim',
         ];
-        this.confidentialityLevelItems$ = this.translateService
-            .stream('key')
-            .pipe(map(() => this.CONFIDENTIALITY_LEVELS.map(confidentialityLevel => ({
+        this.confidentialityLevelItems$ = combineLatest([
+            this.confidentialityLevelFormControl.valueChanges.pipe(startWith(this.confidentialityLevelFormControl.value)),
+            this.translateService.stream('key'),
+        ]).pipe(map(([currentConfidentialityLevel]) => this.CONFIDENTIALITY_LEVELS.map(confidentialityLevel => ({
             id: confidentialityLevel,
-            text: this.translateService.instant(`document.${confidentialityLevel}`),
+            content: this.translateService.instant(`document.${confidentialityLevel}`),
+            selected: currentConfidentialityLevel === confidentialityLevel,
         }))));
         this.ADDITONAL_DOCUMENT_DATE_OPTIONS = [
             {
@@ -760,157 +989,251 @@ class DocumentenApiMetadataModalComponent {
         this.formData$ = new BehaviorSubject(null);
         this.statusItems$ = combineLatest([
             this.additionalDocumentDate$,
+            this.statusFormControl.valueChanges.pipe(startWith(this.statusFormControl.value)),
             this.translateService.stream('key'),
-        ]).pipe(tap$1(([additionalDocumentDate]) => {
+        ]).pipe(tap$1(([additionalDocumentDate, currentStatus]) => {
             this.formData$.pipe(take(1)).subscribe(formData => {
                 if (additionalDocumentDate === 'received' &&
                     (formData.status === 'in_bewerking' || formData.status === 'ter_vaststelling')) {
                     this.clearStatusSelection$.next(null);
                 }
             });
-        }), map(([additionalDocumentDate]) => (additionalDocumentDate === 'received' ? this.RECEIPT_STATUSES : this.STATUSES).map(status => ({
+        }), map(([additionalDocumentDate, currentStatus]) => (additionalDocumentDate === 'received' ? this.RECEIPT_STATUSES : this.STATUSES).map(status => ({
             id: status,
-            text: this.translateService.instant(`document.${status}`),
+            content: this.translateService.instant(`document.${status}`),
+            selected: currentStatus === status,
         }))));
-        this.LANGUAGES = ['nld', 'eng', 'deu'];
-        this.languageItems$ = this.translateService.stream('key').pipe(map(() => this.LANGUAGES.map(language => ({
-            id: language,
-            text: this.translateService.instant(`document.${language}`),
+        this.documentDefinitionName$ = from(this.route.params.pipe(map(params => params?.documentDefinitionName)));
+        this.tagItems$ = combineLatest([
+            this.documentDefinitionName$,
+            this.tagFormControl.valueChanges.pipe(startWith(this.tagFormControl.value)),
+        ]).pipe(filter(([documentDefinitionName]) => !!documentDefinitionName), switchMap(([documentDefinitionName, tagFormControlValue]) => combineLatest([
+            this.documentenApiTagService.getTags(documentDefinitionName),
+            of(tagFormControlValue),
+        ])), map(([tags, tagFormControlValue]) => tags.map(tag => ({
+            id: tag.value,
+            content: tag.value,
+            selected: !!tagFormControlValue ? tagFormControlValue.includes(tag.value) : false,
         }))));
+        this.LANGUAGES = ['nld', 'eng', 'deu'];
+        this.languageItems$ = combineLatest([
+            this.languageFormControl.valueChanges.pipe(startWith(this.languageFormControl.value)),
+            this.translateService.stream('key'),
+        ]).pipe(map(([currentLanguage]) => {
+            return this.LANGUAGES.map((language) => ({
+                content: this.translateService.instant(`document.${language}`),
+                id: language,
+                selected: currentLanguage === language,
+            }));
+        }));
         this.documentTypeItems$ = combineLatest([
             this.route?.params || of(null),
             this.route?.firstChild?.params || of(null),
             this.valtimoModalService.documentDefinitionName$,
+            this.informatieobjecttypeFormControl.valueChanges.pipe(startWith(this.informatieobjecttypeFormControl.value)),
         ]).pipe(filter(([params, firstChildParams, documentDefinitionName]) => !!(params?.documentDefinitionName ||
             firstChildParams?.documentDefinitionName ||
-            documentDefinitionName)), switchMap(([params, firstChildParams, documentDefinitionName]) => this.documentService.getDocumentTypes(params?.documentDefinitionName ||
-            firstChildParams?.documentDefinitionName ||
-            documentDefinitionName)), map(documentTypes => documentTypes.map(type => ({ id: type.url, text: type.name }))));
-        this.showForm$ = this.modalService.modalVisible$;
-        this.valid$ = new BehaviorSubject(false);
+            documentDefinitionName)), switchMap(([params, firstChildParams, documentDefinitionName, informatieobjecttypeValue]) => combineLatest([
+            this.documentService.getDocumentTypes(params?.documentDefinitionName ||
+                firstChildParams?.documentDefinitionName ||
+                documentDefinitionName),
+            of(informatieobjecttypeValue),
+        ])), map(([documentTypes, informatieobjecttypeValue]) => documentTypes.map((type) => ({
+            id: type.url,
+            content: type.name,
+            selected: informatieobjecttypeValue === type.url,
+        }))));
         this.userEmail$ = from(this.keycloakService.loadUserProfile()).pipe(map(userProfile => userProfile?.email || ''));
+        this.modalSize = 'lg';
+        this._subscriptions = new Subscription();
     }
     ngOnInit() {
-        this.openShowSubscription();
-        this.openHideSubscription();
+        this.openFileSubscription();
+    }
+    ngOnChanges() {
+        this.openFileSubscription();
     }
     ngOnDestroy() {
-        this.showSubscription?.unsubscribe();
-        this.hideSubscription?.unsubscribe();
+        this._subscriptions.unsubscribe();
+        this.isDefinitiveStatus$.next(false);
     }
-    hide() {
-        this.formData$.next(null);
-        this.valid$.next(false);
-        this.additionalDocumentDate$.next('neither');
-        this.modalService.closeModal();
+    languageSelected(event) {
+        if (event.item.id) {
+            this.documentenApiMetadataForm.patchValue({
+                taal: event.item.id,
+            });
+        }
+    }
+    tagsSelected(event) {
+        this.tagFormControl.patchValue(event.filter(tag => tag.selected).map(tag => tag.id));
+    }
+    confidentialityLevelSelected(event) {
+        if (event.item.id) {
+            this.documentenApiMetadataForm.patchValue({
+                vertrouwelijkheidaanduiding: event.item.id,
+            });
+        }
+    }
+    statusSelected(event) {
+        if (event.item.id) {
+            this.documentenApiMetadataForm.patchValue({
+                status: event.item.id,
+            });
+        }
+    }
+    informatieobjecttypeSelected(event) {
+        if (event.item.id) {
+            this.documentenApiMetadataForm.patchValue({
+                informatieobjecttype: event.item.id,
+            });
+        }
     }
-    cancel() {
-        this.hide();
+    prefillForm(file) {
+        this.prefillFilenameAndAuthor();
+        if (file) {
+            const { bestandsnaam, titel, auteur, beschrijving, taal, informatieobjecttype, status, vertrouwelijkheidaanduiding, creatiedatum, ontvangstdatum, verzenddatum, trefwoorden, } = file;
+            if (verzenddatum)
+                this.additionalDocumentDate$.next('sent');
+            else if (ontvangstdatum)
+                this.additionalDocumentDate$.next('received');
+            else
+                this.additionalDocumentDate$.next('neither');
+            this.documentenApiMetadataForm.patchValue({
+                bestandsnaam,
+                titel,
+                auteur,
+                beschrijving,
+                taal,
+                informatieobjecttype,
+                status,
+                vertrouwelijkheidaanduiding,
+                creatiedatum,
+                ontvangstdatum,
+                verzenddatum,
+                trefwoorden,
+            });
+        }
     }
     save() {
-        combineLatest([this.valid$, this.formData$])
-            .pipe(take(1))
-            .subscribe(([valid, formData]) => {
-            if (valid) {
-                this.metadata.emit(formData);
-            }
-        });
+        this.formatDate('creatiedatum');
+        this.formatDate('verzenddatum');
+        this.formatDate('ontvangstdatum');
+        if (this.documentenApiMetadataForm.valid)
+            this.metadata.emit(this.documentenApiMetadataForm.value);
+        this.closeModal();
+    }
+    closeModal() {
+        this.additionalDocumentDate$.next('neither');
+        this.modalClose.emit();
+        this.clearForm();
+    }
+    clearForm() {
+        this.documentenApiMetadataForm.reset();
+    }
+    prefillFilenameAndAuthor() {
+        this._subscriptions.add(combineLatest([this.file$, this.userEmail$])
+            .pipe(tap$1(([file, userEmail]) => {
+            this.documentenApiMetadataForm.patchValue({
+                bestandsnaam: file?.name || file?.bestandsnaam,
+                auteur: userEmail,
+            });
+        }))
+            .subscribe());
+    }
+    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')}`,
+            });
+        }
     }
-    formValueChange(data) {
-        this.formData$.next(data);
-        this.setValid(data);
+    openFileSubscription() {
+        this._fileSubscription?.unsubscribe();
+        if (this.file$) {
+            this._fileSubscription = this.file$.subscribe(file => {
+                if (file) {
+                    this.prefillForm(file);
+                    this.isDefinitiveStatus$.next(file.status === 'definitief' && this.isEditMode ? true : false);
+                }
+            });
+        }
     }
     setAdditionalDate(value) {
         this.additionalDocumentDate$.next(value);
     }
-    setValid(data) {
-        this.valid$.next(!!(data.filename &&
-            data.title &&
-            data.author &&
-            data.creationDate &&
-            data.status &&
-            data.language &&
-            data.informatieobjecttype &&
-            data.description &&
-            data.confidentialityLevel));
-    }
-    openShowSubscription() {
-        this.showSubscription = this.show$.subscribe(() => {
-            this.modalService.openModal(this.documentenApiMetadataModal);
-        });
-    }
-    openHideSubscription() {
-        this.hideSubscription = this.hide$.subscribe(() => {
-            this.hide();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiMetadataModalComponent, deps: [{ token: i3$2.ModalService }, { token: i3$1.TranslateService }, { token: i1$1.ActivatedRoute }, { token: i3.DocumentService }, { token: i5$1.KeycloakService }, { token: i3$2.ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DocumentenApiMetadataModalComponent, isStandalone: true, selector: "valtimo-documenten-api-metadata-modal", inputs: { show$: "show$", hide$: "hide$", disabled$: "disabled$", file$: "file$", documentTitle: "documentTitle", disableDocumentTitle: "disableDocumentTitle", filename: "filename", disableFilename: "disableFilename", author: "author", disableAuthor: "disableAuthor", status: "status", disableStatus: "disableStatus", language: "language", disableLanguage: "disableLanguage", documentType: "documentType", disableDocumentType: "disableDocumentType", description: "description", disableDescription: "disableDescription", confidentialityLevel: "confidentialityLevel", disableConfidentialityLevel: "disableConfidentialityLevel", trefwoorden: "trefwoorden", disableTrefwoorden: "disableTrefwoorden" }, outputs: { metadata: "metadata" }, viewQueries: [{ propertyName: "documentenApiMetadataModal", first: true, predicate: ["documentenApiMetadataModal"], 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  #documentenApiMetadataModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{file: file$ | async, disabled: disabled$ | async, valid: valid$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [center]=\"true\" [fullWidth]=\"true\" [margin]=\"false\" type=\"h2\">{{\n        'document.fillInMetadata' | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">{{\n        'document.cancel' | translate\n      }}</v-button>\n      <v-button\n        (clickEvent)=\"save()\"\n        [disabled]=\"obs.disabled || !obs.valid\"\n        mdiIcon=\"upload\"\n        type=\"success\"\n        >{{ 'document.upload' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form\n      (valueChange)=\"formValueChange($event)\"\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n    >\n      <v-input\n        [defaultValue]=\"filename || obs.file?.name\"\n        [disabled]=\"obs.disabled || disableFilename\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.filename' | translate\"\n        [tooltip]=\"'document.filenameTooltip' | translate\"\n        name=\"filename\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"documentTitle\"\n        [disabled]=\"obs.disabled || disableDocumentTitle\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.inputTitle' | translate\"\n        [tooltip]=\"'document.inputTitleTooltip' | translate\"\n        [widthPx]=\"400\"\n        name=\"title\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"author || (userEmail$ | async)\"\n        [disabled]=\"obs.disabled || disableAuthor\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.author' | translate\"\n        [tooltip]=\"'document.authorTooltip' | translate\"\n        [widthPx]=\"300\"\n        name=\"author\"\n      >\n      </v-input>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelectionId]=\"language || languageItems[0].id\"\n        [disabled]=\"obs.disabled || disableLanguage\"\n        [items]=\"languageItems\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.language' | translate\"\n        [tooltip]=\"'document.languageTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"language\"\n      ></v-select>\n      <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n        <v-select\n          [defaultSelectionId]=\"documentType\"\n          [disabled]=\"obs.disabled || disableDocumentType\"\n          [items]=\"obs.documentTypeItems\"\n          [loading]=\"!obs.documentTypeItems\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          [title]=\"'document.informatieobjecttype' | translate\"\n          [tooltip]=\"'document.informatieobjecttypeTooltip' | translate\"\n          [widthInPx]=\"200\"\n          name=\"informatieobjecttype\"\n        ></v-select>\n      </ng-container>\n      <v-date-picker\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.creationDate' | translate\"\n        [tooltip]=\"'document.creationDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"creationDate\"\n      ></v-date-picker>\n      <ng-container\n        *ngTemplateOutlet=\"additionalDatePicker; context: {additionalDate: additionalDate}\"\n      ></ng-container>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'received'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.receiptDate' | translate\"\n        [tooltip]=\"'document.receiptDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"receiptDate\"\n      ></v-date-picker>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'sent'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.sendDate' | translate\"\n        [tooltip]=\"'document.sendDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"sendDate\"\n      ></v-date-picker>\n      <v-select\n        [defaultSelectionId]=\"status\"\n        [disabled]=\"obs.disabled || disableStatus\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [clearSelectionSubject$]=\"clearStatusSelection$\"\n        name=\"status\"\n      ></v-select>\n      <v-input\n        [defaultValue]=\"description\"\n        [disabled]=\"obs.disabled || disableDescription\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [title]=\"'document.inputDescription' | translate\"\n        [tooltip]=\"'document.inputDescriptionTooltip' | translate\"\n        [required]=\"true\"\n        name=\"description\"\n      >\n      </v-input>\n      <v-select\n        [defaultSelectionId]=\"confidentialityLevel\"\n        [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n        [items]=\"confidentialityLevelItems$ | async\"\n        [margin]=\"true\"\n        [title]=\"'document.confidentialityLevel' | translate\"\n        [tooltip]=\"'document.confidentialityLevelTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [required]=\"true\"\n        name=\"confidentialityLevel\"\n      ></v-select>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #additionalDatePicker let-additionalDate=\"additionalDate\">\n  <v-input-label\n    [title]=\"'document.additionalDate' | translate\"\n    [name]=\"'additionalDate'\"\n    [tooltip]=\"'document.additionalDateTooltip' | translate\"\n    [required]=\"true\"\n  >\n  </v-input-label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1 additional-date\">\n    <label\n      class=\"custom-control custom-radio custom-control-inline\"\n      *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n      (click)=\"setAdditionalDate(option.value)\"\n    >\n      <input\n        class=\"custom-control-input\"\n        type=\"radio\"\n        name=\"radio-inline\"\n        [checked]=\"additionalDate === option.value\"\n      /><span class=\"custom-control-label\">{{ option.translationKey | translate }}</span>\n    </label>\n  </div>\n</ng-template>\n", styles: [".buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}.additional-date{padding:0;width:100%;max-width:100%;margin:0;margin-block-end:var(--v-input-margin)}.additional-date .custom-control{margin-bottom:0}\n/*!\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: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3$2.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: TitleModule }, { kind: "component", type: i3$2.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "ngmodule", type: ButtonModule$1 }, { kind: "component", type: i3$2.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i3$2.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3$2.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$2.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"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i3$2.DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime", "carbonTheme"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i3$2.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiMetadataModalComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$2.DocumentService }, { token: DocumentenApiDocumentService }, { token: DocumentenApiTagService }, { token: i5.FormBuilder }, { token: i6.KeycloakService }, { token: i3.ModalService }, { token: i5$1.TranslateService }, { token: i3.ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", 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", documentTitle: "documentTitle", documentType: "documentType", disableTrefwoorden: "disableTrefwoorden", filename: "filename", isEditMode: "isEditMode", language: "language", open: "open", status: "status", supportsTrefwoorden: "supportsTrefwoorden" }, outputs: { metadata: "metadata", modalClose: "modalClose" }, 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<cds-modal\n  #documentenApiMetadataModal\n  [open]=\"open\"\n  [size]=\"modalSize\"\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  } as obs\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\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  </cds-modal-header>\n  <section cdsModalContent class=\"cds--modal-content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n  </section>\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n      {{ 'document.cancel' | translate }}\n    </button>\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  </cds-modal-footer>\n</cds-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container>\n    <form\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n      [formGroup]=\"documentenApiMetadataForm\"\n    >\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              [disabled]=\"obs.disabled || disableFilename\"\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              [disabled]=\"obs.disabled || disableAuthor\"\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              [placeholder]=\"'document.languagePlaceholder' | translate\"\n              [disabled]=\"obs.disabled || disableLanguage\"\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              [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n              id=\"vertrouwelijkheidaanduiding\"\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 || disableDocumentType\"\n                id=\"informatieobjecttype\"\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]=\"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                (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              [disabled]=\"obs.disabled || disableDocumentTitle\"\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              [disabled]=\"obs.disabled || disableDescription\"\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                [disabled]=\"obs.disabled\"\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 || disableStatus\"\n              id=\"status\"\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=\"additionalDate === 'received'\"\n            [disabled]=\"obs.disabled\"\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=\"additionalDate === 'sent'\"\n            [disabled]=\"obs.disabled\"\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-container>\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%}\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: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i9.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i9.TextareaLabelComponent, selector: "cds-textarea-label, ibm-textarea-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textAreaTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i9.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i9.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i9.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i9.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i9.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "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: i9.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: i9.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: "component", type: i9.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: RadioModule }, { kind: "component", type: i9.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i9.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: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "component", type: i9.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiMetadataModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-documenten-api-metadata-modal', standalone: true, imports: [
+                        ButtonModule,
+                        InputModule,
+                        ComboBoxModule,
                         CommonModule,
-                        TranslateModule,
-                        VModalModule,
-                        TitleModule,
-                        ButtonModule$1,
-                        TranslateModule,
-                        FormModule,
-                        InputModule$1,
-                        SelectModule,
                         DatePickerModule,
+                        DropdownModule,
+                        IconModule,
                         InputLabelModule,
-                    ], 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  #documentenApiMetadataModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{file: file$ | async, disabled: disabled$ | async, valid: valid$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [center]=\"true\" [fullWidth]=\"true\" [margin]=\"false\" type=\"h2\">{{\n        'document.fillInMetadata' | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">{{\n        'document.cancel' | translate\n      }}</v-button>\n      <v-button\n        (clickEvent)=\"save()\"\n        [disabled]=\"obs.disabled || !obs.valid\"\n        mdiIcon=\"upload\"\n        type=\"success\"\n        >{{ 'document.upload' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form\n      (valueChange)=\"formValueChange($event)\"\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n    >\n      <v-input\n        [defaultValue]=\"filename || obs.file?.name\"\n        [disabled]=\"obs.disabled || disableFilename\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.filename' | translate\"\n        [tooltip]=\"'document.filenameTooltip' | translate\"\n        name=\"filename\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"documentTitle\"\n        [disabled]=\"obs.disabled || disableDocumentTitle\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.inputTitle' | translate\"\n        [tooltip]=\"'document.inputTitleTooltip' | translate\"\n        [widthPx]=\"400\"\n        name=\"title\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"author || (userEmail$ | async)\"\n        [disabled]=\"obs.disabled || disableAuthor\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.author' | translate\"\n        [tooltip]=\"'document.authorTooltip' | translate\"\n        [widthPx]=\"300\"\n        name=\"author\"\n      >\n      </v-input>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelectionId]=\"language || languageItems[0].id\"\n        [disabled]=\"obs.disabled || disableLanguage\"\n        [items]=\"languageItems\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.language' | translate\"\n        [tooltip]=\"'document.languageTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"language\"\n      ></v-select>\n      <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n        <v-select\n          [defaultSelectionId]=\"documentType\"\n          [disabled]=\"obs.disabled || disableDocumentType\"\n          [items]=\"obs.documentTypeItems\"\n          [loading]=\"!obs.documentTypeItems\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          [title]=\"'document.informatieobjecttype' | translate\"\n          [tooltip]=\"'document.informatieobjecttypeTooltip' | translate\"\n          [widthInPx]=\"200\"\n          name=\"informatieobjecttype\"\n        ></v-select>\n      </ng-container>\n      <v-date-picker\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.creationDate' | translate\"\n        [tooltip]=\"'document.creationDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"creationDate\"\n      ></v-date-picker>\n      <ng-container\n        *ngTemplateOutlet=\"additionalDatePicker; context: {additionalDate: additionalDate}\"\n      ></ng-container>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'received'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.receiptDate' | translate\"\n        [tooltip]=\"'document.receiptDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"receiptDate\"\n      ></v-date-picker>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'sent'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.sendDate' | translate\"\n        [tooltip]=\"'document.sendDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"sendDate\"\n      ></v-date-picker>\n      <v-select\n        [defaultSelectionId]=\"status\"\n        [disabled]=\"obs.disabled || disableStatus\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [clearSelectionSubject$]=\"clearStatusSelection$\"\n        name=\"status\"\n      ></v-select>\n      <v-input\n        [defaultValue]=\"description\"\n        [disabled]=\"obs.disabled || disableDescription\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [title]=\"'document.inputDescription' | translate\"\n        [tooltip]=\"'document.inputDescriptionTooltip' | translate\"\n        [required]=\"true\"\n        name=\"description\"\n      >\n      </v-input>\n      <v-select\n        [defaultSelectionId]=\"confidentialityLevel\"\n        [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n        [items]=\"confidentialityLevelItems$ | async\"\n        [margin]=\"true\"\n        [title]=\"'document.confidentialityLevel' | translate\"\n        [tooltip]=\"'document.confidentialityLevelTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [required]=\"true\"\n        name=\"confidentialityLevel\"\n      ></v-select>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #additionalDatePicker let-additionalDate=\"additionalDate\">\n  <v-input-label\n    [title]=\"'document.additionalDate' | translate\"\n    [name]=\"'additionalDate'\"\n    [tooltip]=\"'document.additionalDateTooltip' | translate\"\n    [required]=\"true\"\n  >\n  </v-input-label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1 additional-date\">\n    <label\n      class=\"custom-control custom-radio custom-control-inline\"\n      *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n      (click)=\"setAdditionalDate(option.value)\"\n    >\n      <input\n        class=\"custom-control-input\"\n        type=\"radio\"\n        name=\"radio-inline\"\n        [checked]=\"additionalDate === option.value\"\n      /><span class=\"custom-control-label\">{{ option.translationKey | translate }}</span>\n    </label>\n  </div>\n</ng-template>\n", styles: [".buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}.additional-date{padding:0;width:100%;max-width:100%;margin:0;margin-block-end:var(--v-input-margin)}.additional-date .custom-control{margin-bottom:0}\n/*!\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: i3$2.ModalService }, { type: i3$1.TranslateService }, { type: i1$1.ActivatedRoute }, { type: i3.DocumentService }, { type: i5$1.KeycloakService }, { type: i3$2.ValtimoModalService }], propDecorators: { documentenApiMetadataModal: [{
-                type: ViewChild,
-                args: ['documentenApiMetadataModal']
-            }], show$: [{
-                type: Input
-            }], hide$: [{
-                type: Input
-            }], disabled$: [{
+                        InputModule$1,
+                        ModalModule,
+                        RadioModule,
+                        ReactiveFormsModule,
+                        SelectModule,
+                        TagModule,
+                        TooltipModule,
+                        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-modal\n  #documentenApiMetadataModal\n  [open]=\"open\"\n  [size]=\"modalSize\"\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  } as obs\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\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  </cds-modal-header>\n  <section cdsModalContent class=\"cds--modal-content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n  </section>\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\" [disabled]=\"obs.disabled\">\n      {{ 'document.cancel' | translate }}\n    </button>\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  </cds-modal-footer>\n</cds-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container>\n    <form\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n      [formGroup]=\"documentenApiMetadataForm\"\n    >\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              [disabled]=\"obs.disabled || disableFilename\"\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              [disabled]=\"obs.disabled || disableAuthor\"\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              [placeholder]=\"'document.languagePlaceholder' | translate\"\n              [disabled]=\"obs.disabled || disableLanguage\"\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              [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n              id=\"vertrouwelijkheidaanduiding\"\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 || disableDocumentType\"\n                id=\"informatieobjecttype\"\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]=\"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                (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              [disabled]=\"obs.disabled || disableDocumentTitle\"\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              [disabled]=\"obs.disabled || disableDescription\"\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                [disabled]=\"obs.disabled\"\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 || disableStatus\"\n              id=\"status\"\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=\"additionalDate === 'received'\"\n            [disabled]=\"obs.disabled\"\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=\"additionalDate === 'sent'\"\n            [disabled]=\"obs.disabled\"\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-container>\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%}\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.ActivatedRoute }, { type: i1$2.DocumentService }, { type: DocumentenApiDocumentService }, { type: DocumentenApiTagService }, { type: i5.FormBuilder }, { type: i6.KeycloakService }, { type: i3.ModalService }, { type: i5$1.TranslateService }, { type: i3.ValtimoModalService }], propDecorators: { disabled$: [{
                 type: Input
             }], file$: [{
                 type: Input
-            }], documentTitle: [{
+            }], author: [{
                 type: Input
-            }], disableDocumentTitle: [{
+            }], confidentialityLevel: [{
                 type: Input
-            }], filename: [{
+            }], description: [{
                 type: Input
-            }], disableFilename: [{
+            }], disableAuthor: [{
                 type: Input
-            }], author: [{
+            }], disableConfidentialityLevel: [{
                 type: Input
-            }], disableAuthor: [{
+            }], disableDescription: [{
                 type: Input
-            }], status: [{
+            }], disableDocumentTitle: [{
                 type: Input
-            }], disableStatus: [{
+            }], disableDocumentType: [{
                 type: Input
-            }], language: [{
+            }], disableFilename: [{
                 type: Input
             }], disableLanguage: [{
                 type: Input
+            }], disableStatus: [{
+                type: Input
+            }], documentTitle: [{
+                type: Input
             }], documentType: [{
                 type: Input
-            }], disableDocumentType: [{
+            }], disableTrefwoorden: [{
                 type: Input
-            }], description: [{
+            }], filename: [{
                 type: Input
-            }], disableDescription: [{
+            }], isEditMode: [{
                 type: Input
-            }], confidentialityLevel: [{
+            }], language: [{
                 type: Input
-            }], disableConfidentialityLevel: [{
+            }], open: [{
                 type: Input
-            }], trefwoorden: [{
+            }], status: [{
                 type: Input
-            }], disableTrefwoorden: [{
+            }], supportsTrefwoorden: [{
                 type: Input
             }], metadata: [{
                 type: Output
+            }], modalClose: [{
+                type: Output
             }] } });
 
 /*
@@ -929,7 +1252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class DossierDetailTabDocumentenApiDocumentsComponent {
-    constructor(route, router, uploadProviderService, downloadService, translateService, configService, userProviderService, fileSortService, iconService, documentenApiDocumentService) {
+    constructor(route, router, uploadProviderService, downloadService, translateService, configService, userProviderService, iconService, documentenApiDocumentService, documentenApiColumnService, documentenApiVersionService) {
         this.route = route;
         this.router = router;
         this.uploadProviderService = uploadProviderService;
@@ -937,110 +1260,129 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
         this.translateService = translateService;
         this.configService = configService;
         this.userProviderService = userProviderService;
-        this.fileSortService = fileSortService;
         this.iconService = iconService;
         this.documentenApiDocumentService = documentenApiDocumentService;
+        this.documentenApiColumnService = documentenApiColumnService;
+        this.documentenApiVersionService = documentenApiVersionService;
+        this._documentDefinitionName$ = this.route.params.pipe(map$1(params => params?.documentDefinitionName), filter$1(caseDefinitionName => !!caseDefinitionName));
+        this.supportedDocumentenApiFeatures$ = new BehaviorSubject(null);
+        this._supportedDocumentenApiFeatures$ = this._documentDefinitionName$.pipe(switchMap$1(caseDefinitionName => this.documentenApiVersionService.getSupportedApiFeatures(caseDefinitionName)), tap$1(supportedDocumentenApiFeatures => this.supportedDocumentenApiFeatures$.next(supportedDocumentenApiFeatures)));
+        this.fields$ = this._documentDefinitionName$.pipe(tap$1(() => this.fieldsLoading$.next(true)), switchMap$1(documentDefinitionName => combineLatest([
+            this.documentenApiColumnService.getConfiguredColumns(documentDefinitionName),
+            this._supportedDocumentenApiFeatures$,
+        ])), map$1(([columns, supportedDocumentenApiFeatures]) => {
+            const defaultSortColumn = columns.find((column) => !!column.defaultSort);
+            if (!!defaultSortColumn && supportedDocumentenApiFeatures.supportsSortableColumns) {
+                this._sort$.next({ sort: `${defaultSortColumn.key},${defaultSortColumn.defaultSort}` });
+            }
+            return columns.map((column) => ({
+                key: column.key === DOCUMENTEN_COLUMN_KEYS.BESTANDSOMVANG ? 'size' : column.key,
+                label: `zgw.documentColumns.${column.key}`,
+                viewType: !COLUMN_VIEW_TYPES[column.key] ? ViewType.TEXT : COLUMN_VIEW_TYPES[column.key],
+                ...(COLUMN_VIEW_TYPES[column.key] === ViewType.TEMPLATE && {
+                    template: this.translationTemplate,
+                    templateData: { key: column.key },
+                }),
+                ...(column.key === DOCUMENTEN_COLUMN_KEYS.CREATIEDATUM && { format: 'DD-MM-YYYY' }),
+                sortable: column.sortable && supportedDocumentenApiFeatures.supportsSortableColumns,
+            }));
+        }), tap$1(() => this.fieldsLoading$.next(false)));
         this.actionItems = [
             {
                 label: 'document.download',
                 callback: this.onDownloadActionClick.bind(this),
                 type: 'normal',
             },
+            {
+                label: 'document.edit',
+                callback: this.onEditMetadata.bind(this),
+                disabledCallback: this.editDisabled.bind(this),
+                type: 'normal',
+            },
             {
                 label: 'document.delete',
                 callback: this.onDeleteActionClick.bind(this),
                 type: 'danger',
             },
         ];
-        this.fieldsConfig = [
-            // TODO: Refactor this once admin page config is implemented
-            'title',
-            'fileName',
-            'format',
-            'size',
-            'description',
-            'createdOn',
-            'createdBy',
-            'author',
-            'informatieobjecttype',
-            'actions',
-        ];
-        this._documentDefinitionName$ = this.route.params.pipe(map$1(params => params?.documentDefinitionName), filter$1(documentDefinitionName => !!documentDefinitionName));
-        this._documentId$ = this.route.params.pipe(map$1(params => params?.documentId), filter$1(documentId => !!documentId));
+        this.documentDefinitionName$ = this.route.params.pipe(map$1(params => params?.documentDefinitionName), filter$1(documentDefinitionName => !!documentDefinitionName));
+        this.documentId$ = this.route.params.pipe(map$1(params => params?.documentId), filter$1(documentId => !!documentId));
+        this.initialSortState$ = this.route.queryParamMap.pipe(map$1(params => params['params']), map$1(params => {
+            if (!!params['sort']) {
+                const paramsSplit = params['sort'].split(',');
+                const state = {
+                    name: paramsSplit[0],
+                    direction: paramsSplit[1],
+                };
+                return {
+                    isSorting: true,
+                    state,
+                };
+            }
+            return null;
+        }));
         this.uploadProcessLinkedSet = false;
+        this.isEditMode$ = new BehaviorSubject(false);
         this.acceptedFiles = this.configService?.config?.caseFileUploadAcceptedFiles || null;
         this.maxFileSize = this.configService?.config?.caseFileSizeUploadLimitMB || 5;
         this.fileToBeUploaded$ = new BehaviorSubject(null);
-        this.hideModal$ = new Subject();
         this.modalDisabled$ = new BehaviorSubject(false);
         this.showModal$ = new Subject();
+        this.showUploadModal$ = new BehaviorSubject(false);
+        this.showDeleteConfirmationModal$ = new BehaviorSubject(false);
         this.uploading$ = new BehaviorSubject(false);
-        this.loading$ = new BehaviorSubject(true);
+        this._itemsLoading$ = new BehaviorSubject(true);
+        this.fieldsLoading$ = new BehaviorSubject(true);
+        this.loading$ = combineLatest([this._itemsLoading$, this.fieldsLoading$]).pipe(map$1(([itemsLoading, fieldsLoading]) => itemsLoading || fieldsLoading));
+        this.filter$ = new ReplaySubject();
         this._refetch$ = new BehaviorSubject(null);
+        this._sort$ = new ReplaySubject();
         this.relatedFiles$ = combineLatest([
-            this._documentId$,
+            this.documentId$,
+            this.route.queryParamMap,
             this._refetch$,
-        ]).pipe(tap$1(() => this.loading$.next(true)), switchMap$1(([documentId]) => combineLatest([
-            this.documentenApiDocumentService.getZakenApiDocuments(documentId),
+        ]).pipe(tap$1(() => this._itemsLoading$.next(true)), switchMap$1(([documentId, queryParams]) => combineLatest([
+            this.documentenApiDocumentService.getFilteredZakenApiDocuments(documentId, queryParams['params']),
             this.translateService.stream('key'),
         ])), map$1(([relatedFiles]) => {
-            const translatedFiles = relatedFiles?.map(file => ({
+            const translatedFiles = relatedFiles?.content?.map(file => ({
                 ...file,
                 createdBy: file.createdBy || this.translateService.instant('list.automaticallyGenerated'),
-                language: this.translateService.instant(`document.${file.language}`),
-                confidentialityLevel: this.translateService.instant(`document.${file.confidentialityLevel}`),
-                status: this.translateService.instant(`document.${file.status}`),
-                format: this.translateService.instant(`document.${file.format}`),
+                size: this.bytesToMegabytes(file.bestandsomvang),
+                tags: file.trefwoorden?.map((trefwoord) => ({
+                    content: trefwoord,
+                })),
             }));
             return translatedFiles || [];
-        }), map$1(relatedFiles => this.fileSortService.sortRelatedFilesByDateDescending(relatedFiles)), map$1(relatedFiles => {
-            moment.locale(this.translateService.currentLang);
-            return relatedFiles.map(file => ({
-                ...file,
-                createdOn: moment(new Date(file.createdOn)).format('L'),
-                size: `${this.bytesToMegabytes(file.sizeInBytes)}`,
-            }));
         }), tap$1(() => {
-            this.loading$.next(false);
+            this._itemsLoading$.next(false);
         }), catchError(() => {
             this.showZaakLinkWarning = true;
-            this.loading$.next(false);
+            this._itemsLoading$.next(false);
             return of([]);
         }));
+        this.iconService.register(Filter16);
     }
     ngOnInit() {
-        this.refetchDocuments();
+        this.setInitialFilterAndSort();
+        this.openQueryParamsSubscription();
         this.setUploadProcessLinked();
         this.isUserAdmin();
         this.iconService.registerAll([Filter16, TagGroup16, Upload16]);
     }
-    ngAfterViewInit() {
-        const fieldOptions = [
-            { key: 'title', label: 'document.inputTitle' },
-            { key: 'description', label: 'document.inputDescription' },
-            { key: 'fileName', label: 'document.filename' },
-            {
-                viewType: ViewType.TEMPLATE,
-                label: 'document.size',
-                key: 'size',
-                template: this.sizeTemplate,
-            },
-            { key: 'format', label: 'document.format' },
-            { key: 'createdOn', label: 'document.createdOn' },
-            { key: 'createdBy', label: 'document.createdBy' },
-            { key: 'author', label: 'document.author' },
-            { key: 'keywords', label: 'document.trefwoorden' },
-            { key: 'informatieobjecttype', label: 'document.informatieobjecttype' },
-            { key: 'language', label: 'document.language' },
-            { key: 'identification', label: 'document.id' },
-            { key: 'confidentialityLevel', label: 'document.confidentialityLevel' },
-            { key: 'receiptDate', label: 'document.receiptDate' },
-            { key: 'sendDate', label: 'document.sendDate' },
-            { key: 'status', label: 'document.status' },
-        ];
-        this.fields = [...this.getFields(fieldOptions, this.fieldsConfig)];
+    onDeleteActionClick(item) {
+        this.document = item;
+        this.showDeleteConfirmationModal$.next(true);
+    }
+    deleteDocument() {
+        this._itemsLoading$.next(true);
+        this.documentenApiDocumentService.deleteDocument(this.document).subscribe(() => {
+            this.refetchDocuments();
+        });
     }
     bytesToMegabytes(bytes) {
+        if (!bytes)
+            return '';
         const megabytes = bytes / (1024 * 1024);
         if (megabytes < 1) {
             return `${Math.ceil(megabytes * 1000)} KB`;
@@ -1062,44 +1404,56 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
     isUserAdmin() {
         this.userProviderService.getUserSubject().subscribe(userIdentity => {
             this.isAdmin = userIdentity.roles.includes('ROLE_ADMIN');
-        }, error => {
+        }, () => {
             this.isAdmin = false;
         });
     }
     metadataSet(metadata) {
         this.uploading$.next(true);
-        this.hideModal$.next(null);
-        combineLatest([this.fileToBeUploaded$, this._documentId$])
+        combineLatest([this.fileToBeUploaded$, this.documentId$])
             .pipe(take$1(1))
             .pipe(tap$1(([file, documentId]) => {
             if (!file)
                 return;
-            this.uploadProviderService
-                .uploadFileWithMetadata(file, documentId, metadata)
-                .subscribe(() => {
-                this.refetchDocuments();
-                this.uploading$.next(false);
-                this.fileToBeUploaded$.next(null);
-            });
+            if (this.isEditMode$.getValue()) {
+                this.documentenApiDocumentService.updateDocument(file, metadata).subscribe(() => {
+                    this.refetchDocuments();
+                    this.uploading$.next(false);
+                    this.fileToBeUploaded$.next(null);
+                });
+            }
+            else {
+                this.uploadProviderService
+                    .uploadFileWithMetadata(file, documentId, metadata)
+                    .subscribe(() => {
+                    this.refetchDocuments();
+                    this.filter$.next(null);
+                    this.uploading$.next(false);
+                    this.fileToBeUploaded$.next(null);
+                });
+            }
         }))
             .subscribe();
     }
-    onDeleteActionClick(item) {
-        this.loading$.next(true);
-        this.documentenApiDocumentService.deleteDocument(item).subscribe(() => {
-            // TODO: Use refetchDocuments() or should we just remove the document from relatedFiles$?
-            this.refetchDocuments();
-        });
-    }
     onDownloadActionClick(file) {
         this.downloadDocument(file, true);
     }
+    onEditMetadata(file) {
+        this.isEditMode$.next(true);
+        this.fileToBeUploaded$.next(file);
+        this.showUploadModal$.next(true);
+    }
+    closeMetadataModal() {
+        this.showUploadModal$.next(false);
+    }
     onFileSelected(event) {
+        this.isEditMode$.next(false);
         this.fileToBeUploaded$.next(event.target.files[0]);
-        this.showModal$.next(null);
+        this.showUploadModal$.next(true);
+        this.resetFileInput();
     }
     onNavigateToCaseAdminClick() {
-        this._documentDefinitionName$.pipe(take$1(1)).subscribe(documentDefinitionName => {
+        this.documentDefinitionName$.pipe(take$1(1)).subscribe(documentDefinitionName => {
             this.router.navigate([`/dossier-management/dossier/${documentDefinitionName}`]);
         });
     }
@@ -1109,17 +1463,42 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
     onUploadButtonClick() {
         this.fileInput.nativeElement.click();
     }
+    onFilterEvent(filter) {
+        this.filter$.next(filter);
+    }
+    onSortChanged(sortState) {
+        this._sort$.next(sortState.isSorting
+            ? {
+                sort: `${sortState.state.name === 'size' ? DOCUMENTEN_COLUMN_KEYS.BESTANDSOMVANG : sortState.state.name},${sortState.state.direction}`,
+            }
+            : null);
+    }
     refetchDocuments() {
         this._refetch$.next(null);
     }
+    editDisabled(file) {
+        return file.status === 'definitief';
+    }
     downloadDocument(relatedFile, forceDownload) {
-        this.downloadService.downloadFile(`/api/v1/documenten-api/${relatedFile.pluginConfigurationId}/files/${relatedFile.fileId}/download`, relatedFile.fileName, forceDownload);
+        this.downloadService.downloadFile(`/api/v1/documenten-api/${relatedFile.pluginConfigurationId}/files/${relatedFile.fileId}/download`, relatedFile.bestandsnaam ?? '', forceDownload);
+    }
+    openQueryParamsSubscription() {
+        combineLatest([
+            this.documentDefinitionName$,
+            this.documentId$,
+            this.filter$,
+            this._sort$,
+        ]).subscribe(([definitionName, documentId, filter, sort]) => {
+            this.router.navigate([`/dossiers/${definitionName}/document/${documentId}/documents`], {
+                queryParams: { ...filter, ...sort },
+            });
+        });
     }
-    getFields(fieldOptions, fieldsConfig) {
-        return fieldOptions.filter(fieldOption => fieldsConfig.includes(fieldOption.key));
+    resetFileInput() {
+        this.fileInput.nativeElement.value = '';
     }
     setUploadProcessLinked() {
-        this._documentDefinitionName$
+        this.documentDefinitionName$
             .pipe(switchMap$1(documentDefinitionName => this.uploadProviderService.checkUploadProcessLink(documentDefinitionName)), take$1(1), tap$1(() => {
             this.uploadProcessLinkedSet = true;
         }))
@@ -1127,8 +1506,19 @@ class DossierDetailTabDocumentenApiDocumentsComponent {
             this.uploadProcessLinked = linked;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$2.UploadProviderService }, { token: i2$2.DownloadService }, { token: i3$1.TranslateService }, { token: i2$1.ConfigService }, { token: i5$2.UserProviderService }, { token: i3.FileSortService }, { token: i2.IconService }, { token: DocumentenApiDocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DossierDetailTabDocumentenApiDocumentsComponent, isStandalone: true, selector: "valtimo-dossier-detail-tab-documenten-api-documents", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "sizeTemplate", first: true, predicate: ["sizeTemplate"], 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\n  class=\"carbon-document-table-wrapper\"\n  *ngIf=\"{\n    loading: loading$ | async,\n    uploading: uploading$ | async,\n    relatedFiles: relatedFiles$ | async\n  } as obs\"\n>\n  @if (!obs.loading && !obs.uploading && obs.relatedFiles) {\n    <ng-container\n      *ngTemplateOutlet=\"list; context: {relatedFiles: obs.relatedFiles}\"\n    ></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listLoading\"></ng-container>\n  }\n</div>\n\n<valtimo-documenten-api-metadata-modal\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hide$]=\"hideModal$\"\n  [show$]=\"showModal$\"\n  (metadata)=\"metadataSet($event)\"\n></valtimo-documenten-api-metadata-modal>\n\n<ng-template #list let-relatedFiles=\"relatedFiles\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [items]=\"relatedFiles\"\n    [fields]=\"fields\"\n    (rowClicked)=\"onRowClick($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      <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n    </div>\n\n    @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  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #listLoading>\n  <valtimo-carbon-list [items]=\"[]\" [fields]=\"fields\" [loading]=\"true\" hideColumnHeader>\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"uploadButton; context: {disabled: true}\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\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 #dossierListActions>\n  <input [accept]=\"acceptedFiles\" (change)=\"onFileSelected($event)\" hidden type=\"file\" #fileInput />\n  <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\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 #navigateToCaseAdminButton>\n  <button (click)=\"onNavigateToCaseAdminClick()\" cdsButton=\"primary\">\n    {{ 'dossier.documenten.navigateToCaseAdmin' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"settings\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #sizeTemplate let-data=\"data\">\n  <div class=\"documenten-api-documents-filesize-template\">\n    {{ bytesToMegabytes(data.item.sizeInBytes) }}\n  </div>\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}\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$2.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i3$2.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["show$", "hide$", "disabled$", "file$", "documentTitle", "disableDocumentTitle", "filename", "disableFilename", "author", "disableAuthor", "status", "disableStatus", "language", "disableLanguage", "documentType", "disableDocumentType", "description", "disableDescription", "confidentialityLevel", "disableConfidentialityLevel", "trefwoorden", "disableTrefwoorden"], outputs: ["metadata"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    setInitialFilterAndSort() {
+        this.route.queryParamMap
+            .pipe(take$1(1), map$1(queryParams => {
+            const { sort, ...filter } = queryParams['params'];
+            return { sort, filter };
+        }))
+            .subscribe(({ filter, sort }) => {
+            this._sort$.next({ sort });
+            this.filter$.next(filter);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2$1.UploadProviderService }, { token: i2$1.DownloadService }, { token: i5$1.TranslateService }, { token: i2.ConfigService }, { token: i5$2.UserProviderService }, { token: i9.IconService }, { token: DocumentenApiDocumentService }, { token: DocumentenApiColumnService }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", 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    initialSortState: initialSortState$ | async,\n    supportedDocumentenApiFeatures: supportedDocumentenApiFeatures$ | 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      [loading]=\"obs.loading\"\n      [initialSortState]=\"\n        obs?.supportedDocumentenApiFeatures?.supportsSortableColumns && obs.initialSortState\n      \"\n      (rowClicked)=\"onRowClick($event)\"\n      (sortChanged)=\"\n        obs?.supportedDocumentenApiFeatures?.supportsSortableColumns && onSortChanged($event)\n      \"\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", "documentTitle", "documentType", "disableTrefwoorden", "filename", "isEditMode", "language", "open", "status", "supportsTrefwoorden"], outputs: ["metadata", "modalClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i9.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "component", type: DocumentenApiFilterComponent, selector: "valtimo-dossier-detail-tab-documenten-api-filter", outputs: ["filterEvent"] }, { kind: "ngmodule", type: DialogModule }, { kind: "directive", type: i9.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabDocumentenApiDocumentsComponent, decorators: [{
             type: Component,
@@ -1139,13 +1529,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         ButtonModule,
                         IconModule,
                         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\n  class=\"carbon-document-table-wrapper\"\n  *ngIf=\"{\n    loading: loading$ | async,\n    uploading: uploading$ | async,\n    relatedFiles: relatedFiles$ | async\n  } as obs\"\n>\n  @if (!obs.loading && !obs.uploading && obs.relatedFiles) {\n    <ng-container\n      *ngTemplateOutlet=\"list; context: {relatedFiles: obs.relatedFiles}\"\n    ></ng-container>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"listLoading\"></ng-container>\n  }\n</div>\n\n<valtimo-documenten-api-metadata-modal\n  [disabled$]=\"modalDisabled$\"\n  [file$]=\"fileToBeUploaded$\"\n  [hide$]=\"hideModal$\"\n  [show$]=\"showModal$\"\n  (metadata)=\"metadataSet($event)\"\n></valtimo-documenten-api-metadata-modal>\n\n<ng-template #list let-relatedFiles=\"relatedFiles\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [items]=\"relatedFiles\"\n    [fields]=\"fields\"\n    (rowClicked)=\"onRowClick($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      <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n    </div>\n\n    @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  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #listLoading>\n  <valtimo-carbon-list [items]=\"[]\" [fields]=\"fields\" [loading]=\"true\" hideColumnHeader>\n    <div carbonToolbarContent>\n      <ng-container *ngTemplateOutlet=\"uploadButton; context: {disabled: true}\"></ng-container>\n    </div>\n  </valtimo-carbon-list>\n</ng-template>\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 #dossierListActions>\n  <input [accept]=\"acceptedFiles\" (change)=\"onFileSelected($event)\" hidden type=\"file\" #fileInput />\n  <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\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 #navigateToCaseAdminButton>\n  <button (click)=\"onNavigateToCaseAdminClick()\" cdsButton=\"primary\">\n    {{ 'dossier.documenten.navigateToCaseAdmin' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"settings\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #sizeTemplate let-data=\"data\">\n  <div class=\"documenten-api-documents-filesize-template\">\n    {{ bytesToMegabytes(data.item.sizeInBytes) }}\n  </div>\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}\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.ActivatedRoute }, { type: i1$1.Router }, { type: i2$2.UploadProviderService }, { type: i2$2.DownloadService }, { type: i3$1.TranslateService }, { type: i2$1.ConfigService }, { type: i5$2.UserProviderService }, { type: i3.FileSortService }, { type: i2.IconService }, { type: DocumentenApiDocumentService }], propDecorators: { fileInput: [{
+                        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    initialSortState: initialSortState$ | async,\n    supportedDocumentenApiFeatures: supportedDocumentenApiFeatures$ | 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      [loading]=\"obs.loading\"\n      [initialSortState]=\"\n        obs?.supportedDocumentenApiFeatures?.supportsSortableColumns && obs.initialSortState\n      \"\n      (rowClicked)=\"onRowClick($event)\"\n      (sortChanged)=\"\n        obs?.supportedDocumentenApiFeatures?.supportsSortableColumns && onSortChanged($event)\n      \"\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$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2$1.UploadProviderService }, { type: i2$1.DownloadService }, { type: i5$1.TranslateService }, { type: i2.ConfigService }, { type: i5$2.UserProviderService }, { type: i9.IconService }, { type: DocumentenApiDocumentService }, { type: DocumentenApiColumnService }, { type: DocumentenApiVersionService }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
-            }], sizeTemplate: [{
+            }], translationTemplate: [{
                 type: ViewChild,
-                args: ['sizeTemplate']
+                args: ['translationTemplate']
             }] } });
 
 /*
@@ -1224,13 +1617,13 @@ class DossierManagementLinkProcessComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementLinkProcessComponent, deps: [{ token: i2$1.ConfigService }, { token: i1$1.ActivatedRoute }, { token: DocumentenApiLinkProcessService }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$2.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementLinkProcessComponent, deps: [{ token: i2.ConfigService }, { token: i1$1.ActivatedRoute }, { token: DocumentenApiLinkProcessService }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ComboBoxModule }, { kind: "component", type: i9.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "items", "type", "size", "itemValueKey", "label", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i9.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.3", ngImport: i0, type: DossierManagementLinkProcessComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-dossier-management-link-process', standalone: true, imports: [CommonModule, ParagraphModule, TranslateModule, 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<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" }]
-        }], ctorParameters: () => [{ type: i2$1.ConfigService }, { type: i1$1.ActivatedRoute }, { type: DocumentenApiLinkProcessService }, { type: DocumentenApiVersionService }] });
+        }], ctorParameters: () => [{ type: i2.ConfigService }, { type: i1$1.ActivatedRoute }, { type: DocumentenApiLinkProcessService }, { type: DocumentenApiVersionService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1247,101 +1640,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DocumentenApiVersionComponent {
-    constructor(route, documentenApiVersionService) {
-        this.route = route;
-        this.documentenApiVersionService = documentenApiVersionService;
-        this.loading$ = new BehaviorSubject(true);
-        this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''), filter$1(documentDefinitionName => !!documentDefinitionName));
-        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)));
+class DocumentenApiTagModalComponent {
+    get value() {
+        return this.tagFormGroup?.get('value');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiVersionComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i2.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }] }); }
+    get invalid() {
+        return !!this.tagFormGroup?.invalid;
+    }
+    get pristine() {
+        return !!this.tagFormGroup?.pristine;
+    }
+    constructor(fb, documentenApiTagService) {
+        this.fb = fb;
+        this.documentenApiTagService = documentenApiTagService;
+        this.open = false;
+        this.closeModalEvent = new EventEmitter();
+        this.tagFormGroup = this.fb.group({
+            value: this.fb.control('', [Validators.required, Validators.maxLength(50)]),
+        });
+        this.disabled$ = new BehaviorSubject(false);
+        this._subscriptions = new Subscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    onClose() {
+        this.close();
+    }
+    addTag() {
+        this.disable();
+        this.documentenApiTagService
+            .createTag(this.documentDefinitionName, this.value.value)
+            .subscribe({
+            next: () => {
+                this.enable();
+                this.closeAndRefresh();
+                this.resetForm();
+            },
+            error: () => {
+                this.enable(false);
+            },
+        });
+    }
+    resetForm() {
+        this.tagFormGroup.reset();
+    }
+    disable() {
+        this.disabled$.next(true);
+        this.tagFormGroup.disable();
+    }
+    enable(delay = true) {
+        setTimeout(() => {
+            this.disabled$.next(false);
+            this.tagFormGroup.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.3", ngImport: i0, type: DocumentenApiTagModalComponent, deps: [{ token: i5.FormBuilder }, { token: DocumentenApiTagService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: i9.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i9.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i9.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i9.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.3", ngImport: i0, type: DocumentenApiVersionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiTagModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-documenten-api-version', standalone: true, imports: [CommonModule, TranslateModule, LoadingModule, 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<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"] }]
-        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentenApiVersionService }] });
-
-/*
- * 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.
- */
-
-/*
- * 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.
- */
-
-/*
- * 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.
- */
-
-/*
- * 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.
- */
-
-/*
- * 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.
- */
+            args: [{ selector: 'valtimo-documenten-api-tag-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ModalModule,
+                        TagModule,
+                        TranslateModule,
+                        InputModule,
+                        ReactiveFormsModule,
+                        ButtonModule,
+                        DropdownModule,
+                        ToggleModule,
+                    ], 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" }]
+        }], ctorParameters: () => [{ type: i5.FormBuilder }, { type: DocumentenApiTagService }], propDecorators: { documentDefinitionName: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], closeModalEvent: [{
+                type: Output
+            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1358,6 +1742,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class DocumentenApiTagsComponent {
+    get documentDefinitionName$() {
+        return this._documentDefinitionName$;
+    }
+    constructor(route, documentenApiTagService) {
+        this.route = route;
+        this.documentenApiTagService = documentenApiTagService;
+        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.addModalClosed$ = new BehaviorSubject(true);
+        this.showDeleteMultipleModal$ = new BehaviorSubject(false);
+        this.showDeleteModal$ = new Subject();
+        this.selectedRowKeys$ = new BehaviorSubject([]);
+        this.searchTerm$ = new BehaviorSubject('');
+        this.tagToDelete$ = new BehaviorSubject(null);
+        this.documentTags$ = combineLatest([
+            this._documentDefinitionName$,
+            this.searchTerm$,
+            this._reload$,
+        ]).pipe(tap(([_1, _2, reload]) => {
+            if (reload === null) {
+                this.loading$.next(true);
+            }
+        }), switchMap(([documentDefinitionName, searchTerm]) => this.documentenApiTagService.getTagsForAdmin(documentDefinitionName, {
+            page: this.pagination.page - 1,
+            size: this.pagination.size,
+            search: searchTerm,
+        })), map((tagPage) => {
+            this.pagination = {
+                ...this.pagination,
+                collectionSize: tagPage.totalElements,
+            };
+            return tagPage.content;
+        }), startWith([]), tap(() => {
+            this.loading$.next(false);
+        }));
+        this.ACTION_ITEMS = [
+            {
+                label: 'interface.delete',
+                callback: this.openDeleteModal.bind(this),
+                type: 'danger',
+            },
+        ];
+        this.FIELDS = [
+            {
+                key: 'value',
+                label: 'zgw.tags.fields.value',
+                viewType: ViewType.TEXT,
+            },
+        ];
+        this.pagination = {
+            collectionSize: 0,
+            page: 1,
+            size: 10,
+        };
+    }
+    openDeleteModal(tag) {
+        this.tagToDelete$.next(tag);
+        this.showDeleteModal$.next(true);
+    }
+    openAddModal() {
+        this.addModalClosed$.next(false);
+    }
+    closeModal(closeModalEvent) {
+        if (closeModalEvent === 'closeAndRefresh') {
+            this.reload();
+        }
+        this.addModalClosed$.next(true);
+    }
+    showDeleteMultipleModal() {
+        this.setSelectedRoleKeys();
+        this.showDeleteMultipleModal$.next(true);
+    }
+    setSelectedRoleKeys() {
+        this.selectedRowKeys$.next(this.carbonList.selectedItems.map((item) => item.value));
+    }
+    paginationClicked(page) {
+        this.pagination = { ...this.pagination, page };
+        this.reload();
+    }
+    paginationSet(size) {
+        this.pagination = { ...this.pagination, size };
+        this.reload();
+    }
+    confirmDeleteTag(tag) {
+        this.documentDefinitionName$
+            .pipe(switchMap(documentDefinitionName => this.documentenApiTagService.deleteTag(documentDefinitionName, tag.value)))
+            .subscribe(() => {
+            this.reload();
+        });
+    }
+    confirmDeleteMultipleTag(tagsToDelete) {
+        this.documentenApiTagService
+            .deleteTags(tagsToDelete.documentDefinitionName, tagsToDelete.tagIds)
+            .subscribe(() => {
+            const lastPage = Math.ceil(this.pagination.collectionSize / this.pagination.size);
+            if (tagsToDelete.itemsOnCurrentPage <= tagsToDelete.tagIds.length &&
+                this.pagination.page > 1 &&
+                this.pagination.page === lastPage) {
+                this.pagination = { ...this.pagination, page: this.pagination.page - 1 };
+            }
+            this.reload();
+        });
+    }
+    searchTermEntered(searchTerm) {
+        this.pagination = { ...this.pagination, page: 1 };
+        this.searchTerm$.next(searchTerm);
+    }
+    reload(noAnimation = false) {
+        this._reload$.next(noAnimation ? 'noAnimation' : null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiTagsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentenApiTagService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$1.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: i9.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: i9.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.3", ngImport: i0, type: DocumentenApiTagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-documenten-api-tags', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        DocumentenApiColumnModalComponent,
+                        CarbonListModule,
+                        TranslateModule,
+                        ConfirmationModalModule,
+                        TagModule,
+                        ButtonModule,
+                        DocumentenApiTagModalComponent,
+                        IconModule,
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentenApiTagService }], propDecorators: { carbonList: [{
+                type: ViewChild,
+                args: [CarbonListComponent]
+            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1374,6 +1891,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class DocumentenApiVersionComponent {
+    constructor(route, documentenApiVersionService) {
+        this.route = route;
+        this.documentenApiVersionService = documentenApiVersionService;
+        this.loading$ = new BehaviorSubject(true);
+        this.documentDefinitionName$ = this.route.params.pipe(map(params => params.name || ''), filter$1(documentDefinitionName => !!documentDefinitionName));
+        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.3", ngImport: i0, type: DocumentenApiVersionComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentenApiVersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: LoadingModule }, { kind: "component", type: i9.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i9.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiVersionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-documenten-api-version', standalone: true, imports: [CommonModule, TranslateModule, LoadingModule, 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<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"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentenApiVersionService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1770,13 +2302,13 @@ class DocumentenApiUploaderComponent {
         }))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiUploaderComponent, deps: [{ token: i2$2.UploadProviderService }, { token: i3$2.FormIoStateService }, { token: i3$2.FormIoDomService }, { token: i2$2.DownloadService }, { token: i3$2.ValtimoModalService }, { token: i5$2.UserProviderService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [hide$]=\"hideModal$\"\n  [language]=\"language\"\n  [show$]=\"showModal$\"\n  [status]=\"status\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [".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$2.DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "directive", type: i3$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["show$", "hide$", "disabled$", "file$", "documentTitle", "disableDocumentTitle", "filename", "disableFilename", "author", "disableAuthor", "status", "disableStatus", "language", "disableLanguage", "documentType", "disableDocumentType", "description", "disableDescription", "confidentialityLevel", "disableConfidentialityLevel", "trefwoorden", "disableTrefwoorden"], outputs: ["metadata"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$2.FileSizePipe, name: "filesize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentenApiUploaderComponent, deps: [{ token: i2$1.UploadProviderService }, { token: i3.FormIoStateService }, { token: i3.FormIoDomService }, { token: i2$1.DownloadService }, { token: i3.ValtimoModalService }, { token: i5$2.UserProviderService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [language]=\"language\"\n  [status]=\"status\"\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$1.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", "documentTitle", "documentType", "disableTrefwoorden", "filename", "isEditMode", "language", "open", "status", "supportsTrefwoorden"], outputs: ["metadata", "modalClose"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.FileSizePipe, name: "filesize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [hide$]=\"hideModal$\"\n  [language]=\"language\"\n  [show$]=\"showModal$\"\n  [status]=\"status\"\n></valtimo-documenten-api-metadata-modal>\n", styles: [".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$2.UploadProviderService }, { type: i3$2.FormIoStateService }, { type: i3$2.FormIoDomService }, { type: i2$2.DownloadService }, { type: i3$2.ValtimoModalService }, { type: i5$2.UserProviderService }, { type: i1$1.ActivatedRoute }], 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  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [language]=\"language\"\n  [status]=\"status\"\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$2.UserProviderService }, { type: i1$1.ActivatedRoute }], propDecorators: { disabled: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -1981,7 +2513,7 @@ class ZaakobjectenService {
     getObjectTypeForm(documentId, objectUrl) {
         return this.http.get(`${this.VALTIMO_API_ENDPOINT_URI}v1/document/${documentId}/zaak/object/form?objectUrl=${objectUrl}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZaakobjectenService, deps: [{ token: i2$1.ConfigService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZaakobjectenService, deps: [{ token: i2.ConfigService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZaakobjectenService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZaakobjectenService, decorators: [{
@@ -1989,7 +2521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i2$1.ConfigService }, { type: i1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i2.ConfigService }, { type: i1.HttpClient }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -2099,8 +2631,8 @@ class DossierDetailTabZaakobjectenComponent {
         this.objectName$.next(this.getObjectTypeName(objectTypeSelectItems));
         this.show();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3$2.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$2.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"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i3$2.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i3$2.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i3$2.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$2.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: TitleModule }, { kind: "component", type: i3$2.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i3$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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"], 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"] }, { 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"], 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"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabZaakobjectenComponent, decorators: [{
             type: Component,
@@ -2115,7 +2647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         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$1.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3$2.ModalService }], propDecorators: { viewZaakobjectModal: [{
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3.ModalService }], propDecorators: { viewZaakobjectModal: [{
                 type: ViewChild,
                 args: ['viewZaakobjectModal']
             }] } });
@@ -2221,13 +2753,13 @@ class DossierDetailTabObjectTypeComponent {
         }
         this.show();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabObjectTypeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3$2.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$2.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$2.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3$2.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: TitleModule }, { kind: "component", type: i3$2.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i3$2.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabObjectTypeComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: ZaakobjectenService }, { token: i3.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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"] }, { kind: "ngmodule", type: VModalModule }, { kind: "component", type: i3.VModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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$1.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3$2.ModalService }], propDecorators: { viewObjectModal: [{
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: ZaakobjectenService }, { type: i3.ModalService }], propDecorators: { viewObjectModal: [{
                 type: ViewChild,
                 args: ['viewObjectModal']
             }] } });
@@ -2325,7 +2857,7 @@ class ContactMomentService {
     saveContactMoment(contactMomentRequest) {
         return this.http.post(`${this.valtimoEndpointUri}v1/contactmoment`, contactMomentRequest);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContactMomentService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContactMomentService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContactMomentService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ContactMomentService, decorators: [{
@@ -2333,7 +2865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -2415,13 +2947,13 @@ class DossierDetailTabContactMomentsComponent {
     refetchContactMoments() {
         this.refetchContactMoments$.next('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabContactMomentsComponent, deps: [{ token: ContactMomentService }, { token: i3$2.AlertService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$2.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SpinnerModule }, { kind: "component", type: i3$2.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i3$2.TimelineComponent, selector: "valtimo-timeline", inputs: ["items", "actions"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierDetailTabContactMomentsComponent, deps: [{ token: ContactMomentService }, { token: i3.AlertService }, { token: i5$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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$2.AlertService }, { type: i3$1.TranslateService }], propDecorators: { modal: [{
+        }], ctorParameters: () => [{ type: ContactMomentService }, { type: i3.AlertService }, { type: i5$1.TranslateService }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['contactMomentsNoteModal']
             }] } });
@@ -2487,7 +3019,7 @@ class CustomerService {
     getCustomerCases(bsn) {
         return this.http.get(`${this.valtimoEndpointUri}v1/zaken/${bsn}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CustomerService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CustomerService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CustomerService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CustomerService, decorators: [{
@@ -2495,7 +3027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -2628,7 +3160,7 @@ class CustomerListComponent {
             }
             return undefined;
         }));
-        this.customers$ = this.searchParameters$.pipe(debounceTime(500), switchMap$1(searchParameters => {
+        this.customers$ = this.searchParameters$.pipe(debounceTime$1(500), switchMap$1(searchParameters => {
             if (searchParameters?.bsn ||
                 (searchParameters?.geslachtsnaam &&
                     searchParameters?.geboortedatum)) {
@@ -2675,13 +3207,13 @@ class CustomerListComponent {
     clearFamilyName() {
         this.familyName$.next('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CustomerListComponent, deps: [{ token: CustomerService }, { token: i3$1.TranslateService }, { token: i2$1.ConfigService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i3$2.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$2.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: i3$2.FilterSidebarComponent, selector: "valtimo-filter-sidebar" }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CustomerListComponent, deps: [{ token: CustomerService }, { token: i5$1.TranslateService }, { token: i2.ConfigService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.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$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: i3$1.TranslateService }, { type: i2$1.ConfigService }, { type: i1$1.Router }] });
+        }], ctorParameters: () => [{ type: CustomerService }, { type: i5$1.TranslateService }, { type: i2.ConfigService }, { type: i1$1.Router }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -2723,7 +3255,7 @@ class CasesListComponent {
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CasesListComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: CustomerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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$2.PageContainerComponent, selector: "v-page-container" }, { kind: "component", type: i3$2.PageContentComponent, selector: "v-page-content" }, { kind: "component", type: i3$2.VPageHeaderComponent, selector: "v-page-header" }, { kind: "component", type: i3$2.PageHeaderIntroductionComponent, selector: "v-page-header-introduction" }, { kind: "component", type: i3$2.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i3$2.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i3$2.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$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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"] }, { 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$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CasesListComponent, decorators: [{
             type: Component,
@@ -2891,7 +3423,7 @@ class DocumentObjectenApiSyncService extends BaseApiService {
     deleteDocumentObjectenApiSync(documentDefinitionName, documentDefinitionVersion) {
         return this.httpClient.delete(this.getApiUrl(`/management/v1/document-definition/${documentDefinitionName}/version/${documentDefinitionVersion}/objecten-api-sync`));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentObjectenApiSyncService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentObjectenApiSyncService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentObjectenApiSyncService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentObjectenApiSyncService, decorators: [{
@@ -2899,7 +3431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3008,8 +3540,8 @@ class DocumentObjectenApiSyncComponent {
     hideModal() {
         this.modalShowing$.next(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentObjectenApiSyncComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentObjectenApiSyncService }, { token: i3$2.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SpinnerModule }, { kind: "component", type: i3$2.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$2.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"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: ValtimoCdsModalDirectiveModule }, { kind: "directive", type: i3$2.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2.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: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentObjectenApiSyncComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: DocumentObjectenApiSyncService }, { token: i3.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.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"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: ValtimoCdsModalDirectiveModule }, { kind: "directive", type: i3.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.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: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i9.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i9.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i9.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i9.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i9.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DocumentObjectenApiSyncComponent, decorators: [{
             type: Component,
@@ -3027,7 +3559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                         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$1.ActivatedRoute }, { type: DocumentObjectenApiSyncService }, { type: i3$2.CdsThemeService }] });
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: DocumentObjectenApiSyncService }, { type: i3.CdsThemeService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3101,7 +3633,7 @@ class ZakenApiZaaktypeLinkService extends BaseApiService {
     getPluginConfigurationsByPluginDefinitionKey(pluginDefinitionKey) {
         return this.httpClient.get(this.getApiUrl(`/v1/plugin/configuration?pluginDefinitionKey=${pluginDefinitionKey}`));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZakenApiZaaktypeLinkService, deps: [{ token: i1.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZakenApiZaaktypeLinkService, deps: [{ token: i1.HttpClient }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZakenApiZaaktypeLinkService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZakenApiZaaktypeLinkService, decorators: [{
@@ -3109,7 +3641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ConfigService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3281,13 +3813,13 @@ class ZakenApiZaaktypeLinkComponent {
             this.toasterService.error('Failed to link zaaktype to dossier');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZakenApiZaaktypeLinkComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$2.OpenZaakService }, { token: i3$2.AlertService }, { token: i4$1.ToastrService }, { token: i3$1.TranslateService }, { token: ZakenApiZaaktypeLinkService }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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$2.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZakenApiZaaktypeLinkComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i2$1.OpenZaakService }, { token: i3.AlertService }, { token: i4$1.ToastrService }, { token: i5$1.TranslateService }, { token: ZakenApiZaaktypeLinkService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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$1.ActivatedRoute }, { type: i2$2.OpenZaakService }, { type: i3$2.AlertService }, { type: i4$1.ToastrService }, { type: i3$1.TranslateService }, { type: ZakenApiZaaktypeLinkService }, { type: i2$1.ConfigService }], propDecorators: { modal: [{
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i2$1.OpenZaakService }, { type: i3.AlertService }, { type: i4$1.ToastrService }, { type: i5$1.TranslateService }, { type: ZakenApiZaaktypeLinkService }, { type: i2.ConfigService }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['openZaakTypeLinkModal']
             }] } });
@@ -3373,14 +3905,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  */
 class DossierManagementZgwService {
     constructor() {
-        this._currentTab$ = new BehaviorSubject(ZgwTabEnum.DOCUMENTEN_API_COLUMNS);
+        this._DEFAULT_TAB = ZgwTabEnum.DOCUMENTEN_API_COLUMNS;
+        this._currentTab$ = new BehaviorSubject(this._DEFAULT_TAB);
     }
     get currentTab$() {
-        return this._currentTab$.asObservable();
+        return this._currentTab$.pipe(distinctUntilChanged());
     }
     set currentTab(tab) {
         this._currentTab$.next(tab);
     }
+    resetToDefaultTab() {
+        this._currentTab$.next(this._DEFAULT_TAB);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementZgwService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementZgwService, providedIn: 'root' }); }
 }
@@ -3423,21 +3959,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class DossierManagementZgwComponent {
-    constructor(dossierManagementZgwService) {
+    constructor(dossierManagementZgwService, cdr, documentenApiVersionService, route) {
         this.dossierManagementZgwService = dossierManagementZgwService;
-        this.ZgwTabEnum = ZgwTabEnum;
-        this.currentTab$ = this.dossierManagementZgwService.currentTab$;
+        this.cdr = cdr;
+        this.documentenApiVersionService = documentenApiVersionService;
+        this.route = route;
+        this._viewInitialized$ = new BehaviorSubject(false);
+        this._supportedDocumentenApiFeatures$ = this.route.params.pipe(map(params => params?.name), filter(caseDefinitionName => !!caseDefinitionName), switchMap(caseDefinitionName => this.documentenApiVersionService.getSupportedApiFeatures(caseDefinitionName)));
+        this.zgwTabs$ = combineLatest([
+            this._viewInitialized$,
+            this.dossierManagementZgwService.currentTab$,
+            this._supportedDocumentenApiFeatures$,
+        ]).pipe(filter(([viewInitialized]) => viewInitialized), map(([_, currentTab, supportedDocumentenApiFeatures]) => [
+            {
+                class: 'no-padding-left-right no-padding-top-bottom',
+                headingTranslationKey: 'zgw.tabs.documentColumns',
+                tab: ZgwTabEnum.DOCUMENTEN_API_COLUMNS,
+                component: DocumentenApiColumnsComponent,
+            },
+            ...(supportedDocumentenApiFeatures.supportsTrefwoorden
+                ? [
+                    {
+                        class: 'no-padding-left-right no-padding-top-bottom',
+                        headingTranslationKey: 'zgw.tabs.documentTags',
+                        tab: ZgwTabEnum.DOCUMENTEN_API_TAGS,
+                        component: DocumentenApiTagsComponent,
+                    },
+                ]
+                : []),
+        ].map(zgwTab => ({ ...zgwTab, active: currentTab === zgwTab.tab }))), tap(zgwTabs => {
+            const activeTab = zgwTabs.length > 1 ? zgwTabs.find(tab => tab.active) : zgwTabs[0];
+            this._zgwTabContent.clear();
+            this._zgwTabContent.createComponent(activeTab.component);
+            this.cdr.detectChanges();
+        }));
+    }
+    ngAfterViewInit() {
+        this._viewInitialized$.next(true);
+    }
+    ngOnDestroy() {
+        this.dossierManagementZgwService.resetToDefaultTab();
     }
     displayTab(tab) {
         this.dossierManagementZgwService.currentTab = tab;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementZgwComponent, deps: [{ token: DossierManagementZgwService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DossierManagementZgwComponent, isStandalone: true, selector: "ng-component", 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=\"currentTab$ | async as currentTab\">\n  <ng-container\n    *ngIf=\"{\n      documentenApiColumnsActive: currentTab === ZgwTabEnum.DOCUMENTEN_API_COLUMNS\n    } as vars\"\n  >\n    <cds-tabs class=\"dossier-management-tabs\">\n      <cds-tab\n        class=\"no-padding-left-right no-padding-top-bottom\"\n        [active]=\"vars.documentenApiColumnsActive\"\n        [heading]=\"'dossierManagement.tabs.zgw' | translate\"\n        (selected)=\"displayTab(ZgwTabEnum.DOCUMENTEN_API_COLUMNS)\"\n      ></cds-tab\n    ></cds-tabs>\n\n    <div class=\"dossier-management-zgw__content\">\n      <valtimo-documenten-api-columns\n        *ngIf=\"vars.documentenApiColumnsActive\"\n      ></valtimo-documenten-api-columns>\n    </div>\n  </ng-container>\n</ng-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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "component", type: DocumentenApiColumnsComponent, selector: "valtimo-documenten-api-columns" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementZgwComponent, deps: [{ token: DossierManagementZgwService }, { token: i0.ChangeDetectorRef }, { token: DocumentenApiVersionService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", 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: i9.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i9.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DossierManagementZgwComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TabsModule, TranslateModule, 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<ng-container *ngIf=\"currentTab$ | async as currentTab\">\n  <ng-container\n    *ngIf=\"{\n      documentenApiColumnsActive: currentTab === ZgwTabEnum.DOCUMENTEN_API_COLUMNS\n    } as vars\"\n  >\n    <cds-tabs class=\"dossier-management-tabs\">\n      <cds-tab\n        class=\"no-padding-left-right no-padding-top-bottom\"\n        [active]=\"vars.documentenApiColumnsActive\"\n        [heading]=\"'dossierManagement.tabs.zgw' | translate\"\n        (selected)=\"displayTab(ZgwTabEnum.DOCUMENTEN_API_COLUMNS)\"\n      ></cds-tab\n    ></cds-tabs>\n\n    <div class=\"dossier-management-zgw__content\">\n      <valtimo-documenten-api-columns\n        *ngIf=\"vars.documentenApiColumnsActive\"\n      ></valtimo-documenten-api-columns>\n    </div>\n  </ng-container>\n</ng-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"] }]
-        }], ctorParameters: () => [{ type: DossierManagementZgwService }] });
+            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"] }]
+        }], ctorParameters: () => [{ type: DossierManagementZgwService }, { type: i0.ChangeDetectorRef }, { type: DocumentenApiVersionService }, { type: i1$1.ActivatedRoute }], propDecorators: { _zgwTabContent: [{
+                type: ViewChild,
+                args: ['zgwTabContent', { read: ViewContainerRef }]
+            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3483,6 +4064,14 @@ class ZgwModule {
             DocumentenApiMetadataModalComponent,
             CustomerModule], exports: [DocumentenApiUploaderComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ZgwModule, providers: [
+            {
+                provide: CASE_MANAGEMENT_TAB_TOKEN,
+                useValue: {
+                    translationKey: 'dossierManagement.tabs.zgw',
+                    component: DossierManagementZgwComponent,
+                },
+                multi: true,
+            },
             {
                 provide: ZGW_OBJECT_TYPE_COMPONENT_TOKEN,
                 useValue: DossierDetailTabObjectTypeComponent,
@@ -3529,6 +4118,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                     declarations: [DocumentenApiUploaderComponent],
                     exports: [DocumentenApiUploaderComponent],
                     providers: [
+                        {
+                            provide: CASE_MANAGEMENT_TAB_TOKEN,
+                            useValue: {
+                                translationKey: 'dossierManagement.tabs.zgw',
+                                component: DossierManagementZgwComponent,
+                            },
+                            multi: true,
+                        },
                         {
                             provide: ZGW_OBJECT_TYPE_COMPONENT_TOKEN,
                             useValue: DossierDetailTabObjectTypeComponent,
@@ -3573,5 +4170,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CasesListComponent, ContactMomentService, CustomerListComponent, CustomerModule, CustomerService, DocumentObjectenApiSyncComponent, DocumentObjectenApiSyncService, DocumentenApiColumnModalComponent, DocumentenApiColumnService, DocumentenApiColumnsComponent, DocumentenApiDocumentService, DocumentenApiLinkProcessService, DocumentenApiMetadataModalComponent, DocumentenApiUploaderComponent, DocumentenApiVersionComponent, DocumentenApiVersionService, DossierDetailTabContactMomentsComponent, DossierDetailTabDocumentenApiDocumentsComponent, DossierDetailTabObjectTypeComponent, DossierDetailTabZaakobjectenComponent, DossierManagementLinkProcessComponent, DossierManagementZgwComponent, DossierManagementZgwService, ZaakobjectenService, ZakenApiZaaktypeLinkComponent, ZakenApiZaaktypeLinkService, ZgwModule, ZgwTabEnum, customDocumentApiUploaderType, documentenApiUploaderEditForm, registerDocumentenApiFormioUploadComponent };
+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 };
 //# sourceMappingURL=valtimo-zgw.mjs.map