@valtimo/dossier-management 12.1.3 → 12.2.1

package/fesm2022/valtimo-dossier-management.mjs

@@ -1,7 +1,7 @@
 import * as i6 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Injectable, Optional, Inject, signal, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output, computed, ViewChild, ViewContainerRef, NgModule } from '@angular/core';
+import { Component, Injectable, Optional, Inject, signal, EventEmitter, computed, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output, ViewChild, ViewContainerRef, NgModule } from '@angular/core';
 import * as i2$2 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormGroup, FormControl, FormsModule } from '@angular/forms';
 import * as i9 from '@ng-bootstrap/ng-bootstrap';
@@ -9,11 +9,11 @@ import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i5 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from '@valtimo/components';
-import { CurrentCarbonTheme, CARBON_THEME, ViewType, MoveRowDirection, CARBON_CONSTANTS, PendingChangesComponent, ValtimoCdsModalDirectiveModule, CarbonListModule, ConfirmationModalModule, EditorModule, RenderInPageHeaderDirectiveModule, pendingChangesGuard, WidgetModule, DropzoneModule, ListModule, ModalModule as ModalModule$1, MultiselectDropdownModule, ParagraphModule, SelectModule as SelectModule$1, SpinnerModule, InputModule as InputModule$1, FormModule, TooltipIconModule, CarbonMultiInputModule, TableModule, ValtimoCdsOverflowButtonDirectiveModule } from '@valtimo/components';
+import { InputLabelModule, CurrentCarbonTheme, CARBON_THEME, ViewType, ValuePathSelectorPrefix, MoveRowDirection, CARBON_CONSTANTS, PendingChangesComponent, ValtimoCdsModalDirectiveModule, CarbonListModule, ConfirmationModalModule, EditorModule, RenderInPageHeaderDirectiveModule, pendingChangesGuard, WidgetModule, DropzoneModule, ListModule, ModalModule as ModalModule$1, MultiselectDropdownModule, ParagraphModule, SelectModule as SelectModule$1, SpinnerModule, InputModule as InputModule$1, FormModule, TooltipIconModule, CarbonMultiInputModule, TableModule, ValtimoCdsOverflowButtonDirectiveModule, ValuePathSelectorComponent } from '@valtimo/components';
 import * as i2$1 from '@valtimo/config';
 import { CASE_MANAGEMENT_TAB_TOKEN, ZGW_CASE_CONFIGURATION_EXTENSIONS_TOKEN, ROLE_ADMIN, ConfigModule } from '@valtimo/config';
 import * as i2$3 from 'carbon-components-angular';
-import { ButtonModule, DropdownModule, InputModule, IconModule, AccordionModule, TabsModule, SelectModule, ToggleModule, NotificationService, ModalModule, TilesModule, ProgressIndicatorModule, NotificationModule, CheckboxModule, LoadingModule, LinkModule, ComboBoxModule, DialogModule, TagModule, FileUploaderModule, ProgressBarModule, TooltipModule } from 'carbon-components-angular';
+import { ButtonModule, DropdownModule, InputModule, IconModule, AccordionModule, Tab, TabsModule, SelectModule, ToggleModule, NotificationService, ModalModule, TilesModule, ProgressIndicatorModule, NotificationModule, CheckboxModule, LoadingModule, LinkModule, ComboBoxModule, DialogModule, TagModule, FileUploaderModule, ProgressBarModule, TooltipModule } from 'carbon-components-angular';
 import { BehaviorSubject, map, switchMap, filter, distinctUntilChanged, Subscription, combineLatest, tap as tap$1, take, of, catchError, debounceTime, delay, startWith, Subject } from 'rxjs';
 import { tap, take as take$1, switchMap as switchMap$1, map as map$1 } from 'rxjs/operators';
 import * as i1 from '@valtimo/document';
