@valtimo/layout 13.24.1 → 13.25.0

package/fesm2022/valtimo-layout.mjs

@@ -11,7 +11,6 @@ import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, FormI
 import * as i3 from 'carbon-components-angular';
 import { ButtonModule, InputModule, LayerModule, SkeletonModule, PaginationModel, PaginationModule, TilesModule, IconModule, TimePickerModule, MenuButtonModule, ContextMenuModule, LoadingModule, ModalModule, TooltipModule, ComboBoxModule, DropdownModule, StructuredListModule, ToggleModule, AccordionModule, ProgressIndicatorModule, TabsModule, CheckboxModule, TagModule, Tab, SelectModule as SelectModule$1, PlaceholderModule } from 'carbon-components-angular';
 import { Subscription, BehaviorSubject, combineLatest, map, tap, switchMap, take, filter as filter$1, Subject, debounceTime, of, startWith, merge, delay } from 'rxjs';
-import { TrashCan16, Filter16, Link16, Edit16, ArrowUp16, ArrowDown16, DragVertical16 } from '@carbon/icons';
 import * as i2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { filter, catchError } from 'rxjs/operators';
@@ -20,6 +19,7 @@ import { getCaseManagementRouteParams, GlobalNotificationComponent, ROLE_ADMIN }
 import { isEqual, cloneDeep } from 'lodash';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@valtimo/form';
+import { TrashCan16, Filter16, Link16, Edit16, ArrowUp16, ArrowDown16, DragVertical16 } from '@carbon/icons';
 import * as i2$3 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import * as i2$2 from '@valtimo/document';