@@ -219,13 +219,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2$1.ConfigService }] });
 
 class TabManagementService {
-    get tabs$() {
-        return combineLatest([this._tabs$, this.configService.featureToggles$]).pipe(map(([tabs, featureToggles]) => tabs.filter(tab => (tab.type === 'widgets' ? featureToggles?.enableCaseWidgets : true))));
-    }
     constructor(configService, http) {
         this.configService = configService;
         this.http = http;
-        this._tabs$ = new BehaviorSubject([]);
+        this.tabs$ = new BehaviorSubject([]);
         this.loading$ = new BehaviorSubject(false);
         this._valtimoEndpointUri = `${this.configService.config.valtimoApi.endpointUri}management/v1/case-definition`;
     }
@@ -235,7 +232,7 @@ class TabManagementService {
             .pipe(take(1))
             .subscribe({
             next: (items) => {
-                this._tabs$.next(items);
+                this.tabs$.next(items);
                 this.loading$.next(false);
             },
             error: error => {
@@ -247,12 +244,12 @@ class TabManagementService {
         actionResult
             .pipe(tap$1(() => {
             this.loading$.next(true);
-            this._tabs$.next([]);
+            this.tabs$.next([]);
         }), switchMap((result) => Array.isArray(result) ? of(result) : this.getTabList()), take(1), catchError(error => of(error)))
             .subscribe({
             next: (tabs) => {
                 this.loading$.next(false);
-                this._tabs$.next(tabs);
+                this.tabs$.next(tabs);
             },
             error: error => {
                 console.log(error);
@@ -568,13 +565,14 @@ class DossierManagementWidgetFieldsColumnComponent {
     getDisplayItemsSelected(row) {
         return this.widgetFieldsService.getDisplayItemsSelected(row);
     }
-    constructor(cdsThemeService, cdr, fb, iconService, translateService, widgetFieldsService) {
+    constructor(cdsThemeService, cdr, fb, iconService, translateService, widgetFieldsService, widgetWizardService) {
         this.cdsThemeService = cdsThemeService;
         this.cdr = cdr;
         this.fb = fb;
         this.iconService = iconService;
         this.translateService = translateService;
         this.widgetFieldsService = widgetFieldsService;
+        this.widgetWizardService = widgetWizardService;
         this.class = 'valtimo-dossier-management-widget-field-column';
         this.addTranslateKey = 'widgetTabManagement.content.fields.add';
         this.columnUpdateEvent = new EventEmitter();
@@ -583,6 +581,7 @@ class DossierManagementWidgetFieldsColumnComponent {
         });
         this.displayTypeItems = this.widgetFieldsService.displayTypeItems;
         this.CaseWidgetDisplayTypeKey = CaseWidgetDisplayTypeKey;
+        this.widgetType = computed(() => this.widgetWizardService.selectedWidget()?.type ?? CaseWidgetType.FIELDS);
         this.inputTheme$ = this.cdsThemeService.currentTheme$;
         this._subscriptions = new Subscription();
         this.iconService.register(TrashCan16);
@@ -595,7 +594,7 @@ class DossierManagementWidgetFieldsColumnComponent {
         this._subscriptions.unsubscribe();
         this.formGroup.reset();
     }
-    onAddFieldClick() {
+    addField() {
         if (!this.formRows)
             return;
         this.formRows.push(this.fb.group({
@@ -660,8 +659,10 @@ class DossierManagementWidgetFieldsColumnComponent {
         });
     }
     initForm() {
-        if (!this.columnData)
+        if (!this.columnData) {
+            this.addField();
             return;
+        }
         const rowsControl = this.formGroup.get('rows');
         if (!rowsControl)
             return;
@@ -694,8 +695,8 @@ class DossierManagementWidgetFieldsColumnComponent {
             this.columnUpdateEvent.emit({ data: mappedRows, valid: this.formGroup.valid });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetFieldsColumnComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i2$2.FormBuilder }, { token: i2$3.IconService }, { token: i5.TranslateService }, { token: WidgetFieldsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetFieldsColumnComponent, isStandalone: true, selector: "valtimo-dossier-management-widget-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, 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<form\n  *ngIf=\"inputTheme$ | async as inputTheme\"\n  class=\"valtimo-dossier-management-widget-field-column\"\n  [formGroup]=\"formGroup\"\n>\n  <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n    @for (formRow of formRows.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"fieldTitle\"\n        [context]=\"{index: $index, title: formRow.get('title')?.value}\"\n        class=\"valtimo-dossier-management-widget-field-column__item\"\n      >\n        <form\n          [formGroup]=\"formRow\"\n          class=\"valtimo-dossier-management-widget-field-column__container\"\n        >\n          <div\n            class=\"valtimo-dossier-management-widget-field-column__content\"\n            [class.valtimo-dossier-management-widget-field-column__content--collection]=\"\n              !!fieldWidthDropdown\n            \"\n          >\n            <cds-text-label>\n              {{ 'widgetTabManagement.content.fields.title' | translate }}\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              {{ 'widgetTabManagement.content.fields.value' | translate }}\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.valuePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"content\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-carbon-theme]=\"inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n          </div>\n\n          <div class=\"valtimo-dossier-management-widget-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (CaseWidgetDisplayTypeKey.CURRENCY) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.currencyCode' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.display' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.DATE) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.format' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.DATE_TIME) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.format' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.ENUM) {\n                <div\n                  class=\"valtimo-dossier-management-widget-field-column__enum\"\n                  formArrayName=\"values\"\n                >\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-dossier-management-widget-field-column__enum-form\"\n                    >\n                      <cds-text-label>\n                        {{ 'widgetTabManagement.content.fields.key' | translate }}\n\n                        <input\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.key' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        {{ 'widgetTabManagement.content.fields.value' | translate }}\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-dossier-management-widget-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n                      </button>\n                    </form>\n                  }\n\n                  <button\n                    cdsButton=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n                  >\n                    {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n                    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n                  </button>\n                </div>\n              }\n              @case (CaseWidgetDisplayTypeKey.NUMBER) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.PERCENT) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n            }\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"onAddFieldClick()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #fieldTitle let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-dossier-management-widget-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n    <button\n      cdsButton=\"danger\"\n      [iconOnly]=\"true\"\n      class=\"valtimo-dossier-management-widget-field-column__delete-button\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-dossier-management-widget-field-column{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__item,.valtimo-dossier-management-widget-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-dossier-management-widget-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-dossier-management-widget-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__content{display:grid;grid-template-columns:1fr 1fr 180px;align-items:flex-end;gap:16px}.valtimo-dossier-management-widget-field-column__content--collection{grid-template-columns:1fr 1fr 180px 180px}.valtimo-dossier-management-widget-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-dossier-management-widget-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-dossier-management-widget-field-column__delete-button.enum{align-self:flex-end}.valtimo-dossier-management-widget-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-dossier-management-widget-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.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$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetFieldsColumnComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i2$2.FormBuilder }, { token: i2$3.IconService }, { token: i5.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetFieldsColumnComponent, isStandalone: true, selector: "valtimo-dossier-management-widget-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, 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<form\n  *ngIf=\"inputTheme$ | async as inputTheme\"\n  class=\"valtimo-dossier-management-widget-field-column\"\n  [formGroup]=\"formGroup\"\n>\n  <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n    @for (formRow of formRows.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"fieldTitle\"\n        [context]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-dossier-management-widget-field-column__item\"\n      >\n        <form\n          [formGroup]=\"formRow\"\n          class=\"valtimo-dossier-management-widget-field-column__container\"\n        >\n          <div\n            class=\"valtimo-dossier-management-widget-field-column__content\"\n            [class.valtimo-dossier-management-widget-field-column__content--collection]=\"\n              !!fieldWidthDropdown\n            \"\n          >\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + widgetType() + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + widgetType() + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.valuePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"content\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-carbon-theme]=\"inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n          </div>\n\n          <div class=\"valtimo-dossier-management-widget-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (CaseWidgetDisplayTypeKey.CURRENCY) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.DATE) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.DATE_TIME) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"\n                      'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n                    \"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.ENUM) {\n                <div\n                  class=\"valtimo-dossier-management-widget-field-column__enum\"\n                  formArrayName=\"values\"\n                >\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-dossier-management-widget-field-column__enum-form\"\n                    >\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumValueTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          [placeholder]=\"\n                            'widgetTabManagement.content.fields.enumDisplay' | translate\n                          \"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-dossier-management-widget-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n                      </button>\n                    </form>\n                  }\n\n                  <button\n                    cdsButton=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n                  >\n                    {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n                    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n                  </button>\n                </div>\n              }\n              @case (CaseWidgetDisplayTypeKey.NUMBER) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 3\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.PERCENT) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 0\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n            }\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-dossier-management-widget-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-dossier-management-widget-field-column__delete-button\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-dossier-management-widget-field-column{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__item,.valtimo-dossier-management-widget-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-dossier-management-widget-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-dossier-management-widget-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__content{display:grid;grid-template-columns:1fr 1fr 180px;align-items:flex-end;gap:16px}.valtimo-dossier-management-widget-field-column__content--collection{grid-template-columns:1fr 1fr 180px 180px}.valtimo-dossier-management-widget-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-dossier-management-widget-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-dossier-management-widget-field-column__delete-button.enum{align-self:flex-end}.valtimo-dossier-management-widget-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-dossier-management-widget-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i2$3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetFieldsColumnComponent, decorators: [{
             type: Component,
@@ -708,8 +709,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ReactiveFormsModule,
                         IconModule,
                         AccordionModule,
-                    ], 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<form\n  *ngIf=\"inputTheme$ | async as inputTheme\"\n  class=\"valtimo-dossier-management-widget-field-column\"\n  [formGroup]=\"formGroup\"\n>\n  <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n    @for (formRow of formRows.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"fieldTitle\"\n        [context]=\"{index: $index, title: formRow.get('title')?.value}\"\n        class=\"valtimo-dossier-management-widget-field-column__item\"\n      >\n        <form\n          [formGroup]=\"formRow\"\n          class=\"valtimo-dossier-management-widget-field-column__container\"\n        >\n          <div\n            class=\"valtimo-dossier-management-widget-field-column__content\"\n            [class.valtimo-dossier-management-widget-field-column__content--collection]=\"\n              !!fieldWidthDropdown\n            \"\n          >\n            <cds-text-label>\n              {{ 'widgetTabManagement.content.fields.title' | translate }}\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              {{ 'widgetTabManagement.content.fields.value' | translate }}\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.valuePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"content\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-carbon-theme]=\"inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n          </div>\n\n          <div class=\"valtimo-dossier-management-widget-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (CaseWidgetDisplayTypeKey.CURRENCY) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.currencyCode' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.display' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.DATE) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.format' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.DATE_TIME) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.format' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.ENUM) {\n                <div\n                  class=\"valtimo-dossier-management-widget-field-column__enum\"\n                  formArrayName=\"values\"\n                >\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-dossier-management-widget-field-column__enum-form\"\n                    >\n                      <cds-text-label>\n                        {{ 'widgetTabManagement.content.fields.key' | translate }}\n\n                        <input\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.key' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        {{ 'widgetTabManagement.content.fields.value' | translate }}\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-dossier-management-widget-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n                      </button>\n                    </form>\n                  }\n\n                  <button\n                    cdsButton=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n                  >\n                    {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n                    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n                  </button>\n                </div>\n              }\n              @case (CaseWidgetDisplayTypeKey.NUMBER) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.PERCENT) {\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n            }\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"onAddFieldClick()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #fieldTitle let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-dossier-management-widget-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n    <button\n      cdsButton=\"danger\"\n      [iconOnly]=\"true\"\n      class=\"valtimo-dossier-management-widget-field-column__delete-button\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-dossier-management-widget-field-column{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__item,.valtimo-dossier-management-widget-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-dossier-management-widget-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-dossier-management-widget-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__content{display:grid;grid-template-columns:1fr 1fr 180px;align-items:flex-end;gap:16px}.valtimo-dossier-management-widget-field-column__content--collection{grid-template-columns:1fr 1fr 180px 180px}.valtimo-dossier-management-widget-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-dossier-management-widget-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-dossier-management-widget-field-column__delete-button.enum{align-self:flex-end}.valtimo-dossier-management-widget-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-dossier-management-widget-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.CdsThemeService }, { type: i0.ChangeDetectorRef }, { type: i2$2.FormBuilder }, { type: i2$3.IconService }, { type: i5.TranslateService }, { type: WidgetFieldsService }], propDecorators: { class: [{
+                        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<form\n  *ngIf=\"inputTheme$ | async as inputTheme\"\n  class=\"valtimo-dossier-management-widget-field-column\"\n  [formGroup]=\"formGroup\"\n>\n  <cds-accordion formArrayName=\"rows\" align=\"start\" size=\"sm\">\n    @for (formRow of formRows.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"fieldTitle\"\n        [context]=\"{count: $count, index: $index, title: formRow.get('title')?.value}\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-dossier-management-widget-field-column__item\"\n      >\n        <form\n          [formGroup]=\"formRow\"\n          class=\"valtimo-dossier-management-widget-field-column__container\"\n        >\n          <div\n            class=\"valtimo-dossier-management-widget-field-column__content\"\n            [class.valtimo-dossier-management-widget-field-column__content--collection]=\"\n              !!fieldWidthDropdown\n            \"\n          >\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.title' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + widgetType() + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + widgetType() + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.valuePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"content\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-carbon-theme]=\"inputTheme\"\n              [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n              [dropUp]=\"false\"\n              [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n              (selected)=\"onTypeSelected(formRow, $event)\"\n              formControlName=\"type\"\n            >\n              <cds-dropdown-list [items]=\"getDisplayItemsSelected(formRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <ng-container\n              *ngTemplateOutlet=\"fieldWidthDropdown; context: {index: $index}\"\n            ></ng-container>\n          </div>\n\n          <div class=\"valtimo-dossier-management-widget-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (CaseWidgetDisplayTypeKey.CURRENCY) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"currencyCode\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.displayPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"display\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.DATE) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.DATE_TIME) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n                    [tooltip]=\"\n                      'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\n                    \"\n                  ></v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.ENUM) {\n                <div\n                  class=\"valtimo-dossier-management-widget-field-column__enum\"\n                  formArrayName=\"values\"\n                >\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-dossier-management-widget-field-column__enum-form\"\n                    >\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumValueTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          cdsText\n                          [placeholder]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                          type=\"text\"\n                          formControlName=\"key\"\n                        />\n                      </cds-text-label>\n\n                      <cds-text-label>\n                        <v-input-label\n                          *ngIf=\"$index === 0\"\n                          [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                          [tooltip]=\"\n                            'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\n                          \"\n                        ></v-input-label>\n\n                        <input\n                          cdsText\n                          [attr.data-carbon-theme]=\"inputTheme\"\n                          [placeholder]=\"\n                            'widgetTabManagement.content.fields.enumDisplay' | translate\n                          \"\n                          type=\"text\"\n                          formControlName=\"value\"\n                        />\n                      </cds-text-label>\n\n                      <button\n                        cdsButton=\"danger--ghost\"\n                        [disabled]=\"$count === 1\"\n                        [iconOnly]=\"true\"\n                        class=\"valtimo-dossier-management-widget-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n                      </button>\n                    </form>\n                  }\n\n                  <button\n                    cdsButton=\"primary\"\n                    size=\"sm\"\n                    (click)=\"onAddEnumValueClick(formRow.get('values'))\"\n                  >\n                    {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n                    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n                  </button>\n                </div>\n              }\n              @case (CaseWidgetDisplayTypeKey.NUMBER) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 3\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (CaseWidgetDisplayTypeKey.PERCENT) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    tooltip=\"{{\n                      'widgetTabManagement.content.fields.digitsInfoTooltip'\n                        | translate\n                          : {\n                              minFractionDigits: 0,\n                              maxFractionDigits: 0\n                            }\n                    }}\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n            }\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" (click)=\"addField()\">\n    {{ addTranslateKey | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #fieldTitle let-count=\"count\" let-index=\"index\" let-title=\"title\">\n  <div class=\"valtimo-dossier-management-widget-field-column__title\">\n    {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-dossier-management-widget-field-column__delete-button\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-dossier-management-widget-field-column{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__item,.valtimo-dossier-management-widget-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-dossier-management-widget-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-dossier-management-widget-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__content{display:grid;grid-template-columns:1fr 1fr 180px;align-items:flex-end;gap:16px}.valtimo-dossier-management-widget-field-column__content--collection{grid-template-columns:1fr 1fr 180px 180px}.valtimo-dossier-management-widget-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-dossier-management-widget-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-dossier-management-widget-field-column__delete-button.enum{align-self:flex-end}.valtimo-dossier-management-widget-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-dossier-management-widget-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.CdsThemeService }, { type: i0.ChangeDetectorRef }, { type: i2$2.FormBuilder }, { type: i2$3.IconService }, { type: i5.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }], columnData: [{
@@ -771,6 +773,9 @@ class DossierManagementWidgetFieldsComponent {
             return;
         this.columns.set(Object.keys(widgetContent).map(() => null));
     }
+    ngAfterViewInit() {
+        this._tab.tabIndex = -1;
+    }
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
         this.changeValidEvent.emit(false);
@@ -780,6 +785,7 @@ class DossierManagementWidgetFieldsComponent {
     onAddColumnClick() {
         this.columns.update(value => [...value, null]);
         this.activeTab.set(this.columns().length - 1);
+        this.changeValidEvent.emit(false);
     }
     onTabSelected(index) {
         this.activeTab.set(index);
@@ -820,7 +826,7 @@ class DossierManagementWidgetFieldsComponent {
         this.changeValidEvent.emit(event.valid && this.form.valid);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetFieldsComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i2$2.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetFieldsComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, host: { properties: { "class": "this.class" } }, 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<p>{{ 'widgetTabManagement.content.description' | translate }}</p>\n\n<form [formGroup]=\"form\">\n  <cds-text-label\n    [attr.data-carbon-theme]=\"theme$ | async\"\n    class=\"valtimo-dossier-management-widget-field__input\"\n  >\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<ng-container>\n  <cds-tabs type=\"contained\">\n    @for (column of columns(); track $index) {\n      <cds-tab\n        [active]=\"activeTab() === $index\"\n        [heading]=\"columnHeading\"\n        [context]=\"{index: $index, count: $count}\"\n        (selected)=\"onTabSelected($index)\"\n      >\n        <valtimo-dossier-management-widget-fields-column\n          *ngIf=\"activeTab() === $index\"\n          [columnData]=\"selectedWidgetContent()?.[$index]\"\n          (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n        ></valtimo-dossier-management-widget-fields-column>\n      </cds-tab>\n    }\n    <cds-tab\n      *ngIf=\"columns().length < widgetWidth\"\n      [heading]=\"addColumn\"\n      [id]=\"'addColumn'\"\n      class=\"valtimo-dossier-management-widget-field__add\"\n    ></cds-tab>\n  </cds-tabs>\n</ng-container>\n\n<ng-template #addColumn>\n  <button\n    cdsButton=\"ghost\"\n    [iconOnly]=\"true\"\n    (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n  <div class=\"valtimo-dossier-management-widget-field__heading\">\n    {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"data.count === 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onDeleteColumnClick(data.index)\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-dossier-management-widget-field{display:flex;flex-direction:column}.valtimo-dossier-management-widget-field>*:first-child,.valtimo-dossier-management-widget-field>*:nth-child(2){margin-bottom:16px}.valtimo-dossier-management-widget-field__input{max-width:288px}.valtimo-dossier-management-widget-field__heading{display:flex;align-items:center}.valtimo-dossier-management-widget-field #addColumn-header{padding:0!important}.valtimo-dossier-management-widget-field .cds--tabs__nav-item{padding-right:0!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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: DossierManagementWidgetFieldsColumnComponent, selector: "valtimo-dossier-management-widget-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown"], outputs: ["columnUpdateEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetFieldsComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_tab", first: true, predicate: Tab, 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<p>{{ 'widgetTabManagement.content.description' | translate }}</p>\n\n<form [formGroup]=\"form\">\n  <cds-text-label\n    [attr.data-carbon-theme]=\"theme$ | async\"\n    class=\"valtimo-dossier-management-widget-field__input\"\n  >\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<cds-tabs type=\"contained\">\n  @for (column of columns(); track $index) {\n    <cds-tab\n      [active]=\"activeTab() === $index\"\n      [heading]=\"columnHeading\"\n      [context]=\"{index: $index, count: $count}\"\n      (selected)=\"onTabSelected($index)\"\n    >\n      <valtimo-dossier-management-widget-fields-column\n        *ngIf=\"activeTab() === $index\"\n        [columnData]=\"selectedWidgetContent()?.[$index]\"\n        (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n      ></valtimo-dossier-management-widget-fields-column>\n    </cds-tab>\n  }\n  <cds-tab\n    *ngIf=\"columns().length < widgetWidth\"\n    [heading]=\"addColumn\"\n    [id]=\"'addColumn'\"\n    class=\"valtimo-dossier-management-widget-field__add\"\n  ></cds-tab>\n</cds-tabs>\n\n<ng-template #addColumn>\n  <button\n    cdsButton=\"ghost\"\n    [iconOnly]=\"true\"\n    (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n  <div class=\"valtimo-dossier-management-widget-field__heading\">\n    {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"data.count === 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onDeleteColumnClick(data.index)\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-dossier-management-widget-field{display:flex;flex-direction:column}.valtimo-dossier-management-widget-field>*:first-child,.valtimo-dossier-management-widget-field>*:nth-child(2){margin-bottom:16px}.valtimo-dossier-management-widget-field__input{max-width:288px}.valtimo-dossier-management-widget-field__heading{display:flex;align-items:center}.valtimo-dossier-management-widget-field #addColumn-header{padding:0!important}.valtimo-dossier-management-widget-field .cds--tabs__nav-item{padding-right:0!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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: DossierManagementWidgetFieldsColumnComponent, selector: "valtimo-dossier-management-widget-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetFieldsComponent, decorators: [{
             type: Component,
@@ -833,12 +839,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ReactiveFormsModule,
                         ButtonModule,
                         DossierManagementWidgetFieldsColumnComponent,
-                    ], 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<p>{{ 'widgetTabManagement.content.description' | translate }}</p>\n\n<form [formGroup]=\"form\">\n  <cds-text-label\n    [attr.data-carbon-theme]=\"theme$ | async\"\n    class=\"valtimo-dossier-management-widget-field__input\"\n  >\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<ng-container>\n  <cds-tabs type=\"contained\">\n    @for (column of columns(); track $index) {\n      <cds-tab\n        [active]=\"activeTab() === $index\"\n        [heading]=\"columnHeading\"\n        [context]=\"{index: $index, count: $count}\"\n        (selected)=\"onTabSelected($index)\"\n      >\n        <valtimo-dossier-management-widget-fields-column\n          *ngIf=\"activeTab() === $index\"\n          [columnData]=\"selectedWidgetContent()?.[$index]\"\n          (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n        ></valtimo-dossier-management-widget-fields-column>\n      </cds-tab>\n    }\n    <cds-tab\n      *ngIf=\"columns().length < widgetWidth\"\n      [heading]=\"addColumn\"\n      [id]=\"'addColumn'\"\n      class=\"valtimo-dossier-management-widget-field__add\"\n    ></cds-tab>\n  </cds-tabs>\n</ng-container>\n\n<ng-template #addColumn>\n  <button\n    cdsButton=\"ghost\"\n    [iconOnly]=\"true\"\n    (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n  <div class=\"valtimo-dossier-management-widget-field__heading\">\n    {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"data.count === 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onDeleteColumnClick(data.index)\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-dossier-management-widget-field{display:flex;flex-direction:column}.valtimo-dossier-management-widget-field>*:first-child,.valtimo-dossier-management-widget-field>*:nth-child(2){margin-bottom:16px}.valtimo-dossier-management-widget-field__input{max-width:288px}.valtimo-dossier-management-widget-field__heading{display:flex;align-items:center}.valtimo-dossier-management-widget-field #addColumn-header{padding:0!important}.valtimo-dossier-management-widget-field .cds--tabs__nav-item{padding-right:0!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"] }]
+                        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<p>{{ 'widgetTabManagement.content.description' | translate }}</p>\n\n<form [formGroup]=\"form\">\n  <cds-text-label\n    [attr.data-carbon-theme]=\"theme$ | async\"\n    class=\"valtimo-dossier-management-widget-field__input\"\n  >\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<cds-tabs type=\"contained\">\n  @for (column of columns(); track $index) {\n    <cds-tab\n      [active]=\"activeTab() === $index\"\n      [heading]=\"columnHeading\"\n      [context]=\"{index: $index, count: $count}\"\n      (selected)=\"onTabSelected($index)\"\n    >\n      <valtimo-dossier-management-widget-fields-column\n        *ngIf=\"activeTab() === $index\"\n        [columnData]=\"selectedWidgetContent()?.[$index]\"\n        (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n      ></valtimo-dossier-management-widget-fields-column>\n    </cds-tab>\n  }\n  <cds-tab\n    *ngIf=\"columns().length < widgetWidth\"\n    [heading]=\"addColumn\"\n    [id]=\"'addColumn'\"\n    class=\"valtimo-dossier-management-widget-field__add\"\n  ></cds-tab>\n</cds-tabs>\n\n<ng-template #addColumn>\n  <button\n    cdsButton=\"ghost\"\n    [iconOnly]=\"true\"\n    (click)=\"$event.stopImmediatePropagation(); onAddColumnClick()\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n  <div class=\"valtimo-dossier-management-widget-field__heading\">\n    {{ 'widgetTabManagement.content.column' | translate: {number: data.index + 1} }}\n\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"data.count === 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onDeleteColumnClick(data.index)\"\n    >\n      <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-dossier-management-widget-field{display:flex;flex-direction:column}.valtimo-dossier-management-widget-field>*:first-child,.valtimo-dossier-management-widget-field>*:nth-child(2){margin-bottom:16px}.valtimo-dossier-management-widget-field__input{max-width:288px}.valtimo-dossier-management-widget-field__heading{display:flex;align-items:center}.valtimo-dossier-management-widget-field #addColumn-header{padding:0!important}.valtimo-dossier-management-widget-field .cds--tabs__nav-item{padding-right:0!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.CdsThemeService }, { type: i2$2.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }], changeValidEvent: [{
                 type: Output
+            }], _tab: [{
+                type: ViewChild,
+                args: [Tab]
             }] } });
 
 /*
@@ -909,7 +919,7 @@ class DossierManagementWidgetCustomComponent {
         this.changeValidEvent.emit(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetCustomComponent, deps: [{ token: CUSTOM_CASE_WIDGET_TOKEN, optional: true }, { token: i1$1.CdsThemeService }, { token: i2$2.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementWidgetCustomComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, 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<form\n  class=\"valtimo-dossier-management-widget-custom\"\n  [formGroup]=\"form\"\n  [attr.data-carbon-theme]=\"theme$ | async\"\n>\n  <cds-text-label class=\"valtimo-dossier-management-widget-field__input\">\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-label class=\"dropdown-label\">\n    {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n    <cds-dropdown\n      *ngIf=\"componentListItems$ | async as componentListItems\"\n      [appendInline]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n      [disabled]=\"componentListItems.length === 0\"\n      (selected)=\"componentDropDownChange($event)\"\n    >\n      <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n    </cds-dropdown>\n  </cds-label>\n</form>\n", styles: [".valtimo-dossier-management-widget-custom{display:flex;flex-direction:column}.valtimo-dossier-management-widget-custom>*:first-child{margin-bottom:16px}.valtimo-dossier-management-widget-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-dossier-management-widget-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.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$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementWidgetCustomComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, 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<form\n  class=\"valtimo-dossier-management-widget-custom\"\n  [formGroup]=\"form\"\n  [attr.data-carbon-theme]=\"theme$ | async\"\n>\n  <cds-text-label class=\"valtimo-dossier-management-widget-field__input\">\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-label class=\"dropdown-label\">\n    {{ 'widgetTabManagement.content.custom.selectComponent' | translate }}\n\n    <cds-dropdown\n      *ngIf=\"componentListItems$ | async as componentListItems\"\n      [appendInline]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.custom.placeholder' | translate\"\n      [disabled]=\"componentListItems.length === 0\"\n      (selected)=\"componentDropDownChange($event)\"\n    >\n      <cds-dropdown-list [items]=\"componentListItems\"> </cds-dropdown-list>\n    </cds-dropdown>\n  </cds-label>\n</form>\n", styles: [".valtimo-dossier-management-widget-custom{display:flex;flex-direction:column}.valtimo-dossier-management-widget-custom>*:first-child{margin-bottom:16px}.valtimo-dossier-management-widget-custom ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-dossier-management-widget-custom ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetCustomComponent, decorators: [{
             type: Component,
@@ -1006,7 +1016,7 @@ class DossierManagementWidgetFormioComponent {
         this.changeValidEvent.emit(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetFormioComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i2$2.FormBuilder }, { token: WidgetWizardService }, { token: i1$3.FormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementWidgetFormioComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, 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<form\n  class=\"valtimo-dossier-management-widget-formio\"\n  [formGroup]=\"form\"\n  [attr.data-carbon-theme]=\"theme$ | async\"\n>\n  <cds-text-label class=\"valtimo-dossier-management-widget-field__input\">\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-label class=\"dropdown-label\">\n    {{ 'widgetTabManagement.content.formio.selectForm' | translate }}\n\n    <cds-dropdown\n      *ngIf=\"formListItems$ | async as formListItems\"\n      [appendInline]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.formio.placeholder' | translate\"\n      [disabled]=\"formListItems.length === 0\"\n      [dropUp]=\"false\"\n      (selected)=\"componentDropDownChange($event)\"\n    >\n      <cds-dropdown-list [items]=\"formListItems\"> </cds-dropdown-list>\n    </cds-dropdown>\n  </cds-label>\n</form>\n", styles: [".valtimo-dossier-management-widget-formio{display:flex;flex-direction:column}.valtimo-dossier-management-widget-formio>*:first-child{margin-bottom:16px}.valtimo-dossier-management-widget-formio ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-dossier-management-widget-formio ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.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$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementWidgetFormioComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, 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<form\n  class=\"valtimo-dossier-management-widget-formio\"\n  [formGroup]=\"form\"\n  [attr.data-carbon-theme]=\"theme$ | async\"\n>\n  <cds-text-label class=\"valtimo-dossier-management-widget-field__input\">\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"widgetTitle\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-label class=\"dropdown-label\">\n    {{ 'widgetTabManagement.content.formio.selectForm' | translate }}\n\n    <cds-dropdown\n      *ngIf=\"formListItems$ | async as formListItems\"\n      [appendInline]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.formio.placeholder' | translate\"\n      [disabled]=\"formListItems.length === 0\"\n      [dropUp]=\"false\"\n      (selected)=\"componentDropDownChange($event)\"\n    >\n      <cds-dropdown-list [items]=\"formListItems\"> </cds-dropdown-list>\n    </cds-dropdown>\n  </cds-label>\n</form>\n", styles: [".valtimo-dossier-management-widget-formio{display:flex;flex-direction:column}.valtimo-dossier-management-widget-formio>*:first-child{margin-bottom:16px}.valtimo-dossier-management-widget-formio ::ng-deep .dropdown-label label{display:flex;flex-direction:column;width:100%}.valtimo-dossier-management-widget-formio ::ng-deep .dropdown-label cds-dropdown{margin-top:8px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetFormioComponent, decorators: [{
             type: Component,
@@ -1083,7 +1093,7 @@ class DossierManagementWidgetTableComponent {
         this.widgetWizardService.widgetContent.update((content) => ({ ...content, firstColumnAsTitle }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetTableComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i2$2.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementWidgetTableComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, host: { properties: { "class": "this.class" } }, 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<form\n  *ngIf=\"{theme: theme$ | async} as obs\"\n  [formGroup]=\"form\"\n  class=\"valtimo-dossier-management-widget-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    {{ 'widgetTabManagement.content.table.defaultPageSize' | translate }}\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    {{ 'widgetTabManagement.content.table.collection' | translate }}\n\n    <input\n      formControlName=\"collection\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.collectionPlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<span class=\"valtimo-dossier-management-widget-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-dossier-management-widget-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n></valtimo-dossier-management-widget-fields-column>\n\n<section class=\"valtimo-dossier-management-widget-table__toggle\">\n  <span class=\"valtimo-dossier-management-widget-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-dossier-management-widget-table{display:flex;flex-direction:column;gap:24px}.valtimo-dossier-management-widget-table__form{display:flex;gap:16px}.valtimo-dossier-management-widget-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-dossier-management-widget-table__toggle{display:flex;flex-direction:column;gap:8px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: DossierManagementWidgetFieldsColumnComponent, selector: "valtimo-dossier-management-widget-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2$3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementWidgetTableComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, host: { properties: { "class": "this.class" } }, 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<form\n  *ngIf=\"{theme: theme$ | async} as obs\"\n  [formGroup]=\"form\"\n  class=\"valtimo-dossier-management-widget-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.collectionTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"collection\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.collectionPlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<span class=\"valtimo-dossier-management-widget-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-dossier-management-widget-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n></valtimo-dossier-management-widget-fields-column>\n\n<section class=\"valtimo-dossier-management-widget-table__toggle\">\n  <span class=\"valtimo-dossier-management-widget-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-dossier-management-widget-table{display:flex;flex-direction:column;gap:24px}.valtimo-dossier-management-widget-table__form{display:flex;gap:16px}.valtimo-dossier-management-widget-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-dossier-management-widget-table__toggle{display:flex;flex-direction:column;gap:8px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: DossierManagementWidgetFieldsColumnComponent, selector: "valtimo-dossier-management-widget-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2$3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetTableComponent, decorators: [{
             type: Component,
@@ -1095,7 +1105,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         InputModule,
                         ToggleModule,
                         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<form\n  *ngIf=\"{theme: theme$ | async} as obs\"\n  [formGroup]=\"form\"\n  class=\"valtimo-dossier-management-widget-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    {{ 'widgetTabManagement.content.table.defaultPageSize' | translate }}\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    {{ 'widgetTabManagement.content.table.collection' | translate }}\n\n    <input\n      formControlName=\"collection\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.collectionPlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<span class=\"valtimo-dossier-management-widget-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-dossier-management-widget-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n></valtimo-dossier-management-widget-fields-column>\n\n<section class=\"valtimo-dossier-management-widget-table__toggle\">\n  <span class=\"valtimo-dossier-management-widget-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-dossier-management-widget-table{display:flex;flex-direction:column;gap:24px}.valtimo-dossier-management-widget-table__form{display:flex;gap:16px}.valtimo-dossier-management-widget-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-dossier-management-widget-table__toggle{display:flex;flex-direction:column;gap:8px}\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"] }]
+                        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<form\n  *ngIf=\"{theme: theme$ | async} as obs\"\n  [formGroup]=\"form\"\n  class=\"valtimo-dossier-management-widget-table__form\"\n>\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"title\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.defaultPageSize' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.defaultPageSizeTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"defaultPageSize\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.defaultPageSizePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n    <v-input-label\n      [title]=\"'widgetTabManagement.content.table.collection' | translate\"\n      [tooltip]=\"'widgetTabManagement.content.table.collectionTooltip' | translate\"\n    >\n    </v-input-label>\n\n    <input\n      formControlName=\"collection\"\n      cdsText\n      [placeholder]=\"'widgetTabManagement.content.table.collectionPlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n</form>\n\n<span class=\"valtimo-dossier-management-widget-table__subtitle\">\n  {{ 'widgetTabManagement.content.table.columns' | translate }}\n</span>\n\n<valtimo-dossier-management-widget-fields-column\n  [addTranslateKey]=\"'widgetTabManagement.content.table.addColumn'\"\n  [columnData]=\"content()?.columns\"\n  (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n></valtimo-dossier-management-widget-fields-column>\n\n<section class=\"valtimo-dossier-management-widget-table__toggle\">\n  <span class=\"valtimo-dossier-management-widget-table__subtitle\">\n    {{ 'widgetTabManagement.content.table.options' | translate }}\n  </span>\n\n  <cds-toggle\n    [checked]=\"checked()\"\n    [label]=\"'widgetTabManagement.content.table.firstColumnAsTitle' | translate\"\n    [onText]=\"'interface.yes' | translate\"\n    [offText]=\"'interface.no' | translate\"\n    (checkedChange)=\"onCheckedChange($event)\"\n  ></cds-toggle>\n</section>\n", styles: [".valtimo-dossier-management-widget-table{display:flex;flex-direction:column;gap:24px}.valtimo-dossier-management-widget-table__form{display:flex;gap:16px}.valtimo-dossier-management-widget-table__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-dossier-management-widget-table__toggle{display:flex;flex-direction:column;gap:8px}\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.CdsThemeService }, { type: i2$2.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -1148,12 +1159,12 @@ class DossierManagementWidgetCollectionComponent {
         this.displayTypeItems = this.widgetFieldsService.displayTypeItems;
         this.WIDTH_ITEMS = [
             {
-                content: this.translateService.instant('widgetTabManagement.width.fullWidth.title'),
+                content: this.translateService.instant('widgetTabManagement.width.fullWidth'),
                 id: 'full',
                 selected: true,
             },
             {
-                content: this.translateService.instant('widgetTabManagement.width.half.title'),
+                content: this.translateService.instant('widgetTabManagement.width.half'),
                 id: 'half',
                 selected: false,
             },
@@ -1284,7 +1295,7 @@ class DossierManagementWidgetCollectionComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetCollectionComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i2$2.FormBuilder }, { token: i5.TranslateService }, { token: WidgetWizardService }, { token: WidgetFieldsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetCollectionComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, host: { properties: { "class": "this.class" } }, 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=\"{theme: theme$ | async} as obs\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-dossier-management-widget-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      {{ 'widgetTabManagement.content.collection.defaultPageSize' | translate }}\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      {{ 'widgetTabManagement.content.collection.collection' | translate }}\n\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.collection.collectionPlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n  </form>\n\n  <span class=\"valtimo-dossier-management-widget-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-dossier-management-widget-collection__card\">\n    <section class=\"valtimo-dossier-management-widget-collection__card-title\">\n      <cds-text-label>\n        {{ 'widgetTabManagement.content.fields.value' | translate }}\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"obs.theme\"\n          [placeholder]=\"'widgetTabManagement.content.fields.valuePlaceholder' | translate\"\n          type=\"text\"\n          formControlName=\"value\"\n        />\n      </cds-text-label>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"obs.theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-dossier-management-widget-collection__card-options\">\n      @switch (cardForm.get('type').value.id) {\n        @case (CaseWidgetDisplayTypeKey.CURRENCY) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.currencyCode' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.display' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.DATE) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.format' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.DATE_TIME) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.format' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-dossier-management-widget-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form\n                [formGroup]=\"rowValue\"\n                class=\"valtimo-dossier-management-widget-collection__enum-form\"\n              >\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.key' | translate }}\n\n                  <input\n                    [attr.data-carbon-theme]=\"obs.theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.fields.key' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.value' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"obs.theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-dossier-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n                >\n                  <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n                </button>\n              </form>\n            }\n\n            <button\n              cdsButton=\"primary\"\n              size=\"sm\"\n              (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (CaseWidgetDisplayTypeKey.NUMBER) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.PERCENT) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-dossier-management-widget-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-dossier-management-widget-fields-column\n    [columnData]=\"content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  >\n  </valtimo-dossier-management-widget-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-dossier-management-widget-collection{display:flex;flex-direction:column;gap:24px}.valtimo-dossier-management-widget-collection__form{display:flex;gap:16px}.valtimo-dossier-management-widget-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-dossier-management-widget-collection__card{flex-direction:column;display:flex;gap:16px}.valtimo-dossier-management-widget-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-dossier-management-widget-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-dossier-management-widget-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: DossierManagementWidgetFieldsColumnComponent, selector: "valtimo-dossier-management-widget-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.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$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetCollectionComponent, isStandalone: true, selector: "ng-component", outputs: { changeValidEvent: "changeValidEvent" }, host: { properties: { "class": "this.class" } }, 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=\"{theme: theme$ | async} as obs\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-dossier-management-widget-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.collectionTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.collection.collectionPlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n  </form>\n\n  <span class=\"valtimo-dossier-management-widget-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-dossier-management-widget-collection__card\">\n    <section class=\"valtimo-dossier-management-widget-collection__card-title\">\n      <cds-text-label>\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n        ></v-input-label>\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"obs.theme\"\n          [placeholder]=\"'widgetTabManagement.content.fields.valuePlaceholder' | translate\"\n          type=\"text\"\n          formControlName=\"value\"\n        />\n      </cds-text-label>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"obs.theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-dossier-management-widget-collection__card-options\">\n      @switch (cardForm.get('type').value.id) {\n        @case (CaseWidgetDisplayTypeKey.CURRENCY) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.DATE) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.DATE_TIME) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-dossier-management-widget-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form\n                [formGroup]=\"rowValue\"\n                class=\"valtimo-dossier-management-widget-collection__enum-form\"\n              >\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    [attr.data-carbon-theme]=\"obs.theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"obs.theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-dossier-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n                >\n                  <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n                </button>\n              </form>\n            }\n\n            <button\n              cdsButton=\"primary\"\n              size=\"sm\"\n              (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (CaseWidgetDisplayTypeKey.NUMBER) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 3\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.PERCENT) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 0\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-dossier-management-widget-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-dossier-management-widget-fields-column\n    [columnData]=\"content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  >\n  </valtimo-dossier-management-widget-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-dossier-management-widget-collection{display:flex;flex-direction:column;gap:24px}.valtimo-dossier-management-widget-collection__form{display:flex;gap:16px}.valtimo-dossier-management-widget-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-dossier-management-widget-collection__card{flex-direction:column;display:flex;gap:16px}.valtimo-dossier-management-widget-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-dossier-management-widget-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-dossier-management-widget-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: DossierManagementWidgetFieldsColumnComponent, selector: "valtimo-dossier-management-widget-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i2$3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1$1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetCollectionComponent, decorators: [{
             type: Component,
@@ -1297,7 +1308,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         DropdownModule,
                         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 *ngIf=\"{theme: theme$ | async} as obs\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-dossier-management-widget-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      {{ 'widgetTabManagement.content.widgetTitle' | translate }}\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      {{ 'widgetTabManagement.content.collection.defaultPageSize' | translate }}\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      {{ 'widgetTabManagement.content.collection.collection' | translate }}\n\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.collection.collectionPlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n  </form>\n\n  <span class=\"valtimo-dossier-management-widget-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-dossier-management-widget-collection__card\">\n    <section class=\"valtimo-dossier-management-widget-collection__card-title\">\n      <cds-text-label>\n        {{ 'widgetTabManagement.content.fields.value' | translate }}\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"obs.theme\"\n          [placeholder]=\"'widgetTabManagement.content.fields.valuePlaceholder' | translate\"\n          type=\"text\"\n          formControlName=\"value\"\n        />\n      </cds-text-label>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"obs.theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-dossier-management-widget-collection__card-options\">\n      @switch (cardForm.get('type').value.id) {\n        @case (CaseWidgetDisplayTypeKey.CURRENCY) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.currencyCode' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.display' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.DATE) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.format' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.DATE_TIME) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.format' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-dossier-management-widget-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form\n                [formGroup]=\"rowValue\"\n                class=\"valtimo-dossier-management-widget-collection__enum-form\"\n              >\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.key' | translate }}\n\n                  <input\n                    [attr.data-carbon-theme]=\"obs.theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.fields.key' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  {{ 'widgetTabManagement.content.fields.value' | translate }}\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"obs.theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-dossier-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n                >\n                  <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n                </button>\n              </form>\n            }\n\n            <button\n              cdsButton=\"primary\"\n              size=\"sm\"\n              (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (CaseWidgetDisplayTypeKey.NUMBER) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.PERCENT) {\n          <cds-text-label>\n            {{ 'widgetTabManagement.content.fields.digitsInfo' | translate }}\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-dossier-management-widget-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-dossier-management-widget-fields-column\n    [columnData]=\"content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  >\n  </valtimo-dossier-management-widget-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-dossier-management-widget-collection{display:flex;flex-direction:column;gap:24px}.valtimo-dossier-management-widget-collection__form{display:flex;gap:16px}.valtimo-dossier-management-widget-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-dossier-management-widget-collection__card{flex-direction:column;display:flex;gap:16px}.valtimo-dossier-management-widget-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-dossier-management-widget-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-dossier-management-widget-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;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"] }]
+                        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<ng-container *ngIf=\"{theme: theme$ | async} as obs\">\n  <form [formGroup]=\"widgetForm\" class=\"valtimo-dossier-management-widget-collection__form\">\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.widgetTitle' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.widgetTitleTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.defaultPageSize' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.defaultPageSizeTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"defaultPageSize\"\n        cdsText\n        [placeholder]=\"\n          'widgetTabManagement.content.collection.defaultPageSizePlaceholder' | translate\n        \"\n        type=\"text\"\n      />\n    </cds-text-label>\n\n    <cds-text-label [attr.data-carbon-theme]=\"obs.theme\">\n      <v-input-label\n        [title]=\"'widgetTabManagement.content.collection.collection' | translate\"\n        [tooltip]=\"'widgetTabManagement.content.collection.collectionTooltip' | translate\"\n      >\n      </v-input-label>\n\n      <input\n        formControlName=\"collection\"\n        cdsText\n        [placeholder]=\"'widgetTabManagement.content.collection.collectionPlaceholder' | translate\"\n        type=\"text\"\n      />\n    </cds-text-label>\n  </form>\n\n  <span class=\"valtimo-dossier-management-widget-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardTitle' | translate }}\n  </span>\n\n  <form [formGroup]=\"cardForm\" class=\"valtimo-dossier-management-widget-collection__card\">\n    <section class=\"valtimo-dossier-management-widget-collection__card-title\">\n      <cds-text-label>\n        <v-input-label\n          [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n          [tooltip]=\"'widgetTabManagement.content.collection.valueTooltip' | translate\"\n        ></v-input-label>\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"obs.theme\"\n          [placeholder]=\"'widgetTabManagement.content.fields.valuePlaceholder' | translate\"\n          type=\"text\"\n          formControlName=\"value\"\n        />\n      </cds-text-label>\n\n      <cds-dropdown\n        [attr.data-carbon-theme]=\"obs.theme\"\n        [label]=\"'widgetTabManagement.content.fields.type' | translate\"\n        [dropUp]=\"false\"\n        [placeholder]=\"'widgetTabManagement.content.fields.typePlaceholder' | translate\"\n        (selected)=\"onTypeSelected(cardForm, $event)\"\n        formControlName=\"type\"\n      >\n        <cds-dropdown-list [items]=\"getDisplayItemsSelected(cardForm)\"></cds-dropdown-list>\n      </cds-dropdown>\n    </section>\n\n    <section class=\"valtimo-dossier-management-widget-collection__card-options\">\n      @switch (cardForm.get('type').value.id) {\n        @case (CaseWidgetDisplayTypeKey.CURRENCY) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.currencyCode' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.currencyCodeTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"\n                'widgetTabManagement.content.fields.currencyCodePlaceholder' | translate\n              \"\n              type=\"text\"\n              formControlName=\"currencyCode\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.display' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.displayTooltip' | translate\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.displayPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"display\"\n            />\n          </cds-text-label>\n\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate: {minFractionDigits: 2, maxFractionDigits: 2}\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.DATE) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.DATE_TIME) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.format' | translate\"\n              [tooltip]=\"'widgetTabManagement.content.fields.dateTimeFormatTooltip' | translate\"\n            ></v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.formatPlaceholder' | translate\"\n              type=\"text\"\n              formControlName=\"format\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.ENUM) {\n          <div class=\"valtimo-dossier-management-widget-collection__enum\" formArrayName=\"values\">\n            @for (rowValue of cardForm.get('values')?.controls; track $index) {\n              <form\n                [formGroup]=\"rowValue\"\n                class=\"valtimo-dossier-management-widget-collection__enum-form\"\n              >\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumValue' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumValueTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    [attr.data-carbon-theme]=\"obs.theme\"\n                    cdsText\n                    [placeholder]=\"'widgetTabManagement.content.enumValue' | translate\"\n                    type=\"text\"\n                    formControlName=\"key\"\n                  />\n                </cds-text-label>\n\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.enumDisplayTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"obs.theme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.enumDisplay' | translate\"\n                    type=\"text\"\n                    formControlName=\"value\"\n                  />\n                </cds-text-label>\n\n                <button\n                  cdsButton=\"danger--ghost\"\n                  [disabled]=\"$count === 1\"\n                  [iconOnly]=\"true\"\n                  class=\"valtimo-dossier-management-widget-field-column__delete-button enum\"\n                  (click)=\"onDeleteRowClick(cardForm.get('values'), $index)\"\n                >\n                  <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n                </button>\n              </form>\n            }\n\n            <button\n              cdsButton=\"primary\"\n              size=\"sm\"\n              (click)=\"onAddEnumValueClick(cardForm.get('values'))\"\n            >\n              {{ 'widgetTabManagement.content.fields.addEnum' | translate }}\n\n              <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n            </button>\n          </div>\n        }\n        @case (CaseWidgetDisplayTypeKey.NUMBER) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 3\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n        @case (CaseWidgetDisplayTypeKey.PERCENT) {\n          <cds-text-label>\n            <v-input-label\n              [title]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              tooltip=\"{{\n                'widgetTabManagement.content.fields.digitsInfoTooltip'\n                  | translate\n                    : {\n                        minFractionDigits: 0,\n                        maxFractionDigits: 0\n                      }\n              }}\"\n            >\n            </v-input-label>\n\n            <input\n              cdsText\n              [attr.data-carbon-theme]=\"obs.theme\"\n              [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n              type=\"text\"\n              formControlName=\"digitsInfo\"\n            />\n          </cds-text-label>\n        }\n      }\n    </section>\n  </form>\n\n  <span class=\"valtimo-dossier-management-widget-collection__subtitle\">\n    {{ 'widgetTabManagement.content.collection.cardFields' | translate }}\n  </span>\n\n  <valtimo-dossier-management-widget-fields-column\n    [columnData]=\"content()?.fields\"\n    [fieldWidthDropdown]=\"fieldWidthDropdown\"\n    (columnUpdateEvent)=\"onColumnUpdateEvent($event)\"\n  >\n  </valtimo-dossier-management-widget-fields-column>\n\n  <ng-template #fieldWidthDropdown let-index=\"index\">\n    <cds-dropdown\n      [label]=\"'widgetTabManagement.content.collection.fieldWidth' | translate\"\n      [dropUp]=\"false\"\n      [placeholder]=\"'widgetTabManagement.content.collection.fieldWidthPlaceholder' | translate\"\n      (selected)=\"onWidthSelected($event, index)\"\n    >\n      <cds-dropdown-list [items]=\"getSelectedWidthItem(index)\"></cds-dropdown-list>\n    </cds-dropdown>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-dossier-management-widget-collection{display:flex;flex-direction:column;gap:24px}.valtimo-dossier-management-widget-collection__form{display:flex;gap:16px}.valtimo-dossier-management-widget-collection__subtitle{font-size:16px;font-weight:600;line-height:22px}.valtimo-dossier-management-widget-collection__card{flex-direction:column;display:flex;gap:16px}.valtimo-dossier-management-widget-collection__card-title{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:flex-end}.valtimo-dossier-management-widget-collection__card-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-dossier-management-widget-collection__enum{display:flex;flex-direction:column;gap:16px}.valtimo-dossier-management-widget-collection__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: i1$1.CdsThemeService }, { type: i2$2.FormBuilder }, { type: i5.TranslateService }, { type: WidgetWizardService }, { type: WidgetFieldsService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -1386,10 +1398,10 @@ const AVAILABLE_WIDGETS = [
     },
 ];
 const WIDGET_WIDTH_LABELS = {
-    1: 'widgetTabManagement.width.quarter.title',
-    2: 'widgetTabManagement.width.half.title',
-    3: 'widgetTabManagement.width.threeQuarters.title',
-    4: 'widgetTabManagement.width.fullWidth.title',
+    1: 'widgetTabManagement.width.small.title',
+    2: 'widgetTabManagement.width.medium.title',
+    3: 'widgetTabManagement.width.large.title',
+    4: 'widgetTabManagement.width.xtraLarge.title',
 };
 const WIDGET_STYLE_LABELS = {
     [WidgetStyle.DEFAULT]: 'widgetTabManagement.style.default.title',
@@ -1846,7 +1858,7 @@ class DossierManagementDetailContainerActionsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementDetailContainerActionsComponent, deps: [{ token: DOCUMENT }, { token: i2$3.NotificationService }, { token: DossierExportService }, { token: i5.TranslateService }, { token: i1.DocumentService }, { token: DossierDetailService }, { token: i1$1.PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementDetailContainerActionsComponent, selector: "valtimo-dossier-management-detail-container-actions", inputs: { documentDefinitionTitle: "documentDefinitionTitle", documentDefinitionName: "documentDefinitionName" }, outputs: { versionSet: "versionSet" }, providers: [NotificationService], viewQueries: [{ propertyName: "_exportMessageTemplateRef", first: true, predicate: ["exportingMessage"], descendants: true }, { propertyName: "_dossierRemoveModal", first: true, predicate: ["dossierRemoveModal"], 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=\"dossier-actions\"\n  *ngIf=\"{\n    exporting: exporting$ | async,\n    loadingVersion: loadingVersion$ | async,\n    versionListItems: versionListItems$ | async,\n    selectedDocumentDefinition: selectedDocumentDefinition$ | async,\n    selectedDocumentDefinitionIsReadOnly: selectedDocumentDefinitionIsReadOnly$ | async,\n    compactMode: compactMode$ | async\n  } as obs\"\n  [ngClass]=\"{'--compact': obs.compactMode}\"\n>\n  <div class=\"dossier-metadata\">\n    <ng-container *ngTemplateOutlet=\"versionSelection; context: {obs: obs}\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"readOnly; context: {obs: obs}\"></ng-container>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"exportMenu; context: {obs: obs}\"></ng-container>\n</div>\n\n<ng-template #versionSelection let-obs=\"obs\">\n  <cds-dropdown\n    class=\"version-selection\"\n    [disabled]=\"obs.loadingVersion || (obs.versionListItems.length || []) === 1\"\n    [skeleton]=\"obs.loadingVersion\"\n    (selected)=\"setVersion($event)\"\n    [size]=\"obs.compactMode ? 'sm' : 'md'\"\n  >\n    <cds-dropdown-list [items]=\"obs.versionListItems || []\"></cds-dropdown-list>\n  </cds-dropdown>\n</ng-template>\n\n<ng-template #exportMenu let-obs=\"obs\">\n  <cds-overflow-menu\n    valtimoCdsOverflowButton\n    [width]=\"250\"\n    [customTrigger]=\"customTrigger\"\n    [offset]=\"{y: 48, x: 37}\"\n    class=\"overflow-button\"\n  >\n    <cds-overflow-menu-option\n      [id]=\"'exportDocumentDefinition'\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"export()\"\n      >{{\n        'dossierManagement.export' | translate: {value: documentDefinitionTitle}\n      }}</cds-overflow-menu-option\n    >\n\n    <cds-overflow-menu-option\n      *ngIf=\"obs.selectedDocumentDefinition && !obs.selectedDocumentDefinition.readOnly\"\n      [id]=\"'removeDocumentDefinition'\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"openDossierRemoveModal()\"\n      >{{ 'Remove document definition' | translate }}</cds-overflow-menu-option\n    >\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #customTrigger>\n  <button cdsButton=\"tertiary\" [size]=\"(compactMode$ | async) ? 'sm' : 'md'\">\n    {{ 'dossierManagement.more' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #exportingMessage>\n  <div class=\"exporting-message\">\n    <span class=\"cds--inline-notification__title\">{{\n      'dossierManagement.preparingDownload' | translate\n    }}</span>\n\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #readOnly let-obs=\"obs\">\n  <cds-tag *ngIf=\"obs.selectedDocumentDefinitionIsReadOnly\" type=\"blue\">{{\n    'dossierManagement.readonly' | translate\n  }}</cds-tag>\n</ng-template>\n\n<valtimo-dossier-management-remove-modal\n  #dossierRemoveModal\n></valtimo-dossier-management-remove-modal>\n", styles: [".dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end}.dossier-actions.--compact{align-items:center}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.exporting-message{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}.dossier-metadata{display:flex;gap:24px;align-items: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: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.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$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i2$3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i1$1.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementDetailContainerActionsComponent, selector: "valtimo-dossier-management-detail-container-actions", inputs: { documentDefinitionTitle: "documentDefinitionTitle", documentDefinitionName: "documentDefinitionName" }, outputs: { versionSet: "versionSet" }, providers: [NotificationService], viewQueries: [{ propertyName: "_exportMessageTemplateRef", first: true, predicate: ["exportingMessage"], descendants: true }, { propertyName: "_dossierRemoveModal", first: true, predicate: ["dossierRemoveModal"], 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=\"dossier-actions\"\n  *ngIf=\"{\n    exporting: exporting$ | async,\n    loadingVersion: loadingVersion$ | async,\n    versionListItems: versionListItems$ | async,\n    selectedDocumentDefinition: selectedDocumentDefinition$ | async,\n    selectedDocumentDefinitionIsReadOnly: selectedDocumentDefinitionIsReadOnly$ | async,\n    compactMode: compactMode$ | async\n  } as obs\"\n  [ngClass]=\"{'--compact': obs.compactMode}\"\n>\n  <div class=\"dossier-metadata\">\n    <ng-container *ngTemplateOutlet=\"versionSelection; context: {obs: obs}\"></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"readOnly; context: {obs: obs}\"></ng-container>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"exportMenu; context: {obs: obs}\"></ng-container>\n</div>\n\n<ng-template #versionSelection let-obs=\"obs\">\n  <cds-dropdown\n    class=\"version-selection\"\n    [disabled]=\"obs.loadingVersion || (obs.versionListItems.length || []) === 1\"\n    [skeleton]=\"obs.loadingVersion\"\n    (selected)=\"setVersion($event)\"\n    [size]=\"obs.compactMode ? 'sm' : 'md'\"\n  >\n    <cds-dropdown-list [items]=\"obs.versionListItems || []\"></cds-dropdown-list>\n  </cds-dropdown>\n</ng-template>\n\n<ng-template #exportMenu let-obs=\"obs\">\n  <cds-overflow-menu\n    valtimoCdsOverflowButton\n    [width]=\"250\"\n    [customTrigger]=\"customTrigger\"\n    [offset]=\"{y: 48, x: 37}\"\n    class=\"overflow-button\"\n  >\n    <cds-overflow-menu-option\n      [id]=\"'exportDocumentDefinition'\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"export()\"\n      >{{\n        'dossierManagement.export' | translate: {value: documentDefinitionTitle}\n      }}</cds-overflow-menu-option\n    >\n\n    <cds-overflow-menu-option\n      *ngIf=\"obs.selectedDocumentDefinition && !obs.selectedDocumentDefinition.readOnly\"\n      [id]=\"'removeDocumentDefinition'\"\n      [disabled]=\"obs.exporting || obs.loadingVersion\"\n      (selected)=\"openDossierRemoveModal()\"\n      >{{ 'Remove document definition' | translate }}</cds-overflow-menu-option\n    >\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #customTrigger>\n  <button cdsButton=\"tertiary\" [size]=\"(compactMode$ | async) ? 'sm' : 'md'\">\n    {{ 'dossierManagement.more' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #exportingMessage>\n  <div class=\"exporting-message\">\n    <span class=\"cds--inline-notification__title\">{{\n      'dossierManagement.preparingDownload' | translate\n    }}</span>\n\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n\n<ng-template #readOnly let-obs=\"obs\">\n  <cds-tag *ngIf=\"obs.selectedDocumentDefinitionIsReadOnly\" type=\"blue\">{{\n    'dossierManagement.readonly' | translate\n  }}</cds-tag>\n</ng-template>\n\n<valtimo-dossier-management-remove-modal\n  #dossierRemoveModal\n></valtimo-dossier-management-remove-modal>\n", styles: [".dossier-actions{display:flex;width:100%;justify-content:space-between;align-items:flex-end}.dossier-actions.--compact{align-items:center}.dossier-actions ::ng-deep .version-selection{width:160px}.dossier-actions ::ng-deep .version-selection .cds--list-box__selection{display:none}.exporting-message{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}.dossier-metadata{display:flex;gap:24px;align-items: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: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i2$3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i1$1.ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: ["width"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: DossierManagementRemoveModalComponent, selector: "valtimo-dossier-management-remove-modal" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementDetailContainerActionsComponent, decorators: [{
             type: Component,
@@ -2269,6 +2281,7 @@ class DossierManagementSearchFieldsComponent {
             !!formData?.dropdownDataProvider &&
             this.dropdownDataProviderSupportsUpdates(formData?.dropdownDataProvider)));
         this.CARBON_THEME = 'white';
+        this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
         this.iconService.registerAll([ArrowDown16, ArrowUp16]);
     }
     ngOnInit() {
@@ -2299,6 +2312,13 @@ class DossierManagementSearchFieldsComponent {
             this.nextIfChanged(this.valid$, this.isValid(data));
         }, 0);
     }
+    pathValueChange(path) {
+        this.formData$.pipe(take(1)).subscribe(currentData => {
+            const newData = { ...currentData, path };
+            this.nextIfChanged(this.formData$, newData);
+            this.nextIfChanged(this.valid$, this.isValid(newData));
+        });
+    }
     dropdownDatalistChange(data) {
         this.modifiedDropdownValues$.next(data);
     }
@@ -2477,11 +2497,11 @@ class DossierManagementSearchFieldsComponent {
         this.searchFieldClicked(searchField, false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementSearchFieldsComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: i5.TranslateService }, { token: i4$1.DomSanitizer }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", outputs: { searchField: "searchField" }, 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    searchFields: translatedSearchFields$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    valid: valid$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    [download]=\"obs.downloadName\"\n    [href]=\"obs.downloadUrl\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.searchFields\"\n    [loading]=\"!obs.searchFields\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    (moveRow)=\"onMoveRowClick($event, obs.documentDefinitionName)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n      [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [widthPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"path\"\n          [title]=\"'searchFieldsOverview.path' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-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]=\"obs.disableInput\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.documentDefinitionName)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.dossier-management-search-fields__buttons{display:flex;gap:16px}.dossier-management-search-fields__buttons .center-link{display:flex;align-items:center}.dossier-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.dossier-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!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: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline"], outputs: ["selectedChange"] }, { kind: "component", type: i1$1.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: "component", type: i1$1.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i1$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i1$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i1$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", outputs: { searchField: "searchField" }, 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    searchFields: translatedSearchFields$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    valid: valid$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-testid=\"dossier-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    [download]=\"obs.downloadName\"\n    [href]=\"obs.downloadUrl\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    data-testid=\"dossier-management-search-add\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.searchFields\"\n    [loading]=\"!obs.searchFields\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    (moveRow)=\"onMoveRowClick($event, obs.documentDefinitionName)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n      [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"dossier-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          dataTestId=\"dossier-management-search-key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [widthPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [documentDefinitionName]=\"documentDefinitionName$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"dossier-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"dossier-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"dossier-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"dossier-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-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\n    data-testid=\"dossier-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-testid=\"dossier-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.documentDefinitionName)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.dossier-management-search-fields__buttons{display:flex;gap:16px}.dossier-management-search-fields__buttons .center-link{display:flex;align-items:center}.dossier-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.dossier-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!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: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i1$1.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", "dataTestId"], outputs: ["valueChange"] }, { kind: "component", type: i1$1.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i1$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: i1$1.TableComponent, selector: "v-table", inputs: ["items", "columns", "loading", "showEditButtons", "showPagination", "editButtonTranslationKey", "itemsTranslationKey", "noResultsTranslationKey", "mobileBreakpointPx", "amountOfLoadingRows", "collectionSize", "page", "size"], outputs: ["editButtonClicked", "paginationSizeSet", "paginationPageSet"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i1$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i1$1.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "documentDefinitionName", "version", "prefixes", "label", "tooltip", "required", "showDocumentDefinitionSelector", "notation", "defaultValue"], outputs: ["valueChangeEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementSearchFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-search-fields', changeDetection: ChangeDetectionStrategy.OnPush, 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    searchFields: translatedSearchFields$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    valid: valid$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    [download]=\"obs.downloadName\"\n    [href]=\"obs.downloadUrl\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.searchFields\"\n    [loading]=\"!obs.searchFields\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    (moveRow)=\"onMoveRowClick($event, obs.documentDefinitionName)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n      [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [widthPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"path\"\n          [title]=\"'searchFieldsOverview.path' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-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]=\"obs.disableInput\">\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.documentDefinitionName)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.dossier-management-search-fields__buttons{display:flex;gap:16px}.dossier-management-search-fields__buttons .center-link{display:flex;align-items:center}.dossier-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.dossier-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!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"] }]
+            args: [{ selector: 'valtimo-dossier-management-search-fields', changeDetection: ChangeDetectionStrategy.OnPush, 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    searchFields: translatedSearchFields$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    valid: valid$ | async,\n    disableInput: disableInput$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"modal; context: {obs: obs}\"></ng-container>\n</ng-container>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"dossierManagement.statuses.deleteText\"\n  [outputOnConfirm]=\"selectedDeleteSearchField$ | async\"\n  [showModalSubject$]=\"showDeleteModal$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteSelectedSearchFieldConfirm($event)\"\n></valtimo-confirmation-modal>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    data-testid=\"dossier-management-search-download\"\n    [disabled]=\"\n      !obs.downloadUrl || !obs.downloadName || obs.searchFields?.length <= 0 || obs.disableInput\n    \"\n    [download]=\"obs.downloadName\"\n    [href]=\"obs.downloadUrl\"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    cdsButton=\"primary\"\n    data-testid=\"dossier-management-search-add\"\n    [disabled]=\"loadingSearchFields || obs.disableInput\"\n    (click)=\"searchFieldClicked($event, true)\"\n  >\n    <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n    {{ 'searchFieldsOverview.addRow' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [fields]=\"fields\"\n    [header]=\"false\"\n    [items]=\"obs.searchFields\"\n    [loading]=\"!obs.searchFields\"\n    [movingRowsEnabled]=\"true\"\n    (rowClicked)=\"searchFieldClicked($event, false)\"\n    (moveRow)=\"onMoveRowClick($event, obs.documentDefinitionName)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      [title]=\"'searchFieldsOverview.noSearchfieldsTitle' | translate\"\n      [description]=\"'searchFieldsOverview.noSearchfieldsDescription' | translate\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #modal let-obs=\"obs\">\n  <cds-modal\n    valtimoCdsModal\n    [title]=\"\n      searchFieldActionTypeIsAdd\n        ? ('searchFieldsOverview.addRow' | translate)\n        : ('searchFieldsOverview.edit' | translate)\n    \"\n    [open]=\"modalShowing$ | async\"\n    [showFooter]=\"true\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onModalClose()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          (searchFieldActionTypeIsAdd ? 'searchFieldsOverview.addRow' : 'searchFieldsOverview.edit')\n            | translate\n        }}\n      </h3>\n    </cds-modal-header>\n\n    <section cdsModalContent>\n      <v-form\n        (valueChange)=\"formValueChange($event)\"\n        *ngIf=\"\n          (showFields$ | async) && {\n            searchField: selectedSearchField$ | async\n          } as searchObs\n        \"\n      >\n        <v-input\n          name=\"title\"\n          dataTestId=\"dossier-management-search-title\"\n          [title]=\"'searchFieldsOverview.title' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.title\"\n          [disabled]=\"obs.disableInput\"\n          [required]=\"false\"\n          [fullWidth]=\"true\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.title' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <v-input\n          name=\"key\"\n          dataTestId=\"dossier-management-search-key\"\n          [title]=\"'searchFieldsOverview.key' | translate\"\n          [margin]=\"true\"\n          [defaultValue]=\"searchObs.searchField?.key\"\n          [disabled]=\"obs.disableInput || !searchFieldActionTypeIsAdd\"\n          [required]=\"true\"\n          [widthPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.key' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </v-input>\n\n        <valtimo-value-path-selector\n          name=\"path\"\n          [label]=\"'searchFieldsOverview.path' | translate\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.path' | translate\"\n          [marginXl]=\"true\"\n          [documentDefinitionName]=\"documentDefinitionName$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n          [defaultValue]=\"searchObs.searchField?.path\"\n          [disabled]=\"obs.disableInput\"\n        ></valtimo-value-path-selector>\n\n        <v-select\n          *ngIf=\"dataTypeItems$ | async as dataTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dataTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dataType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"dataType\"\n          [defaultSelectionId]=\"searchObs.searchField?.dataType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dataType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"dossier-management-search-dataTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"(showMatchTypes$ | async) && (matchTypeItems$ | async) as matchTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"matchTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.matchType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"matchType\"\n          [defaultSelectionId]=\"searchObs.searchField?.matchType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.matchType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"dossier-management-search-matchTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"fieldTypeItems$ | async as fieldTypeItems\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"fieldTypeItems\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.fieldType' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          name=\"fieldType\"\n          [defaultSelectionId]=\"searchObs.searchField?.fieldType\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.fieldType' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"dossier-management-search-fieldTypes\"\n        ></v-select>\n\n        <v-select\n          *ngIf=\"\n            (fieldTypeIsDropdown$ | async) &&\n            (dropdownDataProviderNames$ | async) as dropdownDataProviderNames\n          \"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          [items]=\"dropdownDataProviderNames\"\n          [placeholder]=\"'searchFieldsOverview.searchFieldPlaceholder' | translate\"\n          [title]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n          [disabled]=\"obs.disableInput\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          name=\"dropdownDataProvider\"\n          [defaultSelectionId]=\"searchObs.searchField?.dropdownDataProvider\"\n          [widthInPx]=\"200\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownDataProvider' | translate\"\n          [carbonTheme]=\"CARBON_THEME\"\n          dataTestId=\"dossier-management-search-dropdownDataProvider\"\n        ></v-select>\n\n        <valtimo-carbon-multi-input\n          *ngIf=\"\n            (showInputDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          name=\"dropdownValues\"\n          [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n          type=\"keyValue\"\n          [disabled]=\"obs.disableInput\"\n          [defaultValues]=\"initialDropdownValues\"\n          [margin]=\"true\"\n          [required]=\"false\"\n          [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n          (valueChange)=\"dropdownDatalistChange($event)\"\n          [carbonTheme]=\"CARBON_THEME\"\n        >\n        </valtimo-carbon-multi-input>\n\n        <v-table\n          *ngIf=\"\n            (showReadonlyDropdownTable$ | async) &&\n            (initialDropdownValues$ | async) as initialDropdownValues\n          \"\n          [items]=\"initialDropdownValues\"\n          [columns]=\"dropdownColumns$ | async\"\n          [showEditButtons]=\"false\"\n          [itemsTranslationKey]=\"'searchFieldsOverview'\"\n          [showPagination]=\"false\"\n          [mobileBreakpointPx]=\"200\"\n          [carbonTheme]=\"CARBON_THEME\"\n        ></v-table>\n      </v-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\n    data-testid=\"dossier-management-search-close\"\n    cdsButton=\"secondary\"\n    (click)=\"onModalClose()\"\n    [disabled]=\"obs.disableInput\"\n  >\n    {{ 'interface.cancel' | translate }}\n  </button>\n\n  <button\n    data-testid=\"dossier-management-search-save\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.disableInput || !obs.valid\"\n    (click)=\"saveSearchField(obs.documentDefinitionName)\"\n  >\n    {{ 'searchFieldsOverview.submit' | translate }}\n  </button>\n</ng-template>\n", styles: ["valtimo-list::ng-deep table{border-top:1px solid rgba(0,0,0,.125)}.dossier-management-search-fields__buttons{display:flex;gap:16px}.dossier-management-search-fields__buttons .center-link{display:flex;align-items:center}.dossier-management-search-fields__move-buttons{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.dossier-management-search-fields__move-buttons button:not(:last-child){margin-right:8px}.list-actions{width:1px}.modal-header::ng-deep{background-color:#f3f4f7}::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--tab-content{padding-top:0!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.DocumentService }, { type: i2.ActivatedRoute }, { type: i5.TranslateService }, { type: i4$1.DomSanitizer }, { type: i2$3.IconService }], propDecorators: { searchField: [{
                 type: Output
             }] } });
@@ -2695,6 +2715,7 @@ class DossierManagementListColumnsComponent {
         this.showDeleteModal$ = new Subject();
         this.deleteRowKey$ = new BehaviorSubject('');
         this.defaultEnumValues$ = new BehaviorSubject(undefined);
+        this.ValuePathSelectorPrefix = ValuePathSelectorPrefix;
     }
     ngAfterViewInit() {
         this.iconService.registerAll([ArrowDown16, ArrowUp16]);
@@ -2924,11 +2945,11 @@ class DossierManagementListColumnsComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementListColumnsComponent, deps: [{ token: i1.DocumentService }, { token: i2.ActivatedRoute }, { token: i5.TranslateService }, { token: i2$1.ConfigService }, { token: i4$1.DomSanitizer }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns", 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    caseListColumn: translatedCaseListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loadingCaseListColumns\"\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    [movingRowsEnabled]=\"true\"\n    (moveRow)=\"onMoveRowEvent($event, obs.documentDefinitionName)\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.noConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n    ></valtimo-no-results>\n\n    <valtimo-no-results\n      *ngIf=\"obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.hasEnvConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.hasEnvConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-error.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [href]=\"obs.downloadUrl\"\n    [download]=\"obs.downloadName\"\n    [disabled]=\"\n      obs.hasEnvironmentConfig ||\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      loadingCaseListColumns\n    \"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n        [invalid]=\"modalObs.validKey === false\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"path\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <cds-dropdown-list [items]=\"viewTypeItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n    <div\n      class=\"cds--text-input__field-wrapper\"\n      *ngIf=\"modalObs.showEnum || modalObs.isYesNo\"\n      [ngClass]=\"{'no-margin': modalObs.isYesNo}\"\n    >\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{\n            modalObs.isYesNo\n              ? ('listColumn.enumTitleOptional' | translate)\n              : ('listColumn.enumTitle' | translate)\n          }}\n          <v-tooltip-icon\n            [tooltip]=\"\n              modalObs.isYesNo\n                ? ('listColumn.enumTooltipOptional' | translate)\n                : ('listColumn.enumTooltip' | translate)\n            \"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <valtimo-carbon-multi-input\n          *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n          [defaultValues]=\"defaultEnumValues$ | async\"\n          [hideAddButton]=\"modalObs.isYesNo\"\n          [hideDeleteButton]=\"modalObs.isYesNo\"\n          [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n          [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n          [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <cds-dropdown-list [items]=\"sortItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCasListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.label-with-tooltip{display:flex;align-items:center}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:1rem}.no-margin{margin-bottom:0!important}.display-type-dropdown{width:300px}.list-column-form{margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.dossier-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content: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: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$3.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.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$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i1$1.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i1$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i1$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns", 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    caseListColumn: translatedCaseListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loadingCaseListColumns\"\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    [movingRowsEnabled]=\"true\"\n    (moveRow)=\"onMoveRowEvent($event, obs.documentDefinitionName)\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.noConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n    ></valtimo-no-results>\n\n    <valtimo-no-results\n      *ngIf=\"obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.hasEnvConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.hasEnvConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-error.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [href]=\"obs.downloadUrl\"\n    [download]=\"obs.downloadName\"\n    [disabled]=\"\n      obs.hasEnvironmentConfig ||\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      loadingCaseListColumns\n    \"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n        [invalid]=\"modalObs.validKey === false\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n\n        <valtimo-value-path-selector\n          formControlName=\"path\"\n          [documentDefinitionName]=\"documentDefinitionName$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n        ></valtimo-value-path-selector>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <cds-dropdown-list [items]=\"viewTypeItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n    <div\n      class=\"cds--text-input__field-wrapper\"\n      *ngIf=\"modalObs.showEnum || modalObs.isYesNo\"\n      [ngClass]=\"{'no-margin': modalObs.isYesNo}\"\n    >\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{\n            modalObs.isYesNo\n              ? ('listColumn.enumTitleOptional' | translate)\n              : ('listColumn.enumTitle' | translate)\n          }}\n          <v-tooltip-icon\n            [tooltip]=\"\n              modalObs.isYesNo\n                ? ('listColumn.enumTooltipOptional' | translate)\n                : ('listColumn.enumTooltip' | translate)\n            \"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <valtimo-carbon-multi-input\n          *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n          [defaultValues]=\"defaultEnumValues$ | async\"\n          [hideAddButton]=\"modalObs.isYesNo\"\n          [hideDeleteButton]=\"modalObs.isYesNo\"\n          [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n          [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n          [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <cds-dropdown-list [items]=\"sortItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCasListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.label-with-tooltip{display:flex;align-items:center}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:1rem}.no-margin{margin-bottom:0!important}.display-type-dropdown{width:300px}.list-column-form{margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.dossier-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content: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: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$3.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "component", type: i1$1.TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i1$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "component", type: i1$1.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i1$1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "actions", "actionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: i1$1.ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "documentDefinitionName", "version", "prefixes", "label", "tooltip", "required", "showDocumentDefinitionSelector", "notation", "defaultValue"], outputs: ["valueChangeEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementListColumnsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dossier-management-list-columns', 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    caseListColumn: translatedCaseListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loadingCaseListColumns\"\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    [movingRowsEnabled]=\"true\"\n    (moveRow)=\"onMoveRowEvent($event, obs.documentDefinitionName)\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.noConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n    ></valtimo-no-results>\n\n    <valtimo-no-results\n      *ngIf=\"obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.hasEnvConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.hasEnvConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-error.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [href]=\"obs.downloadUrl\"\n    [download]=\"obs.downloadName\"\n    [disabled]=\"\n      obs.hasEnvironmentConfig ||\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      loadingCaseListColumns\n    \"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n        [invalid]=\"modalObs.validKey === false\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"path\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <cds-dropdown-list [items]=\"viewTypeItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n    <div\n      class=\"cds--text-input__field-wrapper\"\n      *ngIf=\"modalObs.showEnum || modalObs.isYesNo\"\n      [ngClass]=\"{'no-margin': modalObs.isYesNo}\"\n    >\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{\n            modalObs.isYesNo\n              ? ('listColumn.enumTitleOptional' | translate)\n              : ('listColumn.enumTitle' | translate)\n          }}\n          <v-tooltip-icon\n            [tooltip]=\"\n              modalObs.isYesNo\n                ? ('listColumn.enumTooltipOptional' | translate)\n                : ('listColumn.enumTooltip' | translate)\n            \"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <valtimo-carbon-multi-input\n          *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n          [defaultValues]=\"defaultEnumValues$ | async\"\n          [hideAddButton]=\"modalObs.isYesNo\"\n          [hideDeleteButton]=\"modalObs.isYesNo\"\n          [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n          [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n          [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <cds-dropdown-list [items]=\"sortItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCasListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.label-with-tooltip{display:flex;align-items:center}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:1rem}.no-margin{margin-bottom:0!important}.display-type-dropdown{width:300px}.list-column-form{margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.dossier-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content: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"] }]
+            args: [{ selector: 'valtimo-dossier-management-list-columns', 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    caseListColumn: translatedCaseListColumns$ | async,\n    documentDefinitionName: documentDefinitionName$ | async,\n    hasEnvironmentConfig: hasEnvironmentConfig$ | async,\n    downloadUrl: downloadUrl$ | async,\n    downloadName: downloadName$ | async,\n    loadingCaseListColumns: loadingCaseListColumns$ | async\n  } as obs\"\n>\n  <ng-container *ngTemplateOutlet=\"list; context: {obs: obs}\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"createEditModal\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"deleteModal\"></ng-container>\n</ng-container>\n\n<ng-template #list let-obs=\"obs\">\n  <valtimo-carbon-list\n    [actionItems]=\"actionItems\"\n    [loading]=\"obs.loadingCaseListColumns\"\n    [items]=\"obs.caseListColumn\"\n    [fields]=\"fields\"\n    [viewMode]=\"false\"\n    [header]=\"false\"\n    [movingRowsEnabled]=\"true\"\n    (moveRow)=\"onMoveRowEvent($event, obs.documentDefinitionName)\"\n    (rowClicked)=\"columnRowClicked($event)\"\n  >\n    <ng-container\n      carbonToolbarContent\n      *ngTemplateOutlet=\"buttons; context: {obs: obs}\"\n    ></ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.noConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.noConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-empty.svg\"\n    ></valtimo-no-results>\n\n    <valtimo-no-results\n      *ngIf=\"obs.hasEnvironmentConfig\"\n      [title]=\"'listColumn.hasEnvConfigWarningTitle' | translate\"\n      [description]=\"'listColumn.hasEnvConfigWarning' | translate\"\n      illustration=\"valtimo-layout/img/emptystate-error.svg\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n</ng-template>\n\n<ng-template #buttons let-obs=\"obs\">\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    [href]=\"obs.downloadUrl\"\n    [download]=\"obs.downloadName\"\n    [disabled]=\"\n      obs.hasEnvironmentConfig ||\n      !obs.downloadUrl ||\n      !obs.downloadName ||\n      obs.caseListColumn?.length < 1 ||\n      obs.disableInput ||\n      loadingCaseListColumns\n    \"\n  >\n    <svg class=\"cds--btn__icon\" cdsIcon=\"download\" size=\"16\"></svg>\n  </button>\n\n  <button\n    (click)=\"openModal('create')\"\n    cdsButton=\"primary\"\n    [disabled]=\"obs.hasEnvironmentConfig || loadingCaseListColumns\"\n  >\n    {{ 'listColumn.addButtonText' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #environmentConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'warning',\n        title: 'listColumn.hasEnvConfigWarningTitle' | translate,\n        message: 'listColumn.hasEnvConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #noConfigWarning>\n  <div class=\"pl-2 pr-2 pb-2 pt-2\">\n    <cds-notification\n      [notificationObj]=\"{\n        type: 'info',\n        title: 'listColumn.noConfigWarningTitle' | translate,\n        message: 'listColumn.noConfigWarning' | translate,\n        showClose: false\n      }\"\n    >\n    </cds-notification>\n  </div>\n</ng-template>\n\n<ng-template #createEditModal>\n  <cds-modal\n    valtimoCdsModal\n    *ngIf=\"{\n      type: currentModalType$ | async,\n      show: showModal$ | async,\n      valid: valid$ | async,\n      disableInput: disableInput$ | async,\n      validKey: validKey$ | async,\n      disableDefaultSort: disableDefaultSort$ | async,\n      showEnum: showEnum$ | async,\n      isYesNo: isYesNo$ | async\n    } as modalObs\"\n    [open]=\"modalObs.show\"\n  >\n    <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n      <h3 cdsModalHeaderHeading>\n        {{\n          modalObs.type === 'create'\n            ? ('listColumn.addButtonText' | translate)\n            : ('listColumn.editColumnTitle' | translate)\n        }}\n      </h3>\n    </cds-modal-header>\n    <section cdsModalContent>\n      <ng-container *ngTemplateOutlet=\"modalContent; context: {modalObs: modalObs}\"></ng-container>\n    </section>\n    <ng-container *ngTemplateOutlet=\"modalFooter; context: {modalObs: modalObs}\"></ng-container>\n  </cds-modal>\n</ng-template>\n\n<ng-template #modalContent let-modalObs=\"modalObs\">\n  <form [formGroup]=\"formGroup\" class=\"list-column-form\">\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.titleTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.titleTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"title\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label\n        [disabled]=\"modalObs.disableInput || modalObs.type === 'edit'\"\n        [invalid]=\"modalObs.validKey === false\"\n        [invalidText]=\"'listColumn.uniqueKeyWarning' | translate\"\n      >\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.key' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.keyTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"key\" [invalid]=\"modalObs.validKey === false\" />\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.path' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.pathTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n\n        <valtimo-value-path-selector\n          formControlName=\"path\"\n          [documentDefinitionName]=\"documentDefinitionName$ | async\"\n          [prefixes]=\"[ValuePathSelectorPrefix.DOC, ValuePathSelectorPrefix.CASE]\"\n        ></valtimo-value-path-selector>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.displayType' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.displayTypeTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown formControlName=\"displayType\" [disabled]=\"modalObs.disableInput\">\n          <cds-dropdown-list [items]=\"viewTypeItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\" *ngIf=\"showDateFormat$ | async\">\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip\">\n          {{ 'listColumn.dateFormat' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.dateFormatTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <input cdsText formControlName=\"dateFormat\" />\n      </cds-label>\n    </div>\n    <div\n      class=\"cds--text-input__field-wrapper\"\n      *ngIf=\"modalObs.showEnum || modalObs.isYesNo\"\n      [ngClass]=\"{'no-margin': modalObs.isYesNo}\"\n    >\n      <cds-label [disabled]=\"modalObs.disableInput\">\n        <span class=\"label-with-tooltip select-label\">\n          {{\n            modalObs.isYesNo\n              ? ('listColumn.enumTitleOptional' | translate)\n              : ('listColumn.enumTitle' | translate)\n          }}\n          <v-tooltip-icon\n            [tooltip]=\"\n              modalObs.isYesNo\n                ? ('listColumn.enumTooltipOptional' | translate)\n                : ('listColumn.enumTooltip' | translate)\n            \"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <valtimo-carbon-multi-input\n          *ngIf=\"(showModal$ | async) || (modalShowing$ | async)\"\n          type=\"keyValue\"\n          (valueChange)=\"enumValueChange($event)\"\n          [defaultValues]=\"defaultEnumValues$ | async\"\n          [hideAddButton]=\"modalObs.isYesNo\"\n          [hideDeleteButton]=\"modalObs.isYesNo\"\n          [maxRows]=\"modalObs.isYesNo ? 1 : null\"\n          [keyColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.Yes' | translate)\"\n          [valueColumnTitle]=\"modalObs.isYesNo && ('viewTypeConverter.No' | translate)\"\n        ></valtimo-carbon-multi-input>\n      </cds-label>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-checkbox formControlName=\"sortable\"\n        >{{ 'listColumn.sortable' | translate }}\n      </cds-checkbox>\n    </div>\n    <div class=\"cds--text-input__field-wrapper\">\n      <cds-label [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\">\n        <span class=\"label-with-tooltip select-label\">\n          {{ 'listColumn.defaultSortTitle' | translate }}\n          <v-tooltip-icon\n            [tooltip]=\"'listColumn.defaultSortTooltip' | translate\"\n            [disabled]=\"modalObs.disableInput\"\n          ></v-tooltip-icon>\n        </span>\n        <cds-dropdown\n          formControlName=\"defaultSort\"\n          [disabled]=\"modalObs.disableInput || modalObs.disableDefaultSort\"\n        >\n          <cds-dropdown-list [items]=\"sortItems$ | async\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-label>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #modalFooter let-modalObs=\"modalObs\">\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        cdsButton=\"secondary\"\n        [attr.modal-primary-focus]=\"true\"\n        (click)=\"closeModal()\"\n        [disabled]=\"modalObs.disableInput\"\n      >\n        {{ 'listColumn.close' | translate }}\n      </button>\n      <button\n        cdsButton=\"primary\"\n        [attr.modal-primary-focus]=\"true\"\n        [disabled]=\"modalObs.valid === false\"\n        (click)=\"saveCasListColumns()\"\n        [disabled]=\"\n          modalObs.disableInput || modalObs.valid === false || modalObs.validKey === false\n        \"\n      >\n        {{ 'listColumn.save' | translate }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</ng-template>\n\n<ng-template #deleteModal>\n  <valtimo-confirmation-modal\n    [showModalSubject$]=\"showDeleteModal$\"\n    [outputOnConfirm]=\"deleteRowKey$ | async\"\n    (confirmEvent)=\"deleteRowConfirmation($event)\"\n    confirmButtonTextTranslationKey=\"listColumn.deleteColumn\"\n    titleTranslationKey=\"listColumn.deleteColumn\"\n    contentTranslationKey=\"listColumn.deleteColumnConfirmation\"\n  ></valtimo-confirmation-modal>\n</ng-template>\n", styles: ["::ng-deep .tab-container{min-height:unset!important}::ng-deep .cds--inline-notification{max-width:100%}.label-with-tooltip{display:flex;align-items:center}.cds--text-input__field-wrapper:not(:last-child){margin-bottom:1rem}.no-margin{margin-bottom:0!important}.display-type-dropdown{width:300px}.list-column-form{margin-bottom:3rem}.select-label{padding-bottom:.5rem;width:250px}.center-link{display:flex;align-items:center}.dossier-list-columns__actions{display:flex;gap:8px}.list-columns__buttons{display:flex;gap:16px;flex-direction:row;justify-content: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: i1.DocumentService }, { type: i2.ActivatedRoute }, { type: i5.TranslateService }, { type: i2$1.ConfigService }, { type: i4$1.DomSanitizer }, { type: i2$3.IconService }] });
 
 /*
@@ -2969,7 +2990,6 @@ class TabFormComponent {
                     return [];
             }
         }), startWith([]));
-        this.enableCaseWidgets$ = this.configService.getFeatureToggleObservable('enableCaseWidgets');
         this._subscriptions = new Subscription();
     }
     ngOnInit() {
@@ -2986,6 +3006,17 @@ class TabFormComponent {
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
+    isKeyError() {
+        return this.form.get('key')?.hasError('uniqueKey')
+            || this.form.get('key')?.hasError('pattern');
+    }
+    getKeyErrorMessage() {
+        if (this.form.get('key')?.hasError('uniqueKey'))
+            return 'dossierManagement.tabManagement.addModal.uniqueKeyError';
+        if (this.form.get('key')?.hasError('pattern'))
+            return 'dossierManagement.tabManagement.addModal.invalidKeyError';
+        return '';
+    }
     onSearch() {
         if (this._searchActive) {
             return;
@@ -3021,11 +3052,11 @@ class TabFormComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabFormComponent, deps: [{ token: i2$1.ConfigService }, { token: TabService }, { token: i2$2.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TabFormComponent, selector: "valtimo-tab-form", inputs: { tabType: "tabType" }, 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\">\n  <cds-label>\n    {{ 'dossierManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label\n    [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n    [invalidText]=\"'dossierManagement.tabManagement.addModal.uniqueKeyError' | translate\"\n  >\n    {{ 'dossierManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    *ngIf=\"tabType !== 'widgets'\"\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'dossierManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list></cds-dropdown-list>\n  </cds-combo-box>\n\n  @if (enableCaseWidgets$ | async) {\n    <cds-toggle\n      [label]=\"'dossierManagement.tabManagement.addModal.visibleTitle' | translate\"\n      [onText]=\"'dossierManagement.tabManagement.addModal.visible' | translate\"\n      [offText]=\"'dossierManagement.tabManagement.addModal.invisible' | translate\"\n      [checked]=\"showTasks?.value\"\n      (checkedChange)=\"toggleCheckedChange($event)\"\n      [disabled]=\"disableTaskListVisibleToggle()\"\n    ></cds-toggle>\n  }\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$3.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$3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TabFormComponent, selector: "valtimo-tab-form", inputs: { tabType: "tabType" }, 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\">\n  <cds-label>\n    {{ 'dossierManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label\n    [invalid]=\"!!isKeyError()\"\n    [invalidText]=\"getKeyErrorMessage() | translate\"\n  >\n    {{ 'dossierManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      pattern=\"[a-zA-Z0-9\\-]+\"\n      [invalid]=\"!!isKeyError()\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    *ngIf=\"tabType !== 'widgets'\"\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'dossierManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list></cds-dropdown-list>\n  </cds-combo-box>\n\n  <cds-toggle\n    [label]=\"'dossierManagement.tabManagement.addModal.visibleTitle' | translate\"\n    [onText]=\"'dossierManagement.tabManagement.addModal.visible' | translate\"\n    [offText]=\"'dossierManagement.tabManagement.addModal.invisible' | translate\"\n    [checked]=\"showTasks?.value\"\n    (checkedChange)=\"toggleCheckedChange($event)\"\n    [disabled]=\"disableTaskListVisibleToggle()\"\n  ></cds-toggle>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i2$3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-tab-form', changeDetection: ChangeDetectionStrategy.OnPush, 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\">\n  <cds-label>\n    {{ 'dossierManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label\n    [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n    [invalidText]=\"'dossierManagement.tabManagement.addModal.uniqueKeyError' | translate\"\n  >\n    {{ 'dossierManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      [invalid]=\"!!this.form.get('key').errors?.uniqueKey\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    *ngIf=\"tabType !== 'widgets'\"\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'dossierManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list></cds-dropdown-list>\n  </cds-combo-box>\n\n  @if (enableCaseWidgets$ | async) {\n    <cds-toggle\n      [label]=\"'dossierManagement.tabManagement.addModal.visibleTitle' | translate\"\n      [onText]=\"'dossierManagement.tabManagement.addModal.visible' | translate\"\n      [offText]=\"'dossierManagement.tabManagement.addModal.invisible' | translate\"\n      [checked]=\"showTasks?.value\"\n      (checkedChange)=\"toggleCheckedChange($event)\"\n      [disabled]=\"disableTaskListVisibleToggle()\"\n    ></cds-toggle>\n  }\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\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"] }]
+            args: [{ selector: 'valtimo-tab-form', changeDetection: ChangeDetectionStrategy.OnPush, 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<form *ngIf=\"form\" [formGroup]=\"form\" class=\"valtimo-tab-form-modal\">\n  <cds-label>\n    {{ 'dossierManagement.tabManagement.addModal.tabNameLabel' | translate }}\n\n    <input cdsText formControlName=\"name\" [attr.modal-primary-focus]=\"true\" />\n  </cds-label>\n\n  <cds-label\n    [invalid]=\"!!isKeyError()\"\n    [invalidText]=\"getKeyErrorMessage() | translate\"\n  >\n    {{ 'dossierManagement.tabManagement.addModal.tabKeyLabel' | translate }}\n\n    <input\n      cdsText\n      formControlName=\"key\"\n      pattern=\"[a-zA-Z0-9\\-]+\"\n      [invalid]=\"!!isKeyError()\"\n      [attr.modal-primary-focus]=\"true\"\n    />\n  </cds-label>\n\n  <cds-combo-box\n    *ngIf=\"tabType !== 'widgets'\"\n    [dropUp]=\"false\"\n    formControlName=\"contentKey\"\n    [items]=\"listItems$ | async\"\n    itemValueKey=\"contentKey\"\n    [label]=\"'dossierManagement.tabManagement.contentLabels.' + tabType | translate\"\n    (search)=\"onSearch($event)\"\n    (selected)=\"onSelected($event)\"\n  >\n    <cds-dropdown-list></cds-dropdown-list>\n  </cds-combo-box>\n\n  <cds-toggle\n    [label]=\"'dossierManagement.tabManagement.addModal.visibleTitle' | translate\"\n    [onText]=\"'dossierManagement.tabManagement.addModal.visible' | translate\"\n    [offText]=\"'dossierManagement.tabManagement.addModal.invisible' | translate\"\n    [checked]=\"showTasks?.value\"\n    (checkedChange)=\"toggleCheckedChange($event)\"\n    [disabled]=\"disableTaskListVisibleToggle()\"\n  ></cds-toggle>\n</form>\n", styles: ["::ng-deep .valtimo-tab-form-modal{display:flex;flex-direction:column;gap:32px}::ng-deep .valtimo-tab-form-modal .cds--list-box__field{background-color:#fff}::ng-deep .valtimo-tab-form-modal .cds--modal-container,::ng-deep .valtimo-tab-form-modal .cds--modal-content{overflow:unset}\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.ConfigService }, { type: TabService }, { type: i2$2.FormGroupDirective }], propDecorators: { tabType: [{
                 type: Input
             }] } });
@@ -3079,16 +3110,12 @@ class DossierManagementAddTabModalComponent {
                 disabled: disabled.custom,
                 disabledTooltipTranslationKey: 'dossierManagement.tabManagement.addModal.customComponentDisabled',
             },
-            ...(featureToggles?.enableCaseWidgets
-                ? [
-                    {
-                        icon: 'table--built',
-                        title: 'dossierManagement.tabManagement.addModal.widgetsComponent',
-                        type: ApiTabType.WIDGETS,
-                        disabled: disabled.widgets,
-                    },
-                ]
-                : []),
+            {
+                icon: 'table--built',
+                title: 'dossierManagement.tabManagement.addModal.widgetsComponent',
+                type: ApiTabType.WIDGETS,
+                disabled: disabled.widgets,
+            },
         ]));
         this.form = this.fb.group({
             name: this.fb.control(null),
@@ -3129,7 +3156,7 @@ class DossierManagementAddTabModalComponent {
             : { uniqueKey: { value: control.value } };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementAddTabModalComponent, deps: [{ token: i2$2.FormBuilder }, { token: i2$3.IconService }, { token: TabService }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementAddTabModalComponent, selector: "valtimo-dossier-management-add-tab-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 valtimoCdsModal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('dossierManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (documentDefinitionName | titlecase)})\n          : ('dossierManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'dossierManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <cds-tooltip\n          *ngFor=\"let tabType of tabTypes\"\n          [caret]=\"true\"\n          enterDelayMs=\"0\"\n          leaveDelayMs=\"0\"\n          [description]=\"tabType.disabledTooltipTranslationKey | translate\"\n          [disabled]=\"!tabType.disabled\"\n          align=\"bottom\"\n        >\n          <button\n            cdsButton=\"secondary\"\n            [disabled]=\"tabType.disabled\"\n            (click)=\"onTabTypeSelect(tabType.type)\"\n          >\n            {{ tabType.title | translate }}\n\n            <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n          </button>\n        </cds-tooltip>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}.cds--popover--open{z-index:999999!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: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$3.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description"] }, { kind: "component", type: TabFormComponent, selector: "valtimo-tab-form", inputs: ["tabType"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementAddTabModalComponent, selector: "valtimo-dossier-management-add-tab-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 valtimoCdsModal *ngIf=\"{selectedTabType: selectedTabType$ | async} as obs\" [open]=\"open\">\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        !obs.selectedTabType\n          ? ('dossierManagement.tabManagement.addModal.title'\n            | translate: {documentDefinitionName: (documentDefinitionName | titlecase)})\n          : ('dossierManagement.tabManagement.titles.' + obs.selectedTabType | translate)\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section [formGroup]=\"form\" cdsModalContent class=\"valtimo-add-tab-modal__content\">\n    <valtimo-tab-form\n      *ngIf=\"obs.selectedTabType; else tabTypeSelection\"\n      [tabType]=\"obs.selectedTabType\"\n    ></valtimo-tab-form>\n\n    <ng-template #tabTypeSelection>\n      <span> {{ 'dossierManagement.tabManagement.addModal.description' | translate }} </span>\n\n      <div *ngIf=\"tabTypes$ | async as tabTypes\" class=\"valtimo-add-tab-modal__types\">\n        <cds-tooltip\n          *ngFor=\"let tabType of tabTypes\"\n          [caret]=\"true\"\n          enterDelayMs=\"0\"\n          leaveDelayMs=\"0\"\n          [description]=\"tabType.disabledTooltipTranslationKey | translate\"\n          [disabled]=\"!tabType.disabled\"\n          align=\"bottom\"\n        >\n          <button\n            cdsButton=\"secondary\"\n            [disabled]=\"tabType.disabled\"\n            (click)=\"onTabTypeSelect(tabType.type)\"\n          >\n            {{ tabType.title | translate }}\n\n            <svg [cdsIcon]=\"tabType.icon\" size=\"16\" class=\"cds--btn__icon\"></svg>\n          </button>\n        </cds-tooltip>\n      </div>\n    </ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-add-tab-modal__footer\">\n    <button class=\"valtimo-add-tab-modal__cancel\" cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <div class=\"valtimo-add-tab-modal__actions\" *ngIf=\"obs.selectedTabType\">\n      <button cdsButton=\"secondary\" (click)=\"backClick()\">\n        {{ 'interface.back' | translate }}\n      </button>\n\n      <button cdsButton=\"primary\" [disabled]=\"form.invalid\" (click)=\"addTab(obs.selectedTabType)\">\n        {{ 'dossierManagement.tabManagement.addModal.addTab' | translate }}\n      </button>\n    </div>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-add-tab-modal__footer .cds--modal-footer{justify-content:unset;display:grid;grid-template-columns:1fr 1fr 2fr;grid-template-areas:\"cancel . actions\"}.valtimo-add-tab-modal__cancel{grid-area:cancel;width:100%}.valtimo-add-tab-modal__actions{grid-area:actions;display:flex}.valtimo-add-tab-modal__types{display:grid;grid-template:1fr/repeat(3,1fr);gap:16px}.valtimo-add-tab-modal__types button{width:100%}.valtimo-add-tab-modal__content{display:flex;flex-direction:column;gap:24px}.cds--popover--open{z-index:999999!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: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$3.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "component", type: TabFormComponent, selector: "valtimo-tab-form", inputs: ["tabType"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementAddTabModalComponent, decorators: [{
             type: Component,
@@ -3267,7 +3294,6 @@ class DossierManagementTabsComponent {
         }));
         this.tab$ = new BehaviorSubject(null);
         this.dragAndDropDisabled = signal(false);
-        this.enableCaseWidgets = this.configService.getFeatureToggle('enableCaseWidgets');
     }
     ngAfterViewInit() {
         this.iconService.registerAll([ArrowDown16, ArrowUp16]);
@@ -3294,15 +3320,11 @@ class DossierManagementTabsComponent {
                 key: '',
                 label: 'dossierManagement.tabManagement.columns.content',
             },
-            ...(this.enableCaseWidgets
-                ? [
-                    {
-                        viewType: ViewType.BOOLEAN,
-                        key: 'showTasks',
-                        label: 'dossierManagement.tabManagement.columns.showTasks',
-                    },
-                ]
-                : []),
+            {
+                viewType: ViewType.BOOLEAN,
+                key: 'showTasks',
+                label: 'dossierManagement.tabManagement.columns.showTasks',
+            },
         ]);
         this.cd.detectChanges();
     }
@@ -3355,16 +3377,12 @@ class DossierManagementTabsComponent {
         this.tabManagementService.dispatchAction(this.tabManagementService.editTabsOrder(reorderedItems));
     }
     addTab(tab) {
-        if (!this.enableCaseWidgets)
-            delete tab.showTasks;
         this.tabManagementService.dispatchAction(this.tabManagementService.addTab(tab));
     }
     deleteTab(tabKey) {
         this.tabManagementService.dispatchAction(this.tabManagementService.deleteTab(tabKey));
     }
     editTab(tab) {
-        if (!this.enableCaseWidgets)
-            delete tab.showTasks;
         this.tabManagementService.dispatchAction(this.tabManagementService.editTab(tab, tab.key));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$3.IconService }, { token: TabManagementService }, { token: TabService }, { token: i5.TranslateService }, { token: i2.Router }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3737,7 +3755,7 @@ class DossierManagementStatusModalComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementStatusModalComponent, deps: [{ token: i2$2.FormBuilder }, { token: i2$3.IconService }, { token: i1.CaseStatusService }, { token: i5.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementStatusModalComponent, selector: "valtimo-dossier-management-status-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          [readOnly]=\"!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          [id]=\"'status-color-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}.edit-key-input input:read-only{color:var(--cds-text-disabled)}::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: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.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$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i2$3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementStatusModalComponent, selector: "valtimo-dossier-management-status-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          [readOnly]=\"!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          [id]=\"'status-color-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}.edit-key-input input:read-only{color:var(--cds-text-disabled)}::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: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i2$3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementStatusModalComponent, decorators: [{
             type: Component,
@@ -4011,7 +4029,7 @@ class DossierManagementDetailContainerComponent extends PendingChangesComponent
         this._documentDefinitionTab?.onCanDeactivate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementDetailContainerComponent, deps: [{ token: DossierDetailService }, { token: i2.ActivatedRoute }, { token: i2$1.ConfigService }, { token: TabService }, { token: i1$1.PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementDetailContainerComponent, selector: "valtimo-dossier-management-detail-container", providers: [DossierDetailService], viewQueries: [{ propertyName: "_contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_documentDefinitionTab", first: true, predicate: DossierManagementDocumentDefinitionComponent, 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<div\n  *ngIf=\"{\n    currentTab: currentTab$ | async,\n    injectedTabs: injectedCaseManagementTabs$ | async\n  } as obs\"\n  class=\"dossier-management-detail-container\"\n>\n  <valtimo-documenten-api></valtimo-documenten-api>\n  <cds-tabs class=\"dossier-management-tabs\" type=\"contained\">\n    <cds-tab\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.DOCUMENT\"\n      [heading]=\"'dossierManagement.tabs.document' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.DOCUMENT)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"no-padding-left-right main-content\"\n      [active]=\"obs.currentTab === TabEnum.CASE\"\n      [heading]=\"'dossierManagement.tabs.cases' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.CASE)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"no-padding-left-right main-content\"\n      [active]=\"obs.currentTab === TabEnum.PROCESSES\"\n      [heading]=\"'dossierManagement.tabs.processes' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.PROCESSES)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"main-content no-padding-left-right no-padding-bottom\"\n      [active]=\"obs.currentTab === TabEnum.SEARCH\"\n      [heading]=\"'dossierManagement.tabs.searchFields' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.SEARCH)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"caseListColumn\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.LIST\"\n      [heading]=\"'dossierManagement.tabs.listColumns' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.LIST)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"tabManagementEnabled\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.TABS\"\n      [heading]=\"'dossierManagement.tabs.tabManagement' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.TABS)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"{active: obs.currentTab === TabEnum.STATUSES} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.statuses' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.STATUSES)\"\n    >\n      <valtimo-dossier-management-statuses\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-statuses>\n    </cds-tab>\n\n    @for (injectedTab of obs.injectedTabs; track injectedTab.translationKey) {\n      <cds-tab\n        class=\"no-padding-left-right no-padding-top-bottom\"\n        [active]=\"obs.currentTab === injectedTab.translationKey\"\n        [heading]=\"injectedTab.translationKey | translate\"\n        (selected)=\"displayBodyComponent(injectedTab.translationKey, true)\"\n      >\n      </cds-tab>\n    }\n  </cds-tabs>\n\n  <div class=\"dossier-management-detail-container__content\">\n    <ng-template #contentContainer></ng-template>\n\n    <valtimo-dossier-management-document-definition\n      *ngIf=\"\n        (obs.currentTab === TabEnum.DOCUMENT && !pendingChanges) || pendingTab === TabEnum.DOCUMENT\n      \"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      (pendingChangesUpdate)=\"onPendingChangesUpdate($event)\"\n      (cancelRedirect)=\"onCancelRedirectEvent()\"\n      (confirmRedirect)=\"onConfirmRedirectEvent()\"\n    ></valtimo-dossier-management-document-definition>\n\n    <valtimo-dossier-management-detail\n      *ngIf=\"(obs.currentTab === TabEnum.CASE && !pendingChanges) || pendingTab === TabEnum.CASE\"\n    ></valtimo-dossier-management-detail>\n\n    <valtimo-dossier-management-processes\n      *ngIf=\"\n        (obs.currentTab === TabEnum.PROCESSES && !pendingChanges) ||\n        pendingTab === TabEnum.PROCESSES\n      \"\n    ></valtimo-dossier-management-processes>\n\n    <valtimo-dossier-management-search-fields\n      *ngIf=\"\n        (obs.currentTab === TabEnum.SEARCH && !pendingChanges) || pendingTab === TabEnum.SEARCH\n      \"\n    ></valtimo-dossier-management-search-fields>\n\n    <valtimo-dossier-management-list-columns\n      *ngIf=\"(obs.currentTab === TabEnum.LIST && !pendingChanges) || pendingTab === TabEnum.LIST\"\n    ></valtimo-dossier-management-list-columns>\n\n    <valtimo-dossier-management-tabs\n      *ngIf=\"(obs.currentTab === TabEnum.TABS && !pendingChanges) || pendingTab === TabEnum.TABS\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n    ></valtimo-dossier-management-tabs>\n  </div>\n</div>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <valtimo-dossier-management-detail-container-actions\n      [documentDefinitionTitle]=\"documentDefinitionTitle$ | async\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      (versionSet)=\"onVersionSet($event)\"\n    ></valtimo-dossier-management-detail-container-actions>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .dossier-management-tabs .cds--tab-content{background-color:var(--cds-layer)}::ng-deep .dossier-management-tabs .cds--tab-content:focus{outline:none}::ng-deep .dossier-management-tabs .no-padding-left-right .cds--tab-content{padding-left:0;padding-right:0}::ng-deep .dossier-management-tabs .no-padding-top-bottom .cds--tab-content{padding-top:0;padding-bottom:0}::ng-deep .dossier-management-tabs .no-padding-bottom .cds--tab-content{padding-bottom:0}.tab-container{min-height:300px}.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid rgba(0,0,0,.125)}.dossier-title{margin-top:0;margin-bottom:7px}.dossier-management-detail-container{display:flex;flex-direction:column;width:100%}.dossier-management-detail-container__content{background:var(--cds-layer)}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i2$3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail" }, { kind: "component", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", outputs: ["searchField"] }, { kind: "component", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns" }, { kind: "component", type: DossierManagementTabsComponent, selector: "valtimo-dossier-management-tabs", inputs: ["documentDefinitionName"] }, { kind: "component", type: DossierManagementDetailContainerActionsComponent, selector: "valtimo-dossier-management-detail-container-actions", inputs: ["documentDefinitionTitle", "documentDefinitionName"], outputs: ["versionSet"] }, { kind: "component", type: DossierManagementDocumentDefinitionComponent, selector: "valtimo-dossier-management-document-definition", inputs: ["documentDefinitionName"], outputs: ["cancelRedirect", "confirmRedirect", "pendingChangesUpdate"] }, { kind: "component", type: DossierManagementProcessesComponent, selector: "valtimo-dossier-management-processes" }, { kind: "component", type: DossierManagementStatusesComponent, selector: "valtimo-dossier-management-statuses" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementDetailContainerComponent, selector: "valtimo-dossier-management-detail-container", providers: [DossierDetailService], viewQueries: [{ propertyName: "_contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_documentDefinitionTab", first: true, predicate: DossierManagementDocumentDefinitionComponent, 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<div\n  *ngIf=\"{\n    currentTab: currentTab$ | async,\n    injectedTabs: injectedCaseManagementTabs$ | async\n  } as obs\"\n  class=\"dossier-management-detail-container\"\n>\n  <valtimo-documenten-api></valtimo-documenten-api>\n  <cds-tabs class=\"dossier-management-tabs\" type=\"contained\">\n    <cds-tab\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.DOCUMENT\"\n      [heading]=\"'dossierManagement.tabs.document' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.DOCUMENT)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"no-padding-left-right main-content\"\n      [active]=\"obs.currentTab === TabEnum.CASE\"\n      [heading]=\"'dossierManagement.tabs.cases' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.CASE)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"no-padding-left-right main-content\"\n      [active]=\"obs.currentTab === TabEnum.PROCESSES\"\n      [heading]=\"'dossierManagement.tabs.processes' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.PROCESSES)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      class=\"main-content no-padding-left-right no-padding-bottom\"\n      [active]=\"obs.currentTab === TabEnum.SEARCH\"\n      [heading]=\"'dossierManagement.tabs.searchFields' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.SEARCH)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"caseListColumn\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.LIST\"\n      [heading]=\"'dossierManagement.tabs.listColumns' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.LIST)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"tabManagementEnabled\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"obs.currentTab === TabEnum.TABS\"\n      [heading]=\"'dossierManagement.tabs.tabManagement' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.TABS)\"\n    >\n    </cds-tab>\n\n    <cds-tab\n      *ngIf=\"{active: obs.currentTab === TabEnum.STATUSES} as vars\"\n      class=\"no-padding-left-right no-padding-top-bottom\"\n      [active]=\"vars.active\"\n      [heading]=\"'dossierManagement.tabs.statuses' | translate\"\n      (selected)=\"displayBodyComponent(TabEnum.STATUSES)\"\n    >\n      <valtimo-dossier-management-statuses\n        *ngIf=\"vars.active\"\n      ></valtimo-dossier-management-statuses>\n    </cds-tab>\n\n    @for (injectedTab of obs.injectedTabs; track injectedTab.translationKey) {\n      <cds-tab\n        class=\"no-padding-left-right no-padding-top-bottom\"\n        [active]=\"obs.currentTab === injectedTab.translationKey\"\n        [heading]=\"injectedTab.translationKey | translate\"\n        (selected)=\"displayBodyComponent(injectedTab.translationKey, true)\"\n      >\n      </cds-tab>\n    }\n  </cds-tabs>\n\n  <div class=\"dossier-management-detail-container__content\">\n    <ng-template #contentContainer></ng-template>\n\n    <valtimo-dossier-management-document-definition\n      *ngIf=\"\n        (obs.currentTab === TabEnum.DOCUMENT && !pendingChanges) || pendingTab === TabEnum.DOCUMENT\n      \"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      (pendingChangesUpdate)=\"onPendingChangesUpdate($event)\"\n      (cancelRedirect)=\"onCancelRedirectEvent()\"\n      (confirmRedirect)=\"onConfirmRedirectEvent()\"\n    ></valtimo-dossier-management-document-definition>\n\n    <valtimo-dossier-management-detail\n      *ngIf=\"(obs.currentTab === TabEnum.CASE && !pendingChanges) || pendingTab === TabEnum.CASE\"\n    ></valtimo-dossier-management-detail>\n\n    <valtimo-dossier-management-processes\n      *ngIf=\"\n        (obs.currentTab === TabEnum.PROCESSES && !pendingChanges) ||\n        pendingTab === TabEnum.PROCESSES\n      \"\n    ></valtimo-dossier-management-processes>\n\n    <valtimo-dossier-management-search-fields\n      *ngIf=\"\n        (obs.currentTab === TabEnum.SEARCH && !pendingChanges) || pendingTab === TabEnum.SEARCH\n      \"\n    ></valtimo-dossier-management-search-fields>\n\n    <valtimo-dossier-management-list-columns\n      *ngIf=\"(obs.currentTab === TabEnum.LIST && !pendingChanges) || pendingTab === TabEnum.LIST\"\n    ></valtimo-dossier-management-list-columns>\n\n    <valtimo-dossier-management-tabs\n      *ngIf=\"(obs.currentTab === TabEnum.TABS && !pendingChanges) || pendingTab === TabEnum.TABS\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n    ></valtimo-dossier-management-tabs>\n  </div>\n</div>\n\n<ng-container renderInPageHeader [fullWidth]=\"true\">\n  <ng-template>\n    <valtimo-dossier-management-detail-container-actions\n      [documentDefinitionTitle]=\"documentDefinitionTitle$ | async\"\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      (versionSet)=\"onVersionSet($event)\"\n    ></valtimo-dossier-management-detail-container-actions>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .dossier-management-tabs .cds--tab-content{background-color:var(--cds-layer)}::ng-deep .dossier-management-tabs .cds--tab-content:focus{outline:none}::ng-deep .dossier-management-tabs .no-padding-left-right .cds--tab-content{padding-left:0;padding-right:0}::ng-deep .dossier-management-tabs .no-padding-top-bottom .cds--tab-content{padding-top:0;padding-bottom:0}::ng-deep .dossier-management-tabs .no-padding-bottom .cds--tab-content{padding-bottom:0}.tab-container{min-height:300px}.dossier-header{height:80px;padding-top:21px;padding-left:18px;padding-right:18px;border-bottom:1px solid rgba(0,0,0,.125)}.dossier-title{margin-top:0;margin-bottom:7px}.dossier-management-detail-container{display:flex;flex-direction:column;width:100%}.dossier-management-detail-container__content{background:var(--cds-layer)}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "component", type: i2$3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: DossierManagementDetailComponent, selector: "valtimo-dossier-management-detail" }, { kind: "component", type: DossierManagementSearchFieldsComponent, selector: "valtimo-dossier-management-search-fields", outputs: ["searchField"] }, { kind: "component", type: DossierManagementListColumnsComponent, selector: "valtimo-dossier-management-list-columns" }, { kind: "component", type: DossierManagementTabsComponent, selector: "valtimo-dossier-management-tabs", inputs: ["documentDefinitionName"] }, { kind: "component", type: DossierManagementDetailContainerActionsComponent, selector: "valtimo-dossier-management-detail-container-actions", inputs: ["documentDefinitionTitle", "documentDefinitionName"], outputs: ["versionSet"] }, { kind: "component", type: DossierManagementDocumentDefinitionComponent, selector: "valtimo-dossier-management-document-definition", inputs: ["documentDefinitionName"], outputs: ["cancelRedirect", "confirmRedirect", "pendingChangesUpdate"] }, { kind: "component", type: DossierManagementProcessesComponent, selector: "valtimo-dossier-management-processes" }, { kind: "component", type: DossierManagementStatusesComponent, selector: "valtimo-dossier-management-statuses" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementDetailContainerComponent, decorators: [{
             type: Component,
@@ -4419,7 +4437,7 @@ class DossierManagementCreateComponent {
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementCreateComponent, deps: [{ token: i1.DocumentService }, { token: i2$2.FormBuilder }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementCreateComponent, selector: "valtimo-dossier-management-create", inputs: { open: "open" }, 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\n  *ngIf=\"{\n    editDisabled: editDisabled$ | async,\n    idError: idError$ | async,\n    editActive: editActive$ | async\n  } as obs\"\n  [open]=\"open\"\n  showFooter=\"true\"\n  valtimoCdsModal\n  class=\"valtimo-definition-create\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'dossierManagement.createDefinition.modalTitle' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form [formGroup]=\"formGroup\" cdsModalContent class=\"valtimo-definition-create__content\">\n    <cds-label>\n      {{ 'dossierManagement.createDefinition.title' | translate }}\n\n      <cds-tooltip\n        [caret]=\"true\"\n        [description]=\"'dossierManagement.createDefinition.titleTooltip' | translate\"\n      >\n        <svg class=\"tooltip-trigger\" cdsIcon=\"information\" size=\"16\"></svg>\n      </cds-tooltip>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{ 'dossierManagement.createDefinition.titlePlaceholder' | translate }}\"\n        [attr.modal-primary-focus]=\"true\"\n        (focusout)=\"onFocusOut()\"\n      />\n    </cds-label>\n\n    <cds-label [invalid]=\"!!obs.idError\" [invalidText]=\"obs.idError | translate\">\n      {{ 'dossierManagement.createDefinition.name' | translate }}\n\n      <cds-tooltip\n        [caret]=\"true\"\n        [description]=\"'dossierManagement.createDefinition.nameTooltip' | translate\"\n      >\n        <svg class=\"tooltip-trigger\" cdsIcon=\"information\" size=\"16\"></svg>\n      </cds-tooltip>\n\n      <div class=\"valtimo-definition-create__name\">\n        <input\n          cdsText\n          formControlName=\"name\"\n          [invalid]=\"!!obs.idError\"\n          [placeholder]=\"'dossierManagement.createDefinition.namePlaceholder' | translate\"\n          [attr.modal-primary-focus]=\"true\"\n        />\n\n        <button\n          *ngIf=\"!obs.editActive\"\n          cdsButton=\"secondary\"\n          [disabled]=\"obs.editDisabled\"\n          [iconOnly]=\"true\"\n          size=\"md\"\n          (click)=\"enableEdit()\"\n        >\n          <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    </cds-label>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"onCloseModal(true)\">\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-create__content{display:flex;flex-direction:column;gap:16px}.valtimo-definition-create__name{width:100%;display:flex;gap:8px}:host ::ng-deep .cds--label{display:flex;align-items:center;gap:12px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$3.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DossierManagementCreateComponent, selector: "valtimo-dossier-management-create", inputs: { open: "open" }, 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\n  *ngIf=\"{\n    editDisabled: editDisabled$ | async,\n    idError: idError$ | async,\n    editActive: editActive$ | async\n  } as obs\"\n  [open]=\"open\"\n  showFooter=\"true\"\n  valtimoCdsModal\n  class=\"valtimo-definition-create\"\n  (close)=\"onCloseModal()\"\n>\n  <cds-modal-header showCloseButton=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'dossierManagement.createDefinition.modalTitle' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form [formGroup]=\"formGroup\" cdsModalContent class=\"valtimo-definition-create__content\">\n    <cds-label>\n      {{ 'dossierManagement.createDefinition.title' | translate }}\n\n      <cds-tooltip\n        [caret]=\"true\"\n        [description]=\"'dossierManagement.createDefinition.titleTooltip' | translate\"\n      >\n        <svg class=\"tooltip-trigger\" cdsIcon=\"information\" size=\"16\"></svg>\n      </cds-tooltip>\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{ 'dossierManagement.createDefinition.titlePlaceholder' | translate }}\"\n        [attr.modal-primary-focus]=\"true\"\n        (focusout)=\"onFocusOut()\"\n      />\n    </cds-label>\n\n    <cds-label [invalid]=\"!!obs.idError\" [invalidText]=\"obs.idError | translate\">\n      {{ 'dossierManagement.createDefinition.name' | translate }}\n\n      <cds-tooltip\n        [caret]=\"true\"\n        [description]=\"'dossierManagement.createDefinition.nameTooltip' | translate\"\n      >\n        <svg class=\"tooltip-trigger\" cdsIcon=\"information\" size=\"16\"></svg>\n      </cds-tooltip>\n\n      <div class=\"valtimo-definition-create__name\">\n        <input\n          cdsText\n          formControlName=\"name\"\n          [invalid]=\"!!obs.idError\"\n          [placeholder]=\"'dossierManagement.createDefinition.namePlaceholder' | translate\"\n          [attr.modal-primary-focus]=\"true\"\n        />\n\n        <button\n          *ngIf=\"!obs.editActive\"\n          cdsButton=\"secondary\"\n          [disabled]=\"obs.editDisabled\"\n          [iconOnly]=\"true\"\n          size=\"md\"\n          (click)=\"enableEdit()\"\n        >\n          <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n        </button>\n      </div>\n    </cds-label>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"onCloseModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"formGroup.invalid\" (click)=\"onCloseModal(true)\">\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-definition-create__content{display:flex;flex-direction:column;gap:16px}.valtimo-definition-create__name{width:100%;display:flex;gap:8px}:host ::ng-deep .cds--label{display:flex;align-items:center;gap:12px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "component", type: i2$3.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementCreateComponent, decorators: [{
             type: Component,
@@ -4729,11 +4747,11 @@ class WidgetWizardTypeStepComponent {
         this.widgetWizardService.selectedWidget.set(event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetWizardTypeStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: WidgetWizardTypeStepComponent, isStandalone: true, selector: "valtimo-widget-wizard-type-step", 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-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  @for (widgetType of availableWidgets; track widgetType.titleKey) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile\"\n      [value]=\"widgetType\"\n      [selected]=\"widgetType.type === selectedWidget()?.type\"\n    >\n      <h3>{{ widgetType.titleKey | translate }}</h3>\n\n      <span>{{ widgetType.descriptionKey | translate }}</span>\n\n      <img [src]=\"widgetType.illustrationUrl\" [alt]=\"widgetType.titleKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i2$3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i2$3.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: WidgetWizardTypeStepComponent, isStandalone: true, selector: "valtimo-widget-wizard-type-step", 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-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  @for (widgetType of availableWidgets; track widgetType.titleKey) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile\"\n      [value]=\"widgetType\"\n      [selected]=\"widgetType.type === selectedWidget()?.type\"\n    >\n      <h3 class=\"valtimo-widget-wizard-step__tile-title\">{{ widgetType.titleKey | translate }}</h3>\n\n      <span>{{ widgetType.descriptionKey | translate }}</span>\n\n      <img [src]=\"widgetType.illustrationUrl\" [alt]=\"widgetType.titleKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i2$3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i2$3.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetWizardTypeStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-widget-wizard-type-step', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], 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-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  @for (widgetType of availableWidgets; track widgetType.titleKey) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile\"\n      [value]=\"widgetType\"\n      [selected]=\"widgetType.type === selectedWidget()?.type\"\n    >\n      <h3>{{ widgetType.titleKey | translate }}</h3>\n\n      <span>{{ widgetType.descriptionKey | translate }}</span>\n\n      <img [src]=\"widgetType.illustrationUrl\" [alt]=\"widgetType.titleKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n" }]
+            args: [{ selector: 'valtimo-widget-wizard-type-step', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], 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-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  @for (widgetType of availableWidgets; track widgetType.titleKey) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile\"\n      [value]=\"widgetType\"\n      [selected]=\"widgetType.type === selectedWidget()?.type\"\n    >\n      <h3 class=\"valtimo-widget-wizard-step__tile-title\">{{ widgetType.titleKey | translate }}</h3>\n\n      <span>{{ widgetType.descriptionKey | translate }}</span>\n\n      <img [src]=\"widgetType.illustrationUrl\" [alt]=\"widgetType.titleKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n" }]
         }], ctorParameters: () => [{ type: WidgetWizardService }] });
 
 /*
@@ -4763,11 +4781,11 @@ class WidgetWizardWidthStepComponent {
         this.widgetWizardService.widgetWidth.set(event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetWizardWidthStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WidgetWizardWidthStepComponent, isStandalone: true, selector: "valtimo-widget-wizard-width-step", 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-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"1\"\n    [selected]=\"widgetWidth() === 1\"\n    [disabled]=\"fieldsColumnsLength() > 1\"\n  >\n    <h3>{{ 'widgetTabManagement.width.quarter.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.quarter.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/quarter.svg\"\n      [alt]=\"'widgetTabManagement.width.quarter.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"2\"\n    [selected]=\"widgetWidth() === 2\"\n    [disabled]=\"fieldsColumnsLength() > 2\"\n  >\n    <h3>{{ 'widgetTabManagement.width.half.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.half.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/half.svg\"\n      [alt]=\"'widgetTabManagement.width.half.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"3\"\n    [selected]=\"widgetWidth() === 3\"\n    [disabled]=\"fieldsColumnsLength() > 3\"\n  >\n    <h3>{{ 'widgetTabManagement.width.threeQuarters.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.threeQuarters.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/three-quarters.svg\"\n      [alt]=\"'widgetTabManagement.width.threeQuarters.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"4\"\n    [selected]=\"widgetWidth() === 4\"\n  >\n    <h3>{{ 'widgetTabManagement.width.fullWidth.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.fullWidth.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/full-width.svg\"\n      [alt]=\"'widgetTabManagement.width.fullWidth.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i2$3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i2$3.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WidgetWizardWidthStepComponent, isStandalone: true, selector: "valtimo-widget-wizard-width-step", 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-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"1\"\n    [selected]=\"widgetWidth() === 1\"\n    [disabled]=\"fieldsColumnsLength() > 1\"\n  >\n    <h3>{{ 'widgetTabManagement.width.small.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.small.subtitle' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/quarter.svg\"\n      [alt]=\"'widgetTabManagement.width.small.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"2\"\n    [selected]=\"widgetWidth() === 2\"\n    [disabled]=\"fieldsColumnsLength() > 2\"\n  >\n    <h3>{{ 'widgetTabManagement.width.medium.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.medium.subtitle' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/half.svg\"\n      [alt]=\"'widgetTabManagement.width.medium.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"3\"\n    [selected]=\"widgetWidth() === 3\"\n    [disabled]=\"fieldsColumnsLength() > 3\"\n  >\n    <h3>{{ 'widgetTabManagement.width.large.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.large.subtitle' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/three-quarters.svg\"\n      [alt]=\"'widgetTabManagement.width.large.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"4\"\n    [selected]=\"widgetWidth() === 4\"\n  >\n    <h3>{{ 'widgetTabManagement.width.xtraLarge.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.xtraLarge.subtitle' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/full-width.svg\"\n      [alt]=\"'widgetTabManagement.width.xtraLarge.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i2$3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i2$3.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetWizardWidthStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-widget-wizard-width-step', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], 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-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"1\"\n    [selected]=\"widgetWidth() === 1\"\n    [disabled]=\"fieldsColumnsLength() > 1\"\n  >\n    <h3>{{ 'widgetTabManagement.width.quarter.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.quarter.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/quarter.svg\"\n      [alt]=\"'widgetTabManagement.width.quarter.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"2\"\n    [selected]=\"widgetWidth() === 2\"\n    [disabled]=\"fieldsColumnsLength() > 2\"\n  >\n    <h3>{{ 'widgetTabManagement.width.half.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.half.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/half.svg\"\n      [alt]=\"'widgetTabManagement.width.half.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"3\"\n    [selected]=\"widgetWidth() === 3\"\n    [disabled]=\"fieldsColumnsLength() > 3\"\n  >\n    <h3>{{ 'widgetTabManagement.width.threeQuarters.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.threeQuarters.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/three-quarters.svg\"\n      [alt]=\"'widgetTabManagement.width.threeQuarters.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"4\"\n    [selected]=\"widgetWidth() === 4\"\n  >\n    <h3>{{ 'widgetTabManagement.width.fullWidth.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.fullWidth.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/full-width.svg\"\n      [alt]=\"'widgetTabManagement.width.fullWidth.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n" }]
+            args: [{ selector: 'valtimo-widget-wizard-width-step', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], 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-tile-group\n  [multiple]=\"false\"\n  (selected)=\"onSelectedEvent($event)\"\n  class=\"valtimo-widget-wizard-step__content\"\n>\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"1\"\n    [selected]=\"widgetWidth() === 1\"\n    [disabled]=\"fieldsColumnsLength() > 1\"\n  >\n    <h3>{{ 'widgetTabManagement.width.small.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.small.subtitle' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/quarter.svg\"\n      [alt]=\"'widgetTabManagement.width.small.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"2\"\n    [selected]=\"widgetWidth() === 2\"\n    [disabled]=\"fieldsColumnsLength() > 2\"\n  >\n    <h3>{{ 'widgetTabManagement.width.medium.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.medium.subtitle' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/half.svg\"\n      [alt]=\"'widgetTabManagement.width.medium.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"3\"\n    [selected]=\"widgetWidth() === 3\"\n    [disabled]=\"fieldsColumnsLength() > 3\"\n  >\n    <h3>{{ 'widgetTabManagement.width.large.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.large.subtitle' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/three-quarters.svg\"\n      [alt]=\"'widgetTabManagement.width.large.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"4\"\n    [selected]=\"widgetWidth() === 4\"\n  >\n    <h3>{{ 'widgetTabManagement.width.xtraLarge.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.width.xtraLarge.subtitle' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/width/full-width.svg\"\n      [alt]=\"'widgetTabManagement.width.xtraLarge.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n" }]
         }], ctorParameters: () => [{ type: WidgetWizardService }] });
 
 /*
@@ -4809,10 +4827,14 @@ const WIDGET_STEPS = [
  */
 class DossierManagementWidgetWizardComponent {
     set editMode(value) {
+        this._editMode = value;
         if (!value)
             return;
         this.currentStep.set(WidgetWizardStep.WIDTH);
     }
+    get editMode() {
+        return this._editMode;
+    }
     constructor(translateService, widgetWizardService) {
         this.translateService = translateService;
         this.widgetWizardService = widgetWizardService;
@@ -4843,7 +4865,7 @@ class DossierManagementWidgetWizardComponent {
                         secondaryLabel: this.translateService.instant(secondaryLabels[WidgetWizardStep.TYPE]),
                     }),
                     disabled: editMode,
-                    complete: editMode,
+                    complete: !!this.widgetWizardService.selectedWidget()?.type,
                 },
                 {
                     label: this.translateService.instant('widgetTabManagement.wizard.steps.width'),
@@ -4851,6 +4873,7 @@ class DossierManagementWidgetWizardComponent {
                         secondaryLabel: this.translateService.instant(secondaryLabels[WidgetWizardStep.WIDTH]),
                     }),
                     disabled: !secondaryLabels[WidgetWizardStep.TYPE],
+                    complete: !!this.widgetWizardService.widgetWidth(),
                 },
                 {
                     label: this.translateService.instant('widgetTabManagement.wizard.steps.style'),
@@ -4858,19 +4881,20 @@ class DossierManagementWidgetWizardComponent {
                         secondaryLabel: this.translateService.instant(secondaryLabels[WidgetWizardStep.STYLE]),
                     }),
                     disabled: !secondaryLabels[WidgetWizardStep.WIDTH],
+                    complete: !!this.widgetWizardService.widgetStyle(),
                 },
                 {
                     label: this.translateService.instant('widgetTabManagement.wizard.steps.content'),
                     disabled: !secondaryLabels[WidgetWizardStep.TYPE] ||
                         !secondaryLabels[WidgetWizardStep.WIDTH] ||
                         !secondaryLabels[WidgetWizardStep.STYLE],
+                    complete: !!this.widgetWizardService.widgetContent(),
                 },
             ];
         }));
         this._contentStepValid = signal(false);
         this.currentStep = signal(WidgetWizardStep.TYPE);
-        this.backButtonDisabled = computed(() => (this.widgetWizardService.editMode() && this.currentStep() === WidgetWizardStep.WIDTH) ||
-            this.currentStep() === WidgetWizardStep.TYPE);
+        this.backButtonDisabled = computed(() => this.widgetWizardService.editMode() && this.currentStep() === WidgetWizardStep.WIDTH);
         this.nextButtonDisabled = computed(() => {
             switch (this.currentStep()) {
                 case WidgetWizardStep.TYPE:
@@ -4914,7 +4938,7 @@ class DossierManagementWidgetWizardComponent {
         }, CARBON_CONSTANTS.modalAnimationMs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetWizardComponent, deps: [{ token: i5.TranslateService }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetWizardComponent, isStandalone: true, selector: "valtimo-dossier-management-widget-wizard", inputs: { open: "open", editMode: "editMode" }, outputs: { closeEvent: "closeEvent" }, 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  *ngIf=\"{steps: steps$ | async} as obs\"\n  [open]=\"open\"\n  [title]=\"'widgetTabManagement.wizard.title' | translate\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-dossier-management-widget-wizard\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.wizard.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-dossier-management-widget-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"currentStep()\"\n      [skeleton]=\"!obs.steps\"\n      [spacing]=\"'equal'\"\n      [steps]=\"obs.steps\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    @switch (currentStep()) {\n      @case (WidgetWizardSteps.TYPE) {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-type-step>\n      }\n      @case (WidgetWizardSteps.WIDTH) {\n        <p>{{ 'widgetTabManagement.width.description' | translate }}</p>\n\n        <valtimo-widget-wizard-width-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-width-step>\n      }\n      @case (WidgetWizardSteps.STYLE) {\n        <p>{{ 'widgetTabManagement.style.description' | translate }}</p>\n\n        <valtimo-widget-wizard-style-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-style-step>\n      }\n      @case (WidgetWizardSteps.CONTENT) {\n        <valtimo-widget-wizard-content-step\n          (contentValidEvent)=\"onContentValidEvent($event)\"\n        ></valtimo-widget-wizard-content-step>\n      }\n      @default {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step></valtimo-widget-wizard-type-step>\n      }\n    }\n  </section>\n\n  <cds-modal-footer class=\"valtimo-dossier-management-widget-wizard__footer\">\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onClose()\"\n    >\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__back\"\n      cdsButton=\"secondary\"\n      [disabled]=\"backButtonDisabled()\"\n      (click)=\"onBackButtonClick()\"\n    >\n      {{ 'interface.back' | translate }}\n    </button>\n\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + (currentStep() === WidgetWizardSteps.CONTENT ? 'save' : 'next') | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-dossier-management-widget-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-dossier-management-widget-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-dossier-management-widget-wizard__footer footer button{width:100%}.valtimo-dossier-management-widget-wizard__cancel{grid-area:cancel}.valtimo-dossier-management-widget-wizard__back{grid-area:back}.valtimo-dossier-management-widget-wizard__next{grid-area:next}.valtimo-dossier-management-widget-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "component", type: i2$3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: WidgetWizardContentStepComponent, selector: "valtimo-widget-wizard-content-step", outputs: ["contentValidEvent"] }, { kind: "component", type: WidgetWizardStyleStepComponent, selector: "valtimo-widget-wizard-style-step" }, { kind: "component", type: WidgetWizardTypeStepComponent, selector: "valtimo-widget-wizard-type-step" }, { kind: "component", type: WidgetWizardWidthStepComponent, selector: "valtimo-widget-wizard-width-step" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetWizardComponent, isStandalone: true, selector: "valtimo-dossier-management-widget-wizard", inputs: { open: "open", editMode: "editMode" }, outputs: { closeEvent: "closeEvent" }, 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  *ngIf=\"{steps: steps$ | async} as obs\"\n  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-dossier-management-widget-wizard\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-dossier-management-widget-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"currentStep()\"\n      [skeleton]=\"!obs.steps\"\n      [spacing]=\"'equal'\"\n      [steps]=\"obs.steps\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    @switch (currentStep()) {\n      @case (WidgetWizardSteps.TYPE) {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-type-step>\n      }\n      @case (WidgetWizardSteps.WIDTH) {\n        <p>{{ 'widgetTabManagement.width.description' | translate }}</p>\n\n        <valtimo-widget-wizard-width-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-width-step>\n      }\n      @case (WidgetWizardSteps.STYLE) {\n        <p>{{ 'widgetTabManagement.style.description' | translate }}</p>\n\n        <valtimo-widget-wizard-style-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-style-step>\n      }\n      @case (WidgetWizardSteps.CONTENT) {\n        <valtimo-widget-wizard-content-step\n          (contentValidEvent)=\"onContentValidEvent($event)\"\n        ></valtimo-widget-wizard-content-step>\n      }\n      @default {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step></valtimo-widget-wizard-type-step>\n      }\n    }\n  </section>\n\n  <cds-modal-footer class=\"valtimo-dossier-management-widget-wizard__footer\">\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onClose()\"\n    >\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if (currentStep() !== WidgetWizardSteps.TYPE) {\n      <button\n        class=\"valtimo-dossier-management-widget-wizard__back\"\n        cdsButton=\"secondary\"\n        [disabled]=\"backButtonDisabled()\"\n        (click)=\"onBackButtonClick()\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n    }\n\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + (currentStep() === WidgetWizardSteps.CONTENT ? 'save' : 'next') | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-dossier-management-widget-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-dossier-management-widget-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-dossier-management-widget-wizard__footer footer button{width:100%}.valtimo-dossier-management-widget-wizard__cancel{grid-area:cancel}.valtimo-dossier-management-widget-wizard__back{grid-area:back}.valtimo-dossier-management-widget-wizard__next{grid-area:next}.valtimo-dossier-management-widget-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}\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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "component", type: i2$3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: WidgetWizardContentStepComponent, selector: "valtimo-widget-wizard-content-step", outputs: ["contentValidEvent"] }, { kind: "component", type: WidgetWizardStyleStepComponent, selector: "valtimo-widget-wizard-style-step" }, { kind: "component", type: WidgetWizardTypeStepComponent, selector: "valtimo-widget-wizard-type-step" }, { kind: "component", type: WidgetWizardWidthStepComponent, selector: "valtimo-widget-wizard-width-step" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetWizardComponent, decorators: [{
             type: Component,
@@ -4925,7 +4949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ModalModule,
                         ButtonModule,
                         ...WIDGET_STEPS,
-                    ], 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  *ngIf=\"{steps: steps$ | async} as obs\"\n  [open]=\"open\"\n  [title]=\"'widgetTabManagement.wizard.title' | translate\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-dossier-management-widget-wizard\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.wizard.title' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-dossier-management-widget-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"currentStep()\"\n      [skeleton]=\"!obs.steps\"\n      [spacing]=\"'equal'\"\n      [steps]=\"obs.steps\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    @switch (currentStep()) {\n      @case (WidgetWizardSteps.TYPE) {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-type-step>\n      }\n      @case (WidgetWizardSteps.WIDTH) {\n        <p>{{ 'widgetTabManagement.width.description' | translate }}</p>\n\n        <valtimo-widget-wizard-width-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-width-step>\n      }\n      @case (WidgetWizardSteps.STYLE) {\n        <p>{{ 'widgetTabManagement.style.description' | translate }}</p>\n\n        <valtimo-widget-wizard-style-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-style-step>\n      }\n      @case (WidgetWizardSteps.CONTENT) {\n        <valtimo-widget-wizard-content-step\n          (contentValidEvent)=\"onContentValidEvent($event)\"\n        ></valtimo-widget-wizard-content-step>\n      }\n      @default {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step></valtimo-widget-wizard-type-step>\n      }\n    }\n  </section>\n\n  <cds-modal-footer class=\"valtimo-dossier-management-widget-wizard__footer\">\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onClose()\"\n    >\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__back\"\n      cdsButton=\"secondary\"\n      [disabled]=\"backButtonDisabled()\"\n      (click)=\"onBackButtonClick()\"\n    >\n      {{ 'interface.back' | translate }}\n    </button>\n\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + (currentStep() === WidgetWizardSteps.CONTENT ? 'save' : 'next') | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-dossier-management-widget-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-dossier-management-widget-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-dossier-management-widget-wizard__footer footer button{width:100%}.valtimo-dossier-management-widget-wizard__cancel{grid-area:cancel}.valtimo-dossier-management-widget-wizard__back{grid-area:back}.valtimo-dossier-management-widget-wizard__next{grid-area:next}.valtimo-dossier-management-widget-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}\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"] }]
+                    ], 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  *ngIf=\"{steps: steps$ | async} as obs\"\n  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-dossier-management-widget-wizard\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onClose()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.wizard.' + (editMode ? 'edit' : 'create') | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-dossier-management-widget-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"currentStep()\"\n      [skeleton]=\"!obs.steps\"\n      [spacing]=\"'equal'\"\n      [steps]=\"obs.steps\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    @switch (currentStep()) {\n      @case (WidgetWizardSteps.TYPE) {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-type-step>\n      }\n      @case (WidgetWizardSteps.WIDTH) {\n        <p>{{ 'widgetTabManagement.width.description' | translate }}</p>\n\n        <valtimo-widget-wizard-width-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-width-step>\n      }\n      @case (WidgetWizardSteps.STYLE) {\n        <p>{{ 'widgetTabManagement.style.description' | translate }}</p>\n\n        <valtimo-widget-wizard-style-step\n          class=\"valtimo-widget-wizard-step\"\n        ></valtimo-widget-wizard-style-step>\n      }\n      @case (WidgetWizardSteps.CONTENT) {\n        <valtimo-widget-wizard-content-step\n          (contentValidEvent)=\"onContentValidEvent($event)\"\n        ></valtimo-widget-wizard-content-step>\n      }\n      @default {\n        <p>{{ 'widgetTabManagement.types.description' | translate }}</p>\n\n        <valtimo-widget-wizard-type-step></valtimo-widget-wizard-type-step>\n      }\n    }\n  </section>\n\n  <cds-modal-footer class=\"valtimo-dossier-management-widget-wizard__footer\">\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__cancel\"\n      cdsButton=\"ghost\"\n      (click)=\"onClose()\"\n    >\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if (currentStep() !== WidgetWizardSteps.TYPE) {\n      <button\n        class=\"valtimo-dossier-management-widget-wizard__back\"\n        cdsButton=\"secondary\"\n        [disabled]=\"backButtonDisabled()\"\n        (click)=\"onBackButtonClick()\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n    }\n\n    <button\n      class=\"valtimo-dossier-management-widget-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + (currentStep() === WidgetWizardSteps.CONTENT ? 'save' : 'next') | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-dossier-management-widget-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-dossier-management-widget-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-dossier-management-widget-wizard__footer footer button{width:100%}.valtimo-dossier-management-widget-wizard__cancel{grid-area:cancel}.valtimo-dossier-management-widget-wizard__back{grid-area:back}.valtimo-dossier-management-widget-wizard__next{grid-area:next}.valtimo-dossier-management-widget-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-dossier-management-widget-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}\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.TranslateService }, { type: WidgetWizardService }], propDecorators: { open: [{
                 type: Input
             }], editMode: [{
@@ -5092,13 +5116,13 @@ class DossierManagementWidgetsEditorComponent {
     getWidthTranslationKey(width) {
         switch (width) {
             case 1:
-                return 'widgetTabManagement.width.quarter.title';
+                return 'widgetTabManagement.width.small.title';
             case 2:
-                return 'widgetTabManagement.width.half.title';
+                return 'widgetTabManagement.width.medium.title';
             case 3:
-                return 'widgetTabManagement.width.threeQuarters.title';
+                return 'widgetTabManagement.width.large.title';
             case 4:
-                return 'widgetTabManagement.width.fullWidth.title';
+                return 'widgetTabManagement.width.xtraLarge.title';
             default:
                 return '-';
         }
@@ -5428,7 +5452,7 @@ class DossierManagementWidgetTabComponent extends PendingChangesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetTabComponent, deps: [{ token: i1$1.BreadcrumbService }, { token: i2$3.IconService }, { token: i1$1.PageTitleService }, { token: i2.ActivatedRoute }, { token: TabManagementService }, { token: WidgetTabManagementService }, { token: i5.TranslateService }, { token: i1$1.PageHeaderService }, { token: WidgetJsonEditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetTabComponent, isStandalone: true, selector: "valtimo-dossier-management-case-widgets", 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-dossier-management-widget-tab-edit-modal\n  [tabItem]=\"currentWidgetTabItem$ | async\"\n  [showModal$]=\"showEditWidgetTabModal$\"\n  (saveEvent)=\"refreshWidgetTab()\"\n>\n</valtimo-dossier-management-widget-tab-edit-modal>\n\n<cds-tabs type=\"contained\">\n  <cds-tab\n    [active]=\"activeTab() === WidgetEditorTab.VISUAL\"\n    [heading]=\"'interface.editor.visualEditor' | translate\"\n    (selected)=\"displayBodyComponent(WidgetEditorTab.VISUAL)\"\n  >\n  </cds-tab>\n\n  <cds-tab\n    [active]=\"activeTab() === WidgetEditorTab.JSON\"\n    [heading]=\"'interface.editor.jsonEditor' | translate\"\n    (selected)=\"displayBodyComponent(WidgetEditorTab.JSON)\"\n  >\n  </cds-tab>\n</cds-tabs>\n\n@switch (activeContent()) {\n  @case (WidgetEditorTab.VISUAL) {\n    <valtimo-dossier-management-widgets-editor\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [tabWidgetKey]=\"tabWidgetKey$ | async\"\n      [currentWidgetTab]=\"currentWidgetTab$ | async\"\n      (changeSaved)=\"refreshWidgetTab()\"\n    ></valtimo-dossier-management-widgets-editor>\n  }\n  @case (WidgetEditorTab.JSON) {\n    <valtimo-dossier-management-widgets-json-editor\n      [currentWidgetTab]=\"currentWidgetTab$ | async\"\n      (canDeactivate)=\"onJsonCanDeactivate($event)\"\n      (changeSaved)=\"refreshWidgetTab()\"\n      (customModalLoaded)=\"onCustomModalLoaded($event)\"\n      (pendingChangesUpdate)=\"onPendingChangesUpdate($event)\"\n    ></valtimo-dossier-management-widgets-json-editor>\n  }\n}\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <button\n      cdsButton=\"tertiary\"\n      [size]=\"(compactMode$ | async) ? 'sm' : 'md'\"\n      (click)=\"editWidgetTab()\"\n    >\n      {{ 'widgetTabManagement.tab.editButton' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .cds--tab-content{padding: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: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: DossierManagementWidgetsEditorComponent, selector: "valtimo-dossier-management-widgets-editor", inputs: ["documentDefinitionName", "tabWidgetKey", "currentWidgetTab"], outputs: ["changeSaved"] }, { kind: "component", type: DossierManagementWidgetTabEditModalComponent, selector: "valtimo-dossier-management-widget-tab-edit-modal", inputs: ["showModal$", "tabItem"], outputs: ["saveEvent"] }, { kind: "component", type: DossierManagementWidgetsJsonEditorComponent, selector: "valtimo-dossier-management-widgets-json-editor", inputs: ["currentWidgetTab"], outputs: ["customModalLoaded", "canDeactivate", "pendingChangesUpdate", "changeSaved"] }, { kind: "ngmodule", type: RenderInPageHeaderDirectiveModule }, { kind: "directive", type: i1$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: DossierManagementWidgetTabComponent, isStandalone: true, selector: "valtimo-dossier-management-case-widgets", 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-dossier-management-widget-tab-edit-modal\n  [tabItem]=\"currentWidgetTabItem$ | async\"\n  [showModal$]=\"showEditWidgetTabModal$\"\n  (saveEvent)=\"refreshWidgetTab()\"\n>\n</valtimo-dossier-management-widget-tab-edit-modal>\n\n<cds-tabs type=\"contained\">\n  <cds-tab\n    [active]=\"activeTab() === WidgetEditorTab.VISUAL\"\n    [heading]=\"'interface.editor.visualEditor' | translate\"\n    (selected)=\"displayBodyComponent(WidgetEditorTab.VISUAL)\"\n  >\n  </cds-tab>\n\n  <cds-tab\n    [active]=\"activeTab() === WidgetEditorTab.JSON\"\n    [heading]=\"'interface.editor.jsonEditor' | translate\"\n    (selected)=\"displayBodyComponent(WidgetEditorTab.JSON)\"\n  >\n  </cds-tab>\n</cds-tabs>\n\n@switch (activeContent()) {\n  @case (WidgetEditorTab.VISUAL) {\n    <valtimo-dossier-management-widgets-editor\n      [documentDefinitionName]=\"documentDefinitionName$ | async\"\n      [tabWidgetKey]=\"tabWidgetKey$ | async\"\n      [currentWidgetTab]=\"currentWidgetTab$ | async\"\n      (changeSaved)=\"refreshWidgetTab()\"\n    ></valtimo-dossier-management-widgets-editor>\n  }\n  @case (WidgetEditorTab.JSON) {\n    <valtimo-dossier-management-widgets-json-editor\n      [currentWidgetTab]=\"currentWidgetTab$ | async\"\n      (canDeactivate)=\"onJsonCanDeactivate($event)\"\n      (changeSaved)=\"refreshWidgetTab()\"\n      (customModalLoaded)=\"onCustomModalLoaded($event)\"\n      (pendingChangesUpdate)=\"onPendingChangesUpdate($event)\"\n    ></valtimo-dossier-management-widgets-json-editor>\n  }\n}\n\n<ng-container renderInPageHeader>\n  <ng-template>\n    <button\n      cdsButton=\"tertiary\"\n      [size]=\"(compactMode$ | async) ? 'sm' : 'md'\"\n      (click)=\"editWidgetTab()\"\n    >\n      {{ 'widgetTabManagement.tab.editButton' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"edit\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: ["::ng-deep .cds--tab-content{padding: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: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: DossierManagementWidgetsEditorComponent, selector: "valtimo-dossier-management-widgets-editor", inputs: ["documentDefinitionName", "tabWidgetKey", "currentWidgetTab"], outputs: ["changeSaved"] }, { kind: "component", type: DossierManagementWidgetTabEditModalComponent, selector: "valtimo-dossier-management-widget-tab-edit-modal", inputs: ["showModal$", "tabItem"], outputs: ["saveEvent"] }, { kind: "component", type: DossierManagementWidgetsJsonEditorComponent, selector: "valtimo-dossier-management-widgets-json-editor", inputs: ["currentWidgetTab"], outputs: ["customModalLoaded", "canDeactivate", "pendingChangesUpdate", "changeSaved"] }, { kind: "ngmodule", type: RenderInPageHeaderDirectiveModule }, { kind: "directive", type: i1$1.RenderInPageHeaderDirective, selector: "[renderInPageHeader]", inputs: ["fullWidth"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2$3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementWidgetTabComponent, decorators: [{
             type: Component,
@@ -5584,7 +5608,8 @@ class DossierManagementModule {
             ConfirmationModalModule,
             ToggleModule,
             TooltipModule,
-            DossierManagementWidgetsEditorComponent] }); }
+            DossierManagementWidgetsEditorComponent,
+            ValuePathSelectorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementModule, providers: [TabManagementService], imports: [CommonModule,
             WidgetModule,
             DropzoneModule,
@@ -5632,7 +5657,8 @@ class DossierManagementModule {
             ConfirmationModalModule,
             ToggleModule,
             TooltipModule,
-            DossierManagementWidgetsEditorComponent] }); }
+            DossierManagementWidgetsEditorComponent,
+            ValuePathSelectorComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DossierManagementModule, decorators: [{
             type: NgModule,
@@ -5708,6 +5734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ToggleModule,
                         TooltipModule,
                         DossierManagementWidgetsEditorComponent,
+                        ValuePathSelectorComponent,
                     ],
                     providers: [TabManagementService],
                 }]