@@ -199,6 +199,75 @@ const WidgetTypeTags = {
  */
 const CUSTOM_WIDGET_TOKEN = new InjectionToken('Specify a component to display per configured custom widget component key.');
 
+/*
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const WIDGET_EDITOR_TEST_IDS = {
+    addWidgetButton: 'widgetEditorAddWidgetButton',
+    addDividerButton: 'widgetEditorAddDividerButton',
+};
+const WIDGET_WIZARD_TEST_IDS = {
+    nextButton: 'widgetWizardNextButton',
+    saveButton: 'widgetWizardSaveButton',
+    cancelButton: 'widgetWizardCancelButton',
+    backButton: 'widgetWizardBackButton',
+};
+const WIDGET_WIZARD_TYPE_TEST_IDS = {
+    tileFields: 'widgetWizardTypeTile-fields',
+    tileCustom: 'widgetWizardTypeTile-custom',
+    tileFormio: 'widgetWizardTypeTile-formio',
+    tileTable: 'widgetWizardTypeTile-table',
+    tileInteractiveTable: 'widgetWizardTypeTile-interactive-table',
+    tileCollection: 'widgetWizardTypeTile-collection',
+    tileMap: 'widgetWizardTypeTile-map',
+};
+const WIDGET_WIZARD_WIDTH_TEST_IDS = {
+    tileSmall: 'widgetWizardWidthTile-small',
+    tileMedium: 'widgetWizardWidthTile-medium',
+    tileLarge: 'widgetWizardWidthTile-large',
+    tileXtraLarge: 'widgetWizardWidthTile-xtraLarge',
+};
+const WIDGET_WIZARD_DENSITY_TEST_IDS = {
+    tileDefault: 'widgetWizardDensityTile-default',
+    tileCompact: 'widgetWizardDensityTile-compact',
+};
+const WIDGET_WIZARD_APPEARANCE_TEST_IDS = {
+    tileWhite: 'widgetWizardAppearanceTile-WHITE',
+    tileBlue: 'widgetWizardAppearanceTile-BLUE',
+    tileGreen: 'widgetWizardAppearanceTile-GREEN',
+    tileYellow: 'widgetWizardAppearanceTile-YELLOW',
+    tileOrange: 'widgetWizardAppearanceTile-ORANGE',
+    tileRed: 'widgetWizardAppearanceTile-RED',
+    tileBrown: 'widgetWizardAppearanceTile-BROWN',
+    tileTurquoise: 'widgetWizardAppearanceTile-TURQOISE',
+    tilePurple: 'widgetWizardAppearanceTile-PURPLE',
+    tilePeriwinkle: 'widgetWizardAppearanceTile-PERIWINKLE',
+    tileHighContrast: 'widgetWizardAppearanceTile-HIGHCONTRAST',
+};
+const WIDGET_DIVIDER_MODAL_TEST_IDS = {
+    titleInput: 'widgetDividerModalTitleInput',
+    createButton: 'widgetDividerModalCreateButton',
+    cancelButton: 'widgetDividerModalCancelButton',
+};
+const WIDGET_CONTENT_FIELDS_TEST_IDS = {
+    widgetTitleInput: 'widgetContentFieldsWidgetTitle',
+    fieldTitleInput: 'widgetContentFieldsFieldTitle',
+    displayTypeDropdown: 'widgetContentFieldsDisplayType',
+    valuePathSelector: 'widgetContentFieldsValuePath',
+};
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -2342,6 +2411,7 @@ class WidgetManagementDividerModalComponent {
     constructor(fb, iconService) {
         this.fb = fb;
         this.iconService = iconService;
+        this.testIds = WIDGET_DIVIDER_MODAL_TEST_IDS;
         this._open = false;
         this.usedKeys = [];
         this.dividerForm = this.fb.group({
@@ -2394,7 +2464,7 @@ class WidgetManagementDividerModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementDividerModalComponent, deps: [{ token: i1$3.FormBuilder }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetManagementDividerModalComponent, isStandalone: true, selector: "valtimo-widget-management-divider-modal", inputs: { modalMode: "modalMode", open: "open", widgets: "widgets", usedKeys: "usedKeys", prefillData: "prefillData" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 showFooter=\"true\" [open]=\"open\" (close)=\"onCloseModal()\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.list.dividerModal.' + modalMode + 'DividerTitle' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form [formGroup]=\"dividerForm\" cdsModalContent>\n    <cds-label>\n      {{ 'widgetTabManagement.list.dividerModal.dividerTitleLabel' | translate }}\n\n      <input\n        class=\"title-input\"\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{\n          'widgetTabManagement.list.dividerModal.dividerTitlePlaceholder' | translate\n        }}\"\n        [cdsLayer]=\"1\"\n        [attr.modal-primary-focus]=\"true\"\n        (keyup)=\"onFocusOut()\"\n      />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      [mode]=\"modalMode\"\n      [usedKeys]=\"usedKeys\"\n      [sourceText]=\"title.value\"\n      formControlName=\"key\"\n      labelTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyLabel\"\n      placeholderTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyPlaceholder\"\n    >\n    </valtimo-auto-key-input>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCloseModal()\">\n      {{ 'caseManagement.allVersionsModal.closeButton' | translate }}\n    </button>\n\n    <button [disabled]=\"!dividerForm.valid\" cdsButton=\"primary\" (click)=\"onCloseModal(true)\">\n      {{ buttonLabel | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".divider-key-wrapper{display:flex;flex:1 1 auto;inline-size:100%}.title-input{margin-bottom:32px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "mode", "usedKeys", "sourceText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetManagementDividerModalComponent, isStandalone: true, selector: "valtimo-widget-management-divider-modal", inputs: { modalMode: "modalMode", open: "open", widgets: "widgets", usedKeys: "usedKeys", prefillData: "prefillData" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 showFooter=\"true\" [open]=\"open\" (close)=\"onCloseModal()\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.list.dividerModal.' + modalMode + 'DividerTitle' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form [formGroup]=\"dividerForm\" cdsModalContent>\n    <cds-label>\n      {{ 'widgetTabManagement.list.dividerModal.dividerTitleLabel' | translate }}\n\n      <input\n        class=\"title-input\"\n        formControlName=\"title\"\n        cdsText\n        [attr.data-test-id]=\"testIds.titleInput\"\n        placeholder=\"{{\n          'widgetTabManagement.list.dividerModal.dividerTitlePlaceholder' | translate\n        }}\"\n        [cdsLayer]=\"1\"\n        [attr.modal-primary-focus]=\"true\"\n        (keyup)=\"onFocusOut()\"\n      />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      [mode]=\"modalMode\"\n      [usedKeys]=\"usedKeys\"\n      [sourceText]=\"title.value\"\n      formControlName=\"key\"\n      labelTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyLabel\"\n      placeholderTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyPlaceholder\"\n    >\n    </valtimo-auto-key-input>\n  </form>\n\n  <cds-modal-footer>\n    <button [attr.data-test-id]=\"testIds.cancelButton\" cdsButton=\"secondary\" (click)=\"onCloseModal()\">\n      {{ 'caseManagement.allVersionsModal.closeButton' | translate }}\n    </button>\n\n    <button [attr.data-test-id]=\"testIds.createButton\" [disabled]=\"!dividerForm.valid\" cdsButton=\"primary\" (click)=\"onCloseModal(true)\">\n      {{ buttonLabel | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".divider-key-wrapper{display:flex;flex:1 1 auto;inline-size:100%}.title-input{margin-bottom:32px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "component", type: AutoKeyInputComponent, selector: "valtimo-auto-key-input", inputs: ["labelTranslationKey", "placeholderTranslationKey", "mode", "usedKeys", "sourceText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementDividerModalComponent, decorators: [{
             type: Component,
@@ -2409,7 +2479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         ReactiveFormsModule,
                         LayerModule,
                         AutoKeyInputComponent,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 showFooter=\"true\" [open]=\"open\" (close)=\"onCloseModal()\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.list.dividerModal.' + modalMode + 'DividerTitle' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form [formGroup]=\"dividerForm\" cdsModalContent>\n    <cds-label>\n      {{ 'widgetTabManagement.list.dividerModal.dividerTitleLabel' | translate }}\n\n      <input\n        class=\"title-input\"\n        formControlName=\"title\"\n        cdsText\n        placeholder=\"{{\n          'widgetTabManagement.list.dividerModal.dividerTitlePlaceholder' | translate\n        }}\"\n        [cdsLayer]=\"1\"\n        [attr.modal-primary-focus]=\"true\"\n        (keyup)=\"onFocusOut()\"\n      />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      [mode]=\"modalMode\"\n      [usedKeys]=\"usedKeys\"\n      [sourceText]=\"title.value\"\n      formControlName=\"key\"\n      labelTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyLabel\"\n      placeholderTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyPlaceholder\"\n    >\n    </valtimo-auto-key-input>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"secondary\" (click)=\"onCloseModal()\">\n      {{ 'caseManagement.allVersionsModal.closeButton' | translate }}\n    </button>\n\n    <button [disabled]=\"!dividerForm.valid\" cdsButton=\"primary\" (click)=\"onCloseModal(true)\">\n      {{ buttonLabel | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".divider-key-wrapper{display:flex;flex:1 1 auto;inline-size:100%}.title-input{margin-bottom:32px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 showFooter=\"true\" [open]=\"open\" (close)=\"onCloseModal()\">\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{ 'widgetTabManagement.list.dividerModal.' + modalMode + 'DividerTitle' | translate }}\n    </h3>\n  </cds-modal-header>\n\n  <form [formGroup]=\"dividerForm\" cdsModalContent>\n    <cds-label>\n      {{ 'widgetTabManagement.list.dividerModal.dividerTitleLabel' | translate }}\n\n      <input\n        class=\"title-input\"\n        formControlName=\"title\"\n        cdsText\n        [attr.data-test-id]=\"testIds.titleInput\"\n        placeholder=\"{{\n          'widgetTabManagement.list.dividerModal.dividerTitlePlaceholder' | translate\n        }}\"\n        [cdsLayer]=\"1\"\n        [attr.modal-primary-focus]=\"true\"\n        (keyup)=\"onFocusOut()\"\n      />\n    </cds-label>\n\n    <valtimo-auto-key-input\n      [mode]=\"modalMode\"\n      [usedKeys]=\"usedKeys\"\n      [sourceText]=\"title.value\"\n      formControlName=\"key\"\n      labelTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyLabel\"\n      placeholderTranslationKey=\"widgetTabManagement.list.dividerModal.dividerKeyPlaceholder\"\n    >\n    </valtimo-auto-key-input>\n  </form>\n\n  <cds-modal-footer>\n    <button [attr.data-test-id]=\"testIds.cancelButton\" cdsButton=\"secondary\" (click)=\"onCloseModal()\">\n      {{ 'caseManagement.allVersionsModal.closeButton' | translate }}\n    </button>\n\n    <button [attr.data-test-id]=\"testIds.createButton\" [disabled]=\"!dividerForm.valid\" cdsButton=\"primary\" (click)=\"onCloseModal(true)\">\n      {{ buttonLabel | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".divider-key-wrapper{display:flex;flex:1 1 auto;inline-size:100%}.title-input{margin-bottom:32px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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$3.FormBuilder }, { type: i3.IconService }], propDecorators: { modalMode: [{
                 type: Input
             }], open: [{
@@ -2861,6 +2931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 class WidgetWizardDensityStepComponent {
     constructor(widgetWizardService) {
         this.widgetWizardService = widgetWizardService;
+        this.testIds = WIDGET_WIZARD_DENSITY_TEST_IDS;
         this.WidgetDensity = WidgetDensity;
         this.$widgetDensity = this.widgetWizardService.$widgetDensity;
     }
@@ -2868,11 +2939,11 @@ class WidgetWizardDensityStepComponent {
         this.widgetWizardService.$widgetDensity.set(event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetWizardDensityStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetWizardDensityStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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]=\"WidgetDensity.DEFAULT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/default.svg\"\n      [alt]=\"'widgetTabManagement.density.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetDensity.COMPACT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.COMPACT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.compact.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.compact.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/compact.svg\"\n      [alt]=\"'widgetTabManagement.density.compact.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.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: "19.2.20", type: WidgetWizardDensityStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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    [attr.data-test-id]=\"testIds.tileDefault\"\n    [value]=\"WidgetDensity.DEFAULT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/default.svg\"\n      [alt]=\"'widgetTabManagement.density.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [attr.data-test-id]=\"testIds.tileCompact\"\n    [value]=\"WidgetDensity.COMPACT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.COMPACT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.compact.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.compact.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/compact.svg\"\n      [alt]=\"'widgetTabManagement.density.compact.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.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: "19.2.20", ngImport: i0, type: WidgetWizardDensityStepComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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]=\"WidgetDensity.DEFAULT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/default.svg\"\n      [alt]=\"'widgetTabManagement.density.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [value]=\"WidgetDensity.COMPACT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.COMPACT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.compact.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.compact.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/compact.svg\"\n      [alt]=\"'widgetTabManagement.density.compact.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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    [attr.data-test-id]=\"testIds.tileDefault\"\n    [value]=\"WidgetDensity.DEFAULT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.DEFAULT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.default.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.default.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/default.svg\"\n      [alt]=\"'widgetTabManagement.density.default.title' | translate\"\n    />\n  </cds-selection-tile>\n\n  <cds-selection-tile\n    class=\"valtimo-widget-wizard-step__tile\"\n    [attr.data-test-id]=\"testIds.tileCompact\"\n    [value]=\"WidgetDensity.COMPACT\"\n    [selected]=\"$widgetDensity() === WidgetDensity.COMPACT\"\n  >\n    <h3>{{ 'widgetTabManagement.density.compact.title' | translate }}</h3>\n\n    <span>{{ 'widgetTabManagement.density.compact.description' | translate }}</span>\n\n    <img\n      src=\"valtimo-layout/img/widget-management/density/compact.svg\"\n      [alt]=\"'widgetTabManagement.density.compact.title' | translate\"\n    />\n  </cds-selection-tile>\n</cds-tile-group>\n" }]
         }], ctorParameters: () => [{ type: WidgetWizardService }] });
 
 /*
@@ -2991,11 +3062,11 @@ class WidgetWizardAppearanceStepComponent {
         this.widgetWizardService.$widgetColor.set(event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetWizardAppearanceStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetWizardAppearanceStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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)=\"onColorSelected($event)\"\n  class=\"valtimo-widget-wizard-step__content widget-appearance__color-grid\"\n>\n  @for (colorTile of colorTiles; track colorTile.color) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile widget-appearance__color-tile\"\n      [value]=\"colorTile.color\"\n      [selected]=\"colorTile.color === $widgetColor()\"\n    >\n      <h3 class=\"valtimo-widget-wizard-step__tile-title\">\n        {{ colorTile.labelKey | translate }}\n      </h3>\n\n      <img [src]=\"colorTile.illustration\" [alt]=\"colorTile.labelKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n", styles: [":host{display:block}.widget-appearance__color-grid fieldset{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.widget-appearance__color-tile .cds--tile-content{align-items:center;text-align:center}.widget-appearance__color-tile img{width:100%;max-width:200px;align-self:center}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.TileGroup, selector: "cds-tile-group, ibm-tile-group", inputs: ["name", "multiple", "legend"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetWizardAppearanceStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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)=\"onColorSelected($event)\"\n  class=\"valtimo-widget-wizard-step__content widget-appearance__color-grid\"\n>\n  @for (colorTile of colorTiles; track colorTile.color) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile widget-appearance__color-tile\"\n      [attr.data-test-id]=\"'widgetWizardAppearanceTile-' + colorTile.color\"\n      [value]=\"colorTile.color\"\n      [selected]=\"colorTile.color === $widgetColor()\"\n    >\n      <h3 class=\"valtimo-widget-wizard-step__tile-title\">\n        {{ colorTile.labelKey | translate }}\n      </h3>\n\n      <img [src]=\"colorTile.illustration\" [alt]=\"colorTile.labelKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n", styles: [":host{display:block}.widget-appearance__color-grid fieldset{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.widget-appearance__color-tile .cds--tile-content{align-items:center;text-align:center}.widget-appearance__color-tile img{width:100%;max-width:200px;align-self:center}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.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: "19.2.20", ngImport: i0, type: WidgetWizardAppearanceStepComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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)=\"onColorSelected($event)\"\n  class=\"valtimo-widget-wizard-step__content widget-appearance__color-grid\"\n>\n  @for (colorTile of colorTiles; track colorTile.color) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile widget-appearance__color-tile\"\n      [value]=\"colorTile.color\"\n      [selected]=\"colorTile.color === $widgetColor()\"\n    >\n      <h3 class=\"valtimo-widget-wizard-step__tile-title\">\n        {{ colorTile.labelKey | translate }}\n      </h3>\n\n      <img [src]=\"colorTile.illustration\" [alt]=\"colorTile.labelKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n", styles: [":host{display:block}.widget-appearance__color-grid fieldset{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.widget-appearance__color-tile .cds--tile-content{align-items:center;text-align:center}.widget-appearance__color-tile img{width:100%;max-width:200px;align-self:center}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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)=\"onColorSelected($event)\"\n  class=\"valtimo-widget-wizard-step__content widget-appearance__color-grid\"\n>\n  @for (colorTile of colorTiles; track colorTile.color) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile widget-appearance__color-tile\"\n      [attr.data-test-id]=\"'widgetWizardAppearanceTile-' + colorTile.color\"\n      [value]=\"colorTile.color\"\n      [selected]=\"colorTile.color === $widgetColor()\"\n    >\n      <h3 class=\"valtimo-widget-wizard-step__tile-title\">\n        {{ colorTile.labelKey | translate }}\n      </h3>\n\n      <img [src]=\"colorTile.illustration\" [alt]=\"colorTile.labelKey | translate\" />\n    </cds-selection-tile>\n  }\n</cds-tile-group>\n", styles: [":host{display:block}.widget-appearance__color-grid fieldset{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.widget-appearance__color-tile .cds--tile-content{align-items:center;text-align:center}.widget-appearance__color-tile img{width:100%;max-width:200px;align-self:center}\n/*!\n * Copyright 2015-2026 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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: WidgetWizardService }] });
 
 /*
@@ -3016,6 +3087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 class WidgetWizardTypeStepComponent {
     constructor(widgetWizardService) {
         this.widgetWizardService = widgetWizardService;
+        this.typeTestIds = WIDGET_WIZARD_TYPE_TEST_IDS;
         this.$availableWidgetTypes = computed(() => {
             const availableTypes = this.widgetWizardService.$availableWidgetTypes();
             return !availableTypes
@@ -3032,11 +3104,11 @@ class WidgetWizardTypeStepComponent {
         this.widgetWizardService.$selectedWidget.set(event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetWizardTypeStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetWizardTypeStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 $availableWidgetTypes(); 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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.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: "19.2.20", type: WidgetWizardTypeStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 $availableWidgetTypes(); track widgetType.titleKey) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile\"\n      [attr.data-test-id]=\"'widgetWizardTypeTile-' + widgetType.type\"\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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.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: "19.2.20", ngImport: i0, type: WidgetWizardTypeStepComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 $availableWidgetTypes(); 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" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 $availableWidgetTypes(); track widgetType.titleKey) {\n    <cds-selection-tile\n      class=\"valtimo-widget-wizard-step__tile\"\n      [attr.data-test-id]=\"'widgetWizardTypeTile-' + widgetType.type\"\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 }] });
 
 /*
@@ -3057,6 +3129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 class WidgetWizardWidthStepComponent {
     constructor(widgetWizardService) {
         this.widgetWizardService = widgetWizardService;
+        this.testIds = WIDGET_WIZARD_WIDTH_TEST_IDS;
         this.$fieldsColumnsLength = computed(() => this.widgetWizardService.$selectedWidget()?.type === WidgetType.FIELDS
             ? (this.widgetWizardService.$widgetContent()?.['columns']?.length ?? 0)
             : 0);
@@ -3066,11 +3139,11 @@ class WidgetWizardWidthStepComponent {
         this.widgetWizardService.$widgetWidth.set(event.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetWizardWidthStepComponent, deps: [{ token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetWizardWidthStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.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: "19.2.20", type: WidgetWizardWidthStepComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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    [attr.data-test-id]=\"testIds.tileSmall\"\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    [attr.data-test-id]=\"testIds.tileMedium\"\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    [attr.data-test-id]=\"testIds.tileLarge\"\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    [attr.data-test-id]=\"testIds.tileXtraLarge\"\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: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TilesModule }, { kind: "component", type: i3.SelectionTile, selector: "cds-selection-tile, ibm-selection-tile", inputs: ["theme", "id", "selected", "value", "disabled"], outputs: ["change"] }, { kind: "component", type: i3.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: "19.2.20", ngImport: i0, type: WidgetWizardWidthStepComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslateModule, TilesModule], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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    [attr.data-test-id]=\"testIds.tileSmall\"\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    [attr.data-test-id]=\"testIds.tileMedium\"\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    [attr.data-test-id]=\"testIds.tileLarge\"\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    [attr.data-test-id]=\"testIds.tileXtraLarge\"\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 }] });
 
 /*
@@ -3458,6 +3531,7 @@ class WidgetManagementWizardComponent {
         this.keyGeneratorService = keyGeneratorService;
         this.translateService = translateService;
         this.widgetWizardService = widgetWizardService;
+        this.testIds = WIDGET_WIZARD_TEST_IDS;
         this.open = false;
         this.disableDuplicate = false;
         this.closeEvent = new EventEmitter();
@@ -3574,7 +3648,7 @@ class WidgetManagementWizardComponent {
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementWizardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.KeyGeneratorService }, { token: i2$1.TranslateService }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementWizardComponent, isStandalone: true, selector: "valtimo-widget-management-wizard", inputs: { open: "open", disableDuplicate: "disableDuplicate", editMode: "editMode" }, outputs: { closeEvent: "closeEvent" }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["wizardStepRenderer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-widget-management-wizard\"\n  (close)=\"onClose()\"\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-widget-management-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"$currentStepIndex()\"\n      [spacing]=\"'equal'\"\n      [steps]=\"steps$ | async\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    <p>{{ stepLabel$ | async }}</p>\n\n    <ng-template #wizardStepRenderer></ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n    <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if ($currentStepIndex() !== 0) {\n      <button\n        class=\"valtimo-widget-management-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-widget-management-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"$nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + ($currentStepIndex() === (numberOfSteps$ | async) - 1 ? 'save' : 'next')\n          | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "component", type: i3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementWizardComponent, isStandalone: true, selector: "valtimo-widget-management-wizard", inputs: { open: "open", disableDuplicate: "disableDuplicate", editMode: "editMode" }, outputs: { closeEvent: "closeEvent" }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["wizardStepRenderer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-widget-management-wizard\"\n  (close)=\"onClose()\"\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-widget-management-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"$currentStepIndex()\"\n      [spacing]=\"'equal'\"\n      [steps]=\"steps$ | async\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    <p>{{ stepLabel$ | async }}</p>\n\n    <ng-template #wizardStepRenderer></ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n    <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" [attr.data-test-id]=\"testIds.cancelButton\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if ($currentStepIndex() !== 0) {\n      <button\n        class=\"valtimo-widget-management-wizard__back\"\n        cdsButton=\"secondary\"\n        [attr.data-test-id]=\"testIds.backButton\"\n        [disabled]=\"$backButtonDisabled()\"\n        (click)=\"onBackButtonClick()\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n    }\n\n    <button\n      class=\"valtimo-widget-management-wizard__next\"\n      cdsButton=\"primary\"\n      [attr.data-test-id]=\"$currentStepIndex() === (numberOfSteps$ | async) - 1 ? testIds.saveButton : testIds.nextButton\"\n      [disabled]=\"$nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + ($currentStepIndex() === (numberOfSteps$ | async) - 1 ? 'save' : 'next')\n          | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProgressIndicatorModule }, { kind: "component", type: i3.ProgressIndicator, selector: "cds-progress-indicator, ibm-progress-indicator", inputs: ["current", "steps", "translations", "orientation", "skeleton", "spacing"], outputs: ["stepSelected"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementWizardComponent, decorators: [{
             type: Component,
@@ -3585,7 +3659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         ModalModule,
                         ButtonModule,
                         ...WIDGET_STEPS,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-widget-management-wizard\"\n  (close)=\"onClose()\"\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-widget-management-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"$currentStepIndex()\"\n      [spacing]=\"'equal'\"\n      [steps]=\"steps$ | async\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    <p>{{ stepLabel$ | async }}</p>\n\n    <ng-template #wizardStepRenderer></ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n    <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if ($currentStepIndex() !== 0) {\n      <button\n        class=\"valtimo-widget-management-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-widget-management-wizard__next\"\n      cdsButton=\"primary\"\n      [disabled]=\"$nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + ($currentStepIndex() === (numberOfSteps$ | async) - 1 ? 'save' : 'next')\n          | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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  [open]=\"open\"\n  showFooter=\"true\"\n  size=\"lg\"\n  valtimoCdsModal\n  class=\"valtimo-widget-management-wizard\"\n  (close)=\"onClose()\"\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-widget-management-wizard__content\">\n    <cds-progress-indicator\n      [current]=\"$currentStepIndex()\"\n      [spacing]=\"'equal'\"\n      [steps]=\"steps$ | async\"\n      (stepSelected)=\"onStepSelected($event)\"\n    >\n    </cds-progress-indicator>\n\n    <p>{{ stepLabel$ | async }}</p>\n\n    <ng-template #wizardStepRenderer></ng-template>\n  </section>\n\n  <cds-modal-footer class=\"valtimo-widget-management-wizard__footer\">\n    <button class=\"valtimo-widget-management-wizard__cancel\" cdsButton=\"ghost\" [attr.data-test-id]=\"testIds.cancelButton\" (click)=\"onClose()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    @if ($currentStepIndex() !== 0) {\n      <button\n        class=\"valtimo-widget-management-wizard__back\"\n        cdsButton=\"secondary\"\n        [attr.data-test-id]=\"testIds.backButton\"\n        [disabled]=\"$backButtonDisabled()\"\n        (click)=\"onBackButtonClick()\"\n      >\n        {{ 'interface.back' | translate }}\n      </button>\n    }\n\n    <button\n      class=\"valtimo-widget-management-wizard__next\"\n      cdsButton=\"primary\"\n      [attr.data-test-id]=\"$currentStepIndex() === (numberOfSteps$ | async) - 1 ? testIds.saveButton : testIds.nextButton\"\n      [disabled]=\"$nextButtonDisabled()\"\n      (click)=\"onNextButtonClick()\"\n    >\n      {{\n        'interface.' + ($currentStepIndex() === (numberOfSteps$ | async) - 1 ? 'save' : 'next')\n          | translate\n      }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-widget-management-wizard__content{display:flex;flex-direction:column;gap:32px}.valtimo-widget-management-wizard__footer footer{display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:\"cancel . back next\"}.valtimo-widget-management-wizard__footer footer button{width:100%}.valtimo-widget-management-wizard__cancel{grid-area:cancel}.valtimo-widget-management-wizard__back{grid-area:back}.valtimo-widget-management-wizard__next{grid-area:next}.valtimo-widget-management-wizard .cds--modal-container{height:88%;background:var(--cds-layer-02)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__content fieldset{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile{height:100%}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile-content{display:flex;flex-direction:column;max-width:260px;gap:16px;justify-content:space-between}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile .cds--tile:not(.cds--tile--disabled) .cds--tile-content{color:var(--cds-text-primary)}.valtimo-widget-management-wizard .valtimo-widget-wizard-step__tile-title{font-size:20px}.valtimo-widget-management-wizard .cds--tile--selectable svg{display:none}.valtimo-widget-management-wizard .cds--tile--selectable.cds--tile--is-selected svg{display:block}.valtimo-widget-management-wizard .cds--tab-content{padding:0}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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: i0.ChangeDetectorRef }, { type: i1.KeyGeneratorService }, { type: i2$1.TranslateService }, { type: WidgetWizardService }], propDecorators: { _vcr: [{
                 type: ViewChild,
                 args: ['wizardStepRenderer', { read: ViewContainerRef }]
@@ -3639,6 +3713,7 @@ class WidgetManagementEditorComponent {
         this.translateService = translateService;
         this.widgetWizardService = widgetWizardService;
         this.widgetManagementService = widgetManagementService;
+        this.testIds = WIDGET_EDITOR_TEST_IDS;
         this.enableWidgetDivider = true;
         this.disableDuplicate$ = new BehaviorSubject(false);
         this.singleWidget$ = new BehaviorSubject(false);
@@ -3859,7 +3934,7 @@ class WidgetManagementEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementEditorComponent, deps: [{ token: i3.IconService }, { token: i2$1.TranslateService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetManagementEditorComponent, isStandalone: true, selector: "valtimo-widget-management-editor", inputs: { enableWidgetDivider: "enableWidgetDivider", params: "params", availableWidgetTypes: "availableWidgetTypes", disableDuplicate: "disableDuplicate", singleWidget: "singleWidget", defaultWidth: "defaultWidth" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"actionItems$ | async\"\n  [fields]=\"fields$ | async\"\n  [header]=\"false\"\n  [items]=\"widgets$ | async\"\n  [dragAndDrop]=\"!(singleWidget$ | async)\"\n  [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n  [loading]=\"loading$ | async\"\n  (itemsReordered)=\"onItemsReordered($event)\"\n  (rowClicked)=\"editWidget($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button *ngIf=\"enableWidgetDivider\" cdsButton=\"ghost\" (click)=\"openAddDividerModal()\">\n      {{ 'widgetTabManagement.list.addDivider' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"drag--vertical\" size=\"16\"></svg>\n    </button>\n\n    <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addWidgetButton\"\n    [description]=\"\n      ((singleWidget$ | async)\n        ? 'widgetTabManagement.list.noResultsSingle.description'\n        : 'widgetTabManagement.list.noResults.description'\n      ) | translate\n    \"\n    [title]=\"\n      ((singleWidget$ | async)\n        ? 'widgetTabManagement.list.noResultsSingle.title'\n        : 'widgetTabManagement.list.noResults.title'\n      ) | translate\n    \"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n  <button\n    cdsButton=\"primary\"\n    (click)=\"openAddModal()\"\n    [disabled]=\"(singleWidget$ | async) && ((widgets$ | async) || []).length === 1\"\n  >\n    {{ 'widgetTabManagement.list.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-widget-management-divider-modal\n  [open]=\"$isDividerModalOpen()\"\n  [modalMode]=\"$dividerModalMode()\"\n  [prefillData]=\"dividerDefinition$ | async\"\n  [usedKeys]=\"usedKeys$ | async\"\n  (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-divider-modal>\n\n<valtimo-widget-management-wizard\n  [editMode]=\"$isEditMode()\"\n  [open]=\"$isWizardOpen()\"\n  [disableDuplicate]=\"disableDuplicate$ | async\"\n  (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-wizard>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"Are you sure you want to delete this widget?\"\n  [outputOnConfirm]=\"$deleteWidget()\"\n  [showModalSubject$]=\"deleteModalOpen$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "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.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: WidgetManagementWizardComponent, selector: "valtimo-widget-management-wizard", inputs: ["open", "disableDuplicate", "editMode"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1.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: WidgetManagementDividerModalComponent, selector: "valtimo-widget-management-divider-modal", inputs: ["modalMode", "open", "widgets", "usedKeys", "prefillData"], outputs: ["closeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: WidgetManagementEditorComponent, isStandalone: true, selector: "valtimo-widget-management-editor", inputs: { enableWidgetDivider: "enableWidgetDivider", params: "params", availableWidgetTypes: "availableWidgetTypes", disableDuplicate: "disableDuplicate", singleWidget: "singleWidget", defaultWidth: "defaultWidth" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"actionItems$ | async\"\n  [fields]=\"fields$ | async\"\n  [header]=\"false\"\n  [items]=\"widgets$ | async\"\n  [dragAndDrop]=\"!(singleWidget$ | async)\"\n  [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n  [loading]=\"loading$ | async\"\n  (itemsReordered)=\"onItemsReordered($event)\"\n  (rowClicked)=\"editWidget($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button *ngIf=\"enableWidgetDivider\" cdsButton=\"ghost\" [attr.data-test-id]=\"testIds.addDividerButton\" (click)=\"openAddDividerModal()\">\n      {{ 'widgetTabManagement.list.addDivider' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"drag--vertical\" size=\"16\"></svg>\n    </button>\n\n    <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addWidgetButton\"\n    [description]=\"\n      ((singleWidget$ | async)\n        ? 'widgetTabManagement.list.noResultsSingle.description'\n        : 'widgetTabManagement.list.noResults.description'\n      ) | translate\n    \"\n    [title]=\"\n      ((singleWidget$ | async)\n        ? 'widgetTabManagement.list.noResultsSingle.title'\n        : 'widgetTabManagement.list.noResults.title'\n      ) | translate\n    \"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n  <button\n    cdsButton=\"primary\"\n    [attr.data-test-id]=\"testIds.addWidgetButton\"\n    (click)=\"openAddModal()\"\n    [disabled]=\"(singleWidget$ | async) && ((widgets$ | async) || []).length === 1\"\n  >\n    {{ 'widgetTabManagement.list.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-widget-management-divider-modal\n  [open]=\"$isDividerModalOpen()\"\n  [modalMode]=\"$dividerModalMode()\"\n  [prefillData]=\"dividerDefinition$ | async\"\n  [usedKeys]=\"usedKeys$ | async\"\n  (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-divider-modal>\n\n<valtimo-widget-management-wizard\n  [editMode]=\"$isEditMode()\"\n  [open]=\"$isWizardOpen()\"\n  [disableDuplicate]=\"disableDuplicate$ | async\"\n  (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-wizard>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"Are you sure you want to delete this widget?\"\n  [outputOnConfirm]=\"$deleteWidget()\"\n  [showModalSubject$]=\"deleteModalOpen$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "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.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: WidgetManagementWizardComponent, selector: "valtimo-widget-management-wizard", inputs: ["open", "disableDuplicate", "editMode"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i1.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: WidgetManagementDividerModalComponent, selector: "valtimo-widget-management-divider-modal", inputs: ["modalMode", "open", "widgets", "usedKeys", "prefillData"], outputs: ["closeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementEditorComponent, decorators: [{
             type: Component,
@@ -3873,7 +3948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         WidgetManagementWizardComponent,
                         ConfirmationModalModule,
                         WidgetManagementDividerModalComponent,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"actionItems$ | async\"\n  [fields]=\"fields$ | async\"\n  [header]=\"false\"\n  [items]=\"widgets$ | async\"\n  [dragAndDrop]=\"!(singleWidget$ | async)\"\n  [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n  [loading]=\"loading$ | async\"\n  (itemsReordered)=\"onItemsReordered($event)\"\n  (rowClicked)=\"editWidget($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button *ngIf=\"enableWidgetDivider\" cdsButton=\"ghost\" (click)=\"openAddDividerModal()\">\n      {{ 'widgetTabManagement.list.addDivider' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"drag--vertical\" size=\"16\"></svg>\n    </button>\n\n    <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addWidgetButton\"\n    [description]=\"\n      ((singleWidget$ | async)\n        ? 'widgetTabManagement.list.noResultsSingle.description'\n        : 'widgetTabManagement.list.noResults.description'\n      ) | translate\n    \"\n    [title]=\"\n      ((singleWidget$ | async)\n        ? 'widgetTabManagement.list.noResultsSingle.title'\n        : 'widgetTabManagement.list.noResults.title'\n      ) | translate\n    \"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n  <button\n    cdsButton=\"primary\"\n    (click)=\"openAddModal()\"\n    [disabled]=\"(singleWidget$ | async) && ((widgets$ | async) || []).length === 1\"\n  >\n    {{ 'widgetTabManagement.list.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-widget-management-divider-modal\n  [open]=\"$isDividerModalOpen()\"\n  [modalMode]=\"$dividerModalMode()\"\n  [prefillData]=\"dividerDefinition$ | async\"\n  [usedKeys]=\"usedKeys$ | async\"\n  (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-divider-modal>\n\n<valtimo-widget-management-wizard\n  [editMode]=\"$isEditMode()\"\n  [open]=\"$isWizardOpen()\"\n  [disableDuplicate]=\"disableDuplicate$ | async\"\n  (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-wizard>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"Are you sure you want to delete this widget?\"\n  [outputOnConfirm]=\"$deleteWidget()\"\n  [showModalSubject$]=\"deleteModalOpen$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n" }]
+                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-carbon-list\n  [actionItems]=\"actionItems$ | async\"\n  [fields]=\"fields$ | async\"\n  [header]=\"false\"\n  [items]=\"widgets$ | async\"\n  [dragAndDrop]=\"!(singleWidget$ | async)\"\n  [dragAndDropDisabled]=\"$dragAndDropDisabled()\"\n  [loading]=\"loading$ | async\"\n  (itemsReordered)=\"onItemsReordered($event)\"\n  (rowClicked)=\"editWidget($event)\"\n>\n  <ng-container carbonToolbarContent>\n    <button *ngIf=\"enableWidgetDivider\" cdsButton=\"ghost\" [attr.data-test-id]=\"testIds.addDividerButton\" (click)=\"openAddDividerModal()\">\n      {{ 'widgetTabManagement.list.addDivider' | translate }}\n\n      <svg class=\"cds--btn__icon\" cdsIcon=\"drag--vertical\" size=\"16\"></svg>\n    </button>\n\n    <ng-container *ngTemplateOutlet=\"addWidgetButton\"></ng-container>\n  </ng-container>\n\n  <valtimo-no-results\n    [action]=\"addWidgetButton\"\n    [description]=\"\n      ((singleWidget$ | async)\n        ? 'widgetTabManagement.list.noResultsSingle.description'\n        : 'widgetTabManagement.list.noResults.description'\n      ) | translate\n    \"\n    [title]=\"\n      ((singleWidget$ | async)\n        ? 'widgetTabManagement.list.noResultsSingle.title'\n        : 'widgetTabManagement.list.noResults.title'\n      ) | translate\n    \"\n  ></valtimo-no-results>\n</valtimo-carbon-list>\n\n<ng-template #addWidgetButton>\n  <button\n    cdsButton=\"primary\"\n    [attr.data-test-id]=\"testIds.addWidgetButton\"\n    (click)=\"openAddModal()\"\n    [disabled]=\"(singleWidget$ | async) && ((widgets$ | async) || []).length === 1\"\n  >\n    {{ 'widgetTabManagement.list.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<valtimo-widget-management-divider-modal\n  [open]=\"$isDividerModalOpen()\"\n  [modalMode]=\"$dividerModalMode()\"\n  [prefillData]=\"dividerDefinition$ | async\"\n  [usedKeys]=\"usedKeys$ | async\"\n  (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-divider-modal>\n\n<valtimo-widget-management-wizard\n  [editMode]=\"$isEditMode()\"\n  [open]=\"$isWizardOpen()\"\n  [disableDuplicate]=\"disableDuplicate$ | async\"\n  (closeEvent)=\"onCloseEvent($event)\"\n></valtimo-widget-management-wizard>\n\n<valtimo-confirmation-modal\n  confirmButtonTextTranslationKey=\"interface.delete\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"Are you sure you want to delete this widget?\"\n  [outputOnConfirm]=\"$deleteWidget()\"\n  [showModalSubject$]=\"deleteModalOpen$\"\n  titleTranslationKey=\"interface.delete\"\n  (confirmEvent)=\"onDeleteConfirm($event)\"\n></valtimo-confirmation-modal>\n" }]
         }], ctorParameters: () => [{ type: i3.IconService }, { type: i2$1.TranslateService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
@@ -4458,6 +4533,7 @@ class WidgetManagementFieldsColumnComponent {
         this.widgetFieldsService = widgetFieldsService;
         this.widgetWizardService = widgetWizardService;
         this.widgetManagementService = widgetManagementService;
+        this.testIds = WIDGET_CONTENT_FIELDS_TEST_IDS;
         this.class = 'valtimo-widget-management-field-column';
         this.addTranslateKey = 'widgetTabManagement.content.fields.add';
         this.showHideWhenEmptyCheckbox = false;
@@ -4629,7 +4705,7 @@ class WidgetManagementFieldsColumnComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementFieldsColumnComponent, deps: [{ token: i1.CdsThemeService }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormBuilder }, { token: i3.IconService }, { token: i2$1.TranslateService }, { token: WidgetFieldsService }, { token: WidgetWizardService }, { token: WIDGET_MANAGEMENT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox", showSortableCheckbox: "showSortableCheckbox" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{\n    inputTheme: inputTheme$ | async,\n    params: params$ | async,\n    widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n    defaultSortIndex: defaultSortIndexForTemplate$ | async,\n    isInteractiveTable: $widgetType() === 'interactive-table',\n  } as data\"\n  class=\"valtimo-widget-management-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]=\"{\n          count: $count,\n          index: $index,\n          title: formRow.get('title')?.value,\n          defaultSortIndex: data.defaultSortIndex,\n        }\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-widget-management-field-column__item\"\n      >\n        <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n          <div\n            class=\"valtimo-widget-management-field-column__content\"\n            [class.valtimo-widget-management-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.' + data.widgetType + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                cdsLayer=\"2\"\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-carbon-theme]=\"data.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\n            <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              @if ($widgetContext() === 'case') {\n                <valtimo-value-path-selector\n                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n                  [parentItem]=\"selectedCollection\"\n                ></valtimo-value-path-selector>\n              } @else {\n                <input\n                  cdsText\n                  [attr.data-carbon-theme]=\"data.inputTheme\"\n                  [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                  type=\"text\"\n                  formControlName=\"content\"\n                />\n              }\n            </cds-text-label>\n          </div>\n\n          <div class=\"valtimo-widget-management-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (WidgetDisplayTypeKey.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]=\"data.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]=\"data.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.ENUM) {\n                <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-widget-management-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]=\"data.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]=\"data.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-widget-management-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg 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 (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.LINK) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"linkText\"\n                  />\n                </cds-text-label>\n              }\n            }\n\n            <cds-text-label\n              *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n            >\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n                tooltip=\"{{\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n                }}\"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n                \"\n                type=\"text\"\n                formControlName=\"ellipsisCharacterLimit\"\n              />\n            </cds-text-label>\n\n            <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n              {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n            </cds-checkbox>\n\n            <div\n              *ngIf=\"showSortableCheckbox\"\n              class=\"valtimo-widget-management-field-column__sorting\"\n            >\n              <cds-checkbox\n                formControlName=\"sortable\"\n                (checkedChange)=\"onSortableCheckChange($index, $event)\"\n              >\n                {{ 'listColumn.sortable' | translate }}\n              </cds-checkbox>\n\n              <v-select\n                formControlName=\"defaultSort\"\n                [disabled]=\"!formRow.get('sortable')?.value\"\n                [items]=\"DEFAULT_SORT_OPTIONS\"\n                [dropUp]=\"false\"\n                [placeholder]=\"'interface.sorting.noDefault' | translate\"\n                [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n                [warn]=\"\n                  data.defaultSortIndex !== -1 &&\n                  data.defaultSortIndex !== $index &&\n                  !!formRow.get('sortable')?.value\n                \"\n                [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n                (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n              ></v-select>\n            </div>\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\n  #fieldTitle\n  let-defaultSortIndex=\"defaultSortIndex\"\n  let-count=\"count\"\n  let-index=\"index\"\n  let-title=\"title\"\n>\n  <div class=\"valtimo-widget-management-field-column__title\">\n    <section>\n      {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n      <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n        {{ 'ikoManagement.defaultSortTitle' | translate }}\n      </cds-tag>\n    </section>\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-widget-management-field-column__delete-button\"\n    >\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.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: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.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.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementFieldsColumnComponent, isStandalone: true, selector: "valtimo-widget-management-fields-column", inputs: { columnData: "columnData", addTranslateKey: "addTranslateKey", fieldWidthDropdown: "fieldWidthDropdown", selectedCollection: "selectedCollection", showHideWhenEmptyCheckbox: "showHideWhenEmptyCheckbox", showSortableCheckbox: "showSortableCheckbox" }, outputs: { columnUpdateEvent: "columnUpdateEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{\n    inputTheme: inputTheme$ | async,\n    params: params$ | async,\n    widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n    defaultSortIndex: defaultSortIndexForTemplate$ | async,\n    isInteractiveTable: $widgetType() === 'interactive-table',\n  } as data\"\n  class=\"valtimo-widget-management-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]=\"{\n          count: $count,\n          index: $index,\n          title: formRow.get('title')?.value,\n          defaultSortIndex: data.defaultSortIndex,\n        }\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-widget-management-field-column__item\"\n      >\n        <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n          <div\n            class=\"valtimo-widget-management-field-column__content\"\n            [class.valtimo-widget-management-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.' + data.widgetType + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                cdsLayer=\"2\"\n                [attr.data-test-id]=\"testIds.fieldTitleInput\"\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-test-id]=\"testIds.displayTypeDropdown\"\n              [attr.data-carbon-theme]=\"data.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\n            <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              @if ($widgetContext() === 'case') {\n                <valtimo-value-path-selector\n                  [attr.data-test-id]=\"testIds.valuePathSelector\"\n                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n                  [parentItem]=\"selectedCollection\"\n                ></valtimo-value-path-selector>\n              } @else {\n                <input\n                  cdsText\n                  [attr.data-carbon-theme]=\"data.inputTheme\"\n                  [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                  type=\"text\"\n                  formControlName=\"content\"\n                />\n              }\n            </cds-text-label>\n          </div>\n\n          <div class=\"valtimo-widget-management-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (WidgetDisplayTypeKey.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]=\"data.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]=\"data.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.ENUM) {\n                <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-widget-management-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]=\"data.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]=\"data.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-widget-management-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg 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 (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.LINK) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"linkText\"\n                  />\n                </cds-text-label>\n              }\n            }\n\n            <cds-text-label\n              *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n            >\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n                tooltip=\"{{\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n                }}\"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n                \"\n                type=\"text\"\n                formControlName=\"ellipsisCharacterLimit\"\n              />\n            </cds-text-label>\n\n            <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n              {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n            </cds-checkbox>\n\n            <div\n              *ngIf=\"showSortableCheckbox\"\n              class=\"valtimo-widget-management-field-column__sorting\"\n            >\n              <cds-checkbox\n                formControlName=\"sortable\"\n                (checkedChange)=\"onSortableCheckChange($index, $event)\"\n              >\n                {{ 'listColumn.sortable' | translate }}\n              </cds-checkbox>\n\n              <v-select\n                formControlName=\"defaultSort\"\n                [disabled]=\"!formRow.get('sortable')?.value\"\n                [items]=\"DEFAULT_SORT_OPTIONS\"\n                [dropUp]=\"false\"\n                [placeholder]=\"'interface.sorting.noDefault' | translate\"\n                [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n                [warn]=\"\n                  data.defaultSortIndex !== -1 &&\n                  data.defaultSortIndex !== $index &&\n                  !!formRow.get('sortable')?.value\n                \"\n                [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n                (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n              ></v-select>\n            </div>\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\n  #fieldTitle\n  let-defaultSortIndex=\"defaultSortIndex\"\n  let-count=\"count\"\n  let-index=\"index\"\n  let-title=\"title\"\n>\n  <div class=\"valtimo-widget-management-field-column__title\">\n    <section>\n      {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n      <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n        {{ 'ikoManagement.defaultSortTitle' | translate }}\n      </cds-tag>\n    </section>\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-widget-management-field-column__delete-button\"\n    >\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.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: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.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.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "buildingBlockDefinitionKey", "buildingBlockDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "dropUp", "defaultValue", "type", "parentItem", "filterItems"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ToggleModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementFieldsColumnComponent, decorators: [{
             type: Component,
@@ -4649,7 +4725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         SelectModule,
                         TagModule,
                         ToggleModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{\n    inputTheme: inputTheme$ | async,\n    params: params$ | async,\n    widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n    defaultSortIndex: defaultSortIndexForTemplate$ | async,\n    isInteractiveTable: $widgetType() === 'interactive-table',\n  } as data\"\n  class=\"valtimo-widget-management-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]=\"{\n          count: $count,\n          index: $index,\n          title: formRow.get('title')?.value,\n          defaultSortIndex: data.defaultSortIndex,\n        }\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-widget-management-field-column__item\"\n      >\n        <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n          <div\n            class=\"valtimo-widget-management-field-column__content\"\n            [class.valtimo-widget-management-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.' + data.widgetType + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                cdsLayer=\"2\"\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-carbon-theme]=\"data.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\n            <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              @if ($widgetContext() === 'case') {\n                <valtimo-value-path-selector\n                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n                  [parentItem]=\"selectedCollection\"\n                ></valtimo-value-path-selector>\n              } @else {\n                <input\n                  cdsText\n                  [attr.data-carbon-theme]=\"data.inputTheme\"\n                  [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                  type=\"text\"\n                  formControlName=\"content\"\n                />\n              }\n            </cds-text-label>\n          </div>\n\n          <div class=\"valtimo-widget-management-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (WidgetDisplayTypeKey.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]=\"data.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]=\"data.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.ENUM) {\n                <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-widget-management-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]=\"data.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]=\"data.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-widget-management-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg 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 (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.LINK) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"linkText\"\n                  />\n                </cds-text-label>\n              }\n            }\n\n            <cds-text-label\n              *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n            >\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n                tooltip=\"{{\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n                }}\"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n                \"\n                type=\"text\"\n                formControlName=\"ellipsisCharacterLimit\"\n              />\n            </cds-text-label>\n\n            <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n              {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n            </cds-checkbox>\n\n            <div\n              *ngIf=\"showSortableCheckbox\"\n              class=\"valtimo-widget-management-field-column__sorting\"\n            >\n              <cds-checkbox\n                formControlName=\"sortable\"\n                (checkedChange)=\"onSortableCheckChange($index, $event)\"\n              >\n                {{ 'listColumn.sortable' | translate }}\n              </cds-checkbox>\n\n              <v-select\n                formControlName=\"defaultSort\"\n                [disabled]=\"!formRow.get('sortable')?.value\"\n                [items]=\"DEFAULT_SORT_OPTIONS\"\n                [dropUp]=\"false\"\n                [placeholder]=\"'interface.sorting.noDefault' | translate\"\n                [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n                [warn]=\"\n                  data.defaultSortIndex !== -1 &&\n                  data.defaultSortIndex !== $index &&\n                  !!formRow.get('sortable')?.value\n                \"\n                [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n                (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n              ></v-select>\n            </div>\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\n  #fieldTitle\n  let-defaultSortIndex=\"defaultSortIndex\"\n  let-count=\"count\"\n  let-index=\"index\"\n  let-title=\"title\"\n>\n  <div class=\"valtimo-widget-management-field-column__title\">\n    <section>\n      {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n      <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n        {{ 'ikoManagement.defaultSortTitle' | translate }}\n      </cds-tag>\n    </section>\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-widget-management-field-column__delete-button\"\n    >\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"{\n    inputTheme: inputTheme$ | async,\n    params: params$ | async,\n    widgetType: $widgetType() === 'interactive-table' ? 'table' : $widgetType(),\n    defaultSortIndex: defaultSortIndexForTemplate$ | async,\n    isInteractiveTable: $widgetType() === 'interactive-table',\n  } as data\"\n  class=\"valtimo-widget-management-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]=\"{\n          count: $count,\n          index: $index,\n          title: formRow.get('title')?.value,\n          defaultSortIndex: data.defaultSortIndex,\n        }\"\n        [expanded]=\"$index === 0\"\n        class=\"valtimo-widget-management-field-column__item\"\n      >\n        <form [formGroup]=\"formRow\" class=\"valtimo-widget-management-field-column__container\">\n          <div\n            class=\"valtimo-widget-management-field-column__content\"\n            [class.valtimo-widget-management-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.' + data.widgetType + '.titleTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                cdsLayer=\"2\"\n                [attr.data-test-id]=\"testIds.fieldTitleInput\"\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"'widgetTabManagement.content.fields.titlePlaceholder' | translate\"\n                type=\"text\"\n                formControlName=\"title\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              [attr.data-test-id]=\"testIds.displayTypeDropdown\"\n              [attr.data-carbon-theme]=\"data.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\n            <cds-text-label class=\"valtimo-widget-management-field-column__value-field\">\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.value' | translate\"\n                [tooltip]=\"\n                  'widgetTabManagement.content.' + data.widgetType + '.valueTooltip' | translate\n                \"\n              >\n              </v-input-label>\n\n              @if ($widgetContext() === 'case') {\n                <valtimo-value-path-selector\n                  [attr.data-test-id]=\"testIds.valuePathSelector\"\n                  formControlName=\"content\"\n                  [caseDefinitionKey]=\"data.params?.caseDefinitionKey\"\n                  [caseDefinitionVersionTag]=\"data.params?.caseDefinitionVersionTag\"\n                  [parentItem]=\"selectedCollection\"\n                ></valtimo-value-path-selector>\n              } @else {\n                <input\n                  cdsText\n                  [attr.data-carbon-theme]=\"data.inputTheme\"\n                  [placeholder]=\"'widgetTabManagement.content.fields.value' | translate\"\n                  type=\"text\"\n                  formControlName=\"content\"\n                />\n              }\n            </cds-text-label>\n          </div>\n\n          <div class=\"valtimo-widget-management-field-column__options\">\n            @switch (formRow.get('type').value.id) {\n              @case (WidgetDisplayTypeKey.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]=\"data.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]=\"data.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.digitsInfoPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.formatPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"format\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.ENUM) {\n                <div class=\"valtimo-widget-management-field-column__enum\" formArrayName=\"values\">\n                  @for (rowValue of formRow.get('values')?.controls; track $index) {\n                    <form\n                      [formGroup]=\"rowValue\"\n                      class=\"valtimo-widget-management-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]=\"data.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]=\"data.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-widget-management-field-column__delete-button enum\"\n                        (click)=\"onDeleteRowClick($event, formRow.get('values'), $index)\"\n                      >\n                        <svg 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 (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.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]=\"data.inputTheme\"\n                    [placeholder]=\"'widgetTabManagement.content.fields.digitsInfo' | translate\"\n                    type=\"text\"\n                    formControlName=\"digitsInfo\"\n                  />\n                </cds-text-label>\n              }\n              @case (WidgetDisplayTypeKey.LINK) {\n                <cds-text-label>\n                  <v-input-label\n                    [title]=\"'widgetTabManagement.content.fields.linkText' | translate\"\n                    [tooltip]=\"'widgetTabManagement.content.fields.linkTextTooltip' | translate\"\n                  >\n                  </v-input-label>\n\n                  <input\n                    cdsText\n                    [attr.data-carbon-theme]=\"data.inputTheme\"\n                    [placeholder]=\"\n                      'widgetTabManagement.content.fields.linkTextPlaceholder' | translate\n                    \"\n                    type=\"text\"\n                    formControlName=\"linkText\"\n                  />\n                </cds-text-label>\n              }\n            }\n\n            <cds-text-label\n              *ngIf=\"formRow.get('type').value.id === WidgetDisplayTypeKey.TEXT && $isFieldWidget()\"\n            >\n              <v-input-label\n                [title]=\"'widgetTabManagement.content.fields.ellipsisCharacterLimit' | translate\"\n                tooltip=\"{{\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitTooltip' | translate\n                }}\"\n              >\n              </v-input-label>\n\n              <input\n                cdsText\n                [attr.data-carbon-theme]=\"data.inputTheme\"\n                [placeholder]=\"\n                  'widgetTabManagement.content.fields.ellipsisCharacterLimitPlaceholder' | translate\n                \"\n                type=\"text\"\n                formControlName=\"ellipsisCharacterLimit\"\n              />\n            </cds-text-label>\n\n            <cds-checkbox *ngIf=\"showHideWhenEmptyCheckbox\" formControlName=\"hideWhenEmpty\">\n              {{ 'widgetTabManagement.content.hideWhenEmpty' | translate }}\n            </cds-checkbox>\n\n            <div\n              *ngIf=\"showSortableCheckbox\"\n              class=\"valtimo-widget-management-field-column__sorting\"\n            >\n              <cds-checkbox\n                formControlName=\"sortable\"\n                (checkedChange)=\"onSortableCheckChange($index, $event)\"\n              >\n                {{ 'listColumn.sortable' | translate }}\n              </cds-checkbox>\n\n              <v-select\n                formControlName=\"defaultSort\"\n                [disabled]=\"!formRow.get('sortable')?.value\"\n                [items]=\"DEFAULT_SORT_OPTIONS\"\n                [dropUp]=\"false\"\n                [placeholder]=\"'interface.sorting.noDefault' | translate\"\n                [defaultSelectionId]=\"formRow.get('defaultSort')?.value\"\n                [warn]=\"\n                  data.defaultSortIndex !== -1 &&\n                  data.defaultSortIndex !== $index &&\n                  !!formRow.get('sortable')?.value\n                \"\n                [warnText]=\"'widgetTabManagement.content.fields.defaultSortWarning' | translate\"\n                (selectedChange)=\"onSelectedDefaultSortChange($index)\"\n              ></v-select>\n            </div>\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\n  #fieldTitle\n  let-defaultSortIndex=\"defaultSortIndex\"\n  let-count=\"count\"\n  let-index=\"index\"\n  let-title=\"title\"\n>\n  <div class=\"valtimo-widget-management-field-column__title\">\n    <section>\n      {{ title || ('widgetTabManagement.content.fields.titlePlaceholder' | translate) }}\n\n      <cds-tag *ngIf=\"$isInteractiveTableWidget() && defaultSortIndex === index\" type=\"blue\">\n        {{ 'ikoManagement.defaultSortTitle' | translate }}\n      </cds-tag>\n    </section>\n\n    <button\n      cdsButton=\"danger\"\n      [disabled]=\"count === 1\"\n      [iconOnly]=\"true\"\n      (click)=\"onDeleteRowClick($event, formRows, index)\"\n      class=\"valtimo-widget-management-field-column__delete-button\"\n    >\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-management-field-column{display:flex;flex-direction:column;gap:16px;background:var(--cds-layer-02)}.valtimo-widget-management-field-column__item,.valtimo-widget-management-field-column__cotainer{background:var(--cds-layer-01)}.valtimo-widget-management-field-column__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-management-field-column__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__content{display:grid;grid-template-columns:1fr 180px 1fr;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__content--collection{grid-template-columns:1fr 180px 180px 1fr}.valtimo-widget-management-field-column__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-management-field-column__delete-button{display:flex;align-items:center;justify-content:center;padding:0;align-self:center}.valtimo-widget-management-field-column__delete-button.enum{align-self:flex-end}.valtimo-widget-management-field-column__path-selector{display:flex;flex-direction:column}.valtimo-widget-management-field-column__options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.valtimo-widget-management-field-column__sorting{display:flex;align-items:center;align-self:flex-end;gap:16px}.valtimo-widget-management-field-column__enum{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-field-column__enum-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:flex-end;gap:16px}.valtimo-widget-management-field-column__value-field .cds--label{width:100%;margin:0}.valtimo-widget-management-field-column__value-field .cds--label cds-label{margin-bottom:8px}.valtimo-widget-management-field-column cds-checkbox{display:flex;align-items:flex-end}.valtimo-widget-management-field-column .cds--text-input,.valtimo-widget-management-field-column .cds--list-box{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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.CdsThemeService }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormBuilder }, { type: i3.IconService }, { type: i2$1.TranslateService }, { type: WidgetFieldsService }, { type: WidgetWizardService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WIDGET_MANAGEMENT_SERVICE]
@@ -4692,6 +4768,7 @@ class WidgetManagementFieldsComponent {
     constructor(fb, widgetWizardService) {
         this.fb = fb;
         this.widgetWizardService = widgetWizardService;
+        this.testIds = WIDGET_CONTENT_FIELDS_TEST_IDS;
         this.class = 'valtimo-widget-management-fields';
         this.$showTitleInput = signal(true);
         this.form = this.fb.group({
@@ -4786,7 +4863,7 @@ class WidgetManagementFieldsComponent {
         this.widgetWizardService.$widgetContentValid.set(this.form.valid && this._contentValid());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementFieldsComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementFieldsComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_tab", first: true, predicate: Tab, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"$showTitleInput()\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-fields__title-form\"\n>\n  <cds-text-label class=\"valtimo-widget-management-fields__input\">\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\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\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-widget-management-fields-column\n        *ngIf=\"activeTab() === $index\"\n        [isFieldWidget]=\"true\"\n        [columnData]=\"$selectedWidgetContent()?.[$index]\"\n        [showHideWhenEmptyCheckbox]=\"true\"\n        (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n      ></valtimo-widget-management-fields-column>\n    </cds-tab>\n  }\n\n  <cds-tab\n    *ngIf=\"$columns().length < $widgetWidth\"\n    [heading]=\"addColumn\"\n    [id]=\"'addColumn'\"\n    class=\"valtimo-widget-management-fields__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 cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n  <div class=\"valtimo-widget-management-fields__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 cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.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: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: WidgetManagementFieldsComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "_tab", first: true, predicate: Tab, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"$showTitleInput()\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-fields__title-form\"\n>\n  <cds-text-label class=\"valtimo-widget-management-fields__input\">\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      [attr.data-test-id]=\"testIds.widgetTitleInput\"\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\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-widget-management-fields-column\n        *ngIf=\"activeTab() === $index\"\n        [isFieldWidget]=\"true\"\n        [columnData]=\"$selectedWidgetContent()?.[$index]\"\n        [showHideWhenEmptyCheckbox]=\"true\"\n        (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n      ></valtimo-widget-management-fields-column>\n    </cds-tab>\n  }\n\n  <cds-tab\n    *ngIf=\"$columns().length < $widgetWidth\"\n    [heading]=\"addColumn\"\n    [id]=\"'addColumn'\"\n    class=\"valtimo-widget-management-fields__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 cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n  <div class=\"valtimo-widget-management-fields__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 cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.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: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: WidgetManagementFieldsColumnComponent, selector: "valtimo-widget-management-fields-column", inputs: ["columnData", "addTranslateKey", "fieldWidthDropdown", "selectedCollection", "showHideWhenEmptyCheckbox", "showSortableCheckbox"], outputs: ["columnUpdateEvent"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: MdiIconSelectorComponent, selector: "valtimo-mdi-icon-selector", inputs: ["labelTranslationKey", "tooltipTranslationKey", "placeholderTranslationKey", "appendInline", "dropUp"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WidgetManagementFieldsComponent, decorators: [{
             type: Component,
@@ -4802,7 +4879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         InputLabelModule,
                         MdiIconSelectorComponent,
                         LayerModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"$showTitleInput()\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-fields__title-form\"\n>\n  <cds-text-label class=\"valtimo-widget-management-fields__input\">\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\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\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-widget-management-fields-column\n        *ngIf=\"activeTab() === $index\"\n        [isFieldWidget]=\"true\"\n        [columnData]=\"$selectedWidgetContent()?.[$index]\"\n        [showHideWhenEmptyCheckbox]=\"true\"\n        (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n      ></valtimo-widget-management-fields-column>\n    </cds-tab>\n  }\n\n  <cds-tab\n    *ngIf=\"$columns().length < $widgetWidth\"\n    [heading]=\"addColumn\"\n    [id]=\"'addColumn'\"\n    class=\"valtimo-widget-management-fields__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 cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n  <div class=\"valtimo-widget-management-fields__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 cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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=\"$showTitleInput()\"\n  [formGroup]=\"form\"\n  class=\"valtimo-widget-management-fields__title-form\"\n>\n  <cds-text-label class=\"valtimo-widget-management-fields__input\">\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      [attr.data-test-id]=\"testIds.widgetTitleInput\"\n      [placeholder]=\"'widgetTabManagement.content.widgetTitlePlaceholder' | translate\"\n      type=\"text\"\n    />\n  </cds-text-label>\n\n  <valtimo-mdi-icon-selector\n    [cdsLayer]=\"1\"\n    formControlName=\"widgetIcon\"\n  ></valtimo-mdi-icon-selector>\n</form>\n\n<ng-content></ng-content>\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-widget-management-fields-column\n        *ngIf=\"activeTab() === $index\"\n        [isFieldWidget]=\"true\"\n        [columnData]=\"$selectedWidgetContent()?.[$index]\"\n        [showHideWhenEmptyCheckbox]=\"true\"\n        (columnUpdateEvent)=\"onColumnUpdateEvent($event, $index)\"\n      ></valtimo-widget-management-fields-column>\n    </cds-tab>\n  }\n\n  <cds-tab\n    *ngIf=\"$columns().length < $widgetWidth\"\n    [heading]=\"addColumn\"\n    [id]=\"'addColumn'\"\n    class=\"valtimo-widget-management-fields__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 cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</ng-template>\n\n<ng-template #columnHeading let-data>\n  <div class=\"valtimo-widget-management-fields__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 cdsIcon=\"close\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n", styles: [".cds--tab-content{padding:0!important}.valtimo-widget-management-fields{display:flex;flex-direction:column;gap:16px}.valtimo-widget-management-fields__title-form{padding:8px 0 16px 16px;background:var(--cds-layer);display:flex;gap:16px}.valtimo-widget-management-fields__input{max-width:288px}.valtimo-widget-management-fields__input input{background:var(--cds-layer-02)}.valtimo-widget-management-fields__heading{display:flex;align-items:center}.valtimo-widget-management-fields #addColumn-header{padding:0!important}.valtimo-widget-management-fields .cds--tabs__nav-item{padding-right:0!important}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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$3.FormBuilder }, { type: WidgetWizardService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -6160,5 +6237,5 @@ class ManagementWidgetDetailsComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, FilterDropdownDataProvider, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_COLOR_ILLUSTRATION_MAP, WIDGET_COLOR_ITEMS, WIDGET_COLOR_LABELS, WIDGET_COLOR_THEME_MAP, WIDGET_DENSITY_LABELS, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetColor, WidgetContainerComponent, WidgetCustomComponent, WidgetDensity, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetInteractiveTableSearchComponent, WidgetInteractiveTableService, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
+export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, FilterDropdownDataProvider, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_COLOR_ILLUSTRATION_MAP, WIDGET_COLOR_ITEMS, WIDGET_COLOR_LABELS, WIDGET_COLOR_THEME_MAP, WIDGET_CONTENT_FIELDS_TEST_IDS, WIDGET_DENSITY_LABELS, WIDGET_DIVIDER_MODAL_TEST_IDS, WIDGET_EDITOR_TEST_IDS, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIDGET_WIZARD_APPEARANCE_TEST_IDS, WIDGET_WIZARD_DENSITY_TEST_IDS, WIDGET_WIZARD_TEST_IDS, WIDGET_WIZARD_TYPE_TEST_IDS, WIDGET_WIZARD_WIDTH_TEST_IDS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetColor, WidgetContainerComponent, WidgetCustomComponent, WidgetDensity, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetInteractiveTableSearchComponent, WidgetInteractiveTableService, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
 //# sourceMappingURL=valtimo-layout.mjs.map